/*
  Layout definitivo da Home (v1) - grid, posicionamento, responsividade
  e microinteracoes desta pagina. Cores, tipografia e componentes-base
  vem de design-system.css (nao alterado); este arquivo posiciona os
  blocos e aplica os refinamentos especificos da Home.
  Ver knowledge/fundacao/layout-visual-home-v1.md e
  knowledge/fundacao/direcao-criativa-home-gali.md.

  Header sobre o hero, composicao texto+Gali, curva organica e
  atmosfera quente vinda do gradiente (sem fotografia de paisagem real
  na biblioteca de assets).

  HOME-002: refinamento de header (grid para centralizar a navegacao),
  proporcao texto/Gali, hierarquia tipografica, sombra de apoio sob a
  Gali e curva mais organica. A biblioteca oficial da Gali ainda nao
  tem alpha real (ver CLAUDE.md) - fora de escopo aqui, tratado como
  tarefa dedicada de assets.

  HOME-FIDELIDADE-001: logotipo oficial (logo.jpg, sem alpha - por isso
  o "chip" com fundo proprio) no cabecalho; camadas extras de
  gradiente/vinheta para atmosfera (sem fotografia); motivo geometrico
  tambem visivel no Hero (copia local, .motivo-fundo do resto do site
  continua fixo/institucional e nao foi alterado).

  HOME-FIDELIDADE-001 (2a passada): troca da Gali para gali-master.png
  (asset oficial com alpha real - substitui gali-presenting-left.png,
  que nao tinha recorte real). Letreiro volta para dentro da figura,
  atras da Gali, agora que a transparencia de verdade permite isso.
  Gali levemente maior e mais proxima da curva (recomposicao pedida).

  HOME-FIDELIDADE-002: a dobra nao tem mais min-height:100svh forcado -
  isso e o padding do Hero e o que fazia a pagina passar da viewport.
  No desktop a Gali agora e limitada por ALTURA (nao largura) - como a
  imagem dela e vertical (proporcao 2:3), limitar so a largura deixava
  a altura crescer sem controle em telas largas. Tablet/mobile voltam a
  ser limitados por largura (podem rolar, por decisao explicita).

  HOME-HERO-INTEGRACAO-001: fundo-hero.png (fotografia oficial - ceu,
  mar, areia, sol, palmeiras e o letreiro "Porto de Galinhas" ja
  embutidos, inclusive a faixa clara inferior) substitui o gradiente e
  as camadas de brilho/vinheta simuladas em CSS - removidas por ficarem
  redundantes. A curva SVG propria tambem saiu: a imagem ja tem a dela.
  O letreiro separado (letreiro-porto-de-galinhas.png) deixou de ser
  usado no Hero pelo mesmo motivo (arquivo continua em public/img/,
  so nao e mais referenciado aqui). A Gali segue como camada
  independente por cima do fundo.

  HOME-HERO-002: fundo-hero.png foi atualizado (mesmo nome, conteudo
  novo) e nao tem mais o letreiro embutido - virou fundo puro. Letreiro
  volta como camada propria (letreiro.png, alpha real), agora
  posicionado dentro de .home-hero__figura junto com a Gali, entao a
  relacao espacial entre os dois fica estavel (nao depende mais do
  recorte do background em telas largas/estreitas, como acontecia
  antes). Gali trocada para gali-portrait-present.png (busto/meio corpo,
  pasta portraits) - a sombra de apoio "de pes" foi removida por nao
  fazer mais sentido com um portrait que sangra na base da figura.

  HOME-POLIMENTO-001: removida a cor de fundo customizada do
  .home-rodape (era uma "segunda faixa clara" via CSS, tentando imitar
  a faixa que ja existe em fundo-hero.png - agora a faixa inferior vem
  exclusivamente da imagem). Logo do cabecalho, Gali e letreiro
  aumentados; Gali deslocada alguns px a esquerda; bloco de texto subiu;
  CTA principal com mais presenca (altura, gradiente, sombra).
*/

:root {
  --home-dur-rapida: 160ms;
  --home-dur-lenta: 480ms;
  --home-facilidade: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --home-dur-rapida: 1ms;
    --home-dur-lenta: 1ms;
  }
}

/* Motivo decorativo discreto (mesmo motivo geometrico do restante do
   site) - fica atras da primeira dobra opaca, so aparece na zona
   institucional. */
.motivo-fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
}
.motivo-fundo svg { width: 100%; height: 100%; }

/* ---------- Primeira dobra (Header + Hero + Curva) ---------- */

.home-dobra {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background-image: url("img/home-fundo.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  color: #2a1810;
}

/* ---------- Cabecalho ---------- */

.home-cabecalho {
  position: relative;
  /* Acima do hero (z-index 1-3) para que o dropdown mobile nunca
     fique atras do titulo/Gali - header e hero sao irmaos dentro de
     .home-dobra, e sem isso o hero (depois no DOM) pintaria por cima
     em caso de empate de z-index. */
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--espaco-4);
  padding: 18px clamp(20px, 4vw, 56px) 0;
}

.home-cabecalho__marca {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
}

.home-cabecalho__logo {
  display: block;
  height: 120px;
  width: auto;
  transition: transform var(--home-dur-rapida) ease;
}

.home-cabecalho__marca:hover .home-cabecalho__logo {
  transform: translateY(-1px);
}

.home-cabecalho__nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--espaco-6);
  font-size: 1.25rem;
  font-weight: 500;
  /* Bloco inteiro deslocado para a direita, em direcao ao eixo do
     braco/mao da Gali e do grupo de icones do rodape - so a
     posicao horizontal do menu, mais nada. */
  transform: translateX(170px);
}

.home-cabecalho__nav a {
  position: relative;
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--home-dur-rapida) ease;
}

/* Hover/focus: mesmo peso para os quatro itens, sem destaque
   permanente para nenhum. Letter-spacing levemente negativo compensa
   a largura extra do bold, evitando reflow perceptivel dos vizinhos. */
.home-cabecalho__nav a:hover,
.home-cabecalho__nav a:focus-visible {
  opacity: 1;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Botao de menu mobile - so aparece em <=767px (ver media query).
   Escondido por padrao no desktop/tablet, onde o .home-cabecalho__nav
   ja e a navegacao horizontal visivel. */
.home-cabecalho__menu-toggle {
  display: none;
  grid-column: 2;
  justify-self: end;
}

.home-cabecalho__menu-toggle-linha {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* ---------- Hero ---------- */

.home-hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  /* flex-end (nao center) - evita sobra de espaco vazio abaixo do
     conteudo/Gali entre eles e a curva do fundo-hero.png. */
  align-items: flex-end;
  padding: 16px 0 8px;
}

.home-hero__linha {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espaco-8);
  /* Mesmo padding do header/footer (clamp 20-56px) - os tres
     compartilham o eixo esquerdo (logo / bloco principal / rodape). */
  padding-inline: clamp(20px, 4vw, 56px);
}

/* Motivo geometrico, atras do bloco de texto - textura sutil, nao
   compete com a leitura. */
.home-hero__motivo {
  position: absolute;
  z-index: 0;
  top: 6%;
  left: -6%;
  width: 50%;
  height: 75%;
  opacity: 0.22;
  pointer-events: none;
}

.home-hero__conteudo {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Largura encolhe para o conteudo (o titulo, o mais largo) em vez de
     ocupar uma fatia fixa da linha - assim a borda esquerda do bloco
     cai exatamente onde a linha comeca (mesmo eixo do logo/rodape),
     e o subtitulo/CTA/link continuam centralizados em relacao ao
     titulo dentro dessa largura ajustada. */
  flex: 0 0 auto;
  animation: home-aparecer var(--home-dur-lenta) var(--home-facilidade) both;
}

.home-titulo {
  margin-top: var(--espaco-5);
  max-width: none;
  font-size: clamp(2.8rem, 1.1rem + 4.8vw, 4.95rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.home-subtitulo {
  margin-top: var(--espaco-4);
  margin-bottom: 0;
  max-width: 30ch;
  font-size: 1.24rem;
  opacity: 0.78;
}

/* GPG-HOME-MOBILE-COMPOSICAO-001: texto mais curto exclusivo do mobile
   (mesmo padrao do .home-cta__texto-padrao / __texto-mobile) - escondido
   por padrao aqui; a media query mobile esconde .home-subtitulo__detalhe
   e mostra este no lugar. Desktop/tablet nao mudam de texto. */
.home-subtitulo__detalhe-mobile {
  display: none;
}

.home-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  /* Margens iguais acima/abaixo - o CTA fica exatamente no meio entre
     o subtitulo e o link "Prefere explorar sozinho?". */
  margin-top: var(--espaco-6);
  margin-bottom: var(--espaco-6);
  padding: 27px 60px;
  font-size: 1.2rem;
  color: #fdfaf5;
  background: linear-gradient(135deg, #eeae57 0%, #e2764d 55%, #c04a3e 100%);
  box-shadow: 0 16px 34px rgba(160, 58, 48, 0.4);
  transition: opacity var(--home-dur-rapida) ease, transform var(--home-dur-rapida) ease;
}

.home-cta__icone {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* Texto responsivo do CTA - mesmo principio do subtitulo
   (.home-subtitulo__intro / __quebra): dois spans no HTML, so um
   visivel por vez via display, controlado por breakpoint. Base
   (desktop/tablet) mostra __texto-padrao; mobile troca no media query
   abaixo. */
.home-cta__texto-mobile {
  display: none;
}

.home-cta:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.home-cta:active {
  transform: translateY(0);
}

.home-alternativo {
  margin-top: 0;
  font-size: 0.9rem;
}

.home-alternativo a {
  color: inherit;
  text-decoration: underline;
  transition: opacity var(--home-dur-rapida) ease;
}

.home-alternativo a:hover {
  opacity: 0.75;
}

/* ---------- Gali (protagonista) ---------- */

.home-hero__figura {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Ondulacao - camada de primeiro plano, cobre a base reta do PNG da
   Gali e separa visualmente o Hero da faixa inferior. Atravessa toda
   a largura do Hero (nao fica presa a coluna da figura). */
.home-hero__ondulacao {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -90px;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.home-hero__gali {
  position: relative;
  z-index: 1;
  /* Limitada por ALTURA no desktop - a imagem e vertical, entao so
     limitar a largura deixava a altura crescer livre em telas largas e
     estourar a viewport. Tablet/mobile revertem para largura.
     HOME-FIDELIDADE-001: escala aumentada (69vh -> 82vh) para
     aproximar da referencia MASTER, onde a Gali domina a metade
     direita do Hero como segunda protagonista, nao um elemento
     decorativo pequeno. */
  width: auto;
  height: min(calc(100vh - 172px), 900px);
  max-width: none;
  display: block;
  filter: drop-shadow(0 20px 32px rgba(42, 24, 16, 0.2));
  animation: home-respirar 6s ease-in-out infinite;
}

@keyframes home-respirar {
  0%, 100% { transform: translateX(-16px) translateY(0) scale(1); }
  50%      { transform: translateX(-16px) translateY(-6px) scale(1.008); }
}

/* ---------- Zona institucional (rodape) ---------- */
/* O rodape mora dentro da faixa clara da ondulacao (camada 4, acima
   dela mas sem gerar altura propria no documento - a "dobra" continua
   igual a viewport). Fica ancorado ao fundo de .home-dobra, na parte
   estavel/plana da onda, longe da curva mais inclinada. */

.home-rodape {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 6px;
}

.home-rodape__linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-4);
  /* Padding no mesmo elemento que tem .gali-container (nao no pai) -
     mesmo eixo esquerdo do header/hero, que seguem esse padrao. */
  padding-inline: clamp(20px, 4vw, 56px);
}

.home-rodape__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--espaco-7);
  row-gap: var(--espaco-2);
  font-size: 1.1rem;
}

.home-rodape__links a {
  color: #2a1810;
  font-weight: 500;
  text-decoration: none;
  transition: opacity var(--home-dur-rapida) ease;
}

.home-rodape__links a:hover,
.home-rodape__links a:focus-visible {
  text-decoration: none;
  opacity: 0.7;
}

/* Instagram/WhatsApp - icones simples, sem card/fundo, mesma cor
   escura do restante do rodape. */
.home-rodape__links--icones {
  column-gap: var(--espaco-5);
}

.home-rodape__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  color: #2a1810;
  opacity: 0.85;
  transition: opacity var(--home-dur-rapida) ease;
}

