/* ==========================================================================
   Andreza Furtado Carvalho — Psicóloga
   styles.css — tokens, layout, componentes e movimento.
   A origem de cada decisão visual está em DESIGN.md.

   Sumário
     1. Fontes            9. Abordagem        17. Flutuantes
     2. Tokens           10. Como funciona    18. Modal
     3. Base             11. Sanfonas         19. Movimento (revelação)
     4. Seções e arcos   12. Avaliações       20. Responsivo
     5. Botões           13. Onde atendo      21. Movimento reduzido
     6. Cabeçalho        14. Info práticas    22. Mais contraste
     7. Hero             15. Chamada final    23. Alto contraste (Windows)
     8. Sobre            16. Rodapé           24. Impressão
   ========================================================================== */

/* ---------- 1. Fontes (self-hosted, sem Google Fonts em runtime) ----------
   As duas famílias são variáveis. O Newsreader tem eixo ÓPTICO (opsz 6–72),
   e isso não é detalhe: no tamanho de display ele afina as hastes e fecha o
   espacejamento; no tamanho de texto ele engrossa e abre. É a diferença entre
   uma serifa que parece desenhada para a página e uma que parece esticada. */
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-italic-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('fonts/karla-variable.woff2') format('woff2');
  /* 400–700 é a faixa real do arquivo (pedida assim ao servir a fonte: a
     faixa cheia pesava 32 kB para pesos que o site nunca usa). */
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ----------
   Contrastes conferidos por `node verificar-contraste.js`, que lê as cores
   daqui. Regra que não se quebra: nenhuma cor de texto de corpo abaixo de
   4,5:1 sobre QUALQUER superfície onde ela apareça.

   Paleta refeita em 24/09/2026 a partir do logotipo real que a Andreza
   mandou (ver memoria.md, rodada de mesma data) — antes disso, vinho/ocre
   era uma aproximação minha, sem o material dela. As três cores-fonte,
   extraídas por amostragem de pixel do arquivo dela (não "no olho"):
   o tom do texto do logotipo (malva — #87515A), o rosa de fundo dele
   (#FCE4E4, hoje --blush) e o dourado das bagas da ilustração (#C0A25A).
   Toda a família --malva e --ocre é derivada dessas três em HSL, mantendo
   o papel de cada degrau (qual serve de texto, qual de hover, qual só
   decora) e os mesmos alvos de contraste de antes — nenhum ficou mais
   fraco. O motivo de "vinho" ter virado "malva": o nome antigo descrevia
   uma cor que não existe mais; segurar o nome só porque dá trabalho trocar
   é o tipo de dívida que este arquivo tenta não acumular. */
:root {
  /* — Superfícies claras, do mais claro ao mais quente — */
  --papel: #FBF6F6;
  --areia: #F8EFF1;
  --argila: #F4E9EB;
  --blush: #FCE4E4;       /* o rosa exato do fundo do logotipo dela */
  --linho: #EBDBDF;
  --filete: #E3CED4;
  --borda: #8E676D;       /* borda de controle — 3,65:1 na pior superfície */

  /* — Texto — */
  --tinta: #281A1C;       /* 12,54:1 na pior superfície clara */
  --tinta-suave: #6F4D53; /* 5,50:1 na pior superfície clara */

  /* — Malva: a marca, em cinco graus — tom extraído do texto do logotipo */
  --malva-brilho: #AB3F51; /* só em gradiente e brilho; 4,42:1 se virar texto */
  --malva: #793E48;        /* links, botão primário — 6,06:1 mín. */
  --malva-fundo: #602F37;  /* hover do primário */
  --malva-noite: #4D232A;  /* títulos de seção — 9,90:1 mín. */

  /* — Ocre: três graus, cada um com um trabalho — tom extraído das bagas
     douradas do logotipo.
     ATENÇÃO: --ocre mede 3,14:1 na pior superfície clara. Serve para filete,
     ícone, numeral grande (≥24px) e borda. Texto pequeno dourado usa
     --ocre-escuro; sobre fundo escuro, --ocre-claro. Trocar um pelo outro
     "porque ficou mais bonito" derruba a página para fora do AA. */
  --ocre-escuro: #775822; /* texto pequeno dourado — 4,91:1 mín. */
  --ocre: #9A762D;        /* decorativo e UI */
  --ocre-claro: #E2C98D;  /* só sobre fundo escuro — 9,57:1 */

  /* — Os momentos escuros — agora graus de --malva, não mais um vinho à
     parte: mesma função na página (contraste dramático do hero e das
     seções de pausa), cor extraída da mesma fonte que o resto. */
  --noite: #2A1417;
  --noite-cartao: #381C21;
  --noite-profundo: #1D0C0F;
  --rosa-papel: #EAC3C9;  /* texto de apoio sobre escuro — 9,69:1 */

  /* — Tipografia — */
  --fonte-titulo: 'Newsreader', Georgia, 'Times New Roman', serif;
  --fonte-texto: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-display: clamp(2.6rem, 6vw, 4.75rem);
  --t-h2: clamp(1.875rem, 3.4vw, 2.875rem);
  --t-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --t-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
  --t-corpo: 1.0625rem;   /* 17px — lê melhor que 16 em texto longo */
  --t-apoio: 0.9375rem;
  --t-legenda: 0.875rem;
  --t-etiqueta: 0.75rem;

  /* — Espaçamento, base 4px — */
  --e1: 4px;  --e2: 8px;   --e3: 12px;  --e4: 16px;  --e5: 20px;
  --e6: 24px; --e8: 32px;  --e10: 40px; --e12: 48px; --e16: 64px;

  /* — Geometria —
     Cantos quase retos de propósito: a página é editorial, não é painel de
     aplicativo. As duas curvas generosas do projeto são o retrato e o arco
     que separa as seções — as duas repetem a marca. */
  --r: 3px;
  --r-md: 10px;
  --arco: 46% 46% 6px 6px / 34% 34% 6px 6px;
  --h-arco: clamp(32px, 4.5vw, 64px);

  /* — Sombras, em três degraus — */
  --sombra-baixa: 0 1px 2px rgba(40, 26, 28, .05), 0 8px 24px -16px rgba(40, 26, 28, .28);
  --sombra-media: 0 2px 4px rgba(40, 26, 28, .05), 0 16px 32px -20px rgba(40, 26, 28, .34);
  --sombra-alta: 0 2px 4px rgba(40, 26, 28, .06), 0 28px 60px -32px rgba(40, 26, 28, .45);

  --altura-cabecalho: 72px;
  --largura-envelope: 1180px;

  /* A página é clara, ponto. Sem esta declaração, um sistema em modo escuro
     faz o navegador pintar barra de rolagem e controles nativos em escuro
     sobre o papel creme. */
  color-scheme: light;

  /* — Tempo —
     Uma curva só para tudo que é interface (saída rápida, chegada macia) e
     uma mais longa para entrada de conteúdo. */
  --curva: cubic-bezier(.22, .61, .36, 1);
  --curva-suave: cubic-bezier(.16, 1, .3, 1);
  --transicao: 220ms var(--curva);

}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + env(safe-area-inset-top) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grão de papel sobre a página inteira. Fixo, então não repinta no scroll;
   é o que impede as superfícies grandes de parecerem plástico chapado. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.36'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
  /* Só age quando uma palavra sozinha não cabe na linha — em tamanho normal
     nada muda. Existe porque o português tem palavras longas e os títulos
     são grandes: com a fonte do sistema em 200%, "presencialmente" media
     431px numa coluna de 335px e empurrava a página inteira para a rolagem
     horizontal (caça a bugs de 19/09/2026). Sem `hyphens: auto` de
     propósito: hifenizar muda a quebra também em tamanho normal, e a
     composição dos títulos foi ajustada à mão. */
  overflow-wrap: break-word;
  /* Eixo óptico no grau de display: hastes mais finas, espacejamento fechado. */
  font-variation-settings: 'opsz' 60;
}

/* `overflow-wrap` aqui é preventivo, não corretivo: nenhum texto de corpo
   atual precisa dele (a rolagem horizontal em 200% vinha dos títulos, da
   ficha e do rodapé, já corrigidos). Fica porque só age quando uma palavra
   sozinha não cabe — e um e-mail ou link longo colado no texto um dia é
   exatamente esse caso. */
p { margin: 0 0 var(--e5); text-wrap: pretty; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

a { color: var(--malva); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--malva-fundo); }

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

:focus-visible {
  outline: 3px solid var(--malva);
  outline-offset: 3px;
  border-radius: 2px;
}
.secao--noite :focus-visible,
.hero :focus-visible,
.chamada :focus-visible,
.rodape :focus-visible { outline-color: var(--ocre-claro); }

::selection { background: var(--malva); color: var(--papel); }

/* Comportamento de toque, para tudo que é clicável de uma vez só.

   touch-action: manipulation — desliga a espera de ~300ms que o navegador
   móvel faz para descobrir se o toque vira duplo-toque-para-zoom. Num site
   cujo objetivo inteiro é levar ao WhatsApp, esse terço de segundo aparece
   em cada botão.

   -webkit-tap-highlight-color — o padrão é um retângulo cinza-azulado que
   pisca no toque, alheio à paleta. Trocado por um malva translúcido, que é
   a mesma cor do foco e do estado ativo. */
a, button, summary, [role="button"], label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--malva) 18%, transparent);
}

