/* =========================================================================
   AVALIAÇÃO NEUROPSICOLÓGICA — Vitorino Pereira Neto (CRP 06/184786)
   Ribeirão Preto — SP · atendimento presencial e online

   Landing page de conversão (WhatsApp).

   PALETA (definida pelo cliente):
     · azul-marinho + azul ardósia .......... base
     · verde-petróleo + verde-floresta ...... destaques
     · verde-esmeralda ...................... botão de contato
     · verde-sálvia ......................... elementos secundários
     · off-white azulado .................... fundos claros e cartões
   Sem rosa, coral, salmão, pêssego ou laranja em nenhum ponto do arquivo.

   FORMAS  arcos e pílulas
   FONTES  Playfair Display (títulos) + DM Sans (texto)
           — as mesmas do arquivo HTML enviado pelo Vitorino
   ========================================================================= */

:root{
  /* --- Azul-marinho / ardósia (base) --- */
  --ink-950:  #071624;
  --ink-900:  #0D2237;
  --ink-800:  #15334C;
  --ink-700:  #1E4560;
  --slate:    #2E4A63;
  --slate-l:  #7595AF;
  --slate-2:  #C2D5E1;

  /* --- Verde-petróleo (destaque principal) --- */
  --teal:     #14707F;
  --teal-d:   #0E5A67;
  --teal-l:   #86C9CE;
  --teal-soft:#E2F0F1;

  /* --- Verde-floresta / sálvia (secundários) --- */
  --forest:   #1C5B4A;
  --forest-l: #7FB6A2;
  --sage:     #9DB9AC;
  --sage-soft:#E8F0EB;

  /* --- Verde-esmeralda (ação / contato) --- */
  --emerald:  #0E9F6E;
  --emerald-d:#0B7C56;

  /* --- Off-white azulado (fundos claros) --- */
  --mist:     #F5F8FA;
  --mist-2:   #EAF1F5;
  --mist-3:   #DAE5EC;
  --paper:    #FFFFFF;

  /* --- Texto --- */
  --ink:      #12283C;
  --muted:    #4C6478;
  --faint:    #7C93A5;
  --on-dark:  #E6EFF4;
  --on-dark-soft: #A6BFCE;

  --line:      rgba(18,40,60,.13);
  --line-soft: rgba(18,40,60,.07);
  --line-dark: rgba(194,213,225,.16);

  /* mesmas fontes do arquivo do Vitorino (neuro2-corrigido.html) */
  --display: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* arcos e pílulas — a assinatura visual deste modelo */
  --arch:   260px 260px 26px 26px;
  --arch-sm:160px 160px 20px 20px;
  --r-card: 22px;
  --r-pill: 999px;

  --sh-sm: 0 2px 10px rgba(7,22,36,.06);
  --sh:    0 22px 50px -26px rgba(7,22,36,.42);
  --sh-lg: 0 48px 90px -34px rgba(7,22,36,.5);
  --sh-accent: 0 16px 34px -14px rgba(14,90,103,.55);

  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 48px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------- Reset ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; scroll-padding-top:96px; }
body{
  font-family:var(--sans);
  font-size:16px; line-height:1.6; color:var(--ink);
  background:var(--mist);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ list-style:none; padding:0; }
:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; border-radius:6px; }

/* ---------------- Tipografia ----------------
   Escala igual à do arquivo do Vitorino: Playfair Display nos títulos,
   DM Sans nos textos. */
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.02em; }

/* o título da capa: a escala do arquivo (até 5.2rem) ficava grande demais
   na nossa coluna e quebrava em sete linhas — este teto deixa o título em
   quatro linhas, sem perder o peso */
.h-xxl{ font-size:clamp(1.95rem, 1.1rem + 2.3vw, 2.85rem); letter-spacing:-.03em; }
.h-xl { font-size:clamp(2.1rem, 4vw, 3.6rem); letter-spacing:-.03em; }
.h-l  { font-size:clamp(1.3rem, 1rem + 1.2vw, 1.75rem); }
h3{ font-size:1.45rem; }

/* o destaque dentro dos títulos é feito pela cor, não pelo itálico */
em{ font-style:normal; color:var(--teal); }
.on-dark em{ color:var(--teal-l); }

.lead{ font-size:1.08rem; line-height:1.65; color:var(--muted); }
.on-dark .lead{ color:var(--on-dark-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px; max-width:100%;
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--teal-d);
}
/* os tracinhos nunca encolhem; o texto entre eles pode quebrar em duas
   linhas nas telas estreitas, em vez de estourar a largura */
.eyebrow::before{ content:''; flex:none; width:26px; height:2px; background:currentColor; border-radius:2px; }
.on-dark .eyebrow{ color:var(--teal-l); }
.eyebrow.mid::after{ content:''; flex:none; width:26px; height:2px; background:currentColor; border-radius:2px; }

/* ---------------- Layout ---------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:clamp(64px, 8vw, 112px); position:relative; }
.sec-sm{ padding-block:clamp(48px, 6vw, 78px); }
.bg-mist{ background:var(--mist); }
.bg-mist2{ background:var(--mist-2); }
.bg-dark{ background:var(--ink-900); color:var(--on-dark); }
.bg-dark h2,.bg-dark h3,.bg-dark h4{ color:#fff; }
/* segundo tom escuro: usado quando duas seções escuras ficam lado a lado
   (Como funciona -> Sobre), para que a virada de seção continue perceptível */