.home-rodape__icone svg,
/* GPG-HOME-MOBILE-ICONES-001: img adicionado ao lado de svg (nao no
   lugar dele) - planejar.html carrega este mesmo home.css e ainda usa
   os icones em <svg> inline; trocar o seletor quebraria o rodape la.
   Mesmo tamanho visual de sempre (33px desktop / 26px mobile abaixo),
   os PNGs novos ocupam 100% do proprio canvas (sem padding
   transparente), entao nao precisou de object-fit. */
.home-rodape__icone img {
  width: 33px;
  height: 33px;
}

.home-rodape__icone:hover,
.home-rodape__icone:focus-visible {
  opacity: 1;
}

/* ---------- Responsividade ---------- */

/* Tablet: mantem texto + Gali lado a lado, com ajustes proprios
   (nao e apenas o desktop encolhido). Composicao do fundo preservada -
   so a Gali/coluna encolhem. */
@media (max-width: 1023px) {
  /* Reset de conflitos herdados do desktop: o deslocamento do menu e
     o encolhe-para-o-conteudo do bloco principal foram calibrados para
     a largura do desktop especificamente e nao se aplicam aqui. */
  .home-cabecalho__nav {
    gap: var(--espaco-4);
    font-size: 0.85rem;
    transform: none;
  }

  .home-cabecalho__logo {
    height: 84px;
  }

  .home-hero__linha {
    gap: var(--espaco-6);
  }

  .home-hero__conteudo {
    flex: 1 1 52%;
    min-width: 0;
  }

  .home-hero__figura {
    flex: 1 1 48%;
  }

  .home-titulo {
    font-size: clamp(1.9rem, 1rem + 3vw, 2.6rem);
  }

  .home-hero__gali {
    width: min(100%, 448px);
    height: auto;
  }

  /* Onda calibrada em px fixos para a Gali alta do desktop - na Gali
     mais baixa do tablet (largura, nao altura) o deslocamento nao
     bate mais; sai ate termos um tratamento proprio para essa faixa. */
  .home-hero__ondulacao {
    display: none;
  }

  /* Rodape passa a fluxo normal - a versao absoluta dependia da dobra
     ter exatamente a altura da viewport, o que so e garantido no
     desktop (Gali por altura). Aqui ele so aparece depois do conteudo,
     sem gerar corte nem sobreposicao. */
  .home-rodape {
    position: static;
    margin-top: var(--espaco-6);
    padding-bottom: var(--espaco-5);
  }
}

/* Mobile: composicao propria - header compacto, Gali continua grande
   e em destaque, sem tentar copiar a divisao de colunas do desktop.
   O fundo desloca o enquadramento para a regiao mais limpa (sol/ceu/
   texto); o letreiro do cenario pode sair parcialmente da tela. */
