/* =========================================================================
   LS ADVISOR — Diagnóstico de crédito
   Funil em formato de conversa. A estrutura é a do type que o dono construiu
   (type.amazonconsultoria.com.br); o código real dele está em ref/type.css e
   foi lido linha a linha, não deduzido. O que muda aqui é a marca.

   AS CORES
   O manual traz uma cor só: o azul institucional #05132A. Ele é escuro
   (luminosidade 9%) e, num botão, lê como preto. O dono pediu azul.
   Então o sistema tem dois azuis, e o segundo NÃO é uma cor nova:
     --navy  #05132A  matiz 217°, sat 79%, luz  9%   superfícies escuras
     --azul  #1757BF  matiz 217°, sat 79%, luz 42%   ação: botões e seleção
   Mesmo matiz, mesma saturação, só mais claro. É o mesmo azul da marca com
   outra luz. Contraste medido: 18,5:1 e 6,7:1 sobre branco — os dois passam
   AA com folga, inclusive para texto normal.

   AS FONTES
   Só as duas do manual: Manrope (200-800) e Libre Baskerville Itálico 400.
   A serifada destaca UMA ideia por tela, nunca a frase inteira.
   ========================================================================= */

/* ---------- fontes oficiais, recortadas. Ver tools/build_fonts.py ---------- */
@font-face{
  font-family:Manrope;src:url(../fonts/manrope.woff2)format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Libre Baskerville";src:url(../fonts/baskerville-italic.woff2)format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}

:root{
  --navy:#05132A;
  --azul:#1757BF;
  --azul-hover:#12469B;
  --azul-fundo:rgba(23,97,191,.08);
  --white:#FFFFFF;

  --txt:#05132A;
  --txt-2:rgba(5,19,42,.62);
  --balao:#F2F5F9;
  --borda:rgba(5,19,42,.14);
  --erro:#05132A;

  --col:720px;
  --hdr-h:64px;
  --r-balao:26px;
  --r-campo:32px;
  --r-card:16px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;color-scheme:light;scroll-behavior:smooth}
[hidden]{display:none !important}

body{
  min-height:100dvh;background:var(--white);color:var(--txt);
  font:400 1rem/1.6 Manrope,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;
}
img,svg,iframe{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--azul);text-underline-offset:.18em}
strong{font-weight:700}
::selection{background:var(--azul);color:var(--white)}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =========================== CABEÇALHO ===========================
   Topo de aplicativo: menu, assinatura, conta. Três zonas de largura igual
   nas pontas, para a marca ficar no centro óptico mesmo com ícones de
   tamanhos diferentes. O progresso virou um fio de 3 px no rodapé da faixa.
   ================================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borda);
  padding-top:env(safe-area-inset-top);
}
.hdr-in{
  max-width:var(--col);margin:0 auto;height:var(--hdr-h);
  display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
  gap:8px;padding:0 10px;
}
.hdr-ic{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--txt);transition:background-color .16s;
}
.hdr-ic svg{width:22px;height:22px}
@media (hover:hover){.hdr-ic:hover{background:var(--azul-fundo);color:var(--azul)}}
.hdr-ic:active{background:var(--azul-fundo)}
/* A assinatura é arte vetorial fixa: nunca redigitada, nunca recolorida. */
.hdr-marca{height:clamp(20px, 17.14px + 0.893vw, 24px);width:auto;justify-self:center}

.hdr-fio{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:rgba(5,19,42,.08)}
.hdr-fio i{
  display:block;height:100%;width:0;border-radius:0 3px 3px 0;
  background:var(--azul);transition:width .45s cubic-bezier(.3,.8,.4,1);
}
@media (prefers-reduced-motion:reduce){.hdr-fio i{transition:none}}

