:root{
  --pine-0:#0c261d;
  --pine-1:#123527;
  --pine-2:#1a4433;
  --paper:#f6f1e3;
  --paper-2:#ece3cd;
  --paper-3:#e3d8bd;
  --ink:#182a20;
  --ink-soft:#4d5c50;
  --ink-faint:#8b9186;
  --green:#1f7a52;
  --green-hi:#279463;
  --green-deep:#155238;
  --gold:#c99a3d;
  --gold-hi:#e0b65b;
  --gold-ink:#5c4514;
  --brick:#b6533f;
  --brick-hi:#c96952;
  --brick-bg:#f3e0d6;
  --green-bg:#e7f0e6;
  --line:rgba(24,42,32,0.14);
  --line-soft:rgba(246,241,227,0.16);
  --shadow-card: 0 24px 60px -28px rgba(6,20,14,0.55);
  --shadow-soft: 0 10px 26px -16px rgba(6,20,14,0.4);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --dur: 1;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 50% -12%, var(--pine-2) 0%, var(--pine-1) 46%, var(--pine-0) 100%);
  color:var(--ink);
  font-family:'Archivo', ui-sans-serif, system-ui, sans-serif;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding: 40px 16px 64px;
}
.stage{
  width:100%;
  max-width:600px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; margin:0; text-wrap:balance;}
p{margin:0;}
button{font-family:inherit; cursor:pointer;}
a{color:inherit;}
::selection{background:var(--gold); color:var(--ink);}
:focus-visible{outline:2.5px solid var(--gold-hi); outline-offset:3px; border-radius:6px;}

.eyebrow{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-hi);
  font-weight:600;
}
.eyebrow.on-paper{color:var(--green-deep);}

.mono{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;}

/* ---------- Card shell ---------- */
.card{
  background:var(--paper);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  width:100%;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:6px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--green) 55%, var(--brick) 100%);
}

/* ---------- Screens ---------- */
.screen{ width:100%; display:none; flex-direction:column; align-items:center; gap:22px; }
.screen.active{ display:flex; animation: rise .5s cubic-bezier(.2,.7,.2,1); }
@keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* ---------- Landing ---------- */
.brandmark{
  display:flex; align-items:center; gap:10px; color:var(--paper); margin-bottom:2px;
}
.brandmark .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);}
.brandmark span{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-3);}

.gauge-hero{width:180px; height:110px;}

.headline-hero{
  color:var(--paper);
  font-size:clamp(28px,6vw,40px);
  font-weight:680;
  line-height:1.12;
  text-align:center;
  max-width:480px;
}
.headline-hero em{font-style:italic; color:var(--gold-hi);}
.sub-hero{
  color:var(--paper-3);
  text-align:center;
  font-size:16px;
  line-height:1.55;
  max-width:420px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:none; border-radius:100px;
  padding:17px 28px;
  font-size:16px; font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:active{transform:scale(.98);}
.btn-primary{
  background:linear-gradient(180deg, var(--green-hi), var(--green));
  color:#f4fbf6;
  box-shadow:0 14px 30px -12px rgba(31,122,82,0.65);
  width:100%;
}
.btn-primary:hover{filter:brightness(1.06);}
.btn-gold{
  background:linear-gradient(180deg, var(--gold-hi), var(--gold));
  color:#3a2b0c;
  box-shadow:0 14px 30px -12px rgba(201,154,61,0.65);
  width:100%;
}
.btn-gold:hover{filter:brightness(1.05);}
.btn svg{flex:none;}

.proof-row{display:flex; flex-direction:column; align-items:center; gap:10px;}
/* Avatares da prova social removidos da tela inicial: as iniciais liam como
   template e contaminavam a credibilidade. Estilos mantidos para o dia em que
   houver fotos reais de clientes.
.avatars{display:flex;}
.avatars .av{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  color:#fff; border:2.5px solid var(--pine-1);
  margin-left:-10px;
}
.avatars .av:first-child{margin-left:0;}
*/
.proof-text{color:var(--paper-3); font-size:13.5px;}
.proof-text b{color:var(--paper);}
.offer-teaser{
  font-size:12.5px; line-height:1.5; color:var(--paper-3); opacity:.72;
  text-align:center; max-width:340px; margin-top:-8px;
}
.offer-teaser b{font-weight:600; opacity:.9;}

/* ---------- Teste A/B: versao A (padrao) x versao B (pergunta 1 na tela inicial) ---------- */
html[data-v="b"] .v-a-only{display:none !important;}
html:not([data-v="b"]) .v-b-only{display:none !important;}

/* Microcopy sob o CTA (versao A) / sob as opcoes (versao B). Nao pode competir com o CTA. */
.start-note{
  margin-top:-13px;
  font-size:12px;
  color:var(--paper-3);
  opacity:.62;
  text-align:center;
}

/* Versao B: mostrador reduzido e headline menor para abrir espaco para as opcoes */
html[data-v="b"] .gauge-hero{width:108px; height:66px;}
html[data-v="b"] .headline-hero{font-size:clamp(22px,5vw,30px); max-width:420px;}
.hero-meta{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-3); opacity:.8; text-align:center;
}
.landing-q{
  font-size:clamp(17px,4.2vw,20px); font-weight:560; line-height:1.3;
  color:var(--paper); text-align:center; max-width:400px; margin-top:-6px;
}
#landing-options{width:100%; max-width:400px;}

