/* Gerado por scripts/build-site.mjs a partir de kit/kit.css — não edite este arquivo diretamente. */
/* ==========================================================================
   KIT DE COMPONENTES — SITES DE PSICÓLOGOS (abcsites)
   ------------------------------------------------------------------------
   Este arquivo é o "motor" do kit inicial: tokens de design + componentes
   reutilizáveis. Nenhum componente aqui referencia conteúdo de um cliente
   específico — quem muda a cara do site é o bloco de tokens escolhido via
   atributo [data-theme] no <html>, mais o conteúdo de cada página.

   Temas disponíveis nesta demonstração:
     data-theme="regina"  -> terracota / serifada (Dra. Regina Mendes)
     data-theme="sereno"  -> verde-sálvia / editorial (demo)
     data-theme="claro"   -> azul-acinzentado / contemporâneo (demo)

   ÍCONES — Phosphor Icons (sistema de ícones do kit, uso sob demanda)
   ------------------------------------------------------------------------
   Todo componente aqui que usa ícone (.whatsapp-float, .photo-placeholder, o
   indicador +/− do .faq-item) espera um <i class="ph-*"> do Phosphor, não mais
   SVG inline. Exceção: o hambúrguer (.nav__barras) é desenhado em CSS, para
   poder virar X. Este kit.css NÃO carrega a fonte de
   ícones globalmente — cada página só paga o custo de rede se realmente
   usar algum desses componentes. Toda página que usa nav/whatsapp-float/faq
   já inclui o peso bold no <head>; para adicionar em página nova ou usar
   outro peso, adicione (junto aos links de Google Fonts) só o(s) peso(s)
   que forem usar de fato:

     <link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css">
     <link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css">
     <link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css">

   Versão fixada em 2.1.1 de propósito (URLs verificadas antes de usar) —
   trocar a versão só se for uma decisão deliberada, não sem querer.

   Uso: <i class="ph-bold ph-heart"></i> — troque "heart" por qualquer nome
   de ícone do catálogo em https://phosphoricons.com. O peso é sempre a
   primeira classe: `ph` (regular), `ph-bold` (bold), `ph-fill` (fill).

   PESO PADRÃO DESTE KIT: ph-bold. Use `ph-bold` por padrão em qualquer
   ícone novo; só troque para `ph` (regular) ou `ph-fill` quando um contexto
   específico pedir mais leveza ou mais peso visual (ex: um ícone grande de
   destaque solitário pode pedir `ph-fill`). Os números dentro de
   `.card__icon` (badges de sequência tipo "01", "02"...) não são ícones —
   ficam como texto, não converter para Phosphor sem decisão explícita
   (trocar por ícone muda o sentido de cada card, não é só troca de biblioteca).
   ========================================================================== */

/* --------------------------------- RESET -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: color-mix(in srgb, var(--color-primary) 22%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* "Pular para o conteúdo": primeiro elemento focável da página, aparece só no foco por teclado. */
.skip-link { position: fixed; left: 1rem; top: -100%; z-index: 60; padding: .6rem 1rem; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-primary-ink); font-weight: 600; }
.skip-link:focus { top: 1rem; }
button { font: inherit; }
/* Foco por teclado visível e na cor da marca em todo elemento interativo. Em fundos
   escuros/terracota o contorno troca para a cor clara (senão some contra o fundo). */
:where(a, button, summary, input, select, textarea, label, [tabindex]):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
:where(.section--dark, .section--brand, .footer, .marquee, .nav.is-rolado) :where(a, button, summary, input, select, textarea, label, [tabindex]):focus-visible { outline-color: var(--color-text-on-dark); }

/* ------------------------------ TOKENS BASE ------------------------------ */
:root {
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --shadow-soft: 0 16px 40px rgba(20, 12, 10, .08);
  --shadow-card: 0 10px 24px rgba(20, 12, 10, .06);
  /* --card-radius/--card-shadow (não --radius-md/--shadow-card): tokens
     dedicados a .card, sobrescritos por tema — ver bloco "VARIAÇÃO DE CARD
     POR TEMA" mais abaixo. Deliberadamente separados de --radius-md porque
     esse também é usado pelo menu mobile, que não precisa variar junto. */
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-card);
  --container: 1180px;
  --space-section: clamp(3.5rem, 6vw, 6.5rem);
  /* MOTION: durações curtas (150–300ms), ease-out ao entrar, ease-in ao sair, mola só na
     confirmação. Mover só transform e opacity; deslocamentos multiplicados por --mov. */
  --dur-rapido: 150ms;
  --dur-base: 200ms;
  --dur-lento: 280ms;
  --ease-entra: cubic-bezier(.2, .8, .2, 1);
  --ease-sai: cubic-bezier(.4, 0, 1, 1);
  --ease-mola: cubic-bezier(.34, 1.56, .64, 1);
  --mov: 1;
  --transition: var(--dur-base) var(--ease-entra);
  /* Chamada principal (.btn-primary, .whatsapp-float): cor só dela, para se destacar
     do resto (lei de Von Restorff). Sem valor no tema, repete o primary.
     O verde-petróleo da Regina foi testado e revertido em 2026-10-21. */
  --color-cta: var(--color-primary);
  --color-cta-hover: var(--color-primary-hover);
  --color-cta-ink: var(--color-primary-ink);
}
/* movimento reduzido: depois dos tokens, para vencer o --mov: 1. Zera deslocamento,
   escala e giro; fades de cor e opacidade continuam */
@media (prefers-reduced-motion: reduce) { :root { --mov: 0; } }

/* --- Tema 1: Regina — terracota / serifada expressiva -------------------- */
[data-theme="regina"] {
  --color-bg: #FFF6F4;
  --color-bg-alt: #FFD6CF;
  --color-bg-dark: #491C15;
  --color-ink: #491C15;
  --color-text: #3E2B25;
  --color-text-muted: #6E534B;
  --color-text-on-dark: #FBE9E4;
  --color-text-on-dark-muted: #E3C0B6;
  --color-primary: #A04E42;
  --color-primary-hover: #833B31;
  --color-primary-ink: #FFFFFF;
  --color-accent: #BD6356;
  --color-border: #F0C9BE;
  --color-border-on-dark: rgba(251, 233, 228, .18);
  --font-heading: 'Fraunces', 'Iowan Old Style', serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --heading-style: italic;
}

/* --- Tema demo "sereno" — verde-sálvia / editorial ----------------------- */
[data-theme="sereno"] {
  --color-bg: #F8F4E9;
  --color-bg-alt: #EDE3CE;
  --color-bg-dark: #1C3A2E;
  --color-ink: #1C3A2E;
  --color-text: #2C2A20;
  --color-text-muted: #5C5A48;
  --color-text-on-dark: #F1EFE2;
  --color-text-on-dark-muted: #C9D6C9;
  --color-primary: #3E6B49;
  --color-primary-hover: #2C5138;
  --color-primary-ink: #FFFFFF;
  --color-accent: #5C7A5E;
  --color-border: #DED0B0;
  --color-border-on-dark: rgba(241, 239, 226, .16);
  --font-heading: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Nunito Sans', -apple-system, sans-serif;
  --heading-style: italic;
}

