/* ENVIDA — sistema visual 3.0 (marca oficial de 22/07/2026)
   VERDE FLORESTA #1D3D2E · CREME #F7F3EC · DOURADO #C8A56A · MADEIRA #5A422C.
   O coração de linha única com a mão dentro é a marca; a árvore virou só um dos símbolos.
   Tipografia: Playfair Display no display, Inter no corpo. Sem emoji na interface.

   ⚠️ Os nomes dos tokens ficaram como estavam de propósito (--vinho aparece em 60 lugares).
   Trocar o VALOR aqui repinta o site inteiro sem deixar nenhuma tela para trás; renomear tudo
   de uma vez era o jeito garantido de esquecer uma. --vinho hoje é o verde da marca. */

/* ════════ TELA CHEIA DO DESENHO (03/08, refeita em 04/08/2026 a pedido dela) ════════
   Palavras dela: *"a parte de tela cheia do desenho não tá legal ainda. É só pra deixar em tela
   cheia o lugar pra desenhar, que deve virar e ficar em pé pra terem mais espaço de desenho.
   Não precisa aparecer as canetas e cores nessa hora, é só pra desenho."*, e depois
   *"a tela do desenho não deve ficar maior q a tela do cel"* e *"não quero ficar arrastando"*.

   🔴 O QUE ESTAVA ERRADO, e é aritmética: a folha era DEITADA (10/7) num celular que é EM PÉ.
   Numa tela de 390 de largura ela ocupava 390x273, e sobravam mais de 500 pixels de altura sem
   uso nenhum. A "tela cheia" mostrava a mesma folhinha, agora cercada de barra de cores, aviso e
   botão, e o conjunto passava da altura da tela: por isso ela tinha que ARRASTAR.

   ⭐ A folha agora é EM PÉ (3/4), igual a uma folha de papel de verdade e igual ao jeito como se
   segura um celular. Em tela cheia sobra a folha e mais nada: as canetas e as cores somem, ficam
   só desfazer e sair. E a folha é limitada pelos DOIS lados (altura e largura), então ela nunca
   passa da tela e não há o que arrastar. */
body.desenhando-cheio { overflow: hidden; }
body.desenhando-cheio #desenhoCaixa {
  position: fixed; inset: 0; z-index: 9990; margin: 0; padding: 8px;
  background: var(--marfim); display: flex; flex-direction: column;
  overflow: hidden;                 /* ⚠️ nada de rolar: o que não couber, encolhe */
  /* dvh acompanha a barra do navegador do celular, que aparece e some enquanto se rola.
     Com 100vh a folha ficava alta demais e empurrava o botão de sair para fora da tela. */
  height: 100dvh; max-height: 100dvh;
}
/* ⚠️ AS CANETAS E AS CORES SOMEM (pedido dela). Quem entrou em tela cheia entrou para desenhar;
   a escolha de cor se faz antes, na folha pequena, e volta com um toque em "Sair". */
body.desenhando-cheio #desenhoCaixa .desenho-cores,
body.desenhando-cheio #desenhoCaixa .desenho-grossuras,
body.desenhando-cheio #desenhoCaixa #desenhoAviso,
body.desenhando-cheio #desenhoCaixa #btnLimpar,
body.desenhando-cheio #desenhoCaixa #btnFecharDesenho { display: none; }
body.desenhando-cheio #desenhoCaixa .desenho-barra {
  flex: 0 0 auto; margin: 0 0 8px; gap: 8px; flex-wrap: nowrap;
}
/* A FOLHA. `min-height:0` é o que permite a um filho de flex encolher de verdade: sem ele o
   canvas se recusa a ficar menor que o conteúdo e volta a estourar a tela.
   🪤 NADA DE `object-fit: contain` AQUI, e a razão é um defeito silencioso: `object-fit` encaixa
   o BITMAP dentro da caixa e deixa a caixa maior que o desenho. O dedo é convertido em
   coordenada por `getBoundingClientRect()` da CAIXA, então o traço sairia deslocado do lugar
   onde a pessoa tocou, sem erro nenhum na tela. Quem manda na proporção é a própria caixa. */
/* 🪤 DEFEITO MEU, ACHADO MEDINDO ANTES DE SUBIR: com `flex: 1 1 auto` o crescer do flex GANHA do
   `aspect-ratio`, e a folha saiu 344x693, proporção 0,496 no lugar de 0,750. Ou seja: esticada
   no sentido da altura. As coordenadas do dedo continuariam certas (elas escalam pelo retângulo),
   mas o desenho GUARDADO sairia diferente do que a pessoa viu na tela, que é pior.
   ⭐ A saída: o canvas NÃO cresce. Ele já tem proporção própria (900x1350), então basta limitar
   pelos dois lados e deixar o navegador reduzir mantendo a proporção. O `margin: auto` centraliza
   no espaço que sobrar, e o `min-height: 0` é o que permite encolher dentro de um flex. */
body.desenhando-cheio #desenhoCaixa .desenho-tela {
  flex: 0 1 auto; min-height: 0; min-width: 0;
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  aspect-ratio: auto; margin: auto;
}

:root {
  /* ⚠️ A CORAVIA E CLARA, E ISSO PRECISA SER DITO (03/08/2026, achado dela no celular).
     Sem esta linha, o Chrome do Android com o aparelho no modo escuro aplica o escurecimento
     automatico por conta propria e INVERTE o fundo. Ele faz isso onde a pagina e quase so
     texto e formulario, que e o /criar e o /gravar; a home escapava por ser cheia de imagem.
     A declaracao viaja tambem numa meta tag em cada <head>, porque a meta vale antes de o CSS
     terminar de carregar e evita a piscada escura.

     🔴 A PALAVRA QUE FALTAVA E `only` (03/08/2026, noite, ela reportou a pagina PRETA de novo).
     `color-scheme: light` sozinho diz "esta pagina sabe ser clara" e o navegador continua
     livre para escurecer por cima. `only light` PROIBE. Nao foi regressao: a correcao de
     ontem nunca chegou a funcionar, e o teste que existia so conferia que a linha existia.
     ⭐ Medido com `chrome --headless=new --force-dark-mode --enable-features=WebContentsForceDark`
     e lendo o pixel do fundo: com `light` deu #21201E, com `only light` deu #FAF8F5.
     Medir o PIXEL, e nunca so a presenca da linha: foi a linha presente que enganou. */
  color-scheme: only light;
  --verde:        #0d1b2a;   /* VERDE FLORESTA, a cor da marca */
  --verde-escuro: #070f18;
  --verde-medio:  #1e3a52;
  --dourado:      #c78d44;   /* DOURADO */
  --madeira:      #5a4632;   /* MADEIRA, para tronco e detalhe de madeira */

  --oliva: #16293c;
  --salvia: #8fa3b5;
  --coral: #c78d44;
  --navy-900: #070f18;
  --navy-800: #0a1520;
  --navy-700: #0d1b2a;
  --navy-600: #1e3a52;

  /* O CAMPO DA PÁGINA É PÊSSEGO, não creme neutro. Verde grande e sozinho puxa para clínica,
     farmácia e plano de saúde, que é a associação errada para memória de família. Sobre um
     campo de pêssego, o mesmo verde deixa de ler como consultório e passa a ler como oliveira
     e casa: quem manda na leitura é a cor que ocupa mais área, não a do logo. */
  /* O CAMPO É CREME MORNO, não branco puro (decisão dela, 2026-07-22 noite: "nada de branco,
     fica feio"). Branco #ffffff ficava duro e clínico; o pêssego de ponta a ponta ficava pesado.
     Este off-white morno é o meio-termo: aquece a tela, deixa os cards brancos saltarem por cima,
     e o verde da marca continua nos botões/títulos, o pêssego nas faixas de destaque. */
  --marfim:   #fcfbf9;
  --marfim-2: #f7f4ef;
  --marfim-3: #f1e7db;

  --ouro:        #c78d44;
  --ouro-claro:  #ddb77e;
  --ouro-escuro: #825e2b;

  --tinta:       #0d1b2a;
  --tinta-suave: #4a5b6b;
  --creme:       #f5e9dd;
  --creme-suave: #e3d3c2;

  /* o pêssego VOLTOU (22/07, tarde): a areia esfriava a página e o site precisa de calor
     humano. Ele é a cor da pele na luz do fim de tarde, e é isso que ele diz. */
  --pessego:       #f5e9dd;
  --pessego-claro: #fbf6f0;
  --pessego-fundo: #efe2d4;

  /* BOTÃO ULTRA PREMIUM: gradiente terracota bronze (ela escolheu o "C", 2026-07-22).
     Letra creme por cima; sem anel verde. Usado por .btn e .btn.ouro. */
  --btn-grad:   linear-gradient(150deg, #ec8163 0%, #de5d35 100%);
  --btn-grad-h: linear-gradient(150deg, #f08e72 0%, #e06a41 100%);
  /* PÊSSEGO ESCURO / terracota: é para onde vão os TEXTOS-acento que hoje estão verdes sobre
     fundo claro (kickers, ênfases, rótulos). Escuro o bastante para ler; quente como pêssego. */
  --pessego-escuro:  #a54427;

  --linha-ouro: rgba(199, 141, 68, .38);
  --linha-tinta: rgba(13, 27, 42, .14);

  --raio: 10px;
  --raio-g: 16px;
  --sombra: 0 18px 44px rgba(13, 27, 42, .10);
  --sombra-escura: 0 20px 50px rgba(0, 0, 0, .35);
  --largura: 1120px;
  --largura-texto: 720px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--marfim);
  color: var(--tinta);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- tipografia ---------- */
h1, h2, h3, .display {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.005em;
  margin: 0 0 .4em;
  color: var(--tinta);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.85rem, 4.6vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); }
p { margin: 0 0 1.1em; }
strong { font-weight: 600; }
/* ÊNFASE: texto em pêssego escuro no fundo claro, com um SUBLINHADO ORGÂNICO no verde da marca
   (traço feito à mão, não uma régua). É assim que o verde entra como acento de propósito, em vez
   de pintar o texto inteiro. */
em.destaque {
  font-style: italic; color: var(--pessego-escuro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 22 3, 40 10, 62 6 S 100 3, 118 7' fill='none' stroke='%230d1b2a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .42em;
  padding-bottom: .12em;
}
/* sobre pêssego a ênfase VOLTA ao verde (a mesma regra: fundo pêssego mantém o verde) */
.faixa.escura em.destaque, .destaque-data em.destaque, .aguardando em.destaque { color: var(--vinho); }

.kicker {
  /* era .74rem = 11,84px: cabe numa etiqueta de duas palavras, não numa frase que quebra em
     duas linhas de maiúsculas espaçadas, que é a forma mais cansativa de ler que existe.
     Subiu para 13,1px e o espaçamento afrouxou junto, senão a linha fica longa demais. */
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ouro-escuro);
  margin: 0 0 14px;
}
/* ---------- P4b: A VOZ DO MIOLO (opção B DELA, 09/08/2026) ----------
   A auditoria premium mediu Playfair 500 em 100% dos títulos do miolo (14 só no cuidar):
   hierarquia sem voz, o cluster nº 1 da "cara de IA". A escolha dela foi o ITÁLICO: o H1
   firma um degrau e os títulos de seção INCLINAM, como caligrafia, que é a voz que a casa
   já usa nos momentos de emoção (o lema do rodapé, a fala da noite). O escopo é o corpo
   se declarar `miolo` (criar · gravar · cuidar) mais a espera, que mora dentro do mural:
   a home e as páginas de venda têm assinatura própria e NÃO entram. */
body.miolo h1, body.miolo .display { font-weight: 600; letter-spacing: -.012em; }
body.miolo h2, body.miolo h3 { font-style: italic; font-weight: 500; }
body.miolo .cap-bloco .cap-nome { font-style: italic; }
body.miolo details.ajuste > summary { font-style: italic; }
.faixa.aguardando h1 { font-weight: 600; letter-spacing: -.012em; }

/* ---------- P6: O CRIAR EM CAPÍTULOS + DUAS COLUNAS (09/08/2026, auditoria premium) ----------
   A5: um formulário de 6.800px sem sensação de progresso; A6: desktop com metade da tela
   vazia e a prévia lá embaixo. Os capítulos são SINALIZAÇÃO (nunca portão) com numeração
   viva, e no desktop a prévia sobe pra coluna da direita, fixa, respondendo cada escolha.
   No celular nada muda de ordem. O h3 herda o itálico da voz do miolo (opção B dela). */
.criar-cap {
  display: flex; align-items: center; gap: 10px;
  margin: 34px 0 6px; padding-top: 22px;
  border-top: 1px solid var(--linha-ouro);
  font-size: 1.15rem;
}
.criar-cap:first-of-type { border-top: 0; padding-top: 0; margin-top: 18px; }
.criar-cap .cc-n {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
  border: 1px solid var(--ouro-escuro); border-radius: 50%;
  font-family: Inter, sans-serif; font-style: normal; font-weight: 600; font-size: .85rem;
  color: var(--ouro-escuro); font-variant-numeric: tabular-nums;
}
.criar-cap .cc-ok { color: var(--vinho); font-style: normal; font-weight: 700; }
@media (min-width: 1080px) {
  /* .faixa.estreita.criar-larga: sem as três classes o .faixa.estreita .interno de 720px
     ganha na especificidade e as duas colunas se espremem (medido no ensaio: form 720px) */
  .faixa.estreita.criar-larga .interno { max-width: 1140px; }
  .criar-larga form.cartao {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 40px; align-items: start;
  }
  .criar-larga form.cartao > * { grid-column: 1; min-width: 0; }
  .criar-larga form.cartao > #previaBloco {
    grid-column: 2; grid-row: 1 / span 300;
    position: sticky; top: 24px; margin-top: 18px; align-self: start;
  }
}

.lead { font-size: 1.13rem; color: var(--tinta-suave); max-width: 56ch; }
.suave { color: var(--tinta-suave); }
.mini { font-size: .88rem; }
.centro { text-align: center; }
.centro .lead, .centro .kicker { margin-left: auto; margin-right: auto; }
.mt { margin-top: 26px; }

/* ---------- estrutura ---------- */
.faixa { padding: clamp(52px, 9vw, 96px) 22px; }
/* o achador é uma AJUDA, não o destaque da página: ocupa menos tela e ganha ar de painel fino */
.faixa.compacta { padding: clamp(30px, 4vw, 46px) 22px; }
.faixa.compacta h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.faixa.compacta .lead { font-size: .97rem; }
.achador-painel { padding: 18px 20px 16px; border-radius: 18px; background: rgba(255,255,255,.72); border: 1px solid var(--linha-ouro); box-shadow: 0 10px 30px rgba(13, 27, 42,.07); }
.achador-painel .pergunta-tag { margin: 14px 0 7px; font-size: .7rem; }
.achador-painel .pergunta-tag:first-child { margin-top: 0; }
.achador-painel .chip { padding: 7px 14px; font-size: .87rem; }
.achador-painel .chips { gap: 7px; }
.faixa > .interno { max-width: var(--largura); margin: 0 auto; }
.faixa.estreita > .interno { max-width: var(--largura-texto); }
.faixa.creme { background: var(--marfim-2); }
.faixa.escura {
  background: radial-gradient(120% 100% at 50% 0%, var(--pessego-claro) 0%, var(--pessego-fundo) 74%), var(--pessego);
  color: var(--tinta);
}
.faixa.escura h1, .faixa.escura h2, .faixa.escura h3 { color: var(--vinho); }
.faixa.escura .suave, .faixa.escura .lead { color: var(--tinta-suave); }
/* sobre pêssego o acento VOLTA a ser verde (ela: "onde já tem pêssego de fundo, manter o verde") */
.faixa.escura .kicker { color: var(--vinho); }

/* ---------- A FAIXA DA NOITE (06/08/2026, pedido dela: "site com cara de 20k") ----------
   O azul-marinho é "a cor grande" da marca e só existia no cabeçalho e no rodapé: o corpo das
   páginas era todo creme + serifa + terracota, que é exatamente a fórmula genérica que ela
   pediu para fugir. Esta faixa é a sala no escuro antes da luz acender, e encena a Escuta Cega.
   Contrastes medidos com a régua da casa: #fdfcfa sobre #0d1b2a = 17:1 · kicker ouro-claro
   #ddb77e = 8,7:1 · apoio #b9c6d2 = 9:1 · botão coral segue a marca (letra azul-marinho). */
