:root {
  --cor-fundo: #faf6f0;
  --cor-fundo-painel: #ffffff;
  --cor-fundo-alt: #f2ece2;
  --cor-texto: #1f2a2e;
  --cor-texto-suave: #5c6b6e;
  --cor-borda: rgba(31, 42, 46, 0.09);
  --cor-ouro: #d6a25c;
  --cor-coral: #dd8a68;
  --cor-oceano: #2c6068;
  --gradiente-poente: linear-gradient(135deg, #e6b96e 0%, #dd8a68 55%, #c46a63 100%);
  --gradiente-oceano: linear-gradient(135deg, #2c6068 0%, #1c454c 100%);
  --fonte-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte-corpo: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Voz/conversa da Gali - distinta do chrome de interface (--fonte-corpo).
     Escolhida em GPG-MESA-TIPOGRAFIA-TESTE-001, adotada nesta sprint. */
  --fonte-voz: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sombra-suave: 0 8px 30px rgba(31, 42, 46, 0.06);
  --sombra-card: 0 4px 18px rgba(31, 42, 46, 0.08);

  --raio-sm: 6px;
  --raio-md: 12px;
  --raio-lg: 18px;

  --dur-rapida: 160ms;
  --dur-padrao: 320ms;
  --dur-lenta: 480ms;
  --facilidade: cubic-bezier(0.22, 1, 0.36, 1);
}

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

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.55;
  position: relative;
  overflow-x: hidden;
}

/* Motivo decorativo discreto de geometria sagrada, ao fundo. */
.motivo-fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
}
.motivo-fundo svg { width: 100%; height: 100%; }

.oculto { display: none !important; }

/* ---------- Estado 0: chegada (onboarding) ---------- */
/* GPG-ENTRADA-003: Planejar reusa literalmente a MESMA arvore da Home
   dentro de #hero (.home-dobra/.home-cabecalho/.home-hero/
   .home-hero__linha/.home-hero__conteudo/.home-hero__figura/
   .home-hero__ondulacao - tudo de home.css, sem segunda composicao
   paralela). Dentro de .home-hero__conteudo, o titulo/CTA/link da Home
   sao trocados pelo texto introdutorio + as 3 perguntas - regras aqui
   sao so essas trocas de conteudo e a densidade necessaria pras 3
   perguntas caberem na mesma coluna/altura que o conteudo da Home
   ocupava (decisao do MASTER: preferir densidade a separar a Gali do
   fluxo do formulario, ver GPG-ENTRADA-003 secao 1/22). */

.hero {
  transition: opacity var(--dur-lenta) var(--facilidade);
}
.hero.saindo { opacity: 0; pointer-events: none; }

/* .home-hero__conteudo (home.css) tem uma animacao de entrada
   (home-aparecer) que termina num deslocamento PERMANENTE de -88px (nao
   volta a 0 - achado documentado no proprio home.css). Na Home isso e
   mascarado pela altura do titulo grande; aqui o topo do conteudo e o
   texto introdutorio (mais baixo), e o deslocamento o empurrava para
   cima do header. Desativada so nesta pagina (seletor com #hero, nao
   mexe em home.css/na Home). */
#hero .home-hero__conteudo {
  animation: none;
}

/* Texto introdutorio - ocupa o lugar do titulo+subtitulo da Home dentro
   do mesmo bloco de conteudo, com o mesmo respiro que o titulo removido
   tinha. */
.onboarding-intro {
  max-width: none;
  margin-top: var(--espaco-5);
}

/* As 3 perguntas ficam DENTRO de .home-hero__conteudo, na mesma coluna/
   altura que a Home reserva para titulo+subtitulo+CTA+link - por isso a
   densidade (gaps, padding, fonte) e mais compacta que a 1a versao deste
   onboarding. Aparecem juntas, empilhadas - sem indicador de progresso,
   sem transicao entre perguntas: o visitante ve e responde as 3 na mesma
   tela, em qualquer ordem; ao completar as 3 a conversa comeca sozinha.
   O CTA (fora do fluxo dominante, ver .onboarding-cta abaixo) serve de
   atalho pra quem quiser pular. */
.onboarding {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: var(--espaco-4);
}

.onboarding-bloco {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.onboarding-pergunta {
  font-family: var(--fonte-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: #2a1810;
  margin: 0;
}

/* Densidade: colunas mais estreitas (era 140/150px) para caber 3-5
   alternativas por linha na mesma coluna que a Home reserva para o
   titulo, sem depender de uma largura propria maior que a da Home. */
.onboarding-opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 6px;
  width: 100%;
}

.onboarding-opcao {
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  font-weight: 600;
  color: #2a1810;
  text-align: center;
  background: rgba(255, 250, 245, 0.92);
  border: 1px solid rgba(42, 24, 16, 0.14);
  border-radius: var(--raio-md);
  padding: 8px 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 12, 6, 0.08);
  transition: transform var(--dur-rapida) ease, border-color var(--dur-rapida) ease, background var(--dur-rapida) ease;
}
.onboarding-opcao:hover {
  border-color: var(--cor-coral);
  transform: translateY(-1px);
}
.onboarding-opcao:focus-visible {
  outline: 2px solid var(--cor-coral);
  outline-offset: 2px;
}
/* Selecionada: contorno + fundo suave em --cor-coral, sem preencher a
   pilula inteira - deixa o gradiente quente exclusivo para o CTA
   principal da Home (nao presente aqui), para nao competir visualmente. */
.onboarding-opcao.selecionada {
  background: rgba(221, 138, 104, 0.18);
  border-color: var(--cor-coral);
  font-weight: 700;
}

/* GPG-ENTRADA-002/003: o fluxo normal ja inicia a conversa sozinho ao
   completar as 3 respostas - este botao continua existindo (auditado em
   app.js: e o unico jeito de conversar com contexto parcial/nenhum, uma
   funcao real, nao decorativa) mas nao pode competir com as perguntas
   nem com a Gali. Visual discreto de link de texto - disponivel, nao
   dominante. */
.onboarding-cta {
  margin-top: 2px;
  border: none;
  background: none;
  padding: 2px;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--dur-rapida) ease;
}
.onboarding-cta:hover {
  color: var(--cor-texto);
}

/* GPG-PLANEJAR-MOBILE-002: indicador "X de 3" - existe no DOM em toda
   largura (renderizarOnboarding, app.js), mas so tem sentido visual no
   onboarding sequencial mobile (ativado abaixo, media max-width:767px).
   Desktop/tablet: oculto, as 3 perguntas continuam aparecendo juntas
   sem numeracao, como sempre. */
.onboarding-indicador {
  display: none;
}