.bg-dark-2{ background:var(--ink-950); color:var(--on-dark); }
.bg-dark-2 h2,.bg-dark-2 h3,.bg-dark-2 h4{ color:#fff; }

.head{ max-width:680px; }
.head.mid{ margin-inline:auto; text-align:center; }
.head h2{ margin-top:16px; text-wrap:balance; }
.head .lead{ margin-top:16px; }

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

/* ---------------- Botões ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:.95rem; line-height:1;
  min-height:54px; padding:14px 23px; border-radius:var(--r-pill);
  border:2px solid transparent; cursor:pointer;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn{ white-space:nowrap; }
.btn:hover{ transform:translateY(-3px); }
.btn-lg{ padding:17px 32px; font-size:1rem; }
/* nas telas mais estreitas o rótulo pode quebrar em duas linhas em vez
   de passar da borda */
@media (max-width:400px){
  .btn{ white-space:normal; text-align:center; }
  .btn-lg{ padding:15px 20px; }
}

/* botão de contato — verde-esmeralda */
.btn-wa{ background:var(--emerald); color:#fff; box-shadow:0 14px 30px -14px rgba(14,159,110,.8); }
.btn-wa:hover{ background:var(--emerald-d); box-shadow:0 20px 38px -14px rgba(14,159,110,.9); }

.btn-teal{ background:var(--teal); color:#fff; box-shadow:var(--sh-accent); }
.btn-teal:hover{ background:var(--teal-d); }

.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal-d); }
.on-dark .btn-ghost, .bg-dark .btn-ghost{ border-color:var(--line-dark); color:var(--on-dark); }
.on-dark .btn-ghost:hover, .bg-dark .btn-ghost:hover{ border-color:var(--teal-l); color:var(--teal-l); }

/* pulso discreto no CTA principal */
.btn-pulse{ position:relative; }
.btn-pulse::after{
  content:''; position:absolute; inset:-2px; border-radius:inherit;
  border:2px solid var(--emerald); opacity:0; pointer-events:none;
  animation:pulse 2.8s var(--ease) infinite;
}
@keyframes pulse{
  0%   { transform:scale(1);    opacity:.6; }
  70%  { transform:scale(1.14); opacity:0;  }
  100% { transform:scale(1.14); opacity:0;  }
}

/* ---------------- Barra de progresso ---------------- */
.progress{ position:fixed; inset:0 0 auto 0; height:3px; z-index:120; background:transparent; pointer-events:none; }
.progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal),var(--emerald)); }

/* ---------------- Header ---------------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(245,248,250,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s, border-color .3s, background .3s;
}
.hdr.stuck{ border-color:var(--line-soft); box-shadow:0 10px 30px -22px rgba(7,22,36,.55); }
.hdr .wrap{ display:flex; align-items:center; gap:20px; min-height:74px; }
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand img{ width:auto; height:56px; transition:height .3s var(--ease); }
.hdr.stuck .brand img{ height:46px; }
.brand-txt{ display:none; line-height:1.15; }
.brand-txt b{ font-family:var(--display); font-size:1rem; font-weight:600; display:block; color:var(--ink); }
.brand-txt b, .brand-txt span{ white-space:nowrap; }
.brand-txt span{ font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }
/* só a partir de 1200px sobra espaço para o nome ao lado do menu e do botão */
@media (min-width:1200px){ .brand-txt{ display:block; } }

.menu{ display:none; align-items:center; gap:4px; }
.menu a{
  position:relative; white-space:nowrap;
  font-size:.86rem; font-weight:500; color:var(--muted);
  padding:9px 11px; border-radius:var(--r-pill); transition:color .2s, background .2s;
}
.menu a:hover{ color:var(--ink); background:rgba(20,112,127,.1); }
.menu a.on{ color:var(--teal-d); }
@media (min-width:1024px){ .menu{ display:flex; } }

.hdr-cta{ display:none; }
@media (min-width:600px){ .hdr-cta{ display:inline-flex; } }

.burger{
  width:46px; height:46px; display:grid; place-content:center; gap:5px;
  background:var(--ink-900); border:0; border-radius:14px; cursor:pointer;
}
.burger span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width:1024px){ .burger{ display:none; } }

/* drawer */
.scrim{
  position:fixed; inset:0; background:rgba(7,22,36,.6); z-index:108;
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
  backdrop-filter:blur(2px);
}
.scrim.open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(85vw,340px); z-index:109;
  background:var(--ink-900); color:var(--on-dark);
  padding:88px 26px 34px; overflow-y:auto;
  transform:translateX(102%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; gap:4px;
}
.drawer.open{ transform:none; }
.drawer a{
  padding:14px 4px; font-size:1.02rem; font-weight:500;
  border-bottom:1px solid var(--line-dark); transition:color .2s, padding-left .2s;
}
.drawer a:hover{ color:var(--teal-l); padding-left:8px; }
.drawer .btn{ margin-top:22px; border-bottom:0; justify-content:center; }
.drawer .btn:hover{ padding-left:24px; }
.drawer-x{
  position:absolute; top:22px; right:22px; width:42px; height:42px;
  border:1px solid var(--line-dark); background:transparent; color:#fff;
  border-radius:12px; cursor:pointer; font-size:1.2rem; line-height:1;
}

/* =========================================================================
   HERO — foto em arco à esquerda, texto à direita
   ========================================================================= */
.hero{
  position:relative; background:var(--ink-900); color:var(--on-dark);
  padding-top:clamp(38px,5vw,64px); padding-bottom:clamp(96px,11vw,150px);
  overflow:hidden; isolation:isolate;
}
.hero::before,.hero::after{ content:''; position:absolute; border-radius:50%; z-index:-1; pointer-events:none; }
.hero::before{
  width:60vw; height:60vw; max-width:760px; max-height:760px;
  top:-24%; left:-16%;
  background:radial-gradient(circle, rgba(46,74,99,.85), transparent 66%);
}
.hero::after{
  width:46vw; height:46vw; max-width:600px; max-height:600px;
  bottom:-16%; right:-12%;
  background:radial-gradient(circle, rgba(20,112,127,.42), transparent 68%);
}
.hero-grid{
  display:grid; gap:clamp(32px,5vw,60px); align-items:center;
  grid-template-columns:1fr;
}
.hero-grid > *{ min-width:0; }
/* layout do arquivo do Vitorino: o texto vem primeiro (coluna da esquerda)
   e a foto fica à direita; no celular o texto abre a página */
@media (min-width:940px){ .hero-grid{ grid-template-columns:.94fr 1.06fr; } }

/* o H1 ganhou a cidade e a modalidade: um pouco menor para não virar
   um bloco de quatro linhas na coluna estreita do herói */