/* --- Tema demo "claro" — azul-acinzentado / contemporâneo ---------------- */
[data-theme="claro"] {
  --color-bg: #F4F7F7;
  --color-bg-alt: #E3EAEB;
  --color-bg-dark: #23343A;
  --color-ink: #23343A;
  --color-text: #29363A;
  --color-text-muted: #59696D;
  --color-text-on-dark: #EAF2F2;
  --color-text-on-dark-muted: #B7CACD;
  --color-primary: #3E6E77;
  --color-primary-hover: #2D535A;
  --color-primary-ink: #FFFFFF;
  --color-accent: #7FA0A6;
  --color-border: #D4E0E1;
  --color-border-on-dark: rgba(234, 242, 242, .16);
  --font-heading: 'Sora', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --heading-style: normal;
}

/* ------------------------------ TIPOGRAFIA ------------------------------- */
h1, h2, h3, .heading-font { font-family: var(--font-heading); color: var(--color-ink); font-weight: 600; letter-spacing: -0.01em; }
em { font-style: var(--heading-style); color: var(--color-accent); }
h1 { font-size: clamp(2.25rem, 4vw, 3.4rem); line-height: 1.1; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.18; }
h3 { font-size: 1.2rem; line-height: 1.3; }
.eyebrow {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  /* --color-primary, não --color-accent: accent-on-bg fica abaixo de 4.5:1
     (WCAG AA pra texto pequeno) nos 3 temas — accent continua ok só como
     decoração (::before) ou em texto grande (h1-h3 via `em`). */
  color: var(--color-primary); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--color-accent); display: inline-block; }
/* Ícone de marca opcional (<svg class="eyebrow-icon">) como primeiro filho
   do .eyebrow — sempre o MESMO ícone (o mark da logo do cliente, não um
   ícone por seção), estático (sem animação), preenchido (mesmo tratamento
   do logo original em partials/logo.html, não como traço/linha). fill:
   currentColor faz o ícone acompanhar a cor do texto do eyebrow
   automaticamente em .section--dark/.section--brand, sem override extra.
   Quando há ícone, o ::before (ponto decorativo do tema regina) é escondido
   pra não duplicar o papel de "marcador" antes do texto. */
.eyebrow-icon { width: auto; height: 14px; flex-shrink: 0; }
.eyebrow-icon path { fill: currentColor; }
.eyebrow:has(.eyebrow-icon)::before { display: none; }
/* --color-primary contra --color-bg-alt fica em 4.31:1 no tema regina (abaixo
   de 4.5:1); --color-primary-hover dá 5.99 / 7.04 / 6.90 em regina/sereno/claro. */
.section--alt .eyebrow { color: var(--color-primary-hover); }
.lede { font-size: 1.1rem; color: var(--color-text-muted); max-width: 46ch; }
.section--dark .lede, .section--dark p { color: var(--color-text-on-dark-muted); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-text-on-dark); }
.section--dark .eyebrow { color: var(--color-text-on-dark); }
/* .section--brand: fundo --color-primary (não --color-bg-dark) — pensado pra
   "conversar" com CTAs/botões que já usam --color-primary (nav, hero). Usa
   --color-primary-ink pra heading/eyebrow (mesma cor de texto já usada nos
   botões primary, garantido >=4.5:1 nos 3 temas) — --color-text-on-dark-muted
   do .section--dark falha WCAG AA aqui porque --color-primary é bem mais
   claro que --color-bg-dark. */
.section--brand .lede, .section--brand p { color: var(--color-text-on-dark); }
.section--brand h1, .section--brand h2, .section--brand h3 { color: var(--color-primary-ink); }
.section--brand .eyebrow { color: var(--color-primary-ink); }
.section--brand .eyebrow::before { background: var(--color-primary-ink); }
/* em usa --color-accent globalmente (linha acima) — contra --color-bg-dark
   (bem escuro) isso sempre teve contraste alto, mas contra --color-primary
   (tom médio, próximo do próprio accent) medi só 1.39:1 no Chrome — quase
   ilegível. --color-text-on-dark garante >=4.5:1 nos 3 temas contra
   --color-primary, calculado, não só visual (ver docs/HANDOFF.md §5). */
.section--brand em { color: var(--color-text-on-dark); }

/* --------------------- VARIAÇÃO DE EYEBROW/CARD POR TEMA ------------------
   DESVIO DELIBERADO da regra "tema novo só mexe em token, nunca em
   componente" (ver CLAUDE.md). Registrado em 2026-08-19: o `.eyebrow`
   (linha fina + versalete) e o estilo de `.card` (cantos arredondados +
   sombra) tinham sido copiados de forma praticamente idêntica do site usado
   como benchmark no diagnóstico inicial (psileticiacamargo.com.br) — e
   aplicados sem variação nos 3 temas, inclusive no site real da Regina.
   Ver docs/HANDOFF.md, seção "Remediação de benchmark copiado" pro caso
   completo. Esses overrides existem especificamente pra cada tema ter uma
   silhueta própria em vez de uma receita única — não são só troca de cor. */
[data-theme="regina"] .eyebrow::before {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent);
}
[data-theme="sereno"] .eyebrow {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  padding: .3rem .75rem; border-radius: var(--radius-pill);
}
[data-theme="sereno"] .eyebrow::before { content: none; }
[data-theme="claro"] .eyebrow {
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .82rem;
}
[data-theme="claro"] .eyebrow::before { content: none; }

[data-theme="sereno"] { --card-radius: 28px; }
[data-theme="claro"] { --card-radius: 10px; --card-shadow: none; }

/* -------------------------------- LAYOUT --------------------------------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block: var(--space-section); }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark-muted); }
.section--brand { background: var(--color-primary); color: var(--color-text-on-dark); }
.section-head { max-width: 640px; margin-bottom: 2.75rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lede { margin-top: 1rem; }
.section-head.center .lede { margin-inline: auto; }
/* Coluna de leitura: o container continua com a largura padrão (mesma margem
   esquerda de todas as seções) e só os filhos ficam estreitos. Centralizar um
   container estreito fazia a margem esquerda pular entre seções. */
.container--narrow > * { max-width: 680px; }
/* Faixa de chamada final (eyebrow + título curto + botões): o único bloco
   centralizado do layout; todo o resto alinha à esquerda. */