/* GPG-GALI-SISTEMA-001..004: modo de presenca "Gali - Assistente" (so
   aqui, so mobile - Home continua no modo "Gali - Hero", home.css
   intocado). Principio de produto: na Home a Gali governa a
   composicao; nas paginas funcionais (Planejar) o conteudo governa e a
   Gali acompanha.
   GPG-GALI-SISTEMA-005: as sprints 003/004 mantinham a Gali associada
   verticalmente a MESMA faixa da pergunta/alternativas (uma moldura
   alta, ao lado de uma coluna de conteudo que carregava intro+
   pergunta+alternativas juntos) - por isso a pergunta/alternativas
   sempre disputavam largura com a Gali, e a folga de seguranca (sprint
   004) ficou fragil (~2-5px). Esta sprint muda a relacao: a Gali passa
   a ficar associada so ao texto introdutorio (faixa superior, curta),
   e pergunta+alternativas (faixa inferior) ganham largura livre da
   Gali. Sem mudar o DOM (YAGNI - continua a mesma arvore de
   planejar.html): .onboarding-intro ganha um max-width proprio (fica
   mais estreita que o resto da coluna, "faixa esquerda" ao lado da
   Gali), enquanto #onboarding (indicador+pergunta+alternativas+CTA)
   nao tem max-width proprio, herdando a largura cheia (bem maior
   agora) de #hero .home-hero__conteudo.
   Verifiquei duas distancias, nao so uma: (1) horizontal, entre a
   borda direita do .onboarding-intro e a borda esquerda da moldura -
   ampla agora (~40-58px calculados) porque a intro ficou bem mais
   estreita que a coluna inteira; (2) vertical, entre a borda inferior
   da moldura e a altura estimada em que a PERGUNTA comeca a aparecer
   (introducao + margens + indicador, ~164px calculados, considerando
   a intro quebrando em ~4 linhas na largura nova) - com folga real
   (~14-46px calculados nas 4 larguras pedidas, nunca so 2-3px como na
   sprint 004). Essa 2a verificacao e o motivo da moldura ficar MENOR
   em largura do que a da sprint 004 (~144px contra ~199px em 390px) -
   dentro do orcamento vertical curto da faixa introdutoria (que nao
   pode crescer muito sem a intro parecer artificialmente espremida),
   uma moldura mais larga nao fecha a conta com folga vertical real.
   Registrado como ponto de decisao do MASTER (ver retorno) se preferir
   mais presenca da Gali as custas de uma folga vertical menor, ou de
   uma introducao mais estreita/mais alta.
   Proporcao da moldura tambem ajustada (1:1.1 -> 1:1.05, ~70% do
   canvas visivel em vez de ~74%) para caber melhor no orcamento
   vertical mais curto desta composicao - ainda com folga real (~7
   pontos percentuais) acima do limite inferior da mao aberta (~63% do
   canvas, auditado na sprint 003), entao mao/crista/rosto continuam
   inteiros, so um pouco menos torso abaixo do peito fica visivel do
   que nas sprints 003/004. */