/* ---- gaveta do menu ---- */
.gaveta{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-start}
.gaveta[hidden]{display:none}
.gaveta-fundo{position:absolute;inset:0;background:rgba(5,19,42,.42);border:0;cursor:pointer}
.gaveta-in{
  position:relative;width:min(320px,86vw);background:var(--white);
  padding:calc(var(--hdr-h) + 12px) 24px 28px;
  display:flex;flex-direction:column;gap:14px;
  border-right:1px solid var(--borda);
  animation:entraGaveta .26s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes entraGaveta{from{transform:translateX(-100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.gaveta-in{animation:none}}
.gaveta-marca{height:26px;width:auto}
.gaveta-txt{font-size:15px;line-height:1.5;color:var(--txt-2)}
.gaveta-l{
  display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 16px;
  text-align:left;cursor:pointer;
  border:1px solid var(--borda);border-radius:12px;
  font-weight:700;font-size:15px;color:var(--txt);text-decoration:none;
}
.gaveta-l svg{width:18px;height:18px;flex:0 0 auto}
@media (hover:hover){.gaveta-l:hover{border-color:var(--azul);color:var(--azul)}}

/* ============================= CHAT ============================= */
.chat{
  max-width:var(--col);margin:0 auto;
  padding:calc(var(--hdr-h) + 26px) 16px 40px;
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
}
.row{margin:0 0 14px}
.row.gap{margin-bottom:22px}

.msg{display:flex;align-items:flex-start;gap:0}
/* O avatar e' o simbolo da marca, no azul dela. Nao e' foto de pessoa: quem
   fala aqui e' a LS Advisor. Fundo claro para o simbolo azul respirar. */
.av{
  flex:0 0 auto;width:50px;height:50px;border-radius:50%;
  background:var(--azul-fundo);border:1.5px solid var(--borda);
  display:flex;align-items:center;justify-content:center;
  z-index:2;overflow:hidden;position:relative;
}
.av img{width:56%;height:56%;object-fit:contain}
.av-spacer{flex:0 0 auto;width:50px}
.msg.cont .av-spacer{width:38px}

.balao{
  background:var(--balao);
  border-radius:var(--r-balao);border-bottom-left-radius:8px;
  padding:15px 20px;margin-left:-12px;max-width:calc(100% - 44px);
  font-size:17.5px;line-height:1.58;color:var(--txt);
  animation:pop .28s cubic-bezier(.2,.9,.3,1) both;
}
.msg.cont .balao{margin-left:0}
.balao strong{font-weight:700}
/* a serifada marca UMA ideia dentro do balão */
.balao em{font-family:"Libre Baskerville",serif;font-style:italic;font-weight:400}
.balao .tag{
  display:block;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--azul);margin-bottom:6px;
}
/* número dentro da fala: peso e tabular, sem cor extra */
.fig{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* a resposta da pessoa, do outro lado */
.resp{display:flex;justify-content:flex-end;margin-top:-4px}
.resp-b{
  background:var(--azul);color:var(--white);
  border-radius:var(--r-balao);border-bottom-right-radius:8px;
  padding:12px 20px;max-width:82%;
  font-size:16.5px;font-weight:600;line-height:1.45;
  animation:pop .24s ease both;
}

/* digitando… */
.typing{
  display:flex;gap:5px;padding:17px 22px;background:var(--balao);
  border-radius:var(--r-balao);border-bottom-left-radius:8px;
  margin-left:-12px;width:74px;
}
.msg.cont .typing{margin-left:0}
.typing i{width:8px;height:8px;border-radius:50%;background:rgba(5,19,42,.28);
  display:block;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}

@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .balao,.resp-b,.ctrl,.painel{animation:none}
  .typing i{animation:none}
  html{scroll-behavior:auto}
}

/* cartão de prova, alinhado com os balões */
.prova{
  margin-left:38px;max-width:calc(100% - 44px);
  display:flex;flex-direction:column;gap:9px;
  padding:14px 18px;border:1px solid var(--borda);border-radius:var(--r-card);background:var(--white);
}
.prova div{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.prova svg{flex:0 0 auto;margin-top:2px;width:18px;height:18px;color:var(--azul)}
.prova .nota{display:block;font-size:13px;color:var(--txt-2);line-height:1.4}

/* aviso e dica: sem verde e sem vermelho, a diferença é o peso do fundo */
.insight{
  margin-left:38px;max-width:calc(100% - 44px);
  padding:14px 18px;border-radius:var(--r-card);background:var(--azul-fundo);
  font-size:15.5px;line-height:1.5;
}
.insight--alerta{background:rgba(5,19,42,.06);border-left:3px solid var(--navy);
  border-radius:0 var(--r-card) var(--r-card) 0}
.insight strong{font-weight:700}

/* imagem no fluxo */
.figura{margin-left:38px;max-width:calc(100% - 44px);
  border:1px solid var(--borda);border-radius:var(--r-card);overflow:hidden}
.figura img{width:100%;height:auto}

/* =========================== CONTROLES =========================== */
.ctrl{margin:18px 0 8px;animation:pop .3s ease both}
.ctrl-lbl{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-2);margin:0 0 8px 20px;
}

.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;align-items:center;gap:13px;width:100%;min-height:54px;padding:12px 17px;
  border:1.5px solid var(--borda);border-radius:14px;background:var(--white);
  text-align:left;font-size:16px;font-weight:500;line-height:1.35;color:var(--txt);
  transition:border-color .16s,background .16s,transform .1s;
}
.opt .dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--borda);transition:.16s}
@media (hover:hover){
  .opt:hover{border-color:var(--azul);background:var(--azul-fundo)}
  .opt:hover .dot{border-color:var(--azul)}
}
.opt:active{transform:scale(.99)}
.opt.sel{border-color:var(--azul);background:var(--azul-fundo)}
.opt.sel .dot{border-color:var(--azul);background:var(--azul);box-shadow:inset 0 0 0 3.5px var(--white)}
.opts.locked .opt{pointer-events:none;opacity:.45}
.opts.locked .opt.sel{opacity:1}
/* a recusa não pesa igual à opção positiva */
.opt[data-tone="decline"]{color:var(--txt-2);font-weight:400}

