/* ==========================================================================
   Marinalva Figueredo — terapeuta em TRG
   Direção visual: Ametista, recolorida para a família azul-marinho
   Tokens e medidas conforme o handoff de design (README.md).
   As medidas fluidas usam vw (o protótipo usava cqw / container queries).
   ========================================================================== */

:root{
  /* Cores ---------------------------------------------------------------- */
  --page:#F8F3EF;
  --band:#F0E7E3;
  --card:#FCF8F5;
  --white:#FFFFFF;
  --ink:#2A3348;
  --ink-deep:#16203A;
  --primary:#22304E;
  --mid:#3A4E76;
  --accent:#E6C4A8;
  --accent-hover:#F0D6C0;
  --muted-1:#4E5772;
  --muted-2:#414A63;
  --muted-3:#626C86;
  --aura-1:#93A4C4;
  --aura-2:#C09A72;
  --link:#22304E;
  --link-hover:#A2743F;
  --icon-well:#E4E8F0;
  --chev-well:#EAEEF4;
  --chev-well-open:#D6DDE9;
  --ok-well:#E3E8F1;
  --quote-light:#C4CDDE;
  --on-dark-body:#C3CBDC;
  --on-dark-faint:#8F98AD;
  --on-dark-title:#F4F6FA;
  --on-dark-title-2:#F7F9FC;
  --on-dark-body-2:#E4E9F2;
  --on-dark-body-3:#F6EEE7;
  --on-dark-bg:#EBEFF6;
  --img-placeholder:#DFE4EE;

  /* Tipografia ----------------------------------------------------------- */
  --fonte-display:"Bricolage Grotesque",system-ui,sans-serif;
  --fonte-texto:"Karla",system-ui,sans-serif;

  /* Escala reduzida (~15% nos títulos). O corpo fica em 18px, o piso que o
     handoff definiu para este público — no limite, não abaixo dele. */
  --t-h1:clamp(31px,4.4vw,58px);
  --t-secao:clamp(24px,3.3vw,43px);
  --t-declaracao:clamp(27px,3.9vw,52px);
  --t-fechamento:clamp(29px,4.4vw,60px);
  --t-lead:clamp(18px,1.5vw,19px);
  --t-corpo:18px;
  --t-cartao:clamp(18px,1.6vw,19px);
  --t-passo:clamp(18px,1.7vw,20px);
  --t-depoimento:clamp(18px,1.8vw,22px);
  --t-destaque:clamp(19px,2vw,24px);
  --t-assinatura:clamp(30px,3.4vw,48px);

  /* Espaçamento ---------------------------------------------------------- */
  --pad-secao-y:clamp(72px,9vw,140px);
  --pad-secao-x:clamp(20px,5vw,72px);
  --largura-max:1160px;
  --gap-colunas:clamp(32px,4.5vw,80px);
  --gap-grade:clamp(14px,1.8vw,22px);
  --pad-cartao:clamp(28px,3.2vw,40px);

  /* Sombras -------------------------------------------------------------- */
  --s-botao:0 16px 34px -16px rgba(34,48,78,0.8);
  --s-botao-hover:0 24px 44px -18px rgba(34,48,78,0.8);
  --s-botao-champanhe:0 20px 40px -20px rgba(230,196,168,0.85);
  --s-foto-topo:0 46px 80px -46px rgba(22,32,58,0.62);
  --s-foto-criancas:0 40px 70px -40px rgba(0,0,0,0.75);
  --s-foto-quemsou:0 40px 70px -42px rgba(22,32,58,0.65);
  --s-selo:0 12px 26px -14px rgba(22,32,58,0.5);
  --s-passo:0 20px 42px -30px rgba(22,32,58,0.5);
  --s-passo-hover:0 32px 56px -30px rgba(22,32,58,0.55);
  --s-cartao-hover:0 28px 50px -30px rgba(22,32,58,0.5);

  /* Curvas --------------------------------------------------------------- */
  --ease:cubic-bezier(.16,.84,.34,1);
}