.section--cta { text-align: center; }
.section--cta .section-head { margin-inline: auto; margin-bottom: 0; }
.section--cta h2, .section--cta .lede { max-width: 560px; margin-inline: auto; }
.section--cta .btn-row { justify-content: center; margin-top: 1.75rem; }
.two-col { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.two-col.reverse { grid-template-columns: 1fr 1.05fr; }
.two-col.reverse .two-col__media { order: 2; }
@media (max-width: 860px) {
  .two-col, .two-col.reverse { grid-template-columns: 1fr; }
  .two-col.reverse .two-col__media { order: -1; }
}
.grid { display: grid; gap: 1.5rem; }
/* grades e passos podem ser listas (o leitor de tela anuncia "lista, N itens") */
.grid:where(ul, ol), .timeline:where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 780px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* -------------------------------- BOTÕES --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.7rem; border-radius: var(--radius-pill); font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-rapido) var(--ease-entra), background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(calc(-1px * var(--mov))); }
.btn:active { transform: scale(calc(1 - .03 * var(--mov))); }
.btn:disabled { opacity: .75; cursor: not-allowed; }
/* enviando: indicador girando (rotação contínua, fora do limite de 300ms como o marquee) */
.btn[aria-busy="true"] { opacity: .8; cursor: progress; }
.btn[aria-busy="true"]::after { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-gira .7s linear infinite; }
@keyframes btn-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation: none; } }
/* hover que muda de cor: com transição (o anel de foco continua instantâneo) */
:where(.nav__links a, .card__link, .conteudo a, .faq-item p a, .migalhas a, .diretorio-lista a, .paginacao a, .artigo__sumario ol a, .artigo__voltar, .artigo__tags a, .footer a, .quiz__voltar, .post-card__titulo a) {
  transition: color var(--dur-rapido) var(--ease-entra), border-color var(--dur-rapido) var(--ease-entra), text-decoration-color var(--dur-rapido) var(--ease-entra), opacity var(--dur-rapido) var(--ease-entra);
}
.btn-primary { background: var(--color-cta); color: var(--color-cta-ink); }
.btn-primary:hover { background: var(--color-cta-hover); }
.btn-outline { background: transparent; border: 2px solid currentColor; padding: calc(.95rem - 1px) calc(1.7rem - 1px); color: var(--color-ink); }
.section--dark .btn-outline { color: var(--color-text-on-dark); }
.btn-outline:hover { background: rgba(0,0,0,.04); }
.section--dark .btn-outline:hover { background: rgba(255,255,255,.08); }
.btn-row { display: flex; gap: .9rem; flex-wrap: wrap; }
/* shortcut: com nowrap, um texto de botão maior que ~300px estoura em 390px; quebrar linha se surgir um assim. */
@media (max-width: 540px) { .btn-row .btn { flex: 1 1 100%; } }

/* --------------------------------- NAV ------------------------------------ */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border);
  transition: background-color var(--dur-base) var(--ease-entra), border-color var(--dur-base) var(--ease-entra); }
/* ao rolar (classe posta pelo script do cabeçalho): fundo escuro; links, logo e menu acompanham */
.nav.is-rolado { background: color-mix(in srgb, var(--color-bg-dark) 96%, transparent); border-bottom-color: var(--color-border-on-dark); }
.nav.is-rolado .nav__brand, .nav.is-rolado .nav__links a, .nav.is-rolado .nav__toggle { color: var(--color-text-on-dark); }
.nav.is-rolado .nav__links a:hover { color: var(--color-text-on-dark-muted); }
.nav.is-rolado .nav__toggle { border-color: var(--color-border-on-dark); }
:where(.nav__brand, .nav__links a, .nav__toggle) { transition: color var(--dur-base) var(--ease-entra), border-color var(--dur-base) var(--ease-entra), transform var(--dur-rapido) var(--ease-entra); }
.nav .container { position: relative; display: flex; align-items: center; justify-content: space-between; padding-block: 1.1rem; gap: 1rem; }
.nav__brand { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--color-ink); }
.nav__brand span { color: var(--color-accent); }
.nav__brand svg { height: 44px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 1.9rem; font-size: .92rem; font-weight: 600; white-space: nowrap; }
.nav__links a:hover { color: var(--color-primary); }
.nav__cta { display: flex; align-items: center; gap: .75rem; }
.nav-toggle-input { display: none; }
.nav__toggle {
  display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer;
  color: var(--color-ink); flex-shrink: 0; transition: transform var(--dur-rapido) var(--ease-entra), border-color var(--dur-rapido) var(--ease-entra);
}
.nav__toggle:active { transform: scale(calc(1 - .06 * var(--mov))); }
.nav__toggle i { font-size: 1.125rem; line-height: 1; }
/* hambúrguer em CSS (3 barras) que vira X quando o menu abre */
.nav__barras, .nav__barras::before, .nav__barras::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.nav__barras { position: relative; transition: background-color var(--dur-rapido) var(--ease-entra); }
.nav__barras::before, .nav__barras::after { content: ""; position: absolute; left: 0; transition: transform var(--dur-base) var(--ease-entra); }
.nav__barras::before { transform: translateY(-6px); }
.nav__barras::after { transform: translateY(6px); }
.nav-toggle-input:checked ~ .nav__cta .nav__barras { background-color: transparent; }
.nav-toggle-input:checked ~ .nav__cta .nav__barras::before { transform: rotate(45deg); }
.nav-toggle-input:checked ~ .nav__cta .nav__barras::after { transform: rotate(-45deg); }
/* movimento reduzido: vira X na hora, sem girar */
@media (prefers-reduced-motion: reduce) { .nav__barras, .nav__barras::before, .nav__barras::after { transition: none; } }
/* Abaixo de 480px o botão do header espremia a marca (logo em SVG caía pra
   ~metade da largura natural, legenda ilegível). O .whatsapp-float leva ao
   mesmo destino e está sempre visível, então o CTA do header sai daqui. */
@media (max-width: 480px) { .nav__cta .btn { display: none; } }
/* Hambúrguer abaixo de 1024px: entre ~760 e 1000px os links já não cabiam numa linha
   ("Como funciona" quebrava e o logo encolhia). */
@media (max-width: 1023px) {
  .nav__toggle { display: inline-flex; }
  /* Visualmente escondido mas focável por teclado (não display:none) — sem
     isso o menu mobile fica impossível de abrir sem mouse/toque, já que o
     <label> associado não recebe foco/ativação por teclado sozinho. */
  .nav-toggle-input {
    display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .nav__links a { display: flex; align-items: center; min-height: 44px; }
  .nav-toggle-input:focus-visible ~ .nav__cta .nav__toggle {
    outline: 2px solid var(--color-primary); outline-offset: 2px;
  }
  /* menu sempre montado; fechado = visibility hidden (fora do teclado e do leitor de tela).
     A visibility espera a saída terminar para o fade aparecer. */
  .nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; /* cobre a borda de baixo do cabeçalho: menu e cabeçalho viram uma peça só */
    background: var(--color-bg); border: 1px solid var(--color-border); border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem) 1.75rem; box-shadow: var(--shadow-soft);
    visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(calc(-8px * var(--mov)));
    transition: opacity var(--dur-rapido) var(--ease-sai), transform var(--dur-rapido) var(--ease-sai), visibility 0s linear var(--dur-rapido);
  }
  .nav.is-rolado .nav__links { background: var(--color-bg-dark); border-color: var(--color-border-on-dark); }
  /* menu aberto: cabeçalho opaco, na mesma cor do painel (sem a transparência que deixava um tom diferente) */
  .nav:has(.nav-toggle-input:checked) { background: var(--color-bg); }
  .nav.is-rolado:has(.nav-toggle-input:checked) { background: var(--color-bg-dark); }
  .nav-toggle-input:checked ~ .nav__links {
    visibility: visible; opacity: 1; pointer-events: auto; transform: none;
    transition: opacity var(--dur-base) var(--ease-entra), transform var(--dur-base) var(--ease-entra), visibility 0s;
  }
}

