/* ═══════════════════════════════════════════════════════════════════════════
   GOVINDA · LP — V3: as seções nascidas no construtor
   ═══════════════════════════════════════════════════════════════════════════
   Carrega POR ÚLTIMO, e SÓ pelo renderizador (site/lp.php:301-303).

   Por que um arquivo terceiro em vez de crescer o govinda-lp-v2.css: as duas
   landing pages estáticas que estão no ar — lp/tailandia-lanternas/ e
   lp/terra-dos-himalaias/ — carregam govinda-lp.css e govinda-lp-v2.css à mão,
   com ?v=<?=rand()?>, ou seja, sem cache nenhum. Uma regra nova naqueles dois
   arquivos chegaria nas duas páginas no reload seguinte, sem ninguém pedir.
   Aqui não chega: elas listam seus CSS uma a uma e não conhecem este.

   No dia em que elas forem importadas para o construtor, passam a ser servidas
   pelo lp.php e ganham o V3 junto — sem precisar mexer em nada.

   ───────────────────────────────────────────────────────────────────────────
   REGRAS DA CASA, para o que vier abaixo

   1. Tokens, nunca cores literais.
      .secao--navy (govinda-lp.css:53) inverte o tema REDECLARANDO as
      variáveis. Quem escreve var(--tinta) e var(--superficie) funciona nos
      dois fundos de graça; quem crava #33261a fica ilegível no escuro.

   2. O botão já tem os dois pseudo-elementos ocupados.
      .bt::before é o gradiente de hover (govinda-lp.css:160) e .bt--ouro::after
      é o brilho que atravessa (govinda-lp-v2.css:152). Um estilo de botão novo
      ou redefine só --bt-fundo/--bt-cor (padrão de .bt--claro, que está
      definido e nunca foi usado), ou nasce como classe irmã, fora da árvore
      do .bt.

   3. data-revela vai nos FILHOS, nunca na <section>.
      O escalonamento é por parentNode (govinda-lp-v2.js:83): irmãos entram de
      80 em 80 ms, teto de 5. Marcar a seção inteira mata o efeito.

   4. data-msg é o gatilho do WhatsApp — a classe é irrelevante.
      montaWhatsapp() (govinda-lp-v2.js:26) reescreve o href de TODO
      a[data-msg]. Um CTA que aponte para outro lugar não pode ter o atributo.

   5. O corte mobile é 680px — o único breakpoint presente em todos os
      arquivos do projeto.

   6. Toda imagem sai com width e height (lp_img() já garante): é o que impede
      o pulo de layout no carregamento.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   RECURSOS DA PÁGINA
   ═══════════════════════════════════════════════════════════════════════════
   Elementos fixos que a campanha liga e desliga. Todos vivem FORA do <main>
   (ver o laço no fim de lp.php), porque `main{position:relative;z-index:2}`
   cria contexto de empilhamento e prenderia qualquer z-index lá dentro.

   FAIXA DE Z-INDEX, para não brigarem entre si nem com o que já existe:
      1    body::after   o grão de papel
      2    main/header/footer
      100  .topo         cabeçalho fixo
      110  .barra-mobile barra de conversão do celular
      120  RECURSOS      ← esta faixa
      4000 .gf-tela      tela cheia da galeria (tem de cobrir tudo)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── WhatsApp flutuante ─────────────────────────────────────────────────────
   Verde do WhatsApp, e não os tokens da casa: é um signo de marca alheia, e
   trocar a cor faz o ícone demorar meio segundo a mais para ser reconhecido —
   que é exatamente o que um botão de contato não pode custar. */
.wf-bolha {
  position: fixed; z-index: 120;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  display: inline-flex; align-items: center; gap: .6em;
  min-width: 58px; height: 58px; padding: 0 17px;
  border-radius: 999px;
  background: #25d366; color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(6,12,20,.28), 0 2px 6px rgba(6,12,20,.18);
  transition: transform var(--t-rapida) var(--mola),
              box-shadow var(--t-rapida) var(--suave);
}
/* Sem rótulo é círculo perfeito: o padding lateral sai e a largura vira a
   altura. Com rótulo, vira pílula e o padding volta. */
.wf-bolha:not(.wf-bolha--pilula) { padding: 0; width: 58px; justify-content: center; }
.wf-bolha:hover,
.wf-bolha:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(6,12,20,.34); }
.wf-bolha:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.wf-icone { display: flex; }
.wf-icone svg { width: 27px; height: 27px; fill: currentColor; }
.wf-texto {
  font-family: var(--sans); font-weight: 600; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}

@media (max-width: 680px) {
  /* O texto sai no celular: numa tela de 375px a pílula comeria um terço da
     largura, e o ícone verde já é auto-explicativo. */
  .wf-bolha--pilula { padding: 0; width: 54px; justify-content: center; }
  .wf-texto { display: none; }
  .wf-bolha { width: 54px; height: 54px; }
  .wf-icone svg { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-bolha { transition: none; }
  .wf-bolha:hover, .wf-bolha:focus-visible { transform: none; }
}

/* ── Aviso de cookies ──────────────────────────────────────────────────────
   Faixa no rodapé, não modal de tela cheia: o Google penaliza interstício
   intrusivo no celular, e uma LP de tráfego pago é justamente onde isso dói. */
.ck-faixa {
  position: fixed; z-index: 130;      /* acima da bolha: exige resposta */
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.8rem, 3vw, 2rem); flex-wrap: wrap;
  padding: 1rem clamp(1rem, 4vw, 2.4rem) calc(1rem + env(safe-area-inset-bottom));
  background: var(--navy); color: #f2ecdd;
  box-shadow: 0 -8px 30px rgba(6,12,20,.28);
}
.ck-faixa[hidden] { display: none; }
.ck-texto {
  margin: 0; max-width: 62ch;
  font-family: var(--sans); font-weight: 300; font-size: .86rem; line-height: 1.5;
  color: rgba(242,236,221,.9);
}
.ck-link { color: var(--ouro); text-decoration: underline; text-underline-offset: 3px; }
.ck-acoes { display: flex; gap: .6rem; flex: 0 0 auto; }
/* Os dois botões têm o MESMO peso visual de propósito: recusar precisa custar o
   mesmo clique que aceitar — esconder o "não" é padrão escuro. */
