/* Fusca Clássico — landing do Guia
   Paleta e tipografia seguem a CAPA do produto (verde-floresta, creme, laranja),
   com o verde-pinheiro e a ferrugem do canal como apoio. */
:root{
  --ink:#14261F;          /* texto sobre creme */
  --forest-900:#0C271E;   /* topo da capa */
  --forest-800:#123D2F;
  --forest-700:#174F3D;   /* base da capa */
  --pine:#2F6F62;         /* verde do logo */
  --cream:#F6EED8;        /* creme da capa */
  --paper:#FBF7EA;        /* cartões */
  --paper-2:#F1E8CF;
  --orange:#E88030;       /* CTA da capa */
  --orange-700:#C9661B;
  --rust:#B5451B;         /* ênfase sobre creme (contraste AA) */
  --line:rgba(20,38,31,.14);
  --muted:#4A574F;
  --serif:"Gelasio",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:14px;
  --shadow:0 10px 30px rgba(8,24,18,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem)}
h1 em{font-style:italic;font-weight:500;color:var(--orange)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.wrap--narrow{width:min(760px,100% - 32px)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

/* rótulo em caixa alta, como "GUIA COMPLETO DO FUSCA…" da capa */
.eyebrow{font:700 .78rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);margin:0 0 1rem;display:flex;align-items:center;gap:.8rem}
.eyebrow::after{content:"";width:46px;height:3px;background:var(--orange);display:block}
.eyebrow--rust{color:var(--rust)}
.eyebrow--rust::after{background:var(--rust)}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--orange);color:var(--ink);font:700 1rem/1.2 var(--sans);text-decoration:none;padding:.95em 1.5em;border-radius:12px;border:2px solid var(--orange);transition:transform .15s,background .15s,box-shadow .15s;cursor:pointer;text-align:center}
.btn:hover{background:#F08F44;transform:translateY(-1px);box-shadow:0 8px 20px rgba(232,128,48,.35)}
.btn--lg{font-size:1.05rem;padding:1.05em 1.7em}
.btn--sm{padding:.6em 1.05em;font-size:.9rem}
.btn--block{width:100%}
.btn--ghost{background:transparent;color:var(--cream);border-color:rgba(246,238,216,.55)}
.btn--ghost:hover{background:rgba(246,238,216,.1);box-shadow:none}
.btn--ghost-dark{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost-dark:hover{background:var(--ink);color:var(--cream);box-shadow:none}

/* cabeçalho */
.top{position:sticky;top:0;z-index:50;background:rgba(12,39,30,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(246,238,216,.12)}
.top__in{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream);font:500 1.15rem var(--serif);margin-right:auto}
.brand img{border-radius:8px}
.brand b{color:var(--orange)}
.nav{display:flex;gap:22px}
.nav a{color:var(--cream);text-decoration:none;font-size:.92rem;opacity:.85}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--orange)}

/* hero */
.hero{position:relative;color:var(--cream);background:linear-gradient(180deg,var(--forest-900) 0%,var(--forest-800) 55%,var(--forest-700) 100%);overflow:hidden;padding:clamp(40px,7vw,88px) 0 0}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);align-items:center;padding-bottom:clamp(56px,8vw,96px)}
.lead{font-size:1.12rem;color:rgba(246,238,216,.88);max-width:58ch}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:1.6rem 0 2rem}
.cta-row--center{justify-content:center}
.stats{list-style:none;margin:0;padding:18px 22px;display:flex;flex-wrap:wrap;gap:12px 34px;background:rgba(12,38,29,.7);border:1.5px solid rgba(246,238,216,.7);border-radius:16px;width:fit-content}
.stats li{display:flex;flex-direction:column;line-height:1.1}
.stats b{font:700 2.1rem var(--serif);color:var(--orange)}
.stats span{font-size:.86rem;font-weight:600}
.hero__art{position:relative;display:flex;justify-content:center}
.halo{position:absolute;inset:8% -8% 8%;border-radius:50%;background:radial-gradient(closest-side,rgba(246,238,216,.18),rgba(246,238,216,0) 72%)}
.cover{position:relative;width:min(380px,82%);border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px rgba(246,238,216,.18);transform:rotate(2deg)}
/* faixa diagonal do rodapé da capa */
.stripes{height:34px;background:repeating-linear-gradient(120deg,rgba(255,255,255,.07) 0 22px,rgba(255,255,255,0) 22px 44px),var(--forest-700);border-top:1px solid rgba(255,255,255,.06)}

