/* ═══════════════════════════════════════════════════════════════
   Rastreios Thera, motor único.
   Mobile primeiro: o tráfego chega quase todo de celular.
   O tema (cores/fonte) é trocado em runtime pelo motor via CSS vars.
   ═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --primaria:#7B5EA7; --secundaria:#5BAE8A; --clara:#EDE6F6; --clara2:#E2F4EC;
  --escura:#1E1640; --texto:#2D2255; --borda:#D9CFF0; --fonte:system-ui,-apple-system,sans-serif;
  --branco:#fff; --cinza:#6b6480;
  --raio:16px; --sombra:0 6px 24px rgba(0,0,0,.07);
  --leitura:17px;          /* corpo de texto no celular */
  --alt-linha:1.72;        /* entrelinha confortável para texto longo */
  --lado:22px;             /* respiro lateral */
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--fonte);background:var(--branco);color:var(--texto);
  font-size:var(--leitura);line-height:var(--alt-linha);min-height:100dvh;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* flex: ignora os nós de espaço em branco entre as telas ocultas, que criavam
     uma linha fantasma de alguns px e faziam a página rolar sem conteúdo */
  display:flex;flex-direction:column}

/* nada de palavra cortada feio em tela estreita */
p,li,h1,h2,h3{overflow-wrap:break-word;hyphens:none}

/* ---------- telas ---------- */
.tela{display:none;min-height:100dvh;flex-direction:column;align-items:center}
.tela.ativa{display:flex;animation:entra .32s ease both}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tela.ativa{animation:none}*{transition:none!important}}

.miolo{width:100%;max-width:640px;margin:0 auto;
  padding:22px var(--lado) calc(48px + env(safe-area-inset-bottom))}
.miolo.leitura{max-width:600px}   /* medida menor onde há texto corrido longo */

/* ---------- cabeçalho fino ---------- */
.topo{width:100%;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  padding:11px var(--lado) 0;text-align:center;position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--borda)}
.topo img{height:34px;width:34px;object-fit:contain;border-radius:50%;
  display:inline-block;vertical-align:middle;margin-right:8px}
.topo b{font-size:14.5px;color:var(--escura);vertical-align:middle}
.topo span{display:block;font-size:12px;color:var(--cinza);margin:2px 0 9px;line-height:1.3}
.topo .progresso.fina{margin:0 calc(var(--lado) * -1)}

/* ---------- capa ---------- */
.capa{background:linear-gradient(165deg,var(--clara) 0%,#fff 52%,var(--clara2) 100%);
  width:100%;flex:1;display:flex;align-items:center;justify-content:center;
  padding:34px var(--lado) calc(40px + env(safe-area-inset-bottom))}
.capa-inner{max-width:560px;width:100%;text-align:center}
.foto{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:center top;
  border:3px solid var(--primaria);display:block;margin:0 auto 20px;
  box-shadow:0 8px 28px rgba(0,0,0,.14)}

h1{font-size:clamp(26px,7.2vw,34px);line-height:1.2;letter-spacing:-.4px;
  color:var(--escura);margin-bottom:14px;font-weight:700;text-wrap:balance}
h2{font-size:clamp(21px,5.6vw,27px);line-height:1.26;letter-spacing:-.3px;
  color:var(--escura);margin-bottom:12px;font-weight:700;text-wrap:balance}
h3{font-size:17px;line-height:1.35;color:var(--escura);font-weight:700}

.lead{font-size:16px;color:var(--cinza);margin-bottom:22px;line-height:1.62;text-wrap:pretty}
.assina{font-size:13px;color:var(--cinza);margin-top:22px;line-height:1.55}
.assina b{color:var(--primaria)}
.assina small{display:block;font-size:11.5px;opacity:.85;margin-top:7px}

.marca{margin-bottom:18px;line-height:1.3}
.marca b{display:block;font-size:15px;color:var(--escura);font-weight:700;letter-spacing:.2px}
.marca span{display:block;font-size:12px;color:var(--cinza)}

/* ---------- botões (alvo de toque grande) ---------- */
.btn{display:block;width:100%;max-width:440px;margin:0 auto;min-height:56px;
  padding:16px 22px;border:0;border-radius:99px;background:var(--primaria);color:#fff;
  font-size:16.5px;font-weight:600;font-family:inherit;line-height:1.3;cursor:pointer;
  text-align:center;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.16);
  transition:transform .14s,filter .14s;touch-action:manipulation}