.hero h1{ margin-top:20px; margin-bottom:25px; }
.hero h1 .l1{ display:block; font-weight:600; color:#fff; text-wrap:balance; }
.hero h1 .l2{ display:block; color:var(--teal-l); text-wrap:balance; }
.hero-sub{ margin-top:0; max-width:610px; font-size:1.13rem; line-height:1.75; color:var(--on-dark-soft); }
.hero-sub strong{ color:#fff; font-weight:600; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
/* como no arquivo do Vitorino: no celular os dois botões viram blocos
   empilhados de largura total, em vez de estourarem a linha */
@media (max-width:700px){
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
}
.hero-note{ display:flex; align-items:center; gap:9px; margin-top:18px; font-size:.86rem; color:var(--on-dark-soft); }
.hero-note svg{ width:16px; height:16px; color:var(--forest-l); flex:none; }

/* linha de confiança do herói — no arquivo do Vitorino é uma sequência
   solta de itens com "check", sem caixa em volta */
.creds{
  display:flex; flex-wrap:wrap; gap:12px 22px;
  margin-top:26px; padding:0; background:none; border:0;
}
.creds li{
  display:flex; align-items:flex-start; gap:8px; min-width:0;
  font-size:.88rem; font-weight:500; color:var(--on-dark-soft);
  line-height:1.4;
}
.creds li::before{
  content:'✓'; flex:none; font-weight:700; color:var(--teal-l);
}
@media (max-width:430px){
  .creds{ gap:9px 16px; }
  .creds li{ font-size:.82rem; }
}

/* cartão flutuante sobre a foto da capa — "Clareza para decidir" */
.hero-card{
  position:absolute; z-index:3; right:-18px; bottom:34px;
  max-width:230px; padding:20px;
  background:var(--paper); color:var(--ink);
  border-radius:18px; box-shadow:var(--sh-lg);
}
.hero-card b{
  display:block; margin-bottom:7px;
  font-family:var(--display); font-weight:600; font-size:1.12rem; color:var(--ink-900);
}
.hero-card p{ font-size:.83rem; line-height:1.5; color:var(--muted); }
@media (max-width:767px){
  .hero-card{ right:6px; bottom:18px; max-width:205px; padding:16px; }
  .hero-card b{ font-size:1rem; }
  .hero-card p{ font-size:.79rem; }
}
/* nos aparelhos estreitos o cartão viraria uma coluna de palavras:
   sai de cima da foto e passa a ser um bloco normal abaixo dela */
@media (max-width:400px){
  .hero-card{ position:static; max-width:none; margin-top:18px; }
}

/* foto em arco */
.hero-media{ position:relative; display:flex; justify-content:center; }
.hero-photo-wrap{ position:relative; width:min(100%,470px); }
.hero-photo{
  position:relative; width:100%; aspect-ratio:3/3.75;
  border-radius:var(--arch); overflow:hidden;
  background:linear-gradient(180deg,var(--ink-800),var(--ink-950));
  box-shadow:var(--sh-lg);
  z-index:1;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; }
@media (max-width:939px){ .hero-media{ margin-bottom:24px; } }

/* curva de transição para o off-white */
.hero-curve{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(50px,7vw,96px); color:var(--mist); }

/* =========================================================================
   SINAIS — bullets em destaque dentro de "Quando é indicada"
   ========================================================================= */
.sub-head{
  text-align:center; font-family:var(--display); font-weight:600;
  font-size:clamp(1.15rem, 1rem + .7vw, 1.45rem); color:var(--ink);
  margin-top:clamp(40px,5vw,58px); text-wrap:balance;
}
/* duas colunas de sinais: crianças/adolescentes e adultos */
.sig-cols{
  display:grid; gap:clamp(24px,4vw,40px); margin-top:clamp(20px,3vw,30px);
  grid-template-columns:1fr;
}
@media (min-width:820px){ .sig-cols{ grid-template-columns:1fr 1fr; } }
.sig-col{ min-width:0; }
.sig-col h3{
  font-family:var(--sans); font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal-d);
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.sig-col h3::after{
  content:''; flex:1; height:1px; background:var(--line); border-radius:1px;
}
.sig-list{ display:grid; gap:10px; grid-template-columns:1fr; }
.sig{
  display:flex; align-items:flex-start; gap:13px;
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:16px; padding:18px 20px; font-size:.95rem; font-weight:500; line-height:1.45;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.sig:hover{ transform:translateY(-3px); border-color:var(--teal-l); box-shadow:var(--sh-sm); }
.sig i{
  flex:none; width:28px; height:28px; margin-top:1px;
  display:grid; place-content:center; border-radius:50%;
  background:var(--teal-soft); color:var(--teal-d);
}
.sig i svg{ width:15px; height:15px; }

/* terceiro recorte, largura cheia: a avaliação também investiga potencialidades */
.sig-extra{
  margin-top:clamp(18px,2.4vw,24px);
  background:var(--teal-soft); border:1px solid var(--teal-l);
  border-radius:16px; padding:18px 22px;
  font-size:.95rem; line-height:1.5; color:var(--ink-800);
}
.sig-extra b{ color:var(--teal-d); font-weight:700; }

/* ressalva ética depois da lista de sinais */
.sec-note{
  max-width:70ch; margin:clamp(26px,4vw,36px) auto 0;
  text-align:center; font-size:.95rem; color:var(--muted);
  padding-top:clamp(20px,3vw,26px); border-top:1px solid var(--line-soft);
}

/* botão de fim de seção — todos usam o mesmo texto */
.sec-cta{ text-align:center; margin-top:clamp(38px,5vw,54px); }

/* emblema do logo como abertura de seção */
.emblem{
  display:block; width:clamp(98px,11vw,132px); height:auto;
  margin:0 auto clamp(14px,2vw,20px);
}

/* =========================================================================
   ETAPAS — trilho horizontal numerado
   ========================================================================= */
.rail{ margin-top:clamp(44px,6vw,64px); }
.rail ol{ display:grid; gap:26px; grid-template-columns:1fr; }
@media (min-width:760px){ .rail ol{ grid-template-columns:repeat(5,1fr); gap:14px; } }
.rail li{ position:relative; padding-top:56px; }
.rail li::before{                       /* linha do trilho */
  content:''; position:absolute; left:0; right:0; top:23px; height:2px;
  background:var(--line-dark);
}
.rail li:first-child::before{ left:23px; }
.rail li:last-child::before{ right:calc(100% - 23px); }
@media (max-width:759px){
  .rail li{ padding-top:0; padding-left:64px; padding-bottom:26px; }
  .rail li::before{ left:23px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .rail li:first-child::before{ top:23px; left:23px; }
  .rail li:last-child::before{ right:auto; bottom:calc(100% - 23px); }
}
.rail .n{
  position:absolute; left:0; top:0; width:46px; height:46px; z-index:1;
  display:grid; place-content:center; border-radius:50%;
  background:var(--ink-800); border:2px solid var(--slate-l);
  font-family:var(--display); font-size:1rem; font-weight:700; color:#fff;
  transition:background .3s var(--ease), border-color .3s, transform .3s var(--ease);
}
.rail li:hover .n{ background:var(--teal); border-color:var(--teal-l); transform:scale(1.08); }
.rail h3{ font-size:1.02rem; color:#fff; }
/* mantém os textos das 5 etapas começando na mesma altura, mesmo quando
   um dos títulos ocupa duas linhas */
@media (min-width:760px){ .rail h3{ min-height:2.5em; } }
.rail p{ margin-top:9px; font-size:.89rem; color:var(--on-dark-soft); line-height:1.6; }
.rail .k{ display:block; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--teal-l); font-weight:700; margin-bottom:7px; }

/* =========================================================================
   ABAS — o que a avaliação investiga
   ========================================================================= */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:30px; }
.tab{
  background:var(--paper); border:1px solid var(--line); color:var(--muted);
  padding:12px 22px; border-radius:var(--r-pill); font-weight:600; font-size:.9rem; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.tab:hover{ color:var(--ink); transform:translateY(-2px); }
.tab[aria-selected="true"]{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; box-shadow:var(--sh); }

.panel[hidden]{ display:none; }
.panel{ margin-top:clamp(30px,4vw,44px); }

/* glossário: cada função avaliada com a tradução ao lado */
.glossary{ display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:760px){ .glossary{ grid-template-columns:1fr 1fr; gap:10px 18px; } }
.glossary li{
  background:var(--paper); border:1px solid var(--line-soft); border-radius:14px;
  padding:14px 18px 14px 34px; position:relative; font-size:.93rem; line-height:1.5;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s var(--ease);
}
.glossary li::before{
  content:''; position:absolute; left:16px; top:22px;
  width:7px; height:7px; border-radius:50%; background:var(--teal);
}
.glossary li:hover{ transform:translateY(-2px); border-color:var(--teal-l); box-shadow:var(--sh-sm); }
.glossary b{ color:var(--ink); font-weight:700; }
.glossary span{ color:var(--muted); }
.glossary b + span::before{ content:' — '; color:var(--faint); }

.cloud{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cloud span{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--paper); border:1px solid var(--line);
  padding:10px 17px; border-radius:var(--r-pill);
  font-size:.89rem; font-weight:600; color:var(--ink-800);
  transition:transform .3s var(--ease), border-color .3s, color .3s, background .3s;
}
.cloud span::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--teal); flex:none; }
.cloud span:hover{ transform:translateY(-3px); border-color:var(--teal); background:var(--teal-soft); }

.cond{ display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:600px){ .cond{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .cond{ grid-template-columns:repeat(3,1fr); } }
.cond li{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--line-soft); border-radius:14px;
  padding:14px 16px; font-size:.91rem; font-weight:500;
  transition:transform .3s var(--ease), border-color .3s;
}
.cond li:hover{ transform:translateX(4px); border-color:var(--teal-l); }
.cond li b{ display:block; font-weight:700; color:var(--ink); }
.cond li small{ display:block; font-size:.81rem; color:var(--muted); font-weight:400; margin-top:2px; }
.cond svg{ width:19px; height:19px; color:var(--teal); flex:none; margin-top:2px; }

/* =========================================================================
   SOBRE — banda escura com foto em arco
   ========================================================================= */
.about{ position:relative; overflow:hidden; }
.about-grid{ display:grid; gap:clamp(34px,5vw,60px); grid-template-columns:1fr; align-items:center; }
.about-grid > *{ min-width:0; }
/* layout do arquivo: copy à esquerda, foto à direita, colunas iguais */
@media (min-width:940px){ .about-grid{ grid-template-columns:1fr 1fr; } }
/* no arquivo do Vitorino a foto é um retângulo de cantos arredondados,
   sem arco e sem contorno vazado */
.about-photo{ position:relative; }
/* aspecto igual ao do arquivo original da foto: sem corte e sem zoom */
.about-photo img{
  width:100%; height:auto; aspect-ratio:1000/934; object-fit:cover;
  border-radius:24px; box-shadow:var(--sh-lg);
  position:relative; z-index:1;
}
.crp{ color:var(--teal-l); font-weight:700; letter-spacing:.14em; font-size:.8rem; margin-top:8px; }
.quote{
  margin:24px 0; padding:18px 24px;
  border-left:3px solid var(--teal);
  font-family:var(--display); font-size:clamp(1.1rem,.98rem + .55vw,1.4rem);
  font-weight:500; color:#fff; line-height:1.4;
}
.cols2{ display:grid; gap:26px; grid-template-columns:1fr; margin-top:28px; }
@media (min-width:640px){ .cols2{ grid-template-columns:1fr 1fr; } }
.cols2 h4{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-l); font-family:var(--sans); font-weight:700; }
.mini{ margin-top:14px; display:grid; gap:9px; }
.mini li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--on-dark-soft); line-height:1.5; }
.mini li::before{ content:''; flex:none; width:6px; height:6px; border-radius:50%; background:var(--teal); margin-top:9px; }

