/* ============================================================
   Molde claro (26/10/2026): as páginas de fundo creme no clima do
   linktree (caminho A do plano docs/planos/2026-10-26-paginas-claras.md).
   Entra DEPOIS do /ui/unidade.css e do /ui/unidade-clara.css.
   Feito pro molde de /pediatria, /filho, /anna, /psicologia e /isabella
   (.card, .chata, .passos-consulta, .faq, .fecho, .barra-fixa).
   O fundo continua creme; o "O que ninguém te conta" é o momento escuro
   que amarra com o linktree; o contador é cartão branco com o número no
   círculo escuro (27/10); o fechamento é azul claro.
   Só visual: nenhum texto, href, data-* ou evento muda.
   ============================================================ */

/* ---------- fundo pontilhado, como o do linktree ---------- */
html body{background:#F3F3EC radial-gradient(rgba(44,67,84,.075) 1px,transparent 1.3px) 0 0/16px 16px}

/* ---------- tipografia ---------- */
html body h1{font-size:clamp(2rem,8.4vw,3.1rem);letter-spacing:-.03em;line-height:1.08;text-wrap:balance;max-width:17ch}
html body h2{font-size:clamp(1.5rem,6.4vw,2.15rem);font-weight:800;letter-spacing:-.02em;line-height:1.14;text-wrap:balance}
html body .olho{font-weight:700;font-size:.64rem;letter-spacing:.16em;color:#456A6C}
html body .lead{font-size:1.02rem;line-height:1.65}
html body section{padding-top:72px}

/* ---------- selos do topo e do fechamento: sem pílula, linha com pino ---------- */
/* 26/10: o Zé tirou a pílula do topo e escolheu o pino ("3. Pino de lugar");
   depois pediu o mesmo no selo do fechamento ("Mude o eyebrown para a
   mudança que fizemos hoje cedo"). */
html body .hero > .selo,
html body .fecho .selo{
  gap:7px;padding:0;background:none;border:0;border-radius:0;
  font-size:.82rem;font-weight:500;letter-spacing:0;text-transform:none;color:#56696B;
}
html body .hero > .selo::before,
html body .fecho .selo::before{
  width:14px;height:14px;border-radius:0;box-shadow:none;background:#456A6C;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* páginas de indicação (/anna, /psicologia, /isabella): no lugar do pino,
   um selo de verificado (Zé, 26/10: "2. Selo de verificado"). Vale pra
   qualquer nome que o link traga. O data-indicacao vem no HTML dessas
   páginas ou é posto pelo /ui/parcerias.js (/filho/?p=anna). No fechamento
   vale o mesmo ("Encaminhada pela ..."). */
html body .hero > .selo[data-indicacao],
html body .fecho .selo[data-indicacao]{color:#2C4354;font-weight:600}
/* texto longo ("Encaminhada pela ... · CRM") quebra em duas: ícone na primeira linha, sem encolher */
html body .hero > .selo,
html body .fecho .selo{align-items:flex-start;line-height:1.45;text-wrap:balance}
html body .hero > .selo::before,
html body .fecho .selo::before{flex:none;margin-top:2px}
/* no fechamento o texto é centralizado: o ícone anda junto da primeira palavra */
html body .fecho .selo{display:inline-block;max-width:30ch}
html body .fecho .selo::before{display:inline-block;margin:0 7px 0 0;vertical-align:-2px}
html body .hero > .selo[data-indicacao]::before,
html body .fecho .selo[data-indicacao]::before{
  width:16px;height:16px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202l2.4%201.8%203-.2.9%202.9%202.5%201.7-1%202.8%201%202.8-2.5%201.7-.9%202.9-3-.2L12%2022l-2.4-1.8-3%20.2-.9-2.9-2.5-1.7%201-2.8-1-2.8%202.5-1.7.9-2.9%203%20.2z%27/%3E%3Cpath%20d%3D%27M8.5%2012l2.5%202.5%204.5-5%27/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202l2.4%201.8%203-.2.9%202.9%202.5%201.7-1%202.8%201%202.8-2.5%201.7-.9%202.9-3-.2L12%2022l-2.4-1.8-3%20.2-.9-2.9-2.5-1.7%201-2.8-1-2.8%202.5-1.7.9-2.9%203%20.2z%27/%3E%3Cpath%20d%3D%27M8.5%2012l2.5%202.5%204.5-5%27/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- cartões: brancos de verdade, um jeito só ---------- */
html body .card,
html body .relato,
html body .um,
html body .dim,
html body .slot,
html body .par{
  background:#fff;border:1px solid rgba(44,67,84,.08);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 30px -20px rgba(33,50,59,.35);
}
html body .card{padding:22px}
html body .card li::before{width:8px;height:8px;top:7px;background:#C1DFE0;box-shadow:inset 0 0 0 2px #456A6C;opacity:1}
html body .relato.vazio{background:transparent;box-shadow:none;border:1px dashed rgba(44,67,84,.18)}

/* ---------- "Como funciona": linha do tempo com o número no anel ---------- */
html body .passos-consulta{gap:0}
html body .pc{position:relative;gap:18px;padding:4px 0 26px;background:none;border:0;border-radius:0}
html body .pc:not(:last-child)::after{
  content:'';position:absolute;left:16px;top:40px;bottom:2px;width:2px;
  background:linear-gradient(180deg,#9ECACB,rgba(193,223,224,.25));
}
html body .pc__n{
  flex:0 0 34px;width:34px;height:34px;font-size:.82rem;
  background:#21323B;color:#C1DFE0;
  box-shadow:0 0 0 3px #C1DFE0,0 0 16px rgba(127,240,240,.45);
}
html body .pc b{font-size:1rem;margin:5px 0 4px}
html body .pc span{font-size:.88rem;line-height:1.6}

/* ---------- momento escuro: "O que ninguém te conta" ---------- */
html body .chata{
  background:
    radial-gradient(circle at 100% 0%,rgba(193,223,224,.18),transparent 55%),
    linear-gradient(165deg,#223845 0%,#1c262b 100%);
  border:1px solid rgba(193,223,224,.12);border-radius:22px;
  box-shadow:0 22px 40px -24px rgba(24,29,32,.7);
}
html body .chata .olho{color:#C1DFE0}
html body .chata h2,
html body .chata p{color:#ECEEE8}
html body .chata .lista li{color:rgba(236,238,232,.78)}
html body .chata .lista li::before{background:#C1DFE0}
html body .chata strong,
html body .chata b{color:#C1DFE0}

/* ---------- destaque do título dentro dos blocos escuros ---------- */
html body .chata .accent{
  background:linear-gradient(135deg,#C1DFE0 0%,rgba(193,223,224,.6) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- perguntas em cartões, como o "Dúvidas" do linktree ---------- */
html body .faq{display:flex;flex-direction:column;gap:8px;border-top:0}
html body .faq details{
  padding:0 18px;background:#fff;border:1px solid rgba(44,67,84,.08);border-radius:16px;
  box-shadow:0 10px 24px -20px rgba(33,50,59,.35);
}
html body .faq summary::after{right:0}

/* ---------- fechamento: cartão azul claro, botão escuro ---------- */
/* 26/10: era escuro; o Zé quis azul claro ("1. Azul claro, botão escuro").
   O botão escuro é o único da página, então é o que mais chama. */
html body .fecho{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.75),transparent 60%),
    linear-gradient(165deg,#D3EAEB 0%,#C1DFE0 100%);
  border:1px solid rgba(69,106,108,.18);border-radius:24px;color:#21323B;
  box-shadow:0 26px 50px -30px rgba(33,50,59,.45);
}
html body .fecho h2{color:#21323B}
html body .fecho .accent{background:linear-gradient(135deg,#2C4354 0%,#456A6C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html body .fecho .sub{color:#2C4354}
html body .fecho .cta{
  background:linear-gradient(180deg,#2C4354 0%,#21323B 100%);color:#ECEEE8;
  box-shadow:0 14px 30px -12px rgba(33,50,59,.55),inset 0 1px 0 rgba(255,255,255,.12);
}
html body .fecho .cta:hover{background:#2C4354;color:#fff}

/* ---------- barra de baixo: só a pílula, com sombra ---------- */
html body .barra-fixa{background:none;padding:0 14px calc(14px + env(safe-area-inset-bottom))}
html body .barra-fixa .cta{box-shadow:0 14px 30px -10px rgba(33,50,59,.45),inset 0 1px 0 rgba(255,255,255,.6)}
/* some enquanto o botão do topo ou o do fechamento está na tela (/ui/barra-clara.js) */
html body .barra-fixa{transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s ease}
html body .barra-fixa--escondida{transform:translateY(110%);opacity:0;pointer-events:none}

/* ---------- celular: os botões numa linha só ---------- */
/* "Falar sobre minha alimentação no WhatsApp" (psicologia) quebrava em duas */
@media (max-width:480px){
  html body .barra-fixa .cta,
  html body .hero .cta-linha .cta{padding-left:14px;padding-right:14px;font-size:12.5px;white-space:nowrap}
  html body .fecho{padding:30px 12px}
  html body .fecho .cta{display:block;width:100%;padding-left:10px;padding-right:10px;font-size:12.5px;white-space:nowrap}
}
/* celular pequeno (menos de 360px): o texto não cabe numa linha; quebra em vez de cortar */
@media (max-width:359px){
  html body .barra-fixa .cta,
  html body .hero .cta-linha .cta,
  html body .fecho .cta{white-space:normal}
}

/* ---------- computador: coluna de 1000px, vídeo ao lado do título ---------- */
@media (min-width:1000px){
  html body .shell{max-width:1000px;padding-left:40px;padding-right:40px}
  html body .hero{display:grid;grid-template-columns:1.05fr .95fr;column-gap:56px;align-items:start}
  html body .hero > *{grid-column:1}
  html body .hero > .vsl{grid-column:2;grid-row:1 / span 4;margin-top:8px}
  html body .duas{gap:16px}
  html body .passos-consulta{grid-template-columns:repeat(4,1fr);gap:22px}
  html body .pc{flex-direction:column;padding:0}
  html body .pc:not(:last-child)::after{
    left:44px;right:-22px;top:16px;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,#9ECACB,rgba(193,223,224,.25));
  }
  html body .chata{padding:48px 56px}
  html body .fecho .selo{max-width:none}
}

/* ============================================================
   /funil/consultoria/pediatria (tarefa 5): molde mais novo, com classes
   próprias. O que é igual às outras (.card, .chata, .pc, .faq) já vem de
   cima; aqui só o que é dela. A barra (.cta-fixo) já some pelo script dela.
   ============================================================ */
/* "Como funciona" em linha do tempo: o contêiner dela é .passos */
html body .passos:has(> .pc){gap:0}
/* "Faz a conta" e o preço: cartões brancos, como os outros */
html body .custo,
html body .valores{
  background:#fff;border:1px solid rgba(44,67,84,.08);border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 40px -26px rgba(33,50,59,.4);
}
/* fechamento: o mesmo cartão azul claro com botão escuro do .fecho */
html body .fechamento{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.75),transparent 60%),
    linear-gradient(165deg,#D3EAEB 0%,#C1DFE0 100%);
  border:1px solid rgba(69,106,108,.18);border-radius:24px;color:#21323B;
  box-shadow:0 26px 50px -30px rgba(33,50,59,.45);
}
html body .fechamento__frase{color:#21323B}
html body .fechamento .cta{
  background:linear-gradient(180deg,#2C4354 0%,#21323B 100%);color:#ECEEE8;
  box-shadow:0 14px 30px -12px rgba(33,50,59,.55),inset 0 1px 0 rgba(255,255,255,.12);
}
html body .fechamento .cta:hover{background:#2C4354;color:#fff}
/* celular: "Quero começar com meu filho" numa linha só (quebrava em duas) */
@media (max-width:480px){
  html body .fechamento{padding:28px 16px}
  html body .fechamento .cta{padding-left:12px;padding-right:12px;font-size:13px;white-space:nowrap}
}
@media (max-width:359px){
  html body .fechamento .cta{white-space:normal}
}

/* ---------- contador de vagas: cartão branco, número no círculo escuro ---------- */
/* 27/10: o Zé achou a faixa grafite pesada no creme ("essa ainda merece algo").
   O cartão segue os outros cartões brancos; o círculo com o anel continua escuro
   e é o único ponto escuro da faixa, então o número é o que chama. Só visual. */
html body .zr-vagas{
  background:#fff;border:1px solid rgba(44,67,84,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 30px -20px rgba(33,50,59,.35);
}
html body .zr-vagas p{color:#2C4354}
html body .zr-vagas p strong{color:#21323B}
html body .zr-vagas__num{
  background:radial-gradient(circle at 50% 35%,#2C4354 0%,#21323B 75%);
  box-shadow:0 8px 18px -8px rgba(33,50,59,.55);
}

/* ---------- relatos com print: a mensagem da mãe no lugar do texto a coletar ---------- */
/* 27/10: os dois prints da mãe (os mesmos da esteira da /funil/consultoria/pediatria). */
html body .relato--print{padding:12px}
html body .relato__img{display:block;width:100%;height:auto;border-radius:12px}
html body .relato--print .relato__a{margin-top:10px;padding:0 4px}