/* VISUAL-HERO-003B — Hero premium global administrável */
.hero-premium {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  padding: 128px 24px 72px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 82% 18%, rgba(232,84,10,0.32), transparent 34%),
    linear-gradient(135deg, #071c36 0%, var(--azul-profundo) 52%, #0f2a52 100%);
  color: #fff;
}

.hero-premium__media {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(7,28,54,var(--hero-overlay, .72)), rgba(15,42,82,.90)),
    var(--hero-image, none);
  background-size: cover;
  background-position: var(--hero-position, center center);
  opacity: 1;
  transform: scale(1.02);
}

.hero-premium__grid {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.hero-premium__glow {
  position: absolute;
  width: 360px;
  height: 360px;
  right: 8%;
  top: 18%;
  background: radial-gradient(circle, rgba(232,84,10,.34), transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}

.hero-premium__container {
  position: relative;
  z-index: 1;
  max-width: 980px;
}

.hero-premium-align-center .hero-premium__container {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hero-premium-align-left .hero-premium__container {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.hero-premium__tag {
  background: rgba(232,84,10,.18);
  color: #ffb38f;
  border: 1px solid rgba(232,84,10,.34);
}

.hero-premium__title {
  color: #fff;
  margin: 22px auto 18px;
  max-width: 920px;
}

.hero-premium__title .text-orange,
.hero-premium__title span {
  color: #ff9a6c;
}

.hero-premium__desc {
  color: rgba(255,255,255,.78);
  font-size: 18px;
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto;
}

.hero-premium-align-left .hero-premium__desc,
.hero-premium-align-left .hero-premium__title {
  margin-left: 0;
}

.hero-premium__extra {
  margin-top: 28px;
}

.hero-premium-simples .hero-premium__media {
  background-image:
    linear-gradient(135deg, rgba(7,28,54,.94), rgba(15,42,82,.94)),
    var(--hero-image, none);
}

.hero-premium-sem-imagem .hero-premium__media {
  background-image: none;
}

@media (max-width: 991px) {
  .hero-premium {
    min-height: 360px;
    padding: 132px 20px 58px;
  }

  .hero-premium__title {
    font-size: clamp(30px, 7vw, 44px);
  }

  .hero-premium__desc {
    font-size: 16px;
  }

  .hero-premium__glow {
    width: 260px;
    height: 260px;
    right: -30px;
    top: 110px;
  }
}

@media (max-width: 599px) {
  .hero-premium {
    min-height: 340px;
    padding: 124px 18px 52px;
  }

  .hero-premium__desc {
    font-size: 15px;
  }
}

/* VISUAL-HERO-003B.1 — Sem style inline: imagem via <img> e overlay por classes */
.hero-premium__media {
  background-image: linear-gradient(135deg, rgba(7,28,54,.72), rgba(15,42,82,.90));
}

.hero-premium__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  z-index: -1;
}

.hero-premium-overlay-0 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,0), rgba(15,42,82,.30)); }
.hero-premium-overlay-5 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.05), rgba(15,42,82,.35)); }
.hero-premium-overlay-10 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.10), rgba(15,42,82,.40)); }
.hero-premium-overlay-15 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.15), rgba(15,42,82,.45)); }
.hero-premium-overlay-20 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.20), rgba(15,42,82,.50)); }
.hero-premium-overlay-25 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.25), rgba(15,42,82,.55)); }
.hero-premium-overlay-30 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.30), rgba(15,42,82,.60)); }
.hero-premium-overlay-35 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.35), rgba(15,42,82,.65)); }
.hero-premium-overlay-40 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.40), rgba(15,42,82,.70)); }
.hero-premium-overlay-45 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.45), rgba(15,42,82,.75)); }
.hero-premium-overlay-50 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.50), rgba(15,42,82,.80)); }
.hero-premium-overlay-55 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.55), rgba(15,42,82,.82)); }
.hero-premium-overlay-60 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.60), rgba(15,42,82,.84)); }
.hero-premium-overlay-65 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.65), rgba(15,42,82,.86)); }
.hero-premium-overlay-70 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.70), rgba(15,42,82,.88)); }
.hero-premium-overlay-75 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.75), rgba(15,42,82,.90)); }
.hero-premium-overlay-80 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.80), rgba(15,42,82,.92)); }
.hero-premium-overlay-85 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.85), rgba(15,42,82,.94)); }
.hero-premium-overlay-90 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.90), rgba(15,42,82,.96)); }
.hero-premium-overlay-95 .hero-premium__media { background-image: linear-gradient(135deg, rgba(7,28,54,.95), rgba(15,42,82,.98)); }

.hero-premium-pos-center .hero-premium__image { object-position: center center; }
.hero-premium-pos-top .hero-premium__image { object-position: center top; }
.hero-premium-pos-bottom .hero-premium__image { object-position: center bottom; }
.hero-premium-pos-left .hero-premium__image { object-position: left center; }
.hero-premium-pos-right .hero-premium__image { object-position: right center; }