/* faixa discreta de registros de palestras e treinamentos */
.strip{ margin-top:34px; min-width:0; }
.strip h4{
  font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal-l); margin-bottom:14px;
}
.strip-row{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr);
  gap:10px; overflow-x:auto; padding-bottom:8px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.strip-row img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:12px; border:1px solid var(--line-dark);
  filter:saturate(.85); opacity:.85; scroll-snap-align:start;
  transition:opacity .3s, filter .3s, transform .3s var(--ease);
}
.strip-row img:hover{ opacity:1; filter:none; transform:translateY(-3px); }
.strip-row::-webkit-scrollbar{ height:6px; }
.strip-row::-webkit-scrollbar-thumb{ background:var(--line-dark); border-radius:99px; }

/* =========================================================================
   COMO FUNCIONA — cartões
   ========================================================================= */
.cards3{ display:grid; gap:18px; grid-template-columns:1fr; margin-top:clamp(32px,4vw,48px); }
@media (min-width:700px){ .cards3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .cards3{ grid-template-columns:repeat(3,1fr); } }
.card{
  position:relative; overflow:hidden;
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--r-card); padding:30px 26px 28px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh); border-color:var(--teal-l); }
.card .ic{
  width:52px; height:52px; border-radius:16px; display:grid; place-content:center;
  background:var(--ink-900); color:var(--teal-l); margin-bottom:18px;
  transition:background .35s var(--ease);
}
.card:hover .ic{ background:var(--teal); color:#fff; }
.card .ic svg{ width:24px; height:24px; }
.card h3{ font-size:1.1rem; position:relative; }
.card p{ margin-top:10px; font-size:.92rem; color:var(--muted); position:relative; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; position:relative; }
.tags span{
  font-size:.7rem; font-weight:700; letter-spacing:.05em;
  background:var(--sage-soft); border:1px solid var(--line-soft);
  color:var(--forest); padding:5px 11px; border-radius:8px;
}

/* =========================================================================
   CONSULTÓRIO — galeria + cartão de localização
   ========================================================================= */
.gal{
  display:grid; gap:12px; margin-top:clamp(32px,4vw,46px);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .gal{ grid-template-columns:repeat(3,1fr); } }
.gal figure{
  margin:0; overflow:hidden; border-radius:18px;
  border:1px solid var(--line-soft); background:var(--paper);
  box-shadow:var(--sh-sm);
}
/* proporção única em toda a grade: as fotos verticais entram recortadas
   pelo centro, para as linhas ficarem alinhadas */
.gal img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 45%;
  transition:transform .55s var(--ease);
}
.gal figure:hover img{ transform:scale(1.06); }

