/* ============================================================
   Mentalidade de Herdeira — Método 3R
   Direção: consultório sereno · vanilla-mainstream · static-html
   Fontes self-host woff2 subset Latin (nunca CDN)
   ============================================================ */

@font-face{
  font-family:'Newsreader';
  src:url('fonts/newsreader-var-latin.woff2') format('woff2-variations');
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Mulish';
  src:url('fonts/mulish-var-latin.woff2') format('woff2-variations');
  font-weight:200 1000; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── TOKENS ────────────────────────────────────────────── */
:root{
  --bg:#F4F1EA;
  --bg-alt:#EDE8DE;
  --surface:#FBF9F5;
  --ink:#1F1D19;
  --ink-soft:#4A463D;
  --ink-faint:#635D4B;
  --sand:#C8B89A;          /* só decoração — nunca texto */
  --sand-ink:#75603C;      /* texto em areia */
  --clay:#A8503C;          /* CTA e só o CTA */
  --clay-deep:#8A3F2E;
  --line:rgba(31,29,25,.12);

  --display:'Newsreader',Georgia,serif;
  --body:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:144px;
  --maxw:1100px; --prose:68ch;
  --r-card:4px; --r-btn:999px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bg);
  color:var(--ink-soft);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
  position:relative;
}
@media(min-width:861px){ body{padding-bottom:0} }

/* grão de papel — tira o plástico do fundo chapado */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── TIPOGRAFIA ────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);color:var(--ink);text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(2rem,7vw,3.5rem);font-weight:300;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,4vw,2.25rem);font-weight:400;line-height:1.18;margin-bottom:var(--s2)}
h3{font-family:var(--body);font-size:1.125rem;font-weight:600;color:var(--ink);line-height:1.35}
p{max-width:var(--prose)}
strong{font-weight:700;color:var(--ink)}
.micro{font-size:.8125rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
.lead{font-size:1.0625rem;color:var(--ink-soft)}
@media(min-width:861px){ .lead{font-size:1.1875rem} }

/* ── LAYOUT ────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s3);position:relative;z-index:1}
section{padding-block:var(--s5)}
@media(min-width:861px){ section{padding-block:var(--s6)} }
.alt{background:var(--bg-alt)}
.rule{border:0;border-top:1px solid var(--sand);margin-inline:auto;max-width:calc(var(--maxw) - 192px)}
.stack>*+*{margin-top:var(--s2)}
.center{text-align:center}
.center p{margin-inline:auto}

/* ── BOTÃO ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:56px;padding:1rem 2rem;
  background:var(--clay);color:#fff;
  font-family:var(--body);font-size:1rem;font-weight:700;letter-spacing:.01em;
  text-decoration:none;text-align:center;
  border:0;border-radius:var(--r-btn);cursor:pointer;
  touch-action:manipulation;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--clay-deep);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
@media(max-width:560px){ .btn{width:100%;padding-inline:1.25rem;font-size:.9375rem} }
@media (prefers-reduced-motion:reduce){ .btn{transition:none} .btn:hover{transform:none} }

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--clay);outline-offset:3px;border-radius:2px;
}

.cta-note{margin-top:var(--s1);font-size:.8125rem;color:var(--ink-faint);max-width:44ch}
.center .cta-note{margin-inline:auto}

/* ── HERO ──────────────────────────────────────────────── */
.hero{padding-block:var(--s4) var(--s5);min-height:auto}
.badge{
  display:inline-block;margin-bottom:var(--s3);
  padding:.375rem .875rem;border:1px solid var(--sand);border-radius:var(--r-btn);
  font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sand-ink);
}
.hero h1{margin-bottom:var(--s2);max-width:16ch}
.hero .lead{margin-bottom:var(--s3);max-width:52ch}
.hero-grid{display:grid;gap:var(--s4)}
@media(min-width:861px){
  .hero{padding-block:var(--s5) var(--s6)}
  .hero-grid{grid-template-columns:1.15fr .85fr;align-items:center;gap:var(--s5)}
}
.hero-fig{margin:0}
.hero-fig img{display:block;width:100%;height:auto;border-radius:var(--r-card);border:1px solid var(--line)}
.hero-fig figcaption{margin-top:var(--s1);font-size:.75rem;color:var(--ink-faint)}

/* ── CARDS ─────────────────────────────────────────────── */
.grid{display:grid;gap:var(--s2)}
@media(min-width:641px){ .grid-2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:861px){ .grid-3{grid-template-columns:repeat(3,1fr)} }
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s3);
}
.card h3{margin-bottom:.5rem}
.card p{font-size:.9375rem;max-width:none}

/* ── O ÍNDICE DOS PADRÕES (elemento inesquecível) ──────── */
.index-list{list-style:none;border-top:1px solid var(--sand)}
.index-list li{
  display:grid;grid-template-columns:3.5rem 1fr;gap:var(--s2);
  align-items:baseline;
  padding-block:var(--s3);border-bottom:1px solid var(--sand);
}
.index-num{
  font-family:var(--body);font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sand-ink);
  font-variant-numeric:tabular-nums;
}
.index-name{font-family:var(--display);font-size:clamp(1.375rem,3.5vw,1.875rem);font-weight:400;color:var(--ink);line-height:1.2;display:block;margin-bottom:.25rem}
.index-desc{font-size:.9375rem;color:var(--ink-soft);max-width:56ch}
@media(min-width:861px){ .index-list li{grid-template-columns:5rem 1fr;gap:var(--s3)} }