/* --------------------------------- HERO ----------------------------------- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero__stats { display: flex; flex-wrap: wrap; gap: 1.25rem 2.4rem; margin-top: 2.5rem; }
.hero__stat b { display: block; font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-ink); }
.hero__stat span { font-size: .78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; }

/* -------------------------------- MARQUEE ---------------------------------- */
/* Faixa full-bleed com rolagem horizontal contínua (ex: logo após o hero).
   Conteúdo duplicado 1x (2 cópias no total) + translateX(-50%) pra loop sem
   costura — a 2ª cópia leva aria-hidden porque é só repetição visual, senão
   leitor de tela lê a lista duas vezes. Pausa no hover e respeita
   prefers-reduced-motion (o kit já leva acessibilidade a sério, ver
   docs/HANDOFF.md §5). */
.marquee { overflow: hidden; background: var(--color-bg-dark); padding-block: 1.1rem; }
.marquee__track { display: flex; width: max-content; gap: 2.75rem; animation: marquee-scroll 26s linear infinite; }
.marquee { position: relative; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-pausada .marquee__track { animation-play-state: paused; }
/* Pausar/retomar (WCAG 2.2.2: movimento contínuo precisa de controle). Comportamento:
   script curto no partial da faixa. */
.marquee__pausa {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-on-dark); border-radius: var(--radius-pill);
  background: var(--color-bg-dark); color: var(--color-text-on-dark); cursor: pointer;
}
.marquee__pausa i { font-size: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .marquee__pausa { display: none; } }
.marquee__group { display: flex; gap: 2.75rem; }
.marquee__item { display: flex; align-items: center; gap: .6rem; white-space: nowrap; font-size: .92rem; font-weight: 600; color: var(--color-text-on-dark); }
.marquee__item i { font-size: 1.25rem; color: var(--color-accent); }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------------------------- PLACEHOLDER DE FOTO -------------------------- */
.photo-placeholder {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 5; background: linear-gradient(155deg, var(--color-bg-alt), var(--color-border));
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft);
}
.photo-placeholder i { font-size: clamp(2.5rem, 18vw, 5rem); opacity: .55; color: var(--color-ink); }
.photo-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-placeholder__label {
  position: absolute; bottom: 1rem; left: 1rem; right: 1rem;
  background: rgba(255,255,255,.85); border-radius: var(--radius-sm);
  padding: .5rem .75rem; font-size: .72rem; font-weight: 600; color: var(--color-text-muted);
}
.photo-placeholder--wide { aspect-ratio: 16 / 10; }

/* --------------------------------- CARDS ----------------------------------- */
.card {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--card-radius);
  padding: 1.75rem; box-shadow: var(--card-shadow);
}
.section--dark .card { background: rgba(255,255,255,.05); border-color: var(--color-border-on-dark); }
.section--alt .card { background: var(--color-bg); }
.card__icon {
  width: 42px; height: 42px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-primary-hover); margin-bottom: 1rem;
}
/* .card__icon aceita número ("01") ou ícone do Phosphor */
.card__icon i { font-size: 1.35rem; line-height: 1; }
.card h3 { margin-bottom: .5rem; }
/* título de card que precisa ser h2 (ex: lista de posts sob o h1 da página), no tamanho do h3 */
.card__titulo { font-size: 1.2rem; line-height: 1.3; margin-bottom: .5rem; }
/* data, autor e afins de um post */
.card .meta { margin-top: .75rem; }
.meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .9rem; color: var(--color-text-muted); }
.card p { color: var(--color-text-muted); font-size: .95rem; }
.card__link { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-top: .5rem; font-size: .9rem; font-weight: 600; color: var(--color-primary); }
.card__link:hover { color: var(--color-primary-hover); text-decoration: underline; }
.section--dark .card__link { color: var(--color-text-on-dark); }
.section--dark .card p { color: var(--color-text-on-dark-muted); }
/* .section--brand mantém os cards no recibo claro padrão (não translúcido
   escuro como .section--dark) — o contraste do card claro contra o fundo
   --color-primary já é alto por si só. Sem isso, as regras de heading/p
   de .section--brand (mais específicas que a regra-base de h1-h3/p) vazariam
   pro texto escuro esperado dentro do card, deixando quase ilegível. */
.section--brand .card h3 { color: var(--color-ink); }
.section--brand .card p { color: var(--color-text-muted); }

/* ------------------------------- TIMELINE ---------------------------------- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .timeline { grid-template-columns: 1fr; } }
.timeline-step__num { font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-accent); margin-bottom: .5rem; }

/* --------------------------------- CREDENCIAIS ------------------------------- */
/* Credenciais da profissional (abordagem, modalidade, sigilo, CRP). Não é prova
   social: prova social é o que outras pessoas dizem (ver .avaliacoes). Nunca
   leva depoimento de paciente (regras do CFP, diagnóstico §6). */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card { text-align: left; padding: 1.5rem 1.25rem; }
.trust-card b { display: block; font-family: var(--font-heading); font-size: 1rem; margin-bottom: .35rem; color: var(--color-ink); }
.trust-card span { font-size: .84rem; opacity: .85; color: inherit; }

/* ---------------------------- AVALIAÇÕES (GOOGLE) -------------------------- */
/* Depoimentos de pacientes copiados do perfil do Google: fora do padrão acima.
   Só com aceite explícito do cliente (docs/NOVO-SITE.md). Sem schema Review/
   AggregateRating: o Google não mostra estrelas de avaliações que o site exibe
   sobre si mesmo. Desktop: mural (cada card na sua altura). Celular: carrossel
   do kit (regra .grid--carrossel abaixo). */
.avaliacoes__nota { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: 1rem; }
.avaliacoes__nota b { font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-ink); }
.estrelas { color: var(--color-accent); letter-spacing: .1em; }
/* selos: faixa de credenciais (ícone + rótulo curto), sem caixa de card, para não parecer mais uma avaliação */
.selos { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2.25rem; margin: -1rem 0 2.5rem; padding: 1rem 1.5rem; list-style: none; background: var(--color-bg-alt); border-radius: var(--radius-md); }
.selos li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; font-weight: 600; color: var(--color-ink); }
.selos i { font-size: 1.35rem; color: var(--color-primary); flex-shrink: 0; }
@media (max-width: 540px) { .selos { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; padding: 1rem; } .selos li { font-size: .86rem; line-height: 1.3; } }
.avaliacoes__lista { columns: 3 280px; column-gap: 1.25rem; }
.avaliacao { display: flex; flex-direction: column; gap: .75rem; break-inside: avoid; margin: 0 0 1.25rem; }
.avaliacao__topo { display: flex; align-items: center; justify-content: space-between; }
.avaliacao__topo i { font-size: 1.35rem; color: var(--color-primary); }
.avaliacao blockquote { margin: 0; }
.avaliacao__autor { font-weight: 600; font-size: .9rem; color: var(--color-ink); }
/* "Ler mais" de texto longo: só no carrossel, onde um card alto deixaria vazio embaixo dos outros.
   O texto inteiro fica no HTML (leitor de tela lê tudo); o corte é visual. */