.btn:active{transform:scale(.985);filter:brightness(.96)}
@media (hover:hover){.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}}
.btn.secundario{background:var(--secundaria)}
.btn.vazado{background:var(--branco);color:var(--primaria);border:1.5px solid var(--borda);
  box-shadow:none}

/* ---------- cartões de dor ---------- */
.dores{display:grid;gap:11px;margin:18px 0 6px;text-align:left}
.dor{display:flex;align-items:center;gap:14px;width:100%;min-height:74px;padding:15px 18px;
  background:var(--branco);border:1.5px solid var(--borda);border-radius:var(--raio);
  cursor:pointer;font-family:inherit;color:var(--texto);text-align:left;
  box-shadow:0 2px 10px rgba(0,0,0,.04);transition:all .16s;touch-action:manipulation}
.dor:active{transform:scale(.99);background:var(--clara)}
@media (hover:hover){.dor:hover{border-color:var(--primaria);box-shadow:var(--sombra)}}
.dor .ico{font-size:25px;line-height:1;flex-shrink:0;width:30px;text-align:center}
.dor b{display:block;font-size:16.5px;color:var(--escura);line-height:1.3;margin-bottom:2px}
.dor small{display:block;font-size:13.5px;color:var(--cinza);line-height:1.4}
.pergunta-dor{font-size:17px;font-weight:700;color:var(--escura);margin:24px 0 2px}

/* ---------- selos ---------- */
.selos{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:4px 0}
.selinho{font-size:12.5px;font-weight:600;color:var(--primaria);background:var(--branco);
  border:1px solid var(--borda);border-radius:99px;padding:5px 13px;white-space:nowrap}

/* ---------- perguntas ---------- */
.progresso{width:100%;height:5px;background:var(--clara);overflow:hidden}
.progresso i{display:block;height:100%;background:var(--primaria);
  border-radius:0 99px 99px 0;transition:width .35s cubic-bezier(.4,0,.2,1)}
.contador{font-size:12.5px;font-weight:600;color:var(--primaria);letter-spacing:.3px;
  text-transform:uppercase;margin-bottom:14px;display:block}
.pergunta{font-size:clamp(20px,5.2vw,24px);line-height:1.33;letter-spacing:-.2px;
  color:var(--escura);font-weight:700;margin-bottom:20px;text-wrap:pretty}

.opcoes{display:grid;gap:10px;list-style:none}
.opcao{display:flex;align-items:flex-start;gap:13px;width:100%;min-height:56px;
  text-align:left;padding:15px 16px;background:var(--branco);
  border:1.5px solid var(--borda);border-radius:var(--raio);cursor:pointer;
  font-family:inherit;font-size:15.5px;line-height:1.5;color:var(--texto);
  transition:all .15s;touch-action:manipulation}
.opcao:active{transform:scale(.99);background:var(--clara)}
@media (hover:hover){.opcao:hover{border-color:var(--primaria);background:var(--clara)}}
.opcao.marcada{border-color:var(--primaria);background:var(--clara);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primaria) 22%,transparent)}
.letra{flex-shrink:0;width:25px;height:25px;border-radius:50%;background:var(--clara);
  color:var(--primaria);font-size:12.5px;font-weight:700;display:flex;align-items:center;
  justify-content:center;text-transform:uppercase;margin-top:2px}
.opcao.marcada .letra{background:var(--primaria);color:#fff}

/* ---------- briefing (tela 2) ---------- */
#tela-intro .hook{text-align:left;font-size:15.5px;color:var(--cinza);
  line-height:1.6;margin-bottom:9px}
#tela-intro h2{text-align:left;color:var(--primaria)}
.corrido{text-align:left;margin:16px 0 4px}
.corrido p{font-size:var(--leitura);color:var(--texto);margin-bottom:16px;
  line-height:var(--alt-linha);text-wrap:pretty}
.instrucao{font-size:14.5px;color:var(--cinza);line-height:1.6;margin:16px 0 22px}
.instrucao.destaque{background:var(--clara);border-left:3px solid var(--primaria);
  border-radius:10px;padding:13px 16px;text-align:left;color:var(--texto)}