.pular {
  position: absolute;
  left: var(--e4);
  top: -100px;
  z-index: 1000;
  padding: var(--e3) var(--e5);
  background: var(--malva);
  color: var(--papel);
  font-weight: 600;
  border-radius: var(--r);
  text-decoration: none;
  top: var(--e4);
  transform: translateY(calc(-100% - var(--e4) * 2));
  transition: transform var(--transicao);
}
.pular:focus { transform: none; color: var(--papel); }
/* O <main> recebeu tabindex="-1" para o skip-link poder mover o foco para
   ele. Sem esta regra, o anel de foco desenharia um retângulo em volta da
   página inteira — um contorno de 8 mil pixels, não um sinal de "chegou
   aqui". Mas apagar o anel sem nada no lugar troca um problema por outro
   (revisão de 18/09/2026, checklist de interface): quem navega por teclado
   perderia toda confirmação visual do salto, sobrando só a rolagem — que não
   é suficiente para quem usa ampliador de tela ou não acompanha o cursor.
   Uma barra de 3px no topo do conteúdo substitui o contorno: mesma função de
   "você está aqui", sem desenhar ao redor da página inteira. */
/* Cor ocre-clara, não malva: o topo de #conteudo sempre coincide com o
   início do hero (primeiro filho), que é escuro — a mesma razão pela qual
   :focus-visible já troca para ocre-claro em toda região escura, logo
   abaixo. */
#conteudo:focus { outline: none; }
#conteudo:focus-visible::before {
  content: "";
  display: block;
  height: 3px;
  margin-bottom: -3px;
  background: var(--ocre-claro);
}

.envelope {
  width: 100%;
  max-width: var(--largura-envelope);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}
.envelope--estreito { max-width: 820px; }

/* ==========================================================================
   4. Seções, cabeçalhos de seção e o ARCO
   ========================================================================== */
.secao { padding-block: clamp(72px, 9vw, 128px); position: relative; }
.secao--papel { background: var(--papel); }
.secao--areia { background: var(--areia); }
/* isolation: sem ela a seção não cria contexto de empilhamento, e o ::after do
   brilho do ponteiro (z-index -1) cai ATRÁS do próprio fundo da seção. */
.secao--noite { background: var(--noite); color: var(--papel); isolation: isolate; }

/* O arco é a marca em escala arquitetônica: cada bloco novo NASCE do anterior
   em vez de ser empilhado com uma borda reta. Meia elipse muito larga e baixa
   (112% de largura, ~64px de altura), ancorada no topo da seção e transbordando
   para dentro da seção de cima — que fica com a folga extra da classe
   .secao--folga-arco para o texto não passar por baixo dele. */
.arco-topo { position: relative; }
.arco-topo::before {
  content: "";
  position: absolute;
  /* left/right em 0, não em -6vw: qualquer estouro lateral aqui vira barra de
     rolagem horizontal, porque o ::before fica FORA da seção (bottom:100%) e
     portanto não pode ser cortado por um overflow:hidden do pai. */
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: -1px;            /* evita fresta de subpixel no zoom */
  height: var(--h-arco);
  background: var(--cor-arco, var(--papel));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.secao--papel.arco-topo { --cor-arco: var(--papel); }
.secao--areia.arco-topo { --cor-arco: var(--areia); }
.secao--noite.arco-topo { --cor-arco: var(--noite); }

/* A chamada final tem um halo quente saindo do topo (.chamada__aurora). Se o
   arco fosse --noite chapado, apareceria uma costura horizontal exatamente na
   base dele. O mesmo halo é repetido aqui, ancorado na base do arco. */
.chamada.arco-topo::before {
  background:
    radial-gradient(70% 180% at 50% 100%, color-mix(in srgb, var(--ocre) 30%, transparent), transparent 70%),
    var(--noite);
}

.secao--folga-arco { padding-bottom: calc(clamp(72px, 9vw, 128px) + var(--h-arco)); }

.secao__cabecalho { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 72px); }
.secao__titulo { font-size: var(--t-h2); color: var(--malva-noite); }
.secao__cabecalho--claro .secao__titulo { color: var(--papel); }
.secao__linha {
  margin-top: var(--e5);
  font-size: var(--t-lead);
  color: var(--tinta-suave);
  max-width: 40rem;
}
.secao__cabecalho--claro .secao__linha { color: var(--rosa-papel); }

.sobretitulo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0 0 var(--e4);
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ocre-escuro);
}
.sobretitulo--claro { color: var(--ocre-claro); }

/* Antes havia um numeral serifado (01…08) antes de cada etiqueta. Saiu em
   16/09/2026: numeração só se justifica quando a ordem carrega informação que
   o leitor precisa — um processo, uma linha do tempo. As seções aqui são
   TÓPICOS, não uma sequência, e a posição na página já é dita, com mais
   precisão, pela barra de progresso do cabeçalho. Era decoração fingindo ser
   estrutura, e é o recurso mais "template" que o desenho tinha.

   Ficou o filete, que é o que de fato dava o ritmo de publicação impressa. */
.sobretitulo__filete {
  width: clamp(28px, 5vw, 64px);
  height: 1px;
  background: var(--ocre);
  opacity: .65;
  flex: none;
}
.sobretitulo--claro .sobretitulo__filete { background: var(--ocre-claro); }

/* ==========================================================================
   5. Botões
   ========================================================================== */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 48px;
  padding: var(--e3) var(--e6);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  /* overflow:hidden não é enfeite: a cortina do hover (::before) nasce
     deslocada 101% para BAIXO do botão, e sem o recorte ela aparece como um
     retângulo malva pendurado sob cada botão da página. Já tentei tirar. */
  overflow: hidden;
  isolation: isolate;
  transition: color var(--transicao), border-color var(--transicao),
              box-shadow var(--transicao), transform var(--transicao);
}
/* A "cortina" que sobe no hover. Fica atrás do texto (z-index -1 dentro do
   próprio botão, que é um contexto de empilhamento por causa do isolation). */
.botao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;   /* no lugar do overflow:hidden, que cortava texto */
  transform: translateY(101%);
  transition: transform 380ms var(--curva-suave);
}
.botao:hover::before, .botao:focus-visible::before { transform: none; }

/* A seta só existe onde o botão leva a algum lugar; nasce recolhida. */
.botao--seta::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, 1px);
  opacity: .55;
  transition: transform var(--transicao), opacity var(--transicao);
}
.botao--seta:hover::after,
.botao--seta:focus-visible::after { transform: rotate(45deg) translate(0, -2px); opacity: 1; }

.botao--primario { background: var(--malva); color: var(--papel); }
.botao--primario::before { background: var(--malva-fundo); }
.botao--primario:hover,
.botao--primario:focus-visible { color: var(--papel); box-shadow: var(--sombra-media); }

.botao--contorno { background: transparent; color: var(--malva); border-color: var(--borda); }
.botao--contorno::before { background: var(--linho); }
.botao--contorno:hover,
.botao--contorno:focus-visible { color: var(--malva-fundo); border-color: var(--malva); }

.botao--contorno-claro {
  background: transparent;
  color: var(--papel);
  border-color: rgba(251, 248, 244, .42);
}
.botao--contorno-claro::before { background: rgba(251, 248, 244, .12); }
.botao--contorno-claro:hover,
.botao--contorno-claro:focus-visible { color: var(--papel); border-color: var(--ocre-claro); }

.botao--claro { background: var(--papel); color: var(--malva-noite); }
.botao--claro::before { background: var(--linho); }
.botao--claro:hover,
.botao--claro:focus-visible { color: var(--malva-noite); box-shadow: var(--sombra-alta); }

.botao--compacto { min-height: 44px; padding: var(--e2) var(--e5); font-size: var(--t-apoio); }
.botao--largo { width: 100%; }
.botao--magnetico { will-change: transform; }

/* Link de texto com sublinhado que se desenha da esquerda */
.link-discreto {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;   /* alvo de toque: 27px era pequeno demais */
  background: none;
  border: 0;
  padding: 0 0 2px;
  font: inherit;
  font-size: var(--t-apoio);
  color: var(--malva);
  text-decoration: none;
  cursor: pointer;
}
.link-discreto::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform 300ms var(--curva);
}
.link-discreto:hover::after,
.link-discreto:focus-visible::after { transform: scaleX(0); transform-origin: left; }
.link-discreto:hover { color: var(--malva-fundo); }