@media (max-width: 767px) {
  .home-dobra {
    background-position: 35% bottom;
    /* REFINO-012: a Gali (corpo inteiro, position:absolute) pode
       ultrapassar verticalmente a altura reservada do Hero - overflow:
       hidden da regra base cortaria os pes nesse caso. overflow-x:clip
       preserva a protecao contra overflow horizontal (sangramento da
       onda/decorativos) sem o acoplamento que "overflow-x:hidden +
       overflow-y:visible" tem (a spec forca o eixo "visible" para
       "auto", que ainda recorta, quando o outro eixo nao e visible).
       Nao mexe em desktop/tablet (regra so existe aqui, dentro do
       media query mobile). Ver PROBLEMAS no retorno desta sprint -
       nao consegui confirmar visualmente se isso sozinho resolve o
       corte dos pes no ambiente de validacao disponivel. */
    overflow-x: clip;
    overflow-y: visible;
  }

  .home-cabecalho {
    padding: 12px 20px 0;
  }

  /* Nav vira dropdown: fechado = atributo [hidden] nativo (display
     none), aberto = painel flutuante abaixo do botao, sem empurrar
     o resto do conteudo (position:absolute, fora do fluxo). */
  .home-cabecalho__nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 20px;
    left: auto;
    transform: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaco-1);
    background: rgba(253, 250, 245, 0.97);
    border-radius: var(--raio-md);
    box-shadow: 0 14px 30px rgba(42, 24, 16, 0.22);
    padding: var(--espaco-3);
    min-width: 200px;
    font-size: 1.05rem;
  }

  .home-cabecalho__nav[hidden] {
    display: none;
  }

  .home-cabecalho__nav a {
    width: 100%;
    padding: 10px 8px;
  }

  .home-cabecalho__menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    color: #2a1810;
    padding: 0;
    cursor: pointer;
  }

  .home-cabecalho__menu-toggle:focus-visible {
    outline: 2px solid #2a1810;
    outline-offset: 2px;
  }

  .home-cabecalho__logo {
    height: 58px;
  }

  /* GPG-HOME-MOBILE-COMPOSICAO-003: align-items:flex-end (regra base,
     desktop) empurraria o bloco de texto inteiro pro fundo do Hero -
     como .home-hero__linha agora so contem texto (a Gali virou camada
     absoluta, ver .home-hero__figura abaixo), isso deixaria um vao vazio
     enorme entre o cabecalho e o titulo. flex-start faz o texto comecar
     logo abaixo do cabecalho, sem vao. */
  .home-hero {
    /* COMPOSICAO-008: reduzido (era --espaco-6=32px) para ajudar tudo a
       caber na primeira dobra. */
    padding: 8px 0 0;
    align-items: flex-start;
    /* GPG-HOME-RESPONSIVO-ARQUITETURA-001: variaveis compartilhadas que
       ligam Gali/CTA/bloco-alternativo a altura REAL disponivel do Hero,
       em vez de cada um usar px fixos calibrados so para 390x844
       (causa raiz identificada na auditoria: GPG-HOME-RESPONSIVO-
       AUDITORIA-001).

       --hero-h: altura util do Hero. 149px = header(70px) + rodape
       (79px), medidos como CONSTANTES em todas as 8 larguras mobile
       auditadas (320-430px) - o Hero e flex:1 dentro de .home-dobra
       (min-height:100svh), entao sua altura real e sempre
       "100svh - 149px", nao um numero fixo.

       --gali-w: largura da Gali, MESMA formula visual de sempre (77vw)
       MAS agora com teto vindo da altura disponivel via min() - so
       entra em acao quando a altura e o fator mais apertado (telas
       baixas), encolhendo a Gali em vez de deixa-la invadir o
       cabecalho. Em 390x844 e em qualquer viewport "normal" da faixa
       auditada isso bate exatamente com 77vw (a largura continua
       sendo o fator limitante, Gali sem nenhuma reducao).
       GPG-HOME-RESPONSIVO-GALI-002: fator recalibrado (era 0,4327,
       exatamente a proporcao da propria referencia - protegia o
       cabecalho mas encolhia a Gali de forma perceptivel demais em
       375x667/320x568, tirando presenca da personagem). Fator novo:
       0,5 - continua zero reducao em 375x812/390x844/393x852/
       414x896/430x932 (teto so passa a valer abaixo desses valores de
       altura), e da mais presenca real nos dois casos extremos
       (320x568: 181px->209px; 375x667: 224px->259px) mantendo folga
       real >=6px entre a crista e o titulo nos dois - validado no
       navegador, sem precisar de scroll em nenhum caso testado.

       --gali-h: altura resultante do container da Gali (mesma
       proporcao do asset, 2528/1696), usada abaixo para ancorar o
       grupo CTA/bloco-alternativo RELATIVO aos pes reais dela, em vez
       de um px fixo contado a partir do fundo do Hero. */
    --hero-h: calc(100vh - 149px);
    --hero-h: calc(100svh - 149px);
    --gali-w: min(77vw, calc(var(--hero-h) * 0.5));
    --gali-h: calc(var(--gali-w) * 2528 / 1696);
    /* --cta-bottom: distancia do CTA ao fundo do Hero, calculada para
       manter ~5px de folga real abaixo dos pes da Gali (que ficam a
       ~4,94% do topo do container, contado de baixo pra cima - ver
       .home-hero__figura). 17px + 0,0494 x --gali-h reproduz
       EXATAMENTE os 39px atuais em 390x844 (referencia aprovada,
       congelada) e diminui/aumenta junto com o tamanho real da Gali
       nas demais alturas. clamp() garante um piso de 32px (o bloco
       "Prefere explorar sozinho?" abaixo do CTA precisa de pelo menos
       32px de altura de grupo - 51px do CTA descontados, ver
       .home-alternativo - para nao ultrapassar o fundo do Hero em
       telas muito baixas) e um teto de 48px (evita o CTA subir demais
       em telas muito altas). */
    --cta-bottom: clamp(32px, calc(17px + var(--gali-h) * 0.0494), 48px);
  }

  /* GPG-HOME-MOBILE-COMPOSICAO-003: a Gali saiu do empilhamento (ver
     .home-hero__figura) - .home-hero__linha agora so organiza o texto,
     sem min-height nem position:relative (nao precisa mais ser o
     container de posicionamento de nada; a Gali ancora direto em
     .home-hero, que ja e position:relative na regra base). */
  .home-hero__linha {
    /* Reset explicito - a regra base (desktop) e position:relative;
       sem isso aqui, o valor herdado faria .home-hero__linha (so o
       texto, bem mais baixa que o Hero) virar o containing block da
       Gali por engano, em vez de .home-hero. */
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-inline: 20px;
  }

  .home-hero__conteudo {
    /* GPG-HOME-MOBILE-COMPOSICAO-008: reset explicito - a regra base
       (desktop) e position:relative (containing block do CTA la, que e
       so inline-flex no fluxo, sem afeta-lo). No mobile o CTA virou
       absolute (ver .home-cta abaixo) e precisa que o containing block
       suba ate .home-hero (mesmo ancestral posicionado da Gali) para o
       bottom/left:50% funcionarem em relacao a viewport - sem este
       reset, .home-hero__conteudo (so titulo+subtitulo, uma caixa bem
       menor) virava o containing block por engano. Mesmo ajuste ja
       feito em .home-hero__linha na COMPOSICAO-003. */
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    /* Coluna cheia - a Gali nao fica mais ao lado do texto na mesma
       faixa vertical (foi pro fluxo, depois do texto), entao a largura
       estreita de 40% que existia so pra desviar do corpo dela
       (COMPOSICAO-006) nao tem mais motivo pra existir: mais largura
       de coluna = titulo/subtitulo quebrando em menos linhas. */
    width: 100%;
    margin-top: 0;
    /* Acompanha .home-hero__gali: @keyframes home-aparecer termina em
       translateY(-88px), nao translateY(0) - permanece desativada so no
       mobile (achado de uma sprint anterior, nao introduzido por esta). */
    animation: none;
  }

  /* Ordem visual mobile (titulo > frase 1 > CTA > frase 2 > link) via
     flex "order" - sem mudar HTML/DOM, entao desktop (mesma ordem de
     sempre, todo mundo em order:0) fica intocado. .home-subtitulo vira
     "display:contents" so no mobile: ela some como caixa e os spans
     passam a ser item flex direto de .home-hero__conteudo, podendo cada
     um ter seu proprio order - no desktop ela continua um <p> normal. */
  /* GPG-HOME-MOBILE-COMPOSICAO-006: tamanho e margem medidos na
     referencia visual do MASTER (mockup 375px de largura de conteudo) -
     titulo la mede ~163px de largura (~43.5% da largura util) e comeca
     ~29px abaixo da guia inferior do header; escalado para o viewport
     de 390px valida (medido no navegador) com font-size:22px, mantendo
     a mesma familia/peso/letter-spacing herdados (so tamanho e posicao
     mudam). Antes: 30.4px (clamp) e margin-top:8px. */
  .home-titulo { max-width: none; margin-top: 20px; font-size: 22px; order: 1; }

  .home-subtitulo {
    font-size: 1.05rem;
    display: contents;
  }

  .home-subtitulo__intro,
  .home-subtitulo__detalhe-mobile {
    display: block;
  }

  /* Texto mais curto exclusivo do mobile (ver .home-subtitulo__detalhe-mobile
     na regra base, fora da media query) - o texto original continua
     existindo no DOM (desktop/tablet o mostram sem alteracao), so
     escondido aqui. */
  .home-subtitulo__detalhe {
    display: none;
  }

  .home-subtitulo__intro {
    order: 2;
    margin-top: 10px;
  }

  /* Forca a quebra exatamente depois de "em" - span interno vira block
     so no mobile; no desktop continua inline (mesma frase corrida). Com
     a coluna agora em width:100% (bem mais larga que os 40% antigos),
     isso e so uma escolha de leitura, nao mais uma correcao de quebra
     forcada por espaco curto - por isso o font-size de precisao
     subpixel que existia aqui antes (AJUSTE-005, 17.1px pra evitar
     quebra em 3 linhas numa coluna estreita) nao e mais necessario:
     removido, o texto agora usa o 1.05rem herdado de .home-subtitulo. */
  .home-subtitulo__quebra {
    display: block;
  }

  /* GPG-HOME-MOBILE-COMPOSICAO-010: o complemento virou um bloco
     editorial independente (texto novo, ver home.html) - saiu do
     empilhamento logo abaixo do subtitulo (COMPOSICAO-003/009) e virou
     camada absoluta no mesmo containing block da Gali/CTA (.home-hero),
     ancorada para comecar na altura da cintura/cinto dela. Cintura
     medida no asset (img/gali-conversation-open.png): a fivela do cinto
     fica a ~48% da altura visivel do personagem (descontada a folga
     transparente do canvas) - em 390px de viewport isso cai em
     ~y:456px a partir do topo da viewport, ou seja top:386px a partir
     do topo do .home-hero (386 = 456 - 70, altura do header). top nao
     mudou nesta sprint (relacao com a cintura preservada).
     GPG-HOME-MOBILE-COMPOSICAO-012: texto novo (ver home.html) e
     largura/tipografia recalibradas - com o texto mais longo, 180px em
     16.8px/1.55 (valores anteriores) dava 7 linhas, pesado demais.
     Testado no navegador em varias combinacoes de largura (180-205px,
     faixa pedida) x font-size: 190px/14.5px/lh:1.3 rende exatamente 5
     linhas (meta pedida: 4-5), termina bem antes do CTA (respiro de
     ~125px) e a borda direita (206px) fica com folga real de seguranca
     validada por zoom no navegador contra a calca/mao da Gali (silhueta
     real, nao so a bounding box transparente do PNG) - mais folga que
     os 180px antigos (196px), que ja eram seguros. */
  .home-subtitulo__detalhe-mobile {
    display: block;
    /* GPG-HOME-RESPONSIVO-ARQUITETURA-001: voltou ao fluxo normal (era
       position:absolute + top:177px, um valor calibrado manualmente
       sprint a sprint - COMPOSICAO-013 a 018 - so para 390x844, sem
       nenhuma relacao com o resto da composicao). Como titulo e
       subtitulo (".home-subtitulo__intro") NUNCA mudam de posicao
       entre viewports mobile (sao conteudo normal, ancorados no topo -
       confirmado na auditoria GPG-HOME-RESPONSIVO-AUDITORIA-001), um
       margin-top fixo a partir do fim do subtitulo reproduz o MESMO
       resultado visual de sempre em 390x844 (247px do topo da viewport,
       igual a antes) mas por uma RELACAO com o elemento anterior, nao
       por um numero calibrado contra o topo do Hero. Deixa de depender
       da altura do Hero inteiramente - nao precisa de clamp() aqui. */
    order: 3;
    margin-top: 65px;
    max-width: 190px;
    /* GPG-HOME-MOBILE-COMPOSICAO-017: font-size/line-height proprios
       (14.5px/1.3) removidos por pedido do MASTER - a tipografia deve
       ser identica a de ".home-subtitulo__intro" ("Sua guia..."), nao
       so parecida. Como este elemento e irmao de .home-subtitulo__intro
       dentro do mesmo ".home-subtitulo" (font-size:1.05rem, display:
       contents - so remove a caixa, nao quebra heranca), removendo os
       overrides proprios ele volta a herdar exatamente os mesmos
       valores computados de .home-subtitulo__intro (confirmado no
       navegador: 16.8px / 26.04px / Manrope / 400 nos dois). */
  }

  /* CTA sem tamanho fixo nem transform de reposicionamento - auto-size
     via padding, no fluxo normal. Reducao moderada em relacao ao
     desktop (padding 27px/60px) pedida no brief desta sprint. Como a
     coluna de texto nao e mais estreita, o texto do CTA nao precisa
     mais quebrar em 2 linhas fixas (era so pra caber nos 152x58px
     antigos) - as regras de .home-cta__texto-padrao/--mobile que
     alternavam entre as duas versoes foram removidas daqui: a regra
     base (.home-cta__texto-mobile{display:none}) ja mostra a frase
     corrida de sempre, igual desktop/tablet. */
  /* GPG-HOME-MOBILE-COMPOSICAO-008: CTA saiu do empilhamento de texto
     (era order:4 + margin-top acumulado, uma cadeia dependente da
     altura dos irmaos acima - fragil e dificil de raciocinar) e virou
     camada absoluta independente, no MESMO containing block da Gali
     (.home-hero, position:relative na regra base) - centralizado na
     viewport (nao na Gali) e ancorado por baixo, logo abaixo da caixa
     dela. Gali termina em bottom:73px (a partir do fundo do Hero); o
     CTA (altura 51px) comeca 10px abaixo dessa caixa e portanto sobra
     em bottom: 73 - 51 - 10 = 12px - valor medido/validado no
     navegador nas 3 larguras, dentro da folga ate o rodape (que comeca
     no fundo do Hero, ou seja exatamente nesses 12px). */
  .home-cta {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* GPG-HOME-RESPONSIVO-ARQUITETURA-001: era bottom:39px fixo,
       calibrado so para 390x844 (COMPOSICAO-010). Agora usa
       --cta-bottom (definida em .home-hero acima), que amarra o CTA
       aos pes REAIS da Gali (nao a caixa transparente do canvas) -
       reproduz os mesmos 39px em 390x844 e adapta nas demais alturas,
       encolhendo o respiro em telas baixas em vez de colidir com o
       texto editorial (ver auditoria GPG-HOME-RESPONSIVO-AUDITORIA-001,
       causa raiz #3). */
    bottom: var(--cta-bottom);
    /* Reset explicito - a regra base (desktop) tem margin-top/bottom:
       var(--espaco-6)=32px (o CTA fica centralizado no fluxo entre os
       vizinhos). Com bottom:absolute, esse margin-bottom herdado somava
       32px ao valor de "bottom", empurrando o botao pra cima do alvo
       por engano (bottom real virava 12+32=44px). Zerado aqui. */
    margin: 0;
    /* Sem isso o shrink-to-fit do abspos (width:auto) as vezes calcula
       a largura antes do texto quebrar em 1 linha so - o texto (block)
       enrola em 2 linhas dentro dela, mudando altura/largura do botao
       por engano. nowrap garante a mesma largura de uma linha so, como
       antes (posicionamento em fluxo normal nunca teve esse problema). */
    white-space: nowrap;
    /* COMPOSICAO-005: padding horizontal reduzido (era 30px) - o CTA
       ainda e o elemento de acao principal (mantido em destaque:
       cor/altura/font-size intocados), so com menos peso horizontal
       pra nao atravessar tanto a regiao da Gali. */
    padding: 13px 22px;
    font-size: 16px;
    /* GPG-HOME-MOBILE-COMPOSICAO-009: sombra mais discreta so no mobile
       (era 0 16px 34px rgba(160,58,48,0.4), herdada da regra base -
       cor/gradiente/border-radius/posicao/tamanho do botao continuam
       intocados, so o box-shadow muda). Deslocamento, blur e opacidade
       reduzidos para o botao nao parecer flutuar acima do fundo. */
    box-shadow: 0 4px 10px rgba(160, 58, 48, 0.25);
  }

  /* Mobile continua sem icone interno (decisao ja aprovada
     anteriormente) - desktop/tablet preservam o icone. */
  .home-cta__icone {
    display: none;
  }

  /* GPG-HOME-MOBILE-COMPOSICAO-011: bloco compactado e movido para
     abaixo do CTA (COMPOSICAO-010 tinha deixado na posicao antiga por
     falta de espaco - autorizado agora a reduzir a tipografia so deste
     bloco, so no mobile, pra caber nos ~39px entre o CTA e o rodape).
     font-size/line-height reduzidos ao maior tamanho que coube sem
     encostar no CTA nem no rodape (testado/medido no navegador).
     Centralizado como o CTA (left:50% + translateX), nao mais alinhado
     a esquerda. */
  .home-alternativo {
    font-size: 11px;
    line-height: 1.2;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* GPG-HOME-RESPONSIVO-ARQUITETURA-001: era bottom:7px fixo. Agora
       derivado do MESMO --cta-bottom do CTA (definido em .home-hero) -
       32px = altura do CTA (51px) + respiro entre os dois (6px), o
       grupo CTA+bloco alternativo sobe/desce sempre junto, mantendo a
       relacao interna de 6px entre eles em qualquer altura (era so uma
       coincidencia numerica antes, agora e uma relacao explicita). Em
       390x844 reproduz os mesmos 7px de sempre. */
    bottom: calc(var(--cta-bottom) - 32px);
    text-align: center;
    /* Reset explicito - a regra base zera so margin-top; margin-bottom
       ficava no default de <p> do navegador (1em, aqui 11px por causa
       do font-size reduzido), que somava ao "bottom" absolute e
       empurrava o bloco pra cima do alvo por engano (mesmo problema do
       CTA na COMPOSICAO-008). */
    margin: 0;
  }

  /* Forca a quebra entre as duas frases - o link vira block so no
     mobile, sem depender da largura disponivel pra provocar a quebra. */
  .home-alternativo a {
    display: block;
  }

  /* GPG-HOME-MOBILE-COMPOSICAO-003: Gali volta a ser uma camada
     absoluta, independente do empilhamento de texto - mas ancorada de
     forma simples, sem as compensacoes da composicao antiga (sem coluna
     de texto artificial, sem min-height, sem bleed exagerado, sem
     transforms). .home-hero__linha nao e mais position:relative, entao
     o containing block desta figura sobe pro ancestral positioned mais
     proximo: .home-hero (position:relative, regra base, nao alterada) -
     bottom:0 ancora os pes dela perto da onda (mesmo ponto de referencia
     que a onda usa: o fundo do proprio Hero); right:20px usa o mesmo
     eixo de respiro do header/rodape. Tamanho testado dentro da faixa
     68-78vw pedida no brief; 74vw fez a cabeca cair dentro da faixa
     vertical do bloco de texto (CTA/complemento), sem cortar
     crista/maos/bolsa/pes. */
  .home-hero__figura {
    display: block;
    position: absolute;
    /* GPG-HOME-MOBILE-COMPOSICAO-006: valores anteriores (right:6px,
       bottom:0, width:73vw) descongelados pelo MASTER e recalculados a
       partir da referencia visual - medida a bounding box visivel da
       Gali no mockup (a Gali real ocupa so ~78.3% da largura e ~91.8%
       da altura do canvas do asset, resto e "ar" transparente) e a
       distancia dela ate as guias/rodape:
       - width:77vw reproduz a largura visivel medida na referencia
         (~60% da viewport).
       - right:-28px compensa a folga direita do canvas (~15.8%) para a
         bolsa (parte visivel) ficar perto da guia direita, como na
         referencia - bleed leve do canvas, sem gerar overflow real
         (.home-dobra mantem overflow:hidden).
       - bottom:73px abre o respiro entre os pes (parte visivel) e o
         rodape/onda que a referencia mostra (~95px medidos, descontada
         a folga inferior do canvas de ~4.9%) - antes a Gali encostava
         direto no fundo do Hero (bottom:0). */
    right: -28px;
    bottom: 73px;
    /* GPG-HOME-RESPONSIVO-ARQUITETURA-001: era width:77vw puro (so
       largura, nunca a altura disponivel do Hero) - ver --gali-w em
       .home-hero acima. Continua igual a 77vw em 390x844 e em qualquer
       viewport onde a largura ja e o fator mais apertado (a imensa
       maioria da faixa mobile testada); so encolhe a mais quando a
       altura manda, evitando invadir cabecalho/titulo em telas baixas
       (320x568). */
    width: var(--gali-w);
  }

  .home-hero__gali {
    width: 100%;
    height: auto;
    /* Aspect-ratio explicito do asset mobile (corpo inteiro) - elimina
       qualquer ambiguidade com o aspect-ratio implicito vindo dos
       atributos width/height do HTML (445x652, que descrevem o src
       padrao/desktop dentro do mesmo <picture>). */
    aspect-ratio: 1696 / 2528;
  }

  /* REFINO-005: onda como fechamento inferior da composicao - encosta
     nas duas laterais e na base (bottom:0, sem offset negativo), sem
     folga de fundo antes do rodape. left/right:0 (nao width) evita
     qualquer resto de borda subpixel. Bleed continua so na largura
     usada para o calculo de escala do object-fit (ver nota abaixo). */
  .home-hero__ondulacao {
    display: block;
    position: absolute;
    /* REFINO-011: base (desktop) usa z-index:2, acima da
       .home-hero__figura (z-index:1) - por isso a onda cobria os pes
       da Gali no mobile. Override so aqui: onda atras da Gali, sem
       mexer no valor global (desktop/tablet continuam com z-index:2,
       congelados). */
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Bleed generoso na largura - o asset e mais largo que a viewport
       de proposito, sangrando pelas laterais (compensado pelo
       overflow:hidden/clip do .home-dobra/.hero). */
    width: 150vw;
    /* GPG-HOME-ONDA-CORRECAO-001: AJUSTE-021 (comentario removido)
       distorcia verticalmente o PNG (height:calc(70vw+161px) +
       object-fit:fill esticavam so o eixo Y - confirmado por auditoria,
       ~17,4% de diferenca entre o aspect ratio natural do asset
       (1920x1081) e o renderizado). O MASTER reabriu essa decisao
       especifica e pediu para preservar a forma natural do PNG.
       height:auto deixa o navegador calcular a altura pela proporcao
       intrinseca da imagem (1920:1081) a partir da largura (150vw) -
       sem distorcao. object-fit/object-position ficam sem efeito nesse
       caso (a caixa passa a ter exatamente a proporcao da imagem, nao
       ha mais o que "encaixar"/cropar) e foram removidos por nao
       servirem mais a nenhum proposito. bottom:-73px mantido sem
       alteracao: e ele (nao a altura) que ancora a borda inferior real
       da imagem - como object-fit:fill sempre preenchia a caixa borda
       a borda, a borda inferior da imagem ja coincidia com bottom:-73px
       antes desta mudanca, e continua coincidindo agora (validado no
       navegador, ver retorno da sprint). */
    height: auto;
    bottom: -73px;
  }

  /* GABARITO-007: icones/links devem ler como parte da regiao inferior
     clara da ondulacao, sem faixa/emenda visivel - fundo na mesma cor
     (amostrada do proprio PNG, #f8e0ca) e sem o respiro que existia
     antes entre onda e rodape. */
  .home-rodape {
    margin-top: 0;
    /* COMPOSICAO-008: compactado (era herdado de --espaco-5 = 24px) -
       ajuda tudo a caber na primeira dobra sem prejudicar toque. */
    padding-bottom: 8px;
    background: transparent;
  }

  /* Rodape empilhado - icones sociais primeiro (regiao
     clara logo apos a onda), links institucionais abaixo numa unica
     linha, ambos alinhados a esquerda (mesmo eixo do resto do
     conteudo), conforme gabarito visual do MASTER. */
  .home-rodape__linha {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Icones um pouco menores nesta largura (ainda acima do minimo de
     44px de area de toque) - ajuda a caber tudo na primeira dobra. */
  .home-rodape__icone {
    width: 44px;
    height: 44px;
  }

  .home-rodape__icone svg,
  .home-rodape__icone img {
    width: 26px;
    height: 26px;
  }

  .home-rodape__links {
    justify-content: flex-start;
    text-align: left;
  }

  .home-rodape__links--icones {
    order: -1;
    column-gap: var(--espaco-2);
  }

  /* Institucionais precisam caber numa linha so nessa largura - fonte
     um pouco menor e gap reduzido (nao mexe nos icones, que ja cabem
     no tamanho atual). */
  .home-rodape__links:not(.home-rodape__links--icones) {
    font-size: 0.85rem;
    column-gap: var(--espaco-3);
  }
}

@media (max-width: 420px) {
  .home-hero__linha {
    padding-inline: 16px;
  }
}

/* ---------- Movimento ---------- */

@keyframes home-aparecer {
  from { opacity: 0; transform: translateY(-82px); }
  to { opacity: 1; transform: translateY(-88px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__gali {
    animation: none;
  }
}

/* ==========================================================================
   HOME V2 — GPG-HOME-V2-STRUCTURE-001
   Fonte de verdade: HOME-V2-STRUCTURAL-HANDOFF-001.md (desktop/tablet) e
   HOME-MOBILE-FROZEN-HANDOFF-001.md (<=640px, sprint seguinte).

   Tudo abaixo e escopado a [data-page] (o wrapper da Home v2) - as regras
   acima (.home-*) pertencem a Home v1 e continuam vivas so porque
   public/planejar.html (onboarding legado, ainda em producao) carrega este
   mesmo home.css e depende delas. Nao remover/mesclar sem decisao do
   MASTER - ver retorno da sprint.
   ========================================================================== */

[data-page] {
  --ink: #1f2b26;
  --sand: #f7f0e3;
  --sand-deep: #eadfc7;
  --paper: #fffaf1;
  --ocean: #0f6357;
  --ocean-light: #3f8f7e;
  --coral: #e2703f;
  --coral-deep: #c85f34;
  --gold: #b9872f;
  background: var(--sand);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  overflow-x: hidden;
}

[data-page] *:focus-visible {
  outline: 2px solid #c9713f;
  outline-offset: 2px;
}

/* design-system.css define um a:hover global com text-decoration:underline
   (mesma especificidade de varios seletores mobile daqui, ver GPG). A Home
   v2 nunca usa sublinhado no hover - so cor/borda/seta, ja tratados nos
   seletores especificos. Esta regra, com [data-page], garante prioridade
   sobre a global sem precisar tocar em design-system.css (compartilhado
   com outras paginas). */
[data-page] a:hover,
[data-page] a:focus-visible {
  text-decoration: none;
}

[data-page] h1,
[data-page] h2,
[data-page] h3 {
  font-family: inherit;
  font-weight: inherit;
  margin: 0;
}

[data-page] img {
  max-width: 100%;
}

/* ---------- Header / Nav ---------- */

[data-page] > nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 64px);
  background: var(--sand);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

[data-page] .gv2-nav-brand {
  display: flex;
  align-items: center;
  flex: none;
}

[data-page] .gv2-logo {
  height: 41px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

/* GPG-HOME-DESKTOP-HERO-FIDELIDADE-003: logotipo-guiaportodegalinhas.png
   tem um halo/glow transparente ao redor da marca - mesmo problema ja
   corrigido no logo mobile (ver regra ≤640px abaixo). object-fit:contain
   com largura automatica encolhe a marca junto com o halo inteiro,
   deixando-a pequena demais no desktop. Mesma tecnica do mobile: caixa
   fixa com object-fit:cover recorta o halo, mantendo a marca visualmente
   grande - sem editar o arquivo do logotipo. */
@media (min-width: 1025px) {
  [data-page] > nav > .gv2-nav-brand .gv2-logo {
    width: 130px;
    height: 46px;
    object-fit: cover;
    object-position: center;
  }
}

[data-page] .gv2-nav-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

[data-page] .gv2-nav-links a {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.85;
  font-size: 16px;
  font-weight: 500;
}

[data-page] .gv2-nav-links a:hover,
[data-page] .gv2-nav-links a:focus-visible {
  opacity: 1;
}

/* GPG-GALI-HOME-PRECONVERSA-001: padrao unico de estados para todo CTA
   coral (desktop e mobile) - regra base do fundo fora dos estados de
   interacao, hover restrito a ponteiros finos (Home v2.dc.html, .cta-coral).
   Nunca aplicado a seletores de resposta (.gv2-onb-chip/.gv2m-chip), meses
   ou links comuns - so aos CTAs coral de verdade. */
[data-page] .gv2-cta-coral {
  display: inline-flex;
  align-items: center;
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
}

[data-page] .gv2-cta-coral:focus-visible {
  outline: 2px solid var(--coral-deep);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  [data-page] .gv2-cta-coral:hover {
    background: color-mix(in srgb, var(--coral) 88%, white 12%);
  }
}

[data-page] .gv2-cta-coral:active {
  background: color-mix(in srgb, var(--coral) 76%, white 24%);
}

[data-page] .gv2-cta-coral:disabled {
  opacity: .46;
  cursor: not-allowed;
}

[data-page] .gv2-nav-cta {
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
}

/* GPG-CABECALHO-PADRAO-001: menus deslocados para perto do CTA (>=1025px)
   - fiel ao novo "Tabua de Mare.dc.html" aprovado (Decisao 01, "mesmo
   comportamento da Home"). O grupo de links (unico filho do nav que nao
   e o botao mobile) recebe margin-left:auto, empurrando-o - e o CTA
   depois dele - para a direita; antes o nav so usava
   justify-content:space-between, distribuindo os tres blocos ao longo
   de toda a largura. Mesma regra tambem aplicada em header.css
   (Catalogo/Planejar/Tabua), para consistencia entre paginas. */
@media (min-width: 1025px) {
  [data-page] > nav > .gv2-nav-links {
    margin-left: auto;
    margin-right: clamp(28px, 3.5vw, 56px);
  }
}

/* Tablet largo (896-1024px) e estreito (641-895px): mesma densidade de
   header.css (Catalogo/Planejar/Tabua) - com 5 itens no menu (antes 3),
   o nav precisa desse ajuste para continuar numa linha so nessas
   larguras, o que nao era necessario antes desta sprint. */
@media (min-width: 896px) and (max-width: 1024px) {
  [data-page] > nav > .gv2-nav-links {
    gap: 18px;
  }
  [data-page] > nav > .gv2-nav-links a {
    font-size: 15px;
  }
}

@media (min-width: 641px) and (max-width: 895px) {
  [data-page] > nav {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 14px 12px;
  }
  [data-page] > nav > .gv2-nav-brand .gv2-logo {
    height: 30px;
  }
  [data-page] > nav > .gv2-nav-links {
    flex-wrap: nowrap;
    gap: 7px;
    min-width: 0;
  }
  [data-page] > nav > .gv2-nav-links a {
    font-size: 12.5px;
    white-space: nowrap;
  }
  [data-page] > nav > a.gv2-nav-cta {
    padding: 8px 14px;
    font-size: 12.5px;
    white-space: nowrap;
    flex: none;
  }
}

/* ---------- Blocos exclusivos do mobile ----------
   Ocultos por padrao em qualquer largura >640px; a media query mobile
   (HOME-MOBILE-FROZEN-HANDOFF-001.md) os reexibe com !important. Sem esta
   regra base, os quatro blocos (preenchidos com conteudo real nesta
   sprint) vazariam para desktop/tablet. */

[data-page] > [data-hero-mobile] {
  width: 100%;
  display: none;
}

[data-page] [data-mare-mobile],
[data-page] [data-explore-mobile],
[data-page] [data-plan-mobile] {
  display: none;
}

/* ---------- Hero desktop/tablet (#top) ---------- */

[data-page] > #top {
  position: relative;
  min-height: clamp(520px, 82vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: visible;
}

[data-page] #top .gv2-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

[data-page] #top .gv2-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

[data-page] #top .gv2-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(20, 25, 20, 0.62) 0%, rgba(20, 25, 20, 0.5) 42%,
      rgba(20, 25, 20, 0.12) 72%, rgba(20, 25, 20, 0.04) 100%),
    linear-gradient(to bottom,
      rgba(20, 25, 20, 0.28) 0%, rgba(20, 25, 20, 0.5) 55%, var(--sand) 100%);
}

[data-page] #top .gv2-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 clamp(20px, 5vw, 64px) clamp(24px, 3vw, 44px);
}