/* ==========================================================
   VISUAL-HERO-003D
   Compensação global do header fixo no Hero Premium
   ========================================================== */

.hero-premium {
  padding-top: 168px;
  min-height: 470px;
}

@media (max-width: 991px) {
  .hero-premium {
    padding-top: 154px;
    min-height: 430px;
  }
}

@media (max-width: 599px) {
  .hero-premium {
    padding-top: 146px;
    min-height: 410px;
  }
}

/* ==========================================================
   VISUAL-HERO-003E
   Correção final: laranja oficial + compensação real do header
   ========================================================== */

/* Todo destaque textual do Hero Premium volta ao laranja oficial do site */
.hero-premium__title span,
.hero-premium__title .text-orange,
.hero-premium__tag,
.psi-hero-premium .hero-premium__title span,
.wl-hero-premium .hero-premium__title span,
.esocial-hero-premium .hero-premium__title span,
.servicos-hero-premium .hero-premium__title span,
.treinamentos-hero-premium .hero-premium__title span,
.blog-index-hero-premium .hero-premium__title span,
.contato-hero-premium .hero-premium__title span,
.sobre-hero-premium .hero-premium__title span,
.clientes-hero-premium .hero-premium__title span,
.orcamento-hero-premium .hero-premium__title span {
  color: var(--laranja) !important;
  -webkit-text-fill-color: var(--laranja) !important;
}

/* Compensação forte e global do header fixo */
main > .hero-premium,
.hero-premium {
  padding-top: 190px !important;
}

@media (max-width: 991px) {
  main > .hero-premium,
  .hero-premium {
    padding-top: 180px !important;
  }
}

@media (max-width: 599px) {
  main > .hero-premium,
  .hero-premium {
    padding-top: 168px !important;
  }
}

/* ==========================================================
   VISUAL-HERO-003E.1
   Ajuste fino: reduz excesso de espaço após header fixo
   ========================================================== */

main > .hero-premium,
.hero-premium {
  padding-top: 162px !important;
}

@media (max-width: 991px) {
  main > .hero-premium,
  .hero-premium {
    padding-top: 150px !important;
  }
}

@media (max-width: 599px) {
  main > .hero-premium,
  .hero-premium {
    padding-top: 138px !important;
  }
}

/* ==========================================================
   VISUAL-HERO-003F
   Normalização final de espaçamento global dos heros públicos
   ========================================================== */

/* Base única para todos os heros migrados */
main > .hero-premium,
.hero-premium {
  padding-top: 154px !important;
  padding-bottom: 76px !important;
  min-height: 440px !important;
}

/* Heros com conteúdo extra maior: mantém respiro sem exagero */
.hero-premium:has(.hero-premium__extra) {
  padding-bottom: 82px !important;
}

/* Tablet */
@media (max-width: 991px) {
  main > .hero-premium,
  .hero-premium {
    padding-top: 138px !important;
    padding-bottom: 62px !important;
    min-height: 400px !important;
  }

  .hero-premium:has(.hero-premium__extra) {
    padding-bottom: 68px !important;
  }
}

/* Celular */
@media (max-width: 599px) {
  main > .hero-premium,
  .hero-premium {
    padding-top: 126px !important;
    padding-bottom: 54px !important;
    min-height: 380px !important;
  }

  .hero-premium:has(.hero-premium__extra) {
    padding-bottom: 60px !important;
  }
}

/* ==========================================================
   VISUAL-HERO-003G
   Padronização de heros curtos: Contato, Orçamento e Área do Cliente
   ========================================================== */

.contato-hero-premium,
.orcamento-hero-premium,
.area-cliente-hero-premium,
.hero-premium-compact {
  padding-top: 154px !important;
  padding-bottom: 76px !important;
  min-height: 440px !important;
}

.contato-hero-premium .hero-premium__container,
.orcamento-hero-premium .hero-premium__container,
.area-cliente-hero-premium .hero-premium__container,
.hero-premium-compact .hero-premium__container {
  max-width: 980px;
}

@media (max-width: 991px) {
  .contato-hero-premium,
  .orcamento-hero-premium,
  .area-cliente-hero-premium,
  .hero-premium-compact {
    padding-top: 138px !important;
    padding-bottom: 62px !important;
    min-height: 400px !important;
  }
}

@media (max-width: 599px) {
  .contato-hero-premium,
  .orcamento-hero-premium,
  .area-cliente-hero-premium,
  .hero-premium-compact {
    padding-top: 126px !important;
    padding-bottom: 54px !important;
    min-height: 380px !important;
  }
}

/* ==========================================================
   VISUAL-HERO-004
   Consolidação real do padrão único Hero Premium
   ========================================================== */