/* Base --------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--fonte-texto);
  font-size:18px;
  line-height:1.62;
  text-wrap:pretty;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--link-hover);outline-offset:3px;border-radius:4px}

/* Negrito de destaque: além do peso, sobe o contraste. Sozinho, o peso quase
   não aparece em texto de 18px. */
strong{font-weight:700}
.cartao-sintoma strong,.cartao-passo strong,.onde__texto strong,
.quemsou__corpo strong,.faq__painel strong,.sintomas__apoio strong,
.sintomas__fecho strong{color:var(--ink-deep)}
.fluxo__item strong{color:var(--on-dark-title-2)}
.criancas__corpo strong,.fechamento__apoio strong{color:var(--on-dark-title)}

.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Layout ------------------------------------------------------------------- */
.secao{padding:var(--pad-secao-y) var(--pad-secao-x)}
.secao--clara{background:var(--page)}
.secao--faixa{background:var(--band)}
.container{max-width:var(--largura-max);margin:0 auto}
.container--estreito{max-width:900px}
.container--faq{max-width:860px}

/* Tipografia --------------------------------------------------------------- */
/* balance reparte os caracteres entre as linhas quando o texto quebra; onde
   cabe em uma linha só, ele não interfere. */
.display,.sintomas__apoio,.sintomas__fecho,.fechamento__apoio,
.cartao-sintoma p,.fluxo__item p,.cartao-passo p{text-wrap:balance}
.display{font-family:var(--fonte-display);font-weight:400;margin:0}
.titulo-secao{font-size:var(--t-secao);line-height:1.1;letter-spacing:-0.022em;color:var(--ink-deep)}
.titulo-secao--centro{max-width:14em;margin-inline:auto;text-align:center}
.titulo-secao--centro-curto{max-width:12em;margin-inline:auto;text-align:center}
.titulo-secao--centro-largo{margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 20px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
}

/* Auras -------------------------------------------------------------------- */
@keyframes eBreath{0%{transform:scale(.82);opacity:.55}40%{transform:scale(1.06);opacity:.9}100%{transform:scale(.82);opacity:.55}}
@keyframes eBreathSlow{0%{transform:scale(.9);opacity:.35}45%{transform:scale(1.12);opacity:.6}100%{transform:scale(.9);opacity:.35}}
@keyframes eFloat{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

.aura{position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none}

/* Botões ------------------------------------------------------------------- */
.botao{
  display:inline-flex;align-items:center;gap:12px;
  min-height:64px;padding:0 32px;border-radius:999px;
  text-decoration:none;font-size:18px;font-weight:700;line-height:1.2;
  transition:transform .25s var(--ease),background-color .25s,box-shadow .25s;
}
.botao:active{transform:translateY(0)}

.botao--primario{background:var(--primary);color:var(--page);box-shadow:var(--s-botao)}
.botao--primario:hover{background:var(--ink-deep);color:var(--page);transform:translateY(-3px);box-shadow:var(--s-botao-hover)}

.botao--champanhe{background:var(--accent);color:var(--ink-deep);box-shadow:var(--s-botao-champanhe)}
.botao--champanhe:hover{background:var(--accent-hover);color:var(--ink-deep);transform:translateY(-3px)}

.botao--grande{min-height:68px;padding:0 36px;font-size:19px}
.botao-centro{display:flex;justify-content:center;margin-top:clamp(36px,4.4vw,54px)}
.botao-centro--apos-texto{margin-top:clamp(22px,2.4vw,30px)}

/* Poços de ícone ----------------------------------------------------------- */
.poco{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex:0 0 auto}
.poco--56{width:56px;height:56px;background:var(--icon-well)}
.poco--58{width:58px;height:58px;background:var(--primary)}
.poco--40{width:40px;height:40px;background:var(--icon-well)}
.poco--40-mid{width:40px;height:40px;background:var(--mid)}

/* Os SVGs usam stroke="currentColor"; a cor vem daqui, dos tokens. Assim uma
   troca de paleta não deixa ícone para trás. */
.selo svg{color:var(--link-hover)}
.poco--56 svg,.poco--40 svg,.faq__chevron svg{color:var(--mid)}
.poco--58 svg,.poco--40-mid svg{color:var(--page)}
.criancas__eyebrow svg{color:var(--accent)}
.marca__simbolo .anel-externo{stroke:var(--aura-1)}
.marca__simbolo .anel-interno{stroke:var(--link-hover)}
.marca__simbolo .centro{fill:var(--primary)}
.depoimento__aspas{fill:var(--quote-light)}
.depoimento--escuro .depoimento__aspas{fill:var(--accent)}

/* ==========================================================================
   1. Topo
   ========================================================================== */
.topo{
  position:relative;background:var(--page);overflow:hidden;
  padding:clamp(24px,3vw,40px) var(--pad-secao-x) clamp(60px,8vw,120px);
}
.topo__aura-malva{
  top:clamp(-140px,-10vw,-60px);left:50%;
  width:min(78vw,900px);margin-left:min(-39vw,-450px);
  background:radial-gradient(circle,rgba(147,164,196,0.30),rgba(147,164,196,0) 66%);
  animation:eBreathSlow 11s ease-in-out infinite;
}
.topo__aura-dourada{
  top:clamp(-40px,-2vw,-10px);right:clamp(-90px,-6vw,-40px);
  width:min(52vw,620px);
  background:radial-gradient(circle,rgba(192,154,114,0.20),rgba(192,154,114,0) 62%);
  animation:eBreath 9s ease-in-out infinite;
}
.topo__interno{position:relative;max-width:var(--largura-max);margin:0 auto}

.marca{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding-bottom:clamp(52px,8vw,110px);
}
.marca__nome{
  display:flex;align-items:center;gap:12px;
  font-size:15px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--primary);
}
.marca__qualificacao{
  font-size:14px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted-3);
}