[data-page] #top .gv2-hero-row {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 44px);
}

[data-page] [data-hero-box] {
  flex: 1 1 420px;
  min-width: min(100%, 380px);
  max-width: 600px;
  box-sizing: border-box;
  background: rgba(56, 18, 26, .20);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 40px);
}

[data-page] .gv2-hero-h1 {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-style: italic;
  color: var(--paper);
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  line-height: 1.18;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}

[data-page] .gv2-hero-p {
  color: var(--paper);
  opacity: .92;
  font-size: clamp(16px, 1.6vw, 18px);
  max-width: 480px;
  line-height: 1.6;
  margin: 0 0 30px;
}

[data-page] [data-cta-row] {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

[data-page] [data-cta-row] .gv2-cta-coral {
  padding: 15px 28px;
  font-size: 15px;
  font-weight: 600;
}

/* GPG-HOME-DESKTOP-HERO-FIDELIDADE-002: tamanho estatico aprovado em
   Home v2.dc.html. A logica obsoleta que sobrescrevia isso via style
   inline (composicaoHeroGali, home.js §7.3) foi removida na raiz -
   nenhum !important necessario aqui. */
[data-page] .gv2-hero-gali {
  flex: 0 1 clamp(262px, 36.5%, 486px);
  width: 100%;
  max-width: 486px;
  min-width: 0;
  height: auto;
  align-self: center;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: drop-shadow(0 22px 44px rgba(16, 22, 18, 0.42));
}

/* ---------- Sobre a Gali ---------- */

[data-page] > [data-sobre] {
  padding: clamp(64px, 9vw, 104px) clamp(20px, 5vw, 64px) clamp(60px, 8vw, 88px);
}

[data-page] .gv2-sobre-row {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

[data-page] .gv2-sobre-col {
  flex: 1 1 300px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 34px);
}

[data-page] .gv2-kicker {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 16px;
}

[data-page] .gv2-sobre-texto {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
  max-width: 460px;
  margin: 0;
}

[data-page] .gv2-frase {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.5;
  margin: 0;
  color: var(--ocean);
}

[data-page] .gv2-assinatura {
  font-size: 13px;
  opacity: .6;
  margin: 14px 0 0;
}

[data-page] .gv2-jangada {
  flex: 0 1 500px;
  width: 100%;
  max-width: 500px;
  min-width: 240px;
  height: auto;
  display: block;
}

/* ---------- Mare (#tabua-de-mare) ---------- */

[data-page] > #tabua-de-mare {
  background: var(--sand-deep);
  padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 64px);
}