/* ==========================================================================
   6. Cabeçalho
   ========================================================================== */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Sem efeito em navegador comum (env() resolve para 0). Existe para quando
     o site é adicionado à tela de início: o manifest declara
     "display": "standalone", e viewport-fit=cover libera a página para
     desenhar sob o notch — sem este respiro, o cabeçalho ficaria parcialmente
     atrás dele. */
  padding-top: env(safe-area-inset-top);
  background: rgba(251, 248, 244, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), box-shadow var(--transicao),
              background-color var(--transicao);
}
/* Enquanto está no topo, o cabeçalho não tem borda — ele "pousa" na página só
   depois que o conteúdo começa a passar por baixo (classe posta pelo main.js). */
.cabecalho.pousado {
  border-bottom-color: var(--filete);
  box-shadow: 0 1px 24px -14px rgba(40, 26, 28, .5);
}
.cabecalho__faixa {
  max-width: var(--largura-envelope);
  margin-inline: auto;
  padding: var(--e3) clamp(20px, 5vw, 48px);
  min-height: var(--altura-cabecalho);
  display: flex;
  align-items: center;
  gap: var(--e6);
}

.marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* alvo de toque */
  gap: var(--e3);
  text-decoration: none;
  color: var(--tinta);
  margin-inline-end: auto;
  /* `flex: none` + `white-space: nowrap` no nome (logo abaixo) faziam o par
     que estourava a página com a fonte do navegador em 200%: a marca media
     400px numa tela de 375px e nada cedia — a página inteira ganhava rolagem
     horizontal (achado na caça a bugs de 19/09/2026).
     Agora ela encolhe se precisar. Em tamanho normal nada muda: o conteúdo
     cabe, e `flex-shrink` só age quando falta espaço. */
  flex: 0 1 auto;
  min-width: 0;
}
/* display: inline-block é essencial, não estético. .marca__sinal é um <span>
   (inline por padrão) e um elemento inline não-substituído IGNORA width/height
   — funcionava no cabeçalho só porque o pai (.marca) é inline-flex, e um
   flex item é "blockificado" automaticamente. No rodapé, .rodape__marca é um
   <div> de bloco simples (empilha ícone → nome → bio), sem flex nenhum: sem
   este display, o span ficava inline de verdade, o width/height dele não
   surtia efeito, e o <svg> com width/height:100% subia a árvore procurando um
   ancestral com tamanho definido — encontrava a célula do grid do rodapé,
   esticada a ~480px pelo align-items:stretch padrão, e renderizava a marca a
   340×480px em vez de 46×46px, empurrando "Andreza Furtado Carvalho" e a bio
   para dentro da caixa do CVV logo abaixo. */
.marca__sinal {
  display: inline-block;
  width: 30px;
  height: 30px;
  flex: none;
  /* Redondo, não --r (quase reto): um selo quadrado deste tamanho, colado
     em texto corrido, lia como "quadradão" — círculo é o tratamento padrão
     pra foto pequena ao lado de nome (mesma lógica de avatar). A imagem
     usada aqui (icone-512-maskable.png, não a icone-192 do favicon) já tem
     margem de sobra ao redor da ilustração pensada pra sobreviver a corte
     circular — é a mesma arte gerada pro ícone "maskable" do Android. */
  border-radius: 50%;
  overflow: hidden;
}
.marca__sinal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marca__sinal--grande { width: 46px; height: 46px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marca__texto strong {
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.01em;
  /* Sem `white-space: nowrap`: em tamanho normal o nome cabe numa linha
     sozinho (≈180px numa faixa de ≈220px, mesmo em 320px de tela), então o
     nowrap não estava segurando nada — só impedia a quebra justamente quando
     ela é necessária, com a fonte do sistema aumentada. Deixar quebrar faz o
     cabeçalho crescer em altura, que é o comportamento certo. */
  font-variation-settings: 'opsz' 18;
}
.marca__texto small {
  font-size: var(--t-etiqueta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.menu { display: none; }
.menu__lista { display: flex; align-items: center; gap: var(--e5); }
.menu__lista a {
  position: relative;
  display: inline-block;
  padding: var(--e2) 0;
  font-size: var(--t-apoio);
  font-weight: 500;
  color: var(--tinta-suave);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transicao);
}
.menu__lista a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ocre);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--curva);
}
.menu__lista a:hover { color: var(--tinta); }
.menu__lista a:hover::after,
.menu__lista a.ativo::after { transform: scaleX(1); transform-origin: left; }
.menu__lista a.ativo { color: var(--malva); font-weight: 600; }

.cabecalho__cta { display: none; }

.cabecalho__progresso {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
/* clip-path, não width. A barra é atualizada a cada quadro de scroll, e
   animar width dispara layout todo quadro. clip-path roda no compositor —
   e, ao contrário de scaleX, não espreme o gradiente (foi por isso que a
   primeira versão usava width). O JS escreve --avanco-pagina de 0 a 100. */
.cabecalho__progresso span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--malva), var(--ocre));
  clip-path: inset(0 calc(100% - var(--avanco-pagina, 0%)) 0 0);
}

/* Menu do celular — <details> nativo, abre sem JS */
.sanfona-menu { position: relative; }
.sanfona-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  font-size: var(--t-apoio);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--transicao), border-color var(--transicao);
}
.sanfona-menu > summary::-webkit-details-marker { display: none; }
.sanfona-menu > summary:hover { background: var(--linho); border-color: var(--malva); }
.sanfona-menu__icone { display: grid; gap: 4px; width: 18px; }
.sanfona-menu__icone i {
  display: block;
  height: 2px;
  background: var(--tinta);
  border-radius: 1px;
  width: 18px;
  margin-left: auto;
  /* scaleX com origem à direita, não width: as barras já são alinhadas à
     direita, então encolher por escala dá o mesmo desenho sem disparar layout. */
  transform-origin: right;
  transition: transform var(--transicao), opacity var(--transicao);
}
.sanfona-menu[open] .sanfona-menu__icone i:first-child { transform: scaleX(.61); }
.sanfona-menu[open] .sanfona-menu__icone i:last-child { transform: scaleX(.61); }

.sanfona-menu__painel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: min(88vw, 320px);
  padding: var(--e5);
  background: var(--papel);
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-alta);
  transform-origin: top right;
  animation: abrir-painel 260ms var(--curva-suave) both;
}
@keyframes abrir-painel {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
}
.sanfona-menu__painel ul { margin-bottom: var(--e4); }
.sanfona-menu__painel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e3) 0;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--filete);
  transition: color var(--transicao), transform var(--transicao);
}
.sanfona-menu__painel a:hover { color: var(--malva); transform: translateX(4px); }
.sanfona-menu__painel li:last-child a { border-bottom: 0; }
.sanfona-menu__painel a.ativo { color: var(--malva); }
.sanfona-menu__painel .botao { color: var(--papel); }

/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--noite);
  color: var(--papel);
  padding-block: clamp(64px, 9vw, 116px) var(--h-arco);
  overflow: hidden;
  isolation: isolate;
}

/* Aurora: dois focos quentes que derivam muito devagar. É o que faz o fundo
   escuro ter profundidade em vez de virar um retângulo preto. */
.hero__aurora {
  position: absolute;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 40% at 74% 16%, color-mix(in srgb, var(--ocre) 38%, transparent), transparent 68%),
    radial-gradient(42% 44% at 14% 78%, color-mix(in srgb, var(--malva-brilho) 42%, transparent), transparent 70%),
    radial-gradient(30% 30% at 52% 46%, color-mix(in srgb, var(--ocre-claro) 14%, transparent), transparent 72%);
  will-change: transform;
}

/* Arco decorativo em escala grande — a marca virada arquitetura. */
.hero__arco-decorativo {
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: -14%;
  width: min(760px, 78vw);
  color: var(--ocre);
  opacity: .16;
  pointer-events: none;
}
.hero__arco-decorativo svg { width: 100%; height: auto; display: block; }

/* Brilho que segue o ponteiro (main.js escreve --mx/--my; sem JS, fica quieto) */
.hero::after,
.secao--noite::after,
.chamada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--curva);
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(217, 169, 78, .10), transparent 65%);
}
.hero.com-ponteiro::after,
.secao--noite.com-ponteiro::after,
.chamada.com-ponteiro::after { opacity: 1; }

.hero__grade {
  position: relative;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-bottom: clamp(48px, 6vw, 88px);
}

.hero__titulo {
  font-size: var(--t-display);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.04;
  margin-bottom: var(--e6);
  font-variation-settings: 'opsz' 72;
}
.hero__titulo em {
  font-style: italic;
  color: var(--ocre-claro);
  /* o itálico do Newsreader é desenhado, não inclinado — merece um pouco
     mais de peso para não parecer mais leve que o texto reto ao lado */
  font-variation-settings: 'opsz' 72, 'wght' 450;
}