@media (max-width: 767px) {
  /* GPG-PLANEJAR-MOBILE-011: a sprint 010 sobrescrevia min-height:auto
     aqui para encolher a dobra ao tamanho do conteudo (ver historico no
     git). O MASTER reverteu essa direcao - a cena externa (fundo +
     dobra + onda) deve ser IDENTICA a Home, so o conteudo interno muda.
     Sem override aqui, #hero .home-dobra volta a herdar min-height:100svh
     direto de home.css (nao tocado), igual a Home. Nao recriar este
     override sem instrucao explicita do MASTER. */

  /* GPG-PLANEJAR-MOBILE-008: causa raiz do vazio vertical excessivo
     entre header e o conjunto intro+Gali+onboarding. .home-hero (base,
     home.css, nao media-scoped) e display:flex + align-items:flex-end;
     como e a UNICA linha em fluxo dentro dela (.home-hero__ondulacao e
     position:absolute, fora do fluxo), o align-items:flex-end empurra
     TODO o conjunto (.home-hero__linha) para o fundo da area alta que
     .home-hero (flex:1 dentro de .home-dobra, min-height:100svh)
     reserva - sobra vazia fica inteira acima, nada abaixo. Isso fazia
     sentido na Home (Gali de corpo inteiro, presa ao rodape/onda), mas
     aqui a linha encolheu bastante (moldura circular pequena, sprint
     005/006) sem o align-items acompanhar. Correcao no CONTAINER que
     posiciona o conjunto (nao em cada elemento): troca so aqui (#hero,
     mobile) para flex-start, e padding-top proprio (token existente do
     Design System, --espaco-6) restaura o respiro entre header e
     conteudo que o padding-top:8px herdado de .home-hero (home.css,
     paginas compartilhadas) nao da conta sozinho depois da troca de
     alinhamento. Home mobile intocada (regra so alcança #hero). */
  #hero .home-hero {
    align-items: flex-start;
    padding-top: var(--espaco-6);
    /* GPG-PLANEJAR-MOBILE-011: padding-bottom da sprint 010 removido -
       existia so para compensar o fim precoce de .home-hero quando
       .home-dobra estava com min-height:auto (regra acima, tambem
       revertida). Com min-height:100svh restaurado (herdado de
       home.css, igual a Home), .home-hero volta a ocupar a mesma altura
       que ocupa na Home - nao ha mais "fim precoce" para compensar. */
  }

  #hero .home-hero__linha {
    /* Piso de seguranca bem mais baixo que o das sprints 003/004
       (78vw/62vw) - a moldura agora e bem mais curta (fica so na faixa
       introdutoria) e nao e mais o elemento mais alto da linha; quem
       decide a altura real no fluxo normal e a coluna de conteudo
       (intro + pergunta + alternativas, agora mais larga = alternativas
       mais curtas verticalmente, tambem reduzindo a altura total).
       GPG-GALI-SISTEMA-006: subido de 40vw para 42vw - a moldura maior
       desta sprint (fundo em -8px de top) chega a ~157-165px de altura
       real; 42vw mantem esse piso acima disso nas 4 larguras testadas
       por calculo (320-414px). */
    min-height: 42vw;
  }

  /* GPG-GALI-SISTEMA-006: a arquitetura da sprint 005 (Gali associada a
     introducao, pergunta/alternativas livres abaixo) ficou aprovada -
     esta sprint so aumenta a moldura dentro dela. A sprint 005 tinha
     priorizado folga vertical grande (~14-46px) em vez de tamanho;
     agora o MASTER pediu o oposto (~5-10px de folga e aceitavel, achar
     o maior tamanho que ainda nao encoste na pergunta). Dois ajustes
     absorvem o crescimento: (1) top -6px -> -8px (o maximo antes de
     tocar o cabecalho - .home-hero__linha comeca 8px abaixo do
     cabecalho nesta pagina, entao -8px e o limite, nao um numero
     arbitrario); (2) proporcao da moldura 1:1.05 -> 1:1 (~67% do canvas
     visivel em vez de ~70%) - ainda ~4 pontos percentuais acima do
     limite inferior da mao aberta (~63% do canvas, auditado na sprint
     003), entao mao/crista/rosto continuam inteiros, com uma fatia um
     pouco menor de torso visivel do que na sprint 005. */
  /* GPG-PLANEJAR-MOBILE-009: +11% sobre os 3 numeros de 133/42.3vw/165px
     da sprint 006 (148/47vw/183px) - so escala a moldura (mesmo
     aspect-ratio 1/1, mesmo top/right/border-radius/overflow), sem
     mexer no asset, no crop relativo (proporcao da moldura inalterada
     = mesma fracao de cabeca/crista/rosto/mao visivel de sempre) nem
     na posicao vertical do conjunto (top:-8px intocado). right:-3vw
     mantido sem compensacao - o crescimento (+15 a +18px conforme a
     largura) ainda cabe dentro da folga horizontal calculada nas
     sprints 005/006 entre a moldura e a introducao (max-width:62%),
     sem alteracao adicional; MASTER pediu para so mexer no right desta
     mesma regra SE necessario, e nao confirmei colisao real. */
  #hero .home-hero__figura {
    width: clamp(148px, 47vw, 183px);
    aspect-ratio: 1 / 1;
    top: -8px;
    right: -3vw;
    border-radius: 50%;
    overflow: hidden;
  }

  #hero .home-hero__gali {
    /* Ancora o asset no topo da moldura (top:0) - a largura:100%
       herdada de home.css preenche a moldura horizontalmente, e a
       altura real da imagem (aspect-ratio 1696/2528, tambem herdado)
       fica maior que a altura da moldura - o excesso abaixo e cortado
       pelo overflow:hidden do pai, nao pelo asset. */
    position: absolute;
    top: 0;
    left: 0;
  }

  #hero .home-hero__conteudo {
    /* GPG-GALI-SISTEMA-005: destravado por instrucao explicita do
       MASTER nesta sprint (a regra de 56% existia so para proteger a
       Gali quando ela ficava ao lado da pergunta - isso nao existe
       mais). Ampliado bastante (56% -> 86%) para pergunta/alternativas
       ganharem largura real - a introducao (unica que ainda compartilha
       a faixa com a Gali) recebe seu proprio max-width mais abaixo,
       independente deste valor. */
    width: 86%;
  }

  .onboarding-intro {
    font-size: 1.05rem;
    /* GPG-PLANEJAR-MOBILE-002 (auditoria GPG-PLANEJAR-MOBILE-001,
       secao 12): .onboarding-intro tambem carrega a classe
       .home-subtitulo (home.css) - a regra mobile dela usa
       display:contents, pensada para os spans __intro/__detalhe da
       Home (com order proprio), nao para este paragrafo de texto puro
       sem filhos-elemento. Override so aqui, sem tocar .home-subtitulo
       nem home.css. */
    display: block;
    /* GPG-GALI-SISTEMA-005: restringe so a introducao (nao #onboarding)
       a uma faixa mais estreita, para sobrar espaco a direita dela
       para a moldura da Gali (mesma faixa superior). Calculado para
       manter a intro com a MESMA largura aproximada que tinha nas
       sprints 003/004 (~190px em 390px) - ou seja, o numero de linhas/
       altura da introducao no fluxo nao muda muito, so ela deixa de
       esticar ate a largura cheia da coluna (que agora e bem maior,
       86%, por causa de #onboarding). */
    max-width: 62%;
  }

  /* Onboarding sequencial - so nesta largura. Desktop/tablet nao usam
     estas regras (.onboarding-bloco la continua o display:flex da
     regra base, todas as 3 visiveis ao mesmo tempo, como aprovado).
     JS (app.js: atualizarEtapaAtivaOnboarding) marca qual bloco tem
     --ativa; aqui so a apresentacao muda, a logica de respostas e a
     mesma dos 2 breakpoints. */
  .onboarding-bloco {
    display: none;
  }

  .onboarding-bloco.onboarding-bloco--ativa {
    display: flex;
    /* Transicao curta/discreta ao entrar - mesma keyframe ja usada em
       .topo.revelando/.experiencia.revelando, ja neutralizada por
       prefers-reduced-motion via --dur-padrao (:root, topo do
       arquivo). */
    animation: aparecer var(--dur-padrao) var(--facilidade) both;
  }

  /* 1 coluna fixa, nao mais repeat(auto-fit, minmax(108px,1fr)) da
     regra base (pensada para as 3 perguntas juntas em largura maior).
     GPG-GALI-SISTEMA-005: mantido 1 coluna por instrucao explicita do
     MASTER (secao 9 do brief) - agora com #onboarding em 86% da linha
     (bem mais larga que os 56% das sprints anteriores), cada alternativa
     ocupa a largura cheia da coluna, dando a leitura/toque maiores
     pedidos sem precisar de grid multi-coluna. */
  .onboarding-opcoes {
    grid-template-columns: 1fr;
  }

  /* GPG-PLANEJAR-MOBILE-009: oculta so visualmente (display:none), so
     no mobile do #hero (Planejar) - o botao continua no DOM e com seu
     listener (app.js: finalizarOnboarding), so nao aparece nem recebe
     foco/toque nesta largura. A sequencia automatica 1->2->3->conversa
     nao depende dele (respostasOnboardingCompletas() dispara
     finalizarOnboarding() sozinha); ele so deixa de existir como atalho
     manual de pular no mobile. Desktop/tablet (fora deste media query)
     continuam mostrando o CTA normalmente. */
  #hero .onboarding-cta {
    display: none;
  }

  /* GPG-PLANEJAR-MOBILE-015: desce so o CONTEUDO do rodape (icones +
     links) 8px, sem mexer na caixa externa de .home-rodape (posicao/
     altura continuam vindas de home.css, identicas a Home - sprint 012).
     transform nao participa do fluxo do documento: nao aumenta a altura
     de .home-rodape/.home-rodape__linha, nao empurra a onda (que nao
     depende do rodape, e ancorada em .home-hero) nem o fundo. Escopado
     so a #hero mobile - Home intocada. */
  #hero .home-rodape__linha {
    transform: translateY(8px);
  }

  /* GPG-PLANEJAR-MOBILE-014: a regra #hero .home-rodape__linha{padding-top}
     criada na sprint 013 foi removida por decisao do MASTER - a
     inspecao visual real mostrou a faixa clara mais alta que a Home.
     Sem override aqui, .home-rodape/.home-rodape__linha/.home-rodape__links
     voltam a herdar 100% de home.css, identico a Home (nao recriar sem
     instrucao explicita do MASTER). */

  .onboarding-indicador {
    display: block;
    margin: 0 0 2px;
    font-family: var(--fonte-corpo);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--cor-texto-suave);
  }
}

/* ---------- Revelacao da experiencia (Estado 1+) ---------- */

.topo.revelando, .experiencia.revelando {
  animation: aparecer var(--dur-lenta) var(--facilidade) both;
}

.experiencia.sem-mesa {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

.painel-produtos.revelando {
  animation: aparecer var(--dur-lenta) var(--facilidade) both;
}

.topo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px clamp(20px, 4vw, 56px);
}