.topo__grade{display:flex;flex-wrap:wrap;gap:clamp(30px,4.4vw,72px);align-items:center}
/* Base de 500px, não 400: assim o topo empilha por volta de 1100px de tela.
   Com 400 havia uma faixa (~970–1010px) em que a foto continuava ao lado e
   espremia a coluna, quebrando em duas linhas a frase abaixo da assinatura. */
.topo__texto{flex:1 1 500px;min-width:0}
.topo__h1{font-size:var(--t-h1);line-height:1.05;letter-spacing:-0.028em;color:var(--ink-deep)}
.topo__assinatura{
  margin:clamp(18px,2.2vw,28px) 0 0;
  font-family:"Parisienne",cursive;font-weight:400;
  font-size:var(--t-assinatura);line-height:1.15;letter-spacing:0;
  color:var(--link-hover);
}
/* max-width solto de propósito: a linha cabe inteira no desktop e só quebra
   quando a coluna estreita, no celular. */
.topo__lead{
  margin:clamp(12px,1.4vw,18px) 0 0;max-width:none;
  font-size:var(--t-lead);line-height:1.6;color:var(--muted-1);
}
.topo__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.2vw,40px)}

.selos{
  display:flex;flex-wrap:wrap;gap:clamp(8px,1.2vw,14px);
  margin:clamp(26px,3.2vw,40px) 0 0;padding:0;list-style:none;
}
.selo{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:999px;background:var(--white);
  box-shadow:var(--s-selo);
  font-size:15px;font-weight:600;color:var(--primary);white-space:nowrap;
}

.topo__foto{flex:0 1 400px;min-width:250px;position:relative}
.topo__anel{
  position:absolute;inset:clamp(-16px,-1.4vw,-10px);
  border-radius:999px 999px 44px 44px;
  border:1px solid rgba(230,196,168,0.9);
  animation:eFloat 8s ease-in-out infinite;pointer-events:none;
}
.topo__moldura{
  border-radius:999px 999px 28px 28px;overflow:hidden;
  background:var(--img-placeholder);box-shadow:var(--s-foto-topo);
}
.topo__moldura img{width:100%;height:auto;aspect-ratio:4/4.9;object-fit:cover;object-position:50% 14%}