/* seções */
.sec{padding:clamp(56px,8vw,104px) 0}
.sec--cream{background:var(--cream)}
.sec--paper{background:var(--paper-2)}
.sec--green{background:linear-gradient(180deg,var(--forest-900),var(--forest-800));color:var(--cream)}
.sec__lead{font-size:1.1rem;color:var(--muted);max-width:62ch;margin-bottom:2.2rem}
.sec__lead--light{color:rgba(246,238,216,.82)}
.small{font-size:.88rem;color:var(--muted);margin-top:.8rem}
.small--light{color:rgba(246,238,216,.75);margin-top:1.4rem}
.grid{display:grid;gap:18px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px}

/* dores */
.pain{position:relative;border-left:5px solid var(--orange)}
.pain__n{font:700 .8rem var(--sans);letter-spacing:.15em;color:var(--rust)}
.pain h3{margin:.35em 0 .5em}
.pain p{margin:0;color:var(--muted);font-size:.98rem}
.payoff{font:700 clamp(1.5rem,3.4vw,2.3rem)/1.15 var(--serif);text-align:center;margin:2.6rem 0 0;color:var(--forest-800)}

/* você sabia */
.car{position:relative;max-width:900px;margin:0 auto 2rem}
.car::before{content:"";position:absolute;inset:-14% 6% -6%;border-radius:50%;background:radial-gradient(closest-side,rgba(246,238,216,.14),rgba(246,238,216,0) 75%)}
.car img{position:relative;width:100%}
.hot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;background:transparent;cursor:pointer;padding:0}
.hot i{position:absolute;inset:11px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px var(--cream)}
.hot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--orange);animation:pulse 2s ease-out infinite}
.hot.is-active i{background:var(--cream);box-shadow:0 0 0 3px var(--orange)}
@keyframes pulse{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.25);opacity:0}}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fact{background:var(--cream);color:var(--ink);border-radius:var(--r);padding:20px 22px 18px;border-left:6px solid var(--orange);opacity:.8;transition:opacity .2s,transform .2s;cursor:default}
.fact.is-active{opacity:1;transform:translateY(-4px);box-shadow:var(--shadow)}
.fact__k{font:700 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin:0 0 .4rem}
.fact h3{font-size:1.12rem;margin-bottom:.4em}
.fact p:last-child{margin:0;font-size:.95rem;color:var(--muted)}

/* conteúdo */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start}
.split--even{grid-template-columns:1fr 1fr}
.parts{display:grid;gap:10px}
.part{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.part summary{list-style:none;cursor:pointer;padding:16px 20px;font:700 1.12rem var(--serif);display:flex;align-items:baseline;gap:14px;position:relative}
.part summary::-webkit-details-marker{display:none}
.part summary span{font:700 .72rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--rust);min-width:58px}
.part summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-52%);font:500 1.6rem var(--sans);color:var(--rust)}
.part[open] summary::after{content:"–"}
.part ol{margin:0;padding:0 20px 18px 62px;color:var(--muted);font-size:.98rem}
.part li{padding:3px 0}
.part__note{font-size:.92rem;color:var(--muted);margin:.4rem 4px 0}
.how{background:var(--forest-800);color:var(--cream);border-radius:var(--r);padding:28px;position:sticky;top:90px}
.how h3{font-size:1.35rem}
.how p{margin:1rem 0 .4rem;color:rgba(246,238,216,.85)}
.levels,.ticks{list-style:none;margin:0;padding:0}
.levels li{padding:10px 14px;margin-bottom:8px;background:rgba(246,238,216,.08);border-radius:10px;font-size:.97rem}
.levels b{color:var(--orange)}
.ticks li{position:relative;padding:6px 0 6px 28px;font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:0;top:.75em;width:14px;height:8px;border-left:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:rotate(-45deg) translateY(-50%)}
.ticks--big li{font-size:1.06rem;padding:9px 0 9px 32px;color:var(--ink)}
.ticks--big li::before{border-color:var(--pine)}