/* Assinatura institucional do Estado 1 - discreta de proposito: aqui
   ela e so a marca do ambiente, nao a protagonista (isso e o Estado 0/
   Home). Mesmo "chip" de .hero-marca, bem menor. */
.topo-marca {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: rgba(255, 250, 245, 0.9);
  border-radius: var(--raio-sm);
  padding: 4px 10px;
  box-shadow: 0 2px 8px rgba(31, 42, 46, 0.07);
  transition: opacity var(--dur-rapida) ease;
}
.topo-marca:hover { opacity: 0.85; }
/* GPG-IDENTIDADE-TABUA-MOBILE-027: mesmo recorte de .hero-marca img
   acima, proporcionalmente reduzido para a altura menor deste chip. */
.topo-marca img {
  display: block;
  width: 62px;
  height: 22px;
  object-fit: cover;
  object-position: center;
}

/* Presenca da consultora - separada da marca. "Gali" identifica quem
   atende; o restante e o status honesto do momento, trocado por
   definirStatus() (app.js, inalterado) - so o texto do proprio
   #presenca-status muda, "Gali" e o separador ficam fixos. */
.topo-presenca {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--fonte-corpo);
  white-space: nowrap;
  overflow: hidden;
}

.marca-nome {
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--cor-texto);
  flex-shrink: 0;
}

.topo-presenca__ponto {
  color: var(--cor-texto-suave);
  opacity: 0.6;
  flex-shrink: 0;
}

.marca-subtitulo {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--dur-padrao) var(--facilidade);
}
.marca-subtitulo.trocando { opacity: 0; }

.experiencia {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  padding: 0 clamp(20px, 4vw, 56px) 40px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 860px) {
  .experiencia {
    grid-template-columns: 1fr;
  }
}

/* ---------- Conversa ---------- */

.painel-conversa {
  background: var(--cor-fundo-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 20px;
  box-shadow: var(--sombra-suave);
  display: flex;
  flex-direction: column;
  height: min(72vh, 720px);
  overflow: hidden;
}

@media (max-width: 860px) {
  .painel-conversa { height: 62vh; }
}

.chat {
  flex: 1;
  overflow-y: auto;
  padding: 32px clamp(20px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Leitura continua, sem chrome de chat: sem balao, sem avatar por mensagem.
   Manrope (nao Fraunces) na experiencia de conversa - direcao tipografica
   aprovada pelo MASTER: sans-serif, hierarquia por peso (400 corrido,
   700 so nos trechos ja marcados em negrito pela propria resposta). */
.mensagem {
  font-family: var(--fonte-voz);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--cor-texto);
  max-width: 62ch;
  white-space: pre-wrap;
  animation: aparecer 0.35s ease both;
}

.mensagem.visitante {
  margin-left: 24px;
  color: var(--cor-oceano);
}

/* Suporte minimo aos blocos que formatarMarkdown (app.js) gera na fala
   da Gali - so o necessario para paragrafo/lista/cabecalho nao quebrarem
   o ritmo de leitura corrido; nada decorativo novo. */
.mensagem p {
  margin: 0 0 0.9em;
}
.mensagem ul,
.mensagem ol {
  margin: 0 0 0.9em;
  padding-left: 1.3em;
}
.mensagem li {
  margin-bottom: 0.3em;
}
.mensagem li ul {
  margin: 0.3em 0 0;
}
.mensagem h1,
.mensagem h2,
.mensagem h3 {
  font-family: var(--fonte-voz);
  font-weight: 700;
  color: var(--cor-texto);
  line-height: 1.3;
  margin: 0.7em 0 0.4em;
}
.mensagem h1:first-child,
.mensagem h2:first-child,
.mensagem h3:first-child {
  margin-top: 0;
}
.mensagem h1 { font-size: 1.3rem; }
.mensagem h2 { font-size: 1.16rem; }
.mensagem h3 { font-size: 1.06rem; }
.mensagem p:last-child,
.mensagem ul:last-child,
.mensagem ol:last-child,
.mensagem h1:last-child,
.mensagem h2:last-child,
.mensagem h3:last-child {
  margin-bottom: 0;
}
.mensagem strong {
  font-weight: 700;
}
.mensagem a {
  color: inherit;
}

.mensagem.sistema {
  font-family: var(--fonte-corpo);
  font-size: 0.88rem;
  line-height: 1.5;
  color: #8a4a34;
  background: #fbeee7;
  padding: 12px 16px;
  border-radius: var(--raio-sm);
  max-width: 100%;
}

/* GPG-GALI-CONTEXTO-UNIFICADO-001 (recuperação): mesma linguagem visual de
   .mensagem.sistema (já usada pelos erros de /api/chat) - só acrescenta a
   ação "Tentar novamente" ao lado do texto. Só existe no DOM no estado de
   falha (app.js, atualizarRecuperacaoOnboarding) - nunca por padrão. */
.mensagem-recuperacao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.mensagem-recuperacao-acao {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 0.88rem;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.mensagem-recuperacao-acao:hover:not(:disabled) {
  color: var(--cor-coral);
}

.mensagem-recuperacao-acao:focus-visible {
  outline: 2px solid var(--cor-oceano);
  outline-offset: 3px;
  border-radius: 2px;
}
.mensagem-recuperacao-acao:disabled {
  opacity: 0.65;
  cursor: default;
  text-decoration: none;
}

.gc-recuperacao {
  margin: 20px 22px 0;
  overflow-wrap: anywhere;
}

.form-mensagem {
  display: flex;
  gap: 10px;
  padding: 18px clamp(18px, 3vw, 34px);
  border-top: 1px solid var(--cor-borda);
}

.form-mensagem input {
  flex: 1;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--fonte-corpo);
  font-size: 0.98rem;
  color: var(--cor-texto);
}
.form-mensagem input:focus {
  outline: none;
  border-color: var(--cor-coral);
}

.botao-enviar {
  border: none;
  border-radius: 12px;
  padding: 0 22px;
  background: var(--gradiente-poente);
  color: #2a1810;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.botao-enviar:hover { opacity: 0.92; transform: translateY(-1px); }
.botao-enviar:disabled { opacity: 0.5; cursor: default; transform: none; }

/* ---------- Painel de produtos ---------- */

.painel-produtos {
  min-height: 200px;
  padding-top: 6px;
}

.painel-produtos-vazio {
  border: 1px dashed var(--cor-borda);
  border-radius: 20px;
  padding: 40px 26px;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: 0.92rem;
}
.painel-produtos-vazio strong {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: 1.15rem;
  color: var(--cor-texto);
  margin-bottom: 8px;
  font-weight: 600;
}

.lista-produtos {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card-produto {
  background: var(--cor-fundo-painel);
  border: 1px solid rgba(31, 42, 46, 0.07);
  border-radius: var(--raio-lg);
  padding: 22px 24px;
  box-shadow: 0 3px 14px rgba(31, 42, 46, 0.05);
  animation: aparecer var(--dur-lenta) var(--facilidade) both;
  transition: opacity var(--dur-padrao) var(--facilidade), max-height var(--dur-padrao) var(--facilidade);
}

.card-produto.entrando {
  animation: aparecer var(--dur-lenta) var(--facilidade) both, acentoSeAssenta 1.4s var(--facilidade) both;
}

.card-produto.saindo {
  opacity: 0.5;
}
.card-produto.saindo .card-produto-titulo {
  text-decoration: line-through;
}

.card-produto-saida {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--cor-texto-suave);
  margin: 0 0 12px;
}

.mesa-extras {
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  text-align: center;
  margin: 4px 0 0;
}

.card-produto-titulo {
  font-family: var(--fonte-corpo);
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0 0 8px;
}

/* Voz da Gali dentro do card - continuacao da fala, nao uma caixa
   informativa. Mesmo tratamento tipografico de .mensagem (DM Sans),
   so o acento coral na borda marca que aquilo e uma justificativa. */
.card-produto-motivo {
  font-family: var(--fonte-voz);
  font-weight: 400;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--cor-texto);
  padding-left: 12px;
  border-left: 2px solid rgba(221, 138, 104, 0.5);
  margin: 0 0 14px;
}

.card-produto-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 4px;
  margin-bottom: 12px;
}

.card-produto-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 2px;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.card-produto-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 8px;
  opacity: 0.6;
}