.avaliacao__mais { display: none; }
.avaliacao__mais summary { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; font-weight: 600; color: var(--color-primary); cursor: pointer; list-style: none; }
.avaliacao__mais summary::-webkit-details-marker { display: none; }
.avaliacao__mais[open] summary span:first-child, .avaliacao__mais:not([open]) summary span:last-child { display: none; }
.section--dark .trust-card b { color: var(--color-text-on-dark); }
.section--dark .card__icon { background: rgba(255,255,255,.14); color: var(--color-text-on-dark); }

/* ------------------------------- BADGES / PILLS ----------------------------- */
.pill-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
/* Selo informativo, não clicável: fundo chapado, sem borda e canto menor, para
   não repetir a silhueta do .btn-outline (borda + cápsula), que é clicável. */
.pill {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent); border-radius: var(--radius-sm);
  padding: .35rem .75rem; font-size: .82rem; font-weight: 600; color: var(--color-ink);
}

/* -------------------- CONTEÚDO LONGO (posts, páginas de texto) -------------------- */
/* Texto corrido vindo do editor do WordPress: devolve o que o reset do kit tira
   (margens, marcadores de lista) e trata o em como itálico comum, não como o
   destaque colorido dos títulos. Um h1 dentro do texto é tratado como h2. */
.conteudo { font-size: 1.05rem; }
.conteudo > * + * { margin-top: 1.15em; }
.conteudo > :where(h1, h2, h3, h4) { margin-top: 2em; }
.conteudo :where(h1, h2) { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
.conteudo h3 { font-size: 1.25rem; }
.conteudo h4 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--color-ink); }
.conteudo :where(ul, ol) { padding-left: 1.4em; }
.conteudo ul { list-style: disc; }
.conteudo ol { list-style: decimal; }
.conteudo li + li { margin-top: .4em; }
.conteudo li::marker { color: var(--color-primary); }
.conteudo :where(p, li) { text-wrap: pretty; }  /* evita palavra sozinha na última linha */
/* sublinhado fino e translúcido: o link continua visível sem pesar na leitura; fica sólido no hover */
.conteudo a, .faq-item p a { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: .07em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .18em; }
.conteudo a:hover, .faq-item p a:hover { color: var(--color-primary-hover); text-decoration-color: currentColor; }
.conteudo em { color: inherit; font-style: italic; }
.conteudo blockquote { margin-inline: 0; padding-left: 1.2em; border-left: 3px solid var(--color-accent); color: var(--color-text-muted); }
.conteudo :where(img, video, iframe) { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.conteudo figcaption { margin-top: .5em; font-size: .85rem; color: var(--color-text-muted); }

/* ------------------------- BREADCRUMBS (migalhas) -------------------------- */
/* Trilha "você está em" (padrão do W3C/WAI-ARIA APG: nav rotulado, lista ordenada,
   aria-current na página atual; separador fora da leitura de tela). No WordPress vem do
   Rank Math, a mesma trilha do BreadcrumbList (shortcode [webpsi_migalhas] do tema pai). */
.migalhas { margin-bottom: 1rem; font-size: .85rem; color: var(--color-text-muted); }
.migalhas ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.migalhas li { display: inline-flex; align-items: center; min-width: 0; }
.migalhas li + li::before { content: "›"; content: "›" / ""; margin-inline: .5rem; color: var(--color-text-muted); }
.migalhas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-muted); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .18em; }
.migalhas a:hover { color: var(--color-primary-hover); text-decoration-color: currentColor; }
.migalhas [aria-current] { color: var(--color-ink); }
/* a página atual repete o H1 logo abaixo: uma linha só, com reticências */
.migalhas li:last-child { flex: 1 1 0; }
.migalhas li:last-child [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* no celular, em trilhas de 3+ itens, a página atual sai (com o separador): o H1 a repete logo abaixo */
@media (max-width: 540px) { .migalhas li:last-child:nth-child(n+3) { display: none; } }

/* ------------------------- DIRETÓRIO (lista de lugares) ------------------------- */
/* Lugares de um grupo do diretório (ex: as capitais em /terapia-online/brasil/). Vem do
   shortcode [abcsites_diretorio_itens] do plugin abcsites-diretorio, em geral dentro de
   .conteudo: os seletores com "ul"/"li + li" vencem os da lista de texto longo. */
ul.diretorio-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .75rem; margin-block: 1.5rem; padding: 0; list-style: none; }
.diretorio-lista li, .diretorio-lista li + li { margin: 0; }
.diretorio-lista li::marker { content: none; }
.diretorio-lista a { display: flex; align-items: center; min-height: 44px; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-ink); font-weight: 600; text-decoration: none; }
.diretorio-lista a:hover { border-color: var(--color-primary); color: var(--color-primary-hover); }
.diretorio-lista a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* arquivo do diretório: grade de grupos (.diretorio-grupos, cartões .post-card) e, abaixo, o texto do
   cliente (pattern diretorio-conteudo, envolvido em .diretorio-conteudo.conteudo) */
.diretorio-grupos { margin-block: 1.5rem 0; padding: 0; list-style: none; }
.diretorio-conteudo { margin-top: 1rem; }
/* "Veja também" dos itens do diretório (shortcode [abcsites_relacionados] do plugin ABC Sites Diretório) */
.relacionados { margin-block: 2.5rem; }
.relacionados .diretorio-lista { margin-block: 1rem 0; }

/* ------------------------- POSTS (lista de cards) -------------------------- */
/* Cards de post (ex: "Artigos e dicas" na Home). O card inteiro é clicável pelo link
   do título, que se estende sobre o card (::after): um só link por post para teclado e
   leitor de tela. No WordPress a lista vem do pattern dinâmico webpsi-abcsites/posts-recentes. */
.post-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; }
.post-card__img, .post-card__img img { display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__corpo { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.25rem 1.5rem 1.5rem; }
.post-card .eyebrow { margin-bottom: 0; font-size: .7rem; }
.post-card .eyebrow a { position: relative; z-index: 1; }  /* categoria continua clicável sobre o link do card */
.post-card__titulo { font-size: 1.15rem; line-height: 1.3; }
.post-card__titulo a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-card__titulo a { text-decoration: underline; }
.post-card__titulo a:focus-visible { outline: none; }
.post-card:has(.post-card__titulo a:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.post-card__resumo:where(p), .post-card__resumo > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--color-text-muted); font-size: .95rem; }
.post-card .meta { margin-top: auto; padding-top: .25rem; }
/* Carrossel no celular (.grid--carrossel): a grade vira uma faixa com rolagem horizontal nativa,
   com encaixe, sem JS e sem troca automática. O próximo card aparece pela metade, para sinalizar
   que há mais. No desktop continua grade. */
@media (max-width: 780px) {
  .grid.grid--carrossel, .avaliacoes__lista { display: flex; max-width: none; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem)); padding: .25rem clamp(1.25rem, 4vw, 2.5rem) 1rem;
    scroll-padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
  .grid.grid--carrossel > *, .avaliacoes__lista > * { flex: 0 0 82%; scroll-snap-align: start; }
  .avaliacoes__lista { columns: auto; align-items: flex-start; }
  .avaliacoes__lista > .avaliacao { margin-bottom: 0; }
  .avaliacao__mais { display: block; margin-top: -.5rem; }
  .avaliacao:has(.avaliacao__mais[open]) blockquote p { animation: aparece var(--dur-base) var(--ease-entra); }
  .avaliacao:has(.avaliacao__mais:not([open])) blockquote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }
}

