/* =========================================================================
   Thamyres B. Cabral | Psicóloga (TCC) — folha de estilo única
   -------------------------------------------------------------------------
   Organização do arquivo:
     01. Fontes
     02. Tokens (cor, tipo, espaço, movimento)
     03. Reset e base
     04. Tipografia
     05. Layout: containers, seções, bandas
     06. Utilitários (eyebrow, arco, ramo, reveal, visually-hidden)
     07. Botões
     08. Cabeçalho e navegação
     09. WhatsApp flutuante
     10. Hero
     11. Barra de confiança
     12. Sobre
     13. Banda "virada de pensamento"  ← elemento-assinatura
     14. Meu método
     15. Especialidades
     16. Como funciona
     17. Quiz de autocuidado
     18. Prova social
     19. Reflexões (cards) e página de artigo
     20. Frases da TCC (lista editorial)
     21. Instagram
     22. FAQ
     23. Contato e formulário
     24. Rodapé
     25. Página 404
     26. Movimento reduzido / impressão

   ---------------------------------------------------------------------
   IDENTIDADE VISUAL OFICIAL (Manual de Identidade Visual, 2026)
   ---------------------------------------------------------------------
   PALETA, na proporção 60/25/10/5:
     creme #FDF6EC (60%) · marrom #3A2C29 (25%)
     dourado #CB9B5B (10%) · champagne #E4C99E (5%)
   O manual proíbe: verde "natureza", preto puro, rosa, dourado metálico
   amarelado e alta saturação. A força da marca é a "neutralidade quente".

   REGRA DE CONTRASTE — leia antes de mexer em cor:
     O dourado oficial dá 2.34:1 sobre o creme e 1.57:1 sobre o champagne.
     Ele NUNCA é texto sobre fundo claro: ali serve só como ornamento
     (fios, arcos, numerais decorativos, marcadores, preenchimento de
     botão). Para acento textual em fundo claro existe --dourado-texto
     (4.96:1 no creme). Sobre o marrom, o dourado oficial dá 5.33:1 e
     pode ser texto normalmente.

   REGRA TIPOGRÁFICA: Cormorant Garamond nos títulos e na linguagem
   reflexiva. Lato em tudo que é estrutural/informativo — corpo, rótulos,
   botões, navegação, formulário, UI.
   ========================================================================= */


/* ============================== 01. FONTES ============================== */
/* Locais, subset latin (cobre todo acento do pt-BR). Nenhuma requisição a
   terceiros, nenhum cookie de CDN. */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond.woff2') format('woff2-variations');
  font-weight: 300 700;          /* fonte variável: um arquivo, toda a faixa */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* Lato é estática: 400 e 700 são os pesos que existem. Não há 500 nem 600 —
   por isso o arquivo usa só 400 e 700, nunca valores intermediários. */
@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* ============================== 02. TOKENS ============================== */