/* ==========================================================================
   2. Você passa por isso?
   ========================================================================== */
.sintomas{padding-bottom:clamp(64px,9vw,132px)}
.titulo-bloco{margin-bottom:clamp(38px,4.6vw,62px)}
/* Quando vem uma linha de apoio logo abaixo, quem carrega o respiro é ela. */
.titulo-bloco--com-apoio{margin-bottom:clamp(14px,1.6vw,20px)}
.sintomas__apoio{
  max-width:34em;margin:0 auto clamp(36px,4.4vw,58px);text-align:center;
  font-size:var(--t-lead);line-height:1.6;color:var(--muted-1);
}
.sintomas__fecho{
  max-width:46em;margin:clamp(32px,3.8vw,46px) auto 0;text-align:center;
  font-size:var(--t-cartao);line-height:1.5;color:var(--ink);
}
/* 380px de mínimo dá 2 colunas no desktop (2x2), não 4 em fila. Com os textos
   novos, quatro colunas de ~270px viravam torres de 7 linhas cada.
   O min(380px,100%) é obrigatório: sem ele a faixa não encolhe abaixo de
   380px e o cartão vaza para fora da tela no celular. */
.grade-sintomas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:var(--gap-grade);
  padding:0;margin:0;list-style:none;
}
.cartao-sintoma{
  background:var(--card);border-radius:26px;padding:var(--pad-cartao);
  transition:transform .28s var(--ease),box-shadow .28s;
}
.cartao-sintoma:hover{transform:translateY(-7px);box-shadow:var(--s-cartao-hover)}
.cartao-sintoma p{margin:clamp(20px,2.2vw,26px) 0 0;font-size:var(--t-cartao);line-height:1.45;color:var(--ink)}

/* ==========================================================================
   3. O que é TRG
   ========================================================================== */
.trg{position:relative;background:var(--mid);color:var(--on-dark-bg);overflow:hidden}
.trg__aura{
  right:-12%;top:-20%;width:min(56vw,660px);
  background:radial-gradient(circle,rgba(192,154,114,0.28),rgba(192,154,114,0) 68%);
  animation:eBreathSlow 13s ease-in-out infinite;
}
.trg__interno{position:relative;max-width:var(--largura-max);margin:0 auto;text-align:center}
.trg__eyebrow{border:1px solid rgba(242,234,240,0.28);color:var(--accent)}
.trg__declaracao{
  /* sem max-width: a frase cabe em uma linha só no desktop */
  margin:clamp(26px,3.2vw,42px) auto 0;
  font-size:var(--t-declaracao);line-height:1.06;letter-spacing:-0.026em;color:var(--on-dark-title-2);
}

/* Fluxo em quatro passos: a sequência precisa ser legível de relance, por
   isso número + seta. O quarto cartão é a virada e se distingue por fundo. */
.fluxo{
  --gap-fluxo:clamp(20px,2.4vw,34px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-fluxo);
  max-width:var(--largura-max);margin:clamp(34px,4vw,54px) auto 0;
  padding:0;list-style:none;text-align:left;
}
.fluxo__item{
  position:relative;border-radius:22px;
  padding:clamp(22px,2.4vw,30px);
  background:rgba(242,234,240,0.07);border:1px solid rgba(242,234,240,0.10);
}
.fluxo__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(230,196,168,0.5);
  font-size:16px;font-weight:700;color:var(--accent);
}
.fluxo__item p{
  margin:clamp(14px,1.6vw,18px) 0 0;
  font-size:var(--t-cartao);line-height:1.5;color:var(--on-dark-body-2);
}
.fluxo__item--virada{background:rgba(230,196,168,0.18);border-color:rgba(230,196,168,0.55)}
.fluxo__item--virada .fluxo__num{background:var(--accent);color:var(--ink-deep);border-color:transparent}
.fluxo__item--virada p{color:var(--on-dark-body-3)}

