/* Hero reestruturado em 21/07/2026 (referência: Purelis Beauty, pedido do
   Ricardo) — trocou de foto full-bleed com painel de vidro por cima pra um
   layout dividido: texto num lado (fundo liso --cor-linho, sem degradê nem
   overlay nenhum), foto real contida no outro lado, como um elemento visual
   próprio, não um plano de fundo. As 3 rodadas anteriores desse hero
   (degradê duro > degradê suave + vidro > este) ficam documentadas em
   _planos/EQMS-REDESIGN-VISUAL.md, não repetidas aqui. */

.hero-split{
    position: relative;
    padding-block: var(--espaco-2xl);
    background: var(--cor-linho);
    overflow: hidden;
}
/* position:relative acima e o fix, nao um ajuste visual: .hero-split__selo
   e position:absolute e dependia de um transform inline TEMPORARIO do GSAP
   como containing block. Quando a trava de seguranca do motion.js remove
   esse transform (clearProps, 4s depois do load), o selo perdia a
   referencia de posicionamento e flutuava pra fora da secao, sobre a
   vitrine 3D. Com position:relative aqui, o containing block do selo e
   sempre a propria secao, independente do que o GSAP fizer (achado real,
   corrigido 04/08/2026, auditoria 360). */

/* Quarto ajuste do mesmo dia (24/07/2026, pedido do Ricardo com print de
   referencia): nao e mais foto cobrindo a secao inteira (tentativa
   anterior) — agora e layout de duas colunas de verdade, painel escuro
   ocupando a maior parte da largura a esquerda, foto ocupando so ~45% da
   largura mas 100% da altura da hero a direita, com o corte diagonal na
   divisa entre os dois (mesma logica da referencia "hero-section-2":
   texto solido a esquerda, foto contida a direita, min-height:100%). */
.hero-split--foto-cheia{
    padding-block: 0;
    /* Oitavo ajuste do mesmo dia (24/07/2026): "min-height" deixava a
       altura ambigua pro flexbox resolver — como ".hero-split__foto img"
       tem "height:100%" mas o pai so garantia uma altura MINIMA (nao
       definida), o navegador as vezes resolvia pelo tamanho intrinseco da
       imagem em vez do minimo (medido ao vivo: 809px em vez dos 460px
       pedidos), deixando o texto (330px de conteudo real) centralizado
       dentro de um espaco bem maior que o necessario. Trocado pra
       "height" fixo: com um valor DEFINIDO (nao so minimo), a resolucao
       de "height:100%" nos filhos fica sem ambiguidade. */
    height: 460px;
    display: flex;
    align-items: stretch;
}
.hero-split--foto-cheia .hero-split__grade{
    /* Ordem visual: painel de texto sempre a ESQUERDA, foto a DIREITA,
       nao importa a ordem no HTML (o "order" resolve sem precisar mexer
       no front-page.php de novo). */
    order: 1;
    align-self: stretch;
    flex: 1 1 auto;
    max-width: none;
    width: auto;
    margin: 0;
    padding-block: var(--espaco-2xl);
    padding-inline: var(--espaco-2xl);
    display: flex;
    align-items: center;
}
.hero-split--foto-cheia .hero-split__foto{
    order: 2;
    align-self: stretch;
    position: relative;
    flex: 0 0 45%;
    width: 45%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
}

/* Sexto ajuste do mesmo dia (24/07/2026, pedido direto do Ricardo: "APENAS
   REMOVA A CAIXA, NAO TROQUE DE COR"). Caixa removida de vez, sem tentar
   mais nenhuma cor de fundo nela. O texto volta a usar as MESMAS cores da
   versao original do hero (fundo liso --cor-linho por tras, titulo
   --cor-cacau, botao primario --cor-mata, link --cor-mata) — as regras
   base mais abaixo neste arquivo (".hero-split__titulo",
   ".hero-split__subtitulo" etc) ja fazem isso sozinhas, entao aqui so
   preenche a largura da coluna, sem nenhum estilo de cor/fundo/vidro. */
.hero-split--foto-cheia .hero-split__texto{
    width: 100%;
    box-sizing: border-box;
}
/* Titulo reduzido so nesta versao da hero: --texto-4xl (72px no desktop)
   ficava grande demais sem a caixa pra "conter" visualmente o tamanho —
   mesmo ajuste de escala do setimo item acima, sem mexer na cor (que ja
   volta a ser a --cor-cacau padrao, herdada da regra base abaixo). */
