/* ==========================================================================
   VERSÃO G · MANIFESTO (20/10/2026)
   Ideia: o slogan é a marca, então ele ocupa a largura inteira, numa linha,
   do tamanho de um cartaz. Em cima, uma linha discreta: a marca à esquerda e o
   subtítulo à direita, como cabeçalho de jornal. Embaixo, a busca e os números
   lado a lado, em pé de igualdade: a promessa grande, e logo abaixo a prova
   (o que acontece e o que se mede).
   Técnica: display: contents nas duas caixas do título, para os filhos
   entrarem direto numa grade com áreas nomeadas.
   ========================================================================== */

html[data-versao="g"][data-harmonia] .hero { padding-top: clamp(3.2rem, 10vh, 6rem); }

@media (min-width: 1080px) {
  html[data-versao="g"][data-harmonia] .hero .envoltorio {
    display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 3rem;
    grid-template-areas: "marca sub" "slogan slogan" "busca medidas" "faixa faixa";
    align-items: end;
  }
  html[data-versao="g"] .hero .hero__topo,
  html[data-versao="g"][data-inteligente~="busca"] .hero .hero__topo,
  html[data-versao="g"] .hero .hero__titulo { display: contents; }
  html[data-versao="g"] .hero .hero__marca.hero__marca--palavra { grid-area: marca; margin: 0; align-self: center; }
  html[data-versao="g"] .hero .hero__sub {
    grid-area: sub; margin: 0; justify-self: end; text-align: right; max-width: 30rem; font-size: .98rem;
  }
  html[data-versao="g"][data-harmonia] .hero h1 {
    grid-area: slogan; font-size: min(6.2vw, 6.8rem); line-height: 1; letter-spacing: -.045em;
    margin: clamp(2rem, 5vh, 3rem) 0 clamp(2.2rem, 5vh, 3.2rem); padding-top: clamp(1.6rem, 4vh, 2.4rem);
    border-top: 1px solid var(--borda);
  }
  html[data-versao="g"] .hero .busca-viva { grid-area: busca; align-self: start; margin: 0; }
  html[data-versao="g"] .hero .medidas { grid-area: medidas; margin: 0; align-self: start; }
  html[data-versao="g"] .hero .faixa-viva { grid-area: faixa; }
  html[data-versao="g"] .hero .botoes { display: none; }
  /* números mais compactos ao lado da busca */
  html[data-versao="g"] .hero .medida { padding: 1.1rem 1.2rem 1rem; }
  html[data-versao="g"] .hero .medida .glifo { display: none; }
}
@media (max-width: 1079px) {
  html[data-versao="g"][data-harmonia] .hero h1 { font-size: clamp(2.4rem, 9vw, 4rem); white-space: normal; }
}
/* display: contents tira a caixa da coluna do título, e o observador de
   entrada (data-rev) nunca a vê: os textos ficariam escondidos para sempre.
   Aqui eles entram já visíveis. A marca fica de fora: o voo até o cabeçalho
   é um transform nela. */
@media (min-width: 1080px) {
  html[data-versao="g"] .hero h1 .pal,
  html[data-versao="g"] .hero .hero__sub { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* celular: o slogan numa linha só, como no resto (empilhado formava "AVC") */
@media (max-width: 620px) {
  html[data-versao="g"][data-harmonia] .hero h1 { font-size: 1.82rem; white-space: nowrap; }
}