/* ==========================================================================
   /clinica/terapia-aba/: Terapia ABA e intervenção precoce.

   A folha é a linguagem A v2 aprovada (paleta creme/malva/verde-água, cartões
   de contorno 2px, hachura diagonal, placa escura derivada do #33262E),
   herdada de prototipos/clinica-a/estilo-a.css sem redesenho: só saiu o que
   esta página não usa (o scrollytelling preso do hub e o rodapé de protótipo)
   e entrou o que é dela (percurso, placa da intervenção precoce, rodapé).

   Autocontida de propósito: a página não depende de CSS de outra pasta.

   Referência de direção herdada do protótipo A, "editorial ilustrado".
   Referência de linguagem: sebastian-wittig.design (fundo creme com textura
   diagonal, uma ilustração flat grande por seção, display gigante com uma
   palavra na cor de destaque, micro-detalhes desenhados à mão).

   Aqui o amarelo da referência vira a paleta do Lab: malva de destaque,
   verde-água de apoio, areia como neutro quente, traço em marrom-tinta.

   Autocontido: só depende das fontes de /fonts e das imagens de /img.
   ========================================================================== */

@font-face { font-family: Montserrat; src: url(/fonts/montserrat-300.woff2) format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Montserrat; src: url(/fonts/montserrat-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Montserrat; src: url(/fonts/montserrat-600.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Montserrat; src: url(/fonts/montserrat-700.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* O 800 entra só para o display da placa escura: caixa alta em corpo grande
   pede uma haste mais grossa que o 700 para não parecer que murchou. Subset
   latin do Google Fonts, baixado uma vez e servido de /fonts. */
@font-face { font-family: Montserrat; src: url(/fonts/montserrat-800.woff2) format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Creme quente. O #FDFBF8 do site é quase branco e não sustenta a
     linguagem da referência, então o protótipo puxa o fundo para o creme
     e mantém a família de tintas da marca por cima. */
  --creme: #F7F2E8;
  --creme-alto: #FCF8F1;
  --creme-fundo: #F1E9DA;
  --areia: #E6D9C2;

  --malva: #AB7E9D;          /* formas grandes, decorativo */
  --malva-forte: #8E5A79;    /* texto de destaque, 4.9:1 no creme */
  --malva-escuro: #6B3F58;   /* links e botão primário, 7.7:1 */
  --malva-veu: #EEDFE9;
  --malva-claro: #C99DBC;    /* destaque sobre o escuro, 5.7:1 */
  /* O olho é maiúscula de 12px, então vale o piso de texto pequeno. Sobre o
     brilho creme da placa escura o --malva-claro caía para 4,37:1 medido, e
     este tom sobe o pior caso para 5,4:1 sem sair da família. */
  --malva-alto: #D9B4CD;

  --agua: #A4D6D5;
  --agua-tinta: #1F5C5A;
  --agua-veu: #E6F2F1;

  --traco: #3B2C2E;          /* marrom-tinta escuro: contorno das ilustrações */
  --tinta: #33262E;
  --tinta-2: #5B4A54;        /* 7.4:1 no creme */
  --borda: #E2D8CB;

  /* ------------------------- As placas escuras ---------------------------
     Duas na página: o destaque da intervenção precoce e a chamada final.
     Mesma tinta, mesma
     textura, mesmos brilhos, para o ritmo claro/escuro/claro/escuro ler como
     decisão e não como remendo. Toda a família desce do #33262E da marca com
     a saturação mantida: é escuro quente, nunca preto puro, nunca vermelho.
     Contrastes medidos por pixel estão no relatório da fase. */
  --escuro: #2A1F26;             /* canvas das duas placas */
  --escuro-cartao: #372932;      /* cartão apagado */
  --escuro-cartao-vivo: #45333D; /* cartão aceso */
  --escuro-texto: #EFE4EA;       /* 12,8:1 no canvas */
  --escuro-texto-2: #C8B7C1;     /*  7,1:1 no cartão apagado */
  --escuro-borda: rgba(247, 242, 232, .17);
  --escuro-borda-viva: rgba(201, 157, 188, .55);
  --brilho: linear-gradient(96deg, var(--creme-alto) 0%, var(--malva-claro) 48%, var(--agua) 100%);

  --raio: 22px;
  --raio-p: 14px;
  --largura: 1200px;
  --meia-largura: 600px;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --sombra: 0 14px 34px rgba(59, 44, 46, .09);
  --sombra-alta: 0 26px 56px rgba(59, 44, 46, .16);

  /* Escala tipográfica do protótipo. Os máximos de display estão calibrados
     para a palavra mais longa da headline caber na coluna em 360px. */
  --t-display: clamp(2.85rem, 9.6vw, 7rem);
  --t-titulo: clamp(1.9rem, 5.4vw, 3.5rem);
  --t-lead: clamp(1.06rem, 1.9vw, 1.4rem);
  --t-corpo: clamp(1rem, 1.2vw, 1.08rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--tinta);
  font: 400 var(--t-corpo)/1.65 Montserrat, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* Textura da referência: hachura diagonal de 1px sobre um creme que esquenta
     nos primeiros 900px. Sem background-attachment: fixed de propósito, porque
     ele repete a cada altura de viewport e deixa emenda no print de página
     inteira, que é justamente o que o dono vai olhar. */
  background:
    repeating-linear-gradient(45deg, rgba(59, 44, 46, .04) 0 1px, transparent 1px 10px),
    linear-gradient(176deg, var(--creme-alto) 0, var(--creme) 900px) no-repeat,
    var(--creme);
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--malva-escuro); }

:focus-visible {
  outline: 3px solid var(--malva-forte);
  outline-offset: 3px;
  border-radius: 4px;
}

.faixa { width: min(100% - 40px, var(--largura)); margin-inline: auto; }

.pular {
  position: absolute; left: 16px; top: 0; z-index: 60;
  background: var(--malva-escuro); color: #fff; padding: 14px 20px;
  border-radius: 0 0 var(--raio-p) var(--raio-p);
  font-weight: 600; text-decoration: none;
  /* Sai de cena por transform, e não por `top`: posição anima layout a cada
     quadro, e a regra é transform/opacity só. */
  transform: translateY(-140%);
  transition: transform 220ms var(--curva);
}
.pular:focus { transform: none; }

/* Trilhos verticais do fundo, o detalhe de grid da referência. Só entram
   quando sobra coluna dos dois lados. */
.trilhos { display: none; }
@media (min-width: 1320px) {
  .trilhos { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .trilhos span { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(59, 44, 46, .09); }
  .trilhos span:first-child { left: calc(50% - var(--meia-largura) - 60px); }
  .trilhos span:last-child { right: calc(50% - var(--meia-largura) - 60px); }
}

.topo, main, .rodape { position: relative; z-index: 1; }

/* ============================= Cabeçalho ================================= */

.topo {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 245, 237, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}

.topo-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 72px;
}

.marca {
  display: inline-flex; align-items: center; gap: 11px;
  min-width: 44px; min-height: 44px;
  text-decoration: none; color: inherit;
}
.marca img { width: 42px; }
.marca-texto { font-size: 14px; line-height: 1.18; color: var(--tinta-2); max-width: 130px; }
.marca-texto b { display: block; font-weight: 700; color: var(--tinta); }

.topo-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.topo-nav::-webkit-scrollbar { display: none; }
.topo-nav a {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--tinta-2); text-decoration: none;
  transition: background-color 200ms var(--curva), color 200ms var(--curva),
              box-shadow 200ms var(--curva);
}
.topo-nav a:hover { background: var(--malva-veu); color: var(--malva-escuro); }
/* Seção em que o leitor está. O contorno de 2px é o mesmo dos cartões da
   página, então o estado atual não se confunde com o véu malva do hover nem
   com o botão de WhatsApp ao lado. Quem marca é o JS, com aria-current. */
.topo-nav a[aria-current] {
  color: var(--traco); background: var(--creme-alto);
  box-shadow: inset 0 0 0 2px var(--traco);
}
.topo-nav a[aria-current]:hover { color: var(--malva-escuro); background: var(--malva-veu); }

@media (max-width: 719px) {
  .topo-linha { flex-wrap: wrap; padding-block: 10px; row-gap: 4px; }
  .topo-nav { order: 3; width: 100%; margin-inline: -4px; padding-inline: 4px; }
  .marca-texto { display: none; }
}

/* ============================== Botões =================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px; border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform 220ms var(--curva), box-shadow 220ms var(--curva),
              background-color 220ms var(--curva), color 220ms var(--curva);
}
.btn .ico { flex: none; }

.btn-primario { background: var(--malva-escuro); color: #fff; box-shadow: var(--sombra); }
.btn-primario:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }

.btn-vazado { background: transparent; color: var(--tinta); border: 2px solid var(--traco); }
.btn-vazado:hover { transform: translateY(-3px); background: var(--traco); color: var(--creme-alto); }

.btn-claro { background: var(--creme-alto); color: var(--traco); box-shadow: var(--sombra-alta); }
.btn-claro:hover { transform: translateY(-3px); background: #fff; }

.btn-mini {
  min-height: 44px; padding: 10px 18px; font-size: 14px;
  background: var(--malva-escuro); color: #fff;
}
.btn-mini:hover { transform: translateY(-2px); background: var(--malva-forte); }

.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.acoes-centro { justify-content: center; }
@media (max-width: 619px) {
  .acoes:not(.acoes-centro) .btn { flex: 1 1 100%; }
}

/* ============================ Tipografia ================================= */

.olho {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--malva-forte); margin-bottom: 18px;
}
.olho-claro { color: var(--malva-alto); }

/* line-height abaixo de 1 faz a maiúscula transbordar a caixa da linha para
   cima, e o transbordo cresce junto com o corpo. Daí o padding-top em em:
   ele acompanha o tamanho e o olho nunca fica atrás do título. */
.display {
  font-size: var(--t-display);
  font-weight: 700; line-height: .95; letter-spacing: -.035em;
  color: var(--traco);
  padding-top: .16em;
}
.display-linha { display: block; }
.display-pe {
  display: block; margin-top: clamp(10px, 1.3vw, 20px);
  font-size: clamp(.95rem, 2.3vw, 1.8rem);
  font-weight: 600; letter-spacing: .01em; line-height: 1.3;
  color: var(--tinta-2);
}

.titulo {
  font-size: var(--t-titulo);
  font-weight: 700; line-height: 1.05; letter-spacing: -.028em;
  color: var(--traco);
  text-wrap: balance;
  padding-top: .1em;
  margin-bottom: 26px;
}
.titulo + .prosa, .titulo + .lead { margin-top: 0; }

/* Palavra destacada + rabisco de sublinhado desenhado em SVG. */
.destaque {
  position: relative; display: inline-block;
  font-style: normal; color: var(--malva-forte);
}
.destaque-claro { color: var(--malva-claro); }
.rabisco {
  position: absolute; left: 0; bottom: -.1em;
  width: 100%; height: .16em; overflow: visible;
  fill: none; stroke: var(--malva);
  stroke-width: clamp(2px, .055em, 7px);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.lead {
  font-size: var(--t-lead); font-weight: 300; line-height: 1.55;
  color: var(--tinta); max-width: 56ch;
}
.lead-claro { color: var(--creme); }

.prosa { display: grid; gap: 18px; max-width: 60ch; margin-top: 26px; }
.prosa p { color: var(--tinta); }
.prosa i { color: var(--tinta-2); }

.fonte {
  margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--borda);
  font-size: 13px; color: var(--tinta-2);
  /* Sem teto a nota esticava até os 1200px da faixa: 163 caracteres por
     linha em 1440, contra os 45 a 75 que se lê sem perder a linha. */
  max-width: 50ch;
}
/* O link mora no meio da frase, então continua inline: inline-block não
   quebra junto com o texto e joga o ponto final sozinho na linha de baixo.
   O padding vertical estica a área de toque para 44px sem abrir buraco
   entre as linhas do parágrafo. */
.fonte a { padding-block: 14px; transition: color 200ms var(--curva); }
.fonte a:hover { color: var(--malva-forte); }

/* =========================== Ilustrações ================================= */

.il { width: 100%; height: auto; display: block; overflow: visible; }

.il-malva { fill: var(--malva); }
.il-malva-veu { fill: var(--malva-veu); }
.il-agua { fill: var(--agua); }
.il-agua-veu { fill: var(--agua-veu); }
.il-areia { fill: var(--areia); }
.il-creme { fill: var(--creme-alto); }
.il-solido { fill: var(--traco); }

.il-traco,
.il-traco-fino,
.il-tracejado {
  fill: none; stroke: var(--traco);
  stroke-linecap: round; stroke-linejoin: round;
}
.il-traco { stroke-width: 7; }
.il-traco-fino { stroke-width: 5; }
.il-tracejado { stroke-width: 5; stroke-dasharray: 2 18; stroke: var(--malva-forte); }

.il-ponto { fill: var(--malva-forte); stroke: var(--traco); stroke-width: 5; }

/* Setinha curva à mão, do texto para o selo. */
.seta-curva {
  width: 84px; height: auto; overflow: visible;
  fill: none; stroke: var(--malva-forte);
  stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(6deg);
}

.ico {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* =============================== Hero ==================================== */

.hero { padding-block: clamp(36px, 6vw, 76px) clamp(64px, 9vw, 120px); overflow: clip; }
.hero-caixa { position: relative; }

.hero-arte { width: min(100%, 560px); margin-inline: auto; }

.hero-pe { display: grid; gap: 34px; margin-top: 34px; }

.selo {
  position: relative;
  background: var(--creme-alto);
  border: 2px solid var(--traco);
  border-radius: var(--raio);
  padding: 22px 24px;
  font-size: 1rem; line-height: 1.5; color: var(--tinta);
  box-shadow: var(--sombra);
  transform: rotate(-1.6deg);
  max-width: 340px;
}
.selo b { display: block; font-weight: 700; color: var(--traco); margin-bottom: 6px; }
/* Padding com margem negativa: o link vira alvo de 44px sem esticar a linha. */
.selo a { display: inline-block; font-weight: 600; padding: 12px 4px; margin: -12px 0; }
.hero-selo { display: flex; align-items: flex-start; gap: 6px; }

@media (min-width: 900px) {
  /* Mesmo padrão aprovado no hub: hero em duas colunas, título e subtítulo
     na primeira dobra, arte encaixada à direita. Mobile segue a pilha. */
  .hero { padding-block: 22px clamp(56px, 7vw, 96px); }
  .hero-caixa {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-areas:
      "olho olho"
      "titulo arte"
      "pe pe";
    column-gap: clamp(32px, 4vw, 64px);
    align-items: center;
  }
  .hero .olho { grid-area: olho; margin-bottom: 6px; }
  .hero .display { grid-area: titulo; margin-top: 0; font-size: clamp(2.85rem, 4.6vw, 4.35rem); }
  .hero-arte {
    grid-area: arte;
    width: min(100%, 380px);
    margin: 0 0 0 auto;
  }
  .hero-pe {
    grid-area: pe;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    align-items: start; gap: 48px; margin-top: 26px;
  }
  .hero-selo { justify-content: flex-end; padding-top: 8px; }
  .seta-curva { margin-top: 26px; }
}
@media (max-width: 899px) {
  .seta-curva { display: none; }
  .selo { transform: rotate(-1.2deg); max-width: none; }
}

/* ============================== Seções =================================== */

.secao { padding-block: clamp(72px, 10vw, 150px); overflow: clip; }
.secao-espaco { background: linear-gradient(180deg, transparent, var(--malva-veu) 40%, transparent); }

/* O topo é pegajoso, então o alvo de toda âncora precisa parar abaixo dele,
   senão o título do destino nasce escondido atrás da barra. */
section[id] { scroll-margin-top: 92px; }

.cabeca { max-width: 62ch; margin-bottom: clamp(44px, 6vw, 72px); }

/* start em vez de center: com colunas de altura diferente, o center jogava a
   foto pro meio e deixava um vão enorme acima dela (bronca do Jair 08/08). */
.dupla { display: grid; gap: clamp(38px, 5vw, 64px); align-items: start; }
.dupla .foto { position: sticky; top: 96px; }
@media (min-width: 900px) {
  .dupla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dupla-larga { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .dupla-invertida .dupla-arte,
  .dupla-invertida .foto { order: -1; }
}
.dupla-arte { width: min(100%, 540px); margin-inline: auto; }
@media (min-width: 900px) { .dupla-arte { width: 100%; } }

/* Ilustração vazando da coluna, como na referência. */
@media (min-width: 1100px) {
  .dupla:not(.dupla-invertida) .dupla-arte { margin-right: -110px; width: calc(100% + 110px); }
  .dupla-invertida .dupla-arte { margin-left: -110px; width: calc(100% + 110px); }
}

/* ---------------------------- Blocos 01/02/03 --------------------------- */

.blocos {
  display: grid; gap: clamp(26px, 3vw, 40px);
  margin-top: clamp(56px, 7vw, 90px);
}
@media (min-width: 780px) { .blocos { grid-template-columns: repeat(3, 1fr); } }

.bloco { padding-top: 26px; border-top: 3px solid var(--traco); }
.bloco-marca {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .16em;
  color: var(--malva-forte); margin-bottom: 14px;
}
.bloco-titulo {
  font-size: clamp(1.12rem, 1.7vw, 1.32rem); font-weight: 700; line-height: 1.2;
  letter-spacing: -.015em; color: var(--traco); margin-bottom: 12px;
}
.bloco-texto { color: var(--tinta); font-size: 1rem; }

/* =========================== As placas escuras ===========================
   Um único tratamento para as duas seções escuras da página. A hachura é a
   MESMA do creme (45deg, 1px a cada 10px), só que em creme sobre a tinta:
   a textura atravessa a emenda entre as seções e é ela que costura o claro
   ao escuro. Os brilhos entram por --brilho-placa, que cada seção posiciona
   do seu jeito, para as duas placas não parecerem a mesma imagem repetida. */

.escuro {
  position: relative;
  background: var(--escuro);
  color: var(--escuro-texto);
}
.escuro::before,
.escuro::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.escuro::before { background: var(--brilho-placa, none); }
.escuro::after {
  background: repeating-linear-gradient(45deg, rgba(247, 242, 232, .05) 0 1px, transparent 1px 10px);
}
.escuro > * { position: relative; z-index: 1; }

/* Os trilhos verticais do fundo são tinta escura e somem em cima da placa:
   o detalhe de grade da página morria justamente nas duas seções escuras.
   Aqui eles voltam em creme, nas mesmas duas colunas e a partir da mesma
   largura, então a linha atravessa a emenda sem interrupção. */
@media (min-width: 1320px) {
  .escuro::after {
    background:
      linear-gradient(rgba(247, 242, 232, .13) 0 100%) calc(50% - var(--meia-largura) - 60px) 0 / 1px 100% no-repeat,
      linear-gradient(rgba(247, 242, 232, .13) 0 100%) calc(50% + var(--meia-largura) + 60px) 0 / 1px 100% no-repeat,
      repeating-linear-gradient(45deg, rgba(247, 242, 232, .05) 0 1px, transparent 1px 10px);
  }
}

/* ------------------------ Cartões de diferencial ------------------------ */

/* Aqui os cartões vêm soltos abaixo da dupla foto/texto, e não ao lado de uma
   ilustração como no hub: a foto da sala já é a arte da seção. */
.dupla + .cartoes { margin-top: clamp(56px, 7vw, 90px); }

.cartoes { display: grid; gap: 22px; perspective: 900px; }
@media (min-width: 620px) { .cartoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .cartoes > :nth-child(even) { margin-top: 38px; }  /* grid solto */
}

.cartao {
  background: var(--creme-alto);
  border: 2px solid var(--traco);
  border-radius: var(--raio);
  padding: 28px 26px 30px;
  transform: translateY(0) rotate(0deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 300ms var(--curva), box-shadow 300ms var(--curva),
              background-color 300ms var(--curva);
}
.cartao:hover {
  transform: translateY(-8px) rotate(-1.1deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: var(--sombra-alta);
  background: #fff;
}

.cartao-selo {
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--malva-veu); color: var(--malva-escuro);
  border: 2px solid var(--traco);
  margin-bottom: 22px;
  transition: transform 300ms var(--curva), background-color 300ms var(--curva);
}
.cartao-selo-agua { background: var(--agua-veu); color: var(--agua-tinta); }
.cartao:hover .cartao-selo { transform: rotate(-8deg) scale(1.08); background: var(--malva); color: #fff; }
.cartao:hover .cartao-selo-agua { background: var(--agua); color: var(--traco); }

.cartao-titulo {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem); font-weight: 700; line-height: 1.22;
  letter-spacing: -.015em; color: var(--traco); margin-bottom: 10px;
}
.cartao-texto { color: var(--tinta); font-size: 1rem; }

/* ------------------------------- Foto ----------------------------------- */

.foto { margin: 0; width: min(100%, 560px); margin-inline: auto; }
.foto-moldura { position: relative; }
.foto-moldura::before {
  content: ''; position: absolute; inset: 22px -20px -6px 20px;
  background: var(--malva-veu);
  border: 2px solid var(--traco);
  border-radius: clamp(48px, 11vw, 130px) 24px clamp(48px, 11vw, 130px) 24px;
  transform: rotate(2deg);
}
.foto img {
  position: relative;
  width: 100%;
  border: 2px solid var(--traco);
  border-radius: clamp(48px, 11vw, 130px) 24px clamp(48px, 11vw, 130px) 24px;
  box-shadow: var(--sombra);
}
.foto figcaption {
  position: relative; margin-top: 20px;
  font-size: 14px; color: var(--tinta-2); line-height: 1.45;
}
.foto figcaption b { display: block; font-weight: 700; color: var(--traco); }

/* ------------------------------- Fatos ---------------------------------- */

.fatos { display: grid; gap: 22px; margin-top: 36px; }
.fato { display: flex; align-items: flex-start; gap: 18px; }
.fato-num {
  flex: none; min-width: 74px;
  font-size: clamp(2.1rem, 4.4vw, 3rem); font-weight: 700; line-height: .95;
  letter-spacing: -.04em; color: var(--malva-forte);
  font-variant-numeric: tabular-nums;
}
.fato-marca {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--creme-alto); border: 2px solid var(--traco); color: var(--traco);
}
.fato-texto { color: var(--tinta); font-size: 1rem; padding-top: 4px; }

/* =============================== Dúvidas ================================= */

.duvidas {
  display: grid; gap: 14px;
  max-width: 78ch;
  margin-top: clamp(38px, 5vw, 56px);
}

.duvida {
  border: 2px solid var(--traco);
  border-radius: var(--raio);
  background: var(--creme-alto);
  transition: background-color 260ms var(--curva), box-shadow 260ms var(--curva);
}
.duvida[open] { background: #fff; box-shadow: var(--sombra); }

.duvida-p {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 60px; padding: 16px 22px;
  font-size: clamp(1rem, 1.4vw, 1.1rem); font-weight: 700; line-height: 1.3;
  letter-spacing: -.012em; color: var(--traco);
  cursor: pointer;
  list-style: none;                 /* tira o triângulo padrão */
  transition: color 200ms var(--curva);
}
.duvida-p::-webkit-details-marker { display: none; }
.duvida-p:hover { color: var(--malva-escuro); }
.duvida:focus-within { border-color: var(--malva-forte); }

.duvida-marca {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--traco); color: var(--traco);
  transition: transform 260ms var(--curva), background-color 260ms var(--curva),
              color 260ms var(--curva);
}
.duvida[open] .duvida-marca {
  transform: rotate(135deg);        /* o mais vira x sem trocar de desenho */
  background: var(--malva-forte); color: #fff; border-color: var(--malva-forte);
}

.duvida-r { padding: 0 22px 24px; }
.duvida-r p { color: var(--tinta); font-size: 1rem; max-width: 50ch; }

/* ================================ CTA ==================================== */

.cta {
  /* Mesma tinta e mesma textura da placa da intervenção precoce; só os brilhos
     mudam de posição, porque aqui o texto é centralizado. */
  --brilho-placa:
    radial-gradient(50% 60% at 50% 0%, rgba(171, 126, 157, .24), transparent 72%),
    radial-gradient(40% 50% at 8% 96%, rgba(164, 214, 213, .12), transparent 70%),
    radial-gradient(40% 50% at 92% 96%, rgba(252, 248, 241, .09), transparent 70%);
  padding-block: clamp(76px, 11vw, 150px);
  overflow: clip;
}
.cta-caixa { text-align: center; display: grid; justify-items: center; }
.display-cta { color: var(--creme); max-width: 16ch; }
.cta .lead { margin-top: 26px; }
.cta-nota { margin-top: 14px; font-size: 14px; color: var(--areia); }
/* Padding com margem negativa: o link vira alvo de 44px sem abrir buraco na
   linha do parágrafo. */
.cta-nota a {
  display: inline-block; color: var(--creme);
  padding: 12px 10px; margin: -12px 0;
}

/* ======================== Migalhas de pão ================================
   Caminho de volta ao hub, logo abaixo do topo pegajoso. É <nav>, e o item
   atual não é link: o usuário já está nele. */

.migalhas { padding-top: 18px; font-size: 13px; color: var(--tinta-2); }
.migalhas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.migalhas li { display: flex; align-items: center; gap: 8px; }
.migalhas li + li::before { content: '/'; color: var(--areia); }
/* Padding com margem negativa: alvo de 44px no toque sem a migalha comer
   altura da primeira dobra. */
.migalhas a {
  display: inline-block; padding: 13px 4px; margin: -13px -4px;
  transition: color 200ms var(--curva);
}
.migalhas a:hover { color: var(--malva-forte); }
.migalhas [aria-current] { color: var(--tinta); font-weight: 600; }

/* ================ Placa escura da intervenção precoce ====================
   A primeira das duas placas. Formato de argumento, não de percurso: o texto
   grande à esquerda sustenta o porquê, e os três cartões à direita dizem em
   que isso se traduz na vida da criança. Mesma tinta e mesma hachura da
   chamada final, brilhos em outra posição. */

.secao-cedo {
  --brilho-placa:
    radial-gradient(56% 48% at 4% 6%, rgba(252, 248, 241, .10), transparent 70%),
    radial-gradient(52% 46% at 98% 30%, rgba(171, 126, 157, .22), transparent 72%),
    radial-gradient(46% 42% at 70% 104%, rgba(164, 214, 213, .13), transparent 70%);
  padding-block: clamp(72px, 10vw, 140px);
  overflow: clip;
}

.cedo-grade { display: grid; gap: 44px; }
@media (min-width: 980px) {
  .cedo-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: 64px; align-items: start;
  }
}

.display-cedo {
  font-size: clamp(2.15rem, 5.6vw, 4.1rem);
  font-weight: 800;                 /* mesmo peso das placas escuras do A v2 */
  text-transform: uppercase;
  letter-spacing: -.03em; line-height: .94;
  color: var(--creme-alto);
  max-width: 15ch;
  padding-top: .12em;
}
.cedo-texto {
  display: grid; gap: 18px;
  margin-top: 24px; max-width: 44ch;
  font-size: var(--t-lead); font-weight: 300; line-height: 1.55;
  color: var(--escuro-texto);
}

/* Recado do laudo: é a objeção que mais trava a primeira mensagem, então ele
   não pode virar mais um parágrafo no meio da pilha. */
.nota-clara {
  margin-top: 28px; padding: 20px 22px;
  border: 2px solid var(--escuro-borda-viva);
  border-radius: var(--raio);
  background: rgba(247, 242, 232, .06);
  font-size: 1rem; line-height: 1.55; color: var(--escuro-texto);
  max-width: 46ch;
}
.nota-clara b { color: var(--creme-alto); }

.cedo-pontos { display: grid; gap: 16px; }
.ponto {
  padding: 24px 24px 26px;
  border: 2px solid var(--escuro-borda);
  border-radius: var(--raio);
  background: var(--escuro-cartao);
}
.ponto-marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--raio-p);
  margin-bottom: 18px;
  color: var(--escuro); background: var(--brilho);
}
.ponto-titulo {
  font-size: clamp(1.08rem, 1.8vw, 1.28rem); font-weight: 700;
  letter-spacing: -.02em; color: var(--creme-alto); margin-bottom: 10px;
}
.ponto-texto { color: var(--escuro-texto-2); font-size: 1rem; }