.hero__linha {
  font-size: var(--t-lead);
  color: var(--rosa-papel);
  max-width: 34rem;
  margin-bottom: var(--e8);
}
.hero__linha strong { color: var(--papel); font-weight: 600; }

.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* .hero__moldura posiciona (e desenha a moldura deslocada); .hero__retrato é
   só a foto, com a própria vinheta. O selo de nota que motivou separar os
   dois em elementos distintos saiu de vez em 17/09/2026 (decisão dela sobre
   não expor nota/contagem — ver a seção Avaliações), mas a divisão continua
   valendo por conta própria: cada um cuida de uma decoração diferente. */
.hero__moldura {
  position: relative;
  justify-self: center;
  width: min(100%, 380px);
}
.hero__retrato { margin: 0; position: relative; }
.hero__retrato picture { display: block; }
.hero__retrato img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--arco);
  background: var(--noite-cartao);
}
/* Vinheta sutil: as bordas escurecem um pouco para o fundo (almofadas, manta)
   recuar, sem tocar a foto em si — o centro, onde está o rosto, fica intacto. */
.hero__retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--arco);
  background: radial-gradient(ellipse at 50% 38%,
    transparent 42%,
    color-mix(in srgb, var(--noite) 38%, transparent) 100%);
  pointer-events: none;
}
/* Moldura deslocada — o detalhe de assinatura do hero */
.hero__moldura::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px solid var(--ocre);
  border-radius: var(--arco);
  z-index: -1;
  /* transform, não inset: inset dispara layout, transform roda no compositor */
  transition: transform 700ms var(--curva-suave);
}
.hero__moldura:hover::before { transform: translate(-6px, 6px); }
/* Sem a foto no lugar, o bloco vira um espaço sólido, não um ícone quebrado */
.hero__retrato.sem-foto picture { display: none; }
.hero__retrato.sem-foto {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(158deg, #4E2E3B, #35202A 56%, #2E1A24),
    var(--noite-cartao);
  border: 1px solid rgba(217, 169, 78, .22);
  border-radius: var(--arco);
}

/* Faixa de fatos.
   Os separadores são o fundo da lista aparecendo pelos gaps de 1px. Por isso
   a lista NÃO pode carregar o padding do envelope (que agora está num <div>
   em volta): com padding, esse fundo claro também aparecia nas duas margens
   laterais, como uma tarja acesa dos dois lados da faixa. */
.fatos {
  position: relative;
  display: grid;
  gap: 1px;
  background: rgba(230, 219, 204, .18);
  border-top: 1px solid rgba(230, 219, 204, .18);
}
.fatos__item {
  background: var(--noite);
  padding: var(--e5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}
.fatos__rotulo {
  font-size: var(--t-etiqueta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ocre-claro);
  font-weight: 700;
}
.fatos__valor { font-size: var(--t-apoio); color: var(--papel); }


/* ==========================================================================
   8. Sobre
   ========================================================================== */
.sobre__grade { display: grid; gap: clamp(32px, 5vw, 72px); }

.prosa { font-size: var(--t-corpo); color: var(--tinta); max-width: 38rem; }
.prosa__abertura {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.45;
  color: var(--malva-noite);
  font-variation-settings: 'opsz' 28;
}
/* Capitular: a marca editorial mais antiga que existe, e o jeito mais barato
   de a primeira linha não parecer o começo de um e-mail. */
.prosa__abertura::first-letter {
  float: left;
  font-size: 3.6em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--malva);
  font-variation-settings: 'opsz' 72, 'wght' 400;
}

/* A citação e a segunda foto dela: lado a lado quando há largura, empilhados
   quando não há. Se a foto não existir, o main.js remove a figura e o
   grid volta a ser de uma coluna sozinho — sem buraco e sem regra extra. */
/* Flex, e não grid de colunas fixas, por dois motivos concretos:

   1. Numa coluna `auto`, a figura (largura máxima em px) com `img{width:100%}`
      vira uma dependência circular e a coluna colapsa para 0 — a imagem fica
      com tamanho zero e o navegador nem chega a baixá-la (lazy loading ignora
      elemento de área nula).
   2. Com coluna fixa, se a foto não existir e o JS remover a figura, sobra uma
      coluna vazia reservada e o texto fica espremido. Em flex, a citação
      simplesmente reocupa a largura. */
.citacao-com-foto {
  display: flex;
  flex-direction: column;
  gap: var(--e6);
  align-items: center;
  margin-top: var(--e12);
}
.citacao-com-foto > .citacao { flex: 1 1 auto; align-self: stretch; }

/* Foto de apoio: mesmo arco do retrato do hero, em escala menor, com o filete
   ocre repetindo a moldura deslocada. */
.foto-apoio {
  position: relative;
  /* isolation: a moldura deslocada é um ::before com z-index -1. Sem contexto
     de empilhamento próprio, esse -1 sobe até a raiz e a moldura fica ATRÁS do
     fundo da seção — invisível. No hero isso já funcionava porque o .hero
     inteiro tem isolation; aqui a figura precisa do seu. */
  isolation: isolate;
  margin: 0;
  flex: 0 0 auto;
  width: min(100%, 260px);
}
.foto-apoio img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--arco);
  background: var(--argila);
}
.foto-apoio::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--ocre);
  border-radius: var(--arco);
  z-index: -1;
  transition: transform 700ms var(--curva-suave);
}
.foto-apoio:hover::before { transform: translate(-4px, 4px); }

.citacao-com-foto > .citacao { margin-top: 0; }

.citacao {
  position: relative;
  margin: var(--e12) 0 0;
  padding: var(--e6) 0 var(--e6) var(--e10);
  border-left: 2px solid var(--ocre);
}
.citacao::before {
  content: "\201C";
  position: absolute;
  left: var(--e4);
  top: -.08em;
  font-family: var(--fonte-titulo);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--ocre);
  opacity: .32;
}
.citacao p {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.35;
  color: var(--malva-noite);
  margin-bottom: var(--e3);
  font-variation-settings: 'opsz' 40;
}
.citacao cite {
  font-family: var(--fonte-texto);
  font-style: normal;
  font-size: var(--t-etiqueta);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.ficha {
  align-self: start;
  padding: var(--e8);
  background: var(--areia);
  border-top: 2px solid var(--ocre);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.ficha__titulo {
  font-family: var(--fonte-texto);
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ocre-escuro);
  margin-bottom: var(--e5);
}
.ficha__titulo--espacado { margin-top: var(--e8); }
.ficha__lista li + li { margin-top: var(--e5); }
.ficha__chave { display: block; font-size: var(--t-legenda); color: var(--tinta-suave); }
.ficha__valor {
  display: block;
  font-size: var(--t-apoio);
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.45;
}
.ficha__perfis li + li { margin-top: var(--e2); }
.ficha__perfis a {
  display: flex;
  /* wrap + overflow-wrap não são enfeite: cada linha é "rótulo à esquerda,
     arroba à direita", e as duas são palavras que não quebram sozinhas. Numa
     flex row sem wrap, a largura mínima é a SOMA das duas — com a fonte do
     sistema em 200% isso dava 448px, que virava o piso da coluna da ficha,
     que virava o piso da grade do "Sobre", que empurrava a página inteira
     para 532px numa tela de 375px (a rolagem horizontal achada na caça a
     bugs de 19/09/2026 vinha daqui, não do cabeçalho onde ela aparecia).
     Com wrap, a arroba desce para a segunda linha em vez de esticar tudo. */
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--filete);
  font-size: var(--t-apoio);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transicao), transform var(--transicao);
}
.ficha__perfis a span {
  color: var(--tinta-suave);
  font-weight: 400;
  /* "@psiquecomsentido" e "psiandrezacarvalho" são uma palavra só: sem isto,
     mesmo com wrap elas continuam sendo um bloco indivisível mais largo que
     a coluna em fonte grande. */
  overflow-wrap: anywhere;
  transition: color var(--transicao);
}
.ficha__perfis a:hover { color: var(--malva-fundo); transform: translateX(4px); }
.ficha__perfis a:hover span { color: var(--malva-fundo); }

/* ==========================================================================
   9. Abordagem
   ========================================================================== */