[data-page] [data-mare-desktop] {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}

[data-page] .gv2-h2 {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin: 0 0 18px;
}

[data-page] .gv2-mare-p {
  font-size: 16px;
  line-height: 1.65;
  opacity: .85;
  max-width: 440px;
  margin: 0 0 26px;
}

[data-page] .gv2-link-ocean {
  color: var(--ocean);
  font-weight: 600;
  border-bottom: 1px solid var(--ocean);
  padding-bottom: 3px;
  font-size: 15px;
  text-decoration: none;
}

[data-page] .gv2-tide-widget {
  background: var(--paper);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 36px);
  box-shadow: 0 12px 30px rgba(30, 25, 15, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 340px;
  margin: 0 auto;
}

[data-page] .gv2-tide-data {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0;
}

[data-page] .gv2-tide-ring-label {
  font-family: 'Manrope', sans-serif;
  font-size: 8px;
  letter-spacing: .08em;
  fill: var(--ink);
  opacity: .6;
}

[data-page] .gv2-tide-ring-hora {
  font-family: 'Newsreader', serif;
  font-size: 20px;
  fill: var(--ink);
}

[data-page] .gv2-tide-ring-altura {
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  fill: var(--ink);
  opacity: .6;
}

[data-page] .gv2-tide-estrelas {
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 2px;
  margin: 0;
}