.card-produto-preco {
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--cor-oceano);
  white-space: nowrap;
}

.card-produto-alerta {
  font-size: 0.85rem;
  color: #8a4a34;
  margin-bottom: 12px;
}

.card-produto-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 8px;
}

/* Area de toque ampliada via padding + margem negativa equivalente -
   o texto continua ocupando exatamente o mesmo espaco visual na linha,
   so a caixa clicavel/tocavel fica maior. */
.botao-detalhes {
  background: none;
  border: none;
  color: var(--cor-oceano);
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 6px 4px;
  margin: -6px -4px;
}
.botao-detalhes:hover { text-decoration: underline; }

/* GPG-GALI-COMERCIAL-002: acao liberada somente pelo efeito estruturado
   de encaminhar_compra. Fica junto da fala, nunca dentro dos cards da
   Mesa, e usa o oceano discreto para preservar o coral da acao principal. */
.gali-acao-comercial {
  margin: 12px 24px 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}

.gali-acao-comercial-produto {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--fonte-corpo);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.gali-acao-comercial-link {
  min-height: 44px;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 17px;
  border: 1.5px solid var(--cor-oceano);
  border-radius: 999px;
  background: transparent;
  color: var(--cor-oceano);
  font-family: var(--fonte-corpo);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease;
}

.gali-acao-comercial-link:link,
.gali-acao-comercial-link:visited,
.gali-acao-comercial-link:hover,
.gali-acao-comercial-link:active,
.gali-acao-comercial-link:focus,
.gali-acao-comercial-link:focus-visible {
  text-decoration: none;
}

.gali-acao-comercial-link:hover {
  background: var(--cor-oceano);
  color: var(--cor-fundo);
}

.gali-acao-comercial-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cor-oceano) 38%, transparent);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .gali-acao-comercial-link {
    align-self: center;
    width: 100%;
    max-width: 280px;
  }
}

/* max-height e definido via JS (app.js) com a altura real do conteudo
   ao abrir - um valor fixo aqui cortava detalhes mais longos que o
   limite (ver GPG-MESA-ACOES-001). O 0 abaixo so vale para o estado
   fechado. */