.pilares { display: grid; gap: var(--e6); }
.pilar {
  position: relative;
  padding: var(--e8);
  background: var(--papel);
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 420ms var(--curva-suave),
              box-shadow 420ms var(--curva-suave),
              border-color var(--transicao);
}
/* Filete dourado que atravessa o topo do cartão no hover */
.pilar::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--ocre), var(--malva));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--curva-suave);
}
.pilar:hover { transform: translateY(-4px); box-shadow: var(--sombra-media); border-color: var(--linho); }
.pilar:hover::before { transform: scaleX(1); }
.pilar__numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.875rem;
  line-height: 1;
  color: var(--ocre);
  margin-bottom: var(--e4);
  letter-spacing: .08em;
  font-variation-settings: 'opsz' 36;
  transition: color var(--transicao);
}
.pilar:hover .pilar__numero { color: var(--malva); }
.pilar__titulo { font-size: var(--t-h3); color: var(--malva-noite); margin-bottom: var(--e3); }
.pilar p { color: var(--tinta-suave); font-size: var(--t-apoio); }

.nota-sobria {
  margin-top: var(--e12);
  padding-top: var(--e6);
  border-top: 1px solid var(--filete);
  max-width: 42rem;
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--tinta-suave);
  font-variation-settings: 'opsz' 18;
}

/* ==========================================================================
   10. Como funciona
   ========================================================================== */
.processo { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }

.passos { position: relative; display: grid; gap: var(--e10); }
/* Trilho cinza + trilho dourado que avança com o scroll (--avanco, main.js) */
.passos::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--filete);
}
/* Também por clip-path, e pelo mesmo motivo da barra de progresso: isto é
   redesenhado a cada quadro de scroll, e animar height dispara layout. */
.passos::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--ocre), var(--malva));
  clip-path: inset(0 0 calc(100% - var(--avanco, 0) * 1%) 0);
  transition: clip-path 140ms linear;
}
.passo { position: relative; padding-left: 64px; }
.passo__marca {
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--papel);
  border: 2px solid var(--ocre);
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  color: var(--malva);
  z-index: 1;
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao), box-shadow var(--transicao);
}
.passo:hover .passo__marca {
  background: var(--malva);
  border-color: var(--malva);
  color: var(--papel);
  box-shadow: 0 0 0 6px rgba(124, 45, 75, .1);
}
.passo__titulo { font-size: var(--t-h3); color: var(--malva-noite); margin-bottom: var(--e3); }
.passo p { color: var(--tinta-suave); font-size: var(--t-apoio); }

.cartao-conversa {
  position: relative;
  padding: var(--e8);
  background: var(--blush);
  border-radius: var(--r-md);
  border-top: 2px solid var(--malva);
  overflow: hidden;
}
.cartao-conversa__titulo { font-size: var(--t-h3); color: var(--malva-noite); margin-bottom: var(--e4); }
.cartao-conversa p { font-size: var(--t-apoio); color: var(--tinta-suave); }
.cartao-conversa .botao { margin-top: var(--e6); }

/* ==========================================================================
   11. Sanfonas (atendimento e dúvidas)
   ========================================================================== */
.sanfonas { display: grid; gap: var(--e3); }
.sanfona {
  background: var(--papel);
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao),
              background-color var(--transicao);
}
.sanfona:hover { border-color: var(--linho); }
.sanfona[open] { border-color: var(--ocre); box-shadow: var(--sombra-baixa); }
.sanfona > summary {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e5) var(--e6);
  cursor: pointer;
  list-style: none;
  min-height: 56px;
  transition: background-color var(--transicao);
}
.sanfona > summary::-webkit-details-marker { display: none; }
.sanfona > summary:hover { background: var(--argila); }
/* Havia um numeral ocre (01…06) antes de cada pergunta. Saiu em 16/09/2026,
   junto com a numeração das seções e pela mesma razão: ninguém se refere à
   "pergunta 04", então o número não informava nada — só disputava a primeira
   linha com a pergunta. O sinal de + já diz que o bloco abre. */
.sanfona__titulo {
  flex: 1;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 500;
  color: var(--malva-noite);
  line-height: 1.3;
  font-variation-settings: 'opsz' 24;
}
/* Sinal de mais que vira menos — mais legível que uma seta em lista longa */
.sanfona__seta {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.sanfona__seta::before,
.sanfona__seta::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--malva);
  border-radius: 1px;
  transition: transform 340ms var(--curva-suave), opacity 200ms var(--curva);
}
.sanfona__seta::after { transform: rotate(90deg); }
.sanfona[open] .sanfona__seta::after { transform: rotate(0deg); opacity: 0; }

.sanfona__corpo {
  padding: 0 var(--e6) var(--e6);
  font-size: var(--t-apoio);
  color: var(--tinta-suave);
  max-width: 48rem;
}
.sanfona__nota { margin-top: var(--e4); font-size: var(--t-legenda); font-style: italic; }

/* Abertura animada onde o navegador já suporta ::details-content.
   Onde não suporta, abre instantâneo — o conteúdo nunca fica preso. */
@supports selector(::details-content) {
  /* interpolate-size fica AQUI, e não no :root: solto na página inteira, ele
     faria qualquer transição de altura futura animar de/para auto sem que
     ninguém tivesse pedido. */
  .sanfona { interpolate-size: allow-keywords; }
  .sanfona::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 380ms var(--curva-suave), content-visibility 380ms allow-discrete;
  }
  .sanfona[open]::details-content { block-size: auto; }
}

.marcadores { margin-top: var(--e4); display: grid; gap: var(--e2); }
.marcadores li { position: relative; padding-left: var(--e6); }
.marcadores li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 2px;
  background: var(--ocre);
}

/* ==========================================================================
   12. Avaliações
   ========================================================================== */
/* Reduzida em 17/09/2026: era um cartão com número grande + estrelas ao lado
   de um carrossel de 4 depoimentos (ver memoria.md). Por decisão dela, virou
   só texto + link — mantido centralizado em vez de alinhado à esquerda
   porque, sem a coluna de número ocupando peso visual do outro lado, um
   bloco de texto sozinho colado à esquerda parecia truncado. */
.nota-google {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--e5);
  padding: var(--e6) var(--e8);
  background:
    linear-gradient(120deg, rgba(217, 169, 78, .10), transparent 58%),
    var(--noite-cartao);
  border-radius: var(--r-md);
  border-left: 3px solid var(--ocre-claro);
  text-align: center;
}
.nota-google__texto { margin: 0; color: var(--rosa-papel); font-size: var(--t-apoio); }

/* ==========================================================================
   13. Onde atendo
   ========================================================================== */
.locais { display: grid; gap: var(--e6); align-items: start; }
.local {
  padding: var(--e8);
  background: var(--areia);
  border-radius: var(--r-md);
  border-top: 2px solid var(--malva);
}
.local--online { border-top-color: var(--ocre); background: var(--argila); }
.local__titulo { font-size: var(--t-h3); color: var(--malva-noite); margin-bottom: var(--e4); }
/* Foto do consultório, antes do endereço. Some sozinha se o arquivo faltar. */
.foto-local {
  margin: 0 0 var(--e6);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--borda);
  line-height: 0;
}
.foto-local img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  background: var(--argila);
}

.local__endereco {
  font-style: normal;
  font-size: var(--t-apoio);
  line-height: 1.6;
  color: var(--tinta);
  margin-bottom: var(--e5);
}
.local__chamada { font-size: var(--t-apoio); color: var(--tinta-suave); }

/* Arco da marca como peso visual do cartão online — o par dele (Suzano) tem
   uma foto, e sem nada aqui a dupla fica desequilibrada. Decorativo puro:
   aria-hidden no HTML, e some na impressão junto com as fotos. */
.local__arte {
  display: block;
  margin: var(--e5) 0 var(--e6);
  color: var(--ocre);
  opacity: .32;
}
.local__arte svg { width: 100%; height: auto; display: block; }
.local__dados { margin: 0 0 var(--e6); display: grid; gap: var(--e4); }
.local__dados div { display: grid; gap: 2px; }
/* Sobe para colar no <dl> (que já tem margin-bottom: e6) em vez de somar mais
   um respiro embaixo dele — dois e6 seguidos (dl + nota) abriam um vão largo
   demais antes do mapa. */
.local__nota { margin: calc(var(--e6) * -1) 0 var(--e6); font-size: var(--t-legenda); font-style: italic; color: var(--tinta-suave); }
.local__dados dt {
  font-size: var(--t-etiqueta);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ocre-escuro);
  font-weight: 700;
}
.local__dados dd { margin: 0; font-size: var(--t-apoio); color: var(--tinta); }

/* O mapa começa como um cartão-link (nenhum terceiro carregado) e só vira
   iframe quando a pessoa clica — ver o comentário no index.html. As duas
   formas compartilham esta caixa, por isso ela define tamanho e borda. */
.local__mapa {
  position: relative;
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--borda);
  margin-bottom: var(--e5);
  line-height: 0;
  text-decoration: none;
  background: var(--linho);
  /* O mapa do Google é azul-acinzentado e destoa da página inteira. Uma
     dessaturação leve o traz para a paleta sem prejudicar a leitura das ruas;
     no hover ele volta ao normal, para quem está de fato procurando o caminho. */
  filter: saturate(.72) sepia(.12) contrast(1.02);
  transition: filter 420ms var(--curva);
}
.local__mapa:has(iframe):hover, .local__mapa:focus-within { filter: none; }
.local__mapa iframe { width: 100%; height: 280px; border: 0; display: block; }