/* amostra */
.sample{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:center}
.sample .lead{margin-bottom:1rem}
.sample .small{color:rgba(246,238,216,.75)}
.profiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.profiles li{background:var(--cream);color:var(--ink);border-radius:var(--r);padding:18px;border-top:5px solid var(--orange)}
.profiles b{display:block;font:700 1.3rem var(--serif);margin-bottom:.3em}
.profiles span{font-size:.92rem;color:var(--muted);line-height:1.45;display:block}

/* páginas */
.shots{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 22px;margin:0 -4px}
.shots figure{margin:0;flex:0 0 min(300px,72vw);scroll-snap-align:start}
.shots img{border-radius:6px;box-shadow:0 6px 22px rgba(20,38,31,.22);border:1px solid var(--line);background:#fff}
.shots figcaption{font-size:.88rem;color:var(--muted);margin-top:10px;line-height:1.4}

/* confiança */
.trust{border-top:4px solid var(--pine);padding-top:18px}
.trust p{color:var(--muted);font-size:.98rem}
.not{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.not p:last-child{margin:0;color:var(--muted)}
.not p{color:var(--ink)}

/* bônus */
.bonus{background:rgba(246,238,216,.07);border:1px solid rgba(246,238,216,.2);border-radius:var(--r);padding:24px}
.bonus h3{margin:.7em 0 .4em}
.bonus p{margin:0;color:rgba(246,238,216,.82);font-size:.97rem}
.tag{display:inline-block;background:var(--orange);color:var(--ink);font:700 .7rem var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:99px}

/* preço */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.plans{display:grid;grid-template-columns:1fr 1.12fr;gap:22px;max-width:920px;margin:1.6rem auto 2.4rem;align-items:stretch}
.plan{position:relative;background:linear-gradient(180deg,var(--forest-800),var(--forest-900));color:var(--cream);border:1px solid rgba(246,238,216,.16);border-radius:20px;padding:34px 28px 28px;display:flex;flex-direction:column;text-align:center}
.plan--best{border:2px solid var(--orange);box-shadow:0 0 0 4px rgba(232,128,48,.14),var(--shadow);padding-top:40px}
.plan h3{font-size:1.6rem;margin-bottom:.15em;text-transform:uppercase;letter-spacing:.02em}
.plan__what{color:rgba(246,238,216,.72);font-size:.95rem;margin-bottom:.8rem}
.price{margin:.2rem 0 .1rem;display:flex;justify-content:center;line-height:1}
.price span:not(.sr){display:inline-flex;align-items:flex-start;gap:6px}
.price i{font:700 1.5rem var(--serif);font-style:normal;color:var(--orange);margin-top:.45rem}
.price b{font:700 clamp(4rem,9vw,5.2rem) var(--serif);color:var(--cream);letter-spacing:-.03em}
.price em{font:700 1.7rem var(--serif);font-style:normal;color:var(--orange);margin-top:.6rem}
.plan__note{font-size:.85rem;color:rgba(246,238,216,.65);margin:.5rem 0 1rem}
.plan__pill{align-self:center;background:rgba(47,111,98,.45);border:1px solid rgba(246,238,216,.22);color:#BFE6D8;font:700 .74rem var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:8px 18px;border-radius:99px;margin:.9rem 0 1.1rem}
.plan__list{list-style:none;padding:0;margin:0 0 1.4rem;text-align:left;font-size:.95rem;flex:1;border-top:1px solid rgba(246,238,216,.14);padding-top:14px}
.plan__list li{padding:7px 0 7px 30px;position:relative;line-height:1.45}
.plan__list li::before{content:"";position:absolute;left:3px;top:.95em;width:12px;height:7px;border-left:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:rotate(-45deg)}
.plan__list b{color:#fff}
.plan__was{margin:.2rem 0 .1rem;font-size:.9rem;color:rgba(246,238,216,.72)}
.plan__was s{color:rgba(246,238,216,.9);text-decoration-color:var(--orange);text-decoration-thickness:2px}
.plan--best .plan__note{margin:.1rem 0 .9rem}
.val{display:inline-block;white-space:nowrap;margin-left:.35em;padding:0 .55em;border-radius:99px;background:rgba(246,238,216,.1);color:rgba(246,238,216,.72);font:600 .74rem/1.7 var(--sans)}
.plans__foot{text-align:center;max-width:62ch;margin:-1rem auto 2rem}
.btn--two{flex-direction:column;gap:.15em;padding:.8em 1.2em}
.btn--two small{font:600 .76rem var(--sans);opacity:.8;letter-spacing:.01em}
.ribbon{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--orange);color:var(--ink);font:700 .74rem var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:7px 18px;border-radius:99px;white-space:nowrap;box-shadow:0 6px 16px rgba(232,128,48,.35)}
.guarantee{max-width:760px;margin:0 auto;display:flex;gap:18px;align-items:center;background:var(--paper);border:1.5px dashed var(--pine);border-radius:var(--r);padding:20px 24px;color:var(--pine)}
.guarantee h3{margin:0 0 .2em;color:var(--ink)}
.guarantee p{margin:0;color:var(--muted);font-size:.98rem}
.guarantee svg{flex:none}

/* faq */
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;font:700 1.05rem var(--sans);position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-52%);font:500 1.6rem var(--sans);color:var(--rust)}
.qa[open] summary::after{content:"–"}
.qa p{margin:0 0 18px;color:var(--muted)}

/* final */
.final{background:linear-gradient(180deg,var(--forest-800),var(--forest-900));color:var(--cream);text-align:center;padding-top:clamp(56px,8vw,96px)}
.final__in{padding-bottom:clamp(40px,6vw,72px)}
.final h2{font-size:clamp(2rem,5vw,3.4rem)}
.final .lead{margin-inline:auto}

/* rodapé */
.foot{background:var(--forest-900);color:rgba(246,238,216,.8);padding:40px 0 100px;font-size:.9rem}
.foot__in{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid rgba(246,238,216,.15);margin-bottom:22px}
.foot__brand{display:flex;gap:14px;align-items:center}
.foot__brand img{border-radius:10px}
.foot__brand b{font:700 1.2rem var(--serif);color:var(--cream)}
.foot__brand p{margin:0}
.foot__links{display:flex;flex-direction:column;gap:6px}
.foot a{color:var(--cream)}
.foot__legal p{font-size:.82rem;color:rgba(246,238,216,.62);max-width:90ch}

/* barra fixa no celular + aviso */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(12,39,30,.96);backdrop-filter:blur(8px);color:var(--cream);font-size:.88rem;line-height:1.25;transform:translateY(110%);transition:transform .25s;border-top:1px solid rgba(246,238,216,.18)}
.sticky.is-on{transform:none}
.sticky b{display:block}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:80;font-size:.92rem;max-width:90vw;text-align:center}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* aparecer ao rolar (só se o JS ligar a classe) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.js .reveal.is-in{opacity:1;transform:none}

@media (max-width:960px){
  .nav{display:none}
  .grid--4{grid-template-columns:1fr 1fr}
  .grid--3{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .split,.split--even,.sample{grid-template-columns:1fr}
  .how{position:static}
}
@media (max-width:760px){
  body{font-size:16px}
  .hero__grid{grid-template-columns:1fr}
  .hero__art{order:-1}
  .cover{width:min(240px,62%)}
  .hero{padding-top:28px}
  .stats{gap:10px 22px;padding:14px 16px}
  .stats b{font-size:1.7rem}
  .grid--4{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan--best{order:-1}
  .profiles{grid-template-columns:1fr 1fr}
  .sticky{display:flex}
  .btn--lg{width:100%}
  .cta-row .btn{width:100%}
  .guarantee{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}