:root {
  /* --- Cor: paleta oficial do manual ---------------------------------- */
  --creme:           #FDF6EC;  /* fundo principal (60%)                    */
  --champagne-fundo: #ECD6B5;  /* seção alternada — champagne sobre creme  */
  --champagne:       #E4C99E;  /* caixas de informação e respiro (5%)      */
  --off-white:       #FFFBF4;  /* cards, campos de formulário              */
  --marrom:          #3A2C29;  /* texto, títulos, estrutura (25%)          */
  --marrom-suave:    #5A4741;  /* texto secundário — 8.11:1 no creme       */
  --dourado:         #CB9B5B;  /* ORNAMENTO e fill de botão (10%)          */

  /* ÚNICA cor fora do manual, e de propósito: o verde oficial do WhatsApp.
     Vale como sinalização — a pessoa reconhece o botão antes de ler. Só os
     botões que NOMEIAM o WhatsApp usam (ver .btn--whatsapp); os CTAs
     genéricos de agendar seguem dourados, senão o site inteiro fica verde.
     O rótulo é o marrom da paleta: 6.73:1 sobre o verde. Branco dá 1.98:1
     e reprova — por isso não é branco, como seria de esperar.             */
  --wpp-verde:       #25D366;
  --wpp-verde-forte: #1FBA57;  /* hover — rótulo marrom mantém 5.23:1      */
  --wpp-verde-borda: #0E7A37;  /* a borda é quem dá a silhueta: 5.07:1     */
  --dourado-texto:   #876538;  /* acento textual em fundo claro (4.96:1)   */
  --dourado-borda:   #96652C;  /* borda de componente em fundo claro       */

  /* Bordas e véus */
  --linha:         color-mix(in srgb, var(--marrom) 14%, transparent);
  --linha-forte:   color-mix(in srgb, var(--marrom) 26%, transparent);
  /* Borda de campo de formulário. Precisa de 3:1 sobre o fundo da seção
     (WCAG 1.4.11): é ela que diz onde o campo começa e termina. A --linha-forte
     dá só 1.65:1, e enquanto o formulário esteve sobre o champagne o próprio
     preenchimento off-white ajudava a separar. Sobre o creme, off-white e creme
     são a mesma cor (1.04:1) e sobrou só a borda — daí este token.          */
  --linha-campo:   color-mix(in srgb, var(--marrom) 58%, transparent);
  --linha-clara:   color-mix(in srgb, #FFF 22%, transparent);
  /* Fio dourado fino separando blocos — pedido explícito do manual. */
  --linha-dourada: color-mix(in srgb, var(--dourado) 50%, transparent);

  /* --- Tipo ------------------------------------------------------------ */
  /* Duas famílias, dois papéis. A serifada aparece nos títulos e, em
     itálico, na linguagem reflexiva — é a mesma --fonte-titulo nos dois
     casos, então não existe um token separado para o itálico. */
  --fonte-corpo:  'Lato', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --fonte-titulo: 'Cormorant Garamond', ui-serif, Georgia, 'Times New Roman', serif;

  /* Cormorant tem altura-x baixa: rende ~8% menor que uma sans na mesma
     medida nominal. A escala compensa isso sem mexer nos clamp() abaixo,
     então nenhuma caixa do layout muda de tamanho. */
  --escala-titulo: 1.08;

  --passo--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --passo-0:  clamp(1rem,    0.96rem + 0.2vw,  1.125rem);
  --passo-1:  clamp(1.18rem, 1.09rem + 0.42vw, 1.45rem);
  --passo-2:  clamp(1.45rem, 1.26rem + 0.92vw, 2.05rem);
  --passo-3:  clamp(1.85rem, 1.47rem + 1.85vw, 3rem);
  --passo-4:  clamp(2.35rem, 1.72rem + 3.05vw, 4.15rem);

  /* --- Espaço (escala de 4px) ------------------------------------------ */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

  --respiro-secao: clamp(4rem, 9vw, 7.5rem);  /* padding vertical de seção */
  --goteira: clamp(1.25rem, 5vw, 2.5rem);     /* margem lateral            */

  /* --- Medidas --------------------------------------------------------- */
  --larg-ampla:  1180px;   /* grades, cards, hero                          */
  --larg-texto:  40rem;    /* coluna editorial de leitura                  */

  /* --- Cantos suaves --------------------------------------------------- */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* --- Traço: o manual pede 1–1,5pt, fino e arredondado ---------------- */
  --traco: 1.25px;

  /* --- Movimento ------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-suave: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-curta: 180ms;
  --dur-media: 320ms;
  --dur-longa: 620ms;

  --sombra-suave: 0 1px 2px rgb(58 44 41 / 0.04),
                  0 8px 24px -12px rgb(58 44 41 / 0.12);
  --sombra-alta:  0 2px 4px rgb(58 44 41 / 0.05),
                  0 18px 40px -18px rgb(58 44 41 / 0.20);
}


/* =========================== 03. RESET E BASE =========================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* compensa o cabeçalho fixo nas âncoras */
}

body {
  background: var(--creme);
  color: var(--marrom);
  font-family: var(--fonte-corpo);
  font-size: var(--passo-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

/* Foco visível e consistente em todo o site — nunca removido.
   Sempre marrom no claro (12.45:1) e champagne no escuro (8.36:1).
   NUNCA dourado: o foco é informação, não ornamento. */
:focus-visible {
  outline: 2px solid var(--marrom);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.banda-escura :focus-visible,
.primeira-sessao :focus-visible,
.contato-destaque :focus-visible,
.rodape :focus-visible { outline-color: var(--champagne); }

::selection { background: var(--champagne); color: var(--marrom); }


/* ============================ 04. TIPOGRAFIA ============================ */

/* Títulos em Cormorant Garamond: serifada editorial, peso 600 (o 400 fica
   anêmico nos tamanhos menores). Tracking quase neutro — o negativo forte
   da sans-serif geométrica machuca a leitura numa serifada. */
h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--marrom);
}

/* h4 é rótulo estrutural (colunas do rodapé): Lato, não serifada. */
h4 {
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: var(--passo-0);
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--marrom);
}

h1 { font-size: calc(var(--passo-4) * var(--escala-titulo)); }
h2 { font-size: calc(var(--passo-3) * var(--escala-titulo)); }
h3 {
  font-size: calc(var(--passo-1) * var(--escala-titulo));
  line-height: 1.22;
  letter-spacing: 0;
}

p { text-wrap: pretty; }

/* A serifada itálica: o toque editorial/reflexivo. Mesma família dos
   títulos, em itálico — reservada a linguagem reflexiva e a palavras-chave
   enfatizadas dentro de títulos. */
.serif,
em.serif,
.reflexao {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}

.serif { font-size: 1.06em; }  /* compensa a altura-x menor da serifada */

.reflexao {
  font-size: calc(var(--passo-2) * var(--escala-titulo));
  line-height: 1.35;
  color: var(--marrom);
  text-wrap: balance;
}

/* Links: sublinhado permanente. O acento dourado escuro fica próximo do
   marrom do corpo, então a cor sozinha não pode carregar a informação
   (WCAG 1.4.1). */
a { color: var(--dourado-texto); text-underline-offset: 0.22em; }
a:hover { color: var(--marrom); }

.texto-secundario { color: var(--marrom-suave); }

.chamada {                 /* parágrafo de abertura, um pouco maior */
  font-size: var(--passo-1);
  line-height: 1.55;
  color: var(--marrom-suave);
}


/* ============================== 05. LAYOUT ============================== */

.container {
  width: 100%;
  max-width: var(--larg-ampla);
  margin-inline: auto;
  padding-inline: var(--goteira);
}

.container--texto { max-width: calc(var(--larg-texto) + var(--goteira) * 2); }

.secao { padding-block: var(--respiro-secao); }

/* Fundos alternados: creme / champagne. Aplicados como modificador para
   não brigar com a especificidade do padding de .secao. */
.secao--champagne { background: var(--champagne-fundo); }
.secao--creme     { background: var(--creme); }
.secao--branca    { background: var(--off-white); }

.banda-escura {
  background: var(--marrom);
  color: var(--creme);
}
.banda-escura h2, .banda-escura h3 { color: var(--creme); }
.banda-escura a { color: var(--champagne); }

.cabecalho-secao { max-width: 46rem; margin-bottom: var(--sp-12); }
.cabecalho-secao p { margin-top: var(--sp-4); }


/* =========================== 06. UTILITÁRIOS =========================== */

/* Rótulo pequeno acima do título. Em dourado-texto (4.96:1 no creme);
   o fio ao lado é que carrega o dourado oficial, como ornamento. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--passo--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dourado-texto);
  margin-bottom: var(--sp-5);
}
.eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--dourado);
  flex: none;
}

/* ÚNICA exceção do sistema de cor: sobre champagne o dourado-texto cai
   para 3.76:1, abaixo do mínimo de 4.5:1. Ali o acento vira marrom. */
.secao--champagne .eyebrow,
.secao--champagne .tema,
.secao--champagne .voltar-link { color: var(--marrom); }

.banda-escura .eyebrow { color: var(--dourado); }
.banda-escura .eyebrow::before { background: var(--dourado); }

.eyebrow--centro { justify-content: center; }

/* Arco incompleto envolvendo uma palavra-chave — assinatura gráfica do
   manual. Puramente decorativo: marque o elemento com aria-hidden="true"
   apenas se ele não carregar texto próprio. */
.arco {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.arco::before {
  content: '';
  position: absolute;
  inset: -0.3em -0.55em;
  border: var(--traco) solid var(--dourado);
  border-top-color: transparent;      /* o arco fica aberto no topo */
  border-radius: 50%;
  transform: rotate(-7deg);
  pointer-events: none;
  z-index: -1;
}

/* Ramo minimalista derivado do símbolo — detalhe de canto. O manual pede
   "sempre em baixa quantidade": são 3 ocorrências no site inteiro. */
.ramo {
  position: absolute;
  width: clamp(64px, 9vw, 118px);
  height: auto;
  color: var(--dourado);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.ramo--topo-dir   { top: var(--sp-6); right: var(--sp-4); }
.ramo--base-esq   { bottom: var(--sp-8); left: var(--sp-4); transform: scaleX(-1); }
.banda-escura .ramo, .rodape .ramo { opacity: 0.4; }

/* O ramo é posicionado, e elemento posicionado pinta ACIMA do conteúdo em
   fluxo normal — sem isto ele passaria por cima do texto. Subir o container
   para z-index 1 resolve sem depender de z-index negativo, que sumiria atrás
   do fundo do rodapé. */
.hero > .container,
.reframe > .container,
.rodape > .container { position: relative; z-index: 1; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pular para o conteúdo — primeiro item do Tab. */
.pular-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--marrom);
  color: var(--creme);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: top var(--dur-curta) var(--ease);
}
.pular-link:focus { top: var(--sp-4); color: var(--creme); }

/* Revelação no scroll — ativada por IntersectionObserver em main.js.
   O estado inicial só é aplicado quando há JS e movimento permitido,
   para o conteúdo nunca sumir se o JS falhar. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-longa) var(--ease-suave),
              transform var(--dur-longa) var(--ease-suave);
}


/* ============================== 07. BOTÕES ============================== */
/* CTA em dourado, como pede o manual ("dourado: pequenos destaques, linhas
   e chamadas"). O rótulo marrom sobre o dourado dá 5.33:1 — passa AA.
   A borda em --dourado-borda NÃO é decorativa: é ela que faz a silhueta do
   botão passar o mínimo de 3:1 de componente sobre creme e champagne, já
   que o dourado sozinho contra o creme fica em 2.34:1. Não remova. */

.btn {
  --btn-bg: var(--dourado);
  --btn-cor: var(--marrom);
  --btn-borda: var(--dourado-borda);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 0.85em 1.6em;
  min-height: 48px;                 /* alvo de toque confortável */
  background: var(--btn-bg);
  color: var(--btn-cor);
  border: 1px solid var(--btn-borda);
  border-radius: var(--r-pill);
  font-size: var(--passo-0);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-curta) var(--ease),
              background-color var(--dur-curta) var(--ease),
              border-color var(--dur-curta) var(--ease),
              color var(--dur-curta) var(--ease),
              box-shadow var(--dur-curta) var(--ease);
}
.btn:hover {
  color: var(--btn-cor);
  transform: translateY(-2px);
  box-shadow: var(--sombra-suave);
}
.btn:active { transform: translateY(0); }

.btn--secundario {
  --btn-bg: transparent;
  --btn-cor: var(--marrom);
  --btn-borda: var(--linha-forte);
}
.btn--secundario:hover { --btn-borda: var(--dourado-borda); }

.btn--claro {                        /* sobre banda escura */
  --btn-bg: var(--creme);
  --btn-cor: var(--marrom);
  --btn-borda: var(--creme);
}

.btn--contorno-claro {
  --btn-bg: transparent;
  --btn-cor: var(--creme);
  --btn-borda: var(--linha-clara);
}
.btn--contorno-claro:hover { --btn-borda: var(--champagne); }

/* Botão de WhatsApp. O fill verde sozinho dá só 1.85:1 sobre o creme, ou
   seja, não delimita o botão; quem carrega a silhueta é a borda escura.
   Sobre a banda marrom o próprio verde já dá 6.73:1 e a borda vira detalhe. */
.btn--whatsapp {
  --btn-bg: var(--wpp-verde);
  --btn-cor: var(--marrom);
  --btn-borda: var(--wpp-verde-borda);
}
.btn--whatsapp:hover { --btn-bg: var(--wpp-verde-forte); }

.btn--largo { width: 100%; }
.btn .icone { width: 1.15em; height: 1.15em; flex: none; }

.grupo-btn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Link com seta — usado em cards e no fim de seções. */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--linha-dourada);
}
.link-seta::after {
  content: '→';
  transition: transform var(--dur-curta) var(--ease);
}
.link-seta:hover::after { transform: translateX(4px); }