[data-page] .gv2-tide-aviso {
  font-size: 12px;
  opacity: .7;
  margin: 0;
  text-align: center;
}

[data-page] .gv2-tide-nota {
  font-size: 11px;
  opacity: .55;
  text-align: center;
  margin: 0;
}

/* GPG-HOME-MARE-HOJE-001: estados de carregando/vazio/erro do widget -
   reaproveita o mesmo cartao (.gv2-tide-widget), so troca o conteudo.
   [hidden] precisa vencer o display:flex explicitamente - um seletor
   composto (classe) tem a mesma especificidade do [hidden] da UA, e a
   ordem no arquivo faria display:flex vencer por padrao. */
[data-page] .gv2-tide-mensagem {
  font-size: 14px;
  line-height: 1.55;
  opacity: .78;
  text-align: center;
  margin: 0;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-page] .gv2-tide-mensagem[hidden] {
  display: none;
}

[data-page] .gv2-tide-mensagem a {
  color: var(--ocean);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--ocean);
}

/* ---------- Explore (#explorar) ---------- */

[data-page] > #explorar {
  padding: clamp(64px, 9vw, 104px) clamp(20px, 5vw, 64px);
}

[data-page] .gv2-explore-container {
  max-width: 1180px;
  margin: 0 auto;
}

[data-page] .gv2-explore-container > .gv2-kicker {
  margin: 0 0 14px;
}

[data-page] .gv2-explore-container > .gv2-h2 {
  margin: 0 0 36px;
  max-width: 600px;
}

[data-page] [data-explore-desktop] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 28px;
}

[data-page] .gv2-card {
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(30, 25, 15, 0.07);
  display: flex;
  flex-direction: column;
}

[data-page] .gv2-card--principal {
  grid-column: span 2;
  grid-row: span 2;
}

[data-page] .gv2-card-photo {
  width: 100%;
  flex: 1;
  min-height: 110px;
  display: block;
  object-fit: cover;
}

[data-page] .gv2-card--principal .gv2-card-photo {
  min-height: 300px;
}

[data-page] .gv2-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-page] .gv2-card-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  background: var(--sand-deep);
  color: var(--ink);
  opacity: .55;
  font-size: 12px;
  line-height: 1.4;
}

[data-page] .gv2-card-body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

[data-page] .gv2-card-tag {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

[data-page] .gv2-card-title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 19px;
}

[data-page] .gv2-card-desc {
  font-size: 14px;
  opacity: .72;
  line-height: 1.5;
  flex: 1;
}

[data-page] .gv2-card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--coral);
  margin-top: 6px;
}

/* ---------- Comece por Aqui (#planejar) ---------- */

[data-page] > #planejar {
  background: var(--ocean);
  padding: clamp(44px, 5.5vw, 64px) clamp(20px, 5vw, 64px);
}

[data-page] [data-plan-desktop] {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

/* GPG-HOME-DESKTOP-COMECE-POR-AQUI-001: cor errada (paper) - o kicker
   "Comece por aqui" e dourado no Home v2.dc.html, como qualquer outro
   kicker da pagina (.gv2-kicker), so com margem propria (18px). */
[data-page] .gv2-kicker--paper {
  color: var(--gold);
  margin: 0 0 18px;
}

[data-page] .gv2-plan-gali-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}

[data-page] .gv2-plan-gali-frame {
  position: relative;
  width: 76px;
  height: 96px;
  flex: none;
  overflow: visible;
}

[data-page] .gv2-plan-gali-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 44px 44px 12px 12px;
  background: color-mix(in srgb, var(--paper) 22%, transparent);
  z-index: 1;
}

[data-page] .gv2-plan-gali-img {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  height: 150%;
  width: auto;
  max-width: none;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 82%, transparent 97%);
  mask-image: linear-gradient(to bottom, black 0%, black 82%, transparent 97%);
}

[data-page] .gv2-plan-h2 {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  color: var(--paper);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  align-self: center;
}

[data-page] .gv2-plan-p {
  color: var(--paper);
  opacity: .88;
  font-size: 16px;
  line-height: 1.65;
  max-width: 420px;
  margin: 0;
}

[data-page] .gv2-plan-card {
  background: var(--paper);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 36px);
  max-width: 440px;
}

/* GPG-GALI-HOME-PRECONVERSA-001: onboarding canonico desktop - mesma
   conversa guiada do mobile (§"HOME MOBILE" mais abaixo, .gv2m-*), so a
   densidade tipografica/unidades muda (clamp/px aqui, calc(N*var(--u))
   la). Sem campo de contato, sem chips multi-selecao, sem formulario. */
[data-page] .gv2-onb-progress {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px;
}
[data-page] .gv2-onb-progress-trilho {
  display: block;
  height: 2px;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
}
[data-page] .gv2-onb-progress-trilho.is-feito { background: var(--gold); opacity: .45; }
[data-page] .gv2-onb-progress-trilho.is-ativo { background: var(--gold); }
[data-page] .gv2-onb-progress-label {
  margin-left: 4px;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--gold);
}

[data-page] .gv2-onb-answered {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 9px;
  font-size: 13.5px;
  line-height: 1.3;
}
[data-page] .gv2-onb-answered-label { opacity: .5; white-space: nowrap; }
[data-page] .gv2-onb-answered-value { font-weight: 600; color: var(--ocean); }

[data-page] .gv2-onb-question {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.28;
  color: var(--ink);
  margin: 6px 0 18px;
  text-wrap: pretty;
}

[data-page] .gv2-onb-hint {
  margin: -10px 0 14px;
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

[data-page] .gv2-onb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
[data-page] .gv2-onb-chip {
  display: inline-flex;
  align-items: center;
  padding: 13px 18px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 999px;
  cursor: pointer;
  max-width: 100%;
  text-align: left;
  white-space: normal;
}
[data-page] .gv2-onb-chip:hover { border-color: var(--ocean); color: var(--ocean); }
[data-page] .gv2-onb-chip.is-selecionado,
[data-page] .gv2-onb-chip.is-selecionado:hover {
  color: var(--paper);
  background: var(--ocean);
  border-color: var(--ocean);
}
[data-page] .gv2-onb-chip:disabled:not(.is-selecionado) {
  opacity: .4;
  cursor: not-allowed;
}
[data-page] .gv2-onb-actions { margin-top: 18px; }

[data-page] .gv2-onb-final-text {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.28;
  color: var(--ink);
  margin: 6px 0 20px;
  text-wrap: pretty;
}
[data-page] .gv2-onb-restart-wrap {
  text-align: center;
  margin: 12px 0 0;
}
[data-page] .gv2-onb-restart {
  font-size: 12px;
  opacity: .6;
  text-decoration: none;
  color: var(--ink);
}

/* GPG-GALI-HOME-PRECONVERSA-001: cor/estados dos CTAs coral vem de
   .gv2-cta-coral (ja combinada nesta classe no JS, home.js render()) -
   so o layout de bloco fica aqui. */
[data-page] .gv2-cta-block {
  display: block;
  width: 100%;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

[data-page] .gv2-form-erro {
  font-size: 12px;
  color: var(--coral-deep);
  text-align: center;
  margin: 12px 0 0;
}

/* ---------- Footer ---------- */

[data-page] > footer {
  padding: clamp(40px, 6vw, 56px) clamp(20px, 5vw, 64px) 30px;
}

[data-page] .gv2-footer-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 36px;
}

[data-page] .gv2-footer-marca {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 10px;
}

[data-page] .gv2-footer-desc {
  font-size: 13px;
  opacity: .65;
  max-width: 240px;
  margin: 0;
}

[data-page] .gv2-footer-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0 0 12px;
}

[data-page] .gv2-footer-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
}

[data-page] .gv2-footer-list a {
  color: inherit;
  text-decoration: none;
  opacity: .8;
}

[data-page] [data-footer-legal] {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

[data-page] .gv2-footer-legal-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

[data-page] .gv2-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 13px;
  font-size: 12px;
}

[data-page] .gv2-footer-legal-links a {
  color: inherit;
  text-decoration: none;
  padding: 7px 0;
  white-space: nowrap;
}