/* Arte do placeholder: uma malha de ruas abstrata na própria paleta, não uma
   captura de mapa (que seria mais um dado do Google embutido na página). */
.local__mapa-arte {
  display: block;
  height: 280px;
  color: var(--borda);
  background: var(--linho);
}
.local__mapa-arte svg { width: 100%; height: 100%; display: block; }
.local__mapa-pino {
  position: absolute;
  top: calc(140px - 13px);
  left: 55%;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--malva);
  box-shadow: var(--sombra-media);
}
.local__mapa-pino::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--papel);
}
.local__mapa-rotulo {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e4) var(--e5);
  background: linear-gradient(transparent, rgba(40, 26, 28, .82) 45%);
  line-height: 1.35;
  transition: transform var(--transicao);
}
.local__mapa-rotulo strong { color: var(--papel); font-size: var(--t-apoio); font-weight: 600; }
.local__mapa-rotulo small { color: var(--rosa-papel); font-size: var(--t-etiqueta); }
.local__mapa:hover .local__mapa-rotulo { transform: translateY(-4px); }
.local__mapa:hover .local__mapa-arte { color: var(--malva); }

.local__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e5); }

/* Tour em vídeo do consultório.
   O vídeo é vertical (9:16, como foi gravado no celular). Numa seção larga
   isso só funciona emparelhado: o quadro ocupa uma coluna estreita e o texto
   explica o que se vê na outra. Empilha no celular, onde a largura toda já
   é estreita e o vídeo vertical cai bem sozinho. */
.tour {
  margin-top: var(--e10);
  display: grid;
  gap: var(--e6);
  align-items: center;
  padding: var(--e6);
  background: var(--areia);
  border-radius: var(--r-md);
  border: 1px solid var(--filete);
}
.tour__quadro {
  /* max-width em vez de largura fixa: no celular o vídeo tem que caber na
     tela, e 9:16 numa coluna de 335px já é alto o bastante. */
  max-width: 260px;
  margin-inline: auto;
  border-radius: var(--r);
  overflow: hidden;
  line-height: 0;
  background: var(--noite-cartao);
  box-shadow: var(--sombra-media);
}
.tour__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 478 / 850;
  background: var(--noite-cartao);
}
/* O <p> de fallback só aparece em navegador que não toca o vídeo — nele o
   texto precisa de respiro e de cor legível sobre o cartão escuro. */
.tour__video p { padding: var(--e5); color: var(--papel); line-height: 1.5; }
.tour__video a { color: var(--ocre-claro); }
.tour__titulo {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 500;
  color: var(--malva-noite);
  margin-bottom: var(--e4);
  font-variation-settings: 'opsz' 28;
}
.tour__texto p { color: var(--tinta-suave); }
.tour__texto p:last-child { margin-bottom: 0; }
.tour__nota {
  font-size: var(--t-legenda);
  border-left: 2px solid var(--ocre);
  padding-left: var(--e4);
}

@media (min-width: 48em) {
  /* Vídeo e texto lado a lado; o quadro cresce um pouco, mas continua
     estreito — é um vídeo de celular, esticá-lo só perderia definição. */
  .tour {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--e8);
    padding: var(--e8);
  }
  .tour__quadro { max-width: none; }
}

/* ==========================================================================
   14. Informações práticas
   ========================================================================== */
.resumo { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.resumo__lista { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--filete); }
.resumo__item {
  display: grid;
  gap: var(--e1);
  padding: var(--e5) 0;
  border-bottom: 1px solid var(--filete);
  transition: transform var(--transicao), border-color var(--transicao);
}
.resumo__item:hover { transform: translateX(6px); border-color: var(--ocre); }
.resumo__item dt {
  font-size: var(--t-etiqueta);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ocre-escuro);
  font-weight: 700;
}
.resumo__item dd { margin: 0; font-size: var(--t-apoio); color: var(--tinta); }

.resumo__lado {
  padding: var(--e8);
  background: var(--blush);
  border-radius: var(--r-md);
  border-top: 2px solid var(--malva);
  display: grid;
  gap: var(--e4);
}
.resumo__lado p { font-size: var(--t-apoio); color: var(--tinta-suave); margin: 0; }

/* ==========================================================================
   15. Chamada final
   ========================================================================== */
.chamada {
  position: relative;
  background: var(--noite);
  color: var(--papel);
  padding-block: clamp(80px, 10vw, 128px);
  text-align: center;
  isolation: isolate;
  /* SEM overflow:hidden. O arco desta seção é um ::before ancorado acima da
     caixa (bottom:100%), e overflow:hidden o cortava por inteiro — o bloco
     ficava com a borda reta que o arco existe justamente para eliminar.
     O brilho e a aurora daqui usam inset:0, então não transbordam. */
}
/* O brilho é um elemento próprio, e não ::before: o ::before da chamada já é
   o arco que a separa da seção anterior (ver seção 4). Duas regras disputando
   o mesmo pseudoelemento é bug silencioso — a última vence e a outra some. */
.chamada__aurora {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(48% 74% at 50% 0%, color-mix(in srgb, var(--ocre) 30%, transparent), transparent 68%),
    radial-gradient(38% 60% at 82% 100%, color-mix(in srgb, var(--malva-brilho) 34%, transparent), transparent 70%);
}
.chamada .envelope { position: relative; }
.chamada .sobretitulo { justify-content: center; }

/* Medalhão em arco antes do texto — o rosto de quem vai atender como última
   imagem antes do botão. Arco no topo e cantos quase retos embaixo: o mesmo
   recorte do retrato do hero, em escala de assinatura. */
.chamada__retrato {
  margin: 0 auto var(--e6);
  width: clamp(132px, 22vw, 188px);
  /* var(--arco) inteiro, não composto: o token já traz os quatro cantos
     ("46% 46% 6px 6px / 34% 34% 6px 6px"). Escrever
     `var(--arco) var(--arco) var(--r) var(--r)` gerava um shorthand inválido
     e o navegador descartava a declaração toda — o medalhão saiu retangular
     na primeira verificação. */
  border-radius: var(--arco);
  overflow: hidden;
  line-height: 0;
  border: 1px solid rgba(217, 169, 78, .34);
  box-shadow: var(--sombra-alta);
}
.chamada__retrato img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--noite-cartao);
}
.chamada__titulo {
  font-size: var(--t-h2);
  font-weight: 400;
  margin-bottom: var(--e5);
  font-variation-settings: 'opsz' 60;
}
.chamada__linha {
  font-size: var(--t-lead);
  color: var(--rosa-papel);
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: var(--e8);
}
.chamada__miudo { margin-top: var(--e5); font-size: var(--t-legenda); color: var(--rosa-papel); }
/* Link solto sobre fundo escuro: --malva não tem contraste aqui */
.chamada a:not(.botao) { color: var(--ocre-claro); }

/* Variante do 404: o bloco escuro é a página inteira, centrado na janela.
   Sem isso ele ocupava só a altura do texto e o resto virava um vazio creme. */
.chamada--pagina-inteira {
  min-height: 100svh;
  display: grid;
  align-content: center;
}
/* O "display: block" que existia aqui era um remendo local para o mesmo bug
   agora corrigido na origem (.marca__sinal, seção 6): sem ele, o ícone também
   inflava para o tamanho do bloco ao redor. Corrigida a causa, a centralização
   passa a vir do text-align:center de .chamada (herdado por um inline-block) —
   só falta o respiro abaixo, que o margin ainda garante. */
.erro__marca { margin: 0 0 var(--e6); }

/* ==========================================================================
   16. Rodapé
   ========================================================================== */
.rodape {
  background: var(--noite-profundo);
  color: var(--papel);
  padding-block: clamp(56px, 7vw, 88px) var(--e8);
}
.rodape__grade { display: grid; gap: clamp(32px, 4vw, 56px); }
.rodape__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.375rem;
  margin: var(--e4) 0 var(--e3);
  font-variation-settings: 'opsz' 28;
}
.rodape__bio { font-size: var(--t-legenda); color: var(--rosa-papel); max-width: 30rem; }
.rodape__titulo {
  font-family: var(--fonte-texto);
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ocre-claro);
  margin-bottom: var(--e4);
}
/* Os links do rodapé mediam 18px de altura com 8px de intervalo — abaixo do
   mínimo de alvo de toque, e no rodapé é justamente onde ficam telefone e
   WhatsApp. Viram blocos com respiro vertical.
   40px + 4px de intervalo dá um passo de 44px entre um alvo e o seguinte, que
   é a medida de dedo. Estava em 34 (passo de 38): passava no critério de
   24px da WCAG, mas errar o telefone por 6px continua sendo errar. */