/* ====================== 08. CABEÇALHO E NAVEGAÇÃO ====================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--creme) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-media) var(--ease),
              background-color var(--dur-media) var(--ease);
}
.site-header.esta-rolado { border-bottom-color: var(--linha-dourada); }

.header-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 4.5rem;
}

.marca {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  line-height: 1.1;
  text-decoration: none;
  color: var(--marrom);
}
.marca-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

/* Símbolo do logo oficial (cabeça + ramo). A altura manda; a largura segue
   a proporção do arquivo. O PNG vem em 160px de largura, ou seja ~4x do
   tamanho de tela — nítido em retina sem pesar. */
.marca-simbolo {
  flex: none;
  width: auto;
  height: 2.35rem;
}
@media (min-width: 48rem) {
  .marca-simbolo { height: 2.75rem; }
}

.marca-nome {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.marca-papel {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--dourado-texto);
}

.nav-lista {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
}
.nav-lista a {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--marrom);
  text-decoration: none;
  padding-block: var(--sp-2);
  position: relative;
}
.nav-lista a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--dourado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-media) var(--ease);
}
.nav-lista a:hover::after { transform: scaleX(1); }

/* A página aberta fica marcada com o mesmo fio dourado. */
.nav-lista a[aria-current='page'] { color: var(--dourado-texto); font-weight: 700; }
.nav-lista a[aria-current='page']::after { transform: scaleX(1); }

.header-cta { display: none; }

/* Botão hambúrguer */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 18px; height: 1.5px;
  background: var(--marrom);
  transition: transform var(--dur-media) var(--ease),
              opacity var(--dur-curta) var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: var(--marrom);
  transition: transform var(--dur-media) var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Gaveta mobile */
.nav {
  position: fixed;
  inset: 4.5rem 0 auto 0;
  background: var(--creme);
  border-bottom: 1px solid var(--linha);
  padding: var(--sp-6) var(--goteira) var(--sp-10);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-media) var(--ease),
              transform var(--dur-media) var(--ease),
              visibility var(--dur-media);
}
.nav[data-aberta='true'] {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav .nav-lista {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.nav .nav-lista a {
  display: block;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--linha);
  font-size: 1.05rem;
}
.nav .nav-lista a::after { display: none; }
.nav .btn { margin-top: var(--sp-6); }

/* 68rem (e não 62rem): com 7 itens no menu, a barra horizontal só cabe com
   folga a partir daí. Abaixo disso o hambúrguer continua. */
@media (min-width: 68rem) {
  .nav-toggle { display: none; }
  .nav {
    position: static;
    inset: auto;
    background: none;
    border: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* Gap elástico: com 8 itens (entrou "Recursos"), 24px fixos não cabem
     logo acima do breakpoint. Assim ele aperta em 1088px e abre de volta
     nas telas largas. O mínimo caiu de 1rem para 0.85rem justamente para
     absorver o item novo sem quebrar a linha. */
  .nav .nav-lista {
    flex-direction: row;
    align-items: center;
    gap: clamp(0.85rem, 1.6vw, 1.5rem);
  }
  .nav .nav-lista a { padding: var(--sp-2) 0; border: 0; font-size: 0.95rem; }
  .nav .nav-lista a::after { display: block; }
  .nav .btn { display: none; }
  .header-cta { display: inline-flex; padding: 0.6em 1.3em; min-height: 42px; }
}


/* ======================= 09. WHATSAPP FLUTUANTE ======================= */

.wpp-flutuante {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.75rem);
  bottom: clamp(0.9rem, 3vw, 1.75rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.8rem;
  background: var(--wpp-verde);
  color: var(--marrom);
  border: 1px solid var(--wpp-verde-borda);
  border-radius: var(--r-pill);
  text-decoration: none;
  box-shadow: var(--sombra-alta);
  transition: transform var(--dur-media) var(--ease),
              background-color var(--dur-curta) var(--ease);
}
.wpp-flutuante:hover {
  color: var(--marrom);           /* marrom sobre o verde forte = 5.23:1 */
  background: var(--wpp-verde-forte);
  transform: translateY(-3px);
}
.wpp-flutuante svg { width: 28px; height: 28px; flex: none; }
.wpp-flutuante .rotulo {
  display: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding-right: var(--sp-2);
}
@media (min-width: 48rem) {
  .wpp-flutuante { padding: 0.75rem 0.75rem 0.75rem 0.9rem; }
  .wpp-flutuante .rotulo { display: block; }
}


/* =============================== 10. HERO =============================== */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}

/* Véu de cor muito suave atrás do hero — nada de gradiente berrante. */
.hero::before {
  content: '';
  position: absolute;
  inset: -30% 45% 35% -25%;
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--champagne) 70%, transparent), transparent);
  pointer-events: none;
  z-index: -1;
}