/* -------------------------------- PAGINAÇÃO --------------------------------- */
/* Lista de páginas de um arquivo (ex: Blog). Funciona com o markup do bloco de paginação
   do WordPress, cujo wrapper interno dos números vira transparente (display: contents). */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2.5rem; }
.paginacao > div { display: contents; }
.paginacao a, .paginacao [aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-weight: 600; color: var(--color-ink); }
.paginacao a:hover { border-color: var(--color-primary); color: var(--color-primary-hover); }
.paginacao [aria-current] { border-color: transparent; background: var(--color-primary); color: var(--color-primary-ink); }

/* ------------------------------ ARTIGO (post) ------------------------------ */
/* Leitura longa, a partir da referência akitaonrails.com: uma coluna de texto de
   ~70 caracteres e um sumário fixo à direita, que no celular vira uma caixa antes
   do texto. A coluna começa na mesma margem esquerda das outras seções (kit-layout).
   O sumário e o tempo de leitura são montados por kit/artigo.js. */
.artigo { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--space-section); }
.artigo__topo { max-width: 680px; }
.artigo__topo h1 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.12; }
.artigo__topo .meta { margin-top: 1.25rem; }
.artigo__topo .artigo__resumo { margin-top: 1.75rem; }
.artigo__grade { display: grid; grid-template-columns: minmax(0, 680px) minmax(200px, 250px); justify-content: space-between; align-items: start; gap: 3rem; margin-top: clamp(2rem, 5vw, 3rem); }
.artigo__principal { grid-column: 1; grid-row: 1; min-width: 0; }
.artigo__sumario { grid-column: 2; grid-row: 1; position: sticky; top: 6.5rem; max-height: calc(100vh - 8rem); overflow-y: auto; font-size: .9rem; }
.artigo__sumario-titulo { margin-bottom: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink); }
.artigo__sumario ol { list-style: none; margin: 0; padding: 0; }
.artigo__sumario ol a { display: flex; align-items: center; min-height: 44px; padding: .35rem 0 .35rem .9rem; border-left: 2px solid var(--color-border); line-height: 1.35; color: var(--color-text-muted); }
.artigo__sumario ol a:hover { color: var(--color-ink); }
.artigo__sumario ol a[aria-current] { border-left-color: var(--color-primary); color: var(--color-primary-hover); font-weight: 600; }
.artigo__voltar { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-top: .75rem; color: var(--color-text-muted); font-size: .85rem; }
.artigo__voltar:hover { color: var(--color-ink); }
.artigo__corpo { font-size: 1.125rem; line-height: 1.75; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.artigo__corpo :where(h2, h3) { scroll-margin-top: 6.5rem; hyphens: manual; -webkit-hyphens: manual; }
.artigo__corpo > h2 { margin-top: 2.5em; padding-bottom: .5rem; border-bottom: 1px solid var(--color-border); }
/* "#" ao lado do subtítulo, para copiar o link da seção (aparece no hover e no foco) */
.artigo__corpo .artigo__ancora { margin-left: .35em; color: var(--color-primary); text-decoration: none; font-weight: 400; opacity: 0; }
.artigo__corpo h2:hover .artigo__ancora, .artigo__corpo .artigo__ancora:focus-visible { opacity: 1; }
/* "Em resumo": síntese escrita pela autora (no WordPress, o resumo/excerpt manual do post) */
.artigo__resumo { padding: 1.25rem 1.5rem; border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.artigo__resumo-titulo { margin-bottom: .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary-hover); }
.artigo__corpo figure { margin-inline: 0; }
/* "Anúncio da casa": chamada do próprio profissional no meio do post (no lugar de anúncios de
   terceiros). No WordPress, inserida pelo tema antes do 3º subtítulo (pattern chamada-artigo). */
.chamada { margin-block: 2.25rem; padding: 1.5rem 1.5rem 1.25rem; border-radius: var(--card-radius); background: var(--color-bg-dark); color: var(--color-text-on-dark); hyphens: manual; -webkit-hyphens: manual; }
.chamada .chamada__titulo { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.3; color: var(--color-text-on-dark); }
.chamada p { color: var(--color-text-on-dark-muted); font-size: 1rem; }
.chamada > * + * { margin-top: .6rem; }
.chamada .btn-row { margin-top: 1.1rem; }
.chamada .btn, .chamada .btn:hover { text-decoration: none; color: var(--color-primary-ink); }
.artigo__rodape { display: grid; gap: 1.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.artigo__nota { font-size: .9rem; color: var(--color-text-muted); }
.artigo__tags { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.artigo__tags a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; font-weight: 600; color: var(--color-primary-hover); }
.artigo__tags a::before { content: "#"; }
.artigo__tags a:hover { text-decoration: underline; }
.autor { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.autor img { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: top; }
.autor__nome { font-family: var(--font-heading); font-weight: 600; color: var(--color-ink); }
.autor p { font-size: .9rem; color: var(--color-text-muted); }
.autor a { color: var(--color-primary-hover); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.artigo__proximo { display: block; max-width: 680px; }
.artigo__proximo:hover .card__titulo { text-decoration: underline; }
@media (max-width: 1023px) {
  .artigo__grade { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .artigo__principal, .artigo__sumario { grid-column: 1; grid-row: auto; }
  .artigo__voltar { display: none; }  /* no celular o sumário já está no topo */
  .artigo__sumario { position: static; max-height: none; padding: 1.25rem 1.25rem .75rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
}

/* ---------------------------------- FAQ ------------------------------------- */
.faq-item { border-bottom: 1px solid var(--color-border); padding-block: 1.1rem; }
.faq-item summary { min-height: 44px; cursor: pointer; font-weight: 700; font-family: var(--font-heading); font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
/* ícone fora do nome da pergunta: "/ \"\"" = texto alternativo vazio (a 1ª declaração é reserva) */
.faq-item summary::after { font-family: "Phosphor-Bold"; content: "\e3d4"; content: "\e3d4" / ""; font-size: 1.1rem; color: var(--color-accent); flex-shrink: 0; }
.faq-item[open] summary::after { content: "\e32a"; content: "\e32a" / ""; animation: faq-icone var(--dur-base) var(--ease-entra); }
/* o − nasce em pé (como o traço do +) e deita: lê como "o + virou −" */
@keyframes faq-icone { from { transform: rotate(calc(-90deg * var(--mov))); } }
.faq-item[open] > :not(summary) { animation: aparece var(--dur-base) var(--ease-entra); }
/* entrada curta, usada por FAQ, "Outra coisa", erros e "Ler mais" */
@keyframes aparece { from { opacity: 0; transform: translateY(calc(-4px * var(--mov))); } }
.faq-item p { margin-top: .75rem; color: var(--color-text-muted); max-width: 65ch; }

/* -------------------------------- FORMULÁRIO --------------------------------- */
.form-grid { display: grid; gap: 1.25rem; }
.form-row { display: grid; gap: .4rem; }
.form-row--half { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 620px) { .form-row--half { grid-template-columns: 1fr; } }
.form-row label { font-size: .85rem; font-weight: 600; color: var(--color-ink); }
.section--dark .form-row label { color: var(--color-text-on-dark); }
.form-row input:not([type="checkbox"]):not([type="radio"]), .form-row select, .form-row textarea {
  font: inherit; padding: .8rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text); width: 100%;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.form-row textarea { resize: vertical; min-height: 100px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .75rem; }
@media (max-width: 540px) { .checkbox-grid { grid-template-columns: 1fr; } }
.checkbox-grid label { display: flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 400; color: var(--color-text); }
.checkbox-grid input { flex-shrink: 0; width: auto; }
.section--dark .checkbox-grid label { color: var(--color-text-on-dark-muted); }
/* Marcação esperada: <input> + UM elemento (ex: <span>) com todo o resto do
   texto/links dentro. Texto solto direto no <label> (fora de um elemento)
   vira um flex item anônimo por trecho — com um link no meio do texto isso
   gera 3+ itens espremidos numa linha só em vez de um parágrafo fluindo. */
.form-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; color: var(--color-text-muted); }
.form-check input { flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
.form-check { cursor: pointer; }
.section--dark .form-check { color: var(--color-text-on-dark-muted); }
.form-note { font-size: .78rem; color: var(--color-text-muted); }
.section--dark .form-note { color: var(--color-text-on-dark-muted); }

/* -------------------------------- WHATSAPP FLOAT ----------------------------- */
.whatsapp-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
  width: 58px; height: 58px; border-radius: 50%; background: var(--color-cta); color: var(--color-cta-ink);
  /* anel na cor do fundo: sem ele o botão some sobre .section--brand (mesma cor) */
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--color-bg), var(--shadow-soft);
  transition: transform var(--dur-rapido) var(--ease-entra);
}
.whatsapp-float:hover { transform: scale(calc(1 + .06 * var(--mov))); }
.whatsapp-float:active { transform: scale(calc(1 - .04 * var(--mov))); }
.whatsapp-float i { font-size: 1.625rem; line-height: 1; }

/* --------------------------------- FOOTER ------------------------------------- */
.footer { background: var(--color-bg-dark); color: var(--color-text-on-dark-muted); padding-block: 3.5rem 2.5rem; font-size: .9rem; border-top: 1px solid var(--color-border-on-dark); }
.footer a:hover { color: var(--color-text-on-dark); }
.footer__top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.footer__brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-text-on-dark); }
.footer__brand svg { height: 30px; width: auto; }
.footer__cols { display: flex; gap: 3.5rem; flex-wrap: wrap; }
.footer__col h2, .footer__col h4 { font-family: var(--font-body); font-weight: 700; color: var(--color-text-on-dark); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .9rem; }
.footer__col a { display: flex; align-items: center; gap: .45rem; min-height: 44px; } /* área de toque de 44px (iOS/Android) */
.footer__col span { display: block; margin-bottom: .55rem; }
.footer__bottom { border-top: 1px solid var(--color-border-on-dark); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; font-size: .78rem; }
.footer__credit { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: inherit; opacity: .75; }
.footer__credit img { height: 14px; width: auto; }
.footer__credit:hover { opacity: 1; }
/* Reabre as preferências do plugin abcsites-consentimento (href="#preferencias-cookies") */
.footer__cookies { display: inline-flex; align-items: center; min-height: 44px; color: inherit; opacity: .75; }
.footer__cookies:hover { opacity: 1; }

/* ---------------------------------- QUIZ -------------------------------------- */
/* Funil de agendamento em telas (uma visível por vez), página de tela cheia sem
   nav/footer. Comportamento em kit/quiz.js; contrato de marcação documentado no
   topo daquele arquivo. Botões e campos reaproveitam .btn, .form-row e .form-check. */
.quiz { overflow-x: clip; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-bg); }
.quiz__topo { display: flex; align-items: center; justify-content: center; padding: 1rem clamp(1.25rem, 4vw, 2.5rem); border-bottom: 1px solid var(--color-border); color: var(--color-ink); }
.quiz__topo svg { height: 36px; width: auto; }
.quiz__progresso { height: 6px; background: var(--color-border); }
/* a barra cresce por scaleX (sem recalcular layout); o fator vem do quiz.js */
.quiz__progresso i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--color-primary); transition: transform var(--dur-lento) var(--ease-entra); }
.quiz__corpo { flex: 1; display: flex; justify-content: center; padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem); }
.quiz__tela { display: none; width: 100%; max-width: 560px; }
.quiz__tela.is-ativa { display: block; }
/* avançar entra pela direita, voltar pela esquerda (.is-voltando vem do quiz.js); sem animação de saída */
.quiz__tela.is-ativa { animation: quiz-entra var(--dur-base) var(--ease-entra); }
.quiz.is-voltando .quiz__tela.is-ativa { animation-name: quiz-volta; }
@keyframes quiz-entra { from { opacity: 0; transform: translateX(calc(12px * var(--mov))); } }
@keyframes quiz-volta { from { opacity: 0; transform: translateX(calc(-12px * var(--mov))); } }
/* confirmação: ícone que "salta" ao entrar em Pronto! */
.quiz__ok { display: block; font-size: 3rem; line-height: 1; color: var(--color-primary); margin-bottom: 1rem; }
.quiz__tela.is-ativa .quiz__ok { animation: quiz-ok var(--dur-lento) var(--ease-mola) both; }
@keyframes quiz-ok { from { opacity: 0; transform: scale(calc(1 - .3 * var(--mov))); } }
.quiz__tela--abertura { max-width: var(--container); }
.quiz__tela--abertura.is-ativa { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Foto + CTA cabem na primeira vista: altura limitada ao viewport (menos topo e respiros). */
.quiz__foto { display: flex; justify-content: center; }
.quiz__foto img { width: auto; max-width: 100%; max-height: calc(100vh - 12rem); aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.quiz__assinatura { display: flex; align-items: center; gap: .75rem; font-size: .85rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 1rem; }
/* Avatar: versão compacta da foto, só no celular (marcação: <img class="quiz__avatar"> dentro de .quiz__assinatura). */
.quiz__avatar { display: none; width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
@media (max-width: 860px) {
  /* no celular, a foto grande vira avatar para o botão Começar caber na primeira vista */
  .quiz__tela--abertura.is-ativa { grid-template-columns: 1fr; }
  .quiz__foto { display: none; }
  .quiz__avatar { display: block; }
}
.quiz__tela:not(.quiz__tela--abertura) h1 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.quiz__subtitulo { font-size: 1.2rem; margin-top: 1.75rem; }
.quiz__ajuda { font-size: .85rem; color: var(--color-text-muted); }
.quiz__voltar { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; background: none; border: 0; padding: 0 .5rem 0 0; margin-bottom: .5rem; color: var(--color-text-muted); font-weight: 600; font-size: .9rem; cursor: pointer; }
.quiz__voltar:hover { color: var(--color-primary); }
.quiz__passo { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: .6rem; }
.quiz__apoio { color: var(--color-text-muted); margin-top: .6rem; }
.quiz__opcoes { display: grid; gap: .7rem; margin-top: 1.75rem; }
.quiz__opcao {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 1rem 1.25rem; text-align: left; font-weight: 600; color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color var(--transition), background var(--transition), transform var(--dur-rapido) var(--ease-entra);
}
.quiz__opcao:hover { border-color: var(--color-primary); }
.quiz__opcao:active { transform: scale(calc(1 - .02 * var(--mov))); }
.quiz__opcao:focus-visible, .quiz__voltar:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.quiz__opcao.is-selecionada { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg)); animation: quiz-pulso var(--dur-base) var(--ease-entra); }
/* confirma a escolha antes do avanço automático (220ms) */
@keyframes quiz-pulso { 50% { transform: scale(calc(1 + .02 * var(--mov))); } }
.quiz__opcao b { color: var(--color-ink); white-space: nowrap; }
.quiz__opcoes--grade { grid-template-columns: 1fr 1fr; }
.quiz__opcao--larga { grid-column: 1 / -1; }
@media (max-width: 340px) { .quiz__opcoes--grade { grid-template-columns: 1fr; } }
.quiz__opcao--saida { border-style: dashed; font-weight: 500; color: var(--color-text-muted); }
.quiz__extra { display: none; gap: .75rem; margin-top: 1rem; }
.quiz__extra.is-aberto { display: grid; animation: aparece var(--dur-base) var(--ease-entra); }
.quiz__lista { counter-reset: quiz-passo; display: grid; gap: 1rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; }
.quiz__lista li { counter-increment: quiz-passo; display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: start; color: var(--color-text); }
.quiz__lista li::before {
  content: counter(quiz-passo); display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: var(--radius-pill); font-weight: 700; font-size: .9rem; color: var(--color-primary-ink); background: var(--color-primary);
}
.quiz__nota { font-size: .85rem; color: var(--color-text-muted); margin-top: .75rem; }
.quiz__erro-campo { font-size: .85rem; font-weight: 600; color: var(--color-primary-hover); animation: aparece var(--dur-base) var(--ease-entra); }
.form-check + .quiz__erro-campo { margin-top: -.5rem; }
.quiz .form-row input[aria-invalid="true"], .quiz .form-check input[aria-invalid="true"] { border-color: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: 1px; }
/* Campo-armadilha anti-robô: fora da tela para pessoas, preenchido por bots. */
.quiz__armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------- ROLAGEM ---------------------------------- */
/* Animações ligadas à rolagem, só em CSS (animation-timeline). Sem suporte (ex: Firefox),
   nada anima e nada fica escondido. Movimento reduzido: desligadas (a sombra do cabeçalho e a
   barra de leitura ficam, porque indicam estado). Hero fora, para não atrasar o LCP. */
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    /* entra subindo com fade; ao sair pelo topo fica levemente transparente (nunca some) */
    :where(.section .section-head, .section .two-col > *, .grid > *, .trust-grid > *, .timeline > *, .selos, .avaliacoes__lista > *, .faq-item, .diretorio-lista > *) {
      animation: revela linear both; animation-timeline: view();
    }
    /* cascata: 2º e 3º item de cada linha entram depois do 1º */
    @media (min-width: 541px) {
      :where(.grid, .trust-grid, .timeline) > :nth-child(3n+2) { animation-name: revela-2; }
      :where(.grid, .trust-grid, .timeline) > :nth-child(3n) { animation-name: revela-3; }
    }
    /* carrossel: dentro da faixa o view() seguiria a rolagem lateral; anima a faixa inteira */
    @media (max-width: 780px) {
      .grid--carrossel > *, .avaliacoes__lista > * { animation: none; }
      .grid--carrossel, .avaliacoes__lista { animation: revela linear both; animation-timeline: view(); }
    }
    /* parallax leve, recortado pela própria moldura */
    :where(.section .two-col__media .photo-placeholder img, .conteudo .wp-block-image:not(:has(figcaption)) img) {
      scale: 1.08; animation: parallax linear both; animation-timeline: view();
    }
    /* overflow: clip (não hidden): hidden vira contêiner rolável e o view() passaria a seguir a moldura */
    .section .two-col__media .photo-placeholder, .conteudo .wp-block-image:not(:has(figcaption)) { overflow: clip; }
    .nav__brand { transform-origin: left center; animation: nav-marca linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  }
  @media screen {
    .nav { animation: nav-sombra linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    /* barra de leitura: enche do começo ao fim do texto do artigo */
    .artigo__corpo { view-timeline: --leitura block; }
    .artigo__corpo::before {
      content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px;
      background: var(--color-primary); transform-origin: left; transform: scaleX(0);
      animation: leitura linear both; animation-timeline: --leitura; animation-range: contain;
    }
  }
}
@keyframes revela {
  entry 0% { opacity: 0; transform: translateY(24px); }
  entry 100% { opacity: 1; transform: none; }
  exit 0% { opacity: 1; transform: none; }
  exit 100% { opacity: .6; transform: translateY(-8px); }
}
@keyframes revela-2 {
  entry 0%, entry 20% { opacity: 0; transform: translateY(24px); }
  entry 100% { opacity: 1; transform: none; }
  exit 0% { opacity: 1; transform: none; }
  exit 100% { opacity: .6; transform: translateY(-8px); }
}
@keyframes revela-3 {
  entry 0%, entry 40% { opacity: 0; transform: translateY(24px); }
  entry 100% { opacity: 1; transform: none; }
  exit 0% { opacity: 1; transform: none; }
  exit 100% { opacity: .6; transform: translateY(-8px); }
}
@keyframes parallax { from { transform: translateY(-3%); } to { transform: translateY(3%); } }
@keyframes nav-marca { to { transform: scale(.9); } }
@keyframes nav-sombra { to { box-shadow: var(--shadow-card); } }
@keyframes leitura { to { transform: scaleX(1); } }

/* ------------------------------- KIT DEMO BAR --------------------------------- */
/* Faixa só para este protótipo, mostrando qual tema está ativo — não faz parte
   do site final entregue ao cliente. */
.kit-demo-bar {
  background: #111; color: #fff; font-size: .78rem; text-align: center; padding: .5rem 1rem;
}
.kit-demo-bar a { color: #FFD6CF; text-decoration: underline; margin: 0 .35rem; }

/* -------------------------------- IMPRESSÃO --------------------------------- */
/* Quem imprime quer o texto (ex: um artigo para levar à consulta): sai a navegação,
   as chamadas e o que só funciona na tela. */
@media print {
  .skip-link, .nav, .marquee, .whatsapp-float, .footer, .section--cta, .btn-row, .migalhas,
  .artigo__sumario, .artigo__ancora, .artigo__seguir, .chamada { display: none !important; }
  body, .section--alt { background: none; }
  .artigo { padding-block: 0; }
  .artigo__grade { display: block; }
  .conteudo { font-size: 11pt; }
  .conteudo a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; overflow-wrap: anywhere; }
  .conteudo :where(h2, h3) { break-after: avoid; }
  .conteudo :where(img, figure, li) { break-inside: avoid; }
  .conteudo p { orphans: 3; widows: 3; }
}