.rodape__nav ul, .rodape__contato ul { display: grid; gap: var(--e1); }
.rodape__nav a, .rodape__contato a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  /* E-mail e arroba são uma palavra só ("andrezapsico.95@gmail.com" mede
     396px com a fonte do sistema em 200%). Sem poder quebrar, esse link
     virava o piso da coluna, que virava o piso do rodapé, que estourava a
     página na horizontal. Terceiro elo da mesma corrente encontrada na caça
     a bugs de 19/09/2026 — os outros dois eram a marca do cabeçalho e as
     linhas de perfil da ficha. */
  overflow-wrap: anywhere;
}
.rodape a {
  color: var(--papel);
  font-size: var(--t-apoio);
  text-decoration: none;
  transition: color var(--transicao), transform var(--transicao);
}
/* translate, não padding: padding dispara layout e ainda reflui o texto ao
   lado. O mesmo motivo vale para os outros três hovers logo abaixo. */
.rodape__nav a:hover, .rodape__contato a:hover { color: var(--ocre-claro); transform: translateX(3px); }
.rodape__nav a.ativo { color: var(--ocre-claro); }

.rodape__base {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--e6);
  border-top: 1px solid rgba(230, 219, 204, .16);
  display: grid;
  gap: var(--e4);
}
.rodape__urgencia {
  padding: var(--e5);
  background: rgba(124, 45, 75, .34);
  border-left: 3px solid var(--ocre-claro);
  border-radius: var(--r);
  font-size: var(--t-legenda);
  color: var(--papel);
}
.rodape__urgencia a { text-decoration: underline; }
.rodape__etico { font-size: var(--t-legenda); color: var(--rosa-papel); max-width: 44rem; }
.rodape__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  font-size: var(--t-legenda);
  color: var(--rosa-papel);
}
.rodape__legal .link-discreto { color: var(--ocre-claro); }

/* ==========================================================================
   17. Flutuantes
   ========================================================================== */
.flutuante-zap {
  display: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  background: var(--malva);
  color: var(--papel);
  box-shadow: var(--sombra-alta);
  transition: transform 320ms var(--curva-suave), background-color var(--transicao);
}
.flutuante-zap svg { width: 28px; height: 28px; fill: currentColor; }
.flutuante-zap:hover { background: var(--malva-fundo); transform: translateY(-3px) scale(1.04); color: var(--papel); }
/* O halo que pulsava aqui saiu em 16/09/2026. Era o único elemento da página
   que se mexia para sempre, sem ninguém pedir — e num site sobre saúde mental,
   onde a calma é o argumento, um anel pulsando infinitamente lê como widget de
   captura de lead, não como consultório. De todos os recursos decorativos, era
   o menos ligado ao assunto: é o acessório que sai antes de sair de casa. */

.ao-topo {
  position: fixed;
  left: 24px;
  /* + safe-area: mesma razão seguro-cabeçalho acima — sem efeito fora do modo
     instalado ("standalone"), onde evita o botão nascer perto demais da
     faixa de gesto do sistema. */
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 40;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: var(--papel);
  color: var(--malva);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transicao), transform 320ms var(--curva-suave),
              visibility var(--transicao), background-color var(--transicao);
}
.ao-topo svg { width: 20px; height: 20px; fill: currentColor; transition: transform var(--transicao); }
.ao-topo:hover { background: var(--linho); }
.ao-topo:hover svg { transform: translateY(-2px); }
.ao-topo.visivel { opacity: 1; visibility: visible; transform: none; }

.barra-mobile {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom));
  background: rgba(251, 248, 244, .94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--filete);
  transform: translateY(100%);
  /* visibility, e não só transform: um elemento empurrado para fora da tela
     por transform CONTINUA na ordem de tabulação. Sem isto, quem navega por
     teclado a partir do topo caía num botão "Agendar pelo WhatsApp"
     invisível, 13px abaixo da borda inferior da janela. */
  visibility: hidden;
  transition: transform 360ms var(--curva-suave), visibility 360ms var(--curva-suave);
}
.barra-mobile.visivel { transform: none; visibility: visible; }

/* Achado em auditoria visual (23/09/2026): abaixo de 1024px as duas coisas
   moram no mesmo canto inferior — a barra some só depois da chamada final,
   e o "voltar ao topo" só nasce depois de 2 telas de rolagem, então na
   prática as duas ficam visíveis ao mesmo tempo na maior parte da rolagem.
   Com z-index maior, a barra pintava por cima e escondia o botão redondo
   inteiro. 100px cobre a altura medida da barra (77px, sem safe-area) mais
   uma folga de 24px — o mesmo respiro que o botão já usa sozinho. */