.place{
  margin-top:clamp(26px,4vw,38px);
  display:grid; gap:22px; align-items:center;
  grid-template-columns:1fr;
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--r-card); padding:clamp(26px,4vw,40px); box-shadow:var(--sh-sm);
}
@media (min-width:860px){ .place{ grid-template-columns:1.3fr auto; } }
.place h3{ font-size:1.25rem; }
.place p{ margin-top:10px; color:var(--muted); font-size:.95rem; }
.place .addr{
  display:flex; align-items:flex-start; gap:11px; margin-top:16px;
  font-weight:600; color:var(--ink);
}
.place .addr svg{ width:20px; height:20px; color:var(--teal); flex:none; margin-top:3px; }
.g-logo{ font-family:var(--sans); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; }
.g-logo .b{ color:#4285F4; } .g-logo .r{ color:#EA4335; }
.g-logo .y{ color:#FBBC05; } .g-logo .g{ color:#34A853; }
.place-cta{ display:grid; gap:12px; justify-items:start; }
@media (min-width:860px){ .place-cta{ justify-items:center; } }

/* =========================================================================
   AVALIAÇÕES NO GOOGLE — cartão claro sobre a faixa escura
   ========================================================================= */
.g-card{
  max-width:720px; margin:clamp(32px,4vw,46px) auto 0; text-align:center;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line-soft); border-radius:var(--r-card);
  padding:clamp(30px,5vw,48px); box-shadow:var(--sh-lg);
}
.g-card .g-logo{ font-size:clamp(1.55rem,1.2rem + 1.3vw,2rem); }
.g-rating{ margin-top:20px; }
.g-rating b{
  display:block; font-family:var(--display); font-weight:700; line-height:1;
  font-size:clamp(2.4rem,2rem + 1.6vw,3.2rem); color:var(--ink);
}
.g-stars{ display:flex; justify-content:center; gap:5px; margin-top:12px; }
.g-stars svg{ width:26px; height:26px; color:#FBBC05; }
.g-rating small{ display:block; margin-top:12px; font-size:.86rem; color:var(--muted); }
.g-note{
  margin-top:20px; max-width:58ch; margin-inline:auto;
  font-size:.95rem; color:var(--muted); line-height:1.65;
}
.g-actions{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.g-invite{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:.85rem; color:var(--faint);
}

/* =========================================================================
   FAQ — duas colunas
   ========================================================================= */
.faq{ display:grid; gap:14px; grid-template-columns:1fr; margin-top:clamp(30px,4vw,44px); align-items:start; }
@media (min-width:860px){ .faq{ grid-template-columns:1fr 1fr; gap:14px 22px; } }
.faq details{
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:18px; overflow:hidden; transition:border-color .3s, box-shadow .3s;
}
.faq details[open]{ border-color:var(--teal-l); box-shadow:var(--sh-sm); }
.faq summary{
  list-style:none; cursor:pointer; padding:19px 56px 19px 22px; position:relative;
  font-weight:600; font-size:.97rem; color:var(--ink); line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
/* a pergunta é um H3 de verdade (hierarquia de títulos), mas herda o
   visual do summary para o acordeão continuar igual */
.faq summary h3{ font:inherit; letter-spacing:inherit; color:inherit; display:inline; margin:0; }
.faq summary::after{
  content:''; position:absolute; right:20px; top:22px;
  width:22px; height:22px; border-radius:50%;
  background:var(--teal-soft);
  transition:background .3s, transform .3s var(--ease);
}
.faq summary::before{
  content:''; position:absolute; right:26px; top:32px; z-index:1;
  width:10px; height:2px; background:var(--teal-d); border-radius:2px;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ background:var(--teal); }
.faq details[open] summary::before{ background:#fff; }
.faq summary em{
  position:absolute; right:30.5px; top:28px; z-index:1;
  width:2px; height:10px; background:var(--teal-d); border-radius:2px; font-style:normal;
  transition:transform .3s var(--ease), background .3s;
}
.faq details[open] summary em{ transform:rotate(90deg); background:#fff; }
.faq .a{ padding:0 22px 22px; font-size:.92rem; color:var(--muted); }

/* =========================================================================
   PSICOTERAPIA — bloco discreto, depois de todo o conteúdo de avaliação
   ========================================================================= */
.psico{ background:var(--ink-800); color:var(--on-dark); }
.psico-grid{
  display:grid; gap:clamp(26px,4vw,48px); align-items:center;
  grid-template-columns:1fr;
}
.psico-grid > *{ min-width:0; }
@media (min-width:820px){ .psico-grid{ grid-template-columns:.55fr 1.45fr; } }
.psico-photo img{
  width:100%; max-width:300px; border-radius:var(--arch-sm);
  box-shadow:var(--sh); margin-inline:auto;
}
.psico h2{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.05rem); margin-top:14px; }
.psico p{ margin-top:14px; color:var(--on-dark-soft); font-size:.98rem; max-width:62ch; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.chips span{
  font-size:.83rem; font-weight:600; color:var(--on-dark);
  background:rgba(28,91,74,.42); border:1px solid rgba(127,182,162,.4);
  padding:7px 15px; border-radius:var(--r-pill);
}
.psico-link{
  display:inline-flex; align-items:center; gap:9px; margin-top:24px;
  font-weight:600; font-size:.94rem; color:var(--teal-l);
  border-bottom:1px solid rgba(134,201,206,.45); padding-bottom:3px;
  transition:color .2s, border-color .2s, gap .2s var(--ease);
}
.psico-link:hover{ color:#fff; border-color:#fff; gap:13px; }
.psico-link svg{ width:17px; height:17px; }

/* =========================================================================
   CONTATO
   ========================================================================= */
.form-grid{ display:grid; gap:clamp(32px,5vw,56px); grid-template-columns:1fr; align-items:center; }
.form-grid > *{ min-width:0; }
@media (min-width:940px){ .form-grid{ grid-template-columns:1fr 1.05fr; } }
.contact-list{ display:grid; gap:11px; margin-top:28px; }
.contact-list a, .contact-list div{
  display:flex; align-items:center; gap:14px;
  background:rgba(7,22,36,.5); border:1px solid var(--line-dark);
  border-radius:16px; padding:14px 18px;
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.contact-list a:hover{ transform:translateX(5px); border-color:var(--teal); background:rgba(20,112,127,.16); }
.contact-list .ic{
  flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-content:center;
  background:var(--ink-800); color:var(--teal-l);
}
.contact-list .ic svg{ width:20px; height:20px; }
.contact-list .k{ display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-soft); }
.contact-list .v{ display:block; font-weight:600; color:#fff; word-break:break-word; }

/* cartão de chamada final — só botão, sem formulário */
.cta-card{
  background:var(--mist); color:var(--ink); text-align:center;
  border-radius:var(--r-card); padding:clamp(30px,4.5vw,48px); box-shadow:var(--sh-lg);
}
.cta-card .eyebrow{ color:var(--teal-d); }   /* o cartão é claro dentro da faixa escura */
.cta-card h3{
  color:var(--ink); margin-top:16px; text-wrap:balance;
  font-size:clamp(1.25rem, 1.02rem + .9vw,1.65rem); line-height:1.22;
}
.cta-card > p{ margin-top:14px; color:var(--muted); font-size:.97rem; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px; }
.cta-note{ margin-top:20px; font-size:.82rem; color:var(--faint); }
.cta-card .btn-ghost{ border-color:var(--line); color:var(--ink); }
.cta-card .btn-ghost:hover{ border-color:var(--teal); color:var(--teal-d); }

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.foot{ background:var(--ink-950); color:var(--on-dark-soft); padding-top:clamp(48px,6vw,72px); }
.foot-top{ display:grid; gap:34px; grid-template-columns:1fr; padding-bottom:40px; }
@media (min-width:860px){ .foot-top{ grid-template-columns:1.4fr 1fr 1fr; gap:44px; } }
/* o logo é dourado: no rodapé escuro ele fica melhor solto, sem a caixa clara */
.foot-logo{ display:inline-flex; }
.foot-logo img{ height:76px; width:auto; }
.foot p{ margin-top:18px; font-size:.87rem; max-width:46ch; }
.foot h5{ font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; font-weight:700; margin-bottom:14px; }
.foot-nav a{ display:block; font-size:.89rem; padding:5px 0; transition:color .2s, padding-left .2s; }
.foot-nav a:hover{ color:var(--teal-l); padding-left:5px; }
.social{ display:flex; gap:9px; margin-top:20px; }
.social a{
  width:40px; height:40px; border-radius:12px; display:grid; place-content:center;
  background:var(--ink-800); border:1px solid var(--line-dark); color:var(--on-dark);
  transition:background .25s, color .25s, transform .25s var(--ease);
}
.social a:hover{ background:var(--teal); color:#fff; transform:translateY(-3px); }
.social svg{ width:19px; height:19px; }
/* bloco legal: endereço, conselho e aviso informativo */
.foot-legal{
  border-top:1px solid var(--line-dark); padding:22px 0 20px;
  display:grid; gap:8px; font-size:.8rem; line-height:1.6; color:var(--faint);
}
.foot-legal p{ margin:0; max-width:80ch; }
.foot-legal a{ color:var(--slate-2); border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.foot-legal a:hover{ color:var(--teal-l); border-color:currentColor; }
.foot-addr{ color:var(--on-dark-soft); font-weight:500; }

.foot-bot{
  border-top:1px solid var(--line-dark); padding:20px 0 26px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  font-size:.79rem; color:var(--faint);
}
.foot-bot a{ color:var(--slate-2); }

/* =========================================================================
   Flutuantes
   ========================================================================= */
/* pílula com o rótulo "WhatsApp" — o texto visível facilita o rastreamento */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:95;
  display:inline-flex; align-items:center; gap:10px;
  min-height:58px; padding:0 22px 0 17px; border-radius:var(--r-pill);
  background:var(--emerald); color:#fff; box-shadow:0 14px 30px -10px rgba(14,159,110,.75);
  font-weight:700; font-size:.95rem; letter-spacing:.01em;
  transition:transform .3s var(--ease), background .25s;
}
.wa-float:hover{ transform:scale(1.06); background:var(--emerald-d); }
.wa-float svg{ width:27px; height:27px; flex:none; }
.wa-float__label{ white-space:nowrap; line-height:1; }
.wa-float::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--emerald); animation:pulse 2.6s var(--ease) infinite;
}
@media (max-width:767px){
  .wa-float{ bottom:82px; right:14px; min-height:52px; padding:0 18px 0 14px; gap:8px; font-size:.88rem; }
  .wa-float svg{ width:24px; height:24px; }
}

/* barra fixa de conversão no celular */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:96;
  display:none; gap:9px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(13,34,55,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--line-dark);
  transform:translateY(110%); transition:transform .35s var(--ease);
}
.mbar.show{ transform:none; }
.mbar .btn{ flex:1; padding:14px 10px; font-size:.95rem; }
@media (max-width:767px){ .mbar{ display:flex; } }

/* =========================================================================
   AVISO DE COOKIES / CONSENTIMENTO (LGPD)
   Fica acima de tudo e só sai quando a pessoa escolhe.
   ========================================================================= */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:140;
  padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom));
  background:rgba(7,22,36,.98);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line-dark);
  box-shadow:0 -24px 60px -30px rgba(0,0,0,.85);
  transform:translateY(115%); transition:transform .4s var(--ease);
}
.cookie.show{ transform:none; }
.cookie-in{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(14px,3vw,34px);
}
.cookie-txt{ flex:1 1 320px; min-width:0; color:var(--on-dark-soft); }
.cookie-txt b{
  display:block; margin-bottom:4px;
  font-family:var(--display); font-size:1rem; font-weight:600; color:#fff;
}
.cookie-txt p{ font-size:.86rem; line-height:1.55; max-width:78ch; }
.cookie-txt a{ color:var(--teal-l); border-bottom:1px solid currentColor; }
.cookie-txt a:hover{ color:#fff; }
.cookie-btns{ display:flex; gap:10px; flex:none; }
.cookie-btns .btn{ padding:12px 22px; font-size:.9rem; }
.cookie-btns .btn-ghost{ border-color:var(--line-dark); color:var(--on-dark); }
.cookie-btns .btn-ghost:hover{ border-color:var(--teal-l); color:var(--teal-l); }
@media (max-width:640px){
  .cookie-in{ flex-direction:column; align-items:stretch; gap:14px; }
  .cookie-btns .btn{ flex:1; }
}
/* enquanto o aviso está aberto, os flutuantes saem da frente */
body.cookie-open .wa-float, body.cookie-open .mbar{ display:none !important; }

/* =========================================================================
   Animações de entrada (degradam com segurança sem JS)
   ========================================================================= */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.09s; }
.reveal.d2{ transition-delay:.18s; }
.reveal.d3{ transition-delay:.27s; }
.reveal.d4{ transition-delay:.36s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* =========================================================================
   LAYOUT DAS SEÇÕES CONFORME O ARQUIVO HTML DO VITORINO
   (neuro2-corrigido.html). As cores, as fontes e os textos continuam os
   nossos; o que mudou aqui foi o ARRANJO de cada seção.
   ========================================================================= */

/* --- "Quando investigar": texto à esquerda, sinais numerados à direita --- */
.intro-grid{
  display:grid; gap:clamp(34px,5vw,60px);
  grid-template-columns:1fr; align-items:center;
}
.intro-grid > *{ min-width:0; }
@media (min-width:900px){ .intro-grid{ grid-template-columns:1fr 1fr; } }
.intro-copy h2{ margin-top:16px; }
.intro-copy .lead{ margin-top:18px; }

.signs-list{ display:grid; gap:15px; }
.sign-item{
  display:flex; gap:15px; padding:20px 22px;
  border:1px solid var(--line-soft); border-radius:16px;
  background:var(--paper);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.sign-item:hover{ transform:translateY(-3px); border-color:var(--teal-l); box-shadow:var(--sh-sm); }
.sign-item > span{
  display:grid; place-items:center; flex:0 0 34px; height:34px;
  border-radius:50%; background:var(--teal); color:#fff;
  font-size:.8rem; font-weight:700; letter-spacing:.02em;
}
.sign-item p{ font-size:.94rem; line-height:1.5; color:var(--muted); }
.sign-item p strong{ color:var(--ink); font-weight:700; }
/* dentro de uma faixa escura os cartões acompanham o fundo */
.on-dark .sign-item{ background:rgba(255,255,255,.06); border-color:var(--line-dark); }
.on-dark .sign-item p{ color:var(--on-dark-soft); }
.on-dark .sign-item p strong{ color:#fff; }

/* --- "O que é investigado": foto à esquerda, texto e áreas à direita --- */
.investigation-grid{
  display:grid; gap:clamp(34px,5vw,64px);
  grid-template-columns:1fr; align-items:start;
}
.investigation-grid > *{ min-width:0; }
@media (min-width:900px){ .investigation-grid{ grid-template-columns:.85fr 1.15fr; } }
/* a ilustração é quadrada e cheia de rótulos: aparece inteira, sem corte */
.investigation-image{
  width:100%; height:auto; aspect-ratio:900/886; object-fit:contain;
  border-radius:24px; box-shadow:var(--sh-lg); background:var(--paper);
}
.areas-grid{
  display:grid; gap:14px; grid-template-columns:1fr;
  margin-top:clamp(24px,3vw,30px);
}
@media (min-width:560px){ .areas-grid{ grid-template-columns:1fr 1fr; } }
.area-card{
  padding:24px; border:1px solid var(--line-soft); border-radius:17px;
  background:var(--paper);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.area-card:hover{ transform:translateY(-3px); border-color:var(--teal-l); box-shadow:var(--sh-sm); }
.area-card span{ display:block; margin-bottom:12px; color:var(--teal); font-size:1.35rem; line-height:1; }
.area-card strong{ color:var(--ink); font-size:.95rem; font-weight:700; }

/* --- "O processo": quatro cartões numerados lado a lado --- */
.process-grid{
  display:grid; gap:18px; grid-template-columns:1fr;
  margin-top:clamp(38px,5vw,52px);
}
@media (min-width:640px){ .process-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .process-grid{ grid-template-columns:repeat(4,1fr); } }
.process-card{
  position:relative; min-width:0; padding:30px 24px;
  background:var(--paper); border-radius:18px;
  box-shadow:0 8px 25px rgba(13,34,55,.06);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.process-card:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.process-number{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-bottom:24px;
  border-radius:50%; background:var(--ink-900); color:#fff;
  font-size:.85rem; font-weight:700;
}
.process-card h3{ margin-bottom:12px; font-size:1.2rem; color:var(--ink-900); }
.process-card p{ font-size:.9rem; line-height:1.6; color:var(--muted); }
/* em faixa escura os cartões do processo continuam claros, como no arquivo */
.on-dark .process-card h3{ color:var(--ink-900); }

/* --- "Quem conduz": credenciais em lista com check, como no arquivo --- */
.credential-list{ display:grid; gap:12px; margin:28px 0; list-style:none; }
.credential-list li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.94rem; line-height:1.45; color:var(--on-dark);
}
.credential-list li::before{ content:'✓'; flex:none; color:var(--teal-l); font-weight:700; }

/* --- Dúvidas: lista única, sem cartões, separada por linhas --- */
.faq-list{ max-width:850px; margin:clamp(30px,4vw,44px) auto 0; }
.faq-list details{
  border:0; border-bottom:1px solid var(--line); border-radius:0; background:none;
}
.faq-list details[open]{ border-color:var(--line); box-shadow:none; }
/* no arquivo a pergunta é DM Sans em negrito, não a fonte dos títulos */
.faq-list summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:23px 0; cursor:pointer; list-style:none;
  font-family:var(--sans); font-weight:700; font-size:1rem; letter-spacing:0;
  color:var(--ink-900);
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::before, .faq-list summary::after{ content:none; }
.faq-list summary h3{ font:inherit; letter-spacing:inherit; color:inherit; display:inline; margin:0; }
.faq-list summary em{
  flex:none; width:auto; height:auto; background:none; border-radius:0;
  color:var(--teal); font-style:normal; font-size:1.5rem; line-height:1;
  transition:transform .25s var(--ease);
}
.faq-list summary em::before{ content:'+'; }
.faq-list details[open] summary em{ transform:rotate(45deg); background:none; }
.faq-list .a{ padding:0 40px 23px 0; font-size:.95rem; line-height:1.6; color:var(--muted); }

/* --- Contato: bloco central, como o "Próximo passo" do arquivo --- */
.cta-center{ max-width:780px; margin-inline:auto; text-align:center; }
.cta-center h2{ margin-top:16px; text-wrap:balance; }
.cta-center .lead{ margin:18px auto 0; max-width:610px; }
.cta-center .cta-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:32px; }
/* =========================================================================
   AVALIAÇÕES DO GOOGLE — cartões com os depoimentos públicos do perfil
   ========================================================================= */
.g-logo.mid{ justify-content:center; margin:20px auto 0; }

/* galeria: três avaliações por vez, rolando para o lado */
.reviews-wrap{ position:relative; margin-top:clamp(34px,4vw,46px); }
.reviews{
  display:flex; gap:16px; align-items:stretch;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 4px 14px; margin:-6px -4px -14px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.reviews::-webkit-scrollbar{ display:none; }
.review{ flex:0 0 calc((100% - 32px) / 3); scroll-snap-align:start; }
@media (max-width:1039px){ .review{ flex-basis:calc((100% - 16px) / 2); } }
@media (max-width:699px){ .review{ flex-basis:88%; } }

/* setas — ficam fora da faixa no desktop e sobre ela nas telas menores */
.rev-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--line-dark); border-radius:50%;
  background:var(--paper); color:var(--ink-900); cursor:pointer;
  box-shadow:var(--sh-sm); transition:background .2s, color .2s, opacity .25s, transform .2s;
}
.rev-nav svg{ width:22px; height:22px; }
.rev-nav:hover{ background:var(--teal); color:#fff; border-color:var(--teal); }
/* nas telas largas as setas ficam fora dos cartões; nas médias elas
   encostam na borda da faixa, porque não há margem sobrando */
.rev-prev{ left:2px; }
.rev-next{ right:2px; }
.rev-nav[disabled]{ opacity:.28; pointer-events:none; }
@media (min-width:1280px){
  .rev-prev{ left:-58px; }
  .rev-next{ right:-58px; }
}
/* sem JS ou em tela de toque a faixa continua rolando com o dedo */
@media (max-width:699px){ .rev-nav{ display:none; } }

.review{
  min-width:0; padding:24px;
  background:var(--paper); color:var(--ink);
  border-radius:18px; box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.review:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.review header{ display:flex; align-items:center; gap:12px; }
.review-av{
  flex:none; display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; background:var(--teal); color:#fff;
  font-weight:700; font-size:1rem; line-height:1;
}
.review:nth-child(3n+2) .review-av{ background:var(--forest); }
.review:nth-child(3n)   .review-av{ background:var(--slate); }
.review-id{ min-width:0; }
.review-id b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:.94rem; line-height:1.2; color:var(--ink-900);
}
.review-when{ display:block; margin-top:3px; font-size:.75rem; color:var(--faint); }
.review .g-stars{ display:flex; gap:2px; margin-top:14px; }
.review .g-stars svg{ width:16px; height:16px; color:#F5B400; }
.review p{ margin-top:12px; font-size:.9rem; line-height:1.6; color:var(--muted); }
.review-cut{ color:var(--teal-d); font-weight:600; }

.g-actions{ margin-top:clamp(32px,4vw,44px); text-align:center; }
.g-invite{
  max-width:70ch; margin:22px auto 0; text-align:center;
  font-size:.85rem; line-height:1.6; color:var(--on-dark-soft);
}