/* Seta no vão entre os cartões */
.fluxo__item + .fluxo__item::before{
  content:"";position:absolute;top:50%;left:calc(-1 * var(--gap-fluxo) / 2);
  width:9px;height:9px;
  border-top:2px solid rgba(230,196,168,0.6);
  border-right:2px solid rgba(230,196,168,0.6);
  transform:translate(-50%,-50%) rotate(45deg);
}
@media (max-width:1099px){
  .fluxo{grid-template-columns:repeat(2,1fr)}
  /* o 3º abre a segunda linha: seta à esquerda apontaria para o nada */
  .fluxo__item:nth-child(3)::before{display:none}
}
@media (max-width:679px){
  .fluxo{grid-template-columns:1fr}
  .fluxo__item:nth-child(3)::before{display:block}
  .fluxo__item + .fluxo__item::before{
    top:calc(-1 * var(--gap-fluxo) / 2);left:50%;
    transform:translate(-50%,-50%) rotate(135deg);
  }
}

/* ==========================================================================
   4. Como funciona
   ========================================================================== */
.grade-passos{
  --gap-passos:clamp(16px,2vw,26px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-passos);
  padding:0;margin:0;list-style:none;
}
/* Seta no vão entre os cartões, como na faixa TRG */
.cartao-passo + .cartao-passo::before{
  content:"";position:absolute;top:50%;left:calc(-1 * var(--gap-passos) / 2);
  width:12px;height:12px;
  /* mesmo dourado dos numerais: a seta e o número formam um sistema só */
  border-top:2.5px solid rgba(162,116,63,0.8);border-right:2.5px solid rgba(162,116,63,0.8);
  transform:translate(-50%,-50%) rotate(45deg);
}
@media (max-width:1023px){
  .grade-passos{grid-template-columns:1fr;--gap-passos:clamp(26px,3vw,34px)}
  .cartao-passo + .cartao-passo::before{
    top:calc(-1 * var(--gap-passos) / 2);left:50%;
    transform:translate(-50%,-50%) rotate(135deg);
  }
}
.cartao-passo{
  position:relative;background:var(--white);border-radius:28px;
  padding:clamp(30px,3.4vw,44px);box-shadow:var(--s-passo);
  transition:transform .28s var(--ease),box-shadow .28s;
}
.cartao-passo:hover{transform:translateY(-7px);box-shadow:var(--s-passo-hover)}
.cartao-passo__num{
  position:absolute;top:clamp(22px,2.4vw,30px);right:clamp(24px,2.8vw,34px);
  font-family:var(--fonte-display);font-size:clamp(42px,4.8vw,62px);font-weight:400;
  line-height:.8;color:var(--link-hover);
}
.cartao-passo p{margin:clamp(20px,2.4vw,28px) 0 0;font-size:var(--t-cartao);line-height:1.55;color:var(--muted-2)}

/* ==========================================================================
   5. Crianças
   ========================================================================== */
.criancas{background:var(--ink-deep);color:var(--on-dark-bg)}
.criancas__interno{
  max-width:var(--largura-max);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:var(--gap-colunas);align-items:center;
}
.criancas__foto{flex:0 1 360px;min-width:230px}
.criancas__foto img{
  width:100%;height:auto;aspect-ratio:4/4.5;object-fit:cover;object-position:50% 16%;
  border-radius:28px 28px 120px 120px;box-shadow:var(--s-foto-criancas);
}
.criancas__texto{flex:1 1 380px;min-width:0;max-width:30em}
.criancas__eyebrow{gap:11px;background:rgba(230,196,168,0.15);color:var(--accent)}
.criancas__declaracao{
  margin:clamp(24px,2.8vw,36px) 0 0;
  font-size:var(--t-secao);line-height:1.1;letter-spacing:-0.022em;color:var(--on-dark-title);
}
.criancas__corpo{margin:clamp(22px,2.6vw,32px) 0 0;font-size:var(--t-corpo);line-height:1.62;color:var(--on-dark-body)}
.criancas__botao{margin-top:clamp(28px,3.4vw,42px)}