.hero-grade {
  display: grid;
  gap: var(--sp-8);
  grid-template-areas:
    'texto'
    'foto'
    'acoes';
}
.hero-texto  { grid-area: texto; }
.hero-figura { grid-area: foto; }
.hero-acoes  { grid-area: acoes; }

.hero h1 { margin-bottom: var(--sp-5); }

.hero-sub {
  font-size: var(--passo-1);
  line-height: 1.55;
  color: var(--marrom-suave);
  max-width: 34ch;
}

.hero-acoes { display: flex; flex-direction: column; gap: var(--sp-4); }
.hero-acoes .btn { width: 100%; }

.hero-nota {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--passo--1);
  color: var(--marrom-suave);
}
.hero-nota::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dourado);
  flex: none;
}

/* Retrato com fio dourado deslocado atrás — moldura editorial discreta,
   no traço fino que o manual pede. */
/* <picture> é inline por padrão: sem isto ele deixa um respiro fantasma de
   baseline embaixo da foto e a moldura dourada do ::after desalinha. */
.hero-figura picture,
.sobre-figura picture { display: block; }

.hero-figura { position: relative; isolation: isolate; }
.hero-figura::after {
  content: '';
  position: absolute;
  inset: var(--sp-5) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
  border: var(--traco) solid var(--dourado);
  border-radius: var(--r-xl);
  z-index: 0;
  pointer-events: none;
}
.hero-figura img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-xl);
  background: var(--champagne-fundo);
}

/* Slot opcional para o vídeo de apresentação (estilo Reels, até 60s).
   Some sozinho se a fonte do vídeo não for preenchida — ver main.js. */
.hero-video {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-5);
}
.hero-video[hidden] { display: none; }
.hero-video video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--marrom);
}

@media (min-width: 56rem) {
  .hero-grade {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      'texto foto'
      'acoes foto';
    align-items: start;
    gap: var(--sp-10) clamp(2rem, 6vw, 5rem);
  }
  .hero-acoes { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .hero-acoes .btn { width: auto; }
  .hero-nota { flex-basis: 100%; }
}


/* ======================= 11. BARRA DE CONFIANÇA ======================= */

.barra-confianca {
  border-block: 1px solid var(--linha-dourada);
  background: color-mix(in srgb, var(--champagne) 40%, var(--creme));
}
.barra-confianca ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4) var(--sp-8);
  list-style: none;
  margin: 0;
  padding: var(--sp-5) 0;
}
.barra-confianca li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--passo--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--marrom);
}
.barra-confianca svg {
  width: 18px; height: 18px;
  flex: none;
  color: var(--dourado-texto);
}


/* ============================== 12. SOBRE ============================== */

.sobre-grade {
  display: grid;
  gap: var(--sp-10);
}
.sobre-figura img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--champagne-fundo);
}
.sobre-corpo > * + * { margin-top: var(--sp-5); }

/* Lista de bolinhas douradas. Usada nos detalhes humanos da seção "Quem sou
   eu" e também na página da TCC ("quando a terapia pode ser fundamental"). */
.lista-pontos {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
}
.lista-pontos li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  color: var(--marrom-suave);
}
.lista-pontos li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--dourado);
  flex: none;
  transform: translateY(-3px);
}

/* Variante que se destaca do texto acima com um fio e mais respiro. */
.lista-pontos--separada {
  margin-top: var(--sp-8);
  border-top: 1px solid var(--linha-dourada);
  padding-top: var(--sp-6);
}

.credencial {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--dourado-borda);
  border-radius: var(--r-pill);
  font-size: var(--passo--1);
  font-weight: 700;
  color: var(--marrom);
}

@media (min-width: 56rem) {
  .sobre-grade {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .sobre-figura { position: sticky; top: 6rem; }
}


/* ================ 13. BANDA "VIRADA DE PENSAMENTO" ==================== */
/* Elemento-assinatura. A retórica dos posts dela — negar uma crença e
   oferecer outra leitura — é literalmente reestruturação cognitiva, o
   movimento central da TCC. Aqui isso vira um dispositivo tipográfico.
   O manual traz a mesma ideia no título oficial "Nem todo pensamento é um
   fato. Observe. Questione. Escolha."                                    */

.reframe {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  text-align: center;
  overflow: hidden;
}

.reframe-palco {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
  min-height: 13rem;             /* reserva altura: sem salto de layout */
  display: grid;
  align-content: center;
  gap: var(--sp-6);
}

.reframe-antes,
.reframe-depois {
  margin: 0;
  transition: opacity var(--dur-longa) var(--ease-suave),
              transform var(--dur-longa) var(--ease-suave);
}

/* O pensamento automático: apagado, e riscado por um fio que "cresce".
   70% de creme sobre o marrom dá 6.92:1 — o "apagado" continua legível. */
.reframe-antes {
  position: relative;
  display: inline-block;
  justify-self: center;
  font-size: var(--passo-1);
  color: color-mix(in srgb, var(--creme) 70%, transparent);
}
.reframe-antes::after {
  content: '';
  position: absolute;
  left: -0.15em; right: -0.15em;
  top: 52%;
  height: 1px;
  background: var(--dourado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--ease-suave) 180ms;
}
.reframe.esta-ativo .reframe-antes::after { transform: scaleX(1); }

/* A releitura: serifada itálica, o "peso" da frase. */
.reframe-depois {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--passo-3) * var(--escala-titulo));
  line-height: 1.22;
  color: var(--creme);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(10px);
}
.reframe.esta-ativo .reframe-depois {
  opacity: 1;
  transform: none;
  transition-delay: 620ms;
}

.reframe-legenda {
  margin-top: var(--sp-10);
  font-size: var(--passo--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dourado);        /* 5.33:1 sobre o marrom — passa AA */
}

/* Marcadores de qual par está em cena. São botões de verdade: quem quiser
   controlar a troca pode, e a rotação automática para no primeiro clique
   (WCAG 2.2.2 — conteúdo que se move precisa ter como ser pausado). */
.reframe-pontos {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}
.reframe-pontos button {
  display: grid;
  place-content: center;
  width: 28px; height: 28px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.reframe-pontos button::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--linha-clara);
  transition: background-color var(--dur-media) var(--ease),
              transform var(--dur-media) var(--ease);
}
.reframe-pontos button[aria-current='true']::before {
  background: var(--dourado);
  transform: scale(1.5);
}
.reframe-pontos button:hover::before {
  background: color-mix(in srgb, var(--dourado) 70%, transparent);
}