.card-produto-detalhe {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.card-produto-detalhe-conteudo {
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid var(--cor-borda);
  font-size: 0.88rem;
  color: var(--cor-texto);
}
.card-produto-detalhe-conteudo p { margin: 0 0 8px; }
.card-produto-detalhe-conteudo p:last-child { margin-bottom: 0; }
.card-produto-detalhe-conteudo strong { color: var(--cor-texto); }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes acentoSeAssenta {
  0% { border-color: var(--cor-coral); }
  100% { border-color: var(--cor-borda); }
}

/* ==========================================================================
   GALI CONVERSA — GPG-GALI-CONVERSA-IMPLEMENTATION-001
   Fonte de verdade: GALI-CONVERSA-FROZEN-HANDOFF-001.md ("Correspondência
   de viagem — a Gali escreve, o visitante responde"). Tela propria e
   autocontida (nao usa [data-page]/home.css - a Home v2 nao envolve esta
   tela). Paleta e medidas EXATAS do handoff (secoes 1 e 10); nenhuma cor
   nova. Mobile-first: 360-393 interpolado por --t (custom property, 0 em
   360px, 1 em 393px), fora dessa faixa fica preso no extremo mais proximo -
   "o 360 deriva proporcionalmente do 393", sem recompor.
   ========================================================================== */

.gc {
  --ink: #1f2b26;
  --sand: #f7f0e3;
  --sand-deep: #eadfc7;
  --paper: #fffaf1;
  --ocean: #0f6357;
  --coral: #e2703f;
  --coral-deep: #c85f34;
  --gold: #b9872f;

  /* clamp() exige que os 3 argumentos tenham o mesmo tipo - 0/1 puros
     (numero) misturados com uma extensao (100vw-360px)/33 (comprimento)
     tornam a expressao invalida (altura calculada vira 0/auto em cascata
     por toda .gc). 0px/1px mantem os 3 no mesmo tipo (comprimento); como
     --t so e usado depois como "numero * var(--t)" (nunca somado a um
     numero puro), o resultado continua correto em px. */
  --t: clamp(0px, calc((100vw - 360px) / 33), 1px);
  --gc-topo-h: calc(51px + 5 * var(--t));
  --gc-contexto-h: calc(35px + 3 * var(--t));
  --gc-cena-entrada-h: calc(161px + 15 * var(--t));
  --gc-cena-demais-h: calc(88px + 8 * var(--t));
  --gc-fs-entrada1: calc(21px + 2 * var(--t));
  --gc-fs-entrada2: calc(18.4px + 1.6 * var(--t));
  --gc-fs-fala: calc(19.2px + 1.8 * var(--t));
  --gc-fs-eco: calc(16.5px + 1.5 * var(--t));
  --gc-fs-historico: calc(11.9px + 1.1 * var(--t));
  --gc-fs-resumo-rotulo: calc(8.7px + 0.8 * var(--t));
  --gc-fs-resumo-valor: calc(11.4px + 1.1 * var(--t));
  --gc-fs-resp-rotulo: calc(8.7px + 0.8 * var(--t));
  --gc-fs-resp-valor: calc(14.7px + 1.3 * var(--t));
  --gc-resp-filete: calc(27px + 3 * var(--t));
  --gc-resp-btn-h: calc(42px + 4 * var(--t));
  --gc-fs-mare-hora: calc(21px + 2 * var(--t));
  --gc-cta-h: calc(44px + 4 * var(--t));

  /* Mesa de Decisao (GPG-GALI-MESA-MOBILE-IMPLEMENTATION-001) - mesma
     interpolacao --t, mesmos tokens da conversa (nenhuma cor nova). */
  --gc-mesa-velada-h: calc(64px + 6 * var(--t));
  --gc-mesa-cabeca-h: calc(31px + 3 * var(--t));
  --gc-mesa-fs-abertura: calc(13.7px + 1.3 * var(--t));
  --gc-mesa-foto-h: calc(62px + 6 * var(--t));
  --gc-mesa-fs-titulo: calc(20.2px + 1.8 * var(--t));
  --gc-mesa-fs-motivo: calc(13.3px + 1.2 * var(--t));
  --gc-mesa-fs-fato-rotulo: calc(8.1px + 0.7 * var(--t));
  --gc-mesa-fs-fato-valor: calc(11px + 1 * var(--t));
  --gc-mesa-cta-h: calc(42px + 4 * var(--t));
  --gc-mesa-fs-alt-titulo: calc(15.6px + 1.4 * var(--t));
  --gc-mesa-pe-h: calc(57px + 5 * var(--t));
  --gc-mesa-recolhido-h: calc(57px + 5 * var(--t));

  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  max-width: 480px;
  margin: 0 auto;
  background: var(--sand);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
}

.gc.revelando {
  animation: aparecer var(--dur-lenta) var(--facilidade) both;
}

/* ---------- Barra de topo (fixa) ---------- */

.gc-topo {
  flex: none;
  height: var(--gc-topo-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--sand);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.gc-voltar {
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  border: none;
  background: none;
  color: var(--ocean);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gc-kicker {
  flex: 1 1 auto;
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  color: var(--ocean);
}

.gc-progresso {
  flex: none;
  display: flex;
  gap: 5px;
}

.gc-traco {
  width: 13px;
  height: 2px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}

.gc-traco.gc-traco--percorrido {
  background: color-mix(in srgb, var(--gold) 85%, transparent);
}

/* ---------- Faixa de contexto (fixa) ---------- */

.gc-contexto {
  flex: none;
  height: var(--gc-contexto-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 22px;
  background: var(--sand-deep);
}

.gc-contexto-resumo {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.gc-ajustar {
  flex: none;
  font-size: 11.5px;
  color: var(--ocean);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ocean) 40%, transparent);
  padding-bottom: 1px;
}

/* ---------- Cena da Gali (fixa) ---------- */

.gc-cena {
  position: relative;
  flex: none;
  height: var(--gc-cena-demais-h);
  overflow: hidden;
  background: var(--sand-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  transition: height var(--dur-padrao) var(--facilidade);
}

.gc-cena.gc-cena--entrada {
  height: var(--gc-cena-entrada-h);
  background: linear-gradient(180deg, var(--sand-deep) 62%, var(--sand) 100%);
  border-bottom: none;
}

.gc-retrato {
  position: absolute;
  left: -8px;
  top: -4px;
  height: 152px;
  width: auto;
  max-width: none;
}

.gc-cena--entrada .gc-retrato {
  left: -16px;
  top: auto;
  bottom: -8px;
  height: 236px;
}

.gc-cena-rotulo {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  max-width: 118px;
}

.gc-cena--entrada .gc-cena-rotulo {
  top: 16px;
  transform: none;
}

.gc-cena-nome {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ocean);
}

.gc-cena-filete {
  display: block;
  width: 36px;
  height: 1px;
  margin: 6px 0 6px auto;
  background: color-mix(in srgb, var(--gold) 65%, transparent);
}

.gc-cena--entrada .gc-cena-filete {
  width: 30px;
}

.gc-cena-assunto {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: lowercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.gc-cena--entrada .gc-cena-assunto {
  font-size: 11px;
  letter-spacing: normal;
  text-transform: none;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}

/* ---------- Corpo (variavel, rola por dentro) ---------- */

.gc-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 40px;
}

/* ---------- Historico (camadas 1-2) ---------- */

.gc-historico {
  margin: 16px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gc-historico-linha {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.gc-historico-linha::before {
  content: '';
  flex: none;
  width: 14px;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

.gc-historico-linha span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Newsreader', serif;
  font-size: var(--gc-fs-historico);
  color: color-mix(in srgb, var(--ink) 34%, transparent);
}

/* ---------- Resumo (camada 3, >=2 respostas) ---------- */

.gc-resumo {
  margin: 16px 22px 0;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.gc-resumo-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.gc-resumo-rotulo {
  flex: none;
  font-size: var(--gc-fs-resumo-rotulo);
  font-weight: 700;
  letter-spacing: 0.19em;
  color: var(--gold);
}

.gc-resumo-valor {
  min-width: 0;
  text-align: right;
  font-weight: 600;
  font-size: var(--gc-fs-resumo-valor);
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

/* ---------- Anotacao (resposta isolada, antes de virar resumo) ---------- */

.gc-anotacao {
  margin: 18px 22px 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.gc-anotacao-rotulo {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.19em;
  color: var(--gold);
}

.gc-anotacao-valor {
  font-weight: 600;
  font-size: var(--gc-fs-resp-valor);
  color: var(--ocean);
}

.gc-anotacao-filete {
  width: var(--gc-resp-filete);
  height: 1px;
  background: color-mix(in srgb, var(--gold) 75%, transparent);
}

/* ---------- Fala atual + eco ---------- */

.gc-fala {
  margin: 20px 24px 0;
}

.gc-fala-atual {
  margin: 0;
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: var(--gc-fs-fala);
  line-height: 1.35;
  color: var(--ink);
}

.gc-corpo--entrada .gc-fala-atual {
  font-size: var(--gc-fs-entrada1);
}

.gc-fala-atual + .gc-fala-eco {
  margin-top: 10px;
}

.gc-fala-eco {
  margin: 0;
  font-family: 'Newsreader', serif;
  font-size: var(--gc-fs-eco);
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.gc-corpo--entrada .gc-fala-eco {
  font-size: var(--gc-fs-entrada2);
}

.gc-fala-atual p,
.gc-fala-atual ul,
.gc-fala-atual ol {
  margin: 0 0 0.8em;
}
.gc-fala-atual p:last-child,
.gc-fala-atual ul:last-child,
.gc-fala-atual ol:last-child {
  margin-bottom: 0;
}
.gc-fala-atual strong { font-weight: 700; }

/* ---------- Bloco de mare editorial (Estado 05) ---------- */

.gc-mare {
  margin: 18px 24px 0;
  padding-left: 14px;
  border-left: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gc-mare-dia {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.gc-mare-horario {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--ocean) 40%, transparent);
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: var(--gc-fs-mare-hora);
  color: var(--ink);
}

.gc-mare-horario span {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.gc-mare-detalhe {
  margin: 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}

/* ---------- Acao: avanco editorial ---------- */

.gc-avanco {
  margin: 16px 22px 0;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: calc(100% - 44px);
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ocean);
}

.gc-avanco span:last-child {
  font-size: 16px;
}

/* ---------- Acao: respostas rapidas ---------- */

.gc-escolhas {
  margin: 20px 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.gc-escolha {
  min-height: var(--gc-resp-btn-h);
  padding: 0 16px;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(30, 25, 15, 0.06);
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-rapida) ease, color var(--dur-rapida) ease, background var(--dur-rapida) ease;
}

.gc-escolha:hover {
  border-color: color-mix(in srgb, var(--ocean) 55%, transparent);
  color: var(--ocean);
}

.gc-escolha:focus-visible {
  outline: 2px solid var(--ocean);
  outline-offset: 2px;
}

.gc-escolha.gc-escolha--selecionada {
  background: var(--ocean);
  border-color: var(--ocean);
  color: var(--paper);
}

/* ---------- Acao: escrita livre ---------- */

.gc-escrita {
  margin: 20px 22px 0;
}

.gc-escrita-abrir {
  border: none;
  background: none;
  padding: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 44px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
}

.gc-escrita-abrir span:first-child {
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.gc-escrita-abrir span:last-child {
  font-weight: 600;
  font-size: 14px;
  color: var(--ocean);
  border-bottom: 1px solid color-mix(in srgb, var(--ocean) 55%, transparent);
  padding-bottom: 3px;
}

.gc-escrita-form {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.gc-escrita-form.gc-escrita-form--aberto {
  display: flex;
}

.gc-escrita-form textarea {
  min-height: 46px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: var(--ink);
  resize: vertical;
}

.gc-escrita-form-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gc-escrita-enviar {
  border: none;
  background: none;
  padding: 6px 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ocean);
  cursor: pointer;
}

.gc-escrita-voltar {
  border: none;
  background: none;
  padding: 6px 0;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  cursor: pointer;
}

/* ---------- Acao: fechamento + CTA (Estado 05) ---------- */

.gc-fechamento {
  margin: 18px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gc-ver-outros {
  color: var(--ocean);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
}

.gc-cta {
  align-self: flex-start;
  height: var(--gc-cta-h);
  padding: 0 26px;
  border: none;
  border-radius: 999px;
  background: var(--coral);
  color: var(--paper);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--dur-rapida) ease;
}

.gc-cta:hover {
  background: var(--coral-deep);
}

/* ---------- Acao: aguardando resposta real da Gali ---------- */

.gc-aguardando {
  margin: 20px 22px 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}

/* ==========================================================================
   MESA DE DECISAO — GPG-GALI-MESA-MOBILE-IMPLEMENTATION-001
   Fonte de verdade: GALI-MESA-MOBILE-FROZEN-HANDOFF-001.md. Nome interno
   apenas ("mesa" so em classes/comentarios de codigo) - a UI publica nunca
   usa essa palavra, so "OPÇÕES PARA SUA VIAGEM" (ver microcopy no app.js).
   Folha que sobe sobre a conversa (cobre a cena, nunca a barra de topo/
   faixa de contexto) e recolhe depois - nunca sidebar, nunca fixa.
   ========================================================================== */

.gc-mesa-folha {
  position: absolute;
  top: calc(var(--gc-topo-h) + var(--gc-contexto-h));
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sand);
  transform: translateY(100%);
  transition: transform var(--dur-lenta) var(--facilidade);
  z-index: 2;
  --gc-mesa-ink-soft: #43514b;
  --gc-mesa-ocean-deep: #0a4f46;
  --gc-mesa-gold-ink: #765217;
  --gc-mesa-coral: #c04b22;
  --gc-mesa-coral-deep: #a83e1b;
  --gc-mesa-line: rgba(31, 43, 38, 0.14);
}

.gc-mesa-folha.gc-mesa-folha--aberta {
  transform: translateY(0);
}

/* Fala velada: prova de que a conversa continua por baixo da folha. */
.gc-mesa-velada {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--gc-mesa-velada-h);
  margin: 0;
  padding: 14px 24px;
  background: var(--sand);
  font-family: 'Newsreader', serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--gc-mesa-ink-soft);
  overflow-wrap: anywhere;
}

.gc-mesa-folha-corpo {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  box-shadow: 0 -16px 34px rgba(30, 25, 15, 0.13);
}

.gc-mesa-cabeca {
  position: relative;
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 22px;
  border-bottom: 1px solid var(--gc-mesa-line);
}

.gc-mesa-cabeca::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 2px;
  margin-top: -1px;
  background: var(--gold);
}

.gc-mesa-titulo-superficie {
  min-width: 0;
  margin: 0 0 0 30px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gc-mesa-gold-ink);
  overflow-wrap: anywhere;
}

.gc-mesa-recolher {
  flex: none;
  border: none;
  background: none;
  padding: 0 2px;
  min-height: 44px;
  font-size: 12.5px;
  color: var(--gc-mesa-ocean-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--gc-mesa-ocean-deep) 58%, transparent);
  cursor: pointer;
}

.gc-mesa-introducao {
  flex: none;
  display: grid;
  grid-template-columns: clamp(52px, 15vw, 62px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 10px 22px 0;
}

.gc-mesa-gali {
  display: block;
  width: 100%;
  min-width: 0;
  height: clamp(64px, 19vw, 78px);
  overflow: hidden;
  align-self: end;
}

.gc-mesa-gali-imagem {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.gc-mesa-abertura {
  min-width: 0;
  margin: 0;
  max-width: 58ch;
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--gc-mesa-ink-soft);
  overflow-wrap: anywhere;
}

.gc-mesa-opcoes {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0 22px;
}

/* ---------- Recomendacao principal ---------- */

.gc-mesa-principal {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--gc-mesa-line);
}

.gc-mesa-principal > *,
.gc-mesa-principal-conteudo,
.gc-mesa-alternativas > *,
.gc-mesa-fatos > * {
  min-width: 0;
}

.gc-mesa-principal-conteudo {
  max-width: 100%;
}

.gc-mesa-foto {
  display: block;
  width: calc(100% + 44px);
  max-width: calc(100% + 44px);
  height: 88px;
  object-fit: cover;
  margin: 0 -22px 14px;
}

.gc-mesa-kicker,
.gc-mesa-estado {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  color: var(--gc-mesa-gold-ink);
  overflow-wrap: anywhere;
}

.gc-mesa-estado {
  color: var(--gc-mesa-ocean-deep);
}

.gc-mesa-titulo {
  max-width: 100%;
  margin: 0;
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.16;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.gc-mesa-motivo {
  max-width: 52ch;
  margin: 8px 0 0;
  font-family: 'Newsreader', serif;
  font-size: 15px;
  line-height: 1.42;
  color: var(--gc-mesa-ink-soft);
  overflow-wrap: anywhere;
}

.gc-mesa-fatos {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 16px 0 0;
  padding: 13px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  border-top: 1px solid var(--gc-mesa-line);
}

.gc-mesa-fato {
  min-width: 0;
}

.gc-mesa-fato-rotulo {
  display: block;
  margin: 0 0 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--gc-mesa-gold-ink);
  overflow-wrap: anywhere;
}

.gc-mesa-fato-valor {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.gc-mesa-alerta {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 16px 0 0;
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--gold);
}

.gc-mesa-alerta strong {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--gc-mesa-gold-ink);
}

.gc-mesa-alerta p {
  margin: 0;
  font-family: 'Newsreader', serif;
  font-size: 14px;
  color: var(--gc-mesa-ink-soft);
  overflow-wrap: anywhere;
}

.gc-mesa-acoes {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.gc-mesa-cta {
  max-width: 100%;
  min-height: 46px;
  padding: 8px 22px;
  border: none;
  border-radius: 999px;
  background: var(--gc-mesa-coral);
  color: var(--paper);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background var(--dur-rapida) ease;
}

.gc-mesa-cta:hover {
  background: var(--gc-mesa-coral-deep);
}

.gc-mesa-cta--alternativa {
  min-height: 44px;
  padding: 0 2px;
  border-radius: 0;
  background: none;
  color: var(--gc-mesa-ocean-deep);
  font-size: 13.5px;
  font-weight: 700;
  border-bottom: 1px solid color-mix(in srgb, var(--gc-mesa-ocean-deep) 58%, transparent);
}
.gc-mesa-cta--alternativa:hover {
  background: none;
}

.gc-mesa-manter {
  max-width: 100%;
  border: none;
  background: none;
  padding: 0 2px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gc-mesa-ocean-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--gc-mesa-ocean-deep) 58%, transparent);
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.gc-mesa-manter[aria-pressed="true"] {
  padding-inline: 10px;
  border-bottom-color: var(--gold);
  background: var(--sand);
  color: var(--ink);
}

.gc-mesa-escolhida-status {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--gc-mesa-ocean-deep);
  font-size: 13px;
  font-weight: 700;
}

/* ---------- Alternativas ---------- */

.gc-mesa-alternativas {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.gc-mesa-alternativa {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 18px 0;
  border-bottom: 1px solid var(--gc-mesa-line);
}

.gc-mesa-alternativa.gc-mesa-opcao--kept {
  padding-left: 18px;
  background: linear-gradient(90deg, var(--sand) 0, var(--sand) 7px, transparent 7px);
}

.gc-mesa-alt-titulo {
  max-width: 100%;
  margin: 0;
  font-family: 'Newsreader', serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.gc-mesa-motivo-considerar {
  max-width: 58ch;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--gc-mesa-ink-soft);
  overflow-wrap: anywhere;
}

.gc-mesa-fatos--alternativa {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

/* ---------- Voz da Gali no pe da folha ---------- */

.gc-mesa-pe {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: auto;
  padding: 20px 22px 28px 36px;
  position: relative;
}

.gc-mesa-pe::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--gold);
}

.gc-mesa-pe-fala {
  margin: 0 0 8px;
  max-width: 48ch;
  font-family: 'Newsreader', serif;
  font-size: 15px;
  color: var(--gc-mesa-ink-soft);
  overflow-wrap: anywhere;
}

.gc-mesa-continuar {
  max-width: 100%;
  border: none;
  background: none;
  padding: 0 2px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gc-mesa-ocean-deep);
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

/* ---------- Bloco recolhido (vive dentro do fluxo normal do corpo) ---------- */

.gc-mesa-recolhido {
  margin: 20px 22px 0;
  width: calc(100% - 44px);
  min-width: 0;
  max-width: calc(100% - 44px);
  min-height: var(--gc-mesa-recolhido-h);
  padding: 12px 14px;
  background: var(--paper);
  border-left: 2px solid var(--gold);
  box-shadow: 0 1px 2px rgba(30, 25, 15, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gc-mesa-recolhido-texto {
  min-width: 0;
}

.gc-mesa-recolhido-titulo {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #765217;
  overflow-wrap: anywhere;
}

.gc-mesa-recolhido-resumo {
  margin: 0;
  font-size: 12.5px;
  color: #43514b;
  overflow-wrap: anywhere;
}

.gc-mesa-ver-opcoes {
  flex: none;
  border: none;
  background: none;
  padding: 0 2px;
  min-height: 44px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0a4f46;
  border-bottom: 1px solid color-mix(in srgb, #0a4f46 58%, transparent);
  cursor: pointer;
}

.gc-mesa-recolher:focus-visible,
.gc-mesa-cta:focus-visible,
.gc-mesa-manter:focus-visible,
.gc-mesa-continuar:focus-visible,
.gc-mesa-ver-opcoes:focus-visible,
.gc-mesa-titulo-superficie:focus-visible {
  outline: 3px solid var(--gc-mesa-ocean-deep, #0a4f46);
  outline-offset: 3px;
}

.gc-mesa-status {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 780px) {
  .gc {
    width: 100%;
    max-width: 1120px;
    height: 100svh;
  }

  .gc-topo,
  .gc-contexto,
  .gc-mesa-velada {
    padding-inline: max(24px, calc((100% - 960px) / 2));
  }

  .gc-mesa-folha-corpo {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
  }

  .gc-mesa-cabeca,
  .gc-mesa-introducao,
  .gc-mesa-opcoes {
    padding-inline: 34px;
  }

  .gc-mesa-introducao {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 16px;
  }

  .gc-mesa-gali {
    height: 82px;
  }

  .gc-mesa-abertura {
    font-size: 18px;
  }

  .gc-mesa-principal--com-foto {
    display: grid;
    grid-template-columns: minmax(240px, 0.78fr) minmax(360px, 1.22fr);
    gap: 30px;
    align-items: stretch;
  }

  .gc-mesa-foto {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 236px;
    margin: 0;
  }

  .gc-mesa-principal-conteudo {
    padding: 6px 0;
  }

  .gc-mesa-titulo {
    font-size: 31px;
  }

  .gc-mesa-fatos {
    gap: 20px;
  }

  .gc-mesa-alternativas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gc-mesa-alternativa {
    padding: 20px 24px 20px 0;
  }

  .gc-mesa-alternativa + .gc-mesa-alternativa {
    padding-left: 24px;
    border-left: 1px solid var(--gc-mesa-line);
  }

  .gc-mesa-alternativa.gc-mesa-opcao--kept {
    padding-left: 18px;
  }

  .gc-mesa-alternativa + .gc-mesa-alternativa.gc-mesa-opcao--kept {
    padding-left: 30px;
    background-position: 12px 0;
  }

  .gc-mesa-pe {
    padding: 20px 34px 28px 48px;
  }

  .gc-mesa-pe::before {
    left: 34px;
  }
}

@media (max-width: 359px) {
  .gc { --t: 0px; }
}