.campo{position:relative}
.campo input{
  width:100%;height:56px;padding:0 58px 0 22px;
  border:1.6px solid var(--borda);border-radius:var(--r-campo);
  background:var(--white);color:var(--txt);
  font-family:inherit;font-size:17.5px;font-weight:500;
  font-variant-numeric:tabular-nums;
  transition:border-color .18s,box-shadow .18s;
}
.campo input::placeholder{color:var(--txt-2);font-weight:400}
.campo input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-fundo)}
.campo-wrap.err .campo input{border-color:var(--navy);border-width:2px}
.send{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--azul);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,transform .12s;
}
.send:hover{background:var(--azul-hover)}
.send:active{transform:translateY(-50%) scale(.94)}
.send[disabled]{background:rgba(5,19,42,.22);cursor:not-allowed}
.err-msg{display:none;margin:7px 0 0 20px;font-size:13.5px;font-weight:700;color:var(--erro)}
.campo-wrap.err .err-msg{display:block}
.campo-wrap + .campo-wrap{margin-top:12px}

.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:52px;padding:14px 22px;
  background:var(--azul);color:var(--white);border:1px solid var(--azul);
  border-radius:var(--r-campo);
  font-size:15.5px;font-weight:700;text-align:center;text-decoration:none;
  transition:background .16s,transform .1s;
}
.btn svg{opacity:.9;width:17px;height:17px}
.btn:hover{background:var(--azul-hover);border-color:var(--azul-hover)}
.btn:active{transform:scale(.99)}
.btn[disabled]{background:rgba(5,19,42,.22);border-color:transparent;cursor:not-allowed}
.btn-lg{min-height:56px;font-size:16.5px}
/* A oferta e o botao da VSL nascem escondidos e entram na hora certa —
   juntos, no mesmo instante. Ver `trancar` no app.js. */
.ctrl[data-espera],.oferta[data-espera]{display:none}
.ctrl[data-espera][data-liberado]{display:block}
.oferta[data-espera][data-liberado]{display:block;animation:pop .45s cubic-bezier(.2,.9,.3,1) both}

/* ============================ PAINÉIS ============================ */
.painel{
  margin-left:38px;max-width:calc(100% - 44px);
  border:1px solid var(--borda);border-radius:var(--r-card);overflow:hidden;
  background:var(--white);animation:pop .3s ease both;
}
.painel-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:14px 18px;background:var(--navy);color:var(--white);
}
.painel-top .rot{font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.66)}
.painel-top b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}

/* a nota, primeira e maior linha do documento */
.gauge{padding:18px;border-bottom:1px solid var(--borda)}
.gauge-lbl{font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-2);margin-bottom:4px}
.gauge-num{font-weight:800;font-size:clamp(3rem,15vw,4rem);line-height:.94;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.gauge-wrap{margin-top:10px}
.gauge-wrap svg{width:100%;height:auto;overflow:visible}
.g-tick{stroke:var(--borda);stroke-width:1}
.g-tick--maj{stroke:var(--txt-2)}
.g-track{stroke:rgba(5,19,42,.10);stroke-width:4;stroke-linecap:round}
.g-fill{stroke:var(--azul);stroke-width:4;stroke-linecap:round;
  transition:stroke-dashoffset 1.4s cubic-bezier(.32,.72,0,1)}
.g-pin{transition:transform 1.4s cubic-bezier(.32,.72,0,1)}
.gauge-esc{display:flex;justify-content:space-between;margin-top:8px}
.gauge-esc span{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--txt-2)}