/* =========================== 14. MEU MÉTODO =========================== */
/* A numeração 01–04 se justifica: é uma sequência real de atendimento,
   não decoração. Os fios entre os passos são as "linhas finas douradas
   separando blocos" que o manual pede. */

.metodo-lista {
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  counter-reset: passo;
}

.metodo-passo {
  counter-increment: passo;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: auto 1fr;
  align-items: baseline;
  padding-block: var(--sp-8);
  border-top: 1px solid var(--linha-dourada);
}
.metodo-passo:last-child { border-bottom: 1px solid var(--linha-dourada); }

.metodo-passo::before {
  content: '0' counter(passo);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--passo-2) * var(--escala-titulo));
  line-height: 1;
  color: var(--dourado-texto);
  min-width: 2.6ch;
}
.metodo-passo h3 { grid-column: 2; }
.metodo-passo p  { grid-column: 2; margin-top: var(--sp-3); color: var(--marrom-suave); }

@media (min-width: 56rem) {
  .metodo-passo {
    grid-template-columns: 6rem minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
    padding-block: var(--sp-10);
  }
  .metodo-passo::before { font-size: calc(var(--passo-3) * var(--escala-titulo)); }
  .metodo-passo h3 { grid-column: 2; }
  .metodo-passo p  { grid-column: 3; margin-top: 0; }
}


/* ========================== 15. ESPECIALIDADES ========================== */

.grade-cards {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-6);
  background: var(--off-white);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  scroll-margin-top: 6rem;          /* âncoras de SEO param no lugar certo */
  transition: transform var(--dur-media) var(--ease),
              box-shadow var(--dur-media) var(--ease),
              border-color var(--dur-media) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--dourado);
  box-shadow: var(--sombra-suave);
}
.card p { color: var(--marrom-suave); font-size: 0.97rem; }

.card-icone {
  width: 34px; height: 34px;
  color: var(--dourado-texto);
  margin-bottom: var(--sp-2);
}

/* --- Variante "Você tem se sentido assim?" ----------------------------
   Mesmo card, conteúdo de outra natureza: os cards de especialidade são
   rótulos curtos com ícone; estes são vinhetas narrativas em segunda
   pessoa. Por isso não levam ícone, o título vai em serifada itálica
   (linguagem evocativa é justamente o que a regra reserva para ela) e um
   fio dourado curto marca o topo.
   Sem checkbox, sem contagem, sem "marque quantos você sente": é texto
   para ler, não um autoteste. Quem avalia é o quiz, com salvaguardas
   próprias. -------------------------------------------------------- */
.card--sentimento {
  gap: var(--sp-4);
  padding-top: var(--sp-10);
}
.card--sentimento::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--dourado);
  flex: none;
}
.card--sentimento h3 {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--passo-1) * var(--escala-titulo));
  line-height: 1.22;
  color: var(--marrom);
}
.card--sentimento p {
  font-size: 1rem;
  line-height: 1.6;
}

/* Fechamento da seção: devolve a decisão para quem lê. */
.sentimentos-fecho {
  max-width: 42rem;
  margin: var(--sp-12) auto 0;
  text-align: center;
}
.sentimentos-fecho p {
  color: var(--marrom-suave);
  margin-bottom: var(--sp-8);
}


/* ========================== 16. COMO FUNCIONA ========================== */

.comparativo {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin-bottom: var(--sp-12);
}

.modalidade {
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  border: 1px solid var(--linha);
  background: var(--off-white);
}
.modalidade h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.modalidade h3 svg { width: 22px; height: 22px; color: var(--dourado-texto); flex: none; }
.modalidade ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.modalidade li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  color: var(--marrom-suave);
  font-size: 0.97rem;
}
.modalidade li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--dourado);
  flex: none;
  transform: translateY(-3px);
}

/* Primeira sessão: linha do tempo horizontal em desktop. */
.primeira-sessao {
  padding: var(--sp-10) var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--marrom);
  color: var(--creme);
}
.primeira-sessao h3 { color: var(--creme); margin-bottom: var(--sp-6); }
.linha-tempo {
  display: grid;
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
}
.linha-tempo li { position: relative; padding-left: var(--sp-8); }
.linha-tempo li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: var(--traco) solid var(--dourado);
  background: var(--marrom);
}
.linha-tempo li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 4px; top: 1.5em; bottom: calc(var(--sp-6) * -1 + 0.3em);
  width: 1px;
  background: var(--linha-clara);
}
.linha-tempo strong { display: block; color: var(--creme); font-weight: 700; }
.linha-tempo span { color: color-mix(in srgb, var(--creme) 82%, transparent); }

@media (min-width: 52rem) {
  .linha-tempo { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
  .linha-tempo li { padding-left: 0; padding-top: var(--sp-6); }
  .linha-tempo li::before { top: 0; }
  .linha-tempo li:not(:last-child)::after {
    left: 12px; top: 4px; bottom: auto; right: 0;
    width: auto; height: 1px;
  }
}


/* ====================== 17. QUIZ DE AUTOCUIDADO ======================= */

.quiz-secao { scroll-margin-top: 5rem; }

.quiz {
  max-width: 44rem;
  margin-inline: auto;
  background: var(--off-white);
  border: 1px solid var(--linha);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
}

.quiz-painel { padding: clamp(1.75rem, 5vw, 3rem); }
.quiz-painel[hidden] { display: none; }

/* --- Abertura ------------------------------------------------------- */
.quiz-abertura { text-align: center; }
.quiz-abertura h3 {
  font-size: calc(var(--passo-2) * var(--escala-titulo));
  margin-bottom: var(--sp-4);
}
.quiz-abertura .chamada { margin-inline: auto; max-width: 34rem; }
.quiz-abertura .btn { margin-top: var(--sp-8); }

.quiz-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-6);
  font-size: var(--passo--1);
  color: var(--marrom-suave);
}
.quiz-meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.quiz-meta svg { width: 15px; height: 15px; color: var(--dourado-texto); flex: none; }

/* --- Aviso ético (obrigatório antes e depois) ------------------------- */
/* Exigência do briefing, seção 6: precisa estar visível, nunca escondido
   atrás de um "leia mais" ou empurrado para o rodapé.
   Usa o champagne puro — é a "caixa de informação" do manual.            */
.aviso-etico {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  margin-top: var(--sp-8);
  background: color-mix(in srgb, var(--champagne) 55%, var(--off-white));
  border: 1px solid var(--linha-dourada);
  border-radius: var(--r-md);
  text-align: left;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--marrom-suave);
}
.aviso-etico svg {
  width: 20px; height: 20px;
  flex: none;
  color: var(--dourado-texto);
  margin-top: 2px;
}
.aviso-etico strong { color: var(--marrom); font-weight: 700; }