[data-page] .gv2-footer-copy {
  max-width: 1180px;
  margin: 32px auto 0;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

[data-page] .gv2-footer-copy p {
  margin: 0;
  font-size: 12px;
  opacity: .55;
}

/* ---------- Tablet 641-1024px ---------- */
/* Provisorio - HOME-V2-STRUCTURAL-HANDOFF-001.md §10/§12.2: sem ajuste
   proprio de densidade ainda, herda o desktop fluido de proposito. */
@media (min-width: 641px) {
  [data-page] nav [data-mobile-toggle],
  [data-page] nav [data-mobile-panel] {
    display: none !important;
  }
}

/* ==========================================================================
   HOME MOBILE (<=640px) — GPG-HOME-MOBILE-IMPLEMENTATION-002
   Fonte de verdade: HOME-MOBILE-FROZEN-HANDOFF-001.md.
   Mecanismo de escala: frame-mestre de 393px via container query
   (--u: calc(100cqw / 393)) nos blocos Hero, Comece por Aqui, Mare e
   Explore - NUNCA vw (handoff §0.4/§10.1). Header, Sobre a Gali e Footer
   usam px/clamp fixos (por isso tem altura quase igual em 393 e 360).
   ========================================================================== */

@media (max-width: 640px) {

  /* ---- 0.6 — ordem das secoes via flex order (HTML nao e reordenado) ---- */
  [data-page] {
    display: flex;
    flex-direction: column;
    /* GPG-MOBILE-NAVEGACAO-RODAPE-FINAL-002: nav vira position:fixed logo
       abaixo (sai do fluxo) - compensacao exata via --header-h-mobile,
       medida em tempo real por home.js (medirHeaderMobile). */
    padding-top: var(--header-h-mobile, 60px) !important;
  }
  [data-page] > nav { order: 1; }
  [data-page] > [data-hero-mobile] { order: 2; }
  [data-page] > #planejar { order: 3; }
  [data-page] > [data-sobre] { order: 4; }
  [data-page] > #tabua-de-mare { order: 5; }
  [data-page] > #explorar { order: 6; }
  [data-page] > footer { order: 7; }

  [data-hero-mobile] { display: block !important; }
  [data-page] > #top { display: none !important; }

  /* ---- 1 — Header ---- */
  /* GPG-MOBILE-NAVEGACAO-RODAPE-FINAL-002: fixed (nao sticky) durante
     toda a rolagem, fiel a Home v2.dc.html. width:100% + box-sizing:
     border-box evitam overflow horizontal em 360/390/430px. */
  [data-page] > nav {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 9px 20px !important;
  }
  [data-page] > nav > .gv2-nav-links { display: none !important; }
  [data-page] > nav > a.gv2-nav-cta { display: none !important; }
  [data-page] > nav [data-mobile-toggle] { display: flex !important; }

  /* logotipo-guiaportodegalinhas.png tem um halo/glow transparente em
     volta da marca (mesmo problema ja documentado e corrigido em
     .gali-header__simbolo, design-system.css GPG-IDENTIDADE-TABUA-MOBILE-027,
     razao real da marca medida ali em ~2.83:1). object-fit:contain com
     width:auto (regra base, desktop) reduz a marca junto com o halo
     inteiro, deixando-a pequena demais. object-fit:cover recorta o halo,
     mantendo a altura de 63px do header. */
  [data-page] .gv2-logo {
    width: 116px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  [data-mobile-toggle] {
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
    border-radius: 999px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }
  [data-mobile-toggle]:hover { border-color: var(--ocean); }

  .gv2m-burger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
  }
  .gv2m-burger span {
    display: block;
    height: 2px;
    background: var(--ink);
  }
  /* Icone aberto (X) - mesma estrutura de 3 barras, sem a barra do meio,
     as outras duas rotacionadas - equivalente visual as "duas barras" do
     handoff, sem swap de markup. */
  [data-mobile-toggle][aria-expanded="true"] .gv2m-burger {
    position: relative;
    width: 18px;
    height: 18px;
  }
  [data-mobile-toggle][aria-expanded="true"] .gv2m-burger span:nth-child(1) {
    position: absolute; top: 8px; left: 0; width: 18px;
    transform: rotate(45deg);
  }
  [data-mobile-toggle][aria-expanded="true"] .gv2m-burger span:nth-child(2) {
    opacity: 0;
  }
  [data-mobile-toggle][aria-expanded="true"] .gv2m-burger span:nth-child(3) {
    position: absolute; top: 8px; left: 0; width: 18px;
    transform: rotate(-45deg);
  }

  [data-mobile-panel] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h-mobile, 60px));
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    box-shadow: 0 16px 30px rgba(30, 25, 15, 0.10);
    padding: 6px 20px 18px;
    display: flex;
    flex-direction: column;
  }
  [data-mobile-panel][hidden] {
    display: none !important;
  }
  [data-mobile-panel] > a {
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    padding: 15px 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  }
  [data-mobile-panel] > a.gv2m-panel-last { border-bottom: none; }
  /* GPG-GALI-HOME-PRECONVERSA-001: cor/estados vem de .gv2-cta-coral
     (ja combinada nesta classe no HTML) - so o layout proprio fica aqui. */
  [data-mobile-panel] > a.gv2m-panel-cta {
    margin-top: 12px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
  }

  /* ---- 2 — Hero mobile ---- */
  [data-hero-mobile] {
    width: 100%;
    container-type: inline-size;
  }
  #top-mobile {
    --u: calc(100cqw / 393);
    position: relative;
    width: 100%;
    height: calc(732 * var(--u));
    background: var(--paper);
    overflow: hidden;
  }

  .gv2m-hero-photo {
    position: absolute; left: 0; top: 0; width: 100%;
    height: calc(512 * var(--u));
    overflow: hidden;
    z-index: 2;
  }
  .gv2m-hero-photo-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 58% 56%;
    display: block;
    filter: saturate(1.62) contrast(1.2) brightness(.84);
  }
  .gv2m-hero-photo-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(8, 38, 33, .56) 0%, rgba(8, 38, 33, .26) 32%, rgba(8, 38, 33, .02) 58%, rgba(8, 38, 33, 0) 100%);
  }

  .gv2m-hero-gali {
    position: absolute;
    left: calc(65 * var(--u));
    top: calc(9 * var(--u));
    width: calc(339 * var(--u));
    height: auto;
    display: block;
    filter: drop-shadow(-8px 16px 30px rgba(6, 34, 29, .30));
    z-index: 4;
  }

  [data-page] .gv2m-hero-headline {
    position: absolute;
    left: calc(17 * var(--u));
    top: calc(57 * var(--u));
    width: calc(206 * var(--u));
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-weight: 500;
    color: var(--paper);
    font-size: calc(34 * var(--u));
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: pretty;
    text-shadow: 0 2px 18px rgba(6, 32, 27, .45);
    z-index: 8;
  }

  .gv2m-hero-fade {
    position: absolute;
    left: 0; top: calc(398 * var(--u)); width: 100%;
    height: calc(132 * var(--u));
    background: linear-gradient(to bottom, rgba(255, 250, 241, 0) 0%, rgba(255, 250, 241, .34) 38%, rgba(255, 250, 241, .84) 74%, #fffaf1 100%);
    z-index: 6;
  }

  .gv2m-hero-base {
    position: absolute;
    left: 0; top: calc(512 * var(--u)); width: 100%;
    height: calc(276 * var(--u));
    background: var(--paper);
    z-index: 7;
  }

  .gv2m-hero-sub {
    position: absolute;
    left: calc(24 * var(--u));
    top: calc(532 * var(--u));
    width: calc(272 * var(--u));
    margin: 0;
    text-align: left;
    font-family: 'Newsreader', serif;
    font-style: normal;
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: 1.35;
    color: var(--ink);
    opacity: .84;
    text-wrap: pretty;
    z-index: 9;
  }

  .gv2m-hero-tide {
    position: absolute;
    left: calc(24 * var(--u));
    top: calc(606 * var(--u));
    width: calc(345 * var(--u));
    max-width: 346px;
    display: flex;
    align-items: center;
    gap: calc(14 * var(--u));
    text-decoration: none;
    color: inherit;
    background: var(--paper);
    border-top: 1px solid rgba(31, 43, 38, .08);
    border-bottom: 1px solid rgba(31, 43, 38, .08);
    border-radius: 11px;
    padding: 10px calc(18 * var(--u));
    box-shadow: 0 -2px 6px -5px rgba(31, 43, 38, .10), 0 4px 8px -6px rgba(31, 43, 38, .14);
    box-sizing: border-box;
    z-index: 9;
  }
  .gv2m-hero-tide:hover {
    box-shadow: 0 -2px 6px -5px rgba(31, 43, 38, .12), 0 5px 10px -6px rgba(31, 43, 38, .18);
  }
  .gv2m-hero-tide-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--u));
  }
  .gv2m-hero-tide-label {
    display: block;
    font-size: calc(10 * var(--u));
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ocean);
  }
  .gv2m-hero-tide-row {
    display: flex;
    align-items: baseline;
    gap: calc(8 * var(--u));
    flex-wrap: wrap;
  }
  .gv2m-hero-tide-hora {
    font-family: 'Newsreader', serif;
    font-size: calc(22 * var(--u));
    font-weight: 500;
    color: var(--ink);
    line-height: 1.15;
  }
  .gv2m-hero-tide-desc {
    font-size: calc(12.5 * var(--u));
    color: var(--ink);
    opacity: .6;
  }
  .gv2m-hero-tide-link {
    font-size: calc(11.5 * var(--u));
    color: var(--ocean);
    font-weight: 600;
  }
  .gv2m-hero-tide-arrow {
    font-size: calc(15 * var(--u));
    color: var(--ocean);
    opacity: .65;
    flex: none;
  }

  /* ---- 3 — Comece por Aqui mobile ---- */
  [data-page] > #planejar { padding: 0 !important; }
  [data-page] #planejar [data-plan-desktop] { display: none !important; }
  [data-page] #planejar [data-plan-mobile] { display: block !important; }

  [data-plan-mobile] {
    width: 100%;
    container-type: inline-size;
  }
  [data-plan-mobile] > div {
    --u: calc(100cqw / 393);
    padding: calc(26 * var(--u)) calc(24 * var(--u)) calc(26 * var(--u));
  }

  .gv2m-plan-head {
    display: flex;
    align-items: flex-end;
    gap: calc(12 * var(--u));
    margin: 0 0 calc(12 * var(--u));
  }
  .gv2m-plan-gali-frame {
    position: relative;
    width: calc(118 * var(--u));
    height: calc(152 * var(--u));
    flex: none;
  }
  .gv2m-plan-gali-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: calc(51 * var(--u)) calc(51 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
    background: color-mix(in srgb, var(--paper) 13%, transparent);
  }
  [data-page] .gv2m-plan-gali-img {
    position: absolute;
    top: calc(-14 * var(--u));
    left: calc(-14 * var(--u));
    width: calc(147 * var(--u));
    height: auto;
    max-width: none;
    display: block;
    z-index: 2;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 69%, transparent 77%);
    mask-image: linear-gradient(to bottom, black 0%, black 69%, transparent 77%);
  }
  .gv2m-plan-text-col {
    display: flex;
    flex-direction: column;
    gap: calc(9 * var(--u));
    flex: 1;
    align-self: flex-start;
    margin-top: calc(20 * var(--u));
  }
  .gv2m-plan-kicker {
    font-size: calc(11.5 * var(--u));
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: .62;
    font-weight: 600;
    margin: 0;
  }
  [data-page] .gv2m-plan-headline {
    font-family: 'Newsreader', serif;
    font-weight: 500;
    color: var(--paper);
    font-size: calc(26 * var(--u));
    line-height: 1.16;
    letter-spacing: -0.012em;
    margin: 0;
    text-wrap: pretty;
  }

  .gv2m-plan-card {
    background: var(--paper);
    border-radius: calc(14 * var(--u));
    padding: calc(16 * var(--u));
  }

  .gv2m-progress {
    display: flex;
    align-items: center;
    gap: calc(7 * var(--u));
    margin: 0 0 calc(12 * var(--u));
  }
  .gv2m-progress-trilho {
    display: block;
    height: 2px;
    background: color-mix(in srgb, var(--ink) 20%, transparent);
  }
  .gv2m-progress-trilho.is-feito { background: var(--gold); opacity: .45; }
  .gv2m-progress-trilho.is-ativo { background: var(--gold); }
  .gv2m-progress-label {
    margin-left: calc(3 * var(--u));
    font-size: calc(10 * var(--u));
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--gold);
  }

  .gv2m-answered {
    display: flex;
    align-items: baseline;
    gap: calc(8 * var(--u));
    margin: 0 0 calc(7 * var(--u));
    font-size: calc(12.5 * var(--u));
    line-height: 1.3;
  }
  .gv2m-answered-label { opacity: .5; }
  .gv2m-answered-value { font-weight: 600; color: var(--ocean); }

  .gv2m-question {
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-size: calc(19 * var(--u));
    line-height: 1.24;
    color: var(--ink);
    margin: calc(4 * var(--u)) 0 calc(12 * var(--u));
    text-wrap: pretty;
  }

  .gv2m-hint {
    margin: calc(-7 * var(--u)) 0 calc(10 * var(--u));
    font-size: calc(11 * var(--u));
    color: color-mix(in srgb, var(--ink) 62%, transparent);
  }

  .gv2m-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(7 * var(--u));
  }
  .gv2m-chip {
    display: inline-flex;
    align-items: center;
    padding: calc(12.5 * var(--u)) calc(14 * var(--u));
    font-family: 'Manrope', sans-serif;
    font-size: calc(13 * var(--u));
    font-weight: 500;
    color: var(--ink);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
    border-radius: 999px;
    cursor: pointer;
    max-width: 100%;
    text-align: left;
    white-space: normal;
  }
  .gv2m-chip:hover { border-color: var(--ocean); color: var(--ocean); }
  .gv2m-chip.is-selecionado,
  .gv2m-chip.is-selecionado:hover {
    color: var(--paper);
    background: var(--ocean);
    border-color: var(--ocean);
  }
  .gv2m-chip:disabled:not(.is-selecionado) {
    opacity: .4;
    cursor: not-allowed;
  }
  .gv2m-actions { margin-top: calc(14 * var(--u)); }

  .gv2m-final-text {
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-size: calc(19 * var(--u));
    line-height: 1.24;
    color: var(--ink);
    margin: calc(4 * var(--u)) 0 calc(14 * var(--u));
    text-wrap: pretty;
  }
  /* GPG-GALI-HOME-PRECONVERSA-001: cor/estados vem de .gv2-cta-coral (ja
     combinada nesta classe no JS, home.js render()) - so o layout proprio
     fica aqui. */
  .gv2m-final-cta {
    width: 100%;
    padding: calc(13 * var(--u)) calc(18 * var(--u));
    font-family: 'Manrope', sans-serif;
    font-size: calc(14.5 * var(--u));
    font-weight: 600;
  }
  .gv2m-restart-wrap {
    text-align: center;
    margin: calc(9 * var(--u)) 0 0;
  }
  .gv2m-restart {
    font-size: calc(11 * var(--u));
    opacity: .6;
    text-decoration: none;
    color: var(--ink);
  }

  /* ---- 4 — Sobre a Gali (compactacao; markup e compartilhado com desktop) ---- */
  [data-page] [data-sobre] { padding: 36px 20px 34px !important; }
  [data-page] .gv2-sobre-row { gap: 22px !important; }
  [data-page] .gv2-sobre-col { gap: 18px !important; }
  [data-page] .gv2-jangada {
    max-width: 66% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---- 5 — Mare mobile ---- */
  [data-page] > #tabua-de-mare { padding: 0 !important; }
  [data-page] #tabua-de-mare [data-mare-desktop] { display: none !important; }
  [data-page] #tabua-de-mare [data-mare-mobile] { display: block !important; }

  [data-mare-mobile] {
    width: 100%;
    container-type: inline-size;
  }
  [data-mare-mobile] > div {
    --u: calc(100cqw / 393);
    padding: calc(28 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
  }
  .gv2m-mare-kicker {
    font-size: calc(11.5 * var(--u));
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin: 0 0 calc(12 * var(--u));
  }
  [data-page] .gv2m-mare-headline {
    font-family: 'Newsreader', serif;
    font-weight: 500;
    font-size: calc(26 * var(--u));
    line-height: 1.15;
    letter-spacing: -0.012em;
    margin: 0 0 calc(10 * var(--u));
    width: calc(320 * var(--u));
    text-wrap: pretty;
  }
  .gv2m-mare-apoio {
    margin: 0 0 calc(18 * var(--u));
    font-size: calc(13.5 * var(--u));
    line-height: 1.48;
    opacity: .78;
    width: calc(330 * var(--u));
    text-wrap: pretty;
  }
  /* GPG-MOBILE-NAVEGACAO-RODAPE-FINAL-002 (ajuste local): CTA centralizado
     no eixo horizontal - so o botao, kicker/titulo/paragrafo da secao
     continuam a esquerda (regra propria deles, sem text-align aqui). */
  /* GPG-GALI-HOME-PRECONVERSA-001: cor/estados vem de .gv2-cta-coral
     (ja combinada nesta classe no HTML) - so o layout/centralizacao (a
     excecao aprovada desta secao, GPG-MOBILE-NAVEGACAO-RODAPE-FINAL-002)
     fica aqui. */
  [data-page] .gv2m-mare-cta {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    font-size: calc(14.5 * var(--u));
    font-weight: 600;
    padding: calc(13 * var(--u)) calc(22 * var(--u));
  }

  /* ---- 6 — Explore mobile ---- */
  [data-page] > #explorar { padding: 0 !important; }
  [data-page] #explorar > .gv2-explore-container { max-width: none !important; }
  [data-page] #explorar [data-explore-head] { display: none !important; }
  [data-page] #explorar [data-explore-desktop] { display: none !important; }
  [data-page] #explorar [data-explore-mobile] { display: block !important; }

  [data-explore-mobile] {
    width: 100%;
    container-type: inline-size;
  }
  [data-explore-mobile] > div {
    --u: calc(100cqw / 393);
    padding: calc(26 * var(--u)) calc(24 * var(--u));
  }
  .gv2m-explore-kicker {
    font-size: calc(11.5 * var(--u));
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin: 0 0 calc(12 * var(--u));
  }
  [data-page] .gv2m-explore-h2 {
    font-family: 'Newsreader', serif;
    font-weight: 500;
    font-size: calc(29 * var(--u));
    line-height: 1.14;
    letter-spacing: -0.012em;
    margin: 0 0 calc(16 * var(--u));
    width: calc(318 * var(--u));
  }

  .gv2m-explore-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--paper);
    border-radius: calc(12 * var(--u));
    overflow: hidden;
    box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(30, 25, 15, .07);
  }
  .gv2m-explore-photo {
    display: block;
    height: calc(146 * var(--u));
    width: 100%;
  }
  .gv2m-explore-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gv2m-explore-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    background: var(--sand-deep);
    color: var(--ink);
    opacity: .55;
    font-size: 11px;
    line-height: 1.3;
  }
  .gv2m-explore-body {
    display: block;
    padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(13 * var(--u));
  }
  .gv2m-explore-tag {
    display: block;
    margin: 0 0 calc(7 * var(--u));
    font-size: calc(10 * var(--u));
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gold);
  }
  .gv2m-explore-h3 {
    display: block;
    margin: 0 0 calc(5 * var(--u));
    font-family: 'Newsreader', serif;
    font-weight: 500;
    font-size: calc(21 * var(--u));
    line-height: 1.14;
  }
  .gv2m-explore-desc {
    display: block;
    margin: 0 0 calc(9 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: 1.42;
    opacity: .78;
  }
  .gv2m-explore-link {
    display: block;
    font-size: calc(13 * var(--u));
    font-weight: 700;
    color: var(--ocean);
  }

  .gv2m-explore-index { margin-top: calc(20 * var(--u)); }
  .gv2m-explore-row {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--u));
    text-decoration: none;
    color: inherit;
    padding: calc(9 * var(--u)) 0;
    border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  }
  .gv2m-explore-row--last { border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
  .gv2m-explore-thumb {
    display: block;
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
    border-radius: calc(8 * var(--u));
    overflow: hidden;
    flex: none;
    background: var(--sand-deep);
  }
  .gv2m-explore-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gv2m-explore-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    text-align: center;
    padding: 2px;
    color: var(--ink);
    opacity: .55;
    line-height: 1.1;
  }
  .gv2m-explore-row-text {
    display: flex;
    flex-direction: column;
    gap: calc(3 * var(--u));
    flex: 1;
  }
  .gv2m-explore-row-title { font-size: calc(15.5 * var(--u)); font-weight: 600; }
  .gv2m-explore-row-desc { font-size: calc(12.5 * var(--u)); opacity: .78; line-height: 1.38; }
  .gv2m-explore-row-arrow { font-size: calc(15 * var(--u)); color: var(--ocean); opacity: .6; flex: none; }

  /* ---- 7 — Footer mobile ---- */
  /* GPG-MOBILE-NAVEGACAO-RODAPE-FINAL-002: padrao definitivo, fiel a
     Home v2.dc.html (bloco FOOTER MOBILE) - grupo Explorar removido,
     Guia horizontal e em destaque, Legal horizontal/discreto, copyright
     compacto. Substitui o footer mobile anterior (grid 2 colunas com
     Explorar visivel). */
  [data-page] > footer {
    background: var(--ocean) !important;
    color: var(--paper) !important;
    padding: 26px 24px 18px !important;
  }
  [data-page] > footer .gv2-footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  [data-page] > footer .gv2-footer-grid > div:nth-child(2) { display: none !important; }
  [data-page] > footer .gv2-footer-grid > div:first-child > .gv2-footer-marca { margin-bottom: 6px !important; }
  [data-page] > footer .gv2-footer-desc { max-width: none; margin: 0 !important; opacity: .72 !important; }
  [data-page] > footer a { color: var(--paper) !important; opacity: .9 !important; }
  [data-page] > footer .gv2-footer-grid > div:nth-child(3) { margin-top: 4px !important; }
  [data-page] > footer .gv2-footer-grid > div:nth-child(3) > .gv2-footer-label { margin: 0 0 8px !important; opacity: .6 !important; }
  [data-page] > footer .gv2-footer-grid > div:nth-child(3) > .gv2-footer-list {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px 18px !important;
  }
  [data-page] > footer [data-footer-legal] { display: block !important; margin-top: 22px !important; }
  [data-page] > footer .gv2-footer-legal-label { margin: 0 0 6px !important; font-size: 9.5px !important; opacity: .42 !important; }
  [data-page] > footer .gv2-footer-legal-links { flex-direction: row !important; gap: 5px 13px !important; }
  [data-page] > footer .gv2-footer-legal-links a { padding: 4px 0 !important; font-size: 11px !important; opacity: .58 !important; }
  [data-page] > footer .gv2-footer-copy {
    margin-top: 12px !important;
    padding-top: 9px !important;
    border-top-color: color-mix(in srgb, var(--paper) 22%, transparent) !important;
  }
  [data-page] > footer .gv2-footer-copy p { opacity: .5 !important; }
}