/* ==========================================================================
   6. Onde atendo
   ========================================================================== */
.onde__grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--gap-grade);margin-top:clamp(34px,4vw,52px);
  /* start, não stretch: o bloco do online é curto e esticá-lo deixaria um
     vazio alto do lado do bloco das clínicas. */
  align-items:start;
}
.onde__bloco{
  background:var(--white);border-radius:26px;padding:var(--pad-cartao);
  box-shadow:var(--s-passo);
}
/* O que separa online de presencial é o ícone, não o texto: um poço azul e um
   champanhe, os dois destaques da marca. */
.poco--58-accent{width:58px;height:58px;background:var(--accent)}
.poco--58-accent svg{color:var(--ink-deep)}
.onde__titulo{
  margin:clamp(18px,2vw,24px) 0 0;
  font-size:var(--t-passo);font-weight:700;color:var(--ink-deep);
}
.onde__texto{margin:clamp(10px,1.2vw,14px) 0 0;font-size:var(--t-corpo);line-height:1.6;color:var(--muted-2)}
.clinicas{margin:clamp(18px,2vw,24px) 0 0;padding:0;list-style:none}
.clinica{margin-top:clamp(16px,1.8vw,20px);padding-top:clamp(16px,1.8vw,20px);border-top:1px solid rgba(34,48,78,0.10)}
.clinica:first-child{margin-top:0}
.clinica__nome{margin:0;font-weight:700;color:var(--ink-deep)}
.clinica__endereco{margin:2px 0 0;font-size:17px;line-height:1.55;color:var(--muted-2)}
/* Pílula, e não link solto: no celular precisa de alvo de toque de verdade. */
.clinica__tel{
  display:inline-flex;align-items:center;gap:9px;
  min-height:48px;margin-top:12px;padding:0 18px;border-radius:999px;
  background:var(--ok-well);color:var(--link);
  font-size:17px;font-weight:700;text-decoration:none;
  transition:background-color .25s;
}
.clinica__tel svg{color:var(--mid)}
.clinica__tel:hover{background:var(--chev-well-open);color:var(--link)}

/* ==========================================================================
   7. Antes de me chamar
   ========================================================================== */
.limites__titulo{margin-bottom:clamp(32px,4vw,52px)}
.limites__lista{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);padding:0;margin:0;list-style:none}
.limite{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--card);border-radius:22px;padding:clamp(24px,2.8vw,32px);
}
.limite--ok{background:var(--ok-well)}
.limite p{margin:0;font-size:var(--t-corpo);line-height:1.6;color:var(--muted-2)}
.limite strong{font-weight:700;color:var(--ink-deep)}

/* ==========================================================================
   8. Quem sou
   ========================================================================== */
.quemsou__interno{
  max-width:var(--largura-max);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:var(--gap-colunas);align-items:center;
}
.quemsou__texto{flex:1 1 380px;min-width:0;max-width:31em;order:2}
.quemsou__destaque{
  margin:clamp(22px,2.6vw,32px) 0 0;
  font-size:var(--t-destaque);line-height:1.32;font-weight:500;color:var(--primary);
}
.quemsou__corpo{margin:clamp(20px,2.4vw,28px) 0 0;font-size:var(--t-corpo);line-height:1.62;color:var(--muted-2)}
.quemsou__corpo + .quemsou__corpo{margin-top:clamp(14px,1.6vw,20px)}
/* A única fala dela em primeira pessoa no site: maior, mais pesada e com ar. */
.quemsou__fala{
  margin:clamp(28px,3.2vw,40px) 0 0;
  padding:clamp(4px,0.6vw,8px) 0 clamp(4px,0.6vw,8px) clamp(20px,2.2vw,28px);
  border-left:3px solid var(--accent);
  font-size:var(--t-destaque);line-height:1.4;font-weight:500;color:var(--primary);
}
.quemsou__foto{flex:0 1 370px;min-width:230px;order:1;position:relative}
.quemsou__anel{
  position:absolute;inset:-16px;border-radius:120px 120px 30px 30px;
  border:1px solid rgba(147,164,196,0.55);
  animation:eFloat 7s ease-in-out infinite;pointer-events:none;
}
.quemsou__foto img{
  width:100%;height:auto;aspect-ratio:4/4.6;object-fit:cover;object-position:50% 26%;
  border-radius:120px 120px 30px 30px;box-shadow:var(--s-foto-quemsou);
}