.faixa.noite {
  background: radial-gradient(120% 90% at 50% 0%, #12253a 0%, var(--navy-900) 62%), var(--navy-900);
  color: #e8edf2;
}
.faixa.noite h2, .faixa.noite h3 { color: #fdfcfa; }
.faixa.noite .kicker { color: var(--ouro-claro); }
.faixa.noite .lead, .faixa.noite .suave { color: #b9c6d2; }
.faixa.noite .lead strong { color: #fdfcfa; }
.faixa.noite .btn.contorno { color: #fdfcfa; border-color: rgba(253, 252, 250, .34); }
.faixa.noite .btn.contorno:hover { border-color: var(--ouro-claro); color: var(--ouro-claro); }
/* a fala da sala: a citação em serifa itálica é a imagem da seção, no lugar de foto */
.noite-fala {
  font-family: "Playfair Display", Georgia, serif; font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem); line-height: 1.35; color: #fdfcfa; margin: 14px 0 8px;
}
.noite-fala em { color: var(--ouro-claro); }
/* as ondas de áudio no escuro: tocam quando a seção aparece (o observador da própria home põe
   .andando) e ficam paradas para quem pediu menos movimento */
.noite-ondas { display: flex; gap: 5px; align-items: flex-end; height: 34px; justify-content: center; margin: 8px 0 0; }
.noite-ondas span { width: 4px; border-radius: 3px; background: var(--ouro); height: 8px; opacity: .9; }
.js .noite-ondas.andando span { animation: onda 1.1s ease-in-out infinite; }
.js .noite-ondas.andando span:nth-child(2n) { animation-delay: .18s; }
.js .noite-ondas.andando span:nth-child(3n) { animation-delay: .34s; }
@media (prefers-reduced-motion: reduce) { .noite-ondas span { animation: none !important; } }

.pagina { max-width: var(--largura-texto); margin: 0 auto; padding: 34px 22px 70px; }
.grade { display: grid; gap: 20px; }
@media (min-width: 760px) {
  .grade.tres { grid-template-columns: repeat(3, 1fr); }
  .grade.dois { grid-template-columns: repeat(2, 1fr); }
  .grade.quatro { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha-tinta);
}
.topo .interno {
  max-width: var(--largura); margin: 0 auto;
  padding: 12px 22px;
  display: flex; align-items: center; gap: 18px; justify-content: space-between;
}
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tinta); }
/* A marca nova é linha aberta sobre fundo transparente: dispensa o quadro branco que a árvore
   antiga precisava (ela tinha fundo creme e sumia em cima de qualquer cor). */
/* 🔴 A MARCA SUMIA NO MODO ESCURO DO NAVEGADOR DO CELULAR (04/08/2026, medido no pixel de um
   print de verdade do Samsung Internet dela): tinta rgb(11,23,39) sobre fundo rgb(30,30,30),
   contraste 1,08:1. O resto da página aguenta bem o escurecimento (o título deu 16,18:1 e o
   kicker 9,48:1); some SÓ a marca.
   ⭐ O MOTIVO É QUE O ESCURECEDOR NÃO INVERTE IMAGENS. Ele escurece o fundo do cabeçalho e a
   imagem do logo continua azul-marinho, ou seja, escuro sobre escuro.
   ⚠️ A página já declara `color-scheme: only light` no CSS e no <meta>, e o Chrome e o Edge
   obedecem (medido: 0,0 de diferença em seis telas). O Samsung ignora, e não existe comando que
   force um site a desobedecer a escolha da pessoa. Então não se briga com o escurecedor: dá-se
   à marca um chão que ele não sabe inverter.
   ⭐ O truque é o DEGRADÊ: o escurecedor inverte `background-color` e pula `background-image`.
   Um degradê de creme para creme é uma cor sólida que ele não toca. No modo claro isso é creme
   sobre creme, ou seja, invisível; no escuro, vira a plaquinha que segura a marca.
   ⚠️ NÃO TESTADO no Samsung: eu não tenho esse navegador aqui. Quem prova é ela, no celular. */
.marca img {
  height: 40px; width: auto; display: block;
  background-image: linear-gradient(var(--marfim, #fcfbf9), var(--marfim, #fcfbf9));
  padding: 4px 8px; border-radius: 10px; margin: -4px -8px;
}
.marca .nome {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem; font-weight: 600; letter-spacing: .01em; line-height: 1;
}
.marca .sub {
  display: block; font-family: Inter, sans-serif;
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ouro-escuro); font-weight: 600; margin-top: 3px;
}
.topo nav { display: none; gap: 26px; }
.topo nav a { color: var(--tinta-suave); text-decoration: none; font-size: .94rem; }
.topo nav a:hover { color: var(--ouro-escuro); }
@media (min-width: 900px) { .topo nav { display: flex; } }

/* ---------- MENU DO CELULAR (05/08/2026) ----------
   Abaixo de 900px a navegação de cima some, e até hoje não entrava nada no lugar dela: o site
   inteiro ficava sem menu, com o rodapé como única saída. Este é o par do `.topo nav`: um aparece
   exatamente onde o outro some, e eles nunca se veem. */
.menu-mini { position: relative; margin-left: auto; }
.menu-mini > summary {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 10px 14px;              /* 44px: alvo de toque, igual ao botão do lado */
  border: 1px solid var(--linha-tinta); border-radius: var(--raio);
  font-size: .9rem; color: var(--tinta); cursor: pointer;
  list-style: none; user-select: none; white-space: nowrap;
}
.menu-mini > summary::-webkit-details-marker { display: none; }   /* o triângulo do Safari */
.menu-mini > summary::marker { content: ''; }
.menu-mini > summary svg { width: 18px; height: 18px; flex: none; }
.menu-mini > summary:hover { border-color: var(--ouro); color: var(--ouro-escuro); }
.menu-mini > summary:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.menu-mini[open] > summary { border-color: var(--ouro); color: var(--ouro-escuro); }
.mm-lista {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  min-width: 12.5rem; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--marfim, #fff);
  border: 1px solid var(--linha-tinta); border-radius: var(--raio);
  box-shadow: 0 14px 34px rgba(13, 27, 42, .16);
}
.mm-lista a {
  padding: 12px 14px; border-radius: calc(var(--raio) - 4px);
  color: var(--tinta); text-decoration: none; font-size: .95rem;
}
.mm-lista a:hover { background: var(--pessego-claro, #fbf6f0); color: var(--ouro-escuro); }
.mm-lista a[aria-current="page"] { color: var(--ouro-escuro); font-weight: 600; }
@media (min-width: 900px) { .menu-mini { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .menu-mini[open] .mm-lista { animation: mmAbre .16s ease-out; }
  @keyframes mmAbre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  /* borda transparente da MESMA largura do .contorno: o cheio e o contornado passam a ter a
     mesma altura (o contornado vivia 2px mais alto, e é esse meio-pixel que o olho lê como
     "desalinhado"). O background-origin leva o degradê até debaixo da borda transparente. */
  border: 1.5px solid transparent; background-origin: border-box; border-radius: var(--raio); cursor: pointer;
  font: 600 1rem/1 Inter, sans-serif;
  /* rótulo que quebra em 2 linhas centrava o bloco e alinhava o texto à esquerda */
  text-align: center;
  padding: 17px 28px; min-height: 54px;
  /* BOTÃO PÊSSEGO COM ANEL VERDE (decisão dela, 2026-07-22).
     Pêssego sozinho num fundo claro tem pouco contraste e o botão some. O anel verde da marca
     em volta devolve o contorno que faltava: a cor continua quente e o olho continua achando
     onde clicar. O texto é verde escuro, que é o que dá leitura em cima do pêssego. */
  /* BOTÃO ULTRA PREMIUM — TERRACOTA BRONZE (decisão dela, 2026-07-22).
     Saiu o pêssego chapado com anel verde (tinha cara de adesivo). Entrou um bronze quente com
     gradiente, letra creme, brilho fino no topo e sombra profunda: acabamento de verdade, chama
     o olho e não briga com o verde da marca (que fica reservado para títulos e sublinhados). */
  /* ⚠️ REPINTURA 28/07: a letra do botão era CREME e reprovava em contraste (2,88:1 sobre o
     coral claro do degradê). A regra da prancha da marca é a mesma que a medição: letra
     AZUL-MARINHO sobre o coral, nunca clara. Com azul dá 5,33 na ponta clara e mais na escura.
     O acabamento que ela aprovou em 22/07 continua: degradê quente, brilho fino no topo e
     sombra profunda. Só a letra mudou, e mudou para poder ser lida. */
  background: var(--btn-grad);
  color: #0d1b2a;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 10px 26px rgba(180, 71, 44, .30);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .25s;
}
.btn:hover { transform: translateY(-1px); background: var(--btn-grad-h); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 16px 34px rgba(180, 71, 44, .40); }
.btn:active { transform: translateY(0); }
.btn.largo { width: 100%; }
.btn.contorno {
  background: transparent; color: var(--tinta);
  border: 1.5px solid var(--linha-tinta); box-shadow: none;
}
.btn.contorno:hover { border-color: var(--ouro); color: var(--ouro-escuro); }
.faixa.escura .btn.contorno { color: var(--tinta); border-color: rgba(13, 27, 42, .22); }
.faixa.escura .btn.contorno:hover { border-color: var(--ouro-escuro); color: var(--ouro-escuro); }
.btn.discreto {
  background: transparent; color: var(--tinta-suave);
  border: 0; box-shadow: none; font-weight: 500; min-height: 44px; padding: 10px 14px;
}
/* botão que precisa ser visto no fundo vinho (avançar a Escuta Cega, gravar vídeo) */
.btn.ouro { background: var(--ouro); color: #0d1b2a; box-shadow: 0 10px 24px rgba(199, 141, 68, .26); }
.btn.ouro:hover { background: var(--ouro-claro); color: #0d1b2a; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--ouro); outline-offset: 3px;
}
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.centro .acoes, .acoes.centro { justify-content: center; }   /* a classe pode vir no pai OU na propria linha de botoes */

/* ---------- preço no botão (pedido dela, 06/08/2026; REFINADO na mesma noite) ----------
   O valor viaja com a ação: quem toca em "Criar" já sabe o que vai pagar, e o botão deixa de
   ser um salto no escuro antes do Mercado Pago. Quem imprime é envida_btn_preco(), que lê a
   mesma constante do caixa: número à mão aqui é o defeito de sempre desta casa.
   🔴 A PRIMEIRA VERSÃO usava um "·" no ::before e quebrava DESALINHADA (ela viu: "a escrita
   ficou desalinhada do valor"): quando o preço descia de linha, o ponto ia junto e parecia
   marcador de lista. O separador agora é um FIO vertical que só existe quando os dois estão
   lado a lado; empilhado (.empilha), o preço desce centrado e sem fio.
   ⚠️ O preço fica em TINTA CHEIA (herda a cor do botão, azul-marinho sobre o coral, 5,3:1
   medido). Nada de opacidade no número: preço meio apagado sobre coral reprova contraste. */
.btn .btn-preco {
  display: inline-flex; align-items: center; gap: 13px;
  font-size: .93em; font-weight: 700; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em;
}
.btn .btn-preco::before { content: ""; width: 1px; height: 1.1em; background: currentColor; opacity: .3; }
/* botão de largura inteira vira um TÍQUETE: a ação à esquerda, o valor à direita. É o arranjo
   de cardápio de casa boa, e é o que alinha a escrita com o valor. */
.pl-btn.com-preco { justify-content: space-between; text-align: left; }
/* botão estreito (cartão do guia): empilha de propósito, preço centrado embaixo, sem fio */
.btn.com-preco.empilha { flex-direction: column; gap: 3px; padding-top: 12px; padding-bottom: 12px; }
.btn.com-preco.empilha .btn-preco { font-size: .86em; }
.btn.com-preco.empilha .btn-preco::before { display: none; }
/* o secundário que carrega preço é um botão de ESCOLHER, e escolha pede corpo: fundo branco,
   fio da casa e sombra curta, em vez do contorno fino que sumia na fileira (achado dela). */
.btn.contorno.com-preco {
  background: #fff; border-color: rgba(13, 27, 42, .18);
  box-shadow: 0 4px 14px rgba(13, 27, 42, .07);
}
.btn.contorno.com-preco:hover { border-color: var(--ouro); box-shadow: 0 8px 20px rgba(13, 27, 42, .1); }

/* ---------- cartões ---------- */
.cartao {
  background: #fff;
  border: 1px solid rgba(46, 43, 38, .12);
  border-radius: var(--raio-g);
  padding: 26px 24px;
  box-shadow: var(--sombra);
}
.cartao.plano { border-top: 3px solid var(--linha-ouro); }
/* AJUSTES FINOS DO PAINEL (08/08/2026, auditoria premium: painel não é lista). O cartão
   secundário recolhe numa linha de título; quem pede olho AGORA nasce open pelo PHP
   (pendência, erro de POST, prazo do grátis). O details VESTE o cartão e o de dentro despe. */
details.ajuste {
  background: #fff; border: 1px solid rgba(46, 43, 38, .12);
  border-radius: var(--raio-g); box-shadow: var(--sombra); margin-top: 14px;
}
details.ajuste > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 17px 24px;
  font-family: "Playfair Display", Georgia, serif; font-weight: 500;
  font-size: 1.15rem; color: var(--tinta);
}
details.ajuste > summary::-webkit-details-marker { display: none; }
details.ajuste > summary::after {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2px solid var(--ouro-escuro); border-bottom: 2px solid var(--ouro-escuro);
  transform: rotate(45deg) translateY(-2px); transition: transform .18s;
}
details.ajuste[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
details.ajuste > .cartao { border: 0; box-shadow: none; border-radius: 0; margin-top: 0; padding-top: 2px; background: transparent; }
/* O MOMENTO-NOITE DO RECADO GUARDADO (P5 da auditoria premium, 09/08): a única cena escura
   do fluxo de gravar. O palco escurece e o cartão-papel fica sozinho na luz, com o fio de
   ouro do estojo na moldura. Uma cena por página, como manda a regra da faixa da noite. */
.palco-noite {
  background: radial-gradient(120% 90% at 50% 0%, #16293c 0%, #0d1b2a 58%, #070f18 100%);
  border-radius: 22px; padding: 30px 16px 34px; margin-top: 22px;
  box-shadow: inset 0 0 0 1px rgba(221, 183, 126, .32), 0 26px 56px rgba(13, 27, 42, .38);
}
.palco-noite > .cartao.carta { margin-top: 0; }

/* ===== CARTÃO ANTIGO (.carta): a "carta guardada" das telas de mensagem =====
   Papel creme com a borda levemente RASGADA (filtro #deckle no parte-topo) e uma moldura
   interna sépia, como cartão de época. Dá valor de lembrança à mensagem (pedido dela, 2026-07-22).
   Reseta o visual do .cartao: quem desenha o fundo agora é o ::before de papel. */
.cartao.carta, .carta { position: relative; background: transparent; border: 0; box-shadow: none; border-radius: 0; z-index: 0; isolation: isolate; padding: 40px 34px 34px; }
.carta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #fbf9f6, #f0eae3);
  filter: url(#deckle);
  box-shadow: 0 20px 46px rgba(90, 70, 50, .20);
}
/* a moldura interna é limpa (não rasgada): torn por fora, frame por dentro = cara de cartão antigo */
.carta::after {
  content: ""; position: absolute; inset: 13px; z-index: 0; pointer-events: none;
  border: 1px solid rgba(156, 108, 46, .42);
  box-shadow: inset 0 0 0 3px rgba(253, 248, 238, .6), inset 0 0 0 4px rgba(156, 108, 46, .18);
}
.carta > * { position: relative; z-index: 1; }
/* botões dessas telas: premium E menores (ela: "o botão ali tá grandão") */
.carta .acoes { justify-content: center; }
.carta .btn { padding: 12px 24px; min-height: 46px; font-size: .95rem; }
/* secundário premium no lugar do contorno fininho: creme com fio dourado gravado */
.carta .btn.contorno {
  background: linear-gradient(180deg, #fdfbf9, #ede7e0); color: var(--vinho);
  border: 0; box-shadow: inset 0 0 0 1px rgba(156, 108, 46, .55), 0 8px 18px rgba(90, 70, 50, .14);
}
.carta .btn.contorno:hover { color: var(--vinho); box-shadow: inset 0 0 0 1px rgba(156, 108, 46, .85), 0 10px 22px rgba(90, 70, 50, .22); }
@media (prefers-reduced-motion: reduce) { .carta::before { filter: url(#deckle); } }
/* ---------- hero de filme (home) ----------
   A emoção manda na primeira tela: o vídeo é a maior parte dela e sangra até a borda direita.
   No celular ele vira uma faixa em cima do texto, senão sobra tarja preta dos dois lados. */
.hero-filme {
  display: grid; grid-template-columns: minmax(300px, 40%) 1fr;
  align-items: center; gap: 0; min-height: min(78vh, 680px);
  background: var(--marfim);
}
.hero-filme .hf-texto { padding: 60px clamp(24px, 4vw, 56px) 60px clamp(24px, 6vw, 90px); max-width: 620px; }
.hero-filme h1 { font-size: clamp(2.1rem, 3.6vw, 3.15rem); margin-bottom: 18px; }
.hero-filme .lead { font-size: 1.08rem; max-width: 30em; }
.hero-filme .hf-filme { position: relative; height: 100%; min-height: 420px; overflow: hidden; }
.hero-filme video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* A costura do texto para o vídeo. Ela pediu SOMBREADO, não claro: o painel de texto lança uma
   sombra suave sobre o filme, como no cinema. Isso escurece de leve a emenda (e o rosto da moça,
   que ficava estourado de branco) em vez de lavar de branco. */
.hero-filme .hf-filme::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(7, 15, 24, .42) 0%,
    rgba(7, 15, 24, .18) 8%,
    rgba(7, 15, 24, 0) 22%);
}
/* quando os dois botoes nao cabem lado a lado, empilham com a MESMA largura em vez de um
   grande e um pequeno, que parecia desalinhado */
.hero-filme .acoes, .fecho-filme .acoes { gap: 12px; }
/* base 260 e não 210: com 210 os dois botões do fecho cabiam lado a lado espremidos em ~214px
   cada e o rótulo quebrava em 2 linhas (medido 214x68 na auditoria de 07/08). Com 260 eles
   empilham em largura cheia, como no herói. A faixa do Dia dos Pais ganha a mesma regra:
   os dois empilhavam com larguras diferentes (338 × 166), degrau que lia como bagunça. */
.hero-filme .acoes .btn, .fecho-filme .acoes .btn, .destaque-data .acoes .btn { flex: 1 1 260px; justify-content: center; }
.assinatura-marca {
  margin-top: 30px; font-family: "Playfair Display", Georgia, serif; font-style: italic;
  font-size: 1.02rem; color: var(--ouro-escuro); border-top: 1px solid var(--linha-ouro);
  padding-top: 16px; max-width: 24em;
}
.faixa.fecho { background: var(--marfim-2); padding-top: 74px; padding-bottom: 78px; }
/* fecho da home: a foto sangra pela esquerda e o texto senta no creme, espelhando o hero */
.fecho-filme {
  display: grid; grid-template-columns: 1fr minmax(300px, 42%);
  align-items: center; background: var(--marfim-2); min-height: min(66vh, 560px);
}
.fecho-filme .ff-foto { width: 100%; height: 100%; min-height: 380px; object-fit: cover; display: block; }
.fecho-filme .ff-texto { padding: 56px clamp(24px, 6vw, 80px) 56px clamp(24px, 4vw, 54px); }
.fecho-filme h2 { font-size: clamp(1.8rem, 2.9vw, 2.5rem); margin-bottom: 14px; }
.fecho-filme .lead { max-width: 26em; }
@media (max-width: 860px) {
  .fecho-filme { grid-template-columns: 1fr; }
  .fecho-filme .ff-foto { min-height: 0; aspect-ratio: 16 / 10; }
  .fecho-filme .ff-texto { padding: 28px 20px 46px; }
}
@media (max-width: 860px) {
  .hero-filme { grid-template-columns: 1fr; min-height: 0; }
  .hero-filme .hf-filme { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
  .hero-filme .hf-filme::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, var(--marfim) 100%); }
  .hero-filme .hf-texto { padding: 26px 20px 48px; }
  .assinatura-marca { margin-top: 22px; }
}
/* quem pediu menos movimento no sistema não leva vídeo rodando na cara */
@media (prefers-reduced-motion: reduce) {
  .hero-filme video { display: none; }
  .hero-filme .hf-filme { background: url("/assets/video/hero-poster.jpg") center/cover no-repeat; }
}

/* os três caminhos da home: cartão inteiro é o link, e o texto não pode virar link azul */
a.cartao.caminho { display: block; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
a.cartao.caminho:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(13, 27, 42, .16); }
a.cartao.caminho h3 { color: var(--vinho); margin: 12px 0 8px; }
a.cartao.caminho .mini { color: var(--oliva); font-weight: 600; margin-bottom: 0; }
.ph-g-quando { font-style: italic; }
.gravado-em { font-size: .82rem; color: var(--tinta-suave); margin: 4px 0 0; font-style: italic; }
.faixa.escura .gravado-em { color: var(--tinta-suave); }

/* ---- destaque de data (Dia dos Pais e afins): foto sangrando de um lado, texto do outro ---- */
.destaque-data {
  display: grid; grid-template-columns: 1fr minmax(300px, 46%);
  align-items: center; background: var(--pessego-claro); border-top: 1px solid var(--linha-ouro);
  border-bottom: 1px solid var(--linha-ouro);
}
.destaque-data .dd-foto { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.destaque-data .dd-texto { padding: 48px clamp(24px, 5vw, 66px); }
.destaque-data h2 { font-size: clamp(1.7rem, 2.7vw, 2.4rem); margin: 6px 0 14px; }
.destaque-data .lead { max-width: 27em; }
.destaque-data .acoes { margin-top: 22px; }
.dd-convite {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--linha-ouro);
  font-family: "Playfair Display", Georgia, serif; font-size: 1.08rem; line-height: 1.45;
  color: var(--vinho); max-width: 26em;
}
.dd-convite em { color: var(--ouro-escuro); font-style: italic; }
@media (max-width: 860px) {
  .destaque-data { grid-template-columns: 1fr; }
  .destaque-data .dd-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .destaque-data .dd-texto { padding: 26px 20px 40px; }
}

/* ---- os três passos em linha, com seta ligando um no outro ---- */
.passos { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 14px; }
.passo { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.passo h3 { margin: 0 0 6px; font-size: 1.16rem; }
.passo .suave { margin: 0; font-size: .96rem; }
.passo-n { color: var(--ouro-escuro); font-family: Inter, sans-serif; font-weight: 700; font-size: .95rem; }
.passo-selo {
  display: grid; place-items: center; flex: none;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--marfim-2); border: 1px solid var(--linha-ouro); color: var(--vinho);
}
.passo-selo svg { width: 27px; height: 27px; }
.passo-seta { color: var(--ouro-escuro); align-self: center; opacity: .8; }
.passo-seta svg { width: 40px; height: 24px; display: block; }
@media (max-width: 900px) {
  .passos { grid-template-columns: 1fr; gap: 22px; }
  .passo-seta { justify-self: center; transform: rotate(90deg); }
}

/* ---- tabela de planos: uma linha, cartões iguais, o escolhido levantado ---- */
.planos-linha { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); align-items: stretch; }
.pl-cartao {
  display: flex; flex-direction: column; position: relative;
  background: #fff; border: 1px solid var(--linha-tinta); border-radius: 18px;
  padding: 26px 20px 22px; box-shadow: 0 6px 20px rgba(13, 27, 42, .06);
}
.pl-cartao {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* o cartão reage ao mouse: sobe, ganha sombra e o contorno vira a cor da marca */
.pl-cartao:hover {
  transform: translateY(-8px); border-color: var(--linha-ouro);
  box-shadow: 0 26px 52px rgba(13, 27, 42, .16);
}
.pl-cartao:hover .pl-preco { color: var(--vinho); }
.pl-cartao.destaque {
  border: 1.5px solid var(--vinho); box-shadow: 0 22px 46px rgba(13, 27, 42, .16);
  transform: translateY(-10px);
}
.pl-cartao.destaque:hover { transform: translateY(-18px); box-shadow: 0 32px 62px rgba(13, 27, 42, .22); }
@media (hover: none) { .pl-cartao:hover { transform: none; } .pl-cartao.destaque:hover { transform: translateY(-10px); } }
.pl-selo {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--pessego); color: var(--vinho); box-shadow: 0 0 0 1.6px var(--vinho); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; padding: 5px 13px; border-radius: 999px; white-space: nowrap;
}
.pl-nome { font-family: "Playfair Display", Georgia, serif; font-size: 1.22rem; color: var(--vinho); margin: 0 0 2px; }
.pl-preco { font-family: "Playfair Display", Georgia, serif; font-size: 2.05rem; line-height: 1.1; margin: 0 0 4px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pl-quem { font-size: .84rem; color: var(--tinta-suave); margin: 0 0 14px; line-height: 1.4; min-height: 2.5em; }
.pl-lista { list-style: none; margin: 0 0 18px; padding: 0; font-size: .88rem; }
.pl-lista li { position: relative; padding-left: 21px; margin-bottom: 8px; color: var(--tinta-suave); line-height: 1.42; }
.pl-lista li::before {
  content: ""; position: absolute; left: 3px; top: .32em; width: 6px; height: 11px;
  border: solid var(--ouro); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.pl-btn { margin-top: auto; width: 100%; justify-content: center; }
@media (max-width: 640px) {
  .pl-cartao.destaque { transform: none; }
  .pl-quem { min-height: 0; }
}

/* ---- esteira das ocasiões: anda sozinha da direita para a esquerda ----
   Cada pílula é pequena e o conjunto é discreto de propósito: isto não é o destaque da página,
   é um índice bonito. A pista tem a lista DUAS vezes e desliza exatamente metade, que é o que
   faz o laço não ter emenda. */
.esteira + .esteira { margin-top: 12px; }
.esteira { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.esteira-pista { display: flex; gap: 12px; width: max-content; animation: esteira var(--dur, 34s) linear infinite; will-change: transform; }
.esteira:hover .esteira-pista, .esteira:focus-within .esteira-pista { animation-play-state: paused; }
/* ⚠️ A ESTEIRA NÃO ANDA ANTES DE APARECER NA TELA (pedido dela, 27/07: "andam sozinhas cedo
   demais na página"). Ela está a 3.700px do topo: quando a pessoa finalmente chegava, o laço
   já rodava havia mais de um minuto e ela pegava a volta no meio, num ponto qualquer. Agora o
   movimento começa na frente dela, e é ele que apresenta a lista.
   Quem liga/desliga o `.andando` é o observador do parte-fim.php.
   ⚠️ Só sob `.js`: sem JavaScript nada acrescenta a classe e a esteira ficaria congelada
   para sempre, o que é pior do que andar cedo demais.
   ⚠️ O `:not(:hover)` existe para o hover continuar mandando: sem ele esta regra é mais
   específica que a de cima e a esteira deixaria de parar para ser clicada. */
.js .esteira-pista { animation-play-state: paused; }
.js .esteira.andando:not(:hover):not(:focus-within) .esteira-pista { animation-play-state: running; }
.esteira.parada { overflow: visible; mask-image: none; -webkit-mask-image: none; }
.esteira.parada .esteira-pista { animation: none; width: auto; justify-content: center; flex-wrap: wrap; }
@keyframes esteira { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.oc-pilula {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 9px 18px 9px 9px; border-radius: 999px; text-decoration: none;
  background: #fff; border: 1px solid var(--linha-tinta); box-shadow: 0 4px 14px rgba(13, 27, 42, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.oc-pilula:hover { transform: translateY(-2px); border-color: var(--linha-ouro); box-shadow: 0 12px 26px rgba(13, 27, 42, .12); }
.oc-pilula .oc-icone { width: 38px; height: 38px; margin: 0; border: 0; }
.oc-pilula .oc-icone svg { width: 20px; height: 20px; }
.oc-pilula .oc-nome { font-size: .95rem; white-space: nowrap; }
/* uma cor por grupo, para os três blocos se distinguirem de relance */
.esteira[data-grupo=familia] .oc-icone { background: #f0e8de; color: #b4472c; }
.esteira[data-grupo=memoria] .oc-icone { background: #f6e2c7; color: #9c6c2e; }
.esteira[data-grupo=trabalho] .oc-icone { background: #dfe4e9; color: #1e3a52; }
@media (prefers-reduced-motion: reduce) {
  .esteira { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .esteira-pista { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .esteira-pista .oc-pilula[aria-hidden] { display: none; }
}

/* ---- grade das ocasiões: cartão com ícone, o cartão inteiro é o link ---- */
.oc-grupo {
  font-family: Inter, sans-serif; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ouro-escuro); font-weight: 600; margin: 34px 0 14px; text-align: center;
}
.oc-grupo:first-of-type { margin-top: 26px; }
.grade-ocasioes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
.oc-cartao {
  display: block; text-align: center; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--linha-tinta); border-radius: var(--raio-g);
  padding: 22px 16px 18px; box-shadow: 0 6px 18px rgba(13, 27, 42, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.oc-cartao:hover { transform: translateY(-3px); border-color: var(--linha-ouro); box-shadow: 0 18px 38px rgba(13, 27, 42, .12); }
.oc-icone {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--pessego-claro); color: var(--vinho); border: 1px solid var(--linha-ouro);
}
.oc-icone svg { width: 26px; height: 26px; }
.oc-nome { display: block; font-family: "Playfair Display", Georgia, serif; font-size: 1.06rem; color: var(--vinho); line-height: 1.25; }
.oc-detalhe { display: block; font-size: .82rem; color: var(--tinta-suave); margin-top: 5px; line-height: 1.35; }

/* comparação "grupo de WhatsApp x Coravia": marcador próprio, sem bolinha de lista */
.lista-comp { list-style: none; margin: 14px 0 0; padding: 0; }
.lista-comp li { position: relative; padding: 0 0 0 30px; margin-bottom: 12px; color: var(--tinta-suave); line-height: 1.5; }
.lista-comp li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 12px; height: 2px; border-radius: 2px; background: var(--tinta-suave); opacity: .5;
}
.lista-comp.sim li { color: var(--tinta); }
.lista-comp.sim li::before {
  content: ""; left: 6px; top: .3em; width: 7px; height: 13px; background: none; opacity: 1;
  border: solid var(--oliva); border-width: 0 2px 2px 0; transform: rotate(42deg); border-radius: 0;
}
.cartao.destaque { border: 2px solid var(--ouro); box-shadow: 0 24px 54px rgba(199, 141, 68, .18); }
.faixa.escura .cartao {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(13, 27, 42, .12);
  color: var(--tinta);
  box-shadow: 0 8px 22px rgba(13, 27, 42, .07);
}
.faixa.escura .cartao h2, .faixa.escura .cartao h3 { color: var(--vinho); }
.etiqueta {
  display: inline-block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: #faf8f5; background: var(--coral);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.pergunta-tag {
  /* P8 (09/08): as etiquetas estavam a 11,8px, abaixo do piso de leitura da casa (13px),
     num produto que fala com avós. Sobem para 13,1px; o espaçamento segura o desenho. */
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ouro-escuro); font-weight: 600; margin-bottom: 8px;
}
.lista-check { list-style: none; padding: 0; margin: 0; }
.lista-check li {
  position: relative; padding-left: 30px; margin-bottom: 11px; color: var(--tinta-suave);
}
.lista-check li::before {
  content: ""; position: absolute; left: 6px; top: .52em;
  width: 9px; height: 5px; border-left: 2px solid var(--ouro); border-bottom: 2px solid var(--ouro);
  transform: rotate(-45deg);
}
.faixa.escura .lista-check li { color: var(--tinta-suave); }

/* ---------- selos e ícones ---------- */
.selo {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--linha-ouro);
  background: rgba(199, 141, 68, .07);
  color: var(--ouro-escuro);
  margin-bottom: 14px;
}
.centro .selo, .selo.meio { margin-left: auto; margin-right: auto; }
.faixa.escura .selo { color: var(--ouro-escuro); border-color: var(--linha-ouro); background: rgba(255, 255, 255, .5); }
.selo svg { width: 26px; height: 26px; }
.icone { width: 22px; height: 22px; vertical-align: middle; }

/* passos numerados */
.passo-num {
  font-family: "Playfair Display", serif; font-size: 1.5rem; font-weight: 600;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--linha-ouro); color: var(--ouro-escuro);
  margin-bottom: 14px;
}

/* ---------- formulários ---------- */
label { display: block; font-weight: 600; margin: 22px 0 7px; font-size: .96rem; }
label.checkbox { display: flex; gap: 11px; align-items: flex-start; font-weight: 400; font-size: .95rem; }
label.checkbox input { margin-top: 4px; width: 19px; height: 19px; accent-color: var(--ouro-escuro); }
/* ⚠️ faltavam e-mail, senha, número e telefone: esses campos saíam CRUS do navegador,
   sem borda, sem altura e sem a fonte da casa. Valia pro site inteiro. */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=search], input[type=url], input[type=date], textarea, select {
  width: 100%; padding: 14px 15px;
  border: 1px solid var(--linha-tinta); border-radius: var(--raio);
  background: #fff; color: var(--tinta);
  font: 400 1.02rem/1.5 Inter, sans-serif;
}
input[type=file] { width: 100%; font-size: .94rem; color: var(--tinta-suave); }
input:focus, textarea:focus, select:focus { border-color: var(--ouro); outline: none; }
/* O ícone nativo do campo de data vinha na tinta padrão do navegador; escurecido, senta na
   paleta sem trocar o seletor nativo (que no celular é o melhor que existe). */
input[type=date]::-webkit-calendar-picker-indicator { filter: grayscale(1) brightness(.35); cursor: pointer; }
textarea { min-height: 118px; resize: vertical; }
/* era .87rem = 13,92px, e algumas .dica carregam instrução obrigatória ("Os campos marcados como
   OBRIGATÓRIO são os únicos que..."). Informação que a pessoa PRECISA ler não pode ser o menor
   texto da tela. 15px é o piso de leitura confortável no celular. */
.dica { font-size: .94rem; color: var(--tinta-suave); margin: 7px 0 0; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 10px 0 2px; }
.chip {
  border: 1px solid var(--linha-tinta); background: #fff; color: var(--tinta);
  border-radius: 999px; padding: 10px 16px; font-size: .93rem; cursor: pointer;
  font-family: Inter, sans-serif; transition: all .18s;
  /* 🔴 SEM ISTO O CHIP ESTOURA A TELA (03/08/2026, noite, visto medindo a 390px de largura).
     Item de flex nasce com `min-width: auto`, que quer dizer "não encolho abaixo do meu
     conteúdo": uma pergunta longa como "Como era a bagunça entre você e os seus irmãos?" saía
     pela direita e a página inteira ganhava rolagem horizontal no celular. Apareceu na
     Entrevista dos Avós, onde as perguntas são frases, e não palavras. */
  max-width: 100%;
}
.chip:hover { border-color: var(--ouro); }
.chip[aria-pressed=true] { border-color: var(--ouro); background: var(--ouro); color: #0d1b2a; font-weight: 600; }
.chip.estatico { cursor: default; background: transparent; color: var(--tinta-suave); }
/* O cartão de símbolo do /criar: a decisão mais emocional da tela escolhe VENDO o desenho
   (miniaturas reais de assets/simbolos, as mesmas da vitrine da home). O botão segue sendo
   um .chip para o JS; aqui ele só ganha corpo de cartão. Duas colunas no celular. */
.chips-sim { gap: 10px; }
.chip.chip-sim {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border-radius: 14px; padding: 9px 9px 11px;
  flex: 1 1 calc(50% - 5px); max-width: 178px; text-align: center;
}
.chip.chip-sim .chip-sim-foto {
  display: block; width: 100%; height: auto; aspect-ratio: 620 / 589;
  object-fit: cover; border-radius: 9px; background: var(--pessego-claro, #f7ede2);
}
.chip.chip-sim .chip-sim-nome { font-size: .9rem; line-height: 1.25; }
/* A troca de símbolo no painel: cartão-rádio com a miniatura no lugar do <select> nativo.
   O rádio fica invisível mas focável; o corpo do cartão é quem mostra escolha e foco.
   Só input:checked + irmão, de propósito: :has ainda falha em Android antigo. */
.rotulo-grupo { display: block; font-weight: 600; margin: 12px 0 4px; }
.troca-ops { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 2px; }
.troca-op { position: relative; flex: 1 1 calc(50% - 5px); max-width: 178px; cursor: pointer; }
.troca-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.troca-op .troca-corpo {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 1px solid var(--linha-tinta); background: #fff; border-radius: 14px;
  padding: 9px 9px 11px; text-align: center; transition: all .18s;
}
.troca-op .troca-corpo img {
  display: block; width: 100%; height: auto; aspect-ratio: 620 / 589;
  object-fit: cover; border-radius: 9px; background: var(--pessego-claro, #f7ede2);
}
.troca-op .troca-nome { font-size: .9rem; line-height: 1.25; color: var(--tinta); }
.troca-op input:checked + .troca-corpo {
  border-color: var(--vinho); background: var(--pessego); box-shadow: inset 0 0 0 1px var(--vinho);
}
.troca-op input:checked + .troca-corpo .troca-nome { color: var(--vinho); font-weight: 600; }
.troca-op input:focus-visible + .troca-corpo { outline: 3px solid var(--ouro); outline-offset: 2px; }
a.chip { text-decoration: none; display: inline-block; }
a.chip:hover { border-color: var(--ouro); background: #eaedf0; transform: translateY(-1px); }

/* ---------- tela de espera (amanhecer: leve, quente, esperançoso) ---------- */
.faixa.aguardando {
  /* pêssego limpo, sem passar por terra: os dois textos daqui eram marrom de verdade
     (#7a564a e #a9846d) e era isso que sujava a tela inteira */
  background: linear-gradient(180deg, #fcfaf8 0%, var(--pessego-claro) 46%, var(--pessego) 100%);
  color: var(--tinta); position: relative; overflow: hidden;
}
.faixa.aguardando::before {                 /* brilho de sol nascente atrás do broto */
  content: ""; position: absolute; left: 50%; top: 3%; width: 560px; height: 560px; max-width: 96vw;
  transform: translateX(-50%); pointer-events: none;
  /* o halo era dourado (217,160,91) e sobre creme dava justamente o tom de terra */
  background: radial-gradient(circle, rgba(249, 190, 155, .5) 0%, rgba(249, 190, 155, 0) 64%);
}
.aguardando .interno { position: relative; z-index: 1; }
/* tela de espera tem fundo pêssego: o acento fica no verde da marca */
.aguardando .kicker { color: var(--vinho); }
.aguardando h1 { color: var(--vinho, #0d1b2a); }
.aguardando .lead { color: var(--tinta-suave); }   /* era #7a564a, marrom de verdade */
.aguardando strong { color: var(--vinho); }
.aguardando .broto { width: 118px; height: 118px; margin: 6px auto 2px; display: block; color: #7f9d55; }
/* a marca na tela de espera: respira devagar, como quem espera */
.marca-espera { width: 132px; height: auto; margin: 4px auto 10px; display: block; animation: respira 4.6s ease-in-out infinite; }
/* O PROCESSO QUE GERMINA: semente > germina > broto > pronto, acende até o estágio da contagem.
   O estágio de agora brilha; os que faltam ficam esmaecidos, à espera. */
.germina { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: 20px 0 6px; }
.gr-st { width: 50px; height: 60px; transition: opacity .6s ease; }
.gr-st svg { width: 100%; height: 100%; display: block; }
.gr-st.espera { opacity: .22; }
.gr-st.agora { filter: drop-shadow(0 4px 10px rgba(122, 157, 85, .45)); animation: germinaPulsa 3.4s ease-in-out infinite; }
.gr-arr { align-self: center; padding-bottom: 22px; color: var(--ouro-escuro); opacity: .4; font-size: 15px; }
.germina-cap { font-family: "Playfair Display", serif; font-style: italic; color: var(--vinho); font-size: 1.06rem; margin: 2px 0 0; }
@keyframes germinaPulsa { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .gr-st.agora { animation: none; } }
@media (max-width: 420px) { .gr-st { width: 42px; height: 52px; } .germina { gap: 2px; } }
@keyframes respira { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .marca-espera { animation: none; } }
.broto-cresce { transform-origin: 50% 100%; animation: brotoCresce 3.8s ease-in-out infinite; }
@keyframes brotoCresce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.045); } }
.contador-espera { display: flex; gap: 14px; justify-content: center; margin: 26px 0 6px; }
.ce-bloco { min-width: 80px; background: #fff; border: 1px solid var(--linha-ouro); border-radius: 16px; padding: 15px 10px; box-shadow: 0 10px 26px rgba(13, 27, 42, .10); }
.ce-num { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 2.8rem; line-height: 1; color: var(--vinho, #0d1b2a); font-variant-numeric: tabular-nums; }
.ce-rot { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); margin-top: 7px; }
@media (max-width: 520px) { .contador-espera { gap: 8px; } .ce-bloco { min-width: 62px; padding: 12px 6px; } .ce-num { font-size: 2.1rem; } }
@media (prefers-reduced-motion: reduce) { .broto-cresce { animation: none; } }

/* ---------- escolha de plano no /criar ---------- */
.planos-escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 4px; }
.plano-card { display: block; cursor: pointer; border: 1.5px solid var(--linha-tinta); border-radius: 16px; padding: 16px 16px 18px; transition: border-color .16s, box-shadow .16s, background .16s; }
.plano-card input { position: absolute; opacity: 0; pointer-events: none; }
.plano-card.sel { border-color: var(--ouro); background: #eaedf0; box-shadow: 0 8px 22px rgba(13, 27, 42, .10); }
.plano-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.plano-nome { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; color: var(--tinta); }
.plano-preco { font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; color: var(--ouro-escuro); font-weight: 600; }
.plano-desc { display: block; margin-top: 8px; font-size: .92rem; line-height: 1.45; color: var(--tinta-suave, #4a5b6b); }
@media (max-width: 560px) { .planos-escolha { grid-template-columns: 1fr; } }

.aviso {
  background: rgba(199, 141, 68, .09);
  border: 1px solid var(--linha-ouro);
  border-radius: var(--raio); padding: 14px 16px; font-size: .95rem; color: var(--tinta);
}
.faixa.escura .aviso { color: var(--tinta); }
.erro {
  background: #fbf9f6; border: 1px solid #e5bcb0; color: var(--pessego-escuro);
  border-radius: var(--raio); padding: 14px 16px; margin-top: 14px; font-size: .95rem;
}
.erro-inline { color: var(--pessego-escuro); font-weight: 600; }
/* pergunta que a família já gravou (entrevista feita aos poucos) */
.chip.feita { border-color: var(--oliva, #16293c); color: var(--oliva, #16293c); }
.chip.feita span { font-weight: 700; margin-left: 4px; }
/* quantas pessoas já escolheram aquela pergunta (ajuda a festa grande a não repetir a mesma resposta) */
.chip-n {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  background: var(--marfim-2); color: var(--tinta-suave);
  font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.chip[aria-pressed=true] .chip-n { background: rgba(36, 28, 5, .16); color: inherit; }

/* campo de arquivo aberto pelo rótulo (a câmera do celular): sai da vista sem display:none,
   que em parte dos celulares impede o toque de chegar no campo */
.arquivo-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* o vídeo tem bloco próprio, com os três jeitos juntos: antes o "enviar um que já tenho"
   ficava largado embaixo da foto e parecia outra coisa */
.area-video {
  background: var(--marfim-2); border: 1px solid var(--linha-ouro);
  border-radius: var(--raio-g); padding: 18px 16px 14px; margin-top: 20px;
}
.video-jeitos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 0; }

/* ===== O DESENHO: a quinta forma de participar (28/07) =====
   A tela de desenho fica FECHADA por padrão, atrás de um botão: aberta no meio do formulário
   ela rouba a atenção de quem veio gravar a voz, que é o recado principal. */
.desenho-area {
  background: var(--marfim-2); border: 1px solid var(--linha-ouro);
  border-radius: var(--raio-g); padding: 16px; margin-top: 20px; text-align: center;
}
.desenho-barra {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: center; margin-bottom: 12px;
}
.desenho-cores, .desenho-grossuras { display: inline-flex; gap: 6px; }
/* alvo de 34px: dedo de criança erra botão pequeno, e errar aqui apaga o desenho dela */
.desenho-cor {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; box-shadow: 0 0 0 1px rgba(13, 27, 42, .18);
}
.desenho-cor.ativo { border-color: var(--ouro); transform: scale(1.12); }
.desenho-gros {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linha-tinta);
  background: #fff; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.desenho-gros span { display: block; border-radius: 50%; background: var(--tinta); }
.desenho-gros.ativo { border-color: var(--ouro); background: var(--marfim-2); }
/* touch-action:none impede a página de rolar enquanto o dedo desenha, que é o bug número um
   de canvas em celular: a criança tenta fazer um traço e a tela inteira sobe junto */
/* ⚠️ A FOLHA É EM PÉ (04/08/2026, pedido dela). Era 10/7, deitada, e num celular de 390 de
   largura isso dava 390x273 de área para desenhar com o dedo, com 500 pixels de altura sobrando.
   2/3 é uma folha em pé, é o jeito como se segura o celular, e mais que dobra
   o espaço de desenho sem mexer em mais nada.
   ⚠️ `max-height: 62vh` na folha pequena: em pé e sem teto, ela empurrava o resto do formulário
   para baixo da dobra em celular estreito. */
.desenho-tela {
  /* ⚠️ O `aspect-ratio` daqui é só o VALOR DE PARTIDA, para a folha não piscar deitada enquanto o
     JavaScript não rodou. Quem manda de verdade é o `folhaDoAparelho()` no gravar.php, que
     escreve a proporção da TELA de quem abriu direto no elemento (estilo em linha ganha daqui).
     O teto de 58vh é para a folha pequena não empurrar o resto do formulário para fora da vista. */
  width: 100%; max-width: 100%; aspect-ratio: 2 / 3; max-height: 58vh; margin: 0 auto;
  display: block;
  background: #fff; border: 1px solid var(--linha-ouro); border-radius: var(--raio);
  touch-action: none; cursor: crosshair;
}
/* o desenho aparece com moldura clara na homenagem, no telão e no Arquivo: sem ela, um traço
   fino sobre fundo branco some dentro do fundo creme das telas */
.midia-desenho, .retrato-desenho {
  background: #fff; border: 1px solid var(--linha-ouro); border-radius: var(--raio);
  padding: 6px;
}

/* senha com o olho de mostrar: senha de 13 caracteres com hífen erra fácil no celular */
.campo-senha { display: flex; align-items: stretch; gap: 8px; }
.campo-senha input { flex: 1; min-width: 0; }
.olho {
  border: 1px solid var(--linha-tinta); background: #fff; color: var(--tinta-suave);
  border-radius: var(--raio); padding: 0 14px; font: 600 .85rem Inter, sans-serif;
  cursor: pointer; white-space: nowrap;
}
.olho:hover { border-color: var(--ouro); color: var(--tinta); }
.link-caixa {
  word-break: break-all; font-size: .9rem; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  background: var(--marfim-2); border: 1px dashed var(--linha-ouro);
  border-radius: var(--raio); padding: 13px 14px; color: var(--tinta);
}
/* Mensagem HUMANA pronta pra mandar (o lembrete do painel): balão de conversa, nunca a caixa
   monoespaçada dos links. Mono é pra senha e URL; mensagem de gente lê como mensagem. */
.msg-caixa {
  white-space: pre-line; font-size: .96rem; line-height: 1.55; font-family: Inter, sans-serif;
  background: #fff; border: 1px solid var(--linha-ouro);
  border-radius: 16px; border-bottom-left-radius: 5px;
  padding: 13px 16px; color: var(--tinta); box-shadow: 0 2px 10px rgba(13, 27, 42, .06);
}

/* ---------- o jardim (símbolos que florescem) ---------- */
.jardim {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  max-width: 460px; margin: 26px auto;
}
.jardim .simbolo { width: 30px; height: 30px; opacity: 0; transform: scale(.4) rotate(-24deg); }
.jardim .simbolo.abriu {
  opacity: 1; transform: scale(1) rotate(var(--gira, 0deg));
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1.2, .36, 1);
}
.simbolo.ouro { color: var(--coral); }
.simbolo.oliva { color: var(--oliva); }
.simbolo.salvia { color: var(--salvia); }
.simbolo.ouro-claro { color: var(--ouro-claro); }
.simbolo.creme { color: var(--marfim-3); }
.faixa.escura .simbolo.creme { color: rgba(13, 27, 42, .8); }

.numerao {
  font-family: "Playfair Display", serif; font-weight: 600;
  font-size: clamp(3.6rem, 15vw, 6rem); line-height: 1; color: var(--ouro-escuro);
}
.faixa.escura .numerao { color: var(--ouro-escuro); }

/* ---------- escuta cega ---------- */
.disco {
  width: 116px; height: 116px; border-radius: 50%;
  background: var(--vinho, #0d1b2a);
  color: #faf8f5; border: 0; cursor: pointer;
  display: grid; place-items: center; margin: 0 auto;
  box-shadow: 0 0 0 12px rgba(199, 141, 68, .12), 0 16px 34px rgba(0, 0, 0, .25);
  transition: transform .16s;
}
.disco:active { transform: scale(.96); }
.disco svg { width: 42px; height: 42px; }
.disco.gravando { background: linear-gradient(180deg, #d8795c, #b4472c); color: #fff; animation: pulsa 1.5s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 20px rgba(180, 57, 42, .1), 0 16px 34px rgba(0, 0, 0, .25); } }

.ondas { display: flex; gap: 4px; align-items: flex-end; height: 32px; justify-content: center; margin: 16px 0 6px; }
.ondas span { width: 4px; border-radius: 3px; background: var(--ouro); height: 7px; }
.tocando .ondas span { animation: onda 1s ease-in-out infinite; }
.tocando .ondas span:nth-child(2n) { animation-delay: .16s; }
.tocando .ondas span:nth-child(3n) { animation-delay: .3s; }
@keyframes onda { 50% { height: 28px; } }

.revelado { animation: surge .55s cubic-bezier(.22, 1.15, .36, 1); }
@keyframes surge { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.midia { width: 100%; border-radius: var(--raio); max-height: 360px; object-fit: cover; display: block; margin-bottom: 14px; }
video.midia { max-height: none; }
audio { width: 100%; margin-top: 10px; }
.assina { font-family: "Playfair Display", serif; font-weight: 600; font-size: 1.24rem; color: var(--tinta); margin: 12px 0 0; }
.faixa.escura .assina { color: var(--vinho); }
/* ⚠️ 30 e não 18 (06/08/2026, pedido dela: "não dá pra saber quando termina um e começa o
   outro"). O respiro entre cartas é metade da separação; a outra metade é o cabeçalho do
   remetente, logo abaixo. */
.mural { display: grid; gap: 30px; margin-top: 22px; }
.ano-marco {
  font-family: "Playfair Display", serif; font-size: 2rem; color: var(--ouro-escuro);
  text-align: center; margin: 34px 0 4px; position: relative;
}
.ano-marco::after { content: ""; display: block; width: 54px; height: 1px; background: var(--linha-ouro); margin: 12px auto 0; }

/* ---------- gravador ---------- */
.gravador { text-align: center; padding: 22px 0 10px; }
.gravador .tempo { font-variant-numeric: tabular-nums; color: var(--tinta-suave); margin-top: 12px; font-size: .95rem; }

/* ---------- broto da contagem regressiva ---------- */
.broto { width: 104px; height: 104px; margin: 26px auto; color: var(--ouro); animation: balanca 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes balanca { 50% { transform: rotate(2.5deg); } }

/* ---------- rodapé ---------- */
.rodape { background: var(--pessego-fundo); color: var(--tinta-suave); padding: 54px 22px 40px; }
.rodape .interno { max-width: var(--largura); margin: 0 auto; text-align: center; }
.rodape img { height: 74px; width: auto; }
.rodape .lema { font-family: "Playfair Display", serif; font-style: italic; font-size: 1.16rem; color: var(--ouro-escuro); margin-bottom: 6px; }
.rodape a { color: var(--tinta-suave); text-decoration: none; }
.rodape a:hover { color: var(--ouro-escuro); }
.rodape .links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 18px; font-size: .9rem; }
.rodape .fio { width: 60px; height: 1px; background: var(--linha-ouro); margin: 26px auto; }

hr.fio-ouro { border: 0; height: 1px; background: var(--linha-ouro); margin: 40px 0; }

/* ---------- entrada suave ---------- */
.js .surgir { opacity: 0; transform: translateY(18px); }
.js .surgir.visivel { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .surgir { opacity: 1; transform: none; }
  .jardim .simbolo { opacity: 1; transform: none; }
}

/* refino do jardim do hero */
.simbolo.navy { color: var(--navy-600); }
.jardim .simbolo { width: 34px; height: 34px; }
.jardim { gap: 12px; }

/* ---------- ajustes de celular ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg { max-width: 100%; }
.topo .interno { gap: 10px; }
@media (max-width: 560px) {
  .topo .interno { padding: 10px 16px; }
  .marca img { height: 32px; }
  .marca .nome { font-size: 1.28rem; }
  .marca .sub { font-size: .5rem; letter-spacing: .16em; }
  /* era 40px: encolhido para caber no cabeçalho estreito, mas é o botão mais clicado do site e
     ficava abaixo do mínimo de toque. 44px com padding lateral menor cabe do mesmo jeito. */
  .topo .btn { min-height: 44px !important; padding: 11px 13px !important; font-size: .84rem !important; }
  .faixa { padding: 44px 18px; }
  .cartao { padding: 22px 18px; }
  .acoes .btn { width: 100%; }
  h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); }
  .lead { font-size: 1.05rem; }
}
@media (max-width: 380px) {
  .marca .sub { display: none; }
}

/* ---------- paleta Coravia (verde floresta, creme, dourado, madeira) ---------- */
:root {
  --vinho: #0d1b2a;         /* nome antigo, cor nova: é o verde da marca */
  --vinho-escuro: #070f18;
  --rubi: #1e3a52;
}
/* ⚠️ Esta faixa tinha as três cores escritas à mão, fora dos tokens, e por isso saiu da
   repintura puxando para bege dourado enquanto o resto do site já era creme. Agora ela usa os
   mesmos tokens do resto, e mudar o creme num lugar só muda em todos. */
.faixa.escura {
  background: radial-gradient(120% 100% at 50% 0%, var(--pessego-claro) 0%, var(--pessego-fundo) 74%), var(--pessego);
}
.faixa.oliva { background: #16293c; color: #f5e9dd; }
.faixa.oliva h1, .faixa.oliva h2, .faixa.oliva h3 { color: #faf8f5; }
.faixa.oliva .suave, .faixa.oliva .lead { color: #d6dee7; }
.faixa.oliva .kicker { color: #bac8d7; }
.faixa.oliva .cartao { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #f5e9dd; }
.faixa.oliva .cartao h3, .faixa.oliva .cartao h2 { color: #fdfcfa; }
.faixa.oliva .selo { color: #bac8d7; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.faixa.oliva .btn.contorno { color: #fdfcfa; border-color: rgba(255,255,255,.36); }

/* ---------- fotografia ---------- */
.foto { position: relative; overflow: hidden; border-radius: var(--raio-g); background: var(--marfim-3); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto.retrato { aspect-ratio: 4 / 5; }
.foto.paisagem { aspect-ratio: 4 / 3; }
.foto.larga { aspect-ratio: 16 / 9; }
.foto.quadrada { aspect-ratio: 1 / 1; }
.foto.moldura { border: 6px solid #fff; box-shadow: var(--sombra); }
.foto .legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 18px 16px; color: #fff;
  background: linear-gradient(to top, rgba(58,28,34,.88), rgba(58,28,34,0));
  font-family: "Playfair Display", serif; font-size: 1.22rem; line-height: 1.3;
}
.foto .legenda small { display: block; font-family: Inter, sans-serif; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: #f0cabf; margin-bottom: 6px; }

/* hero com foto ao lado */
.hero { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr .95fr; gap: 46px; } .hero .texto { text-align: left; } .hero .texto .lead, .hero .texto .kicker { margin-left: 0; } .hero .acoes { justify-content: flex-start; } }

/* colagem de fotos */
.colagem { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.colagem .foto:first-child { grid-row: span 2; }
@media (max-width: 620px) { .colagem { grid-template-columns: 1fr; } .colagem .foto:first-child { grid-row: auto; } }

/* ---------- a árvore das homenagens ---------- */
.arvore-caixa { width: 100%; max-width: 760px; margin: 0 auto; }
.ev-arvore { width: 100%; height: auto; display: block; overflow: visible; }
.ev-fruto {
  opacity: 0; transform: scale(.35);
  transition: opacity .7s ease var(--atraso, 0s), transform .8s cubic-bezier(.2, 1.35, .4, 1) var(--atraso, 0s);
  cursor: pointer;
}
.ev-fruto.abriu { opacity: 1; transform: scale(1); animation: ev-balanca 6s ease-in-out infinite; }
.ev-fruto:hover, .ev-fruto:focus-visible { transform: scale(1.09); outline: none; }
/* vidro não estica: peça do vitral responde acendendo mais, não crescendo (esticar quebraria o chumbo) */
.ev-vitral .ev-fruto:hover, .ev-vitral .ev-fruto:focus-visible { transform: none; filter: brightness(1.45) saturate(1.2); }
.ev-vitral .ev-fruto { transition: opacity 1.1s ease, filter .25s ease; }
/* quebra-cabeça: a peça VIRA de face pra cima, que é o gesto do jogo (não cresce nem balança) */
.ev-quebra .ev-fruto { transform: rotateY(84deg); transition: opacity .5s ease, transform .55s ease; }
.ev-quebra .ev-fruto.abriu { opacity: 1; transform: rotateY(0deg); }
.ev-quebra .ev-fruto:hover, .ev-quebra .ev-fruto:focus-visible { transform: none; filter: brightness(1.08) saturate(1.1); }
/* dois lados: na frente o retrato de quem gravou, virando aparece a foto escolhida.
   A peça encolhe no meio e volta com a outra face, em vez de girar em 3D (que espelharia a foto). */
.ev-quebra .qc-face { transition: opacity .16s linear; }
.ev-quebra .qc-verso { opacity: 0; }
.ev-quebra.virado .qc-frente { opacity: 0; }
.ev-quebra.virado .qc-verso { opacity: 1; }
.ev-quebra.virando .ev-fruto.abriu { transform: scaleX(.03); transition: transform .26s ease; }
.ev-fruto:focus-visible circle:nth-of-type(2) { stroke: var(--ouro-claro); stroke-width: 5; }
.ev-fruto:nth-child(2n).abriu { animation-duration: 7.5s; animation-delay: .6s; }
.ev-fruto:nth-child(3n).abriu { animation-duration: 8.5s; animation-delay: 1.2s; }
/* DAR VIDA AO TOCAR (ideia dela): os rostos começam levemente SEM VIDA (sutis, um pouco
   esmaecidos e dessaturados, nunca feios) e, ao serem tocados, GANHAM VIDA — ficam vívidos,
   como se ela desse vida às pessoas ao tocá-las. Nada salta nem cresce; a transição é suave,
   como a vida chegando. O que ela já tocou fica vivo, então ela sabe o que ainda falta abrir.
   (o vitral tem lógica de luz própria, fica de fora) */
/* ⚠️ o estado BASE precisa estar BONITO, nunca esmaecido (ela viu ao recarregar e vetou): a
   opacidade .82 lavava a tela inteira no fundo pêssego. Agora o base é quase cheio (só um sopro
   de calma na saturação) e o TOQUE acende o rosto (mais cor + brilho + halo). Sem opacidade. */
.ev-arvore:not(.ev-vitral) .ev-fruto { filter: saturate(.94); transition: filter .6s ease; }
.ev-arvore:not(.ev-vitral) .ev-fruto.ev-visto { filter: saturate(1.12) brightness(1.06); }
.ev-arvore:not(.ev-vitral) .ev-fruto.ev-sel { filter: saturate(1.16) brightness(1.08) drop-shadow(0 0 6px rgba(199, 141, 68, .6)); }
@media (prefers-reduced-motion: reduce) { .ev-arvore:not(.ev-vitral) .ev-fruto { transition: none; } }
@keyframes ev-balanca { 50% { transform: scale(1) translateY(-6px) rotate(1.2deg); } }
.ev-galhos { animation: ev-brisa 9s ease-in-out infinite; transform-origin: 500px 800px; will-change: transform; }
@keyframes ev-brisa { 50% { transform: rotate(.5deg); } }

/* seta orgânica grande, no topo, apontando pra baixo nos rostos; some no primeiro toque (pedido dela) */
.seta-dica { width: 70px; height: 82px; margin: 2px auto -18px; display: block; animation: setaPula 1.5s cubic-bezier(.5,0,.5,1) infinite; }
.seta-dica svg { width: 100%; height: 100%; display: block; overflow: visible; }
.seta-dica .sd-corpo, .seta-dica .sd-ponta { stroke: var(--vinho); stroke-width: 4.2; fill: none; }
/* toque: a seta mergulha nos rostos como se clicasse neles, e volta */
@keyframes setaPula { 0%, 38%, 100% { transform: translateY(0); } 62%, 74% { transform: translateY(26px); } }
@media (prefers-reduced-motion: reduce) { .seta-dica { animation: none; } }
.arvore-dica { text-align: center; color: var(--tinta-suave); font-size: .95rem; margin-top: 6px; }
.faixa.escura .arvore-dica { color: var(--tinta-suave); }
.faixa.oliva .arvore-dica { color: var(--creme-suave); }

/* prévia na criação */
.previa { background: var(--marfim-2); border: 1px solid var(--linha-tinta); border-radius: var(--raio-g); padding: 18px; }
.previa .arvore-caixa { max-width: 420px; }
.grade-simbolos { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 12px; align-items: start; }
/* cada símbolo tem altura própria; sem isso o quebra-cabeça descia e desalinhava a fileira */
.g-simbolo { display: flex; flex-direction: column; align-items: center; }
.g-simbolo .arvore-caixa { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.g-simbolo .arvore-caixa svg { width: 100%; height: 100%; }
.g-simbolo { text-align: center; }
.g-simbolo .arvore-caixa { max-width: 100%; }
.previa h3 { margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .ev-fruto, .ev-fruto.abriu, .ev-galhos { animation: none !important; opacity: 1; transform: none; }
}

/* partículas caindo (folhas, pétalas, estrelas) */
.ev-particula { animation: ev-cai var(--dur, 14s) linear var(--atraso, 0s) infinite; opacity: 0; will-change: transform, opacity; }
@keyframes ev-cai {
  0%   { opacity: 0; transform: translate(0, -40px) rotate(0deg); }
  12%  { opacity: .9; }
  85%  { opacity: .55; }
  100% { opacity: 0; transform: translate(38px, 780px) rotate(220deg); }
}
.ev-ceu { border-radius: 22px; }
@media (prefers-reduced-motion: reduce) { .ev-particula { animation: none; opacity: 0; } }

/* estrelas cintilando no céu da constelação */
.ev-cintila { animation: ev-brilha 4s ease-in-out var(--atraso, 0s) infinite; transform-origin: center; }
@keyframes ev-brilha { 0%, 100% { opacity: .3; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .ev-cintila { animation: none; } }

/* colcha e trem: retalhos/vagões parados (sem o balanço das flores) */
.ev-parado .ev-fruto.abriu { animation: none; }
/* trem: rodas girando de leve e fumaça subindo */
.ev-roda { transform-box: fill-box; transform-origin: center; animation: ev-gira 3.4s linear infinite; }
@keyframes ev-gira { to { transform: rotate(360deg); } }
.ev-fumaca { transform-box: fill-box; transform-origin: center; animation: ev-fuma 2.8s ease-out var(--atraso, 0s) infinite; }
@keyframes ev-fuma { 0% { opacity: .85; transform: translateY(4px) scale(.6); } 100% { opacity: 0; transform: translateY(-34px) scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .ev-roda, .ev-fumaca { animation: none; } }

/* ================= a cor da marca nos botões e nos destaques =================
   Regra que veio de 2026-07-21 (ela pediu a cor da marca em TODO botão e destaque, no lugar do
   coral) e que continua valendo na marca 3.0: agora o acento é o VERDE FLORESTA.
   ⚠️ Este bloco vem DEPOIS do :root lá de cima e ganha dele. Trocar só a paleta do topo e
   esquecer daqui deixaria o site inteiro verde com botão da cor antiga. */
:root {
  --ouro:        #c78d44;
  /* ⚠️ (2026-07-22, decisão dela) O ACENTO DE TEXTO deixou de ser verde e virou PÊSSEGO ESCURO.
     Verde demais na tela clara puxava para clínica; agora os textos-acento (kickers, ênfases,
     rótulos, subtítulo da marca) leem em terracota quente. O verde da marca fica reservado para
     os botões, o sublinhado orgânico dos destaques e os textos que sentam sobre pêssego. */
  --ouro-escuro: #825e2b;
  --ouro-claro:  #ddb77e;
  --linha-ouro:  rgba(199, 141, 68, .38);
}
.chip[aria-pressed=true], .chip.sel {
  border-color: var(--vinho); background: var(--pessego); color: var(--vinho); font-weight: 600; box-shadow: inset 0 0 0 1px var(--vinho);
}
.chip[aria-pressed=true] .chip-n, .chip.sel .chip-n { background: rgba(13, 27, 42, .12); color: var(--vinho); }
.btn.ouro { background: var(--btn-grad); color: #0d1b2a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 10px 26px rgba(180, 71, 44, .30); }
.btn.ouro:hover { background: var(--btn-grad-h); color: #f5f0ea; }
a.chip:hover { background: #e6e9ec; }
.cartao.destaque { box-shadow: 0 24px 54px rgba(13, 27, 42, .16); }
.plano-card.sel { background: #eaedf0; }

/* dois botões lado a lado, inclusive no celular (antes empilhavam e a segunda ação sumia) */
.acoes > .btn { flex: 0 1 auto; }
@media (max-width: 560px) {
  /* Era 44%, meio a meio: com rótulo comprido o botão quebrava em 3 linhas de 154px, alinhado
     torto ao lado do vizinho de 1 linha (auditoria 07/08, o "bagunçado" que ela viu). No
     celular o par empilha em largura cheia, que é o desenho do herói que ela aprovou. */
  .acoes > .btn { flex: 1 1 100%; padding-left: 14px; padding-right: 14px; font-size: .93rem; }
  .acoes > .btn.largo { flex-basis: 100%; }
}

/* ================= guia /homenagens ================= */
.grade-guia { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-top: 26px; }
.cartao-guia {
  background: #fff; border: 1px solid var(--linha-tinta); border-radius: var(--raio-g);
  overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cartao-guia:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(13, 27, 42, .16); }
.cg-foto { display: block; aspect-ratio: 4 / 3; border-radius: 0; }
.cg-quem {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--vinho); color: #faf8f5; padding: 6px 13px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
}
.cg-corpo { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.cg-corpo h3 { margin: 0; font-size: 1.32rem; }
.cg-frase { margin: 0; color: var(--tinta-suave); line-height: 1.5; }
.cg-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cg-meta li {
  font-size: .79rem; background: var(--marfim-2); color: var(--tinta-suave);
  border-radius: 999px; padding: 4px 11px;
}
.cg-corpo .acoes { margin-top: auto; padding-top: 4px; }
.preco-guia { font-family: 'Playfair Display', Georgia, serif; font-size: 2.2rem; line-height: 1; margin: 6px 0 12px; color: var(--vinho); }

/* a assinatura da casa no rodapé estava com uma cor azulada da fase navy e sumia no pêssego */
.rodape .assinatura { color: #4a5b6b; font-weight: 500; }

/* perguntas e objeções em sanfona (as objeções reais de quem compra, não FAQ de enfeite) */
.cartao.faq { padding: 18px 20px; }
.cartao.faq summary {
  cursor: pointer; font-weight: 600; font-size: 1.05rem; color: var(--vinho);
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.cartao.faq summary::-webkit-details-marker { display: none; }
.cartao.faq summary::before {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2px solid var(--vinho); border-bottom: 2px solid var(--vinho);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.cartao.faq[open] summary::before { transform: rotate(45deg); }

/* dentro do cartão do guia os dois botões dividem a linha, sempre (o cartão é estreito e eles
   empilhavam, que era exatamente o que a Pri não queria) */
.cg-corpo .acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cg-corpo .acoes .btn { width: 100%; padding: 14px 10px; min-height: 48px; font-size: .9rem; }

/* obrigatório x opcional: a pessoa precisa saber onde ela pode parar de preencher.
   ⚠️ Era uma PÍLULA navy em caixa alta de 10,9px, repetida campo a campo (auditoria premium,
   09/08): formulário premium não grita o obrigatório, marca discreto. A informação fica,
   o grito sai, e o corpo sobe pro mínimo de leitura da casa (13px). */
.obrig, .opc {
  display: inline-block; margin-left: 8px; vertical-align: baseline;
  font-family: Inter, sans-serif; font-size: .82rem; font-weight: 600;
  letter-spacing: .02em; text-transform: none;
  border-radius: 0; padding: 0; background: transparent;
}
.obrig { color: var(--ouro-escuro); }
.opc { color: var(--tinta-suave); }

/* o vitral também vira: de frente as peças acesas com quem gravou, virando a foto do casal
   inteira atrás do vidro (pedido da Pri: tem que funcionar igual ao quebra-cabeça) */
.ev-vitral .vt-verso { opacity: 0; transition: opacity .32s ease; pointer-events: none; }
.ev-vitral.virado .vt-verso { opacity: 1; }
.ev-vitral .ev-vidros, .ev-vitral .ev-frutos { transition: opacity .32s ease; }
.ev-vitral.virado .ev-vidros, .ev-vitral.virado .ev-frutos { opacity: 0; }

/* divisor por pessoa: a régua que mostra o preço se dividindo */
#divisor input[type=range] { accent-color: var(--vinho); height: 30px; }
#divisor .cartao { padding: 18px 18px 16px; }

/* preço grande nos cartões de plano (os quatro planos agora ficam lado a lado no topo) */
.preco-plano { font-family: 'Playfair Display', Georgia, serif; font-size: 2.4rem; line-height: 1; margin: 12px 0 20px; color: var(--vinho); }
.cartao.plano .acoes .btn { flex: 1 1 46%; }

/* tarja de exemplo: quem chega no /exemplo precisa saber, na primeira linha, que é exemplo */
.tarja-exemplo {
  background: var(--vinho); color: #faf8f5; text-align: center;
  padding: 10px 18px; font-size: .92rem; font-weight: 500;
}

/* ⚠️ BUG DE RAIZ, achado pela Pri em 2026-07-22: `.btn` define display:inline-flex, e classe
   ganha do seletor [hidden] do navegador. Resultado: TODO botão com o atributo hidden aparecia
   assim mesmo, e a colcha de retalhos oferecia "virar e ver a foto de vocês" sem ter verso.
   Isso valia para 8 botões do site (vídeo, virar, próxima voz, som de fundo, compartilhar). */
[hidden] { display: none !important; }

/* ================= A CAPA: o embrulho da entrega =================
   A homenagem não deve aparecer pronta na cara da pessoa. Ela chega numa capa com o nome,
   e o toque em "abrir" é o que faz a árvore florescer E libera o som (o navegador só toca
   áudio depois de um gesto, então a cerimônia resolve o problema técnico de bônus). */
body.com-capa { overflow: hidden; }
.capa {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #fdfbf9 0%, var(--pessego-claro) 46%, var(--pessego) 100%);
  animation: capaEntra .8s ease both;
  overflow: hidden;
}
.capa.saindo { animation: capaSai .7s ease forwards; }
@keyframes capaEntra { from { opacity: 0 } to { opacity: 1 } }
@keyframes capaSai { to { opacity: 0; transform: scale(1.04); visibility: hidden } }
.capa-luz {
  position: absolute; width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%);
  animation: respira 7s ease-in-out infinite;
}
@keyframes respira { 0%,100% { transform: scale(1); opacity: .85 } 50% { transform: scale(1.08); opacity: 1 } }
.capa-dentro { position: relative; padding: 32px 26px; max-width: 620px; }
.capa-selo {
  font-family: Inter, sans-serif; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--vinho); opacity: .85; margin: 0 0 18px;
  animation: sobe .9s ease .15s both;
}
.capa-nome {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: clamp(2.8rem, 11vw, 5.4rem); line-height: 1.02; color: var(--vinho);
  margin: 0; animation: sobe 1s ease .3s both;
}
.capa-fio {
  width: 74px; height: 1px; margin: 26px auto; background: rgba(122,38,54,.42);
  animation: fio 1.1s ease .8s both;
}
@keyframes fio { from { width: 0; opacity: 0 } to { width: 74px; opacity: 1 } }
.capa-sub {
  font-size: 1.14rem; color: var(--tinta); margin: 0 0 30px; line-height: 1.55;
  animation: sobe 1s ease .55s both;
}
.capa .btn { animation: sobe 1s ease .75s both; padding: 19px 38px; font-size: 1.05rem; }
.capa-dica {
  font-size: .9rem; color: var(--tinta-suave); margin: 18px 0 0;
  animation: sobe 1s ease .95s both;
}
@keyframes sobe { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .capa, .capa *, .capa-luz { animation: none !important; }
}

/* o cartão do recado ganha ar de página de livro, não de post
   ⚠️ o rótulo e a linha das qualidades entram na lista de exclusão (06/08/2026): sem isso a
   regra do livro engolia o rótulo pequeno e ele saía em serifa de 1.24rem, gritando */
.cartao.revelado p:not(.pergunta-tag):not(.assina):not(.dica):not(.suave):not(.qual-vistas-rotulo):not(.qual-linha) {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.24rem; line-height: 1.55; color: var(--tinta);
}
.cartao.revelado .assina {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.06rem; color: var(--vinho);
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha-ouro);
}
/* ANOTAÇÕES E MEMÓRIAS com leve cara de CARTA (pedido dela): papel creme morno, borda fina e um
   sopro de deckle. Mais bonito que o card branco, sem o peso do cartão antigo (que é só das telas
   de mensagem). Não precisa ser igual aos cartões, só ter um leve estilo de carta. */
.cartao.revelado { background: transparent; border: 0; box-shadow: none; position: relative; z-index: 0; isolation: isolate; }
.faixa.escura .cartao.revelado, .faixa.oliva .cartao.revelado { background: transparent; }
.cartao.revelado::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--raio-g);
  background: linear-gradient(180deg, #fefdfb, #f7f4f0);   /* 1 tom mais claro (pedido dela) */
  filter: url(#deckle-leve);
  box-shadow: 0 12px 28px rgba(90, 70, 50, .12);
}
.cartao.revelado::after {
  content: ""; position: absolute; inset: 9px; z-index: 0; pointer-events: none;
  border: 1px solid rgba(156, 108, 46, .2);
}
.cartao.revelado > * { position: relative; z-index: 1; }
/* ═══ O CABEÇALHO DO REMETENTE (06/08/2026, pedido dela) ═══
   Cada recado abre como carta: o rosto de quem escreveu num medalhão (ou as iniciais num selo),
   o nome em serifa e a pergunta pequena embaixo. É o que separa uma carta da outra e distingue
   as pessoas, que era o que faltava ("todas as pessoas similares, cadê a foto delas?").
   ⚠️ Tudo div/span de propósito: a regra do livro logo acima engole <p> sem classe. */
.rem-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.rem-foto, .rem-inicial { width: 54px; height: 54px; border-radius: 50%; flex: 0 0 54px; }
.rem-foto { object-fit: cover; border: 2px solid var(--linha-ouro); box-shadow: 0 4px 10px rgba(90, 70, 50, .18); }
.rem-inicial {
  display: grid; place-items: center; background: #fff; border: 1.5px solid var(--linha-ouro);
  color: var(--vinho); font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.15rem;
}
.rem-nome { font-family: 'Playfair Display', Georgia, serif; font-size: 1.18rem; color: var(--vinho); line-height: 1.2; }
.rem-sub { font-size: .8rem; color: var(--tinta-suave); margin-top: 3px; line-height: 1.35; }
/* A MARCA NA LEITURA da Carta: "Sua coragem" e o porquê, como no mockup dela. */
.marca-selo { display: block; margin-top: 14px; padding: 10px 16px; border-left: 2px solid var(--linha-ouro); }
.marca-selo .ms-rotulo { display: block; font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: var(--ouro-escuro); font-size: 1.08rem; }
.marca-selo .ms-frase { display: block; margin-top: 4px; color: var(--tinta); font-size: .98rem; line-height: 1.5; }

/* ================= tela de entrar: sóbria, centrada, sem cara de formulário improvisado ===== */
.faixa-entrar {
  min-height: calc(100vh - 90px);
  display: grid; place-items: center;
  background: radial-gradient(110% 80% at 50% 0%, #fefdfb 0%, var(--marfim) 55%, var(--pessego-claro) 100%);
  padding: 40px 18px 70px;
}
.entrar-caixa {
  width: 100%; max-width: 430px; background: #fff;
  border: 1px solid var(--linha-tinta); border-radius: 18px;
  padding: 38px 34px 30px; box-shadow: 0 26px 60px rgba(13, 27, 42, .12);
  text-align: center;
}
.entrar-marca { margin-bottom: 14px; }
.entrar-marca img { display: block; margin: 0 auto; }
.entrar-caixa h1 { font-size: clamp(1.7rem, 5vw, 2.1rem); margin: 0 0 10px; }
.entrar-sub { color: var(--tinta-suave); font-size: .96rem; line-height: 1.55; margin: 0 0 26px; }
.entrar-caixa .erro { text-align: left; margin-bottom: 18px; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; min-height: 52px; padding: 14px 18px;
  border: 1.5px solid #dadce0; border-radius: var(--raio); background: #fff;
  color: #3c4043; font: 600 1rem/1 Inter, sans-serif; text-decoration: none;
  transition: background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn-google:hover { background: #f7f8f8; border-color: #c9ccd1; box-shadow: 0 2px 8px rgba(60,64,67,.15); }

.entrar-ou { position: relative; margin: 22px 0 18px; }
.entrar-ou::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--linha-tinta);
}
.entrar-ou span {
  position: relative; background: #fff; padding: 0 14px;
  color: var(--tinta-suave); font-size: .84rem; letter-spacing: .04em;
}

.entrar-abas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--marfim-2); border-radius: 999px; padding: 4px; margin-bottom: 22px;
}
.entrar-abas .aba {
  border: 0; background: transparent; border-radius: 999px; cursor: pointer;
  padding: 11px 8px; font: 600 .92rem Inter, sans-serif; color: var(--tinta-suave);
  transition: background .16s ease, color .16s ease;
}
.entrar-abas .aba.sel { background: #fff; color: var(--vinho); box-shadow: 0 2px 8px rgba(13, 27, 42,.10); }

.entrar-caixa .campo { text-align: left; margin-bottom: 16px; }
.entrar-caixa label { display: block; margin: 0 0 6px; font-size: .9rem; font-weight: 600; color: var(--tinta); }
.entrar-caixa input { width: 100%; margin: 0; }
.entrar-caixa .dica { margin: 6px 0 0; font-size: .84rem; }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 92px; }
.campo-senha .olho {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer;
  color: var(--vinho); font: 600 .86rem Inter, sans-serif; padding: 8px 10px; border-radius: 8px;
}
.campo-senha .olho:hover { background: var(--marfim-2); }
.entrar-caixa .btn.largo { margin-top: 6px; }
.entrar-pe { margin: 20px 0 0; font-size: .86rem; color: var(--tinta-suave); line-height: 1.5; }
.entrar-pe a { color: var(--vinho); }

/* campo com foco em vinho, e não em contorno cru do navegador */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--vinho); box-shadow: 0 0 0 3px rgba(13, 27, 42, .12); outline: none; outline-offset: 0;
}
.entrar-caixa input { min-height: 52px; }

/* ================= painel das histórias longas (menu lateral) =================
   Homenagem de data é um dia. História de vida é um lugar que a família visita por anos,
   e por isso ela ganhou seções em vez de uma página só. */
.painel-historia { padding-top: 28px; }
.ph-grade { display: grid; gap: 26px; align-items: start; }
@media (min-width: 900px) { .ph-grade { grid-template-columns: 246px 1fr; } }

.ph-menu {
  background: #fff; border: 1px solid var(--linha-tinta); border-radius: var(--raio-g);
  padding: 18px 14px; box-shadow: var(--sombra); position: sticky; top: 92px;
}
.ph-quem { padding: 4px 10px 14px; border-bottom: 1px solid var(--linha-tinta); margin-bottom: 10px; }
.ph-rotulo { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--vinho); margin: 0 0 4px; font-weight: 600; }
.ph-nome { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; color: var(--tinta); margin: 0; line-height: 1.2; }
.ph-item {
  display: block; padding: 11px 12px; border-radius: 10px; text-decoration: none;
  color: var(--tinta); font-size: .96rem; transition: background .15s ease, color .15s ease;
}
.ph-item:hover { background: var(--marfim-2); }
.ph-item.sel { background: var(--vinho); color: #faf8f5; font-weight: 600; }
.ph-item.ph-fora { margin-top: 10px; border-top: 1px solid var(--linha-tinta); padding-top: 14px; color: var(--tinta-suave); font-size: .9rem; }

.ph-corpo h1 { font-size: clamp(1.7rem, 4.4vw, 2.4rem); margin-top: 0; }
.ph-numero { font-family: 'Playfair Display', Georgia, serif; font-size: 2.6rem; line-height: 1; color: var(--vinho); margin: 0 0 6px; }
.ph-barra { height: 10px; border-radius: 999px; background: var(--marfim-2); overflow: hidden; }
.ph-barra span { display: block; height: 100%; background: var(--vinho); border-radius: 999px; transition: width .4s ease; }

.ph-lista { display: grid; gap: 10px; }
.ph-pergunta {
  display: flex; gap: 12px; align-items: flex-start; text-decoration: none;
  background: #fff; border: 1px solid var(--linha-tinta); border-radius: 12px;
  padding: 15px 16px; color: var(--tinta); line-height: 1.45;
  transition: border-color .15s ease, transform .15s ease;
}
.ph-pergunta:hover { border-color: var(--vinho); transform: translateX(2px); }
.ph-pergunta.feita { background: var(--marfim-2); color: var(--tinta-suave); }
.ph-marca {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  border: 1.5px solid var(--linha-tinta); display: grid; place-items: center;
  font-size: .8rem; color: #faf8f5;
}
.ph-pergunta.feita .ph-marca { background: var(--memoria); border-color: var(--memoria); }

.ph-tempo { display: flex; gap: 0; overflow-x: auto; padding: 10px 2px 16px; }
.ph-ano { flex: 0 0 auto; min-width: 118px; text-align: center; position: relative; padding-top: 22px; }
.ph-ano::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: var(--linha-ouro); }
.ph-ano:first-child::before { left: 50%; }
.ph-ano:last-child::before { right: 50%; }
.ph-ponto { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--vinho); border: 3px solid var(--marfim); }
.ph-ano-num { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; color: var(--vinho); margin: 0; }

.ph-acervo { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ph-item-acervo {
  margin: 0; background: #fff; border: 1px solid var(--linha-tinta); border-radius: 12px;
  overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column;
}
.ph-item-acervo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ph-doc { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--marfim-2); color: var(--vinho); font-weight: 600; text-decoration: none; }
.ph-item-acervo figcaption { padding: 12px 14px 6px; font-size: .9rem; color: var(--tinta-suave); flex: 1; }
.ph-item-acervo form { padding: 0 8px 8px; }

/* o campo de arquivo saía cru do navegador: agora tem a cara da casa em todo o site */
input[type=file] {
  width: 100%; padding: 12px 14px; border: 1.5px dashed var(--linha-ouro);
  border-radius: var(--raio); background: var(--marfim); color: var(--tinta-suave);
  font: 400 .95rem/1.4 Inter, sans-serif; cursor: pointer;
}
input[type=file]:hover { border-color: var(--vinho); background: #fff; }
input[type=file]::file-selector-button {
  border: 0; border-radius: 8px; background: var(--vinho); color: #faf8f5;
  font: 600 .9rem Inter, sans-serif; padding: 10px 16px; margin-right: 14px; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: #1e3a52; }

/* ---- painel da história: o que falta em destaque, o que já existe com valor ---- */
.ph-titulo-secao {
  font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vinho); margin: 34px 0 14px; display: flex; align-items: center; gap: 12px;
  font-family: Inter, sans-serif; font-weight: 700;
}
.ph-titulo-secao::after { content: ""; flex: 1; height: 1px; background: var(--linha-ouro); }
.ph-selo-conta {
  background: var(--vinho); color: #faf8f5; border-radius: 999px;
  padding: 3px 11px; font-size: .82rem; letter-spacing: 0;
}
.ph-pergunta { align-items: center; }
.ph-texto-pergunta { flex: 1; font-size: 1.02rem; }
.ph-ir {
  flex: 0 0 auto; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vinho); opacity: 0; transition: opacity .15s ease;
}
.ph-pergunta:hover .ph-ir { opacity: 1; }

.ph-guardadas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ph-guardada {
  background: linear-gradient(180deg, #fff 0%, #fefdfb 100%);
  border: 1px solid var(--linha-ouro); border-radius: 14px; padding: 20px 20px 16px;
  box-shadow: 0 10px 26px rgba(13, 27, 42, .07);
  position: relative; overflow: hidden;
}
.ph-guardada::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--vinho); opacity: .5;
}
.ph-g-pergunta { font-size: .88rem; color: var(--tinta-suave); margin: 0 0 10px; line-height: 1.4; }
.ph-g-marca {
  display: inline-block; margin-left: 6px; background: var(--marfim-2); color: var(--vinho);
  border-radius: 999px; padding: 2px 9px; font-size: .72rem; font-weight: 700;
}
.ph-g-resposta {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.14rem; line-height: 1.5;
  color: var(--tinta); margin: 0 0 14px; quotes: '"' '"';
}
.ph-g-resposta::before { content: open-quote; color: var(--linha-ouro); font-size: 1.5em; line-height: 0; vertical-align: -.35em; margin-right: 2px; }
.ph-g-pe { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ph-g-pe span {
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--tinta-suave); background: var(--marfim-2); border-radius: 999px; padding: 4px 10px;
}
.ph-g-pe .ph-g-ano { background: var(--vinho); color: #faf8f5; }

/* linha do tempo clicável dentro da homenagem: com muitos anos, rolar procurando é sofrimento */
.linha-anos {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 16px;
  margin-bottom: 10px; scrollbar-width: thin;
}
.la-ano {
  flex: 0 0 auto; border: 1.5px solid var(--linha-ouro); background: #fff;
  color: var(--vinho); border-radius: 999px; padding: 9px 16px; cursor: pointer;
  font: 600 .95rem Inter, sans-serif; font-variant-numeric: tabular-nums;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.la-ano:hover { transform: translateY(-1px); border-color: var(--vinho); }
.la-ano.sel { background: var(--vinho); color: #faf8f5; border-color: var(--vinho); }
.ano-marco { scroll-margin-top: 90px; }

/* ================= O LIVRO QUE VIRA A PÁGINA =================
   Um ano por página: à esquerda a foto daquele ano, à direita as respostas.
   A folha gira de verdade, com sombra por baixo, em vez de trocar de conteúdo no corte seco. */
.livro-palco { margin: 10px auto 0; max-width: 940px; }
.livro-capa-info { text-align: center; margin-bottom: 14px; }
.lv-titulo { font-family: 'Playfair Display', Georgia, serif; font-size: 1.8rem; color: var(--vinho); margin: 0; }
.lv-sub { color: var(--tinta-suave); font-size: .92rem; margin: 2px 0 0; font-style: italic; }

.livro {
  position: relative; perspective: 2200px;
  background: linear-gradient(90deg, #e6d9c6 0%, #f4f1ed 6%, #ffffff 12%, #ffffff 88%, #f4f1ed 94%, #e6d9c6 100%);
  border-radius: 10px; box-shadow: 0 26px 60px rgba(13, 27, 42, .22), 0 2px 0 #e6d9c6;
  padding: 6px; min-height: 440px;
}
.livro::before {   /* a lombada, no meio */
  content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 22px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(13, 27, 42,0) 0%, rgba(13, 27, 42,.13) 45%, rgba(13, 27, 42,.13) 55%, rgba(13, 27, 42,0) 100%);
  pointer-events: none; z-index: 3;
}
.lv-pagina, .lv-virando {
  display: grid; gap: 0; grid-template-columns: 1fr; background: #ffffff; border-radius: 8px; min-height: 428px;
}
@media (min-width: 760px) { .lv-pagina, .lv-virando { grid-template-columns: 1fr 1fr; } }
.lv-virando {
  position: absolute; inset: 6px; transform-origin: left center; backface-visibility: hidden;
  box-shadow: 0 14px 34px rgba(13, 27, 42, .28); z-index: 4;
}
.lv-virando.vai { animation: lvVai .7s cubic-bezier(.4, .05, .25, 1) forwards; }
.lv-virando.volta { animation: lvVolta .7s cubic-bezier(.4, .05, .25, 1) forwards; }
@keyframes lvVai { from { transform: rotateY(0deg); opacity: 1 } to { transform: rotateY(-168deg); opacity: .18 } }
@keyframes lvVolta { from { transform: rotateY(-168deg); opacity: .18 } to { transform: rotateY(0deg); opacity: 1 } }

.lv-lado { padding: 30px 30px 26px; }
.lv-esq { border-right: 1px solid rgba(13, 27, 42, .08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.lv-ano {
  font-family: 'Playfair Display', Georgia, serif; font-size: 3.4rem; line-height: 1;
  color: var(--vinho); margin: 0; letter-spacing: .02em;
}
.lv-polaroid { background: #fff; padding: 12px 12px 14px; box-shadow: 0 12px 30px rgba(13, 27, 42,.18); transform: rotate(-2deg); max-width: 260px; }
.lv-polaroid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.lv-polaroid span { display: block; margin-top: 10px; text-align: center; font-family: 'Playfair Display', Georgia, serif; color: var(--tinta-suave); font-size: .95rem; }
.lv-semfoto { text-align: center; color: var(--tinta-suave); font-size: .95rem; }
.lv-semfoto span { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 3rem; color: var(--linha-ouro); line-height: 1; }

.lv-dir { overflow-y: auto; max-height: 480px; }
.lv-bloco { padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px dashed rgba(13, 27, 42, .12); }
.lv-bloco:last-child { border-bottom: 0; margin-bottom: 0; }
.lv-pergunta { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vinho); font-weight: 700; margin: 0 0 8px; }
.lv-resposta { font-family: 'Playfair Display', Georgia, serif; font-size: 1.3rem; line-height: 1.55; color: var(--tinta); margin: 0 0 12px; }
.lv-dir audio { width: 100%; }

.lv-controles { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.lv-conta { color: var(--tinta-suave); font-size: .92rem; font-variant-numeric: tabular-nums; }
.lv-controles .btn:disabled { opacity: .4; }

/* ---- as MEMÓRIAS têm tom próprio (pedido dela): separa a história de vida das homenagens
       de data. Era OLIVA quando a marca era vinho; na marca 3.0 a marca inteira é verde e
       oliva ao lado de verde floresta virava a mesma coisa. Agora o tom das Memórias é o
       DOURADO da marca, que é o que combina com legado. Nada de marrom, que ela não quer. ---- */
:root { --memoria: #825e2b; --memoria-forte: #c78d44; }
.ph-menu { border-color: rgba(156, 108, 46, .26); }
.ph-rotulo { color: var(--memoria); }
.ph-item.sel { background: var(--memoria); color: #faf8f5; }
.ph-item:hover { background: rgba(156, 108, 46, .10); }
.ph-quem { border-bottom-color: rgba(156, 108, 46, .22); }
.ph-item.ph-fora { border-top-color: rgba(156, 108, 46, .22); }
.ph-numero, .ph-ano-num, .ph-titulo-secao { color: var(--memoria); }
.ph-barra span { background: var(--memoria-forte); }
.ph-ponto { background: var(--memoria); }
.ph-selo-conta { background: var(--memoria); }
.ph-guardada::before { background: var(--memoria-forte); }
.ph-g-pe .ph-g-ano { background: var(--memoria); }
.ph-pergunta:hover { border-color: var(--memoria); }
.ph-ir { color: var(--memoria); }
.ph-guardada { border-color: rgba(156, 108, 46, .28); box-shadow: 0 10px 26px rgba(156, 108, 46, .09); }
.ph-g-marca { color: var(--memoria); }
.ph-doc { color: var(--memoria); }
.painel-historia .btn { background: var(--memoria); box-shadow: 0 10px 24px rgba(156, 108, 46, .24); }
.painel-historia .btn:hover { background: #5e6f80; }
.painel-historia .btn.contorno { background: transparent; color: var(--tinta); }
.painel-historia .btn.contorno:hover { border-color: var(--oliva); color: var(--oliva); }
.painel-historia input:focus-visible, .painel-historia textarea:focus-visible {
  border-color: var(--memoria); box-shadow: 0 0 0 3px rgba(156, 108, 46, .14);
}
.painel-historia input[type=file]::file-selector-button { background: var(--oliva); }
.painel-historia .obrig { background: transparent; color: var(--oliva); }

/* o primeiro passo da história longa: escolher as perguntas que valem anos */
.ph-primeiro-passo { border: 2px solid rgba(156, 108, 46, .4); background: linear-gradient(180deg, #fff 0%, #faf8f5 100%); }
.ph-primeiro-passo .checkbox { margin: 10px 0; }
.faixa-ano {
  display: inline-block; background: var(--marfim-2); border-radius: 999px;
  padding: 7px 16px; margin: 4px 0 2px; font-size: .95rem; color: var(--tinta-suave);
}
.faixa-ano strong { color: var(--vinho); }

/* ================= revisão medida de 25/07/2026 =================
   Tudo neste bloco saiu de MEDIÇÃO no site no ar, não de opinião. Ele fica no fim de propósito:
   o arquivo tem três :root e várias correções datadas, e aqui quem vem por último ganha.

   1. ALGARISMOS. A Playfair entrega figuras de TEXTO (oldstyle) por padrão. Medido a 30px: o
      "0" nasce na altura do x (16px, igual ao "x") em vez da altura da maiúscula (22px), e o
      "4" e o "9" descem 5px abaixo da linha. Em prosa isso é elegante. Num PREÇO é defeito:
      "R$ 0" lê como "R$ o", e as colunas de plano não alinham, porque na mesma fonte "0000"
      ocupa 73px e "1111" ocupa 45px. Preço é dado, e dado se lê alinhado. */
body { font-variant-numeric: lining-nums; }
.preco-plano, .preco-guia, .plano-preco { font-variant-numeric: lining-nums tabular-nums; }

/* 2. O SUBLINHADO DA FRASE PRINCIPAL estava CORTANDO as letras. O traço orgânico ficava a
      .12em da base, e no itálico da Playfair o "q" e o "p" descem mais que isso: na home, o
      "o que realmente importa" aparecia riscado em vez de sublinhado, bem na frase que carrega
      a página inteira. O traço desce um pouco e para de encostar nas hastes. O verde continua,
      que é o jeito da cor da marca entrar como acento sem pintar o texto todo. */
em.destaque { padding-bottom: .3em; background-size: 100% .3em; }

/* 3. O BOTÃO PRINCIPAL CAÍA FORA DA PRIMEIRA TELA nos aparelhos mais comuns do público:
      medido, ficava 36px abaixo da dobra no 360x640 (Moto G, Galaxy A) e 19px abaixo no
      iPhone SE. Em celular grande já aparecia, então o ajuste só vale para tela baixa: quem
      chega de anúncio no aparelho popular não deveria precisar rolar para achar a ação.
      A foto continua mandando na primeira tela, só devolve os pixels que faltavam. */
@media (max-width: 860px) and (max-height: 720px) {
  .hero-filme .hf-filme { aspect-ratio: 16 / 9; }
  .hero-filme .hf-texto { padding-top: 18px; }
  .hero-filme h1 { margin-bottom: 12px; }
  .hero-filme .lead { font-size: 1rem; }
  .assinatura-marca { margin-top: 16px; padding-top: 12px; }
}

/* 4. O FILME DO TOPO PRECISA DE UMA SAÍDA. O navegador só toca vídeo sozinho quando quer:
      em aparelho no modo economia, com pouca bateria ou na primeira visita ao domínio, o
      autoplay é recusado e sobra o pôster parado. Como a primeira tela inteira aposta nesse
      filme, ficar parado sem dizer nada é perder o argumento mais forte da página. Se o filme
      não começar sozinho, aparece um botão discreto para a pessoa assistir quando quiser. */
.hf-play {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(253, 243, 234, .92); color: var(--vinho);
  box-shadow: 0 10px 30px rgba(7, 15, 24, .34);
  transition: transform .18s ease, background .18s ease;
}
.hf-play svg { width: 30px; height: 30px; margin-left: 4px; }
.hf-play:hover { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.hf-play:focus-visible { outline: 3px solid var(--vinho); outline-offset: 3px; }
@media (max-width: 860px) { .hf-play { width: 62px; height: 62px; } .hf-play svg { width: 25px; height: 25px; } }

/* ================= a vitrine de símbolos (25/07/2026) =================
   Ela não é uma grade de cartões, de propósito: cartão com ícone dentro é o desenho que todo
   site faz, e o símbolo é justamente o que aqui é diferente. Então os símbolos ficam APOIADOS
   numa prateleira, como objeto de estante de família: o traço fica sobre uma linha fina e o
   nome embaixo, como etiqueta de coisa guardada. */
/* A coleção precisa caber num OLHAR: são nove peças, e o valor está em ver que existe uma para
   cada momento. Em coluna única no celular isso virava 3.500px de rolagem e ninguém chegava ao
   fim. Duas colunas no celular, três ou mais no computador: a pessoa varre a coleção inteira
   sem rolar, e quem quiser ver de perto tem o link para /homenagens#simbolos embaixo. */
.vitrine {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: grid; gap: 22px 16px;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}
.vit-item {
  padding: 0 0 16px;
  border-bottom: 1px solid var(--linha-ouro);   /* a prateleira */
  text-align: left;
}
/* A MINIATURA DO SÍMBOLO. Ela é a peça que vende, então ocupa o topo do item inteiro em vez
   de um selo redondo de 62px: a pessoa precisa enxergar os rostos dentro do desenho. */
.vit-foto {
  display: block; width: 100%; height: auto; aspect-ratio: 620 / 589;
  object-fit: cover; border-radius: var(--raio);
  background: var(--pessego-claro);
  border: 1px solid var(--linha-ouro);
  margin-bottom: 10px;
}
.vit-para {
  margin: 0 0 2px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--ouro-escuro); line-height: 1.3;
}
.vit-nome { margin: 0 0 5px; font-size: 1.02rem; line-height: 1.2; }
.vit-frase { margin: 0; color: var(--tinta-suave); line-height: 1.45; font-size: .88rem; }
/* No computador sobra largura, então a peça pode respirar mais que no celular */
/* ⚠️ TRÊS COLUNAS NO COMPUTADOR, E É NÚMERO ESCOLHIDO, NÃO `auto-fit` (pedido dela, 27/07:
   "#caminhos e #simbolos são duas grades coladas"). O `auto-fit` dava QUATRO, e daí vinham
   três problemas de uma vez:
   1. São NOVE símbolos. Em quatro colunas a conta é 4+4+1, e a Pulseira ficava sozinha na
      última fileira, com três buracos do lado e o filete da prateleira virando um toco solto.
      Parecia que a coleção tinha acabado o estoque. Em três a conta fecha: 3+3+3.
   2. A seção de cima também é uma grade de QUATRO. Duas grades de quatro, uma debaixo da
      outra, rimam, e é essa rima que faz a página parecer catálogo repetido. Três não rima.
   3. A miniatura ia de 264px para 358px. Ela é a peça que VENDE, e o argumento da seção é
      enxergar os rostos da família dentro do desenho: em 264px não dá para ver rosto nenhum.
   ⚠️ Se um dia a coleção deixar de ter nove peças, esta conta muda. O teste do test.php trava
   o número justamente por isso. */
@media (min-width: 861px) {
  .vitrine { gap: 30px 22px; grid-template-columns: repeat(3, 1fr); }
  /* ⚠️ COM A CARTA A COLEÇÃO VIROU 10 (04/08/2026), e 10 em três colunas é 3+3+3+1: a última
     peça ficava sozinha no canto esquerdo, com dois buracos do lado. Em vez de mexer no número
     de colunas (a grade de três é o que rima com a seção de cima), a peça órfã vai para o MEIO.
     A regra pega exatamente o caso de sobrar UMA: último filho que também é o 1º da fileira. */
  .vitrine > :last-child:nth-child(3n + 1) { grid-column: 2; }
  .vit-nome { font-size: 1.14rem; }
  .vit-frase { font-size: .92rem; }
}

/* ================= o lugar de contar história (25/07/2026) =================
   Pedido dela para o lançamento. O convite é para CONTAR, não para "avaliar": quem chega aqui
   ainda não comprou nada, e pedir nota a quem não comprou é pedir o que a pessoa não tem. */
.recado-casa {
  background: linear-gradient(180deg, var(--pessego-claro) 0%, var(--marfim) 100%);
  border-top: 1px solid var(--linha-ouro);
}
.recado-casa .interno { max-width: 760px; }
.rc-caixa {
  background: #fff; border: 1px solid var(--linha-tinta); border-radius: var(--raio-g);
  padding: 26px 24px; box-shadow: var(--sombra); margin-top: 22px;
}
.rc-caixa textarea {
  width: 100%; min-height: 116px; resize: vertical;
  font-family: inherit; font-size: 1rem; line-height: 1.55; color: var(--tinta);
  border: 1px solid var(--linha-tinta); border-radius: var(--raio); padding: 12px 14px;
  background: var(--marfim);
}
.rc-caixa textarea:focus-visible { outline: 2px solid var(--vinho); outline-offset: 1px; }
.rc-linha { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
.rc-linha input[type=text] {
  flex: 1 1 200px; min-height: 46px;
  font-family: inherit; font-size: 1rem; color: var(--tinta);
  border: 1px solid var(--linha-tinta); border-radius: var(--raio); padding: 10px 14px;
  background: var(--marfim);
}
.rc-linha .btn { min-height: 46px; }

/* ================= LINK DENTRO DE TEXTO (25/07/2026) =================
   O site não tinha estilo nenhum para link inline, então todo link no meio de um parágrafo saía
   em AZUL PADRÃO DE NAVEGADOR (medido: rgb(0,0,238)) e sublinhado grosso. Num site inteiro em
   verde, creme e terracota, esse azul é a única coisa fora da marca na tela, e ele aparece
   justamente nos lugares que levam a pessoa adiante.

   O seletor pega só link SEM classe dentro das faixas de conteúdo: botão, chip, cartão e menu
   já têm o próprio visual, e o rodapé fica de fora de propósito (tem a cor apagada dele). */
.faixa p a:not([class]), .faixa li a:not([class]),
.destaque-data p a:not([class]), .hero-filme p a:not([class]) {
  color: var(--pessego-escuro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(168, 90, 48, .45);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.faixa p a:not([class]):hover, .faixa li a:not([class]):hover,
.destaque-data p a:not([class]):hover, .hero-filme p a:not([class]):hover {
  color: var(--vinho);
  text-decoration-color: var(--vinho);
}
.faixa p a:not([class]):focus-visible, .faixa li a:not([class]):focus-visible {
  outline: 2px solid var(--vinho); outline-offset: 2px; border-radius: 2px;
}
/* na faixa oliva o fundo é escuro: terracota some ali, então o link vira creme */
.faixa.oliva p a:not([class]), .faixa.oliva li a:not([class]) { color: #ebe5dd; text-decoration-color: rgba(243, 230, 207, .5); }
.faixa.oliva p a:not([class]):hover { color: #fff; text-decoration-color: #fff; }

/* ================= A CAPA DA HOMENAGEM EM VERDE CLARO (25/07/2026) =================
   Decisão dela, e o motivo é comercial: a capa era um degradê de pêssego, e pêssego lê como
   presente de mulher. Como o Dia dos Pais é a maior venda da temporada, homem abrindo essa tela
   precisa sentir que aquilo é para ele, não um cartão cor-de-rosa que chegou por engano.

   O verde claro resolve sem inventar cor nova: é o próprio verde floresta da marca, clareado
   até virar campo. Fica calmo, não tem gênero, e faz o verde escuro do nome saltar mais do que
   saltava no pêssego. O fio embaixo do nome também sai do vinho antigo e vira verde.
   Este bloco vem depois do original de propósito: aqui quem vem por último ganha. */
/* ================= A CAPA VOLTA PARA O CREME DA MARCA (04/08/2026, decisão dela) =================
   ⚠️ LEIA O BLOCO DE 25/07 AQUI EM CIMA ANTES DE ACHAR QUE ISTO O DESFAZ. Lá ela tirou o PÊSSEGO
   porque "pêssego lê como presente de mulher" e o Dia dos Pais é a maior venda da temporada. Isto
   NÃO reabre aquilo: pêssego era #f5e9dd, que puxa para o rosado; creme é #fcfbf9, que é neutro e
   é o fundo do site inteiro. O que estava no ar não era nem um nem outro: era o verde claro de
   25/07 depois de a marca 4.0 repintar o verde de azul, ou seja, uma cor que ninguém escolheu.
   ⭐ E agora tem um motivo novo: a abertura em vídeo termina em creme. Cair num azul acinzentado
   logo depois é um corte de cor no meio da emoção. */
.capa {
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--marfim, #fcfbf9) 42%, var(--marfim-2, #f7f4ef) 100%);
}
.capa-luz {
  background: radial-gradient(circle, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 62%);
}
.capa-fio { background: rgba(13, 27, 42, .38); }
.capa-selo { color: var(--verde-medio); opacity: 1; }
.capa-sub { color: #333c46; }
.capa-dica { color: #5b646e; }
/* o botão de abrir era o gradiente terracota, que sobre verde fica de outra família.
   Sobre o campo verde ele vira o verde escuro da marca, com a letra creme. */
/* ⚠️ CORAL COM LETRA AZUL-MARINHO, E NUNCA COM LETRA BRANCA (04/08/2026). Medido: branco sobre
   coral dá 3,26:1, abaixo do mínimo para texto; azul-marinho sobre coral dá 5,2:1 e passa. Não é
   par inventado: é exatamente o do botão "Mandar o link no WhatsApp" da Central da Festa, que eu
   medi hoje no pixel em 8,87:1. Sobre o creme, o coral é o único acento que a marca deixa usar
   como FUNDO, e é o que faz o botão saltar sem gritar. */
.capa .btn {
  background: linear-gradient(150deg, #ec8163 0%, #de5d35 100%);
  color: #0d1b2a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 26px rgba(222, 93, 53, .28);
}
.capa .btn:hover { background: linear-gradient(150deg, #f08f74 0%, #e56b45 100%); color: #0d1b2a; }

/* ================= A CAPA VIRA ESTOJO (06/08/2026, pedido dela AO VIVO) =================
   Palavras dela: "misturar azul marinho, coral e creme, com aspecto superpremium, sem pesar em
   nada, quero uma apresentação luxuosa" e "algo que transmita a sensação de valorizar a pessoa".
   ⚠️ ISTO NÃO DESFAZ 04/08 ("a abertura em vídeo termina em creme; cair num azul logo depois é
   corte de cor"): o CAMPO continua creme, exatamente como o vídeo entrega. O que muda é que o
   NOME agora mora num estojo azul-marinho com fio de ouro, como joia em veludo: o creme é a
   sala, o marinho é o estojo, o coral é o botão. As três cores dela, e nenhuma pesando.
   Contrastes na régua da casa: creme sobre marinho 17:1 · selo ouro-claro 8,7:1 · sub 12:1. */
.capa-dentro {
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(199, 141, 68, .13) 0%, rgba(199, 141, 68, 0) 46%),
    linear-gradient(175deg, #12253a 0%, var(--navy-800, #0a1520) 78%);
  border-radius: 22px;
  padding: clamp(38px, 7vw, 58px) clamp(24px, 5vw, 48px) clamp(32px, 6vw, 46px);
  margin: 18px;
  max-width: 580px;
  box-shadow:
    inset 0 0 0 1px rgba(221, 183, 126, .38),
    inset 0 0 0 5px rgba(221, 183, 126, .07),
    0 30px 70px rgba(13, 27, 42, .30);
  outline: 1px solid rgba(199, 141, 68, .22);
  outline-offset: 7px;
}
.capa .capa-selo { color: var(--ouro-claro); opacity: 1; }
.capa .capa-nome { color: #fdfcfa; }
.capa .capa-fio {
  background: linear-gradient(90deg, rgba(221, 183, 126, 0), rgba(221, 183, 126, .85), rgba(221, 183, 126, 0));
  height: 1px;
}
.capa .capa-sub { color: #e6ddd0; }
.capa .capa-dica { color: #9fb0c0; }
/* as vozes contadas: é o tamanho do presente dito antes do primeiro toque, e é o que faz a
   pessoa sentir o próprio valor antes de ouvir uma palavra */
.capa-vozes {
  font-family: "Playfair Display", Georgia, serif; font-style: italic;
  font-size: 1.12rem; color: var(--ouro-claro); margin: 0 0 26px;
  animation: sobe 1s ease .65s both;
}
@media (prefers-reduced-motion: reduce) { .capa-vozes { animation: none !important; } }

/* nada aqui pode herdar o azul de link do navegador: os links de pílula e de cartão têm o
   texto colorido por dentro, mas o elemento em volta ficava azul e um dia isso escapa */
.oc-pilula, .cg-foto { color: var(--vinho); }

/* ================= FOTO INTEIRA, SEM CORTE (25/07/2026) =================
   As duas fotos de família da home estavam dentro de `.foto.larga`, que é uma caixa fixa de
   16/9. Como as fotos são 5/4, o `object-fit: cover` comia 29% e 30% da altura, e o que fica
   em cima e embaixo numa foto de família é justamente cabeça e mão. Medido no navegador.

   A correção não é trocar 16/9 por outra razão fixa: qualquer razão fixa volta a cortar assim
   que ela trocar a foto por uma de proporção diferente, e ela troca foto o tempo todo. Aqui a
   caixa não manda mais na altura: a foto entra inteira, com a proporção que ela tiver, e a
   moldura branca acompanha. É impossível cortar rosto nesta classe. */
.foto.inteira {
  aspect-ratio: auto;
  height: auto;
}
.foto.inteira img {
  height: auto;
  object-fit: contain;
}

/* ================= PÁGINA DAS EXPERIÊNCIAS (27/07) =================
   Cores tiradas PIXEL A PIXEL dos mockups que ela salvou (inspiracaoexperiencias2.png e
   inspiracaoarvore2.png), com PHP GD, não a olho.

   A novidade é a TERRACOTA: no mockup ela é a cor de ação (botão e preço), onde o site hoje usa
   o verde da marca. O verde, o creme e o ouro já eram nossos e continuam iguais.

   ⚠️ Estes tokens são NOVOS e não substituem nada: o resto do site continua exatamente como
   estava. Se ela aprovar a terracota, a troca para o site inteiro é uma decisão à parte, feita
   de propósito e de uma vez, não de raspão por causa de uma página. */
:root {
  --terracota:        #e36a4c;   /* preenchimento do botão, medido no mockup */
  --terracota-forte:  #b4472c;   /* pressionado e foco */
  --terracota-clara:  #e87a5e;   /* topo do degradê dos botões grandes */
  --creme-exp:        #fcfbf9;   /* campo da página */
  --creme-exp-2:      #f5e9dd;   /* faixa de destaque */
  --ouro-exp:         #c78d44;   /* botão do rodapé no mockup */
}

.exp-topo { background: var(--creme-exp); }
.exp-h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; margin: 0 0 14px; }
.exp-h1 em { font-style: italic; color: var(--pessego-escuro); }
.exp-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.exp-filtro {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--linha-ouro, #e6d8c4); border-radius: 999px;
  padding: 10px 16px; font-size: .95rem; color: var(--verde); cursor: pointer;
}
.exp-filtro select { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.exp-filtro.exp-breve { opacity: .55; cursor: default; }
.exp-filtro.exp-breve small { color: var(--pessego-escuro); font-weight: 600; }

.exp-cat { margin-top: 46px; }
.exp-cat-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.exp-cat h2 { margin: 0 0 2px; font-size: 1.7rem; }
.exp-cat .exp-cat-sub { margin: 0; color: var(--suave, #4a5b6b); font-size: .98rem; }

/* 1 principal + 3 ao lado, como no mockup. Nove opções do mesmo tamanho paralisam quem chegou
   para comprar um presente; uma escolha óbvia com alternativas ao lado decide. */
.exp-destaque { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 1100px) { .exp-destaque { grid-template-columns: 1.2fr 1fr 1fr; } }
@media (max-width: 900px)  { .exp-destaque { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .exp-destaque { grid-template-columns: 1fr; } }
.exp-card {
  background: #fff; border: 1px solid var(--linha-ouro, #e9dbc7); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
}
/* ⚠️ TODA ARTE NA MESMA PROPORÇÃO. Sem isso cada peça entra com o formato do arquivo dela, os
   títulos param em alturas diferentes e a fileira inteira perde o prumo: é o que mais faz uma
   grade parecer montada por robô. `height:auto` é obrigatório junto do aspect-ratio, senão um
   width/height no <img> vira hint de CSS e ANULA a proporção (foi assim que a árvore virou um
   retângulo esticado no celular). */
.exp-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* a peça em destaque respira mais: arte mais alta, do tamanho da decisão que ela representa */
.exp-destaque .exp-card:first-child img { aspect-ratio: 4 / 5; }
.exp-card-corpo { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.exp-card h3 { margin: 0 0 6px; font-size: 1.25rem; }
.exp-card .exp-frase { margin: 0 0 14px; color: var(--suave, #4a5b6b); font-size: .95rem; flex: 1; }
.exp-preco { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--pessego-escuro);
             font-variant-numeric: lining-nums; margin: 0 0 12px; }
.exp-preco small { font-size: .85rem; color: var(--suave, #4a5b6b); display: block; font-family: inherit; }
.exp-selo {
  display: inline-block; background: var(--terracota); color: #fff; border-radius: 999px;
  padding: 5px 14px; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 10px; align-self: flex-start;
}
.btn.terracota { background: var(--terracota); border-color: var(--terracota); color: #fff; }
.btn.terracota:hover, .btn.terracota:focus { background: var(--terracota-forte); border-color: var(--terracota-forte); }

.exp-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 18px; }
@media (max-width: 900px) { .exp-trio { grid-template-columns: 1fr; } }
/* ⚠️ O TETO NÃO É ENFEITE, É O CONSERTO DE UM DEFEITO FEIO. Com `auto-fit`, uma categoria que
   tem UM cartão só vira UMA trilha do tamanho do contêiner: "Cada Canto Conta" saía com ~1.400px
   de largura e ~900px de altura, sozinho, no meio da página. Parecia site quebrado. O teto deixa
   o cartão solto do tamanho dos irmãos, e não atrapalha quando a fileira está cheia. */
.exp-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 14px; }
.exp-mini .exp-card { max-width: 300px; }
.exp-mini .exp-card h3 { font-size: 1.02rem; }
.exp-mini .exp-card .exp-frase { font-size: .86rem; }

.exp-confianca { background: var(--creme-exp-2); border-radius: 16px; padding: 26px 24px; margin-top: 48px; }
.exp-confianca-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; margin-top: 16px; }
.exp-confianca h4 { margin: 0 0 4px; font-size: .98rem; }
.exp-confianca p { margin: 0; font-size: .86rem; color: var(--suave, #4a5b6b); }

/* A FRASE SUSPENSA SOBRE O FILME DO HERO (27/07, pedido dela, tirado do mockup).
   O vídeo segue sendo o argumento da primeira tela; a camada só dá a ele uma legenda que fica.
   ⚠️ O véu escurece SÓ A BASE. Cobrir o filme inteiro apagaria o rosto de quem se emociona,
   que é justamente o que o vídeo existe para mostrar. */
/* ⚠️ O MOMENTO DE EXEMPLO VIROU CARTÃO, E ISSO RESOLVE OS DOIS TÍTULOS BRIGANDO (27/07).
   Ele era uma frase de 27px em Playfair BRANCO deitada sobre o vídeo, com um véu escuro na base
   inteira. Do lado de um H1 de 50px na mesma serifa, a primeira tela ficava com DOIS títulos
   disputando, e no mockup dela isso não acontece: lá o momento de exemplo é um cartãozinho
   branco de letra miúda encostado na borda da foto. Não era escolha de cor, era escolha de
   HIERARQUIA, e o cartão devolve a frase ao papel de legenda.

   Efeitos colaterais bons: o véu escuro na base sai (o cartão carrega o próprio contraste, e o
   filme volta a aparecer inteiro), e some o bug de o rosto de quem se emociona ficar sob a
   sombra. ⚠️ `z-index: 2` é obrigatório: o `.hf-filme::before` tem z-index 1 e no celular ele é
   um degradê que termina em creme, então SEM isso ele pintava por cima do cartão e lavava o
   texto justo na tela em que ela ia conferir. */
.hf-filme { position: relative; }
.hf-sobre {
  position: absolute; z-index: 2;
  right: clamp(16px, 2.4vw, 34px); bottom: clamp(18px, 3vw, 38px);
  width: min(310px, 62%);
  padding: 16px 18px 17px;
  background: rgba(255, 255, 255, .96);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(24, 18, 12, .26);
  pointer-events: none;
}
.hf-sobre-kicker {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 7px; font-family: Inter, system-ui, sans-serif; font-weight: 600;
  font-size: .66rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--pessego-escuro);
}
.hf-sobre-kicker svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.hf-sobre-frase {
  margin: 0; font-size: .92rem; line-height: 1.45; color: var(--tinta, #0d1b2a);
}
.hf-sobre-frase em { font-style: italic; color: var(--pessego-escuro); }
@media (max-width: 860px) {
  /* no celular o filme é uma faixa larga e baixa: o cartão encolhe e senta no canto,
     para não cobrir o rosto que é o motivo de o vídeo existir */
  .hf-sobre { width: min(280px, 76%); padding: 13px 15px 14px; }
  .hf-sobre-frase { font-size: .87rem; }
}
/* ⚠️ NÃO esconder o cartão aqui. 360 e 390px são as larguras de celular MAIS COMUNS, então
   `display:none` abaixo de 460 apagaria o momento de exemplo para a maioria das visitas, que é
   justamente onde ela ia conferir. Ele encolhe e encosta nas duas bordas, e continua lá. */
@media (max-width: 460px) {
  .hf-sobre { width: auto; left: 12px; right: 12px; bottom: 12px; padding: 11px 13px 12px; }
  .hf-sobre-frase { font-size: .84rem; line-height: 1.4; }
  .hf-sobre-kicker { font-size: .62rem; margin-bottom: 5px; }
}

/* ===== O BOTÃO DOS CAMINHOS (#caminhos) ===========================================
   O cartão inteiro sempre foi link, mas NADA nele parecia clicável: o preço ficava solto no
   rodapé e a pessoa lia o cartão como um quadro informativo. Preço sem botão é etiqueta de
   vitrine; preço COM botão é oferta. O mockup tem botão nos quatro, e faltava aqui.

   ⚠️ É <span>, não <a>: o cartão já é um <a>, e âncora dentro de âncora é HTML inválido, o
   navegador desmonta a marcação. Ele parece botão, e quem clica está clicando no cartão. */
.cam-botao {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; padding: 12px 18px;
  /* ⚠️ ERA `color:#fff` e dava 3,26:1 de contraste, reprovado na WCAG AA (mínimo 4,5) — medido
     em 31/07 na página no ar. Pior: contrariava a regra da própria marca, que diz letra AZUL
     sobre o coral, e o botão do hero logo acima já fazia certo. O mesmo coral tinha dois
     tratamentos na mesma tela. Com o azul-marinho dá 5,31:1. */
  background: var(--terracota); color: var(--tinta); border-radius: 999px;
  font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: .93rem;
  box-shadow: 0 8px 20px rgba(227, 106, 76, .22);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cam-botao svg { width: 17px; height: 17px; flex: none; transition: transform .18s ease; }
/* o preço mora DENTRO do botão do caminho (06/08/2026, pedido dela: "preço de destaque para
   todos no botão"). Linha própria, embaixo do rótulo: os quatro cartões da fileira têm preços
   de larguras diferentes ("a partir de..." na celebração) e inline um deles estouraria.
   🔴 CENTRADO: a primeira versão herdava text-align da esquerda e o valor ficava largado no
   canto, desalinhado do rótulo (ela viu na hora). */
.cam-botao { flex-wrap: wrap; }
.cam-botao .cam-preco {
  flex-basis: 100%; text-align: center; font-size: .9rem; font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums; margin-top: 2px; letter-spacing: .01em;
}
/* a seta anda quando o dedo/mouse encosta no CARTÃO, não no botão: é o cartão que é o alvo,
   e o movimento confirma para onde aquilo leva antes do clique */
.caminho:hover .cam-botao, .caminho:focus-visible .cam-botao {
  background: var(--terracota-forte); box-shadow: 0 12px 26px rgba(227, 106, 76, .3);
}
.caminho:hover .cam-botao svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .cam-botao, .cam-botao svg { transition: none; }
  .caminho:hover .cam-botao svg { transform: none; }
}
/* ⚠️ O BOTÃO É QUE ENCOSTA NO FUNDO, NÃO A NOTA. Com `margin-top:auto` na nota, os cartões de
   texto mais curto não desalinham a fileira: os quatro botões terminam na mesma altura. Botão
   desalinhado numa fileira de ofertas lê-se como erro, e é a última coisa antes do clique.
   (Era o `.exp-preco` que morava aqui; em 06/08 o preço desceu para DENTRO do botão, pedido
   dela, e a nota de contexto herdou o papel de âncora do alinhamento.) */
/* O NOME do produto no cartão (auditoria 07/08: "mural" tinha ZERO menções na home e nenhum
   produto era apresentado pelo nome; cartão só de verbo vende categoria, não produto). A linha
   fala os nomes que a casa já usa nas /para e no rodapé, em serifa e ouro, como as peças da
   Coleção. */
.caminho .cam-nome {
  font-family: "Playfair Display", Georgia, serif; font-size: .98rem; font-weight: 500;
  color: var(--ouro-escuro); margin: 0 0 8px; line-height: 1.35;
}
/* ---------- o acordeão da Carta (08/08/2026, pedido dela) ----------
   O #blocoResposta se muda de lugar com appendChild para debaixo do chip tocado. Dentro do
   flex dos .chips ele precisa ocupar a linha inteira, senão vira mais um chip espremido. */
.caps-carta #blocoResposta {
  flex: 1 1 100%; margin: 4px 0 12px; padding: 16px 14px;
  background: #fff; border: 1px solid var(--linha-ouro); border-radius: 14px;
  box-shadow: 0 10px 24px rgba(90, 70, 50, .08);
}
.caps-carta .chip.respondida { border-color: var(--ouro); background: #fdf9f2; }
/* O SELO DO QUE JÁ FOI GUARDADO (09/08/2026, achado dela na entrevista: "se mistura do lado
   da pergunta"). A regra era só da carta (.caps-carta) e nas outras telas o selo renderizava
   cru, no mesmo corpo da pergunta. Agora o estado tem voz própria em TODA tela: linha de
   baixo, menor e em cobre, pra pergunta continuar sendo a única coisa em tamanho de pergunta. */
.chip .chip-feito {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: var(--ouro-escuro); margin-top: 4px;
}
/* Os capítulos com SELO (08/08, pedido dela: "em destaque, pequeno ícone, senão nem parece
   que tá mudando de temas" e "ajustar a fonte, tamanho, tá muito xoxo"). */
.caps-carta .cap-bloco { border-top: 1px solid var(--linha-ouro); padding-top: 20px; margin-top: 14px; }
.caps-carta .cap-bloco:first-child { border-top: 0; margin-top: 0; }
.caps-carta .cap-nome {
  font-family: "Playfair Display", Georgia, serif; font-size: 1.32rem; font-weight: 600;
  color: var(--vinho); display: flex; align-items: center; gap: 10px; margin: 0 0 4px;
}
.cap-selo-ico {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 50%; background: #fdf6ea; border: 1px solid var(--linha-ouro);
  color: var(--ouro-escuro); margin-right: 2px; vertical-align: middle;
}
.cap-selo-ico svg { width: 19px; height: 19px; }
label .cap-selo-ico { width: 30px; height: 30px; margin-right: 8px; }
label .cap-selo-ico svg { width: 16px; height: 16px; }
/* As ABAS da resposta (só a carta as imprime) */
.resp-abas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.resp-aba {
  display: inline-flex; align-items: center; gap: 7px; padding: 11px 15px; min-height: 44px;
  border: 1.5px solid var(--linha-tinta); border-radius: 10px; background: #fff;
  font: 600 .92rem/1 Inter, sans-serif; color: var(--tinta); cursor: pointer; position: relative;
}
.resp-aba svg { width: 17px; height: 17px; color: var(--ouro-escuro); }
.resp-aba[aria-pressed="true"] { border-color: var(--ouro); background: #fdf9f2; }
.resp-aba.tem::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--ouro);
}
/* ---------- a vida que vimos em você, na leitura (08/08/2026, o fim do arco) ----------
   A seção compartilhada da carta: o ano em ouro, a foto grande na moldura, a história em
   serifa com o nome de quem contou. Uma foto por tela no celular, sem pressa. */
.bloco-vida { margin: 40px auto 0; max-width: 640px; }
.bv-titulo {
  font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; font-weight: 600;
  color: var(--vinho); display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0;
}
.bv-sub { text-align: center; font-size: .92rem; color: var(--tinta-suave); margin: 4px 0 10px; }
.bv-ano {
  font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; color: var(--ouro-escuro);
  letter-spacing: .08em; text-align: center; margin: 30px 0 6px;
  display: flex; align-items: center; gap: 14px;
}
.bv-ano::before, .bv-ano::after { content: ""; flex: 1; border-top: 1px solid var(--linha-ouro); }
.bv-momento {
  background: #fff; border: 1px solid rgba(13, 27, 42, .08); border-radius: 14px;
  padding: 12px; margin-top: 14px; box-shadow: 0 10px 26px rgba(90, 70, 50, .08);
}
.bv-foto { width: 100%; height: auto; display: block; border-radius: 10px; }
.bv-etiqueta {
  text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 600;
  color: var(--ouro-escuro); margin: 10px 0 0;
}
.bv-historia {
  font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 1.06rem;
  line-height: 1.55; color: var(--tinta); margin: 6px 0 0;
}
.bv-quem { font-size: .85rem; font-weight: 600; color: var(--tinta-suave); margin: 6px 0 0; }
/* a data em cascata: quando a pessoa contou o mês (e talvez o dia), a linha entra pequena
   embaixo da etiqueta; o passo grande da cronologia continua sendo o ANO (.bv-ano) */
.bv-data { font-size: .85rem; color: var(--ouro-escuro); margin: 2px 0 0; }
/* os três campos da data dita no gravar: dia · mês · ano, lado a lado */
.data-dita { display: flex; gap: 8px; }
.data-dita input { max-width: 108px; text-align: center; }
/* a última linha do fecho: devolve o símbolo */
.carta-fecho .cf-ultima {
  font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 1.12rem;
  color: var(--vinho); margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linha-ouro);
}

/* ---------- o quadro dos desenhos (08/08/2026, ideia dela) ----------
   Todos os desenhos da homenagem numa moldura só, como a parede de uma galeria: mata creme,
   fio de ouro, cada desenho em papel branco com sombra de moldura. */
.quadro-desenhos {
  margin: 34px auto 0; max-width: 720px; background: #fdf9f2;
  border: 1px solid var(--linha-ouro); border-radius: 16px; padding: 22px 18px;
  box-shadow: 0 14px 34px rgba(90, 70, 50, .10);
}
.qd-titulo {
  font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; font-weight: 600;
  color: var(--vinho); text-align: center; margin: 0;
}
.qd-sub { text-align: center; font-size: .9rem; color: var(--tinta-suave); margin: 4px 0 16px; }
.qd-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.qd-grade figure {
  margin: 0; background: #fff; border: 1px solid rgba(13, 27, 42, .08);
  border-radius: 8px; padding: 6px; box-shadow: 0 4px 12px rgba(13, 27, 42, .06);
}
.qd-grade img { width: 100%; height: auto; display: block; border-radius: 4px; }
.qd-grade figcaption { font-size: .74rem; color: var(--tinta-suave); text-align: center; margin-top: 4px; }

/* com as abas ligadas, cada bloco só aparece pela aba dele; vale para TODA tela desde 08/08
   ("um campo só pra eles, melhora a experiência"), e fora da carta a voz nasce aberta */
#blocoResposta.com-abas #abaVoz:not(.aberta), #blocoResposta.com-abas #areaVideo:not(.aberta),
#blocoResposta.com-abas #abaTexto:not(.aberta), #blocoResposta.com-abas #abaFoto:not(.aberta) { display: none; }
/* o MOMENTO se conta com o que já existe: sem voz, sem gravar na hora (só a carta liga isto).
   E o texto acompanha o botão: título e dica de GRAVAR somem junto com o gravador, senão a
   área fala de gravar sem ter botão nenhum (achado dela, 08/08 à noite). */
#blocoResposta.modo-momento .resp-aba[data-aba="abaVoz"] { display: none; }
#blocoResposta.modo-momento #btnVideo,
#blocoResposta.modo-momento .video-jeitos label[for="video"] { display: none; }
.video-tit-momento, .video-dica-momento { display: none; }
#blocoResposta.modo-momento .video-tit-normal,
#blocoResposta.modo-momento .video-dica-normal,
#blocoResposta.modo-momento #dicaVideo { display: none; }
#blocoResposta.modo-momento .video-tit-momento,
#blocoResposta.modo-momento .video-dica-momento { display: block; }
.caminho .cam-nota { margin: auto 0 0; font-size: .85rem; color: var(--tinta-suave); line-height: 1.45; }
.caminho .cam-botao { margin-top: 14px; }
.caminho { display: flex; flex-direction: column; }

/* ===== A FAIXA DE CONFIANÇA (.protegida) ==========================================
   Era cinco títulos e cinco parágrafos sem um ícone, todos no mesmo peso: parede de texto
   justo onde a pessoa decide se confia. Cinco promessas em texto puro leem-se como
   contrato; as mesmas cinco com ícone leem-se como garantia. */
.faixa.protegida { background: var(--creme-exp); border-top: 1px solid var(--linha-ouro); }
.prot-cabeca { max-width: 42em; margin: 0 auto 6px; }

/* ⚠️ TRÊS COLUNAS, NÃO `auto-fit`. Com auto-fit e minmax(190px), as seis promessas entravam
   todas na mesma linha num monitor largo, com ~200px cada, e aí "Privacidade de verdade" já
   quebrava em duas linhas e cada frase virava cinco. Três por linha dá largura de leitura de
   verdade, e seis itens fecham 3 e 3 sem sobrar cartão órfão. */
.prot-grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 34px;
}
@media (max-width: 900px) { .prot-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prot-grade { grid-template-columns: 1fr; } }
.prot-item {
  background: #fff; border: 1px solid var(--linha-ouro); border-radius: 16px;
  padding: 22px 20px 20px;
  box-shadow: 0 14px 34px rgba(13, 27, 42, .06);
}
/* o ícone mora num disco creme com anel de ouro: dá a ele o peso de selo, não de bullet */
.prot-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--creme-exp-2); box-shadow: inset 0 0 0 1px var(--linha-ouro);
  color: var(--verde); margin-bottom: 14px;
}
.prot-icone svg { width: 21px; height: 21px; }
/* h3 desde 31/07 (era h4 e pulava um nível na hierarquia); o h4 fica no seletor para o caso de
   algum trecho antigo ainda usar a tag velha */
.prot-item h3, .prot-item h4 { margin: 0 0 5px; font-size: 1rem; color: var(--verde); font-weight: 600; }
.prot-item p { margin: 0; font-size: .89rem; line-height: 1.5; color: var(--suave, #4a5b6b); }

/* a regra de prazo continua inteira, mas como NOTA: antes fechava a seção com sessenta
   palavras de letra miúda, e a página terminava em juridiquês em vez de terminar em confiança */
.prot-nota {
  margin: 26px auto 0; max-width: 62em;
  padding: 16px 20px 17px 22px;
  background: rgba(255, 255, 255, .7);
  border-left: 3px solid var(--ouro);
  border-radius: 0 12px 12px 0;
  font-size: .88rem; line-height: 1.6; color: var(--suave, #4a5b6b);
}
.prot-nota-selo {
  display: block; margin-bottom: 4px;
  font-family: Inter, system-ui, sans-serif; font-weight: 600;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ouro-escuro);
}
.prot-nota strong { color: var(--tinta, #0d1b2a); }
.faixa.protegida .acoes { margin-top: 22px; }
@media (max-width: 700px) {
  .prot-grade { gap: 12px; margin-top: 26px; }
  .prot-item { padding: 18px 16px 16px; }
  .prot-icone { width: 38px; height: 38px; margin-bottom: 11px; }
}

/* ===== AS CARTAS DE PERGUNTA (#o-porque) ==========================================
   Saíram de style inline para classe quando as duas seções viraram uma. São a PROVA da
   seção: mostram a pergunta de verdade que a pessoa vai receber, em vez de prometer que
   existem perguntas. Por isso ganham corpo de citação, não de legenda. */
.carta-pergunta { text-align: left; display: flex; align-items: center; }
.carta-pergunta p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.16rem; line-height: 1.35; margin: 0; color: var(--vinho);
  text-wrap: balance;
}
@media (max-width: 700px) { .carta-pergunta p { font-size: 1.06rem; } }

/* ===== O CONFRONTO COM O GRUPO DE WHATSAPP (#nao-e-grupo) =========================
   Antes eram dois cartões com seis marcadores cada. Duas listas soltas não comparam:
   os itens não se alinham, e o leitor tem que parear na cabeça. Agora cada linha é UMA
   fricção com os dois lados na mesma altura, e a comparação acontece sozinha.
   O realce da direita é uma COLUNA contínua (célula colada em célula, sem row-gap), não
   um fundo por caixinha: é isso que faz o quadro parecer um objeto só. */
.faixa.comparar {
  background: var(--creme-exp);
  border-top: 1px solid var(--linha-ouro);
  border-bottom: 1px solid var(--linha-ouro);
}
.comparar-cabeca { max-width: 44em; margin: 0 auto; }
.comparar-cabeca h2 { font-size: clamp(1.65rem, 2.7vw, 2.35rem); margin-bottom: 12px; }

.comparar-quadro {
  display: grid;
  grid-template-columns: minmax(112px, .58fr) 1fr 1.08fr;
  column-gap: clamp(16px, 2.4vw, 38px);
  row-gap: 0;                      /* ⚠️ zero: é o que cola o realce numa coluna só */
  align-items: start;
  margin: 42px auto 0;
  max-width: 1000px;
  background: #fff;
  border: 1px solid var(--linha-ouro);
  border-radius: 20px;
  padding: 12px clamp(18px, 3vw, 32px) 18px;
  box-shadow: 0 26px 60px rgba(13, 27, 42, .09);
}
/* a linha não é uma caixa: ela some e devolve as três células para a grade do pai,
   que é o que mantém as colunas alinhadas de ponta a ponta */
.comparar-linha { display: contents; }

.comparar-lado {
  margin: 0; padding: 14px 0 12px;
  font-family: Inter, system-ui, sans-serif; font-weight: 600;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
}
.comparar-lado.grupo  { grid-column: 2; color: var(--suave, #4a5b6b); }
.comparar-lado.envida {
  grid-column: 3; color: var(--pessego-escuro);
  display: flex; align-items: center; gap: 7px;
  padding-left: clamp(12px, 1.6vw, 20px); padding-right: clamp(12px, 1.6vw, 20px);
  background: linear-gradient(180deg, rgba(227, 106, 76, .07), rgba(227, 106, 76, .045));
  border-radius: 14px 14px 0 0;
}
.comparar-lado.envida svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

.comparar-tema, .comparar-antes, .comparar-depois {
  margin: 0; padding: 16px 0 15px;
  border-top: 1px solid rgba(199, 141, 68, .3);
  line-height: 1.48;
}
.comparar-tema {
  font-family: Inter, system-ui, sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ouro-escuro);
}
.comparar-antes { color: var(--suave, #4a5b6b); font-size: .95rem; }
.comparar-depois {
  color: var(--tinta, #0d1b2a); font-size: .97rem; font-weight: 500;
  padding-left: clamp(12px, 1.6vw, 20px); padding-right: clamp(12px, 1.6vw, 20px);
  background: linear-gradient(180deg, rgba(227, 106, 76, .045), rgba(227, 106, 76, .045));
  border-top-color: rgba(227, 106, 76, .16);
}
.comparar-linha:last-child .comparar-depois { border-radius: 0 0 14px 14px; padding-bottom: 18px; }

/* No celular a grade de três colunas não cabe: cada fricção vira um bloco, com o tema
   em cima e os dois lados rotulados. O realce em coluna não existe aqui, então o lado
   da Coravia ganha a própria caixa. */
@media (max-width: 820px) {
  .comparar-quadro { grid-template-columns: 1fr; padding: 6px 18px 20px; margin-top: 32px; }
  .comparar-linha { display: block; padding-top: 18px; }
  /* ⚠️ PRECISA repetir as duas classes. `.comparar-lado` sozinho é (0,1,0) e PERDE para
     `.comparar-lado.envida { display:flex }` lá de cima, que é (0,2,0). O rótulo continuava
     visível, seguia sendo item da grade e, com `grid-column: 3`, criava trilhas implícitas:
     o quadro ficava com TRÊS colunas no celular mesmo com `grid-template-columns: 1fr`. */
  .comparar-lado.grupo, .comparar-lado.envida { display: none; }
  .comparar-tema, .comparar-antes, .comparar-depois { padding: 0; border-top: 0; }
  .comparar-linha + .comparar-linha { border-top: 1px solid rgba(199, 141, 68, .3); }
  .comparar-tema { margin-bottom: 10px; }
  .comparar-antes, .comparar-depois { padding: 11px 14px; border-radius: 12px; }
  .comparar-antes { background: rgba(13, 27, 42, .04); margin-bottom: 8px; }
  .comparar-depois { background: rgba(227, 106, 76, .06); margin-bottom: 2px; }
  .comparar-antes::before, .comparar-depois::before {
    display: block; margin-bottom: 3px;
    font-family: Inter, system-ui, sans-serif; font-weight: 600;
    font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  }
  .comparar-antes::before  { content: "No grupo da família"; color: var(--suave, #4a5b6b); }
  .comparar-depois::before { content: "Na Coravia"; color: var(--pessego-escuro); }
}

/* ======================= O FIM DE PÁGINA DO MOCKUP (27/07) =======================
   Faixa terracota de chamada + rodapé verde escuro em quatro colunas, tirados de
   `inspiracaolandingpage2.png`.

   ⚠️ ESTE É O PRIMEIRO USO DA TERRACOTA EM TODA TELA DO SITE. Até aqui ela vivia só no
   /experiencias. A decisão de trocar o site inteiro para terracota continua sendo dela e
   continua não tomada: o botão verde segue mandando no resto das páginas. Aqui ela entra porque
   a faixa é o último empurrão da página e precisa destoar do que veio antes, que é creme.

   ⚠️ O rodapé é VERDE ESCURO, então todo texto dentro dele é claro. Não reaproveitar
   `--tinta-suave` (do rodapé pêssego antigo): sobre #142b20 ele dá 2,4:1 e some. */
/* ⚠️ A FAIXA DE CHAMADA DEIXOU DE SER A COR DE AÇÃO (28/07, repintura).
   Ela ocupa 7% da tela e era o pedaço mais barulhento E menos legível do site: coral com letra
   clara dá 3,26:1 e REPROVA para texto corrido. Agora a faixa é azul-marinho, um degrau mais
   claro que o rodapé para os dois não virarem um bloco só, e o CORAL foi para onde rende mais:
   o botão, que é o único lugar da faixa onde a cor tem trabalho a fazer.
   Medido com ferramentas/contraste.py, não estimado. */
.chamada-fim {
  background: var(--verde);
  color: #fcfbf9;
  padding: 40px 22px;
}
.chamada-fim .interno {
  max-width: var(--largura); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.cf-texto { display: flex; align-items: center; gap: 18px; }
.cf-coracao { width: 46px; height: 46px; flex: 0 0 auto; color: rgba(255, 245, 238, .55); }
.chamada-fim h2 {
  font-family: "Playfair Display", serif; font-weight: 500;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem); line-height: 1.18; margin: 0; color: #fcfbf9;
}
/* ⚠️ .88 de opacidade sobre a terracota dá 4,24:1 e REPROVA (o mínimo para texto normal é 4,5).
   Calculado, não estimado: o creme a 88% sobre #bc4022 vira #f7dfd6. Em .95 sobe para 4,68:1.
   A hierarquia continua existindo pelo tamanho e pela fonte, que é o que ela já fazia. */
.chamada-fim p { margin: 8px 0 0; font-size: .95rem; color: rgba(255, 245, 238, .95); max-width: 46ch; }
/* O botão virou a única cor forte da faixa, e por isso é CHEIO, não contornado.
   ⚠️ Letra AZUL-MARINHO sobre o coral, nunca clara: azul sobre coral dá 5,33:1 e passa; claro
   sobre coral dá 3,26:1 e reprova. É a mesma regra da prancha da marca. */
/* Era a ÚNICA pílula caixa-alta do site (999px, .88rem, uppercase) e aparecia em TODAS as
   páginas: um segundo sistema de botão morando na última impressão (auditoria 07/08). Agora
   ela fala a língua do .btn: mesmo raio, mesmo corpo, mesma caixa. As cores ficam, que a
   regra do contraste (marinho sobre coral, 5,33:1) é da prancha da marca. */
.cf-botao {
  flex: 0 0 auto; display: inline-block; text-decoration: none; text-align: center;
  background: var(--terracota); border: 1.6px solid var(--terracota); border-radius: var(--raio);
  padding: 16px 30px; font-weight: 600;
  font-size: 1rem; color: var(--verde-escuro); transition: background .2s ease, border-color .2s ease;
}
.cf-botao:hover, .cf-botao:focus-visible { background: var(--terracota-clara); border-color: var(--terracota-clara); }

/* ---------- rodapé verde escuro, quatro colunas ---------- */
.rodape {
  background: var(--verde-escuro);
  color: #e3d3c2;
  padding: 54px 22px 30px;
}
.rodape .interno { max-width: var(--largura); margin: 0 auto; text-align: left; }
.rd-grade {
  display: grid; gap: 34px 40px;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
}
.rodape img { height: 62px; width: auto; }
.rd-lema {
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 1.1rem; color: var(--ouro-exp); margin: 14px 0 2px;
}
.rd-traducao { font-size: .82rem; color: #7b8896; margin: 0; }
.rd-frase {
  margin: 18px 0 0; font-size: .92rem; line-height: 1.6; color: #e3d3c2;
  border-left: 2px solid rgba(187, 137, 69, .5); padding-left: 14px;
}
.rd-titulo {
  font-size: .82rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ouro-exp); font-weight: 700; margin: 0 0 14px;
}
.rd-titulo-2 { margin-top: 26px; }
.rd-coluna { display: flex; flex-direction: column; gap: 9px; }
.rodape a { color: #e3d3c2; text-decoration: none; font-size: .9rem; line-height: 1.35; }
.rodape a:hover, .rodape a:focus-visible { color: #fff; text-decoration: underline; }
.rd-todas { margin-top: 6px; color: var(--ouro-exp) !important; }
.rd-redes-nota { font-size: .78rem; color: #7b8896; margin: -8px 0 10px; }
.rd-redes { display: flex; gap: 12px; }
.rd-redes a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(222, 213, 198, .35);
}
.rd-redes a:hover { border-color: var(--ouro-exp); }
.rd-redes svg { width: 20px; height: 20px; }
.rd-fim {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 42px; padding-top: 20px; border-top: 1px solid rgba(222, 213, 198, .18);
}
.rd-assinatura, .rd-brasil { margin: 0; font-size: .82rem; color: #7b8896; }
.rd-assinatura strong { color: #e3d3c2; }
.rd-brasil { display: inline-flex; align-items: center; gap: 6px; }
.rd-brasil svg { width: 15px; height: 15px; color: var(--terracota-clara); }

/* ⚠️ Quatro colunas em 360px viram quatro tiras de uma palavra. No celular a marca ocupa a
   largura inteira e as três listas viram duas colunas, que é o que cabe sem quebrar nome de
   homenagem no meio. */
@media (max-width: 900px) {
  .rd-grade { grid-template-columns: 1fr 1fr; }
  .rd-marca { grid-column: 1 / -1; }
  /* ⚠️ AS DUAS LISTAS CURTAS EMPILHAM AO LADO DA LONGA, e isso é medição, não gosto.
     "Homenagens" tem 17 links; desde a auditoria de toque cada um é uma faixa de 44px, então a
     coluna mede ~780px. "A Coravia" mede ~290px. Numa grade de duas colunas a fileira inteira
     herda a altura da mais alta: sobravam ~490px de vazio à direita da torre, e "Ajuda" era
     empurrada para uma fileira nova, ou seja, o rodapé pagava DUAS vezes pela mesma altura.
     Agora a torre ocupa a coluna esquerda das duas fileiras e as curtas se encaixam na direita.
     Medido no ar em 390px: rodapé de 1.651px para 1.217px, sem tirar um link do lugar. */
  .rd-col-homenagens { grid-column: 1; grid-row: 2 / span 2; }
  .rd-col-coravia    { grid-column: 2; grid-row: 2; }
  .rd-col-ajuda      { grid-column: 2; grid-row: 3; align-self: start; }
}
@media (max-width: 560px) {
  .chamada-fim .interno { flex-direction: column; align-items: flex-start; }
  .cf-botao { width: 100%; text-align: center; }
  .cf-coracao { display: none; }   /* a 360px ele rouba metade da linha do título */
  .rd-fim { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ================= ALVOS DE TOQUE E MOVIMENTO (auditoria de 31/07) =================
   Medido na página no ar, com emulação de celular: 33 alvos abaixo do mínimo na home, 38 na
   tela de gravar e 75 no /criar. Os piores eram os links do rodapé, com 19px de altura, e as
   pílulas e chips com 40px. A régua é 44px (Apple) / 48dp (Material); o dedo médio tem 8mm.
   Errar o toque no /criar é venda perdida, não é detalhe de acessibilidade.
   ⚠️ Este bloco fica no FIM do arquivo de propósito: o envida.css tem regra repetida em vários
   pontos e um :root duplicado, e quem está por último é quem ganha. */

/* rodapé: o link vira uma faixa de 44px em vez de uma linha de 19px.
   O `gap` da coluna encolhe junto, senão o rodapé dobra de altura à toa. */
.rd-coluna { gap: 0; }
.rd-coluna a { display: flex; align-items: center; min-height: 44px; }
.rd-redes a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* pílulas de ocasião e chips de pergunta: de 40 para 44 */
.oc-pilula { min-height: 44px; }
.chip { min-height: 44px; }

/* a marca no topo é o caminho de volta para a home e tinha 32px de altura */
.marca { min-height: 44px; display: inline-flex; align-items: center; }

/* o "Começar" do cabeçalho tinha 40px, e é o botão mais clicado do site */
.btn { min-height: 44px; }

/* a frase do cartão de exemplo sobre o vídeo estava a 13,44px, e é o primeiro texto que a
   pessoa lê no site inteiro */
.hf-sobre-frase { font-size: .94rem; }

/* ⚠️ Um link solto no meio de um parágrafo ("junte a família num recado só") continua com a
   altura da linha, e está certo: aumentar a caixa de um link inline empurra as linhas do texto
   e estraga a leitura. A própria WCAG 2.5.8 abre exceção para link dentro de frase. */

/* ================= AS QUALIDADES: a escolha (31/07) =================
   ⚠️ De propósito NÃO é cartão com sombra e canto arredondado: esse é o desenho padrão que se
   repete em toda seção do site e que, de tanto repetir, faz a página parecer template. Aqui é
   filete de 1px, nome na serifada e a frase de apoio embaixo, em corpo pequeno.
   O estado escolhido é AZUL-MARINHO CHEIO com letra creme (6,9:1), e não coral: coral com letra
   clara é exatamente o erro de contraste que esta mesma auditoria acabou de consertar. */
.qual-titulo {
  font-size: .84rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
  color: var(--tinta-suave); margin: 18px 0 8px;
}
.qual-titulo:first-child { margin-top: 6px; }
.qual-linha { display: flex; flex-wrap: wrap; gap: 8px; }
/* O SELO da palavra escolhida, quando ela só é LIDA (a homenagem de exemplo e o mural).
   ⚠️ Não é o `.qual`, que é o botão de escolher e tem 44px de altura mínima por ser alvo de
   toque. Aqui ninguém toca: é retrato, e retrato pequeno cabe ao lado do recado sem competir
   com a voz, que é o produto. */
.qual-selo {
  display: inline-block; padding: 3px 10px; margin-top: 10px;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  color: var(--tinta); background: rgba(201, 165, 106, .14);
  border: 1px solid rgba(201, 165, 106, .45); border-radius: 999px;
}
/* ---------- as qualidades em DESTAQUE no recado (06/08/2026, pedido dela) ----------
   "As palavras ficam meio que largadas, não dá pra entender que foram selecionadas porque são
   qualidades que a pessoa viu nela." O rótulo diz de onde as palavras vieram, e a palavra vira
   peça de retrato: serifa, papel branco, fio de cobre. É o valor da pessoa, dito com moldura. */
.qual-vistas {
  margin-top: 16px; padding: 12px 15px 13px;
  background: linear-gradient(180deg, rgba(199, 141, 68, .09), rgba(199, 141, 68, .03));
  border: 1px solid rgba(199, 141, 68, .35); border-radius: 12px;
}
.qual-vistas-rotulo {
  font-size: .7rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 700;
  color: var(--ouro-escuro); margin: 0;
}
.qual-vistas .qual-linha { gap: 7px; }
.qual-vistas .qual-selo {
  margin-top: 8px; padding: 5px 15px;
  font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: .98rem;
  letter-spacing: .01em; background: #fff; border-color: rgba(199, 141, 68, .5);
}
.qual {
  display: block; text-align: left; cursor: pointer;
  flex: 1 1 158px; min-height: 44px; padding: 9px 13px;
  /* ⚠️ Botão NÃO herda fonte: sem a família declarada, a frase da qualidade saía em Arial
     12,8px (medido no ar em 08/08). E o raio de 3px destoava do resto da casa. */
  font-family: Inter, sans-serif;
  background: transparent; border: 1px solid var(--linha-tinta); border-radius: var(--raio);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.qual-nome {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.06rem; line-height: 1.2; color: var(--tinta);
}
.qual-frase {
  display: block; font-size: .84rem; line-height: 1.32; color: var(--tinta-suave); margin-top: 2px;
}
.qual:hover { border-color: var(--ouro); }
.qual[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); }
.qual[aria-pressed="true"] .qual-nome { color: var(--marfim); }
.qual[aria-pressed="true"] .qual-frase { color: #b8c6d3; }
.qual:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.qualidades-caixa .dica { max-width: 58ch; }
@media (prefers-reduced-motion: reduce) { .qual { transition: none; } }

/* ================= O RETRATO: a página de livro com carimbo =================
   ⚠️ Esta é a ÚNICA página do site desenhada para sair da tela e virar papel, então ela quebra
   de propósito o ritmo do resto: uma coluna só, margem larga, tudo serifado, nenhuma sombra e
   nenhum canto arredondado. É o oposto do cartão que se repete nas outras telas, e é isso que
   faz ela parecer uma página de livro em vez de mais um bloco do site. */
.retrato-faixa { background: var(--marfim-2); }
.retrato {
  position: relative;
  max-width: 640px; margin: 0 auto; padding: 62px 54px 76px;
  background: var(--marfim);
  border: 1px solid var(--linha-ouro);
  /* o filete duplo é o que dá cara de folha de livro, e custa uma sombra a menos */
  box-shadow: inset 0 0 0 1px var(--marfim), inset 0 0 0 8px transparent;
}
.retrato::before {
  content: ''; position: absolute; inset: 14px; border: 1px solid var(--linha-ouro);
  pointer-events: none;
}
.rt-alto {
  font-size: .76rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0 0 10px; font-weight: 600;
}
.rt-nome {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: clamp(2.1rem, 7vw, 3.1rem); line-height: 1.06; margin: 0 0 22px;
  color: var(--tinta); text-wrap: balance;
}
.rt-frase {
  font-size: 1.06rem; line-height: 1.62; color: var(--tinta-suave);
  margin: 0 0 34px; padding-bottom: 26px; border-bottom: 1px solid var(--linha-tinta);
  max-width: 46ch;
}
.rt-frase strong { color: var(--tinta); font-weight: 600; }

.rt-topo { list-style: none; margin: 0; padding: 0; }
.rt-topo li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--linha-tinta);
}
.rt-topo li:first-child .rt-palavra { font-size: clamp(2rem, 6.4vw, 2.7rem); }
.rt-palavra {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500; line-height: 1.1;
  font-size: clamp(1.5rem, 4.8vw, 2rem); color: var(--tinta);
}
.rt-conta {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rt-tambem {
  font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 30px 0 12px; font-weight: 600;
}
.rt-resto { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rt-resto li { font-size: 1.02rem; color: var(--tinta); }
.rt-resto li span {
  font-size: .78rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums;
  margin-left: 3px;
}

/* o carimbo */
.rt-carimbo {
  position: absolute; right: 40px; bottom: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 176px; padding: 15px 10px;
  border: 2px solid var(--tinta); box-shadow: inset 0 0 0 2px var(--marfim), inset 0 0 0 4px var(--tinta);
  color: var(--tinta); opacity: .72; transform: rotate(-6deg);
  text-align: center; text-transform: uppercase;
}
.rt-c1 { font-size: .82rem; letter-spacing: .18em; font-weight: 700; }
.rt-c2 { font-size: .74rem; letter-spacing: .1em; }
.rt-c3 { font-size: .68rem; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.rt-pe {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: 1rem; color: var(--tinta-suave); margin: 42px 0 0;
}
.rt-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.rt-acoes { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.rt-acoes .dica { flex-basis: 100%; text-align: center; }

@media (max-width: 620px) {
  .retrato { padding: 44px 26px 48px; }
  .retrato::before { inset: 10px; }
  /* ⚠️ No celular o carimbo SAI do posicionamento absoluto e entra na coluna. Com ele solto no
     canto, a assinatura "Coravia" ficava ACIMA dele e sobrava boiando no meio da folha, com um
     vão embaixo. Na coluna a ordem fica natural: as palavras, o carimbo, a assinatura. */
  .rt-carimbo {
    position: static; transform: rotate(-6deg);
    margin: 34px auto 8px;
  }
  .rt-pe { margin-top: 26px; text-align: center; }
}

/* a chamada do retrato, dentro do mural: só as três palavras, e o resto mora na folha */
.rc-palavras {
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center;
  margin: 0 0 20px;
}
.rc-palavras span {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; color: var(--tinta);
  line-height: 1.15;
}
.retrato-chamada { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ⚠️ O PAPEL. Esta parte não é enfeite: o pedido era "para ela nunca se esquecer do valor dela",
   e o que fica na parede é a folha impressa. Sem isto, o navegador imprimiria o cabeçalho, o
   rodapé de quatro colunas e os dois botões junto. */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .topo, .rodape, .rt-acoes, .esteira, .chamada-fim { display: none !important; }
  .retrato-faixa { background: #fff; padding: 0; }
  .retrato {
    max-width: none; margin: 0; padding: 30mm 24mm 40mm;
    border-color: #b9a17a; box-shadow: none;
    break-inside: avoid;
  }
  .rt-carimbo { opacity: .8; }
  .rt-nome { font-size: 30pt; }
  .rt-topo li:first-child .rt-palavra { font-size: 26pt; }
  .rt-palavra { font-size: 19pt; }
}

/* ⚠️ A ESTEIRA ANDAVA SOZINHA E SÓ PARAVA NO :hover — QUE NÃO EXISTE NO CELULAR.
   A pessoa tinha que acertar o dedo num alvo em movimento (WCAG 2.2.2 exige um jeito de parar).
   🔴 E A ROLAGEM DE DEDO TAMBÉM NÃO SERVIA (06/08/2026, ela: "ter que correr pelo celular não
   ficou legal"). Medido: a pista da família tinha 2.309px numa caixa de 324, uma pílula visível
   de nove, e a pílula do professor entrava cortada dos dois lados. No celular a esteira agora é
   uma NUVEM: todas as pílulas na tela de uma vez, centradas, com os rótulos curtos. Nada corre,
   nada se arrasta, nada se corta. O desktop continua com a esteira (decisão dela de 27/07). */
@media (hover: none) {
  .esteira { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .esteira-pista { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 9px; }
  /* a segunda cópia da lista só existia para o laço da animação parecer infinito */
  .esteira-pista .oc-pilula[aria-hidden="true"] { display: none; }
  .esteira + .esteira { margin-top: 9px; }
  .oc-pilula { padding: 8px 15px 8px 8px; }
  .oc-pilula .oc-icone { width: 34px; height: 34px; }
  .oc-pilula .oc-nome { font-size: .9rem; }
}

/* ================= A BARRA DO ENVIO (auditoria de UX tecnica, 02/08/2026) =================
   Quem manda um video de 3 minutos pelo 4G ficava minutos olhando um botao escrito "enviando",
   sem nada se mexer na tela. Nesse silencio a pessoa aperta de novo ou fecha a aba, e a
   gravacao da avo dela vai embora. */
.envio-progresso { margin: 14px 0 4px; }
.envio-barra {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(13, 27, 42, .10); border: 1px solid var(--linha-tinta);
}
.envio-barra > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--ouro), #e0a75f);
  transition: width .25s ease-out;
}
.envio-progresso .dica { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .envio-barra > span { transition: none; } }
/* ═══════════ O ROTEIRO DAS HISTÓRIAS LONGAS (03/08/2026, noite) ═══════════
   A Entrevista dos Avós e a Árvore do Crescimento mostram 51 perguntas na mesma tela. Numa lista
   corrida isso vira uma parede, e foi assim que ela descreveu: "as perguntas estão estranhas".
   Aqui elas ganham seções na ordem da vida, uma barra que anda e duas gavetas no fim.
   ⚠️ Só o LAYOUT muda: o `.chip` continua sendo o mesmo botão do resto do site, então quem
   mexer na cor dos chips um dia não precisa lembrar desta tela. */
/* ═══ O REDESENHO DE 03/08/2026, tarde da noite ═══
   Pedido dela: *"deixe a seção de homenagem super premium, com cara de 10k"*, nos DOIS produtos.
   O que estava errado não era a cor, era o que a tela pedia de quem conduz:

   1. 🔴 **A tela pedia uma DECISÃO ENTRE 51.** Quem senta com o avô no domingo abria uma parede
      de perguntas e tinha que escolher. Produto caro não pergunta o que fazer, ele CONDUZ: agora
      a primeira coisa da tela é A PRÓXIMA pergunta, já escolhida, com "gravar esta" do lado.
   2. **As sete seções vinham todas abertas**, o que é a mesma parede com subtítulos. Viraram
      CAPÍTULOS numerados, e só o capítulo de onde a história parou nasce aberto.
   3. **As perguntas eram pastilhas embrulhando em mosaico**, com uma de 8 palavras do lado de uma
      de 3. Frase não é etiqueta: agora cada pergunta ocupa a própria linha, e a lista lê como o
      índice de um livro, que é o que ela é.
   4. **A tela não dizia o que era aquilo.** Ganhou moldura: de quem é a história e de que ano.

   ⚠️ O `.chip` continua sendo o mesmo botão do resto do site, e o JS continua achando tudo por
   `.chip` e `data-p`: o que muda aqui é layout, nunca o contrato com o JavaScript. */

/* A MOLDURA: sem ela a tela abria em "Que pergunta vocês vão gravar agora?", sem dizer de quem
   é a história nem que ela é longa. */
.rot-cabeca { margin: 4px 0 16px; }
.rot-kicker {
  margin: 0 0 3px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--ouro-escuro);
}
.rot-titulo {
  margin: 0; font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.42rem; line-height: 1.22; color: var(--vinho);
}

/* ⭐ A PRÓXIMA PERGUNTA. É o coração do redesenho: a tela abre com ela já escolhida, então quem
   conduz senta e grava. Continua sendo um `.chip` por dentro (o JS de seleção é o mesmo), e por
   isso todas as regras de chip precisam ser desfeitas aqui em cima, uma a uma. */
.rot-proxima {
  display: block; width: 100%; text-align: left; border-radius: 20px;
  padding: 16px 18px 15px; margin: 0 0 10px; font-size: 1rem; font-weight: 400;
  background: linear-gradient(180deg, var(--marfim-2), #fff);
  border: 1px solid var(--linha-tinta); box-shadow: 0 10px 30px rgba(13, 27, 42, .07);
}
.rot-linha .rot-proxima, .rot-chips .rot-proxima { width: 100%; }
.chip.rot-proxima[aria-pressed=true] {
  background: linear-gradient(180deg, var(--marfim-2), #fff);
  color: var(--tinta); font-weight: 400; box-shadow: 0 10px 30px rgba(13, 27, 42, .07);
  border-color: var(--ouro); border-left: 3px solid var(--ouro); padding-left: 16px;
}
.rot-proxima-tag {
  display: block; font-size: .73rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ouro-escuro); margin-bottom: 6px;
}
.rot-proxima-p {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem; line-height: 1.32; color: var(--vinho);
}
.rot-proxima-onde { display: block; margin-top: 7px; font-size: .82rem; color: var(--tinta-suave); }

.rot-progresso { margin: 2px 0 20px; }
/* O número em serifa: é o dado que a família olha primeiro, e em Inter .95rem ele lia como
   rodapé de formulário. Mesma informação, outro peso. */
.rot-conta { margin: 0 0 9px; font-size: .95rem; color: var(--tinta); }
.rot-conta strong {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem;
  font-weight: 600; color: var(--vinho); margin-right: 2px;
}
.rot-falta { margin: 7px 0 0; font-size: .84rem; color: var(--tinta-suave); }
.rot-chips { display: block; }                 /* as seções empilham; quem embrulha os chips é .rot-linha */

/* OS CAPÍTULOS. Fechados, são sete linhas; abertos, são a lista inteira. Só o capítulo onde a
   história parou nasce aberto, e é ele que a pessoa vê ao chegar. */
.rot-secao { margin-bottom: 10px; border-bottom: 1px solid var(--linha-tinta); padding-bottom: 10px; }
.rot-secao:last-of-type { border-bottom: 0; }
.rot-secao > summary {
  display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none;
  padding: 9px 2px; min-height: 44px;
}
.rot-secao > summary::-webkit-details-marker { display: none; }
/* 🔴 SEM ISTO O CAPÍTULO FECHADO NÃO PARECE ABRIR (03/08/2026, visto na primeira medição do
   redesenho). Tirar a setinha nativa do <details> deixou sete linhas bonitas e mudas: nada na
   tela dizia que ali dentro tem pergunta. A seta é o único aviso, e ela gira ao abrir. */
.rot-secao > summary::after {
  content: ''; flex: 0 0 auto; align-self: center; width: 8px; height: 8px; margin-left: 4px;
  border-right: 2px solid var(--ouro-escuro); border-bottom: 2px solid var(--ouro-escuro);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s;
}
.rot-secao[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
@media (prefers-reduced-motion: reduce) { .rot-secao > summary::after { transition: none; } }
.rot-secao-num {
  flex: 0 0 auto; font-family: 'Playfair Display', Georgia, serif; font-size: .95rem;
  color: var(--ouro-escuro); font-variant-numeric: tabular-nums; min-width: 1.1em;
}
.rot-secao-nome {
  flex: 1 1 auto; margin: 0;
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.16rem; line-height: 1.25;
  color: var(--vinho);
}
/* A conta dizia só um número, e número solto ao lado de um título lê como total. Agora ela diz
   o que é: "faltam 6". */
/* A conta é apoio, não título: com fundo, borda e negrito ela disputava a linha com o nome do
   capítulo, e o nome é que importa. */
.rot-secao-n {
  flex: 0 0 auto; font-family: Inter, sans-serif; font-size: .78rem; font-weight: 600;
  line-height: 1; color: var(--tinta-suave); white-space: nowrap;
}
.rot-secao-frase { margin: 0 0 10px; font-size: .89rem; color: var(--tinta-suave); line-height: 1.5; }

/* UMA PERGUNTA POR LINHA. Em mosaico, uma pergunta de oito palavras dividia a fileira com uma de
   três, e a lista inteira perdia o eixo. Em coluna ela lê como índice de livro. */
.rot-linha { display: flex; flex-direction: column; gap: 8px; }
.rot-linha .chip {
  width: 100%; text-align: left; border-radius: 14px; line-height: 1.4;
  padding: 13px 16px; font-size: .95rem;
}
@media (min-width: 760px) {
  .rot-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-items: stretch; }
}

/* O ÍNDICE DO PAINEL: as mesmas perguntas, mas aqui elas não são botão. Quem cuida está lendo o
   que já existe, e não escolhendo o que gravar, então linha de leitura e não cartão de toque. */
.rot-indice { list-style: none; margin: 6px 0 2px; padding: 0; }
.rot-indice li {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 2px;
  border-bottom: 1px solid var(--linha-tinta); font-size: .93rem; line-height: 1.45; color: var(--tinta);
}
.rot-indice li:last-child { border-bottom: 0; }
.rot-indice .marca { flex: 0 0 auto; width: 1em; font-weight: 700; color: var(--oliva, #16293c); }
.rot-indice li.falta { color: var(--tinta-suave); }
.rot-indice li.falta .marca { color: var(--linha-tinta); font-weight: 400; }

/* As gavetas nascem FECHADAS: o que já foi gravado não pode disputar espaço com o que falta. */
.rot-gaveta { margin: 4px 0 18px; border-top: 1px solid var(--linha-tinta); padding-top: 14px; }
/* A gaveta usa a MESMA seta dos capítulos: duas setas diferentes na mesma tela (a nativa aqui e
   a desenhada lá em cima) é o tipo de detalhe que faz a tela parecer montada por duas pessoas. */
.rot-gaveta > summary {
  cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--ouro-escuro);
  padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 9px; min-height: 44px;
}
.rot-gaveta > summary::-webkit-details-marker { display: none; }
.rot-gaveta > summary::after {
  content: ''; width: 8px; height: 8px; margin-left: auto;
  border-right: 2px solid var(--ouro-escuro); border-bottom: 2px solid var(--ouro-escuro);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s;
}
.rot-gaveta[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
@media (prefers-reduced-motion: reduce) { .rot-gaveta > summary::after { transition: none; } }
.rot-gaveta[open] > summary { margin-bottom: 8px; }
.rot-pulada {
  border-style: dashed; color: var(--tinta-suave);
  /* ⚠️ Este NÃO é um chip selecionável: ele desfaz. Por isso não tem aria-pressed e não pinta
     de dourado ao ser escolhido, senão a tela prometeria uma escolha que não existe. */
}
.rot-pulada:hover { border-style: solid; color: var(--vinho); }
.rot-pular-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -2px 0 6px; }
.rot-pular { font-size: .86rem; padding: 8px 14px; min-height: 40px; }

/* A linha de uma pergunta no painel da história: o link de gravar e, ao lado, o "não vamos fazer
   esta". ⚠️ O botão vive FORA do <a> de propósito (link dentro de link o navegador desmonta). */
.ph-item-linha { display: flex; align-items: stretch; gap: 8px; }
.ph-item-linha .ph-pergunta { flex: 1 1 auto; }
.ph-pular-form { display: flex; align-items: center; margin: 0; flex: 0 0 auto; }
.ph-pular {
  border: 1px dashed var(--linha-tinta); background: transparent; border-radius: 12px;
  color: var(--tinta-suave); font: 600 .78rem Inter, sans-serif; line-height: 1.25;
  padding: 8px 11px; cursor: pointer; max-width: 108px; min-height: 44px;
}
.ph-pular:hover { border-style: solid; border-color: var(--memoria); color: var(--memoria); }
.ph-voltar { border-style: solid; border-color: var(--memoria); color: var(--memoria); }
.ph-pergunta-fora { opacity: .62; }
@media (max-width: 520px) { .ph-pular { max-width: 92px; font-size: .74rem; } }

/* ================= A CARTA SE LENDO COMO CARTA, NO MURAL (04/08/2026) =================
   ⚠️ POR QUE EXISTE: no mural a peça que REVELA descia igual à que REÚNE, uma lista de recados
   com a pergunta longa em cima de cada um. O que separa as duas aos olhos de quem recebe são os
   MOVIMENTOS: um título por sentido, uma vez só, e no fim o fecho.
   O desenho aqui é de PÁGINA, e não de cartão: sem caixa, sem sombra e sem borda, porque carta
   não tem moldura. Quem separa um movimento do outro é o filete dourado, igual ao do papel. */
.carta-movimento {
  font-family: Inter, sans-serif; font-size: .8rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ouro-escuro);
  text-align: center; margin: 40px 0 2px;
}
.carta-movimento::after {
  content: ""; display: block; width: 44px; height: 1px;
  background: var(--linha-ouro); margin: 12px auto 0;
}
.carta-movimento:first-child { margin-top: 6px; }

/* O FECHO: o clímax da peça. Fica entre dois filetes, centralizado, e cada motivo é uma linha
   em serifada, do tamanho de frase escrita à mão. O nome vem depois e MENOR, porque quem manda
   ali é o motivo, e não quem assinou. */
.carta-fecho {
  margin: 46px auto 0; max-width: 640px; padding: 32px 24px; text-align: center;
  border-top: 1px solid var(--linha-ouro); border-bottom: 1px solid var(--linha-ouro);
}
.carta-fecho .kicker { margin-bottom: 6px; }
.cf-frase { margin: 0 0 22px; font-size: 1.04rem; color: var(--tinta-suave); }
.cf-motivo {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; line-height: 1.5;
  color: var(--tinta); margin: 0 0 16px;
}
/* ⚠️ Sem travessão antes do nome: é regra da casa, e aqui ele nem faz falta. Quem separa o
   motivo de quem o disse é o corpo menor e a fonte sem serifa, que já dizem "isto é a assinatura". */
.cf-quem { display: block; font-family: Inter, sans-serif; font-size: .82rem; color: var(--tinta-suave); margin-top: 3px; }
@media (max-width: 520px) {
  .carta-movimento { font-size: .74rem; letter-spacing: .18em; margin-top: 32px; }
  .carta-fecho { padding: 26px 16px; }
  .cf-motivo { font-size: 1.08rem; }
}

/* ═════════════ A CENTRAL DA FESTA, no topo do painel de uma celebração (04/08/2026) ═════════════
   ⭐ POR QUE EXISTE: o painel não tinha hierarquia, tinha lista. Vinte cartões do mesmo tamanho,
   na mesma ordem, para todo produto: "Trocar o símbolo" pesava exatamente o mesmo que o link da
   família na véspera da festa. Quem organiza um casamento de 150 pessoas quer três coisas, e
   nesta ordem: quanto falta para o dia, quantos convidados já gravaram, e o que ainda depende
   dela. Este bloco é a única coisa da tela que tem peso de painel, e é de propósito.

   ⚠️ Ele é ESCURO no meio de uma tela clara, e é o único. O contraste é o que faz ele ler como
   um instrumento e não como mais um cartão; o mesmo azul-marinho da marca, que já carrega todo
   o texto da casa. Coral e cobre continuam fora do papel de letra. */
.festa-central {
  background: radial-gradient(120% 130% at 15% 0%, var(--navy-600) 0%, var(--navy-900) 62%), var(--navy-900);
  color: #e3d3c2; border-radius: 20px; padding: 26px 24px 24px;
  box-shadow: 0 18px 44px rgba(13, 27, 42, .18);
}
.fc-alto {
  font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 4.6vw, 2.1rem);
  color: #faf8f5; margin: 0 0 16px; font-weight: 500; line-height: 1.1;
}
.fc-barra { height: 10px; border-radius: 999px; background: rgba(227, 211, 194, .18); overflow: hidden; }
.fc-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ouro-claro), var(--ouro)); transition: width .6s ease; }
.fc-conta { margin: 10px 0 0; font-size: .96rem; color: #c6cfd8; }
.fc-conta strong { color: #faf8f5; font-size: 1.15rem; }

.fc-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
/* ⚠️ Os dois de contorno precisam de borda CLARA aqui: a `.btn.contorno` da casa tem borda
   azul-marinho, que sobre azul-marinho é um botão invisível. */
.festa-central .btn.contorno { color: #e3d3c2; border-color: rgba(227, 211, 194, .45); background: transparent; }
.festa-central .btn.contorno:hover { border-color: var(--ouro-claro); color: #faf8f5; }

/* O QUE FALTA. Cada item tem botão: pendência sem saída é a pior coisa que um painel caro faz. */
.fc-falta { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(227, 211, 194, .18); }
.fc-falta-alto {
  font-family: Inter, sans-serif; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ouro-claro); font-weight: 600; margin: 0 0 14px;
}
.fc-item { padding: 14px 0; border-bottom: 1px solid rgba(227, 211, 194, .1); }
.fc-item:last-child { border-bottom: 0; padding-bottom: 0; }
.fc-item-tit { margin: 0; font-weight: 600; color: #faf8f5; font-size: 1rem; }
.fc-item-exp { margin: 4px 0 10px; font-size: .9rem; line-height: 1.55; color: #b9c3cd; }
.fc-item-btn {
  display: inline-block; text-decoration: none; font: 600 .86rem Inter, sans-serif;
  color: var(--navy-900); background: var(--ouro-claro); border-radius: 10px;
  padding: 11px 18px; min-height: 44px; line-height: 22px;
}
.fc-item-btn:hover { background: #fff; }
.fc-pronta { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(227, 211, 194, .18); color: var(--ouro-claro); font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; }

@media (max-width: 520px) {
  .festa-central { padding: 22px 18px 20px; border-radius: 16px; }
  .fc-acoes .btn { width: 100%; text-align: center; }
}

/* ---------- a faixa do consentimento (07/08/2026, LGPD com anuncio no ar) ----------
   A pele vem do .cartao; aqui mora so a POSICAO e a dobra. O flex-wrap:nowrap dos botoes
   nao e enfeite: e a licao da Bodas na /precos, do mesmo dia. */
.consente-faixa { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80;
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
  box-shadow: 0 14px 40px rgba(13, 27, 42, .22); max-width: 860px; margin: 0 auto; }
.consente-faixa p { margin: 0; font-size: .92rem; flex: 1 1 34ch; }
/* o "Saiba mais" media 18px de altura de toque (auditoria 07/08). O padding com margem
   negativa infla a area do dedo sem mexer um pixel no layout do paragrafo. */
.consente-faixa p a { display: inline-block; padding: 13px 6px; margin: -13px -6px; }
.consente-botoes { display: flex; flex-wrap: nowrap; gap: 8px; }
@media (max-width: 620px) { .consente-botoes { width: 100%; } .consente-botoes .btn { flex: 1; justify-content: center; } }

/* ═══ A TABELA DO COMPARATIVO (10/08/2026, pedido dela) ═══
   No computador, tabela de verdade: o assunto na esquerda e uma coluna por peca. A coluna do
   que a familia ja faz hoje fica em tinta suave, sem selo; as colunas da casa ganham o campo
   creme e o tique de ouro, que e o mesmo sinal da lista de "tudo isso vem dentro".
   ⚠️ O coral e FUNDO, nunca letra (regra da marca): o texto continua em tinta. */
.comparo { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: .95rem; }
.comparo th, .comparo td { text-align: left; vertical-align: top; padding: 14px 14px; }
.comparo thead th { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ouro-escuro); border-bottom: 1px solid var(--linha-ouro); }
.comparo thead th.comparo-hoje { color: var(--tinta-suave); }
.comparo tbody th { width: 22%; font-weight: 600; color: var(--tinta); border-bottom: 1px solid rgba(199, 141, 68, .16); }
.comparo tbody td { color: var(--tinta-suave); border-bottom: 1px solid rgba(199, 141, 68, .16); }
.comparo tbody td.comparo-casa { background: rgba(245, 233, 221, .5); color: var(--tinta); position: relative; padding-left: 34px; }
.comparo tbody td.comparo-casa::before {
  content: ""; position: absolute; left: 12px; top: 1.35em;
  width: 9px; height: 5px; border-left: 2px solid var(--ouro); border-bottom: 2px solid var(--ouro);
  transform: rotate(-45deg);
}
.comparo tbody td.comparo-hoje { padding-left: 34px; position: relative; }
/* o que ja se faz hoje nao leva tique nem X: leva um tracinho neutro, porque nao e defeito de
   ninguem, e a casa nao debocha do jeito que a familia se vira */
.comparo tbody td.comparo-hoje::before {
  content: ""; position: absolute; left: 12px; top: 1.6em; width: 10px; height: 1px; background: var(--creme-suave);
}

@media (max-width: 720px) {
  /* cada linha vira um bloco: o assunto em cima, as respostas embaixo, uma por peca */
  .comparo, .comparo tbody, .comparo tr, .comparo th, .comparo td { display: block; width: auto; }
  .comparo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .comparo tr { border: 1px solid var(--linha-ouro); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
  .comparo tbody th { width: auto; background: rgba(245, 233, 221, .35); border-bottom: 1px solid var(--linha-ouro); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ouro-escuro); padding: 10px 14px; }
  .comparo tbody td { border-bottom: 0; padding: 12px 14px 12px 34px; }
  .comparo tbody td + td { border-top: 1px solid rgba(199, 141, 68, .16); }
  .comparo tbody td::after { content: attr(data-col); display: block; margin-top: 4px; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ouro-escuro); }
  .comparo tbody td.comparo-hoje::after { color: var(--tinta-suave); }
  .comparo tbody td.comparo-casa::before { top: 1.15em; }
  .comparo tbody td.comparo-hoje::before { top: 1.35em; }
}

/* ═══ OS SIMBOLOS NUMA TIRA QUE DESLIZA (10/08/2026, ordem dela) ═══
   Palavras dela: "coloca eles tomando menos espaco da tela inicial, percorrendo em imagens
   menores de um lado pro outro, pras pessoas saberem das varias opcoes, mas pra diminuir a
   poluicao visual". A escolha CONTINUA na tela e continua sendo dela ("isso e pessoal"): o que
   muda e o espaco que ela ocupa antes de a pessoa ter decidido qualquer coisa.
   ⚠️ Quem rola e a TIRA, nunca a pagina: o corpo continua sem rolagem horizontal, e ha teste.
   ⚠️ O quarto simbolo fica cortado de proposito: item cortado e o que avisa que tem mais para
   o lado. Tira que cabe inteira nao parece tira, e ninguem desliza. */
@media (max-width: 720px) {
  .chips.chips-sim {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    gap: 9px; padding: 2px 2px 8px; margin-right: -16px; scrollbar-width: thin;
  }
  .chips.chips-sim .chip.chip-sim {
    flex: 0 0 116px; max-width: 116px; scroll-snap-align: start; padding: 7px 7px 9px;
  }
  .chips.chips-sim .chip.chip-sim .chip-sim-nome { font-size: .82rem; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════
   A HOME REMODELADA (10/08/2026, desenho aprovado por ela: `home.png` e `simbolos.png`)

   🔴 Aqui moravam OS TRES BARALHOS de simbolos, que subiram de manha e ela recusou de tarde
   ("nao gostei do novo no site"). O defeito da pilha e que ela ESCONDE: para ver a segunda peca
   e preciso adivinhar que o baralho gira, e quem nao descobre isso ve tres desenhos numa casa
   que tem treze. O desenho novo mostra UMA peca grande com o texto do lado, e a colecao inteira
   numa tira de miniaturas embaixo.

   ⚠️ REGRA DA MARCA QUE MANDA NESTE BLOCO INTEIRO: o cobre e FUNDO ou TRACO, nunca letra
   comprida sobre creme. Titulo e corpo sao tinta; o cobre entra em icone, filete, numero e no
   grifo curto.
   ⚠️ Nada aqui rola a PAGINA no sentido horizontal: quem rola e a tira dos simbolos, e ha
   teste na casa cobrando isso. */

/* ---------- a fita de quatro selos do heroi ---------- */
.hero-selos {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 18px;
}
.hero-selos li {
  display: flex; align-items: center; gap: 7px;
  font-size: .82rem; color: var(--tinta-suave); white-space: nowrap;
}
.hero-selos svg { width: 16px; height: 16px; color: var(--ouro-escuro); flex: 0 0 auto; }
/* ⚠️ A COLUNA DO TEXTO DO HERÓI CRESCE NA HOME (10/08/2026, medido, não chutado): com os 40%
   antigos os dois botões do desenho dela empilhavam e os quatro selos quebravam em duas fileiras
   de dois, que lê como lista de conferência e não como fita de garantias. Só aqui, e só no
   desktop: no celular tudo continua empilhando, que é o certo. */
@media (min-width: 1100px) {
  .hero-filme { grid-template-columns: minmax(300px, 50%) 1fr; }
  .hero-filme .hf-texto { max-width: 700px; padding-left: clamp(24px, 4.5vw, 68px); padding-right: clamp(24px, 3vw, 42px); }
  .hero-filme .acoes .btn { flex: 0 1 auto; }
  /* medido: com .82rem e gap 18 os quatro selos davam 624px numa coluna de 570, e o quarto caía
     sozinho numa segunda fileira. Aqui eles fecham em 535px de 613. */
  .hero-selos { gap: 10px 14px; }
  .hero-selos li { font-size: .8rem; }
}
/* o circulo com o play dentro do botao secundario (o "Ver como funciona" do desenho dela) */
.btn-seta-play { width: 18px; height: 18px; margin-left: 2px; flex: 0 0 auto; }

/* ---------- 2. as tres perguntas ---------- */
.perg-grade { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .perg-grade { grid-template-columns: repeat(3, 1fr); } }
.perg-cartao {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 20px 20px 18px; background: var(--marfim);
  border: 1px solid var(--linha-ouro); border-radius: 14px;
  box-shadow: 0 8px 22px rgba(13, 27, 42, .05);
}
.perg-cartao p { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--tinta); }
.perg-icone {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--pessego-claro); color: var(--ouro-escuro);
}
.perg-icone svg { width: 21px; height: 21px; }

/* ---------- 3. o que voce gostaria de viver ----------
   Os quatro cartoes de INTENCAO. O selo de cada um ganha um tom proprio: quatro circulos
   iguais em fileira leem como formulario, quatro tons leem como escolha. */
.cartao.viver {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 20px 18px; text-decoration: none;
}
.cartao.viver h3 { margin: 4px 0 8px; font-size: 1.14rem; }
.cartao.viver .suave { font-size: .93rem; margin: 0; }
.cartao.viver .selo { margin: 0 auto 12px; }
.grade .cartao.viver:nth-child(1) .selo { background: #f6e0d8; color: #b4472c; }
.grade .cartao.viver:nth-child(2) .selo { background: #dfe8e2; color: #3f6152; }
.grade .cartao.viver:nth-child(3) .selo { background: #f7e8cf; color: #9c6c2e; }
.grade .cartao.viver:nth-child(4) .selo { background: #dfe4ea; color: #1e3a52; }
.viver-seta { display: block; margin-top: auto; padding-top: 14px; color: var(--ouro-escuro); }
.viver-seta svg { width: 22px; height: 22px; display: block; margin: 0 auto; }
.cartao.viver:hover .viver-seta { transform: translateX(3px); }
.viver-seta { transition: transform .18s ease; }

/* ---------- 4. o grupo nao cria o momento ----------
   O quadro de quatro linhas. O olho compara sozinho porque os dois lados estao na MESMA
   altura: duas listas soltas nao comparam nada (foi o defeito de 27/07, ela: "muito bruta"). */
.faixa.momento { background: var(--marfim); }
.momento-quadro { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) {
  .momento-quadro { grid-template-columns: minmax(260px, .78fr) 1.6fr; gap: 46px; }
}
.momento-texto h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); margin: 0; }
.momento-coracao { width: 42px; height: 42px; color: var(--ouro); opacity: .5; margin-top: 22px; display: block; }
.momento-tabela {
  display: grid; grid-template-columns: minmax(104px, .8fr) 1.15fr 1.15fr;
  border: 1px solid var(--linha-ouro); border-radius: 14px; overflow: hidden;
  background: var(--marfim); box-shadow: 0 12px 30px rgba(13, 27, 42, .06);
}
.mom-cabeca {
  margin: 0; padding: 13px 16px; font-size: .88rem; font-weight: 600; text-align: center;
  background: var(--marfim-2); border-bottom: 1px solid var(--linha-ouro);
}
.mom-grupo { grid-column: 2; color: var(--tinta-suave); }
/* ⚠️ cobre de FUNDO com letra clara: e o unico jeito de o cobre carregar texto sem sujar */
.mom-coravia { grid-column: 3; background: var(--ouro); color: #fff; border-bottom-color: var(--ouro); }
.mom-linha { display: contents; }
.mom-linha > p { margin: 0; padding: 15px 16px; border-top: 1px solid rgba(199, 141, 68, .18); font-size: .92rem; line-height: 1.45; }
.momento-tabela .mom-linha:first-of-type > p { border-top: 0; }
.mom-tema {
  display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--tinta);
  background: var(--marfim-2);
}
.mom-tema svg { width: 19px; height: 19px; color: var(--ouro-escuro); flex: 0 0 auto; }
.mom-antes { color: var(--tinta-suave); }
.mom-depois { color: var(--tinta); background: rgba(199, 141, 68, .07); }
.mom-depois strong { color: var(--tinta); }
@media (max-width: 620px) {
  /* no celular o tema vira faixa cheia e os dois lados ficam lado a lado embaixo dela:
     tres colunas em 360px espremem "Cada pessoa responde" em cinco linhas */
  .momento-tabela { grid-template-columns: 1fr 1fr; }
  .mom-cabeca { padding: 10px 12px; font-size: .82rem; }
  .mom-grupo { grid-column: 1; }
  .mom-coravia { grid-column: 2; }
  .mom-tema { grid-column: 1 / -1; padding: 11px 14px; font-size: .86rem; letter-spacing: .02em; }
  .mom-linha > p { padding: 12px 14px; font-size: .88rem; }
  .mom-antes, .mom-depois { border-top: 0; }
}

/* ---------- 5. a colecao em carrossel (desenho `simbolos.png`) ---------- */
.sim-titulo { position: relative; display: inline-block; }
.sim-coracao {
  width: 34px; height: 34px; color: var(--ouro); opacity: .55;
  vertical-align: middle; margin-left: 8px;
}
.sim-palco {
  position: relative; margin: 34px auto 0; max-width: 1000px;
  background: var(--marfim); border: 1px solid var(--linha-ouro); border-radius: 22px;
  padding: 22px; box-shadow: 0 18px 44px rgba(13, 27, 42, .07);
}
.sim-quadro { min-height: 1px; }
.sim-slide { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .sim-slide { grid-template-columns: 1.05fr 1fr; gap: 34px; } }
.sim-slide[hidden] { display: none; }
.sim-foto {
  display: block; width: 100%; height: auto; aspect-ratio: 620 / 589;
  object-fit: cover; border-radius: 16px; background: var(--pessego-claro);
}
.sim-painel { padding: 4px 6px; }
.sim-conta { margin: 0 0 10px; font-size: .84rem; letter-spacing: .1em; color: var(--ouro-escuro); }
.sim-painel h3 { margin: 0 0 8px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.sim-frase { margin: 0; font-size: 1.02rem; color: var(--ouro-escuro); }
.sim-risco { display: block; width: 44px; height: 1px; background: var(--linha-ouro); margin: 16px 0; }
.sim-desc { margin: 0 0 20px; font-size: .96rem; line-height: 1.55; color: var(--tinta-suave); max-width: 34em; }

/* as duas setas do palco. A da esquerda e clara e a da direita e a tinta da marca: o desenho
   dela diz, so pela cor, para que lado a colecao anda. */
.sim-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: 1px solid var(--linha-ouro);
  background: #fff; color: var(--tinta); box-shadow: 0 8px 20px rgba(13, 27, 42, .12);
  transition: transform .16s ease, box-shadow .16s ease;
}
.sim-seta svg { width: 21px; height: 21px; }
.sim-seta:hover { box-shadow: 0 12px 26px rgba(13, 27, 42, .18); }
.sim-seta-esq { left: -22px; }
.sim-seta-dir { right: -22px; background: var(--tinta); color: #fff; border-color: var(--tinta); }
@media (max-width: 1060px) { .sim-seta-esq { left: 6px; } .sim-seta-dir { right: 6px; } }
@media (max-width: 860px) {
  /* no celular as setas saem de cima da imagem e viram uma dupla embaixo do painel: seta
     sobreposta em foto de 360px cobre justamente o rosto de quem gravou */
  .sim-palco { padding: 16px 16px 66px; }
  .sim-seta { top: auto; bottom: 16px; transform: none; width: 44px; height: 44px; }
  .sim-seta-esq { left: 50%; margin-left: -50px; }
  .sim-seta-dir { right: 50%; margin-right: -50px; }
}

/* a tira de miniaturas. ⚠️ Quem rola e ELA, nunca a pagina. */
.sim-tira-linha { display: flex; align-items: center; gap: 10px; margin: 20px auto 0; max-width: 1000px; }
.sim-tira {
  flex: 1 1 auto; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: 6px 2px 10px; scrollbar-width: thin;
}
.sim-mini {
  flex: 0 0 108px; max-width: 108px; scroll-snap-align: center;
  background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
  text-align: center;
}
.sim-mini img {
  display: block; width: 100%; height: auto; aspect-ratio: 620 / 589; object-fit: cover;
  border-radius: 10px; border: 2px solid transparent; background: var(--pessego-claro);
  transition: border-color .16s ease, transform .16s ease;
}
.sim-mini span { display: block; margin-top: 7px; font-size: .78rem; line-height: 1.25; color: var(--tinta-suave); }
.sim-mini:hover img { transform: translateY(-2px); }
.sim-mini.sel img { border-color: var(--ouro); box-shadow: 0 8px 18px rgba(199, 141, 68, .28); }
.sim-mini.sel span { color: var(--tinta); font-weight: 600; }
.sim-tira-seta {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: 1px solid var(--linha-ouro);
  background: var(--marfim); color: var(--tinta-suave);
}
.sim-tira-seta svg { width: 17px; height: 17px; }
.sim-tira-seta:hover { color: var(--tinta); border-color: var(--ouro); }
@media (max-width: 560px) { .sim-tira-seta { display: none; } .sim-mini { flex-basis: 92px; max-width: 92px; } }

.sim-nota {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 16px 0 4px; font-size: .95rem; color: var(--tinta-suave);
}
.sim-nota svg { width: 19px; height: 19px; color: var(--ouro); flex: 0 0 auto; }
/* o link de texto com a seta: e o peso certo para a alternativa, e nao mais um botao */
/* ⚠️ O alvo de toque tem 44px de altura, e o filete acompanha só o texto: medido no celular,
   ele nascia com 31px, que é dedo escorregando em link que a pessoa quis tocar. */
.sim-link {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-weight: 600; color: var(--ouro-escuro);
  padding: 11px 2px; min-height: 44px; box-sizing: border-box;
  background-image: linear-gradient(var(--linha-ouro), var(--linha-ouro));
  background-size: 100% 1px; background-position: 2px calc(100% - 10px); background-repeat: no-repeat;
}
.sim-link svg { width: 17px; height: 17px; transition: transform .16s ease; }
.sim-link:hover { color: var(--tinta); background-image: linear-gradient(var(--ouro), var(--ouro)); }
.sim-link:hover svg { transform: translateX(3px); }
.sim-link.claro { color: var(--ouro-claro); background-image: linear-gradient(rgba(221, 183, 126, .45), rgba(221, 183, 126, .45)); }
.sim-link.claro:hover { color: #fdfcfa; background-image: linear-gradient(var(--ouro-claro), var(--ouro-claro)); }

.sim-rodape {
  display: grid; gap: 16px; grid-template-columns: 1fr; margin: 28px auto 0; max-width: 1000px;
  padding: 20px 24px; background: var(--marfim); border: 1px solid var(--linha-ouro);
  border-radius: 16px;
}
@media (min-width: 780px) { .sim-rodape { grid-template-columns: 1fr 1fr; } }
.sim-rodape p {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: .95rem; line-height: 1.5; color: var(--tinta-suave);
}
.sim-rodape svg { width: 30px; height: 30px; color: var(--ouro); flex: 0 0 auto; }
@media (min-width: 780px) {
  .sim-rodape-ouro { border-left: 1px solid var(--linha-ouro); padding-left: 24px; justify-content: flex-end; text-align: right; }
}
.sim-rodape-ouro { color: var(--ouro-escuro); font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 1.05rem; }

/* ---------- 6. a entrega, na faixa da noite ---------- */
.noite-grade { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .noite-grade { grid-template-columns: minmax(240px, .72fr) 1.7fr; gap: 44px; } }
.noite-texto h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin: 0 0 14px; }
.noite-texto .suave { margin: 0 0 20px; max-width: 26em; }
.noite-passos { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 720px) { .noite-passos { grid-template-columns: 1fr auto 1fr auto 1fr; } }
.np-quadro {
  padding: 16px 16px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
}
.np-n { margin: 0 0 12px; font-size: .84rem; font-weight: 600; color: #c3d0dc; }
.np-audio { display: flex; align-items: center; gap: 10px; }
.np-play {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: #fdfcfa; color: var(--tinta);
}
.np-play svg { width: 15px; height: 15px; }
.np-tempo { font-size: .78rem; color: #93a5b5; flex: 0 0 auto; }
.np-fala {
  margin: 12px 0 0; font-family: "Playfair Display", Georgia, serif; font-style: italic;
  font-size: .96rem; line-height: 1.4; color: #dfe7ee;
}
.np-fala em { color: var(--ouro-claro); }
.np-caras { display: flex; align-items: center; gap: 10px; }
.np-cara {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #c3d0dc;
  border: 1px solid rgba(255, 255, 255, .16);
}
.np-cara svg { width: 20px; height: 20px; }
.np-duvida { font-size: 1.2rem; font-weight: 700; color: var(--ouro-claro); background: rgba(199, 141, 68, .18); border-color: rgba(199, 141, 68, .4); }
.np-rosto { position: relative; width: 54px; height: 54px; }
.np-rosto > svg { width: 100%; height: 100%; color: #c3d0dc; }
.np-coracao {
  position: absolute; right: -8px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ouro); color: #0d1b2a;
}
.np-coracao svg { width: 14px; height: 14px; }
.np-seta { color: rgba(199, 141, 68, .7); align-self: center; }
.np-seta svg { width: 34px; height: 20px; display: block; }
@media (max-width: 719px) { .np-seta { display: none; } }
/* a fita dos tres diferenciais de emocao, no rodape da faixa */
.noite-fita {
  grid-column: 1 / -1; list-style: none; margin: 26px 0 0; padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px;
}
.noite-fita li { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: #c3d0dc; }
.noite-fita svg { width: 18px; height: 18px; color: var(--ouro-claro); flex: 0 0 auto; }
/* o link do bloco da noite sai do centro: ele acompanha o texto da esquerda */
.centro-nao { text-align: left; margin: 0; }
/* as ondas do primeiro quadro herdam a animacao antiga da faixa da noite */
.np-audio .noite-ondas { height: 26px; margin: 0; flex: 1 1 auto; }

/* ---------- 7. os outros jeitos ---------- */
.jeitos-grade { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .jeitos-grade { grid-template-columns: repeat(3, 1fr); } }
.jeito {
  display: grid; grid-template-columns: 40% 1fr; align-items: center; gap: 0;
  background: var(--marfim); border: 1px solid var(--linha-ouro); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: 0 10px 26px rgba(13, 27, 42, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.jeito:hover { transform: translateY(-3px); border-color: var(--ouro); box-shadow: 0 18px 38px rgba(13, 27, 42, .12); }
/* 🪤 O FILHO DO GRID É O <picture>, NÃO O <img> (defeito meu, pego medindo antes de subir).
   envida_foto_tag() devolve <picture><source webp><img class="jeito-foto"></picture>, então a
   classe cai no <img> lá dentro e o grid alinha o <picture>, que nasce inline e sem altura: os
   três cartões apareceram SEM FOTO NENHUMA, com o texto sozinho e nenhum erro no console. */
.jeito > picture { display: block; width: 100%; height: 100%; min-height: 138px; }
.jeito-foto { width: 100%; height: 100%; min-height: 138px; object-fit: cover; display: block; }
.jeito-texto { padding: 18px 18px 18px 20px; }
.jeito-texto h3 { margin: 0 0 6px; font-size: 1.1rem; line-height: 1.25; }
.jeito-texto .suave { margin: 0 0 10px; font-size: .9rem; }
.jeito-link { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--ouro-escuro); }
.jeito-link svg { width: 15px; height: 15px; transition: transform .16s ease; }
.jeito:hover .jeito-link svg { transform: translateX(3px); }

/* ---------- 8. a faixa de confianca em quatro ---------- */
.confia-fita { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .confia-fita { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .confia-fita { grid-template-columns: repeat(4, 1fr); } }
.confia-item {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 18px 16px; background: var(--marfim); border: 1px solid var(--linha-ouro);
  border-radius: 14px;
}
.confia-item h3 { margin: 0 0 4px; font-size: .99rem; font-family: Inter, system-ui, sans-serif; font-weight: 600; }
.confia-item .suave { margin: 0; font-size: .87rem; line-height: 1.45; }
.confia-icone {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; background: var(--pessego-claro);
  color: var(--ouro-escuro); border: 1px solid var(--linha-ouro);
}
.confia-icone svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .sim-mini img, .sim-link svg, .jeito, .jeito-link svg, .viver-seta { transition: none; }
}

/* ⚠️ CSS QUE FICOU SEM DONO EM 10/08/2026, e está anotado em vez de apagado de propósito.
   A home remodelada tirou seis seções da página, e SÓ ELA usava estas regras (conferido com
   varredura em views/ e nos .php da raiz, nenhum outro arquivo as escreve):

     .oc-pilula · .oc-grupo · .esteira · .esteira-pista   (a esteira de ocasiões)
     .comparar-quadro · .comparar-linha · .comparar-lado · .comparar-realce  (o quadro de 6 linhas)
     .prot-grade · .prot-item · .prot-icone · .prot-cabeca (as sete coisas e a confiança antiga)
     .cam-botao · .cam-nome · .cam-nota · .cartao.caminho  (os quatro produtos com preço)
     .rc-caixa · .rc-linha (a caixa de dúvidas) · .destaque-data (o bloco sazonal)

   Elas NÃO foram apagadas hoje por dois motivos, os dois honestos: subir uma mudança por vez é
   regra da casa, e cada uma dessas seções pode voltar por decisão dela (o bloco sazonal, por
   exemplo, volta sozinho todo ano se ela quiser a home com data). São cerca de 7 KB num arquivo
   de 213 KB. A limpeza é uma leva própria, depois de a home nova ficar de pé por alguns dias.
   ⚠️ `.prot-nota` e `.prot-nota-selo` CONTINUAM VIVAS: é a nota do tempo no ar, que a faixa de
   confiança nova ainda usa. Não caia na tentação de apagar o bloco `.prot-*` inteiro. */

/* ═══ A PORTA DO PAINEL (10/08/2026, achado dela: "que simbolo e aquele? parece erro") ═══
   O selo fixo de arvore saiu e entrou A PECA DELA, com a miniatura real do simbolo, para o
   desenho e o titulo ("Cuidando da mesa") contarem a MESMA historia. */
.porta-painel { text-align: center; }
.porta-peca {
  display: block; width: 148px; height: auto; aspect-ratio: 620 / 589; object-fit: cover;
  border-radius: 14px; margin: 0 auto 14px; background: var(--pessego-claro, #f7ede2);
  box-shadow: 0 10px 24px rgba(13, 27, 42, .12);
}
.porta-painel .kicker { margin-bottom: 4px; }
.porta-painel h2 { margin-top: 0; }
.porta-painel form { text-align: left; }