/* ============================== Percurso =================================
   As cinco etapas, em claro. O hub é que fica com o scrollytelling preso da
   A v2; aqui a mesma informação vira uma linha do tempo com o selo numerado
   fora do cartão, ligado pela trilha tracejada. Sem sticky, sem JS: numa
   página de serviço a família lê de cima a baixo e volta para conferir. */

/* 62ch no trilho, e nao 50ch so no paragrafo: assim a borda do cartao
   acompanha o texto. Dentro do cartao a linha fica em torno de 72
   caracteres, dentro dos 45 a 75 da regra. */
.percurso { position: relative; display: grid; gap: 18px; max-width: 62ch; margin-top: clamp(40px, 5vw, 60px); }

.passo { position: relative; display: grid; gap: 16px; }
.passo-selo {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--malva-veu); color: var(--malva-escuro);
  border: 2px solid var(--traco);
  font-size: 17px; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.passo-corpo {
  background: var(--creme-alto);
  border: 2px solid var(--traco);
  border-radius: var(--raio);
  padding: 26px 24px 28px;
  box-shadow: var(--sombra);
}
.passo-titulo {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem); font-weight: 700; line-height: 1.22;
  letter-spacing: -.018em; color: var(--traco); margin-bottom: 12px;
}
.passo-texto { color: var(--tinta); font-size: 1rem; }
.passo-texto + .passo-texto { margin-top: 12px; }