.linhas{display:grid}
.linha{display:grid;gap:3px;padding:11px 18px;border-top:1px solid rgba(5,19,42,.07);font-size:14px}
.linha:first-child{border-top:0}
.linha dt{font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-2)}
.linha dd{font-weight:600;font-size:15px;line-height:1.3;font-variant-numeric:tabular-nums}
/* "o que falta" é o negativo da marca, não um carimbo colorido */
.linha[data-gap] dd{
  justify-self:start;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white);background:var(--navy);padding:.22rem .5rem;border-radius:8px;white-space:nowrap;
}
@media (min-width:26rem){
  .linha{grid-template-columns:9.5rem 1fr;gap:1rem;align-items:baseline}
  .linha dd{text-align:right}
  .linha[data-gap] dd{justify-self:end}
}
.painel-rodape{padding:14px 18px;background:rgba(5,19,42,.03);
  border-top:1px solid var(--borda);font-size:14px;line-height:1.45;color:var(--txt-2)}
.painel-rodape b{color:var(--txt);font-weight:700}
.linha[data-pending]{display:none}


/* =========================== RESPONSIVO =========================== */
@media (min-width:768px){
  .hdr-in{padding:0 16px}
  .chat{padding:calc(var(--hdr-h) + 40px) 24px 56px}
  .balao{font-size:18px;padding:17px 24px;max-width:min(600px,calc(100% - 44px))}
  .prova,.insight,.painel,.loader,.vsl-box,.oferta,.figura{max-width:min(600px,calc(100% - 44px))}
  .ctrl{max-width:min(600px,100%)}
}
@media (max-width:380px){
  .balao{font-size:16.5px;padding:14px 17px}
}
@media print{
  .hdr,.rodape,.ctrl{display:none}
  .painel{border:1px solid var(--navy)}
}

/* =========================================================================
   BLOCOS DO TYPE
   Estrutura copiada do fonte real (ref/type.css), com a marca trocada:
   o verde da Amazon vira o azul da LS Advisor, e os degradês do medidor e
   da barra viram traço chapado — o manual não permite degradê.
   ========================================================================= */

/* ---- faixa de valor: quanto a empresa quer captar ---- */
.faixa-wrap{margin:4px 0 0}
.faixa-valor{
  font-size:38px;line-height:1.1;font-weight:800;color:var(--azul);
  letter-spacing:-.02em;text-align:center;margin:0 0 4px;
  font-variant-numeric:tabular-nums;
}
.faixa-dica{text-align:center;font-size:13.5px;color:var(--txt-2);margin:0 0 18px}
.faixa{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:48px;padding:0;margin:0;
  background:transparent;outline:none;cursor:pointer;
}
.faixa::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:rgba(5,19,42,.12)}
.faixa::-webkit-slider-thumb{
  -webkit-appearance:none;margin-top:-13px;
  width:34px;height:34px;border-radius:50%;
  background:var(--white);border:3px solid var(--azul);
}
.faixa:active::-webkit-slider-thumb{border-color:var(--azul-hover)}
.faixa::-moz-range-track{height:8px;border-radius:99px;background:rgba(5,19,42,.12)}
.faixa::-moz-range-thumb{
  width:34px;height:34px;border-radius:50%;
  background:var(--white);border:3px solid var(--azul);
}
.faixa-esc{display:flex;justify-content:space-between;font-size:12.5px;color:var(--txt-2);margin-top:2px}