/* ==========================================================================
   9. O que dizem
   ========================================================================== */
.depoimentos__titulo{margin-bottom:clamp(38px,4.6vw,58px)}
.grade-depoimentos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));gap:var(--gap-grade)}
.depoimento{
  margin:0;background:var(--card);border-radius:26px;padding:var(--pad-cartao);
  transition:transform .28s var(--ease),box-shadow .28s;
}
.depoimento:hover{transform:translateY(-7px);box-shadow:0 28px 50px -30px rgba(22,32,58,0.45)}
.depoimento blockquote{margin:clamp(18px,2vw,24px) 0 0;font-size:var(--t-depoimento);line-height:1.38;color:var(--ink-deep)}
.depoimento figcaption{margin-top:clamp(18px,2vw,26px);font-size:15px;font-weight:700;color:var(--muted-3)}
.depoimento--escuro{background:var(--mid)}
.depoimento--escuro blockquote{color:var(--on-dark-title-2)}
.depoimento--escuro figcaption{color:var(--accent)}

/* ==========================================================================
   10. Perguntas frequentes
   ========================================================================== */
.faq__titulo{margin-bottom:clamp(30px,3.8vw,48px)}
.faq__lista{display:flex;flex-direction:column;gap:12px}
.faq__item{background:var(--white);border-radius:20px;padding:0 clamp(22px,2.6vw,30px)}
.faq__botao{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(22px,2.4vw,26px) 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--fonte-texto);font-size:var(--t-cartao);font-weight:700;line-height:1.4;color:var(--ink-deep);
}
.faq__chevron{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--chev-well);
  transition:transform .3s var(--ease),background-color .25s;
}
.faq__botao[aria-expanded="true"] .faq__chevron{transform:rotate(180deg);background:var(--chev-well-open)}
.faq__painel{overflow:hidden;height:0;opacity:0;transition:height .32s var(--ease),opacity .32s}
.faq__painel p{
  margin:0;padding:0 0 clamp(22px,2.6vw,28px);
  font-size:clamp(18px,1.7vw,20px);line-height:1.62;color:var(--muted-2);
}
/* Sem JavaScript o acordeão fica aberto — o conteúdo nunca some. */
html:not(.js) .faq__painel{height:auto;opacity:1}
html:not(.js) .faq__chevron{display:none}

/* ==========================================================================
   11. Fechamento + rodapé
   ========================================================================== */
.fechamento{
  position:relative;background:var(--primary);color:var(--on-dark-bg);overflow:hidden;
  padding:clamp(80px,10vw,152px) var(--pad-secao-x) clamp(44px,5vw,72px);
}
.fechamento__aura{
  left:50%;top:0;width:min(70vw,820px);margin-left:min(-35vw,-410px);
  background:radial-gradient(circle,rgba(230,196,168,0.20),rgba(230,196,168,0) 66%);
  animation:eBreathSlow 12s ease-in-out infinite;
}
.fechamento__interno{position:relative;max-width:var(--largura-max);margin:0 auto}
.fechamento__centro{text-align:center}
.fechamento__frase{
  margin:0 auto;max-width:14em;
  font-size:var(--t-fechamento);line-height:1.04;letter-spacing:-0.028em;color:var(--on-dark-title-2);
}
.fechamento__apoio{
  margin:clamp(16px,1.8vw,24px) auto 0;max-width:32em;
  font-size:var(--t-lead);line-height:1.6;color:var(--on-dark-body);
}
.fechamento__botao{margin-top:clamp(30px,3.6vw,44px)}