@media (min-width: 760px) {
  .percurso { gap: 24px; }
  .passo { grid-template-columns: 62px minmax(0, 1fr); gap: 24px; align-items: start; }
  /* A trilha nasce no centro do primeiro selo e morre no do último, senão
     ela sobra por fora da lista nas duas pontas. */
  .percurso::before {
    content: ''; position: absolute; z-index: 0;
    left: 30px; top: 31px; bottom: 31px; width: 2px;
    background: repeating-linear-gradient(var(--areia) 0 8px, transparent 8px 18px);
  }
  .passo-selo { margin-top: 0; }
}

/* ========================= Serviços irmãos ===============================
   Os outros atendimentos da clínica, no fim da seção de equipe. Linha de
   pílulas, para não competir com os cartões de cima. */

.irmas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.irmas a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 18px; border-radius: 999px;
  border: 2px solid var(--traco); background: var(--creme-alto);
  font-size: 14px; font-weight: 600; color: var(--tinta); text-decoration: none;
  transition: background-color 200ms var(--curva), color 200ms var(--curva);
}
.irmas a:hover { background: var(--malva-veu); color: var(--malva-escuro); }

/* ============================== Rodapé ==================================== */

.rodape {
  position: relative; z-index: 1;
  border-top: 2px solid var(--traco);
  background: var(--creme-alto);
  padding-block: clamp(48px, 6vw, 72px) 0;
}