/* ---- carrossel de análise (loader) ---- */
.loader{
  margin-left:38px;max-width:calc(100% - 44px);
  border:1px solid var(--borda);border-radius:var(--r-card);
  padding:20px;background:var(--white);
}
.loader-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.loader-titulo{font-size:16.5px;font-weight:700;line-height:1.3}
.loader-pct{font-size:15px;font-weight:800;color:var(--azul);font-variant-numeric:tabular-nums}
.loader-barra{height:7px;border-radius:99px;background:rgba(5,19,42,.10);overflow:hidden;margin:0 0 14px}
.loader-barra span{display:block;height:100%;width:0;border-radius:99px;background:var(--azul)}
.li{
  display:flex;align-items:center;gap:13px;padding:9px 0;font-size:16px;
  color:var(--txt-2);opacity:.45;transition:opacity .3s,color .3s;
}
.li.at{opacity:1;color:var(--txt);font-weight:600}
.li.ok{opacity:1;color:var(--txt)}
.li .ic{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.li .chk{
  width:26px;height:26px;border-radius:50%;background:var(--azul);color:var(--white);
  display:flex;align-items:center;justify-content:center;
}
.li .chk svg{width:14px;height:14px}
.spin{
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(5,19,42,.16);border-top-color:var(--azul);
  animation:gira .7s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* ---- painel de resultado ---- */
.painel{
  margin:6px 0 0;border:1px solid var(--borda);border-radius:24px;
  background:var(--white);overflow:hidden;animation:pop .4s ease both;
}
.painel-in{padding:26px 22px}
.eyebrow{
  font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);margin:0 0 12px;
}
.h-res{font-size:26px;line-height:1.24;font-weight:800;margin:0 0 6px;letter-spacing:-.015em}
.valor-big{
  font-size:42px;line-height:1.1;font-weight:800;color:var(--navy);
  letter-spacing:-.03em;margin:14px 0 10px;font-variant-numeric:tabular-nums;
}
.gauge-wrap{display:flex;flex-direction:column;align-items:center;margin:22px 0 6px}
.gauge{width:100%;max-width:300px}
.gauge-lbl{
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--txt-2);text-align:center;margin-bottom:4px;max-width:290px;
}
.gauge-num{font-size:46px;font-weight:800;fill:var(--navy);letter-spacing:-.03em}
.gauge-esc{
  display:flex;justify-content:space-between;width:100%;max-width:300px;
  font-size:12px;color:var(--txt-2);margin-top:-6px;
}
.hr{height:1px;background:var(--borda);margin:22px 0;border:0}
.painel-texto{margin:0;font-size:17px;line-height:1.55}

/* ---- cartões numerados: substituem as fotos de banco de imagem ---- */
.bcards{display:flex;flex-direction:column;gap:12px;margin-left:38px;max-width:calc(100% - 44px)}
.bcard{border:1px solid var(--borda);border-radius:var(--r-card);padding:19px 20px;background:var(--white)}
.bcard h4{margin:0 0 12px;font-size:17.5px;font-weight:800;display:flex;align-items:center;gap:11px}
.bnum{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  background:var(--navy);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
}
.bcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.bcard li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.bcard li svg{flex:0 0 auto;margin-top:3px;width:17px;height:17px;color:var(--azul)}

/* ---- VSL ---- */
.vsl-head{font-size:20px;line-height:1.38;font-weight:800;margin:0 0 14px;letter-spacing:-.015em}
.vsl-head strong{color:var(--azul)}
.vsl-box{
  margin-left:38px;max-width:calc(100% - 44px);
  position:relative;border-radius:var(--r-card);overflow:hidden;
  background:var(--navy);aspect-ratio:16/9;
}
.vsl-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--navy)}