/* --- Progresso ------------------------------------------------------- */
.quiz-progresso {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) clamp(1.75rem, 5vw, 3rem);
  border-bottom: 1px solid var(--linha);
  background: color-mix(in srgb, var(--champagne) 32%, var(--off-white));
}
.quiz-progresso[hidden] { display: none; }
.quiz-progresso-texto {
  font-size: var(--passo--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--marrom);
  white-space: nowrap;
}
.quiz-barra {
  flex: 1;
  height: 5px;
  background: color-mix(in srgb, var(--marrom) 12%, transparent);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.quiz-barra-preenchida {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dourado), var(--dourado-borda));
  transition: width 420ms var(--ease-suave);
}

/* --- Pergunta -------------------------------------------------------- */
.quiz-pergunta { border: 0; padding: 0; margin: 0; }
.quiz-pergunta legend {
  font-family: var(--fonte-titulo);
  font-size: calc(var(--passo-2) * var(--escala-titulo));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--marrom);
  text-wrap: balance;
  padding: 0;
  margin-bottom: var(--sp-8);
}

.quiz-opcoes {
  display: grid;
  gap: var(--sp-3);
}

/* O rádio real fica invisível mas focável — o label é a superfície. */
.quiz-opcao { position: relative; display: block; }
.quiz-opcao input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.quiz-opcao span {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 56px;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-md);
  cursor: pointer;
  font-weight: 400;
  transition: border-color var(--dur-curta) var(--ease),
              background-color var(--dur-curta) var(--ease),
              transform var(--dur-curta) var(--ease);
}
.quiz-opcao span::before {          /* marcador circular */
  content: '';
  width: 20px; height: 20px;
  flex: none;
  border: 1.5px solid var(--linha-forte);
  border-radius: 50%;
  transition: border-color var(--dur-curta) var(--ease),
              box-shadow var(--dur-curta) var(--ease),
              background-color var(--dur-curta) var(--ease);
}
.quiz-opcao:hover span {
  border-color: var(--dourado-borda);
  background: color-mix(in srgb, var(--champagne) 30%, transparent);
}
.quiz-opcao input:checked + span {
  border-color: var(--marrom);
  background: color-mix(in srgb, var(--champagne) 50%, transparent);
}
.quiz-opcao input:checked + span::before {
  border-color: var(--marrom);
  background: var(--marrom);
  box-shadow: inset 0 0 0 3.5px var(--off-white);
}
.quiz-opcao input:focus-visible + span {
  outline: 2px solid var(--marrom);
  outline-offset: 3px;
}

.quiz-navegacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.btn-voltar {
  background: none;
  border: 0;
  padding: var(--sp-2) 0;
  color: var(--marrom-suave);
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.btn-voltar:hover { color: var(--marrom); }
.btn-voltar[hidden] { display: none; }

/* Transição entre telas — só transform e opacity. */
.quiz-tela-entrando {
  animation: quiz-entra 400ms var(--ease-suave) both;
}
@keyframes quiz-entra {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* --- Resultado ------------------------------------------------------- */
.quiz-resultado { text-align: center; }
.quiz-resultado-emoji { font-size: 2.5rem; line-height: 1; }
.quiz-resultado h3 {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--passo-2) * var(--escala-titulo));
  line-height: 1.22;
  margin: var(--sp-4) 0 var(--sp-6);
  color: var(--marrom);
}
.quiz-resultado-texto {
  text-align: left;
  max-width: 34rem;
  margin-inline: auto;
  color: var(--marrom-suave);
}
.quiz-resultado-frase {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--passo-1) * var(--escala-titulo));
  line-height: 1.4;
  color: var(--marrom);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--linha-dourada);
  text-align: left;
  max-width: 34rem;
  margin-inline: auto;
}
.quiz-resultado .btn { margin-top: var(--sp-8); }

/* Termômetro do autocuidado. Rampa monocromática quente — champagne,
   dourado, dourado profundo. Sem vermelho, sem verde, sem ícone de
   alerta: o resultado nunca alarma. Os rótulos de texto logo abaixo é
   que carregam o significado, então a trilha é decorativa.             */
.termometro {
  max-width: 30rem;
  margin: var(--sp-8) auto var(--sp-10);
}
.termometro-trilho {
  position: relative;
  height: 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    var(--champagne) 0%,      var(--champagne) 33.3%,
    var(--dourado) 33.3%,     var(--dourado) 66.6%,
    var(--dourado-borda) 66.6%, var(--dourado-borda) 100%);
}
.termometro-marcador {
  position: absolute;
  top: 50%;
  left: 0;
  width: 26px; height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: var(--off-white);
  border: 3px solid var(--marrom);
  box-shadow: var(--sombra-suave);
  transform: translateY(-50%) scale(0.4);
  opacity: 0;
  transition: left 900ms var(--ease-suave),
              transform 500ms var(--ease-suave) 220ms,
              opacity 300ms var(--ease) 220ms;
}
.termometro.esta-pronto .termometro-marcador {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
.termometro-faixas {
  display: flex;
  margin-top: var(--sp-3);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--marrom-suave);
}
.termometro-faixas span { flex: 1; text-align: center; }
.termometro-faixas span[data-atual='true'] {
  color: var(--marrom);
  font-weight: 700;
}

/* Bloco do CVV — só na faixa mais baixa, discreto por especificação. */
.bloco-cvv {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--dourado);
  background: color-mix(in srgb, var(--champagne) 45%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  text-align: left;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--marrom-suave);
  max-width: 34rem;
  margin-inline: auto;
}
.bloco-cvv[hidden] { display: none; }

.quiz-refazer {
  display: block;
  margin: var(--sp-6) auto 0;
  background: none;
  border: 0;
  padding: var(--sp-2);
  color: var(--marrom-suave);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
  font-size: 0.93rem;
}
.quiz-refazer:hover { color: var(--marrom); }


/* =============== 18. REFLEXÕES (CARDS) E PÁGINA DE ARTIGO =============== */

.grade-posts {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  background: var(--off-white);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-media) var(--ease),
              box-shadow var(--dur-media) var(--ease),
              border-color var(--dur-media) var(--ease);
}
.post-card:hover {
  color: inherit;
  transform: translateY(-3px);
  border-color: var(--dourado);
  box-shadow: var(--sombra-suave);
}
.post-card h3 {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--passo-1) * var(--escala-titulo));
  line-height: 1.25;
  color: var(--marrom);
}
.post-card p { color: var(--marrom-suave); font-size: 0.97rem; flex: 1; }
.post-card .tema {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dourado-texto);
}
.post-card .link-seta { color: var(--dourado-texto); }

/* Página de artigo */
.artigo-topo { padding-block: clamp(3rem, 7vw, 5rem) var(--sp-10); }
.artigo-topo h1 {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--passo-3) * var(--escala-titulo));
  line-height: 1.15;
  color: var(--marrom);
  margin-block: var(--sp-5);
}
.artigo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--passo--1);
  color: var(--marrom-suave);
}