/* ---------- formulário ---------- */
.form{display:grid;gap:14px;margin:20px 0 8px;text-align:left}
.form label{display:block;font-size:13px;font-weight:600;color:var(--escura);letter-spacing:.2px}
.form input{width:100%;margin-top:6px;padding:15px 16px;min-height:54px;
  border:1.5px solid var(--borda);border-radius:12px;background:var(--branco);
  font-family:inherit;font-size:16px;   /* 16px evita o zoom automático do iOS */
  font-weight:400;color:var(--texto)}
.form input::placeholder{color:#a9a2bb}
.form input:focus{outline:none;border-color:var(--primaria);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primaria) 16%,transparent)}
.erro{color:#c0392b;font-size:13.5px;min-height:20px;line-height:1.45;font-weight:500}
.aviso{font-size:12.5px;color:var(--cinza);line-height:1.55;margin-top:14px}

/* ---------- carregando ---------- */
.girando{width:44px;height:44px;border:3px solid var(--clara);border-top-color:var(--primaria);
  border-radius:50%;animation:gira .8s linear infinite;margin:0 auto 18px}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- resultado ---------- */
.hero{width:100%;padding:42px var(--lado) 34px;text-align:center;color:#fff;
  background:linear-gradient(160deg,var(--escura),var(--primaria))}
.selo{display:inline-block;padding:6px 15px;border-radius:99px;background:rgba(255,255,255,.2);
  font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  margin-bottom:14px;line-height:1.4}
.hero h2{color:#fff;margin-bottom:14px}
.nota{font-size:14.5px;opacity:.92;line-height:1.55}

.bloco{margin:28px 0}
.bloco h3{margin-bottom:13px;padding-bottom:9px;border-bottom:2px solid var(--clara)}
.bloco p{margin-bottom:16px;color:var(--texto);font-size:var(--leitura);
  line-height:var(--alt-linha);text-wrap:pretty}
.bloco p:last-child{margin-bottom:0}

.lista{list-style:none;display:grid;gap:9px}
.lista li{padding:13px 16px;background:var(--clara);border-radius:12px;
  font-size:15.5px;line-height:1.55;border-left:3px solid var(--primaria)}
.lista.fala li{font-style:italic;background:var(--clara2);border-left-color:var(--secundaria)}

.cartao{background:var(--branco);border:1.5px solid var(--borda);border-radius:var(--raio);
  padding:26px 20px;margin-top:30px;box-shadow:var(--sombra);text-align:center}
.cartao h3{font-size:19.5px;margin-bottom:9px}
.cartao p{font-size:15.5px;color:var(--cinza);margin-bottom:18px;line-height:1.6}
.acoes{display:grid;gap:10px}

.rodape{width:100%;text-align:center;padding:26px var(--lado) calc(34px + env(safe-area-inset-bottom));
  color:var(--cinza);font-size:12.5px;line-height:1.7;border-top:1px solid var(--borda);margin-top:30px}

/* ---------- telas maiores ---------- */
@media (min-width:600px){
  :root{--leitura:17.5px;--lado:28px}
  .dores{gap:12px}
  .selos{gap:8px}
}

/* ---------- barra de debug (só local) ---------- */
#debug{position:fixed;bottom:0;left:0;right:0;background:#1e1640;color:#c9a288;
  font:12px ui-monospace,monospace;padding:7px 12px;z-index:999;display:none;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
#debug.on{display:flex}
#debug b{color:#fff}
.cartao p .linha{display:block}
.cartao p .linha + .linha{margin-top:11px;padding-top:11px;border-top:1px solid var(--borda);
  color:var(--texto);font-weight:500}

/* ═══════════ CAPA EM UMA TELA SÓ ═══════════
   O objetivo é a mulher ver promessa + as 4 dores sem rolar.
   Tudo escala junto por --esc, que diminui conforme a altura da tela. */
#tela-dor{--esc:1}
#tela-dor .capa{padding:calc(16px * var(--esc)) var(--lado)
  calc(12px * var(--esc) + env(safe-area-inset-bottom));align-items:center}
#tela-dor .marca{margin-bottom:calc(12px * var(--esc))}
#tela-dor .marca b{font-size:calc(14.5px * var(--esc))}
#tela-dor .marca span{font-size:calc(12.5px * var(--esc))}
#tela-dor .foto{width:calc(92px * var(--esc));height:calc(92px * var(--esc));
  margin-bottom:calc(14px * var(--esc));border-width:2.5px}