.rodape-grade { display: grid; gap: clamp(32px, 4vw, 48px); }
@media (min-width: 760px) { .rodape-grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .rodape-grade { grid-template-columns: 1.25fr 1fr 1.05fr .95fr; } }

.rodape-logo { width: 52px; margin-bottom: 14px; }
.rodape-nome { font-weight: 700; color: var(--traco); margin-bottom: 8px; }
.rodape-texto { font-size: 1rem; color: var(--tinta-2); max-width: 34ch; }

.rodape-titulo {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--malva-forte); margin-bottom: 14px;
}
/* Alvo de 44px de altura (padding de 10px sobre a linha de 24,8px) e 8px de
   respiro entre vizinhos, o piso da skill para lista de links no toque. */
.rodape-lista { display: grid; gap: 8px; font-size: 1rem; }
.rodape-lista a {
  display: inline-block; padding: 10px 0; text-decoration: none;
  color: var(--tinta);
  transition: color 200ms var(--curva);
}
.rodape-lista a:hover { color: var(--malva-escuro); text-decoration: underline; }

.rodape-endereco {
  font-style: normal;
  font-size: 1rem; line-height: 1.55; color: var(--tinta-2);
}
/* Padding com margem negativa: o telefone vira alvo de 44px sem esticar o
   bloco de endereço. */