.artigo-corpo { padding-bottom: var(--respiro-secao); }
.artigo-corpo > * + * { margin-top: var(--sp-6); }
.artigo-corpo h2 {
  font-size: calc(var(--passo-2) * var(--escala-titulo));
  margin-top: var(--sp-12);
}
.artigo-corpo p { line-height: 1.75; }
.artigo-corpo ul { padding-left: var(--sp-6); display: grid; gap: var(--sp-3); }
.artigo-corpo blockquote {
  margin: var(--sp-10) 0;
  padding-left: var(--sp-6);
  border-left: 2px solid var(--dourado);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--passo-1) * var(--escala-titulo));
  line-height: 1.4;
  color: var(--marrom);
}

.artigo-cta {
  margin-top: var(--sp-12);
  padding: var(--sp-10) var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--champagne-fundo);
  text-align: center;
}
.artigo-cta h2 { margin-top: 0; font-size: calc(var(--passo-2) * var(--escala-titulo)); }
.artigo-cta p { margin-block: var(--sp-4) var(--sp-8); color: var(--marrom-suave); }
/* O CTA usa fundo champagne, onde o dourado-texto não passa: acento vira marrom. */
.artigo-cta .eyebrow { color: var(--marrom); }
/* Se a seção que contém o CTA já for champagne, o bloco sumiria no fundo.
   Aqui ele inverte para o creme e mantém o contorno dourado. */
.secao--champagne .artigo-cta {
  background: var(--creme);
  border: 1px solid var(--linha-dourada);
}

.voltar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--passo--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dourado-texto);
}
.voltar-link::before { content: '←'; }


/* ==================== 19. FRASES DA TCC (EDITORIAL) ==================== */
/* Lista de frases curtas sobre a aplicabilidade da TCC. Formato editorial:
   uma coluna de leitura, fio dourado fino entre as frases e muito respiro —
   exatamente o que o manual pede ("linhas finas para separar blocos",
   "muito espaço em branco: o respiro faz parte da identidade").
   Os destaques alternados vão em Cormorant itálico.                      */

.frases-tcc {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--larg-texto);
  margin-inline: auto;
  border-top: 1px solid var(--linha-dourada);
}

.frases-tcc li {
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--linha-dourada);
  font-size: var(--passo-1);
  line-height: 1.5;
  color: var(--marrom);
  text-wrap: pretty;
}

/* Uma a cada três ganha o tratamento de destaque: serifada itálica, um
   corpo maior e um fio dourado curto à esquerda. Cria ritmo sem precisar
   de cor nova nem de ícone. */
.frases-tcc li.destaque {
  position: relative;
  padding-left: var(--sp-8);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--passo-2) * var(--escala-titulo));
  line-height: 1.3;
}
.frases-tcc li.destaque::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(clamp(1.5rem, 3.5vw, 2.5rem) + 0.55em);
  width: var(--sp-5);
  height: 1px;
  background: var(--dourado);
}

@media (min-width: 48rem) {
  .frases-tcc li.destaque { padding-left: var(--sp-10); }
  .frases-tcc li.destaque::before { width: var(--sp-8); }
}


/* O botão que abre o quiz não é mais um CTA de agendar: ali começa algo
   interativo, e ele precisa se ler como convite. A diferença é feita dentro
   da paleta — um halo de champagne em volta do dourado, no espírito dos
   traços finos do manual. O halo é decorativo (1.49:1 sobre o creme): quem
   continua delimitando o botão é a borda dourado-borda, com 4.67:1. */
.quiz-comecar {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--champagne) 55%, transparent);
  font-size: calc(var(--passo-0) * 1.05);
  padding-inline: 2em;
}
.quiz-comecar:hover {
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--champagne) 55%, transparent),
              var(--sombra-suave);
}
@media (prefers-reduced-motion: reduce) {
  .quiz-comecar { transition: none; }
}


/* ============================= 20. INSTAGRAM ============================= */
/* Chamada centrada e curta. Substituiu a grade de 6 posts: não sobrou nada
   para preencher depois, e o respiro passa a ser o próprio conteúdo — é o
   que o manual pede. As classes .ig-grade / .ig-item / .ig-cabecalho saíram
   junto com ela.                                                          */

.ig-chamada { text-align: center; }

/* O glifo é decorativo (aria-hidden), mas precisa ser visto: o dourado puro
   dá 1.77:1 sobre o champagne e some. O dourado-borda dá 3.54:1, passa no
   mínimo de componente gráfico e continua na família do dourado — é o mesmo
   token que a seta do FAQ já usa sobre este fundo. */
.ig-glifo {
  display: block;
  width: clamp(2rem, 4.5vw, 2.5rem);
  height: auto;
  margin: 0 auto var(--sp-5);
  color: var(--dourado-borda);
}

/* O .eyebrow traz margin-bottom próprio; aqui ele fica menor porque o
   glifo logo acima já deu o respiro. */
.ig-chamada .eyebrow { margin-bottom: var(--sp-4); }
.ig-chamada h2 { margin-bottom: var(--sp-5); }
.ig-chamada .chamada { margin-inline: auto; }

.ig-acao { margin-top: var(--sp-8); }


/* ================================ 21. FAQ ================================ */
/* <details>/<summary> nativo: acessível por teclado sem uma linha de JS. */

.faq-lista {
  max-width: 46rem;
  margin-inline: auto;
  border-top: 1px solid var(--linha-dourada);
}

.faq-item { border-bottom: 1px solid var(--linha-dourada); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  font-size: var(--passo-1);
  font-weight: 400;
  letter-spacing: -0.005em;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-curta) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--dourado-texto); }

/* A seta é affordance de UI, não ornamento: usa --dourado-borda, que passa
   o mínimo de 3:1 de componente sobre creme e champagne. */
.faq-item summary::after {
  content: '';
  width: 11px; height: 11px;
  flex: none;
  border-right: 1.5px solid var(--dourado-borda);
  border-bottom: 1.5px solid var(--dourado-borda);
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--dur-media) var(--ease);
}
.faq-item[open] summary { color: var(--dourado-texto); }
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-25%); }

.faq-resposta {
  padding-bottom: var(--sp-6);
  max-width: 52ch;
  color: var(--marrom-suave);
}
.faq-resposta > * + * { margin-top: var(--sp-4); }


/* ====================== 22. CONTATO E FORMULÁRIO ====================== */

.contato-grade {
  display: grid;
  gap: var(--sp-10);
}

.contato-destaque {
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--marrom);
  color: var(--creme);
}
.contato-destaque h3 { color: var(--creme); margin-bottom: var(--sp-4); }
.contato-destaque p { color: color-mix(in srgb, var(--creme) 84%, transparent); }
.contato-destaque .btn { margin-top: var(--sp-6); }

.contato-dados {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--linha-clara);
  list-style: none;
  padding-left: 0;
}
.contato-dados li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contato-dados svg {
  width: 19px; height: 19px;
  flex: none;
  color: var(--dourado);
  margin-top: 4px;
}
.contato-dados strong { display: block; color: var(--creme); font-weight: 700; }
.contato-dados span, .contato-dados a {
  color: color-mix(in srgb, var(--creme) 84%, transparent);
  font-size: 0.97rem;
}