/* ---- oferta ---- */
.oferta{
  margin-left:38px;max-width:calc(100% - 44px);
  border:2px solid var(--azul);border-radius:24px;overflow:hidden;background:var(--white);
}
.oferta-top{background:var(--navy);color:var(--white);padding:22px}
.oferta-top .eyebrow{color:var(--white);opacity:.72;margin-bottom:10px}
.oferta-top h3{margin:0;font-size:22px;line-height:1.3;font-weight:800;letter-spacing:-.015em}
.oferta-in{padding:24px 22px}
.ancora{border:1px solid var(--borda);border-radius:var(--r-card);overflow:hidden;margin:0 0 20px}
.ancora-l{
  display:flex;justify-content:space-between;gap:12px;padding:13px 17px;
  font-size:15.5px;border-bottom:1px solid var(--borda);
}
.ancora-l:last-child{border-bottom:0}
.ancora-l span:last-child{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.ancora-l.total{background:var(--balao)}
.ancora-l.total span:last-child{text-decoration:line-through;color:var(--txt-2)}
.ancora-l.bonus{background:var(--azul-fundo);color:var(--azul)}
.ancora-l.bonus span:last-child{color:var(--azul)}
.ancora-l.final{background:var(--navy);color:var(--white);font-size:17px;font-weight:800}
.ancora-l.final span:last-child{font-size:20px}
.h-valor{font-size:19px;line-height:1.4;font-weight:800;margin:0 0 18px;letter-spacing:-.01em}
.preco{text-align:center;margin:0 0 20px}
.preco .p{
  font-size:44px;font-weight:800;color:var(--navy);letter-spacing:-.03em;
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.preco .p small{font-size:20px;font-weight:700}
.preco .c{font-size:14.5px;color:var(--txt-2);margin-top:4px}
.micro{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--txt-2);text-align:center}
.provas{display:flex;gap:12px;margin:18px 0 0}
.pbox{flex:1 1 0;border:1px solid var(--borda);border-radius:14px;padding:15px 12px;text-align:center}
.pbox b{display:block;font-size:19px;color:var(--navy);line-height:1.25;text-wrap:balance;font-weight:800}
.pbox span{font-size:13px;color:var(--txt-2);line-height:1.35;display:block;margin-top:3px}
.pbox-nota{margin:10px 0 0;font-size:12.5px;color:var(--txt-2);line-height:1.45;text-align:center}

/* ---- responsivo dos blocos novos ---- */
@media (min-width:768px){
  .painel-in,.oferta-in{padding:34px 32px}
  .oferta-top{padding:28px 32px}
  .oferta-top h3{font-size:25px}
  .h-res{font-size:32px}
  .valor-big{font-size:52px}
  .vsl-head{font-size:23px;margin-bottom:16px}
  .bcards,.vsl-box,.oferta,.loader{max-width:min(600px,calc(100% - 44px))}
}
@media (max-width:380px){
  .h-res{font-size:22px}
  .valor-big{font-size:34px}
  .oferta-top h3{font-size:20px}
  .faixa-valor{font-size:32px}
  .preco .p{font-size:36px}
  .provas{flex-direction:column}
}

/* o botao da oferta acompanha a largura do cartao */
.ctrl--oferta{margin-left:38px;max-width:calc(100% - 44px)}
@media (min-width:768px){.ctrl--oferta{max-width:min(600px,calc(100% - 44px))}}
.micro-seguro{margin:10px 0 0;font-size:12.5px;color:var(--txt-2);text-align:center;line-height:1.45}

/* =========================================================================
   LARGURA NO CELULAR
   Medido em 375 px: o balão saía com 299 px e as opções com 343 px. Os 44 px
   de folga vinham do type de referência, que os usa para o balão não encostar
   na borda. Numa coluna de 375 px isso são 12% da tela jogados fora, e a
   mensagem ficava visivelmente mais estreita que os botões logo abaixo.

   A conta: .msg ocupa 343 px (16 a 359). O avatar come 50 px e o balão volta
   12 px por cima dele, então ele começa em 54. Para terminar em 359, junto com
   os controles, ele pode ter 305 px — que é `calc(100% - 38px)`.

   Os blocos grandes (painel, oferta, cartões, análise, vídeo) perdem também o
   recuo de 38 px abaixo de 480 px: eles não são fala, são documento, e num
   celular estreito o recuo só rouba largura.
   ========================================================================= */
.balao,
.msg.cont .balao{max-width:calc(100% - 38px)}
.prova,.insight,.figura,.loader,.bcards,.vsl-box,.oferta,.ctrl--oferta{
  max-width:calc(100% - 38px);
}

@media (max-width:480px){
  .chat{padding-left:14px;padding-right:14px}
  /* documento ocupa a largura toda; fala continua recuada, como conversa */
  .prova,.insight,.figura,.loader,.bcards,.vsl-box,.oferta,.ctrl--oferta,.painel{
    margin-left:0;max-width:100%;
  }
  .painel-in{padding:22px 18px}
  .oferta-in{padding:20px 16px}
  .oferta-top{padding:20px 16px}
  .loader{padding:18px 16px}
  .bcard{padding:17px 16px}
  .ancora-l{padding:12px 14px;font-size:14.5px;gap:10px}
  .ancora-l.final{font-size:15.5px}
  .ancora-l.final span:last-child{font-size:18px}
  .li{font-size:15px;gap:11px}
  .gauge-lbl{font-size:12px}
}

/* Telas bem estreitas: o balão encosta quase na borda, senão sobra tira. */
@media (max-width:360px){
  .chat{padding-left:12px;padding-right:12px}
  .av,.av-spacer{width:42px}
  .msg.cont .av-spacer{width:30px}
  .balao,.msg.cont .balao{max-width:calc(100% - 30px);padding:13px 15px;font-size:16px}
  .opt{padding:11px 14px;font-size:15.5px;min-height:50px}
  .prova,.insight,.figura,.loader,.bcards,.vsl-box,.oferta,.ctrl--oferta,.painel{margin-left:0}
}

/* =========================================================================
   TIPOGRAFIA FLUIDA — a passagem de responsividade de verdade
   =========================================================================
   O problema não era transbordo. Rodei um banco com todos os blocos em
   ref/teste-responsivo.html e auditei 15 larguras de 320 a 1440 px: zero
   rolagem horizontal, zero elemento passando da borda, zero alvo de toque
   abaixo de 44 px.

   O problema era PROPORÇÃO. Os tamanhos eram fixos, com só dois pontos de
   quebra (768 e 380). Num iPhone SE de 320 px o título do resultado ocupava
   QUATRO linhas e o valor quase encostava nas duas bordas.

   A correção é escala fluida: cada tamanho é uma reta entre o valor em 320 px
   e o valor em 768 px, travada nas duas pontas por clamp(). Não há salto em
   nenhuma largura — o texto acompanha a tela de forma contínua, de 320 a 1440.
   As contas estão no comentário de cada linha: "A→B" é o par que gerou a reta.
   ========================================================================= */

.balao{font-size:clamp(16px, 14.57px + 0.446vw, 18px)}                 /* 16→18 */
.resp-b{font-size:clamp(15.5px, 14.79px + 0.223vw, 16.5px)}            /* 15,5→16,5 */
.opt{font-size:clamp(15px, 14.29px + 0.223vw, 16px)}                   /* 15→16 */
.btn{font-size:clamp(15px, 14.64px + 0.112vw, 15.5px)}                 /* 15→15,5 */
.campo input{font-size:clamp(16px, 14.93px + 0.335vw, 17.5px)}         /* 16→17,5 */
.faixa-valor{font-size:clamp(28px, 20.86px + 2.232vw, 38px)}           /* 28→38 */

.eyebrow{font-size:clamp(10.5px, 9.79px + 0.223vw, 11.5px)}            /* 10,5→11,5 */
.h-res{font-size:clamp(20px, 11.43px + 2.679vw, 32px)}                 /* 20→32 */
.valor-big{font-size:clamp(30px, 14.29px + 4.911vw, 52px)}             /* 30→52 */
.gauge-lbl{font-size:clamp(11px, 9.57px + 0.446vw, 13px)}              /* 11→13 */
.painel-texto{font-size:clamp(15.5px, 14.43px + 0.335vw, 17px)}        /* 15,5→17 */

.loader-titulo{font-size:clamp(15px, 13.93px + 0.335vw, 16.5px)}       /* 15→16,5 */
.li{font-size:clamp(14.5px, 13.43px + 0.335vw, 16px)}                  /* 14,5→16 */

.bcard h4{font-size:clamp(16px, 14.93px + 0.335vw, 17.5px)}            /* 16→17,5 */
.bcard li{font-size:clamp(14.5px, 13.79px + 0.223vw, 15.5px)}          /* 14,5→15,5 */

.vsl-head{font-size:clamp(17px, 12.71px + 1.339vw, 23px)}              /* 17→23 */
.oferta-top h3{font-size:clamp(18px, 13.00px + 1.562vw, 25px)}         /* 18→25 */
.ancora-l{font-size:clamp(13.5px, 12.07px + 0.446vw, 15.5px)}          /* 13,5→15,5 */
.ancora-l.final{font-size:clamp(15px, 13.57px + 0.446vw, 17px)}        /* 15→17 */
.ancora-l.final span:last-child{font-size:clamp(17px, 14.86px + 0.670vw, 20px)}
.h-valor{font-size:clamp(16px, 13.86px + 0.670vw, 19px)}               /* 16→19 */
.preco .p{font-size:clamp(32px, 23.43px + 2.679vw, 44px)}              /* 32→44 */

/* Respiro interno também é fluido: 16 px numa tela de 320 é o que 32 px é
   numa de 768. Padding fixo grande come a coluna de leitura no celular. */
.painel-in{padding:clamp(18px, 11.43px + 2.054vw, 34px) clamp(16px, 4.57px + 3.571vw, 32px)}
.oferta-in{padding:clamp(18px, 12.86px + 1.607vw, 30px) clamp(16px, 4.57px + 3.571vw, 32px)}
.oferta-top{padding:clamp(18px, 12.86px + 1.607vw, 30px) clamp(16px, 4.57px + 3.571vw, 32px)}
.loader{padding:clamp(16px, 10.29px + 1.786vw, 24px)}
.bcard{padding:clamp(16px, 13.86px + 0.670vw, 19px) clamp(15px, 11.43px + 1.116vw, 20px)}
.ancora-l{padding:clamp(11px, 9.57px + 0.446vw, 13px) clamp(13px, 10.14px + 0.893vw, 17px)}
.balao{padding:clamp(13px, 11.57px + 0.446vw, 15px) clamp(16px, 13.14px + 0.893vw, 20px)}

/* O título do resultado é o mais castigado: nome + CNPJ + frase longa. Deixa o
   navegador equilibrar as linhas e nunca partir o CNPJ ao meio. */
.h-res{text-wrap:balance;line-height:1.22}
.h-res strong{white-space:nowrap}
.valor-big{line-height:1.05;margin:12px 0 8px}

/* O medidor: o SVG já escala sozinho pelo viewBox, mas num celular estreito
   ele não pode encostar nas bordas do cartão. */
.gauge{max-width:min(300px, 100%)}
.gauge-esc{max-width:min(300px, 100%)}

/* Números longos (R$ 1.094,00 / R$ 500.000) nunca quebram no meio. */
.valor-big,.preco .p,.faixa-valor,.ancora-l span:last-child{
  white-space:nowrap;
}

/* Nas telas que substituem a conversa (a VSL), o topo sai junto: sem etapa a
   cumprir, a barra vira ruído. O chat recupera o espaço que era do cabeçalho. */
body[data-sem-etapas] .hdr{display:none}
body[data-sem-etapas] .chat{padding-top:22px}
@media (min-width:768px){body[data-sem-etapas] .chat{padding-top:32px}}

/* =========================================================================
   PAINEL DE RESULTADO — remodelado
   Medido antes: 580 px de altura num celular de 305 px, 678 num tablet. Quase
   uma tela inteira para três informações. O medidor sozinho comia 210 a 248 px
   e o título, 97 a 156.

   O que mudou:
   1. O título deixou de ser manchete. É uma FRASE de contexto — peso 600 em
      vez de 800, corpo bem menor. A mensagem é o número, não a frase.
   2. Valor e medidor passam a dividir uma linha. Sozinho, o arco ocupava a
      largura toda e 250 px de altura; ao lado do valor ele cabe em 120.
   3. A régua saiu: a escala 0%–100% já está implícita no arco.
   ========================================================================= */
.painel-in{display:flex;flex-direction:column;gap:14px}
.eyebrow{margin:0}

.h-res{
  font-size:clamp(15.5px, 13.36px + 0.670vw, 18.5px);   /* 15,5→18,5 */
  font-weight:600;line-height:1.45;letter-spacing:0;margin:0;
  color:var(--txt-2);text-wrap:pretty;
}
.h-res strong{color:var(--txt);font-weight:700;white-space:nowrap}

/* a linha do número: valor à esquerda, arco à direita */
.res-linha{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(10px, 2.86px + 2.232vw, 20px);
}
.res-valor{min-width:0;flex:1 1 auto}
.valor-big{
  font-size:clamp(27px, 20.57px + 2.009vw, 36px);       /* 27→36 */
  font-weight:800;line-height:1.05;letter-spacing:-.03em;
  color:var(--navy);font-variant-numeric:tabular-nums;margin:0;
}
.res-nota{
  margin-top:4px;font-size:clamp(10.5px, 9.43px + 0.335vw, 12px);
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-2);line-height:1.35;
}
.res-medidor{flex:0 0 auto;width:clamp(104px, 76.57px + 8.571vw, 142px)}
.res-medidor .gauge{width:100%;height:auto;display:block}
.gauge-num{font-size:62px;font-weight:800;fill:var(--navy);letter-spacing:-.03em}

.painel-texto{
  font-size:clamp(14.5px, 13.43px + 0.335vw, 16px);
  line-height:1.5;color:var(--txt-2);margin:0;
}

/* Cabe lado a lado até em 305 px: o valor pede ~150 px e o arco entra em 104,
   e a caixa útil ali tem 273. Medido, não estimado — empilhar custava 100 px
   de altura à toa. O valor encolhe mais um pouco nas telas mais estreitas
   para a linha nunca apertar. */
@media (max-width:359px){
  .valor-big{font-size:25px}
  .res-medidor{width:98px}
  .res-linha{gap:8px}
  .res-nota{font-size:10px;letter-spacing:.08em}
}