.rodape-endereco a {
  display: inline-block; padding-block: 11px; margin-block: -11px;
  transition: color 200ms var(--curva);
}
.rodape-endereco a:hover { color: var(--malva-forte); }
.rodape-horario { margin-top: 10px; font-size: 1rem; color: var(--tinta-2); }
.rodape-cta { margin-top: 18px; font-size: 13.5px; padding: 9px 16px; min-height: 44px; }
.rodape-mapa-link {
  display: inline-flex; align-items: center; gap: 7px;
  /* min-height dá o alvo de 44px; o margin-top encolhe porque a altura nova
     já traz o respiro que o 14px anterior dava. */
  min-height: 44px; margin-top: 4px;
  font-size: 1rem; font-weight: 700;
  color: var(--malva-forte); text-decoration: none;
  transition: color 200ms var(--curva);
}
.rodape-mapa-link:hover { color: var(--malva-escuro); text-decoration: underline; }
.rodape-topo {
  display: inline-flex; align-items: center; gap: 7px;
  /* Alvo de 44px; a margem negativa devolve a altura para a barra final não
     engordar por causa dele. */
  min-height: 44px; margin-block: -11px;
  color: var(--tinta); text-decoration: none; font-weight: 600;
  transition: color 200ms var(--curva);
}
.rodape-topo:hover { color: var(--malva-escuro); }