#tela-dor h1{font-size:calc(clamp(27px,7.6vw,34px) * var(--esc));
  margin-bottom:calc(8px * var(--esc));line-height:1.16}
#tela-dor .lead{font-size:calc(15.5px * var(--esc));margin-bottom:calc(12px * var(--esc));
  line-height:1.5;max-width:34ch;margin-left:auto;margin-right:auto}
#tela-dor .selos{margin-bottom:calc(14px * var(--esc))}
#tela-dor .selos{gap:5px;flex-wrap:nowrap}
#tela-dor .selinho{font-size:calc(12.5px * var(--esc));padding:calc(4px * var(--esc)) 9px}
@media (max-width:365px){ #tela-dor .selos{flex-wrap:wrap} }
#tela-dor .pergunta-dor{font-size:calc(16px * var(--esc));margin:0 0 calc(10px * var(--esc))}
#tela-dor .dores{gap:calc(9px * var(--esc));margin:0}
#tela-dor .dor{min-height:auto;padding:calc(12px * var(--esc)) 16px;gap:12px;
  border-radius:14px}
#tela-dor .dor .ico{font-size:calc(22px * var(--esc));width:26px}
#tela-dor .dor b{font-size:calc(16px * var(--esc));margin-bottom:1px;line-height:1.35}
#tela-dor .dor small{font-size:calc(13.5px * var(--esc));line-height:1.4}
#tela-dor .assina{font-size:calc(12.5px * var(--esc));margin-top:calc(11px * var(--esc));
  max-width:none;margin-left:calc(var(--lado) * -.68);margin-right:calc(var(--lado) * -.68);
  line-height:1.5}