/* ── PASSOS 3R ─────────────────────────────────────────── */
.step{border-left:2px solid var(--sand);padding-left:var(--s3)}
.step .micro{display:block;margin-bottom:.375rem;color:var(--sand-ink)}
.step h3{font-family:var(--display);font-size:1.375rem;font-weight:400;margin-bottom:.5rem}

/* ── CRONOGRAMA ────────────────────────────────────────── */
.days{list-style:none;display:grid;gap:var(--s1)}
@media(min-width:641px){ .days{grid-template-columns:repeat(3,1fr);gap:var(--s2)} }
.days li{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s2);display:flex;gap:.75rem;align-items:baseline;
}
.days b{
  font-family:var(--body);font-size:.75rem;font-weight:700;letter-spacing:.08em;
  color:var(--sand-ink);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.days span{font-size:.9375rem;color:var(--ink-soft)}

/* ── AUTORIDADE ────────────────────────────────────────── */
.bio{display:grid;gap:var(--s3)}
@media(min-width:861px){ .bio{grid-template-columns:.8fr 1.2fr;gap:var(--s5);align-items:start} }
.bio img{display:block;width:100%;height:auto;border-radius:var(--r-card);border:1px solid var(--line)}

/* ── PROVA SOCIAL ──────────────────────────────────────── */
.proof{display:grid;gap:var(--s2)}
@media(min-width:861px){ .proof{grid-template-columns:repeat(2,1fr)} }
.quote{
  background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--sand);
  border-radius:var(--r-card);padding:var(--s3);
}
.quote p{font-size:.9375rem;color:var(--ink-soft);max-width:none}
.quote footer{margin-top:var(--s2);font-size:.8125rem;color:var(--ink-faint)}
.placeholder{
  border:1px dashed var(--sand);background:transparent;
  border-left:1px dashed var(--sand);
}
.placeholder p{color:var(--ink-faint);font-style:italic}

/* ── OFERTA ────────────────────────────────────────────── */
.offer{max-width:640px;margin-inline:auto}
.stack-list{list-style:none;margin-block:var(--s3)}
.stack-list li{
  display:flex;justify-content:space-between;gap:var(--s2);align-items:baseline;
  padding-block:var(--s2);border-bottom:1px solid var(--line);
}
.stack-list .it{flex:1}
.stack-list .it b{display:block;font-family:var(--display);font-size:1.125rem;font-weight:500;color:var(--ink);margin-bottom:.125rem}
.stack-list .it span{font-size:.875rem;color:var(--ink-faint)}
.stack-list .vl{
  font-family:var(--body);font-weight:600;color:var(--ink-faint);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.stack-total{display:flex;justify-content:space-between;gap:var(--s2);padding-top:var(--s2);font-size:.9375rem;color:var(--ink-faint)}
.stack-total b{font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.price{text-align:center;padding-block:var(--s3)}
.price .micro{display:block;margin-bottom:.375rem}
.price .now{
  font-family:var(--display);font-size:clamp(2.75rem,9vw,3.75rem);font-weight:500;
  color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;display:block;
}
.price .split{margin-top:.375rem;font-size:.9375rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.anchor-note{margin-top:var(--s3);font-size:.875rem;color:var(--ink-faint);text-align:center;margin-inline:auto;max-width:52ch}
.pay{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:var(--s3);font-size:.75rem;color:var(--ink-faint)}
.pay span{border:1px solid var(--line);border-radius:var(--r-card);padding:.25rem .625rem}

/* ── GARANTIA ──────────────────────────────────────────── */
.guarantee{max-width:620px;margin-inline:auto;text-align:center}
.seal{
  width:64px;height:64px;margin:0 auto var(--s3);
  border:1px solid var(--sand);border-radius:50%;
  display:grid;place-items:center;color:var(--sand-ink);
}
.seal svg{width:28px;height:28px}

/* ── FAQ ───────────────────────────────────────────────── */
.faq{max-width:var(--prose);margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding-block:var(--s2);
  font-family:var(--body);font-weight:600;color:var(--ink);font-size:1rem;
  display:flex;justify-content:space-between;gap:var(--s2);align-items:center;
  min-height:56px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.5rem;color:var(--sand-ink);line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:var(--s2);font-size:.9375rem;max-width:none}

/* ── STICKY CTA MOBILE ─────────────────────────────────── */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:none;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:.75rem var(--s3) calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(244,241,234,.96);border-top:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.sticky .lbl{font-size:.8125rem;color:var(--ink-faint);line-height:1.3}
.sticky .lbl b{display:block;font-size:1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.sticky .btn{min-height:48px;padding:.75rem 1.25rem;font-size:.875rem;width:auto;flex-shrink:0}
.sticky.on{display:flex}
@media(min-width:861px){ .sticky{display:none!important} }

/* ── RODAPÉ ────────────────────────────────────────────── */
footer.site{padding-block:var(--s4);border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-faint)}
footer.site a{color:var(--ink-faint);text-decoration:underline;text-underline-offset:2px}
footer.site a:hover{color:var(--ink)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1)}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}

/* ── MOTION (progressive enhancement de verdade) ────────
   A regra de esconder é escopada em .js, classe que só existe se o script
   inline do <head> rodar. Sem JS, nada fica invisível. */
.js .js-rv{opacity:0;transform:translateY(12px)}
.js .js-rv.in{opacity:1;transform:none;transition:opacity .38s cubic-bezier(.2,.7,.2,1),transform .38s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
  .js .js-rv,.js .js-rv.in{opacity:1;transform:none;transition:none;transition-delay:0s!important}
}

/* âncoras não somem atrás da barra fixa */
[id]{scroll-margin-top:var(--s3)}