@media (max-width: 63.9375em) {
  body:has(.barra-mobile.visivel) .ao-topo {
    bottom: calc(100px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   18. Modal de privacidade
   ========================================================================== */
.modal {
  width: min(92vw, 640px);
  padding: 0;
  border: 1px solid var(--filete);
  border-radius: var(--r-md);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra-alta);
}
.modal[open] { animation: abrir-modal 320ms var(--curva-suave); }
@keyframes abrir-modal {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
}
.modal::backdrop { background: rgba(31, 16, 24, .6); backdrop-filter: blur(3px); }
.modal[open]::backdrop { animation: escurecer 320ms var(--curva) ; }
@keyframes escurecer { from { opacity: 0; } }
/* contain: sem isto, rolar até o fim do diálogo continua rolando a PÁGINA
   atrás dele — a pessoa fecha o modal e descobre que perdeu o lugar. */
.modal__corpo {
  padding: clamp(24px, 4vw, 40px);
  overscroll-behavior: contain;
}
.modal__titulo {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  color: var(--malva-noite);
  margin-bottom: var(--e5);
}
.modal__corpo p { font-size: var(--t-apoio); color: var(--tinta-suave); }
.modal__corpo .botao { margin-top: var(--e5); }

/* ==========================================================================
   19. Movimento — entrada do hero e revelação por scroll

   Duas escolhas de engenharia importantes aqui:

   a) A entrada do hero é @keyframes puro, disparado no carregamento. Nada
      depende de JS, então não existe o risco clássico de conteúdo que fica
      invisível para sempre porque um script falhou.

   b) A revelação por scroll usa `animation-timeline: view()`, dentro de
      @supports. Onde o navegador suporta, ele mesmo conduz a animação, sem
      observer, sem listener e sem trabalho na thread principal. Onde não
      suporta, a regra inteira é ignorada e o conteúdo simplesmente aparece —
      degradação perfeita, pelo mesmo motivo de (a).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* translate/scale, e não transform: transform precisa ficar livre para o
     :hover dos cartões e para o botão magnético. Uma animação em curso vence
     o cascade e apagaria os dois. */
  @keyframes surgir {
    from { opacity: 0; translate: 0 22px; }
  }
  @keyframes surgir-cortina {
    from { opacity: 0; translate: 0 26px; clip-path: inset(0 0 102% 0); }
    to   { opacity: 1; translate: 0 0;    clip-path: inset(0 0 -10% 0); }
  }
  @keyframes surgir-retrato {
    from { opacity: 0; translate: 0 26px; scale: .97; }
  }
  @keyframes derivar {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }

  /* --- entrada do hero, em cascata --- */
  .hero__texto .sobretitulo { animation: surgir 700ms var(--curva-suave) 80ms both; }
  .hero__titulo             { animation: surgir-cortina 1000ms var(--curva-suave) 160ms both; }
  .hero__linha              { animation: surgir 800ms var(--curva-suave) 380ms both; }
  .hero__acoes              { animation: surgir 800ms var(--curva-suave) 480ms both; }
  .hero__moldura            { animation: surgir-retrato 1100ms var(--curva-suave) 240ms both; }
  .fatos__item              { animation: surgir 700ms var(--curva-suave) both; }
  .fatos__item:nth-child(1) { animation-delay: 620ms; }
  .fatos__item:nth-child(2) { animation-delay: 700ms; }
  .fatos__item:nth-child(3) { animation-delay: 780ms; }
  .fatos__item:nth-child(4) { animation-delay: 860ms; }
  /* O arco se desenhava a traço (stroke-dashoffset) — sem SVG não dá mais.
     Substituído por um fade+scale simples, mesma curva de entrada da foto
     do hero (surgir-retrato), só que num objeto bem menor. */
  .marca__sinal             { animation: surgir-retrato 700ms var(--curva-suave) 100ms both; }
  .hero__aurora             { animation: derivar 26s ease-in-out infinite; }

  /* --- revelação por scroll, conduzida pelo navegador --- */
  @supports (animation-timeline: view()) {
    .secao__cabecalho,
    .pilar,
    .passo,
    .cartao-conversa,
    .sanfona,
    .local,
    .tour,
    .resumo__item,
    .resumo__lado,
    .ficha,
    .citacao,
    .nota-google,
    .prosa > p,
    .chamada__titulo,
    .chamada__linha {
      animation: surgir 620ms var(--curva-suave) both;
      animation-timeline: view();
      animation-range: entry 6% cover 20%;
    }
    /* A escada entre irmãos vem do próprio range: cada cartão começa um pouco
       mais tarde no percurso. É melhor que animation-delay fixo, que atrasaria
       igual para todo mundo e quebraria para quem rola rápido — aqui a cascata
       é função da posição na tela, então acompanha a velocidade da rolagem. */
    .pilar:nth-child(2), .sanfona:nth-child(2),
    .local:nth-child(2), .passo:nth-child(2) { animation-range: entry 14% cover 26%; }
    .pilar:nth-child(3), .sanfona:nth-child(3),
    .passo:nth-child(3) { animation-range: entry 22% cover 32%; }
  }
}

/* ==========================================================================
   20. Responsivo — desenhado do celular para cima
   ========================================================================== */
@media (min-width: 35em) {   /* 560px na fonte padrão */
  .fatos { grid-template-columns: 1fr 1fr; gap: 1px; }
  .fatos__item { padding: var(--e5); }
  .hero__acoes .botao { min-width: 13em; }
}

@media (min-width: 48em) {   /* 768px na fonte padrão */
  .sobre__grade { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); }
  .citacao-com-foto { flex-direction: row; }
  /* Duas colunas, não três: em três, a coluna de texto cai para ~25 caracteres
     por linha nesta faixa de largura. As três só entram a partir de 1024. */
  .pilares { grid-template-columns: repeat(2, 1fr); }
  .pilar { padding: var(--e6); }
  .locais { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .resumo { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
  .processo { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); }
  .rodape__grade { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
  .fatos { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 64em) {   /* 1024px na fonte padrão */
  .menu { display: block; }
  .cabecalho__cta { display: inline-flex; }
  .sanfona-menu { display: none; }
  .barra-mobile { display: none; }
  .flutuante-zap { display: grid; }
  .pilares { grid-template-columns: repeat(3, 1fr); }
  .pilar { padding: var(--e8); }
  .hero__grade { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
  .hero__moldura { justify-self: end; width: min(100%, 420px); }
}

/* Entre 1024 e 1339 os sete itens não cabem junto da marca e do CTA sem
   quebrar linha. Dois deles saem do cabeçalho — continuam no rodapé, no menu
   do celular e no sumário do próprio conteúdo. */
@media (max-width: 83.6875em) {   /* 1339px na fonte padrão */
  .menu__item--opcional { display: none; }
  .menu__lista { gap: var(--e4); }
}
@media (min-width: 83.75em) { .menu__lista { gap: var(--e5); } }

/* Telas muito estreitas: só o ícone do menu cabe ao lado da marca. A palavra
   "Menu" continua no DOM, apenas fora da tela; senão o <summary> ficaria sem nome
   acessível e o leitor de tela anunciaria apenas "botão". */
@media (max-width: 25em) {   /* 400px na fonte padrão */
  .marca__texto strong { font-size: .9375rem; }
  .sanfona-menu__rotulo {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .prosa__abertura::first-letter { font-size: 3em; }
}

/* ==========================================================================
   21. Movimento reduzido — tudo que é decorativo desliga
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .pilar:hover, .flutuante-zap:hover { transform: none; }
  .hero__aurora { opacity: .8; }
}

/* ==========================================================================
   22. Mais contraste, a pedido do sistema

   Quem liga "aumentar contraste" no sistema operacional normalmente enxerga
   mal. O texto de apoio sobe para AAA (≥7:1), e o filete decorativo — que é
   discreto de propósito no desenho normal — vira uma borda que dá para ver.
   ========================================================================== */
@media (prefers-contrast: more) {
  :root {
    --tinta-suave: #4B2A30;   /* 9,40:1 na pior superfície (era 5,50) */
    --rosa-papel: #F5DBDF;    /* 11,86:1 sobre escuro (era 9,69)      */
    --borda: #683B42;         /* 6,86:1 (era 3,65)                     */
    --filete: #995C66;        /* 3,86:1 — antes era invisível de perto */
  }
  .botao--contorno-claro { border-color: var(--papel); }
  .sanfona, .pilar { border-width: 2px; }
}

/* ==========================================================================
   23. Alto contraste do Windows (forced-colors)

   Aqui o sistema substitui TODAS as cores pelas do usuário e descarta imagens
   de fundo. Tudo que existe só como gradiente simplesmente some — e os blocos
   escuros, que separam a página em partes, ficam indistinguíveis do resto.
   ========================================================================== */
@media (forced-colors: active) {
  .hero__aurora, .chamada__aurora, .hero__arco-decorativo,
  body::after, .arco-topo::before { display: none; }

  /* A separação entre blocos volta como borda, já que a cor de fundo some */
  .hero, .secao, .chamada, .rodape { border-top: 1px solid; }

  /* Botão preenchido perde o preenchimento: sem contorno, vira texto solto */
  .botao { border: 1px solid; }

  /* O foco precisa sobreviver à troca de paleta */
  :focus-visible { outline: 3px solid; outline-offset: 3px; }

  /* O mapa dessaturado fica ilegível sob a paleta do sistema */
  .local__mapa { filter: none; }
}

/* ==========================================================================
   24. Impressão — quem imprime a página quer o endereço e o telefone
   ========================================================================== */
@page { margin: 1.6cm; }

@media print {
  /* A versão anterior desta seção corrigia superfície por superfície, e por
     isso deixava passar: o rodapé saía como um bloco preto de página inteira,
     a faixa de fatos idem, e --rosa-papel / --ocre-claro / --papel (que são
     cores de texto CLARO, feitas para fundo escuro) viravam texto branco sobre
     papel branco — invisível.

     A correção é redefinir os TOKENS. Como a página inteira é token-driven,
     um bloco resolve todas as superfícies e todos os textos de uma vez, e
     continua valendo para qualquer seção nova que alguém acrescente. */
  :root {
    --papel: #fff; --areia: #fff; --argila: #fff; --blush: #fff; --linho: #fff;
    --noite: #fff; --noite-cartao: #fff; --noite-profundo: #fff;

    --tinta: #000;
    --tinta-suave: #333;
    --rosa-papel: #333;      /* era claro sobre escuro */
    --ocre-claro: #6B4A12;   /* idem */
    --ocre: #6B4A12;
    --ocre-escuro: #5C3F10;
    --malva: #000; --malva-fundo: #000; --malva-noite: #000; --malva-brilho: #000;

    --filete: #BBB;
    --borda: #888;
  }

  /* O que não faz sentido no papel */
  .cabecalho, .barra-mobile, .flutuante-zap, .ao-topo,
  .local__mapa, .chamada, .sanfona-menu, .hero__aurora, .chamada__aurora,
  .hero__arco-decorativo, .hero__moldura,
  .foto-apoio, .foto-local, .local__arte,
  .tour, .chamada__retrato { display: none !important; }
  body::after, .arco-topo::before,
  .hero::after, .secao--noite::after, .chamada::after { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .secao, .hero { padding-block: 16pt; }

  /* --papel tem dois empregos: fundo da página E cor de texto sobre os blocos
     escuros. Redefinir o token para #fff resolve o primeiro e quebra o segundo
     — os links do rodapé, por exemplo, saíam brancos sobre branco. Nas regiões
     que eram escuras, tudo vira preto. */
  .hero, .hero *, .secao--noite, .secao--noite *,
  .rodape, .rodape * { color: #000 !important; }

  /* Os poucos fundos que não vêm de token (rgba e hex soltos em gradiente) */
  .fatos { background: none !important; border-top: 1pt solid #BBB; }
  .fatos__item { background: none !important; }
  .nota-google { background: none !important; border: 1pt solid #999; }
  .rodape__urgencia { background: none !important; border-left: 2pt solid #000; }

  /* Botão preenchido vira contorno: no papel, um retângulo preto é só tinta */
  .botao {
    background: none !important;
    color: #000 !important;
    border: 1pt solid #666 !important;
    min-height: auto;
  }
  .botao::before, .botao--seta::after { display: none !important; }

  /* As sanfonas são abertas pelo main.js no evento beforeprint — CSS sozinho
     não consegue revelar o conteúdo de um <details> fechado. */
  .sanfona, .pilar, .local, .cartao-conversa, .resumo__lado,
  .ficha { break-inside: avoid; }
  .secao { break-before: auto; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  /* O endereço do próprio WhatsApp já aparece escrito por extenso no texto */
  .rodape__contato a[href^="http"]::after,
  .botao[href^="http"]::after { content: ""; }
}