/* telas baixas (iPhone SE, Android pequeno): tudo encolhe junto */
@media (max-height:860px){ #tela-dor{--esc:.9} }
@media (max-height:760px){ #tela-dor{--esc:.85} #tela-dor .dor small{display:none} }
@media (max-height:620px){ #tela-dor{--esc:.8}  #tela-dor .foto{display:none} }

/* ═══════════ ANÁLISE (antes de pedir os dados) ═══════════ */
.anel{position:relative;width:132px;height:132px;margin:0 auto 26px}
.anel svg{width:100%;height:100%;transform:rotate(-90deg)}
.anel circle{fill:none;stroke-width:6;stroke-linecap:round}
.anel .trilho{stroke:var(--clara)}
.anel .arco{stroke:var(--primaria);transition:stroke-dashoffset .1s linear}
.anel-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:700;color:var(--escura);letter-spacing:-.5px;
  transition:opacity .3s,transform .3s}
.anel-ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:52px;color:var(--secundaria);opacity:0;transform:scale(.5);
  transition:opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.anel.completo .arco{stroke:var(--secundaria)}
.anel.completo .anel-num{opacity:0;transform:scale(.7)}
.anel.completo .anel-ok{opacity:1;transform:scale(1)}

.passos{list-style:none;display:grid;gap:9px;text-align:left;max-width:330px;margin:0 auto}
.passos li{display:flex;align-items:center;gap:11px;font-size:15px;line-height:1.4;
  color:var(--cinza);opacity:.4;transition:opacity .35s,color .35s;min-height:26px}
.passos li.fazendo{opacity:1;color:var(--escura);font-weight:600}
.passos li.feito{opacity:1;color:var(--texto)}
.passos .tick{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:700;
  background:var(--clara);color:var(--primaria);transition:all .3s}
.passos li.fazendo .tick{background:var(--primaria);color:#fff;
  animation:pulsa 1s ease-in-out infinite}
.passos li.feito .tick{background:var(--secundaria);color:#fff;animation:none}
@keyframes pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

.pronto{opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .45s,transform .45s;margin-top:28px}
.pronto.mostra{opacity:1;transform:none;pointer-events:auto}
.pronto h2{margin-bottom:6px}
.pronto .lead{margin-bottom:20px}
@media (max-height:700px){
  .anel{width:108px;height:108px;margin-bottom:20px}
  .anel-num{font-size:22px}.anel-ok{font-size:44px}
  .passos li{font-size:14px}
  .pronto{margin-top:20px}
}

/* ═══════════ aviso do WhatsApp na captura ═══════════ */
.zap{display:flex;gap:12px;align-items:flex-start;text-align:left;margin-top:18px;
  padding:14px 16px;background:var(--clara2);border:1px solid var(--borda);
  border-radius:14px}
.zap-ico{font-size:20px;line-height:1.3;flex-shrink:0}
.zap b{display:block;font-size:14.5px;color:var(--escura);margin-bottom:3px;line-height:1.35}
.zap span{font-size:13.5px;color:var(--texto);line-height:1.55;display:block}

/* ═══════════════════════════════════════════════════════════════
   PASSE DE TIPOGRAFIA E ESPAÇAMENTO (auditoria 15/08)
   Corrige: fonte abaixo de 14px, contraste abaixo de 4.5,
   entrelinha curta e linha longa demais. Público 30 a 55 anos,
   lendo no celular, muitas vezes cansada. Legibilidade primeiro.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* escala de espaçamento (antes era ad hoc) */
  --e1:6px; --e2:10px; --e3:16px; --e4:24px; --e5:34px; --e6:48px;
  /* fundo de botão 18% mais escuro que a cor do tema: garante branco legível
     em qualquer um dos 4 temas, sem inventar cor nova */
  --btn-fundo:color-mix(in srgb, var(--primaria) 82%, #000);
}
body{font-feature-settings:"kern" 1,"liga" 1;font-variant-numeric:tabular-nums}

/* ---- pisos de tamanho: nada abaixo de 12.5px, texto de leitura a partir de 14px ---- */
.marca span{font-size:12.5px;line-height:1.4}
.assina{font-size:12.5px;max-width:44ch;margin-left:auto;margin-right:auto}
.topo span{font-size:12.5px;line-height:1.4}
.contador{font-size:13px;color:var(--escura)}          /* era primaria: contraste 3.32 */
.selinho{font-size:12px}
.dor small{font-size:13.5px}
.aviso{font-size:13px;max-width:46ch}
.zap span{font-size:14.5px}
.zap b{color:var(--texto)}                              /* era escura sobre clara2: 4.31 */
.form label{font-size:13.5px}
.rodape{font-size:13px;max-width:44ch;margin-left:auto;margin-right:auto}
.passos li{font-size:15.5px;line-height:1.5}

/* ---- contraste ---- */
.letra{color:var(--escura)}                             /* era primaria sobre clara: 2.97 */
.btn{background:var(--btn-fundo);box-shadow:0 5px 16px rgba(0,0,0,.13)}
.btn.vazado{background:var(--branco)}
.btn.secundario{background:color-mix(in srgb, var(--secundaria) 82%, #000)}
#tela-intro h2{color:var(--escura)}                     /* era primaria: 3.32 */

/* ---- entrelinha ---- */
.marca b{line-height:1.35}
.bloco h3,.cartao h3{line-height:1.4}
.zap b{line-height:1.4}

/* ---- ritmo de espaçamento (usa a escala) ---- */
.bloco{margin:var(--e5) 0}
.bloco h3{margin-bottom:var(--e3)}
.cartao{margin-top:var(--e5);padding:var(--e4) var(--e3)}
.form{gap:var(--e3);margin:var(--e4) 0 var(--e2)}
.zap{margin:var(--e3) 0 var(--e4);padding:var(--e3)}
.acoes{gap:var(--e2)}
#tela-intro .corrido{margin:var(--e3) 0 var(--e1)}

/* ---- atmosfera: brilho suave atrás da capa, sem pesar ---- */
.capa{position:relative;isolation:isolate}
.capa::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 65% at 50% 0%,
    color-mix(in srgb, var(--primaria) 12%, transparent) 0%, transparent 62%)}

/* ---- resultado: hero com um pouco mais de ar e hierarquia ---- */
.hero{padding:var(--e6) var(--lado) var(--e5)}
.selo{font-size:12px;letter-spacing:.9px;background:rgba(255,255,255,.22)}
.nota{font-size:15px;margin-top:var(--e1)}
.lista li{border-left-width:4px}

/* ═══════════════════════════════════════════════════════════════
   PASSE DE TIPOGRAFIA E ESPAÇAMENTO (auditoria 15/08)
   Corrige: fonte abaixo de 14px, contraste abaixo de 4.5,
   entrelinha curta e linha longa demais. Público 30 a 55 anos,
   lendo no celular, muitas vezes cansada. Legibilidade primeiro.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* escala de espaçamento (antes era ad hoc) */
  --e1:6px; --e2:10px; --e3:16px; --e4:24px; --e5:34px; --e6:48px;
  /* fundo de botão 18% mais escuro que a cor do tema: garante branco legível
     em qualquer um dos 4 temas, sem inventar cor nova */
  --btn-fundo:color-mix(in srgb, var(--primaria) 82%, #000);
}
body{font-feature-settings:"kern" 1,"liga" 1}

/* ---- pisos de tamanho ---- */
.marca span{font-size:12.5px;line-height:1.4}
.assina{font-size:12.5px;max-width:44ch;margin-left:auto;margin-right:auto}
.topo span{font-size:12.5px;line-height:1.4}
.contador{font-size:13px;color:var(--escura)}          /* era primaria: contraste 3.32 */
.selinho{font-size:12px}
.dor small{font-size:13.5px}
.aviso{font-size:13px;max-width:46ch}
.zap span{font-size:14.5px}
.zap b{color:var(--texto);line-height:1.4}              /* era escura sobre clara2: 4.31 */
.form label{font-size:13.5px}
.rodape{font-size:13px;max-width:44ch;margin-left:auto;margin-right:auto}
.passos li{font-size:15.5px;line-height:1.5}

/* ---- contraste ---- */
.letra{color:var(--escura)}                             /* era primaria sobre clara: 2.97 */
.btn{background:var(--btn-fundo);box-shadow:0 5px 16px rgba(0,0,0,.13)}
.btn.vazado{background:var(--branco)}
.btn.secundario{background:color-mix(in srgb, var(--secundaria) 82%, #000)}
#tela-intro h2{color:var(--escura)}                     /* era primaria: 3.32 */

/* ---- entrelinha ---- */
.marca b{line-height:1.35}
.bloco h3,.cartao h3{line-height:1.4}

/* ---- ritmo de espaçamento (usa a escala) ---- */
.bloco{margin:var(--e5) 0}
.bloco h3{margin-bottom:var(--e3)}
.cartao{margin-top:var(--e5);padding:var(--e4) var(--e3)}
.form{gap:var(--e3);margin:var(--e4) 0 var(--e2)}
.zap{margin:var(--e3) 0 var(--e4);padding:var(--e3)}
.acoes{gap:var(--e2)}
#tela-intro .corrido{margin:var(--e3) 0 var(--e1)}

/* ---- atmosfera: brilho suave atrás da capa, sem pesar ---- */
.capa{position:relative;isolation:isolate}
.capa::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 65% at 50% 0%,
    color-mix(in srgb, var(--primaria) 12%, transparent) 0%, transparent 62%)}

/* ---- resultado: mais ar e hierarquia ---- */
.hero{padding:var(--e6) var(--lado) var(--e5)}
.selo{font-size:12px;letter-spacing:.9px;background:rgba(255,255,255,.22)}
.nota{font-size:15px;margin-top:var(--e1)}
.lista li{border-left-width:4px}

/* ressalva legal, logo abaixo da assinatura na capa (texto oficial da clínica) */
.ressalva{font-size:12px;line-height:1.5;color:var(--cinza);max-width:46ch;
  margin:10px auto 0;text-wrap:pretty}
#tela-dor .ressalva{font-size:max(11.5px, calc(12px * var(--esc)));margin-top:calc(7px * var(--esc));
  line-height:1.45;max-width:none;
  /* quase encostando na borda: ocupa a largura toda e ganha menos linhas */
  margin-left:calc(var(--lado) * -.68);margin-right:calc(var(--lado) * -.68)}

/* ═══════════ AUTORIDADE (a clínica, com o lastro da Geize) ═══════════
   Um cartão só: credencial + provas juntas. Três blocos soltos deixavam
   a tela desorganizada no celular. */
.etiqueta{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:var(--primaria);background:var(--clara);
  border-radius:99px;padding:5px 13px;margin-bottom:14px}
#tela-autoridade h2{margin-bottom:10px}
#tela-autoridade .lead{font-size:15.5px;line-height:1.6;margin-bottom:18px;
  max-width:38ch;margin-left:auto;margin-right:auto}

.cartao-cred{background:var(--branco);border:1.5px solid var(--borda);
  border-radius:var(--raio);box-shadow:0 4px 18px rgba(0,0,0,.06);overflow:hidden}

.cred{display:flex;align-items:center;gap:13px;text-align:left;padding:15px 16px}
.cred img{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:center top;
  border:2px solid var(--primaria);flex-shrink:0}
.cred b{display:block;font-size:16px;font-weight:700;color:var(--escura);line-height:1.25}
.cred span{display:block;font-size:13px;color:var(--primaria);font-weight:600;
  line-height:1.35;margin-top:1px}
.cred small{display:block;font-size:12.5px;color:var(--cinza);line-height:1.4;margin-top:4px}

.provas{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--borda);background:var(--clara)}
.prova{padding:12px 6px;text-align:center;border-left:1px solid var(--borda)}
.prova:first-child{border-left:0}
.prova b{display:block;font-size:17px;font-weight:700;color:var(--escura);
  line-height:1.15;letter-spacing:-.3px;margin-bottom:2px}