.ck-bt {
  font-family: var(--sans); font-weight: 600; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .85em 1.6em; border-radius: 99px; cursor: pointer;
  min-width: 118px;
  transition: background var(--t-rapida) var(--suave);
}
.ck-bt--sim { background: var(--ouro); color: var(--navy); border: 1px solid var(--ouro); }
.ck-bt--sim:hover { background: #e8c88a; }
.ck-bt--nao {
  background: transparent; color: #f2ecdd;
  border: 1px solid rgba(242,236,221,.4);
}
.ck-bt--nao:hover { background: rgba(242,236,221,.12); }
.ck-bt:focus-visible { outline: 2px solid #f2ecdd; outline-offset: 2px; }

@media (max-width: 680px) {
  .ck-faixa { flex-direction: column; align-items: stretch; text-align: center; }
  .ck-acoes { justify-content: stretch; }
  .ck-bt { flex: 1; min-width: 0; }
}

/* ── Contagem regressiva ───────────────────────────────────────────────────
   Faixa fina colada no alto, ACIMA do cabeçalho fixo (que fica em 100). Ela
   não rola junto: some da vista quando a pessoa desce, e é isso que evita
   roubar altura permanente da tela pequena. */
.ct-faixa {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.7rem, 2vw, 1.4rem); flex-wrap: wrap;
  padding: .55rem clamp(1rem, 4vw, 2.4rem);
  background: var(--acento-forte); color: #faf7ef;
}
.ct-rotulo {
  font-family: var(--sans); font-weight: 300; font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(250,247,239,.86);
}
.ct-numeros { display: flex; gap: clamp(.6rem, 2vw, 1.2rem); align-items: baseline; }
.ct-bloco { display: inline-flex; align-items: baseline; gap: .3em; }
.ct-bloco b {
  font-family: var(--sans); font-weight: 600; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; color: #faf7ef;
}
.ct-bloco i {
  font-style: normal; font-family: var(--sans); font-weight: 300;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(250,247,239,.72);
}
@media (max-width: 680px) {
  .ct-faixa { gap: .5rem; padding: .5rem .9rem; }
  .ct-rotulo { font-size: .58rem; letter-spacing: .16em; }
  .ct-bloco b { font-size: .95rem; }
}

/* ── Voltar ao topo ────────────────────────────────────────────────────────
   À esquerda: a direita é da bolha do WhatsApp. */
.tp-bt {
  position: fixed; z-index: 120;
  left: clamp(1rem, 3vw, 1.8rem);
  /* Bem acima do rodapé: a caixa de balões mora no mesmo canto esquerdo e tem
     ~200px de altura. Com o botão colado embaixo, um cobria o outro. Aqui ele
     sobe para a altura da metade inferior da tela, onde o polegar alcança e
     nada mais disputa espaço. */
  bottom: clamp(9rem, 26vh, 15rem);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-2);
  /* Nasce apagado e fora de alcance: `visibility` (e não `display`) para a
     transição ter de onde partir, e para o Tab não pousar num botão invisível. */
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-rapida) var(--suave),
              transform var(--t-rapida) var(--mola),
              visibility var(--t-rapida);
}
.tp-bt.is-visivel { opacity: 1; visibility: visible; transform: none; }
.tp-bt:hover { background: #fffdf8; }
.tp-bt:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.tp-bt svg { width: 20px; height: 20px; }
@supports (backdrop-filter: blur(1px)) {
  .tp-bt { background: var(--vidro); backdrop-filter: saturate(180%) blur(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .tp-bt { transition: none; }
}

/* ── Balões ────────────────────────────────────────────────────────────────
   Canto inferior ESQUERDO: a direita é da bolha do WhatsApp. */
.bl-caixa {
  position: fixed; z-index: 120;
  left: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  width: min(340px, calc(100vw - 2rem));
  padding: 1.1rem 1.2rem 1rem;
  border-radius: 20px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  box-shadow: 0 14px 44px rgba(51,38,26,.22);
  /* Entra deslizando de baixo — o JS tira o hidden e liga .is-dentro. */
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--t-media) var(--suave), transform var(--t-media) var(--mola);
}
.bl-caixa[hidden] { display: none; }
.bl-caixa.is-dentro { opacity: 1; transform: none; }

.bl-x {
  position: absolute; top: 8px; right: 10px;
  width: 26px; height: 26px; border: none; background: none;
  color: var(--tinta-suave); font-size: 20px; line-height: 1; cursor: pointer;
  border-radius: 50%;
  transition: background var(--t-rapida) var(--suave);
}
.bl-x:hover { background: var(--superficie-2); color: var(--tinta); }
.bl-x:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* O palco é uma grade de UMA célula: os balões se sobrepõem e trocam por
   opacidade, e a altura é a do maior — sem salto na troca. */
.bl-palco { display: grid; }
.bl-balao {
  grid-area: 1 / 1;
  display: flex; align-items: flex-start; gap: .85rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-media) var(--suave), visibility var(--t-media);
}
.bl-balao.is-ativo { opacity: 1; visibility: visible; }

.bl-avatar {
  flex: 0 0 auto; width: 52px; height: 52px;
  border-radius: 50%; overflow: hidden;
  background: var(--ouro);
  display: grid; place-items: center;
}
.bl-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-corpo { min-width: 0; }   /* deixa o texto quebrar em vez de esticar a caixa */
.bl-titulo {
  margin: 0 0 .25rem;
  font-family: var(--serif); font-weight: 700; font-size: 1rem;
  color: var(--acento);
}
.bl-texto {
  margin: 0;
  font-family: var(--sans); font-weight: 300; font-size: .86rem; line-height: 1.5;
  color: var(--tinta-media);
}

.bl-pontos { display: flex; gap: 6px; justify-content: center; margin-top: .9rem; }
.bl-ponto {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
  background: var(--linha-forte); opacity: .45; cursor: pointer;
  transition: opacity var(--t-rapida) var(--suave), transform var(--t-rapida) var(--mola);
}
.bl-ponto:hover { opacity: .8; }
.bl-ponto.is-ativo { opacity: 1; transform: scale(1.3); background: var(--acento); }
.bl-ponto:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

@media (max-width: 680px) {
  /* No celular a caixa ocupa a largura, menos o espaço da bolha do WhatsApp. */
  .bl-caixa { width: calc(100vw - 5.6rem); left: .8rem; bottom: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-caixa, .bl-balao, .bl-ponto { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NUVEM DE PALAVRAS  ·  .secao-np
   ═══════════════════════════════════════════════════════════════════════════
   O truque: duas listas idênticas em sequência, e o trilho anda 50%. Quando
   termina, a cópia está exatamente onde a original começou — a volta ao zero
   não é vista. Por isso o partial exige 7 palavras: com menos, as duas listas
   não enchem a tela e o vão entre elas aparece.
   ══════════════════════════════════════════════════════════════════════════ */
.secao-np { padding-block: clamp(2.4rem, 5vw, 4rem); overflow: hidden; }
.np-faixa {
  display: flex; width: max-content;
  /* O desbotado nas pontas é o que faz a faixa parecer infinita em vez de
     cortada. mask e -webkit-mask juntos: o Safari só entende o prefixado. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  animation: npCorre var(--np-dur, 40s) linear infinite;
}
.np-faixa--direita { animation-direction: reverse; }
.np-faixa:hover { animation-play-state: paused; }
@keyframes npCorre { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.np-trilho {
  display: flex; align-items: center;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  margin: 0; padding: 0 clamp(.8rem, 2vw, 1.7rem); list-style: none;
}
.np-palavra {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  color: var(--tinta-suave); white-space: nowrap;
  transition: color var(--t-rapida) var(--suave);
}
.np-faixa:hover .np-palavra { color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  /* O reset global de govinda-lp.css:444 já mata a animação, mas a deixaria
     congelada em posição arbitrária — com metade da faixa fora da tela. Aqui a
     faixa vira uma lista quieta que quebra em linhas e cabe inteira. */
  .np-faixa {
    animation: none; width: 100%; flex-wrap: wrap; justify-content: center;
    -webkit-mask-image: none; mask-image: none;
  }
  .np-faixa .np-trilho:nth-child(2) { display: none; }   /* a cópia não serve mais */
  .np-trilho { flex-wrap: wrap; justify-content: center; row-gap: .7rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDES SOCIAIS  ·  .secao-rs
   ══════════════════════════════════════════════════════════════════════════ */
.rs-linha {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap;
  gap: clamp(.9rem, 3vw, 2rem);      /* o "equidistante" do pedido */
  margin: 2rem 0 0; padding: 0; list-style: none;
}
.rs-item { display: flex; }
.rs-link {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  color: var(--tinta-media);
  border: 1px solid var(--linha);
  background: var(--superficie);
  transition: transform var(--t-rapida) var(--mola),
              color var(--t-rapida) var(--suave),
              border-color var(--t-rapida) var(--suave),
              box-shadow var(--t-rapida) var(--suave);
}
.rs-link svg { width: 24px; height: 24px; }
.rs-link:hover, .rs-link:focus-visible {
  transform: translateY(-3px);
  color: var(--acento); border-color: var(--linha-forte);
  box-shadow: var(--sombra-2);
}
.rs-link:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

@media (max-width: 680px) {
  .rs-link { width: 46px; height: 46px; }
  .rs-link svg { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-link { transition: none; }
  .rs-link:hover, .rs-link:focus-visible { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTÃO PERSONALIZADO  ·  .secao-cb
   ═══════════════════════════════════════════════════════════════════════════
   Classe IRMÃ do .bt, e não modificadora: o .bt tem ::before (gradiente de
   hover) e ::after (brilho) ocupados, e herdá-los somaria dois efeitos por
   cima de uma cor que a campanha escolheu a dedo.
   ══════════════════════════════════════════════════════════════════════════ */
.cb-dentro { text-align: center; }
.cb-caixa { display: flex; justify-content: center; margin-top: 1.8rem; }
.cb-bt {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600; font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  padding: 1.2em 2.6em;
  border: none; border-radius: 99px; cursor: pointer;
  box-shadow: var(--sombra-2);
  transition: transform var(--t-rapida) var(--mola),
              box-shadow var(--t-rapida) var(--suave),
              filter var(--t-rapida) var(--suave);
}
/* Sem cor escolhida no painel, o dourado da casa. */
.cb-bt--padrao { background: var(--acento); }
.cb-bt--reto { border-radius: 2px; }
.cb-bt:hover, .cb-bt:focus-visible {
  transform: translateY(-2px); box-shadow: var(--sombra-3);
  /* brightness em vez de segunda cor: funciona com QUALQUER cor que a campanha
     escolher, sem precisar calcular um tom de hover no PHP. */
  filter: brightness(1.08);
}
.cb-bt:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.cb-bt--inerte { cursor: default; opacity: .82; }
.cb-bt--inerte:hover { transform: none; filter: none; box-shadow: var(--sombra-2); }

@media (max-width: 680px) {
  .cb-bt { padding: 1.1em 1.9em; font-size: .72rem; letter-spacing: .16em; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-bt { transition: none; }
  .cb-bt:hover, .cb-bt:focus-visible { transform: none; }
}

/* ── trilha de navegação (breadcrumb) ──────────────────────────────────────
   Escondida aos olhos, presente no DOM. Não é display:none: isso a tiraria
   também do leitor de tela, e ela existe justamente para robô e leitor. Este é
   o padrão "visually hidden" — sai do enquadramento sem sair da árvore de
   acessibilidade. */
.lp-trilha {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Data do depoimento — discreta, ao lado do nome. */
.depo-data {
  font-family: var(--sans); font-weight: 300; font-size: .78rem;
  color: var(--tinta-suave); margin-left: .5em;
}

/* ── "O que está incluso" como lista de definição ──────────────────────────
   O CSS compartilhado veste `.inclui li` (govinda-lp.css:271-279) e não pode
   ser tocado — as duas LPs estáticas o carregam. Como o partial passou a usar
   <dl>/<dt>/<dd>, as regras de lá deixam de alcançá-lo, e o visual é
   reconstruído aqui, igual ao que era. */
.inclui-dl { display: grid; gap: 0; margin-top: 1rem; }
.inclui-dl > div {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linha);
}
.inclui-dl > div:last-child { border-bottom: none; }
.inclui-dl dt {
  font-weight: 400; font-size: 1.06rem; margin: 0 0 .28rem;
  color: var(--tinta);
}
.inclui-dl dd {
  margin: 0;
  font-family: var(--sans); font-weight: 300; font-size: .92rem;
  color: var(--tinta-suave); line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VALORES E CONDIÇÕES  ·  .secao-pr
   ══════════════════════════════════════════════════════════════════════════ */
.pr-dentro { text-align: center; }
.pr-subtitulo {
  margin: .4rem 0 0;
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(.82rem, 1.6vw, 1rem);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.pr-moeda {
  margin: .9rem 0 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--tinta-media);
}
.pr-olho {
  margin: 2.8rem 0 1rem;
  font-family: var(--sans); font-weight: 300;
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.pr-olho--ouro { color: var(--acento); margin-top: 2.4rem; }

/* A caixa rola sozinha em tela estreita — a tabela tem largura mínima e não
   pode espremer preço até quebrar linha no meio do número. */
.pr-tabela-caixa { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pr-tabela {
  width: 100%; min-width: 480px;
  border-collapse: collapse; text-align: left;
  background: var(--superficie-2);
}
.pr-tabela td, .pr-tabela th {
  padding: 1.15rem clamp(.9rem, 2.4vw, 1.8rem);
  border-bottom: 1px solid var(--linha);
}
.pr-tabela tbody tr:last-child td,
.pr-tabela tbody tr:last-child th { border-bottom: none; }
.pr-canto, .pr-tabela thead th {
  font-family: var(--sans); font-weight: 300;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.pr-opcao {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(.95rem, 1.8vw, 1.12rem);
  color: var(--navy);
}
.secao--navy .pr-opcao { color: var(--tinta); }
.pr-valor {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.42rem);
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
/* O <span itemprop="name"> existe só para o robô ler a oferta por extenso. */
.pr-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pr-parcelado { margin-top: .4rem; }
.pr-parc-nota {
  margin: 0 0 1rem;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(.95rem, 1.8vw, 1.15rem);
  color: var(--tinta-media);
}
.pr-parc-texto {
  margin: 0 auto; max-width: 46ch;
  font-family: var(--serif); font-size: clamp(1rem, 1.9vw, 1.2rem);
  line-height: 1.6; color: var(--tinta);
}

/* ── o gatilho de vagas ────────────────────────────────────────────────────
   Discreto de propósito: cor de acento, não vermelho de alarme. Escassez que
   grita soa falsa, e a informação aqui é verdadeira. */
.pr-vagas {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 2.4rem 0 0;
  font-family: var(--sans); font-weight: 500;
  font-size: .82rem; letter-spacing: .06em;
  color: var(--acento-forte);
}
.secao--navy .pr-vagas { color: var(--ouro); }
.pr-vagas-ponto {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
  animation: prPulsa 2.4s ease-in-out infinite;
}
@keyframes prPulsa { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.pr-vagas--esgotado { color: var(--tinta-suave); }
.pr-vagas--esgotado .pr-vagas-ponto { animation: none; opacity: .5; }

.pr-barra {
  width: min(320px, 80%); height: 4px; margin: .9rem auto 0;
  background: var(--linha); border-radius: 3px; overflow: hidden;
}
.pr-barra-cheia { display: block; height: 100%; background: var(--acento); border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pr-vagas-ponto { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULÁRIO (roteiro em PDF)  ·  .secao-fr
   ═══════════════════════════════════════════════════════════════════════════
   Campos com o desenho do /contato/ do site — borda #d8d2c6, fundo branco,
   respiro de 12px/14px —, mas em classes daqui: puxar govinda-form.css inteiro
   por causa de três campos não se paga.
   ══════════════════════════════════════════════════════════════════════════ */
.fr-dentro { text-align: center; }
.fr-promessa {
  margin: 1rem auto 0; max-width: 48ch;
  font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.28rem);
  line-height: 1.6; color: var(--tinta-media);
}
.fr-form { max-width: 560px; margin: 2.4rem auto 0; }

/* A isca. Fora da tela, e não display:none — robô decente ignora o que está
   escondido por display, mas preenche o que só saiu do enquadramento. */
.fr-isca {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.fr-campos { display: grid; gap: 1.1rem; }
.fr-campo { display: block; text-align: left; }
.fr-rotulo {
  display: block; margin-bottom: .4rem;
  font-family: var(--sans); font-weight: 300;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.fr-campo input {
  width: 100%; padding: 12px 14px;
  border: 1px solid #d8d2c6; background: #fff;
  font: inherit; color: #33261a;
  border-radius: 2px;
  transition: border-color var(--t-rapida) var(--suave);
}
.fr-campo input::placeholder { color: #a89b88; }
.fr-campo input:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(180,116,31,.14);
}
/* No fundo escuro a borda clara sumiria; o campo em si continua branco, que é
   o que o site faz e o que deixa o texto digitado legível. */
.secao--navy .fr-campo input { border-color: rgba(250,247,239,.3); }

.fr-aceite {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 1.3rem 0 0; text-align: left;
  font-family: var(--sans); font-weight: 300; font-size: .82rem; line-height: 1.5;
  color: var(--tinta-media);
  cursor: pointer;
}
.fr-aceite input { margin-top: .22em; flex: 0 0 auto; accent-color: var(--acento); }

.fr-bt {
  margin-top: 1.6rem;
  font-family: var(--sans); font-weight: 600; font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 1.15em 2.6em; border: none; border-radius: 99px; cursor: pointer;
  background: var(--acento); color: #faf7ef;
  box-shadow: var(--sombra-2);
  transition: transform var(--t-rapida) var(--mola),
              box-shadow var(--t-rapida) var(--suave),
              opacity var(--t-rapida) var(--suave);
}
.fr-bt:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sombra-3); }
.fr-bt:disabled { opacity: .55; cursor: default; transform: none; }
.fr-bt:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }

/* Confirmação discreta: nasce sem altura e só ocupa espaço quando tem texto —
   assim o botão não "pula" ao aparecer a mensagem. */
.fr-recado {
  margin: 1rem 0 0; min-height: 1.4em;
  font-family: var(--sans); font-weight: 300; font-size: .86rem;
  color: var(--tinta-media);
}
.fr-recado:empty { margin: 0; min-height: 0; }
.fr-recado.is-ok  { color: #4a6b52; }
.fr-recado.is-erro { color: #8a3324; }
.secao--navy .fr-recado.is-ok  { color: #9dd0aa; }
.secao--navy .fr-recado.is-erro { color: #ff9d90; }

/* Depois do envio o formulário some e fica só a confirmação: continuar
   mostrando os campos convida a mandar de novo o que já foi mandado. */
.fr-form.is-enviado .fr-campos,
.fr-form.is-enviado .fr-aceite,
.fr-form.is-enviado .fr-bt { display: none; }
.fr-form.is-enviado .fr-recado { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .fr-bt { transition: none; }
  .fr-bt:hover:not(:disabled) { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO DESLIZANTE  ·  .secao-hd
   ═══════════════════════════════════════════════════════════════════════════
   Slides em tela cheia com texto e botões próprios. A estrutura e as medidas
   vêm da referência; as cores e as curvas vêm dos tokens da casa, para a seção
   não destoar do resto da página.

   O texto aqui é SEMPRE claro, sobre foto escurecida pelo véu — por isso é o
   único lugar deste arquivo que usa branco literal em vez de var(--tinta): não
   é o tema da seção que manda, é o contraste sobre a fotografia.
   ══════════════════════════════════════════════════════════════════════════ */
.secao-hd {
  position: relative;
  width: 100%;
  height: clamp(460px, 68vh, 640px);
  overflow: hidden;
  background: var(--navy);
}
.secao-hd:focus-visible { outline: 2px solid var(--acento); outline-offset: -4px; }

.hd-janela { width: 100%; height: 100%; overflow: hidden; }
.hd-trilho {
  display: flex;
  height: 100%;
  /* --mola é a curva da casa; a referência usava a dela, com a mesma intenção */
  transition: transform 600ms var(--mola);
  will-change: transform;
}
.hd-slide { min-width: 100%; height: 100%; position: relative; flex-shrink: 0; }

.hd-foto { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hd-veu {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
              rgba(8,18,32,.72) 0%, rgba(8,18,32,.42) 42%,
              rgba(8,18,32,.14) 72%, transparent 100%);
}

.hd-conteudo {
  position: absolute;
  bottom: clamp(84px, 12vh, 116px);
  left: var(--gutter);
  right: var(--gutter);
  max-width: 620px;
  color: #faf7ef;
  z-index: 2;
}
.hd-selo {
  display: inline-block;
  font-family: var(--sans); font-weight: 300;
  font-size: .62rem; letter-spacing: .38em; text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 1rem;
}
.hd-titulo {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.08;
  margin: 0 0 1rem;
  color: #faf7ef;
  text-shadow: 0 2px 24px rgba(8,18,32,.5);
}
.hd-titulo em { color: var(--ouro); font-style: italic; }
.hd-descricao {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  margin: 0 0 1.7rem;
  max-width: 46ch;
  color: rgba(250,247,239,.92);
  text-shadow: 0 1px 16px rgba(8,18,32,.6);
}

/* ── botões ────────────────────────────────────────────────────────────────
   Classe irmã do .bt, e não uma modificadora dele: o .bt tem ::before e
   ::after já ocupados (gradiente de hover e brilho), e herdá-los aqui daria
   dois efeitos sobrepostos. */
.hd-acoes { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hd-bt {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans); font-weight: 600;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 2em;
  border-radius: 99px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--t-rapida) var(--mola),
              box-shadow var(--t-rapida) var(--suave),
              background var(--t-rapida) var(--suave);
}
.hd-bt--claro   { background: #faf7ef; color: var(--navy); box-shadow: var(--sombra-2); }
.hd-bt--claro:hover,
.hd-bt--claro:focus-visible { transform: translateY(-2px); box-shadow: var(--sombra-3); }
.hd-bt--apagado {
  background: transparent; color: #faf7ef;
  border-color: rgba(250,247,239,.45);
}
.hd-bt--apagado:hover,
.hd-bt--apagado:focus-visible { background: rgba(250,247,239,.12); border-color: rgba(250,247,239,.75); }
/* Rótulo sem destino: parece botão, mas não finge ser clicável. */
.hd-bt--inerte { cursor: default; opacity: .82; }
.hd-bt--inerte:hover { transform: none; box-shadow: var(--sombra-2); }

/* ── controles ─────────────────────────────────────────────────────────── */
.hd-controles {
  position: absolute; bottom: 28px; left: 0; right: 0;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; z-index: 3;
}
.hd-setas { display: flex; gap: .6rem; }
.hd-seta {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(250,247,239,.15);
  border: 1px solid rgba(250,247,239,.24);
  color: #faf7ef; font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-rapida) var(--suave);
}
.hd-seta:hover, .hd-seta:focus-visible { background: rgba(250,247,239,.3); }
@supports (backdrop-filter: blur(1px)) {
  .hd-seta { backdrop-filter: blur(8px); }
}
.hd-indicadores { display: flex; align-items: center; gap: 1rem; }
.hd-contador {
  font-family: var(--sans); font-weight: 300; font-size: .78rem;
  color: rgba(250,247,239,.82); font-variant-numeric: tabular-nums;
}
.hd-pontos { display: flex; gap: 8px; }
.hd-ponto {
  width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0;
  background: rgba(250,247,239,.35); cursor: pointer;
  transition: background var(--t-rapida) var(--suave),
              transform var(--t-rapida) var(--mola);
}
.hd-ponto:hover { background: rgba(250,247,239,.6); }
.hd-ponto.is-ativo { background: #faf7ef; transform: scale(1.25); }

@media (max-width: 680px) {
  .secao-hd { height: clamp(420px, 76vh, 560px); }
  .hd-conteudo { bottom: 104px; max-width: none; }
  .hd-acoes .hd-bt { width: 100%; justify-content: center; }
  /* O contador some, os pontos ficam: no celular o espaço é do polegar. */
  .hd-contador { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* O JS já não liga o avanço automático; aqui some também o deslize, para
     quem trocar de slide na mão não levar um empurrão lateral. */
  .hd-trilho { transition: none; }
  .hd-bt { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS DESLIZANTES  ·  .secao-cd
   ═══════════════════════════════════════════════════════════════════════════
   Cartões altos num trilho horizontal. O fundo é foto OU cor; o texto se
   adapta por variante, e não por regra de cada cor.
   ══════════════════════════════════════════════════════════════════════════ */
.secao-cd { overflow: hidden; }
.cd-janela { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow: hidden; }
.cd-trilho {
  display: flex;
  gap: 1.25rem;
  transition: transform 550ms var(--mola);
  will-change: transform;
  cursor: grab;
}
.cd-trilho.is-arrastando { cursor: grabbing; transition: none; }

.cd-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(268px, 30%, 380px);
  height: clamp(460px, 58vh, 600px);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .35s var(--mola), box-shadow .35s var(--suave);
}
/* Só a sombra no hover — sem translateY. O cartão levantando funcionava no
   desktop, mas no toque o "hover" gruda depois do tap: o cartão ficava
   deslocado, empurrando o vizinho e brigando com o arrasto do trilho. */
.cd-card:hover { box-shadow: 0 10px 34px rgba(51,38,26,.16); }

/* ── variantes de fundo ─────────────────────────────────────────────────── */
.cd-card--claro  { background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta); }
.cd-card--cor    { color: var(--tinta); }              /* cor clara: tinta escura */
.cd-card--escuro { color: #faf7ef; }                   /* cor escura: tinta clara */
.cd-card--foto   { color: #faf7ef; }
.cd-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* O véu só existe sobre foto — sobre cor chapada o contraste já foi decidido
   pela luminância, no PHP. */
.cd-card--foto::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,18,32,.42) 0%, rgba(8,18,32,.10) 38%,
                                      rgba(8,18,32,.14) 60%, rgba(8,18,32,.62) 100%);
}

.cd-conteudo { position: relative; z-index: 2; padding: 2rem 1.9rem 0; }
.cd-titulo {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.16; margin: 0 0 .7rem; color: inherit;
}
.cd-titulo em { color: inherit; font-style: italic; opacity: .92; }
.cd-descricao {
  font-family: var(--sans); font-weight: 300;
  font-size: .95rem; line-height: 1.55; margin: 0;
  opacity: .88; max-width: 34ch; color: inherit;
}
.cd-acoes {
  position: relative; z-index: 2;
  padding: 0 1.9rem 1.9rem;
  display: flex; gap: .55rem; flex-wrap: wrap;
}

/* ── botões ────────────────────────────────────────────────────────────────
   Cores declaradas, e não currentColor. A versão anterior herdava a cor do
   cartão para pintar o botão, e num cartão com foto isso dava botão bege com
   texto bege — ilegível. Agora o par é fixo: cheio = bege com texto escuro;
   vazado = contorno e texto bege. O mesmo par serve sobre foto e sobre cor
   escura, porque o bege contrasta com os dois. */
.cd-bt {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sans); font-weight: 600;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  padding: .9em 1.5em; border-radius: 99px;
  border: 1px solid transparent;
  transition: background var(--t-rapida) var(--suave),
              border-color var(--t-rapida) var(--suave);
}
/* cheio: bege sólido, texto escuro */
.cd-bt--cheio { background: #f4ecdd; border-color: #f4ecdd; color: #22303c; }
.cd-bt--cheio:hover { background: #fffdf8; border-color: #fffdf8; }

/* vazado: contorno bege, texto bege */
.cd-bt--contorno {
  background: transparent; border-color: rgba(244,236,221,.62); color: #f4ecdd;
}
.cd-bt--contorno:hover { border-color: #f4ecdd; background: rgba(244,236,221,.14); }

/* No cartão CLARO o bege sumiria no fundo: ali o vazado usa a tinta da casa. */
.cd-card--claro .cd-bt--contorno,
.cd-card--cor:not(.cd-card--escuro) .cd-bt--contorno {
  border-color: rgba(51,38,26,.34); color: var(--tinta);
}
.cd-card--claro .cd-bt--contorno:hover,
.cd-card--cor:not(.cd-card--escuro) .cd-bt--contorno:hover {
  border-color: var(--acento-forte); color: var(--acento-forte); background: transparent;
}

.cd-bt--inerte { cursor: default; opacity: .66; }
.cd-bt--inerte:hover { background: #f4ecdd; border-color: #f4ecdd; }

/* ── setas ─────────────────────────────────────────────────────────────── */
.cd-setas { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.4rem; }
.cd-seta {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--superficie); border: 1px solid var(--linha);
  color: var(--tinta); font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t-rapida) var(--suave), opacity var(--t-rapida) var(--suave);
}
.cd-seta:hover:not(:disabled) { border-color: var(--acento-forte); color: var(--acento-forte); }
.cd-seta:disabled { opacity: .3; cursor: default; }

@media (max-width: 680px) {
  .cd-card { width: 78vw; height: clamp(420px, 66vh, 520px); }
  .cd-setas { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-trilho, .cd-card, .cd-bt { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS INFORMATIVOS  ·  .secao-ci
   ═══════════════════════════════════════════════════════════════════════════
   Duas colunas: a esquerda para (sticky) enquanto a direita rola. Zero
   JavaScript — o que também significa que funciona com o script desligado.
   ══════════════════════════════════════════════════════════════════════════ */
.ci-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.ci-topo .cabeca-secao { margin-bottom: 0; }
.ci-topo-bt {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--sans); font-weight: 500; font-size: .82rem;
  text-decoration: none;
  padding: .7em 1.5em; border-radius: 99px;
  border: 1px solid var(--linha); color: var(--tinta); background: transparent;
  transition: border-color var(--t-rapida) var(--suave), color var(--t-rapida) var(--suave);
}
.ci-topo-bt:hover { border-color: var(--acento-forte); color: var(--acento-forte); }

.ci-grade {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ── a coluna que fica ─────────────────────────────────────────────────── */
.ci-destaque { position: sticky; top: 96px; }
.ci-destaque-titulo {
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.14;
  margin: 0 0 .9rem; color: var(--tinta);
}
.ci-destaque-moldura,
.ci-item-moldura { border-radius: 20px; overflow: hidden; background: var(--superficie-2); }
.ci-destaque-moldura { margin-top: 1.2rem; aspect-ratio: 4 / 3; }
.ci-destaque-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── a coluna que rola ─────────────────────────────────────────────────── */
.ci-lista { display: flex; flex-direction: column; }
.ci-item {
  display: grid; grid-template-columns: 1fr 140px;
  gap: 1.2rem; align-items: center;
  padding: 1.5rem 0; border-bottom: 1px solid var(--linha);
}
.ci-item:first-child { padding-top: 0; }
.ci-item:last-child  { border-bottom: none; }
.ci-item-titulo {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.3;
  margin: 0 0 .6rem; color: var(--tinta);
}
/* A imagem cresceu 30% (108 → 140) — a coluna da grade acompanha, senão a
   moldura estoura para fora do cartão. */
.ci-item-moldura { width: 140px; height: 140px; }
.ci-item-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── a descrição ───────────────────────────────────────────────────────────
   Entre o título e a linha de data. Sans e mais clara que o título: é resumo,
   não manchete. Só existe quando preenchida — o PHP não emite o <p> vazio. */
.ci-desc {
  font-family: var(--sans); font-weight: 300;
  font-size: .88rem; line-height: 1.55;
  color: var(--tinta-media);
  margin: -.15rem 0 .6rem;   /* encosta no título, respira antes da data */
  max-width: 54ch;           /* linha longa demais cansa antes de informar */
}

/* ── a linha de informação ─────────────────────────────────────────────── */
.ci-info {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  font-family: var(--sans); font-weight: 300; font-size: .8rem;
  color: var(--tinta-suave);
}
.ci-cat { font-weight: 500; color: var(--tinta-media); }
.ci-cta {
  display: inline-flex; align-items: center; gap: .35em;
  font-weight: 500; color: var(--tinta); text-decoration: none;
  transition: color var(--t-rapida) var(--suave);
}
.ci-cta:hover { color: var(--acento-forte); }
.ci-seta { font-size: 1.1em; line-height: 1; transition: transform var(--t-rapida) var(--mola); }
.ci-cta:hover .ci-seta { transform: translateX(4px); }
.ci-bt--inerte { cursor: default; opacity: .6; }
.ci-bt--inerte:hover { color: inherit; border-color: var(--linha); }
.ci-bt--inerte .ci-seta { display: none; }

@media (max-width: 860px) {
  .ci-grade { grid-template-columns: 1fr; }
  /* Em uma coluna o sticky vira estorvo: prenderia o destaque no topo
     enquanto a lista rola por baixo dele. */
  .ci-destaque { position: static; }
}
@media (max-width: 680px) {
  .ci-item { grid-template-columns: 1fr 110px; gap: .9rem; }
  .ci-item-moldura { width: 110px; height: 110px; }
  .ci-desc { font-size: .84rem; }
  .ci-topo { align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCO MULTIMÍDIA  ·  .secao-bm
   ═══════════════════════════════════════════════════════════════════════════
   Abas verticais que trocam sozinhas, com o painel de mídia ao lado.
   ══════════════════════════════════════════════════════════════════════════ */
.bm-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.bm-topo .cabeca-secao { margin-bottom: 0; }
.bm-subtitulo {
  font-size: clamp(1.15rem, 2.2vw, 1.65rem); line-height: 1.3;
  color: var(--tinta-media); margin: .4rem 0 0; max-width: 30ch;
}
.bm-topo-bt {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--sans); font-weight: 500; font-size: .82rem;
  text-decoration: none; padding: .7em 1.5em; border-radius: 99px;
  border: 1px solid var(--linha); color: var(--tinta);
  transition: border-color var(--t-rapida) var(--suave), color var(--t-rapida) var(--suave);
}
.bm-topo-bt:hover { border-color: var(--acento-forte); color: var(--acento-forte); }
.bm-bt--inerte { cursor: default; opacity: .6; }

.bm-grade {
  display: grid; grid-template-columns: 38% 1fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ── as abas ───────────────────────────────────────────────────────────── */
.bm-lista { display: flex; flex-direction: column; }
.bm-item { transition: opacity var(--t-rapida) var(--suave); }
.bm-item:not(.is-ativo):hover { opacity: .72; }
.bm-gatilho {
  width: 100%; padding: 1.6rem 0; text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: inherit; color: var(--tinta);
  display: flex; flex-direction: column;
}
.bm-gatilho:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.bm-titulo {
  font-family: var(--serif); font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.32; color: var(--tinta);
}
/* A descrição vive fechada e abre com o item. max-height em vez de height
   porque não se sabe a altura do texto de antemão. */
.bm-descricao {
  max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
  font-family: var(--sans); font-weight: 300; font-size: .92rem;
  line-height: 1.55; color: var(--tinta-suave);
  transition: max-height .45s var(--mola), opacity .35s var(--suave), margin .35s var(--suave);
}
.bm-item.is-ativo .bm-descricao { max-height: 160px; opacity: 1; margin-top: .6rem; }

.bm-risco { height: 1px; background: var(--linha); }
.bm-progresso {
  height: 2px; margin-top: -1px; background: var(--acento);
  transform: scaleX(0); transform-origin: left;
}
/* Reinicia a cada ativação: a animação nasce com a classe. */
.bm-item.is-ativo .bm-progresso {
  animation: bmProgresso var(--bm-dur, 8000ms) linear forwards;
}
@keyframes bmProgresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── o painel ──────────────────────────────────────────────────────────── */
.bm-painel { position: sticky; top: 96px; }
.bm-moldura {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 20px; overflow: hidden; background: var(--navy);
}
.bm-midia {
  position: absolute; inset: 0; display: block;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--suave);
}
.bm-midia.is-ativa { opacity: 1; pointer-events: auto; }
.bm-midia-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-sem-foto {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(140deg, var(--navy), var(--navy-alto));
}
.bm-moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.bm-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(250,247,239,.92); border: none; cursor: pointer;
  color: var(--navy); font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding-left: 5px;   /* o triângulo tem o peso à esquerda */
  box-shadow: var(--sombra-2);
  transition: transform var(--t-rapida) var(--mola), background var(--t-rapida) var(--suave);
}
.bm-play:hover { transform: translate(-50%, -50%) scale(1.07); background: #faf7ef; }

@media (max-width: 860px) {
  .bm-grade { grid-template-columns: 1fr; }
  /* Em uma coluna o painel vem PRIMEIRO: a mídia é o assunto, e a lista
     abaixo dela funciona como legenda navegável. */
  .bm-painel { position: static; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-descricao, .bm-midia, .bm-play { transition: none; }
  /* Sem a barra correndo: o JS também não troca sozinho neste modo. */
  .bm-item.is-ativo .bm-progresso { animation: none; transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALERIA DE FOTOS  ·  .secao-gf
   ═══════════════════════════════════════════════════════════════════════════
   Foto grande que troca sozinha, linha do tempo, mosaico e tela cheia.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── a foto grande ─────────────────────────────────────────────────────── */
.gf-palco { position: relative; }
.gf-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(250,247,239,.86); border: none;
  color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-2);
  opacity: 0; transition: opacity var(--t-rapida) var(--suave), background var(--t-rapida) var(--suave);
}
.gf-seta--esq { left: 1rem; }
.gf-seta--dir { right: 1rem; }
.gf-palco:hover .gf-seta,
.gf-seta:focus-visible { opacity: 1; }
.gf-seta:hover { background: #fffdf8; }

.gf-grande {
  display: block; position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  border: none; padding: 0; margin: 0;
  border-radius: 20px; overflow: hidden;
  background: var(--navy); cursor: zoom-in;
}
.gf-grande:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.gf-quadro {
  position: absolute; inset: 0; display: block;
  opacity: 0; transition: opacity .8s var(--suave);
}
.gf-quadro.is-ativa { opacity: 1; }
.gf-grande-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gf-legenda {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 3.5rem 1.6rem 1.3rem; text-align: left;
  /* SangBleu Republic — é o var(--serif) do projeto. 22px fixos, e não clamp:
     foi o tamanho pedido. */
  font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.3;
  color: #f4ecdd;
  background: linear-gradient(to top, rgba(8,18,32,.72), transparent);
  transition: opacity .3s var(--suave);
}
.gf-legenda:empty { display: none; }
/* A lupa fica no alto à DIREITA e sempre visível: é o convite para ampliar, e
   escondê-la atrás do hover deixava a foto parecendo só decorativa — no toque
   não há hover nenhum. As setas ficam na metade da altura, então não brigam. */
.gf-lupa {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(250,247,239,.86); color: var(--navy);
  display: grid; place-items: center;
  box-shadow: var(--sombra-2);
  transition: background var(--t-rapida) var(--suave);
}
.gf-lupa svg { width: 20px; height: 20px; }
.gf-grande:hover .gf-lupa,
.gf-grande:focus-visible .gf-lupa { background: #fffdf8; }

/* ── a linha do tempo ──────────────────────────────────────────────────── */
.gf-linha { height: 5px; background: var(--linha); margin-top: .9rem;
            border-radius: 3px; overflow: hidden; }
/* A barra é conduzida pelo JS (Web Animations), e não por @keyframes: assim ela
   e a troca de foto compartilham UM relógio só — era a origem de a barra
   começar travada e sair de compasso depois de um hover. A animação CSS abaixo
   é só o caminho de escape para navegador sem element.animate(). */
.gf-linha-corre {
  display: block; height: 100%; background: var(--acento);
  transform: scaleX(0); transform-origin: left;
}
.gf-linha-corre.usa-css { animation: gfCorre var(--gf-dur, 5000ms) linear forwards; }
@keyframes gfCorre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gf-linha-corre.usa-css.is-parada { animation-play-state: paused; }

/* ── a faixa de miniaturas ─────────────────────────────────────────────────
   Uma linha só, que rola para o lado — no desktop e no celular. Em grade, 15
   fotos viravam três linhas que empurravam a página inteira para baixo. */
.gf-faixa {
  display: flex; gap: .55rem; margin-top: 1.1rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: .4rem;
  scrollbar-width: thin;
  cursor: grab;
  /* No toque a rolagem já é nativa. Aqui o que se impede é a SELEÇÃO de texto
     e o arrasto fantasma da imagem, que atrapalham o arrastar com o mouse. */
  -webkit-user-select: none; user-select: none;
}
/* Enquanto arrasta: o cursor muda, o snap sai do caminho (senão a faixa puxa
   de volta a cada pixel) e a rolagem suave é desligada. */
.gf-faixa.is-arrastando {
  cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto;
}
.gf-faixa img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.gf-faixa::-webkit-scrollbar { height: 4px; }
.gf-faixa::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: 4px; }
.gf-mini {
  position: relative; padding: 0; border: none; cursor: pointer;
  border-radius: 10px; overflow: hidden;
  /* flex-shrink 0 é o que impede as 15 miniaturas de se espremerem até virar
     tiras: elas mantêm o tamanho e a faixa rola. */
  flex: 0 0 auto; width: clamp(88px, 8vw, 116px); aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  background: var(--superficie-2);
  /* 95%, como pedido. É pouco de propósito — o anel abaixo é que marca. */
  opacity: .95;
  transition: opacity var(--t-rapida) var(--suave), transform var(--t-rapida) var(--mola);
}
.gf-mini-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gf-mini:hover { opacity: 1; transform: translateY(-2px); }
.gf-mini.is-ativa { opacity: 1; }
/* O anel vai por ::after para não empurrar o layout como uma borda faria. */
.gf-mini.is-ativa::after {
  content: ''; position: absolute; inset: 0; border-radius: 10px;
  border: 2px solid var(--acento);
  box-shadow: 0 0 0 3px rgba(180,116,31,.22);
}
.gf-mini:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ── a tela cheia ──────────────────────────────────────────────────────── */
.gf-tela {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(6,12,20,.96);
  animation: gfAbre .2s var(--suave);
}
.gf-tela[hidden] { display: none; }
@keyframes gfAbre { from { opacity: 0 } to { opacity: 1 } }
@supports (backdrop-filter: blur(1px)) { .gf-tela { backdrop-filter: blur(4px); } }

/* ── a pena, ao fundo ──────────────────────────────────────────────────────
   Marca d'água ATRÁS da foto: aparece na folga que a foto não ocupa — muita
   numa foto em pé ou no celular, pouca numa paisagem que toma a largura toda.
   É assim que "atrás" se comporta, e é intencional.

   aspect-ratio com os números reais do arquivo (421x1063) em vez de uma
   largura chutada: assim a pena nunca deforma, e 80% de altura é 80% mesmo.
   O caminho é relativo a ESTE arquivo, que mora em lp/_compartilhado/css/ —
   três níveis acima está a raiz do site. Vale para qualquer LP, porque quem
   se move é a LP, não o CSS. */
.gf-tela::before {
  content: '';
  position: absolute; z-index: 0;
  top: 50%; right: 2%; transform: translateY(-50%);
  /* 110% da altura da tela: a pena sangra em cima e embaixo de propósito —
     é o que faz dela fundo, e não um objeto pousado no meio. */
  height: 120%; aspect-ratio: 421 / 1063;
  background: url('../../../assets/Govinda-v4-Pena-Apenas.png') center / contain no-repeat;
  opacity: .22;
  pointer-events: none;   /* decoração não intercepta arrasto nem clique */
}
/* Sem a pena onde ela só atrapalharia: numa tela estreita, 20% da direita põe
   a marca bem no meio da foto. */
@media (max-width: 680px) { .gf-tela::before { display: none; } }

/* O título FLUTUA sobre a foto, centrado. Uma barra sólida no topo roubava a
   altura justamente de onde a foto é o assunto. A sombra é o que segura o
   contraste: a foto atrás pode ser céu claro ou rocha escura. */
.gf-tela-titulo {
  position: absolute; top: 50px; left: 50%;
  transform: translateX(-50%); z-index: 3;
  margin: 0; max-width: 88%; text-align: center;
  font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.25;
  color: #f4ecdd;
  text-shadow: 0 2px 10px rgba(6,12,20,.85), 0 1px 3px rgba(6,12,20,.9);
  pointer-events: none;      /* nunca rouba um clique da foto */
}
/* O X redondo no alto à direita: é o gesto que todo mundo procura primeiro. */
.gf-tela-x {
  position: absolute; top: clamp(.8rem, 2vh, 1.6rem);
  right: clamp(.8rem, 2vw, 1.6rem); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(250,247,239,.16); border: 1px solid rgba(250,247,239,.34);
  color: #faf7ef; font-size: 28px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 14px rgba(6,12,20,.5);
  transition: background var(--t-rapida) var(--suave);
}
.gf-tela-x:hover { background: rgba(250,247,239,.34); }
.gf-tela-x:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* O palco é a tela inteira; a foto se limita a 96% dela, na largura E na
   altura. Título, X e rodapé flutuam POR CIMA — em vez de dividirem espaço com
   a imagem, como faziam quando eram faixas empilhadas. */
/* z-index explícito para a ordem não depender da ordem do HTML: a pena fica em
   0, o palco em 1, título e rodapé em 3, o X em 4. */
.gf-tela-palco {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
}
/* O limite é do viewport, não em porcentagem do pai.
   Por quê: o palco é um grid e a caixa era um item com height:96%. Percentual
   contra uma trilha de altura automática é circular — o navegador desiste,
   a trilha cresce até caber a imagem inteira (922px numa tela de 900) e o 96%
   passa a valer sobre esse número inflado. Resultado medido: 98,3%.
   Com vw/vh a conta é do tamanho da tela, que é o que "disponível" significa.
   dvw/dvh quando houver: no celular a barra de endereço muda a altura viva. */
.gf-tela-foto {
  position: relative;
  display: grid; place-items: center;
  max-width: 96vw; max-height: 96vh;
  /* Arrastar aqui troca de foto: o navegador não pode entender o gesto como
     rolagem da página nem como seleção. */
  touch-action: none; -webkit-user-select: none; user-select: none;
  cursor: grab;
}
.gf-tela-foto.is-arrastando { cursor: grabbing; }
/* As duas camadas ocupam a mesma célula do grid — é o que faz uma passar por
   cima da outra sem posicionamento absoluto e sem perder a centralização. */
.gf-tela-camada {
  grid-area: 1 / 1;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .45s var(--suave);
}
.gf-tela-camada.is-ativa { opacity: 1; }
.gf-tela-foto img {
  max-width: 96vw; max-height: 96vh;
  width: auto; height: auto;
  object-fit: contain; border-radius: 8px;
  -webkit-user-drag: none; user-drag: none; pointer-events: none;
}
@supports (height: 100dvh) {
  .gf-tela-foto,
  .gf-tela-foto img { max-width: 96dvw; max-height: 96dvh; }
}
.gf-tela-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(250,247,239,.12); border: 1px solid rgba(250,247,239,.24);
  color: #faf7ef; font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-rapida) var(--suave);
}
.gf-tela-seta--esq { left: clamp(.6rem, 2vw, 1.6rem); }
.gf-tela-seta--dir { right: clamp(.6rem, 2vw, 1.6rem); }
.gf-tela-seta:hover { background: rgba(250,247,239,.3); }

/* ── o rodapé da tela cheia ───────────────────────────────────────────────
   Flutua sobre a foto, com um véu de baixo para cima para as miniaturas não
   sumirem quando a foto é clara. Contador acima da faixa, centrado. */
.gf-tela-pe {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 2.6rem 0 1rem;
  background: linear-gradient(to top, rgba(6,12,20,.88) 42%, transparent);
}
/* Uma coluna, e não uma linha: o contador tem de ficar centrado sobre a faixa
   mesmo quando existe legenda. Lado a lado, a legenda empurrava o número para
   a direita e ele deixava de apontar para a faixa. */
.gf-tela-info {
  width: 90%; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  margin-bottom: .6rem; text-align: center;
}
.gf-tela-legenda {
  font-family: var(--sans); font-weight: 300; font-size: .9rem;
  color: rgba(250,247,239,.86);
  text-shadow: 0 1px 4px rgba(6,12,20,.8);
}
.gf-tela-legenda:empty { display: none; }
.gf-tela-contador {
  flex: 0 0 auto; font-family: var(--sans); font-weight: 600; font-size: .95rem;
  color: #f4ecdd; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(6,12,20,.8);
}
.gf-tela-faixa {
  width: 90%; margin-inline: auto;
  display: flex; gap: .5rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scrollbar-width: thin;
  padding-bottom: .3rem;
  cursor: grab; -webkit-user-select: none; user-select: none;
}
.gf-tela-faixa.is-arrastando {
  cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto;
}
.gf-tela-faixa img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.gf-tela-faixa::-webkit-scrollbar { height: 4px; }
.gf-tela-faixa::-webkit-scrollbar-thumb { background: rgba(250,247,239,.3); border-radius: 4px; }
/* Sem opacidade: as miniaturas apagadas pareciam falha de carregamento em cima
   da foto. Quem marca a atual é a espessura da borda — 2px em todas, 4px na
   que está aberta. O box-sizing segura o tamanho quando a borda engorda. */
.gf-tela-mini {
  flex: 0 0 auto; width: clamp(62px, 6vw, 88px); aspect-ratio: 1 / 1;
  box-sizing: border-box;
  padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid rgba(250,247,239,.55);
  background: rgba(250,247,239,.08);
  scroll-snap-align: center;
  transition: border-color var(--t-rapida) var(--suave),
              border-width var(--t-rapida) var(--suave);
}
.gf-tela-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gf-tela-mini:hover { border-color: #faf7ef; }
.gf-tela-mini.is-ativa { border-width: 4px; border-color: var(--acento); }
.gf-tela-mini:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

@media (max-width: 680px) {
  .gf-grande { aspect-ratio: 4 / 3; border-radius: 14px; }
  /* Sem hover no toque: a lupa e as setas ficam sempre visíveis. */
  .gf-lupa, .gf-seta { opacity: 1; }
  .gf-seta { width: 40px; height: 40px; }
  .gf-tela-seta { width: 44px; height: 44px; }
  .gf-tela-info, .gf-tela-faixa { width: 94%; }
  .gf-tela-legenda { font-size: .82rem; }
  /* 96% da tela vale no celular também; o que encolhe é a tipografia, para o
     título não virar quatro linhas por cima da foto. */
  .gf-tela-titulo { font-size: 20px; max-width: 68%; }
  .gf-tela-x { width: 40px; height: 40px; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-quadro, .gf-mini, .gf-lupa { transition: none; }
  .gf-linha-corre { animation: none; transform: scaleX(1); }
  .gf-tela { animation: none; }
}