/* ---------- Quiz ---------- */
.quiz-topbar{
  display:flex; align-items:center; gap:14px; width:100%;
}
.back-btn{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line-soft);
  background:rgba(246,241,227,0.06); color:var(--paper-3);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.back-btn[disabled]{opacity:.25; pointer-events:none;}
.progress-wrap{flex:1;}
.progress-track{
  height:8px; border-radius:100px; background:rgba(246,241,227,0.14); overflow:hidden;
  display:flex; gap:3px; padding:0;
}
.progress-seg{flex:1; background:transparent; border-radius:3px; overflow:hidden; height:100%;}
.progress-seg i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--green-hi)); transition:width .4s ease;}
.progress-label{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--paper-3); margin-top:6px; letter-spacing:.06em;
}

.q-card{padding:30px 26px 28px;}
.q-eyebrow{margin-bottom:10px;}
.q-title{font-size:clamp(21px,4.6vw,26px); font-weight:620; color:var(--ink); line-height:1.25; margin-bottom:22px;}

.options{display:flex; flex-direction:column; gap:10px;}
.opt{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; text-align:left; width:100%;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.opt:hover{border-color:var(--green-hi); background:#fdfcf7;}
.opt .ic{
  width:38px; height:38px; border-radius:11px; background:var(--paper-2);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex:none;
}
.opt .lbl{flex:1; font-size:15px; font-weight:600; color:var(--ink);}
.opt .radio{width:21px; height:21px; border-radius:50%; border:2px solid var(--paper-3); flex:none; position:relative;}
.opt.selected{border-color:var(--green); background:#f2f8f4;}
.opt.selected .radio{border-color:var(--green); background:var(--green);}
.opt.selected .radio::after{
  content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px;
  background:#fff; border-radius:50%;
}
.opt.dim{opacity:.45; pointer-events:none;}

/* ---------- Loading ---------- */
.loading-card{padding:48px 30px; align-items:center; gap:26px;}
.load-dial{width:64px; height:64px;}
.load-steps{display:flex; flex-direction:column; gap:12px; width:100%; max-width:320px;}
.load-step{
  display:flex; align-items:center; gap:11px; font-size:14px; color:var(--ink-faint);
  opacity:.35; transition:opacity .3s ease, color .3s ease;
}
.load-step.active{opacity:1; color:var(--ink-soft);}
.load-step.done{opacity:1; color:var(--ink);}
.load-step .chk{
  width:20px; height:20px; border-radius:50%; border:1.5px solid var(--paper-3); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.load-step.done .chk{background:var(--green); border-color:var(--green);}

/* ---------- Result ---------- */
.result-head{width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;}
.tag-pill{
  background:var(--brick-bg); color:var(--brick); font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 14px; border-radius:100px;
}
.result-headline{color:var(--paper); font-size:clamp(24px,5.4vw,32px); font-weight:640; line-height:1.2; max-width:480px;}
.result-headline .hi{color:var(--gold-hi); font-style:italic;}

.r-card{padding:26px; display:flex; flex-direction:column; gap:18px;}
.r-para{color:var(--ink-soft); font-size:15px; line-height:1.65;}

/* Solucao: e' o destaque da tela de resultado, entao carrega mais peso que
   o texto e a nota -- fundo verde cheio, contra o papel do card. */
.solution{
  background:var(--green-bg); border:1px solid #cfe0d2; border-left:4px solid var(--green);
  border-radius:var(--radius-md); padding:20px 18px;
  display:flex; flex-direction:column; gap:11px;
}
.sol-label{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green); font-weight:600;
}
.sol-name{font-family:'Fraunces',serif; font-size:21px; font-weight:620; color:var(--green-deep); line-height:1.2;}
.sol-text{font-size:14px; line-height:1.6; color:#3f5545;}
.solution .preview-label{font-size:11.5px; color:#6d8474; text-align:left; margin-top:2px;}
.solution .panel-mock{padding:14px; gap:14px;}
.sol-jump{
  align-self:flex-start; margin-top:2px; background:none; border:none; padding:0;
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--green);
  text-decoration:underline; text-underline-offset:3px;
}

/* score gauge */
.score-block{display:flex; align-items:center; gap:20px; padding:6px 2px;}
.score-num{font-family:'IBM Plex Mono',monospace; font-size:40px; font-weight:600; color:var(--ink); line-height:1;}
.score-num span{font-size:16px; color:var(--ink-faint); font-weight:500;}
.score-band{font-size:13px; font-weight:700; margin-top:6px;}
.score-desc{font-size:12.5px; color:var(--ink-soft); margin-top:2px; max-width:260px; line-height:1.5;}


/* preview panel */
.preview-label{font-size:12px; color:var(--ink-faint); text-align:center;}
.panel-mock{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; display:flex; gap:16px; align-items:center;}
.panel-legend{flex:1; display:flex; flex-direction:column; gap:7px;}
.leg-row{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-soft);}
.leg-dot{width:8px; height:8px; border-radius:50%; flex:none;}
.leg-row .lv{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--ink);}



/* offer */
.offer-card{
  background:linear-gradient(165deg, var(--green-deep), var(--pine-1));
  border-radius:var(--radius-lg); padding:26px; color:var(--paper);
  display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow-card);
  width:100%;
}
.offer-name{font-family:'Fraunces',serif; font-size:19px; font-weight:600;}
.price-row{display:flex; align-items:baseline; gap:10px;}
.price-old{color:var(--paper-3); text-decoration:line-through; font-size:15px; font-family:'IBM Plex Mono',monospace;}
.price-new{font-family:'IBM Plex Mono',monospace; font-size:34px; font-weight:600; color:var(--gold-hi);}
.offer-bullets{display:flex; flex-direction:column; gap:8px;}
.offer-bullets li{list-style:none; display:flex; gap:9px; font-size:13.5px; color:var(--paper-3); align-items:flex-start;}
.offer-bullets li svg{flex:none; margin-top:2px; color:var(--gold-hi);}
.guarantee-row{
  display:flex; gap:10px; align-items:center; background:rgba(246,241,227,0.08);
  border:1px solid var(--line-soft); border-radius:10px; padding:11px 13px; font-size:12.5px; color:var(--paper-3);
}
.micro{color:var(--paper-3); font-size:12px; text-align:center;}

/* FAQ */
.faq{display:flex; flex-direction:column; gap:8px;}
.faq-item{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff;}
.faq-q{
  width:100%; background:none; border:none; padding:13px 15px; display:flex; justify-content:space-between;
  align-items:center; font-size:13.5px; font-weight:600; color:var(--ink); text-align:left;
}
.faq-q .chev{transition:transform .2s ease; color:var(--ink-faint); flex:none;}
.faq-item.open .faq-q .chev{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding:0 15px 14px; font-size:13px; color:var(--ink-soft); line-height:1.55;}
.section-label{color:var(--paper-3); font-size:12px; text-align:center; letter-spacing:.04em;}

footer.credit{margin-top:8px; color:var(--pine-2); font-size:11px; text-align:center; opacity:.6;}

@media (max-width:480px){
  body{padding:24px 10px 48px;}
  .q-card{padding:24px 18px 22px;}
  .r-card{padding:20px;}
  .offer-card{padding:20px;}
  .score-block{gap:14px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important;}
}