.prova span{display:block;font-size:11.5px;line-height:1.3;color:var(--cinza)}

.fecho{font-size:14.5px;line-height:1.6;color:var(--texto);
  max-width:38ch;margin:16px auto 20px}

/* telas baixas: encolhe junto, sem quebrar o cartão */
@media (max-height:760px){
  #tela-autoridade .lead{font-size:14.5px;margin-bottom:14px}
  .cred{padding:13px 14px;gap:11px}
  .cred img{width:52px;height:52px}
  .cred b{font-size:15px}
  .cred span{font-size:12.5px}
  .cred small{font-size:12px}
  .prova{padding:10px 5px}
  .prova b{font-size:15.5px}
  .fecho{font-size:13.5px;margin:13px auto 16px}
}
/* telas bem estreitas: a credencial empilha em vez de espremer */
@media (max-width:340px){
  .cred{flex-direction:column;text-align:center;gap:9px}
}

/* ═══════════ RESULTADO: só a abertura + saída pro WhatsApp ═══════════ */
#tela-resultado .cartao{margin-top:var(--e4);padding:var(--e4) var(--e3) var(--e3)}
.zap-ico.grande{display:block;font-size:30px;line-height:1;margin-bottom:10px}
#res-card-titulo{font-size:19px;line-height:1.35;margin-bottom:10px}
#res-card-texto{font-size:15.5px;line-height:1.6;color:var(--texto);margin-bottom:14px}
.prioridade{font-size:14.5px;line-height:1.55;color:var(--texto);text-align:left;
  background:var(--clara);border-left:3px solid var(--primaria);border-radius:10px;
  padding:13px 15px;margin:0 0 16px}