/* Um único comportamento visual para todos os heros públicos */
main > .hero-premium,
.hero-premium,
.contato-hero-premium,
.orcamento-hero-premium,
.area-cliente-hero-premium,
.treinamentos-hero-premium,
.servicos-hero-premium,
.esocial-hero-premium,
.psi-hero-premium,
.wl-hero-premium,
.blog-index-hero-premium,
.sobre-hero-premium,
.clientes-hero-premium {
  padding-top: 146px !important;
  padding-bottom: 74px !important;
  min-height: 440px !important;
  display: flex !important;
  align-items: center !important;
}

/* Container interno padronizado */
.hero-premium .hero-premium__container {
  max-width: 980px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Badge, título e descrição com distâncias iguais */
.hero-premium .hero-premium__tag {
  margin-bottom: 20px !important;
}

.hero-premium .hero-premium__title {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.hero-premium .hero-premium__desc {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Conteúdo extra sempre com respiro igual */
.hero-premium .hero-premium__extra {
  margin-top: 34px !important;
}

/* Tablet */
@media (max-width: 991px) {
  main > .hero-premium,
  .hero-premium,
  .contato-hero-premium,
  .orcamento-hero-premium,
  .area-cliente-hero-premium,
  .treinamentos-hero-premium,
  .servicos-hero-premium,
  .esocial-hero-premium,
  .psi-hero-premium,
  .wl-hero-premium,
  .blog-index-hero-premium,
  .sobre-hero-premium,
  .clientes-hero-premium {
    padding-top: 132px !important;
    padding-bottom: 62px !important;
    min-height: 400px !important;
  }
}

/* Celular */
@media (max-width: 599px) {
  main > .hero-premium,
  .hero-premium,
  .contato-hero-premium,
  .orcamento-hero-premium,
  .area-cliente-hero-premium,
  .treinamentos-hero-premium,
  .servicos-hero-premium,
  .esocial-hero-premium,
  .psi-hero-premium,
  .wl-hero-premium,
  .blog-index-hero-premium,
  .sobre-hero-premium,
  .clientes-hero-premium {
    padding-top: 122px !important;
    padding-bottom: 54px !important;
    min-height: 380px !important;
  }
}

/* ==========================================================
   VISUAL-HERO-004C
   Padronização do topo para heros sem conteúdo extra
   ========================================================== */

.contato-hero-premium,
.orcamento-hero-premium,
.area-cliente-hero-premium {
  align-items: flex-start !important;
  padding-top: 146px !important;
}

@media (max-width: 991px) {
  .contato-hero-premium,
  .orcamento-hero-premium,
  .area-cliente-hero-premium {
    align-items: flex-start !important;
    padding-top: 132px !important;
  }
}

@media (max-width: 599px) {
  .contato-hero-premium,
  .orcamento-hero-premium,
  .area-cliente-hero-premium {
    align-items: flex-start !important;
    padding-top: 122px !important;
  }
}

/* ==========================================================
   VISUAL-HERO-004D
   Padrão definitivo: topo fixo para todos os heros premium
   ========================================================== */

/*
   Remove a diferença visual causada por centralização vertical.
   Todas as páginas passam a seguir:
   header -> espaço fixo -> badge -> título -> descrição -> conteúdo extra.
*/

main > .hero-premium,
.hero-premium,
.treinamentos-hero-premium,
.servicos-hero-premium,
.esocial-hero-premium,
.psi-hero-premium,
.wl-hero-premium,
.blog-index-hero-premium,
.contato-hero-premium,
.sobre-hero-premium,
.clientes-hero-premium,
.orcamento-hero-premium,
.area-cliente-hero-premium {
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  padding-top: 146px !important;
  padding-bottom: 74px !important;
  min-height: 440px !important;
}

.hero-premium .hero-premium__container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.hero-premium .hero-premium__tag {
  display: inline-flex !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

.hero-premium .hero-premium__title {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.hero-premium .hero-premium__desc {
  margin-top: 0 !important;
}

@media (max-width: 991px) {
  main > .hero-premium,
  .hero-premium,
  .treinamentos-hero-premium,
  .servicos-hero-premium,
  .esocial-hero-premium,
  .psi-hero-premium,
  .wl-hero-premium,
  .blog-index-hero-premium,
  .contato-hero-premium,
  .sobre-hero-premium,
  .clientes-hero-premium,
  .orcamento-hero-premium,
  .area-cliente-hero-premium {
    display: block !important;
    padding-top: 132px !important;
    padding-bottom: 62px !important;
    min-height: 400px !important;
  }
}

@media (max-width: 599px) {
  main > .hero-premium,
  .hero-premium,
  .treinamentos-hero-premium,
  .servicos-hero-premium,
  .esocial-hero-premium,
  .psi-hero-premium,
  .wl-hero-premium,
  .blog-index-hero-premium,
  .contato-hero-premium,
  .sobre-hero-premium,
  .clientes-hero-premium,
  .orcamento-hero-premium,
  .area-cliente-hero-premium {
    display: block !important;
    padding-top: 122px !important;
    padding-bottom: 54px !important;
    min-height: 380px !important;
  }
}