.formulario { display: grid; gap: var(--sp-5); }

.campo { display: grid; gap: var(--sp-2); }
.campo label { font-weight: 700; font-size: 0.95rem; }
.campo .dica { font-size: var(--passo--1); color: var(--marrom-suave); font-weight: 400; }

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--off-white);
  border: 1px solid var(--linha-campo);
  border-radius: var(--r-md);
  transition: border-color var(--dur-curta) var(--ease),
              box-shadow var(--dur-curta) var(--ease);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: none;
  border-color: var(--marrom);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dourado) 40%, transparent);
}
.campo input:user-invalid,
.campo textarea:user-invalid { border-color: #A8531F; }

.consentimento {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--marrom-suave);
  line-height: 1.5;
}
.consentimento input {
  width: 20px; height: 20px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--marrom);
}

/* Retorno do envio — escrito na voz do site, nunca um alert() cru.
   O erro usa terracota (#A8531F/#6E3410), não vermelho puro: cabe na
   "neutralidade quente" do manual e passa AA sobre o fundo claro.       */
.form-status {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  line-height: 1.55;
}
.form-status[hidden] { display: none; }
.form-status[data-tipo='sucesso'] {
  background: color-mix(in srgb, var(--champagne) 55%, transparent);
  border: 1px solid var(--dourado-borda);
  color: var(--marrom);
}
.form-status[data-tipo='erro'] {
  background: color-mix(in srgb, #E8C9A8 35%, transparent);
  border: 1px solid #A8531F;
  color: #6E3410;
}

@media (min-width: 56rem) {
  .contato-grade {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: start;
  }
}


/* ============================== 23. RODAPÉ ============================== */

.rodape {
  position: relative;
  background: var(--marrom);
  color: color-mix(in srgb, var(--creme) 86%, transparent);
  padding-block: var(--sp-16) var(--sp-8);
  overflow: hidden;
}
.rodape-grade {
  display: grid;
  gap: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--linha-clara);
}
.rodape-marca .marca { color: var(--creme); }
.rodape-marca .marca-nome { color: var(--creme); font-size: 1.15rem; }
.rodape-marca .marca-papel { color: var(--dourado); }
/* No rodapé o símbolo tem mais espaço que no cabeçalho, então cresce um pouco. */
.rodape-marca .marca-simbolo { height: 3.25rem; }
.rodape-frase {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--passo-1) * var(--escala-titulo));
  line-height: 1.35;
  color: var(--creme);
  margin-top: var(--sp-5);
  max-width: 24ch;
}
.rodape h4 {
  font-family: var(--fonte-corpo);
  color: var(--creme);
  font-size: var(--passo--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.rodape ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.rodape a { color: inherit; text-decoration: none; }
.rodape a:hover { color: var(--dourado); text-decoration: underline; }

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
  font-size: var(--passo--1);
  color: color-mix(in srgb, var(--creme) 78%, transparent);
}
.rodape-base a { color: var(--champagne); text-decoration: underline; }

@media (min-width: 52rem) {
  .rodape-grade { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-12); }
}


/* ========================== 24. RECURSOS ============================== */
/* Cards de materiais digitais. Montados por main.js a partir de config.js,
   então o CSS precisa se sustentar sem saber quantos cards virão.         */

.recursos-grade {
  display: grid;
  gap: var(--sp-8);
}
@media (min-width: 48rem) {
  .recursos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.recurso-card {
  position: relative;                 /* ancora o link estendido do título */
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-media) var(--ease),
              box-shadow var(--dur-media) var(--ease),
              border-color var(--dur-media) var(--ease);
}
.recurso-card:hover {
  transform: translateY(-3px);
  border-color: var(--dourado);
  box-shadow: var(--sombra-suave);
}

/* A capa tem proporção fixa para que cards de alturas diferentes ainda
   alinhem a primeira linha do texto. O fundo champagne cobre a folga caso
   a arte enviada tenha transparência. */
.recurso-capa {
  background: var(--champagne-fundo);
  border-bottom: 1px solid var(--linha);
}
.recurso-capa img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.recurso-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
}

.recurso-corpo h3 {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--passo-1) * var(--escala-titulo));
  line-height: 1.25;
  color: var(--marrom);
}

/* Link estendido: o <a> do título cobre o card inteiro. Assim a área
   clicável é o card todo, mas existe UM só ponto de foco — o "Saiba mais"
   é um <span> decorativo, não um segundo link para o mesmo destino. */
.recurso-link {
  color: inherit;
  text-decoration: none;
}
.recurso-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}
.recurso-card:hover .recurso-link { color: var(--marrom); }

/* O foco fica no título, que é o link de verdade — é o padrão do link
   estendido e o :focus-visible global já desenha o anel em marrom (12.45:1).
   Tentar mover o anel para o card exigiria :has(), e num navegador sem
   suporte o resultado seria foco NENHUM. Não vale o risco. */

.recurso-subtitulo {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dourado-texto);
}

.recurso-resumo {
  flex: 1;
  font-size: 0.97rem;
  color: var(--marrom-suave);
}

.recurso-btn {
  align-self: flex-start;
  margin-top: var(--sp-4);
}
/* O botão é decorativo: quem clica é o link do título, que cobre o card.
   Sem isto o cursor viraria seta em cima justamente do elemento com mais
   cara de clicável. */
.recurso-btn { pointer-events: none; }
.recurso-btn::after { content: ' \2192'; }

/* Material ainda sem link real: o card aparece para ela ver o layout, mas
   deixa claro que não vai a lugar nenhum. */
.recurso-card[data-pendente] { opacity: 0.85; }
.recurso-card[data-pendente] .recurso-btn {
  --btn-bg: transparent;
  --btn-borda: var(--dourado-borda);
  color: var(--marrom-suave);
}

.recursos-vazio {
  grid-column: 1 / -1;                /* ocupa a linha toda da grade */
  padding-block: var(--sp-12);
  text-align: center;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: calc(var(--passo-1) * var(--escala-titulo));
  color: var(--marrom-suave);
}


/* ============================= 25. PÁGINA 404 ============================= */

.pagina-404 {
  min-height: 70vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: var(--respiro-secao);
}
.pagina-404 .reflexao { margin-block: var(--sp-6) var(--sp-10); }


/* ================= 26. MOVIMENTO REDUZIDO / IMPRESSÃO ================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Nada some nem se desloca: tudo já nasce no estado final. */
  .js .reveal { opacity: 1; transform: none; }
  .reframe-antes::after { transform: scaleX(1); }
  .reframe-depois { opacity: 1; transform: none; }
  .termometro-marcador { opacity: 1; transform: translateY(-50%) scale(1); }
}

@media print {
  .site-header, .wpp-flutuante, .quiz, .nav-toggle, .ramo { display: none !important; }
  body { background: #fff; color: #000; }
  .arco::before { display: none; }
}