.rodape{
  margin-top:clamp(60px,7vw,110px);padding-top:clamp(26px,3.2vw,38px);
  border-top:1px solid rgba(242,234,240,0.2);
  display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px);
  justify-content:space-between;align-items:flex-end;
}
.rodape__contato{font-size:17px;line-height:1.75;color:var(--on-dark-body)}
.rodape__nome{font-weight:700;color:var(--on-dark-title)}
.rodape__contato a{
  position:relative;color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(230,196,168,0.45);
}
/* O link mede 21px de altura, abaixo do mínimo de 44px para toque. Este
   pseudo-elemento estica só a área clicável, sem mexer no visual nem no
   layout. As linhas vizinhas não são links, então não há conflito. */
.rodape__contato a::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%);
}
.rodape__contato a:hover{color:var(--accent-hover);border-bottom-color:var(--accent-hover)}
.rodape__legal{margin:0;max-width:26em;font-size:15px;line-height:1.6;color:var(--on-dark-faint)}

/* ==========================================================================
   12. Barra fixa de WhatsApp (só no celular, < 820px)
   ========================================================================== */
.barra-fixa{
  display:none;
  position:sticky;bottom:0;z-index:30;
  background:rgba(248,243,239,0.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(34,48,78,0.14);
}
.barra-fixa__botao{
  display:flex;align-items:center;justify-content:center;gap:11px;
  min-height:60px;border-radius:999px;background:var(--primary);color:var(--page);
  text-decoration:none;font-size:18px;font-weight:700;
}
.barra-fixa__botao:hover{color:var(--page)}
.barra-fixa__botao:active{background:var(--ink-deep)}
@media (max-width:819px){.barra-fixa{display:block}}

/* ==========================================================================
   Ajustes do topo no celular
   Abaixo de 820px a foto ocupa a largura toda, e texto à esquerda ao lado de
   uma foto centralizada fica torto. Aqui tudo vai para o centro.
   A linha de marca sai: o nome e a credencial já aparecem logo abaixo do
   título, e repetir os dois no alto só gasta a primeira tela.
   ========================================================================== */
@media (max-width:819px){
  .marca{display:none}
  /* Metade dos títulos de seção já era centralizada. No celular a mistura
     fica evidente, então todos vão para o centro. O texto de leitura embaixo
     continua à esquerda — é o padrão que a página já usava. */
  .titulo-secao{text-align:center;margin-inline:auto}
  /* Crianças, mesma razão do topo: a foto ocupa a largura toda ali. */
  .criancas__texto{text-align:center;max-width:none}
  .criancas__foto,.quemsou__foto{margin-inline:auto}
  .topo{padding-top:clamp(40px,10vw,56px)}
  .topo__texto{text-align:center}
  /* A credencial precisa de 356px a 18px e a coluna do celular tem 350px.
     Este tamanho encolhe só o necessário para caber em uma linha, e para de
     encolher em 15px. Abaixo de 360px de tela ela volta a quebrar em duas —
     é o iPhone SE de 2016 e pouco mais. Fica abaixo do piso de 18px que o
     handoff fixou, mas isto é um rótulo de credencial, não texto de leitura. */
  .topo__lead{margin-inline:auto;font-size:clamp(15px,calc(4.9vw - 2px),18px)}
  .topo__acoes,.selos{justify-content:center}
  .topo__foto{margin-inline:auto}
}

/* ==========================================================================
   Reveal ao rolar — só quando há JS, para o conteúdo nunca ficar invisível
   ========================================================================== */
.js [data-reveal]{
  opacity:0;transform:translateY(20px) scale(.985);filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s ease;
}
.js [data-reveal].revelado{opacity:1;transform:none;filter:none}

/* Movimento reduzido ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important}
  .botao,.cartao-sintoma,.cartao-passo,.depoimento,.faq__chevron{transition:none}
  .js [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
}