.hero-split--foto-cheia .hero-split__titulo{
    font-size: var(--texto-2xl);
}
.hero-split--foto-cheia .hero-split__ctas .btn{
    font-size: var(--texto-xs);
    padding: var(--espaco-xs) var(--espaco-md);
    /* Achado real (auditoria de responsividade, 01/08/2026): a redução de
       tamanho pedida pro hero deixou os 2 CTAs principais ("Ver produtos",
       "Conheça nossas terapias") com 34-37px de altura real, abaixo do
       alvo de toque mínimo, em mobile. min-height mantém o texto pequeno
       (como pedido) só garantindo área de toque suficiente ao redor. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.hero-split__grade{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-2xl);
    align-items: center;
}

.hero-split__slogan{
    display: block;
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cor-musgo);
    margin-bottom: var(--espaco-sm);
}

.hero-split__titulo{
    font-size: var(--texto-4xl);
    line-height: 1.1;
    color: var(--cor-cacau);
    margin-bottom: var(--espaco-md);
}

.hero-split__divisor{
    width: 64px;
    height: 4px;
    background: var(--cor-terracota);
    border-radius: var(--raio-pill);
    margin-block: var(--espaco-md);
}

.hero-split__subtitulo{
    font-size: var(--texto-md);
    color: var(--cor-cacau-70);
    max-width: 460px;
    margin-bottom: var(--espaco-lg);
}

.hero-split__ctas{
    display: flex;
    align-items: center;
    gap: var(--espaco-lg);
    flex-wrap: wrap;
}

.hero-split__contato{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--espaco-sm) var(--espaco-lg);
    margin-top: var(--espaco-xl);
    padding-top: var(--espaco-lg);
    border-top: 1px solid var(--vidro-borda-escura);
}
.hero-split__contato-item{
    display: flex;
    align-items: center;
    gap: var(--espaco-xs);
    font-size: var(--texto-xs);
    color: var(--cor-cacau-70);
}
.hero-split__contato-item .icone{
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--cor-musgo);
}
.hero-split__contato-item .icone svg{
    width: 100%;
    height: 100%;
}

.hero-split__foto{
    position: relative;
    aspect-ratio: 4 / 3.2;
    border-radius: var(--raio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-lg);
}
.hero-split__foto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Selo em vidro (achado "Hero sem nenhum contato com o sistema de vidro",
   _planos/EQMS-AUDITORIA-DESIGN-VISUAL.md, 24/07/2026). Reaproveita
   EXATAMENTE o mesmo tratamento ja validado em .produto-card__badge--novo:
   fundo mata 55% de opacidade, blur 12px (--vidro-blur-sm), borda branca
   35%, mesma tipografia de pilula. Com a foto cobrindo a secao inteira,
   fica ancorado no canto inferior direito da propria secao (nao mais da
   foto, que agora e a secao inteira), longe do painel de texto. */
.hero-split__selo{
    position: absolute;
    right: var(--espaco-md);
    bottom: var(--espaco-md);
    left: auto;
    z-index: 1;
    background: rgba(47, 74, 51, 0.55);
    backdrop-filter: var(--vidro-blur-sm);
    -webkit-backdrop-filter: var(--vidro-blur-sm);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--cor-branco);
    border-radius: var(--raio-pill);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--espaco-2xs) var(--espaco-sm);
}

/* Animacao de entrada da hero v2 (24/07/2026) — CSS puro, @keyframes com
   "animation-delay" escalonado por elemento (equivalente ao "staggerChildren"
   do framer-motion na referencia), e clip-path revelando a foto em diagonal.
   Tudo dispara sozinho no carregamento da pagina, sem JS: e um efeito de
   entrada UNICO, nao precisa de scroll nem de ScrollTrigger. Convive sem
   conflito com o fade geral de ".hero-split" que o motion.js ja faz (esse
   anima o bloco inteiro; isto aqui anima cada filho, exatamente como a
   referencia faz com "containerVariants" + "itemVariants"). */
@keyframes heroV2FadeUp{
    from{ opacity: 0; transform: translateY(20px); }
    to{ opacity: 1; transform: translateY(0); }
}
@keyframes heroV2Revela{
    from{ clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
    to{ clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); }
}
.hero-split__slogan,
.hero-split__titulo,
.hero-split__divisor,
.hero-split__subtitulo,
.hero-split__ctas,
.hero-split__contato{
    animation: heroV2FadeUp 0.6s ease-out both;
}
.hero-split__slogan{ animation-delay: 0.1s; }
.hero-split__titulo{ animation-delay: 0.22s; }
.hero-split__divisor{ animation-delay: 0.36s; }
.hero-split__subtitulo{ animation-delay: 0.48s; }
.hero-split__ctas{ animation-delay: 0.6s; }
.hero-split__contato{ animation-delay: 0.72s; }
.hero-split__foto{
    animation: heroV2Revela 1.1s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@media (prefers-reduced-motion: reduce){
    .hero-split__slogan,
    .hero-split__titulo,
    .hero-split__divisor,
    .hero-split__subtitulo,
    .hero-split__ctas,
    .hero-split__contato,
    .hero-split__foto{
        animation: none;
    }
}

@media (max-width: 900px){
    .hero-split__grade{
        grid-template-columns: 1fr;
    }
    .hero-split__titulo{ font-size: var(--texto-3xl); }
    /* Layout de duas colunas (painel + foto 45%/100%) vira empilhado no
       mobile, foto com altura fixa no topo, mesmo padrao responsivo da
       referencia original (full width + altura minima antes do
       breakpoint md, 45% de largura + altura cheia só a partir dele). */
    .hero-split--foto-cheia{
        flex-direction: column;
        height: auto;
    }
    .hero-split--foto-cheia .hero-split__foto{
        flex: 0 0 260px;
        width: 100%;
    }
    .hero-split--foto-cheia .hero-split__grade{
        padding-inline: var(--espaco-lg);
        padding-block: var(--espaco-xl);
    }
}

@media (max-width: 600px){
    /* Fix de hierarquia H1/H2 (achado "Hierarquia H1/H2 colapsa em mobile",
       _planos/EQMS-AUDITORIA-DESIGN-VISUAL.md, medido ao vivo 24/07/2026):
       nesta largura o H1 do hero e um H2 padrao de secao usavam o mesmo
       token (--texto-2xl, piso 30px), ficando identicos. Troca so aqui, so
       pro titulo do hero, pro proximo degrau da mesma escala fluida
       (--texto-3xl, piso 2.25rem / 36px) pra manter folga de hierarquia
       visivel em qualquer largura. */
    .hero-split__titulo{ font-size: var(--texto-3xl); }
    .hero-split{ padding-block: var(--espaco-xl); }
}