.btn.zapbtn{background:#1FA855;display:flex;align-items:center;justify-content:center;gap:9px}
.btn.zapbtn::before{content:"💬";font-size:18px;line-height:1}
/* mesma respiração da home: quase encostando na borda, menos linhas empilhadas */
#tela-resultado .aviso{margin:var(--e4) calc(var(--lado) * -.68) 0;max-width:none;
  text-align:center;font-size:12.5px;line-height:1.5}

/* ═══════════ CÓDIGO DE IDENTIFICAÇÃO (leva pro WhatsApp) ═══════════
   É o que garante que ela receba o resultado DELA: o telefone do cadastro
   pode ser diferente do telefone de onde ela manda mensagem. */
.codigo-caixa{background:var(--branco);border:2px dashed var(--primaria);border-radius:14px;
  padding:14px 15px;margin:0 0 16px;text-align:left}
.codigo-rotulo{display:block;font-size:12px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--primaria);margin-bottom:6px}
.codigo-linha{display:flex;align-items:center;gap:10px}
.codigo-linha strong{flex:1;font-size:26px;font-weight:700;letter-spacing:1.5px;
  color:var(--escura);line-height:1.15;font-variant-numeric:tabular-nums}
#res-copiar{flex-shrink:0;min-height:40px;padding:9px 15px;border-radius:10px;
  border:1.5px solid var(--borda);background:var(--clara);color:var(--primaria);
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:all .16s;touch-action:manipulation}
#res-copiar.copiado{background:var(--secundaria);border-color:var(--secundaria);color:#fff}
.codigo-aviso{display:block;font-size:13px;line-height:1.5;color:var(--texto);
  margin-top:10px;padding-top:10px;border-top:1px solid var(--borda)}
@media (max-width:340px){
  .codigo-linha strong{font-size:22px;letter-spacing:1px}
}