/* Nota legal da página (não é cura), acima da barra final. */
.rodape-fim {
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: 22px; border-top: 1px solid var(--borda);
  font-size: 13px; color: var(--tinta-2); max-width: 50ch;
}

.rodape-base {
  margin-top: clamp(36px, 5vw, 56px);
  padding-block: 22px;
  border-top: 1px solid var(--borda);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--tinta-2);
}

/* A linha de CNPJ e a unica prosa sem teto da pagina: em 1440 ela chegava a
   100 caracteres por linha. 50ch a prende em torno de 70. */
.rodape-base p { max-width: 50ch; }

/* Texto que só o leitor de tela recebe. */
.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ========================= Movimento e reveals ===========================
   Regra do protótipo: o estado final é o padrão. Tudo que anima só existe
   dentro de .com-js, e o script não coloca essa classe quando o sistema pede
   movimento reduzido. Sem JS, com JS quebrado ou com movimento reduzido, a
   página nasce inteira e parada.
   ======================================================================== */

/* O deslocamento do reveal usa `translate`, e não `transform`. O cartão de
   diferencial é ao mesmo tempo .revela e dono do próprio transform (lift +
   tilt no hover); com os dois na mesma propriedade o reveal ganhava a queda
   de braço de especificidade e matava o hover. */
.com-js .revela {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 360ms var(--curva), translate 360ms var(--curva);
}
.com-js .revela.visivel { opacity: 1; translate: none; }

/* Cinto de segurança: se o navegador tiver JS mas o usuário virar o
   prefers-reduced-motion depois de carregar, nada mais se mexe e a página
   volta inteira ao estado final. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .com-js .revela { opacity: 1; translate: none; }
  .selo, .foto-moldura::before { transform: none; }
  .cartao:hover { transform: none; }
  .duvida[open] .duvida-marca { transform: rotate(135deg); }
}

/* Mapa do Google no bloco de endereço, mesma moldura dos cartões do site. */
.mapa {
  margin-top: 22px;
  border: 2px solid var(--traco);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--creme-alto);
}
.mapa iframe { display: block; width: 100%; height: 280px; border: 0; }