/* ============================================================
   W & Oliveira — Move Aplicativos
   Paleta da marca:
     #033066 navy (W)   |  #faab0d amber (triângulo)
     #f0f0f0 branco texto  |  #0b1622 ink (preto suave)
     #f8f2e4 cream (papel) |  #fffdf7 paper
   ============================================================ */
:root{
  --ink:#0b1622;
  --navy:#033066;
  --navy-d:#021f44;
  --navy-l:#1b4a8a;
  --cream:#f8f2e4;
  --paper:#fffdf7;
  --amber:#faab0d;
  --amber-soft:#ffce6b;
  --green:#1f9d62;
  --green-d:#147a4a;
  --red:#dc4f37;
  --yellow:#e6a615;
  --muted:#6c7a83;
  --line:#e7ddc6;
  --shadow:0 18px 45px -22px rgba(3,30,60,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Hanken Grotesk',sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:880px;margin:0 auto;padding:0 22px}
h1,h2,h3,.display{font-family:'Bricolage Grotesque',sans-serif;line-height:1.02;letter-spacing:-.02em}
a{color:var(--navy);text-decoration:underline}
a:hover{color:var(--navy-l)}

/* ============ HEADER (barra escura com a logo) ============ */
.brand-strip{
  background:var(--navy-d);
  border-bottom:2px solid var(--amber);
  padding:14px 0;
}
.brand-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand-strip a.logo{display:inline-flex;align-items:center;text-decoration:none}
.brand-strip a.logo img{height:46px;width:auto;display:block}
.brand-strip .badge{
  font-family:'Bricolage Grotesque';font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-soft);border:1px solid rgba(250,171,13,.4);padding:6px 14px;border-radius:999px;
}
@media(max-width:640px){
  .brand-strip a.logo img{height:36px}
  .brand-strip .badge{display:none}
}

/* ============ HERO ============ */
.hero{
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(250,171,13,.22), transparent 60%),
    linear-gradient(160deg,#033066 0%, #021f44 60%, #0b1622 100%);
  color:var(--cream);
  padding:54px 0 90px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:38px;height:6px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 38px,transparent 38px 74px);opacity:.5;
}
.tag{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-soft);border:1px solid rgba(250,171,13,.4);padding:7px 14px;border-radius:999px;margin-bottom:24px}
.hero h1{font-size:clamp(2.3rem,7vw,3.9rem);font-weight:800;max-width:15ch}
.hero h1 em{color:var(--amber);font-style:normal}
.hero p.lead{margin-top:18px;font-size:clamp(1.05rem,2.5vw,1.3rem);max-width:50ch;color:#d6e0dd}
.herobtn{display:inline-block;margin-top:30px;background:var(--amber);color:#1a1100;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.1rem;padding:15px 28px;border-radius:13px;text-decoration:none;transition:transform .15s ease,filter .15s ease}
.herobtn:hover{transform:translateY(-2px);filter:brightness(1.05);color:#1a1100}
.herobtn.alt{background:transparent;border:2px solid var(--amber);color:var(--amber)}
.herobtn.alt:hover{background:var(--amber);color:#1a1100}
.freebadge{display:block;margin-top:14px;font-size:.9rem;color:#9fb2ad}

.stats{margin-top:-54px;position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 16px;box-shadow:var(--shadow)}
.stat .n{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.5rem;color:var(--navy)}
.stat .l{font-size:.8rem;color:var(--muted);margin-top:3px;font-weight:600}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

section{padding:54px 0}
.eyebrow{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;color:var(--green-d)}
h2{font-size:clamp(1.7rem,4.5vw,2.5rem);font-weight:800;margin:8px 0 6px}
.sub{color:var(--muted);font-size:1.05rem;max-width:56ch}

/* ============ GATES / Cards 2-col ============ */
.gates{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.gate{border-radius:20px;padding:26px 24px;position:relative;overflow:hidden}
.gate.easy{background:var(--paper);border:2px solid var(--green)}
.gate.hard{background:linear-gradient(160deg,#1b4a8a,#021f44);color:var(--cream)}
.gate .badge{font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;display:inline-block;margin-bottom:14px}
.gate.easy .badge{background:rgba(31,157,98,.14);color:var(--green-d)}
.gate.hard .badge{background:rgba(250,171,13,.18);color:var(--amber-soft)}
.gate h3{font-size:1.35rem;font-weight:800;margin-bottom:8px}
.gate.hard h3{color:#fff}
.gate p{font-size:.97rem}
.gate.easy p{color:#4a5a54}
.gate.hard p{color:#cdd9d5}
.gate .big{font-family:'Bricolage Grotesque';font-weight:800;font-size:3.6rem;position:absolute;right:18px;top:6px;opacity:.12}
.insight{margin-top:22px;background:#fff7e6;border-left:5px solid var(--amber);border-radius:0 14px 14px 0;padding:18px 22px;font-size:1rem}
.insight b{color:var(--navy)}
@media(max-width:720px){.gates{grid-template-columns:1fr}}

/* ============ Steps ============ */
.phase{font-family:'Bricolage Grotesque';font-weight:700;font-size:1.05rem;color:var(--navy);margin:34px 0 4px;display:flex;align-items:center;gap:10px}
.phase .dot{width:11px;height:11px;border-radius:50%;background:var(--amber)}
.steps{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.step{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px 20px 20px;display:flex;gap:18px;align-items:flex-start;
  transition:transform .18s ease, box-shadow .18s ease;
  text-decoration:none;color:inherit;
}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.step .num{flex:none;width:42px;height:42px;border-radius:12px;background:var(--navy);color:var(--amber-soft);font-family:'Bricolage Grotesque';font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.step h4{font-size:1.12rem;font-weight:800;margin-bottom:4px;font-family:'Bricolage Grotesque';color:var(--ink)}
.step p{font-size:.96rem;color:#54625c}
.step p b{color:var(--ink)}
.step .ctxt a{color:var(--navy);font-weight:700}
.pill{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:5px 11px;border-radius:999px;margin-top:9px;text-decoration:none}
.pill.now{background:rgba(31,157,98,.14);color:var(--green-d)}
.pill.now:hover{background:var(--green);color:#fff}
.pill.key{background:rgba(220,79,55,.13);color:var(--red)}
.pill.key:hover{background:var(--red);color:#fff}
.pill.go{background:var(--navy);color:#fff}
.pill.go:hover{background:var(--navy-l)}
.step .extra{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:.88rem;font-weight:700;color:var(--navy);text-decoration:none}
.step .extra:hover{color:var(--navy-l);text-decoration:underline}

/* ============ Oferta ============ */
.offer{background:linear-gradient(165deg,#fffdf7,#f0e6cb);border-radius:24px;padding:38px 32px;border:2px solid var(--line);margin-top:30px}
.offer h3{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.7rem;color:var(--navy)}
.offer .price{margin-top:18px;font-size:1.05rem;color:#3a4540}
.offer .price b{color:var(--navy)}
.offer .price .strong{display:block;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.6rem;color:var(--ink);margin-top:6px}
.offer .note{margin-top:14px;font-size:.86rem;color:var(--muted)}
.offer .ofbtn{display:inline-block;margin-top:18px;background:var(--navy);color:#fff;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.05rem;padding:14px 26px;border-radius:13px;text-decoration:none;transition:transform .15s ease,filter .15s ease}
.offer .ofbtn:hover{transform:translateY(-2px);filter:brightness(1.1);color:#fff}

/* ============ Quizwrap (formulário do questionário) ============ */
.quizwrap{background:linear-gradient(165deg,#033066,#021f44);border-radius:26px;padding:38px 30px;color:var(--cream);box-shadow:var(--shadow)}
.quizwrap .eyebrow{color:var(--amber-soft)}
.quizwrap h2{color:#fff}
.quizwrap .sub{color:#b9c7c2}
.q{margin-top:24px;border-top:1px solid rgba(255,255,255,.1);padding-top:20px}
.q:first-of-type{border-top:none}
.q .ql{font-weight:700;font-size:1.04rem;margin-bottom:12px;display:flex;gap:10px;color:#fff}
.q .ql span{color:var(--amber);font-family:'Bricolage Grotesque';font-weight:800}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#dfe9e5;border-radius:11px;padding:10px 15px;font-size:.92rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease}
.opt:hover{border-color:var(--amber)}
.opt.sel{background:var(--amber);color:#1a1100;border-color:var(--amber);font-weight:800}
.simrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.simrow.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:640px){.simrow,.simrow.three{grid-template-columns:1fr}}
.field label{display:block;font-size:.82rem;color:#aebfb9;font-weight:700;margin-bottom:6px}
.field input,.field select{width:100%;border-radius:11px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;padding:11px 13px;font-size:1rem;font-family:inherit;font-weight:600}
.field input:focus,.field select:focus{outline:none;border-color:var(--amber)}
.field select option{color:#000}
.field .hint{display:block;margin-top:4px;font-size:.78rem;color:#9fb0ab;font-weight:500}
.fipe-result{margin-top:10px;padding:10px 14px;background:rgba(250,171,13,.12);border:1px solid rgba(250,171,13,.35);border-radius:10px;font-size:.92rem;color:#ffe9b7}
.fipe-result b{color:var(--amber);font-family:'Bricolage Grotesque'}
.cta{margin-top:28px;width:100%;border:none;cursor:pointer;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.15rem;background:var(--amber);color:#1a1100;padding:17px;border-radius:14px;transition:transform .15s ease, filter .15s ease}
.cta:hover{transform:translateY(-2px);filter:brightness(1.05)}
.cta[disabled]{opacity:.6;cursor:not-allowed}

/* ============ Resultado ============ */
.resultpage{padding:50px 0 80px}
.resultcard{background:var(--paper);border-radius:20px;padding:30px 26px;box-shadow:var(--shadow);scroll-margin-top:20px}
.gauge{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ring{flex:none;width:130px;height:130px;border-radius:50%;background:conic-gradient(var(--rc,var(--green)) calc(var(--p,0)*1%), #ececdd 0);display:flex;align-items:center;justify-content:center;position:relative}
.ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--paper)}
.ring b{position:relative;font-family:'Bricolage Grotesque';font-weight:800;font-size:2.1rem}
.verdict h3{font-size:1.5rem;font-weight:800;font-family:'Bricolage Grotesque'}
.verdict p{color:#54625c;font-size:1rem;max-width:44ch;margin-top:4px}
.simbox{margin-top:22px;background:#f3eede;border-radius:14px;padding:18px 20px;display:flex;flex-wrap:wrap;gap:26px}
.simbox .k{font-size:.78rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.simbox .v{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.35rem;color:var(--navy)}
.planhead{margin-top:26px;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.15rem;color:var(--navy)}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.action{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:13px;border:1px solid var(--line);background:#fffdf7}
.action.crit{border-left:5px solid var(--red)}
.action.warn{border-left:5px solid var(--yellow)}
.action.ok{border-left:5px solid var(--green)}
.action .ico{flex:none;width:32px;height:32px;border-radius:9px;background:#f3eede;color:var(--navy);font-family:'Bricolage Grotesque';font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1rem}
.action .txt b{display:block;font-size:.99rem;color:var(--ink);margin-bottom:2px}
.action .txt span{font-size:.88rem;color:#54625c}

/* ============ Captura (formulário de lead) ============ */
.capture{margin-top:30px;background:linear-gradient(165deg,#033066,#021f44);border-radius:20px;padding:32px 28px;color:var(--cream)}
.capture h3{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.45rem;color:#fff}
.capture .cp{margin-top:6px;color:#b9c7c2;font-size:1rem;max-width:50ch}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.cfield{display:flex;flex-direction:column}
.cfield.full{grid-column:1/-1}
.cfield label{font-size:.82rem;color:#aebfb9;font-weight:700;margin-bottom:6px}
.cfield input,.cfield select{border-radius:11px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;padding:11px 13px;font-size:1rem;font-family:inherit;font-weight:600}
.cfield input:focus,.cfield select:focus{outline:none;border-color:var(--amber)}
.cfield select option{color:#000}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;margin-top:4px;font-size:.92rem;color:#cdd9d5}
.consent input{margin-top:4px}
.consent a{color:var(--amber-soft)}
.formerr{grid-column:1/-1;color:#ffd4cc;background:rgba(220,79,55,.18);padding:10px 14px;border-radius:10px;font-size:.92rem;display:none}
.sendbtn{grid-column:1/-1;margin-top:8px;background:var(--amber);color:#1a1100;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.1rem;border:none;padding:15px;border-radius:13px;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.sendbtn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.sendbtn[disabled]{opacity:.6;cursor:not-allowed}
.sent{display:none;text-align:center;padding:18px 0 6px}
.sent .big{font-size:2.6rem}
.sent h3{margin-top:8px;color:#fff}
.sent p{margin-top:6px;color:#b9c7c2}
@media(max-width:640px){.cgrid{grid-template-columns:1fr}}

/* ============ Footer ============ */
footer.foot{background:var(--navy-d);color:#cdd9d5;padding:36px 0 26px;border-top:2px solid var(--amber);margin-top:60px}
footer.foot .legal{font-size:.86rem;line-height:1.6}
footer.foot .legal b{color:#fff}
footer.foot a{color:var(--amber-soft)}
footer.foot .disc{display:block;margin-top:14px;font-size:.78rem;color:#9fb0ab}
footer.foot .footlogo{display:flex;align-items:center;gap:14px;margin-bottom:18px}
footer.foot .footlogo img{height:42px}

/* ============ Page transitions (smooth fade-in) ============ */
@keyframes fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
main, .resultpage{animation:fade-up .35s ease both}