/* ===== Plano de Aporte — página de vendas =====
   Tokens portados de design-system/tokens/*.css, mesmo bloco usado pelos
   outros apps do repositório. Registro do produto: página preta, navy como
   único acento, quatro tamanhos de tipo, sem emoji e sem ilustração. */
:root{
  --navy-700:#17223a; --navy-600:#253551; --navy-500:#35496e; --navy-400:#4c6795;
  --navy-300:#7a93be; --navy-200:#9db4d4;

  --accent-primary:var(--navy-600);
  --accent-primary-bright:var(--navy-500);
  --accent-primary-deep:var(--navy-700);
  --accent-ink:var(--navy-200);

  --black:#000000; --gray-1000:#050505; --gray-950:#0d0d0c; --gray-900:#121111;
  --gray-850:#171616; --gray-800:#1f1e1e; --gray-700:#2a2829; --gray-600:#3a3837;
  --gray-500:#4c4948; --gray-400:#6b6763; --gray-300:#8f8b86; --gray-200:#b3b0aa;
  --gray-100:#e0e0db; --white:#ffffff;

  --surface-page:var(--black);
  --surface-card:var(--gray-950);
  --surface-card-hover:var(--gray-900);
  --surface-raised:#1a1918;
  --surface-input:#141313;
  --surface-navy-wash:#0a0f1a;

  --text-primary:var(--white);
  --text-secondary:var(--gray-100);
  --text-muted:var(--gray-300);
  --text-on-accent:var(--white);
  --text-accent:var(--accent-ink);

  --border-subtle:#1c1b1b;
  --border-default:var(--gray-700);
  --border-accent:var(--navy-500);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px;
  --card-pad:20px; --grid-gap:16px;

  --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:24px;
  --radius-pill:999px; --radius-card:18px; --radius-control:12px;

  --shadow-card:0 1px 0 rgba(255,255,255,.03),0 12px 32px rgba(0,0,0,.6);
  --shadow-accent:0 8px 24px rgba(37,53,81,.5);

  --dur-fast:120ms; --dur-base:180ms; --dur-slow:320ms;
  --ease-standard:cubic-bezier(.2,.6,.2,1);

  --fs-heading:24px; --fs-subheading:16px; --fs-body:14px; --fs-additional:12px; --fs-micro:11px;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-bold:700;

  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;

  --gradient-sheen:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.14) 52%,rgba(255,255,255,0) 62%);
  --glow-accent:radial-gradient(60% 60% at 0% 50%,rgba(53,73,110,.6) 0%,rgba(53,73,110,0) 70%);

  color-scheme: dark;
}

/* ===== Base ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--surface-page); color:var(--text-primary);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-weight:var(--fw-medium); letter-spacing:-0.01em; margin:0; }
p{ margin:0; }
strong{ font-weight:var(--fw-medium); color:var(--text-primary); }
em{ font-style:normal; color:var(--text-accent); }
ul{ margin:0; padding:0; list-style:none; }
.muted{ color:var(--text-muted); }
/* O atributo hidden vem do stylesheet do navegador e perde para qualquer
   `display` declarado aqui — sem esta regra, .countdown e .sticky-cta
   apareceriam mesmo marcados como hidden. */
[hidden]{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent-primary); color:var(--white); padding:12px 20px; border-radius:0 0 var(--radius-md) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid rgba(157,180,212,.6); outline-offset:2px; border-radius:4px; }

/* ===== Marca ===== */
/* A assinatura aprovada da marca é um desenho só — monograma e nome juntos —,
   e não mais símbolo + texto em Cormorant. currentColor a mantém branca sobre
   o fundo escuro da página. */
.brand{ display:flex; align-items:center; }
.brand .signature{ width:176px; max-width:100%; height:auto; color:var(--text-primary); display:block; }
@media (max-width:560px){ .brand .signature{ width:148px; } }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px; border-bottom:1px solid var(--border-subtle);
  background:rgba(0,0,0,.82); backdrop-filter:blur(10px);
}
.header-actions{ display:flex; align-items:center; gap:14px; }
.header-link{ font-size:13px; color:var(--text-muted); }
.header-link:hover{ color:var(--text-primary); }
@media (max-width:560px){ .header-link{ display:none; } .site-header{ padding:12px 16px; } }

/* ===== Botões ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 22px; border-radius:var(--radius-pill); border:none;
  font-family:inherit; font-size:14px; font-weight:var(--fw-medium); cursor:pointer;
  text-align:center; white-space:nowrap;
  transition:background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.btn-primary{ background:var(--accent-primary); color:var(--text-on-accent); box-shadow:var(--shadow-accent); }
.btn-primary:hover{ background:var(--accent-primary-bright); }
.btn-primary:active{ background:var(--accent-primary-deep); }
.btn-ghost{ background:transparent; color:var(--text-secondary); border:1px solid var(--border-default); }
.btn-ghost:hover{ background:var(--surface-card-hover); color:var(--text-primary); }
.btn-sm{ height:36px; padding:0 16px; font-size:13px; box-shadow:none; }
.btn-lg{ height:54px; padding:0 30px; font-size:15px; }
.btn-block{ width:100%; }
@media (max-width:560px){ .btn-lg{ width:100%; } }

/* ===== Hero ===== */
.hero{ position:relative; padding:84px 24px 72px; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background:var(--glow-accent); pointer-events:none; }
.hero-inner{ position:relative; max-width:860px; margin:0 auto; text-align:center; }
.hero-eyebrow{
  font-size:var(--fs-micro); letter-spacing:.18em; color:var(--text-muted);
  margin-bottom:20px;
}
.hero-title{ font-size:clamp(30px,5.4vw,52px); line-height:1.12; font-weight:var(--fw-light); letter-spacing:-0.02em; }
.hero-lead{ margin-top:22px; font-size:clamp(15px,2.1vw,18px); color:var(--text-muted); max-width:660px; margin-left:auto; margin-right:auto; }
.hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.hero-meta{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  margin-top:24px; font-size:var(--fs-additional); color:var(--text-muted);
}
@media (max-width:560px){ .hero{ padding:56px 16px 48px; } .hero-ctas{ flex-direction:column; } }

/* ===== Seções ===== */
.section{ max-width:1100px; margin:0 auto; padding:72px 24px; border-top:1px solid var(--border-subtle); }
.section-narrow{ max-width:800px; }
.eyebrow{ font-size:var(--fs-micro); letter-spacing:.18em; color:var(--text-muted); margin-bottom:14px; }
.section-title{ font-size:clamp(24px,3.6vw,34px); line-height:1.2; font-weight:var(--fw-light); letter-spacing:-0.02em; max-width:760px; }
.section-lead{ margin-top:16px; color:var(--text-muted); font-size:16px; max-width:680px; }
@media (max-width:560px){ .section{ padding:52px 16px; } }

/* ===== Problema ===== */
.symptom-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); margin-top:36px; }
.symptom{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-card); padding:var(--card-pad); box-shadow:var(--shadow-card);
}
.symptom .n{ font-size:var(--fs-additional); color:var(--text-accent); font-weight:var(--fw-bold); margin-bottom:10px; letter-spacing:.06em; }
.symptom p{ font-size:15px; color:var(--text-secondary); }
@media (max-width:820px){ .symptom-grid{ grid-template-columns:1fr; } }

.callout{
  margin-top:24px; padding:22px 24px; border-radius:var(--radius-lg);
  background:var(--surface-card); border:1px solid var(--border-subtle);
}
.callout-accent{ background:var(--surface-navy-wash); border-color:var(--border-accent); }
.callout-label{ font-size:var(--fs-micro); letter-spacing:.18em; color:var(--text-muted); margin-bottom:10px; }
.callout p{ font-size:15px; color:var(--text-secondary); }

/* ===== Simulador ===== */
.sim-card{
  margin-top:32px; padding:28px; border-radius:var(--radius-card);
  background:var(--surface-card); border:1px solid var(--border-subtle); box-shadow:var(--shadow-card);
}
.sim-label{ display:block; font-size:var(--fs-additional); color:var(--text-muted); }
.sim-value{
  display:block; font-size:clamp(32px,6vw,44px); font-weight:var(--fw-bold);
  letter-spacing:-0.02em; margin:6px 0 20px; font-variant-numeric:tabular-nums;
}
.sim-range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:var(--radius-pill); background:var(--gray-800); outline:none; }
.sim-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--accent-primary); border:2px solid var(--navy-200); cursor:pointer; box-shadow:var(--shadow-accent);
}
.sim-range::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; background:var(--accent-primary);
  border:2px solid var(--navy-200); cursor:pointer;
}
.sim-scale{ display:flex; justify-content:space-between; margin-top:8px; font-size:var(--fs-micro); color:var(--text-muted); }
.sim-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); margin-top:26px; }
.sim-cell{ background:var(--surface-raised); border-radius:var(--radius-md); padding:16px; }
.sim-cell-label{ font-size:var(--fs-additional); color:var(--text-muted); margin-bottom:6px; }
.sim-cell-value{ font-size:20px; font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.sim-note{ margin-top:18px; font-size:var(--fs-additional); color:var(--text-muted); line-height:1.6; }
@media (max-width:640px){ .sim-grid{ grid-template-columns:1fr; } .sim-card{ padding:20px; } }

/* ===== Método ===== */
.method-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); margin-top:36px; align-items:start; }
.method-card{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-card); padding:26px 24px; box-shadow:var(--shadow-card);
}
.method-n{
  width:36px; height:36px; border-radius:var(--radius-pill);
  background:var(--accent-primary); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:var(--fw-bold); margin-bottom:16px;
}
.method-card h3{ font-size:20px; margin-bottom:10px; }
.method-card > p{ font-size:14px; color:var(--text-muted); }
.method-list{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border-subtle); display:flex; flex-direction:column; gap:9px; }
.method-list li{ font-size:13px; color:var(--text-secondary); padding-left:16px; position:relative; }
.method-list li::before{ content:"·"; position:absolute; left:2px; color:var(--text-accent); font-weight:700; }
@media (max-width:900px){ .method-grid{ grid-template-columns:1fr; } }

/* ===== Entregáveis ===== */
.deliver-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); margin-top:36px; }
.deliver{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-card); padding:var(--card-pad); box-shadow:var(--shadow-card);
}
.deliver h3{ font-size:var(--fs-subheading); margin-bottom:8px; }
.deliver p{ font-size:13px; color:var(--text-muted); }
@media (max-width:900px){ .deliver-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .deliver-grid{ grid-template-columns:1fr; } }

/* ===== Bônus ===== */
.bonus-list{ display:flex; flex-direction:column; gap:var(--grid-gap); margin-top:32px; }
.bonus{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-card); padding:22px 24px; box-shadow:var(--shadow-card);
}
.bonus-tag{
  flex:none; font-size:var(--fs-micro); letter-spacing:.1em; color:var(--text-accent);
  border:1px solid var(--border-accent); border-radius:var(--radius-pill);
  padding:5px 12px; margin-top:2px;
}
.bonus h3{ font-size:var(--fs-subheading); margin-bottom:6px; }
.bonus p{ font-size:14px; color:var(--text-muted); }
.bonus p + p{ margin-top:8px; }
/* A ressalva de cada bônus — escassez real (vagas, data) fica aqui, em tom
   mais baixo que a promessa, para ler como condição e não como grito. */
.bonus .bonus-note{ font-size:var(--fs-additional); color:var(--gray-400); }
.bonus .bonus-note strong{ color:var(--text-accent); font-weight:var(--fw-medium); }
@media (max-width:560px){ .bonus{ flex-direction:column; gap:12px; padding:18px; } }

.countdown{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  margin-top:26px; padding:16px 20px; border-radius:var(--radius-lg);
  background:var(--surface-navy-wash); border:1px solid var(--border-accent);
}
.countdown-label{ font-size:var(--fs-additional); color:var(--text-muted); }
.countdown-value{ font-size:var(--fs-subheading); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; }

/* ===== Oferta ===== */
.price-card{
  position:relative; overflow:hidden;
  background:var(--surface-card); border:1px solid var(--border-accent);
  border-radius:var(--radius-xl); padding:36px 32px; box-shadow:var(--shadow-accent);
}
.price-card::after{ content:""; position:absolute; inset:0; background:var(--gradient-sheen); pointer-events:none; }
.price-head{ position:relative; }
.price-title{ font-size:26px; font-weight:var(--fw-light); letter-spacing:-0.02em; }
.price-figure{ position:relative; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:24px 0 8px; }
.price-from{ font-size:18px; color:var(--text-muted); text-decoration:line-through; }
.price-now{ font-size:clamp(44px,8vw,60px); font-weight:var(--fw-bold); letter-spacing:-0.03em; line-height:1; }
.price-note{ font-size:var(--fs-additional); color:var(--text-muted); }
.price-list{ position:relative; display:flex; flex-direction:column; gap:11px; margin:26px 0 30px; }
.price-list li{ font-size:14px; color:var(--text-secondary); padding-left:22px; position:relative; }
.price-list li::before{
  content:""; position:absolute; left:0; top:7px; width:9px; height:5px;
  border-left:1.75px solid var(--accent-ink); border-bottom:1.75px solid var(--accent-ink);
  transform:rotate(-45deg);
}
.price-list li.is-bonus{ color:var(--text-accent); }
.price-foot{ position:relative; margin-top:14px; text-align:center; font-size:var(--fs-additional); color:var(--text-muted); }

@media (max-width:560px){ .price-card{ padding:26px 20px; } }

.guarantee{
  display:flex; gap:22px; align-items:center; margin-top:var(--grid-gap);
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-card); padding:24px; box-shadow:var(--shadow-card);
}
.guarantee-seal{
  flex:none; width:82px; height:82px; border-radius:50%;
  border:1.5px solid var(--border-accent); color:var(--text-accent);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:28px; font-weight:var(--fw-bold); line-height:1;
}
.guarantee-seal span{ font-size:var(--fs-micro); font-weight:var(--fw-regular); letter-spacing:.14em; margin-top:3px; }
.guarantee h3{ font-size:var(--fs-subheading); margin-bottom:6px; }
.guarantee p{ font-size:14px; color:var(--text-muted); }
@media (max-width:560px){ .guarantee{ flex-direction:column; text-align:center; } }

/* ===== Círculo ===== */
.circulo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); margin-top:30px; }
.circulo-item{ background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-card); padding:var(--card-pad); }
.circulo-item h3{ font-size:var(--fs-subheading); margin-bottom:8px; }
.circulo-item p{ font-size:13px; color:var(--text-muted); }
.circulo-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px; font-size:var(--fs-additional); }
@media (max-width:820px){ .circulo-grid{ grid-template-columns:1fr; } }

/* ===== Para quem ===== */
.fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--grid-gap); margin-top:32px; align-items:start; }
.fit{ background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-card); padding:26px 24px; }
.fit h3{ font-size:var(--fs-subheading); margin-bottom:16px; }
.fit ul{ display:flex; flex-direction:column; gap:11px; }
.fit li{ font-size:14px; color:var(--text-secondary); padding-left:22px; position:relative; }
.fit-yes li::before{
  content:""; position:absolute; left:0; top:7px; width:9px; height:5px;
  border-left:1.75px solid var(--accent-ink); border-bottom:1.75px solid var(--accent-ink); transform:rotate(-45deg);
}
.fit-no{ background:transparent; }
.fit-no li{ color:var(--text-muted); }
.fit-no li::before{ content:"×"; position:absolute; left:2px; top:-1px; color:var(--gray-400); font-size:15px; }
@media (max-width:820px){ .fit-grid{ grid-template-columns:1fr; } }

/* ===== FAQ ===== */
.faq{ margin-top:30px; border-top:1px solid var(--border-subtle); }
.faq details{ border-bottom:1px solid var(--border-subtle); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font-size:var(--fs-subheading); font-weight:var(--fw-medium); color:var(--text-primary);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:22px; font-weight:var(--fw-light); color:var(--text-muted);
  transition:transform var(--dur-base) var(--ease-standard);
}
.faq details[open] summary::after{ content:"−"; }
.faq summary:hover{ color:var(--text-accent); }
.faq details p{ padding:0 40px 22px 0; font-size:15px; color:var(--text-muted); margin-top:-4px; }

/* ===== CTA final ===== */
.final-cta{ position:relative; padding:84px 24px; border-top:1px solid var(--border-subtle); overflow:hidden; }
.final-cta::before{ content:""; position:absolute; inset:0; background:var(--glow-accent); transform:scaleX(-1); pointer-events:none; }
.final-inner{ position:relative; max-width:760px; margin:0 auto; text-align:center; }
.final-inner h2{ font-size:clamp(26px,4.4vw,40px); font-weight:var(--fw-light); letter-spacing:-0.02em; line-height:1.18; }
.final-inner p{ margin:20px auto 30px; color:var(--text-muted); font-size:16px; max-width:600px; }
.final-meta{ margin-top:20px; font-size:var(--fs-additional); color:var(--text-muted); }
@media (max-width:560px){ .final-cta{ padding:56px 16px; } }

/* ===== Rodapé ===== */
.site-footer{ border-top:1px solid var(--border-subtle); padding:52px 24px 120px; max-width:1100px; margin:0 auto; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px; }
.footer-bio{ margin-top:14px; font-size:13px; color:var(--text-muted); max-width:340px; }
.footer-links{ display:flex; flex-direction:column; gap:10px; }
.footer-col-title{ font-size:var(--fs-micro); letter-spacing:.18em; color:var(--text-muted); margin-bottom:4px; }
.footer-links a{ font-size:14px; color:var(--text-secondary); }
.footer-links a:hover{ color:var(--text-accent); }
.footer-legal{ margin-top:32px; font-size:var(--fs-micro); color:var(--gray-400); line-height:1.7; max-width:720px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } }
@media (max-width:560px){ .site-footer{ padding:40px 16px 120px; } }

/* ===== CTA fixo no celular ===== */
.sticky-cta{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(10,10,10,.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--border-subtle);
}
.sticky-price{ font-size:13px; color:var(--text-muted); line-height:1.35; }
.sticky-cta .btn{ flex:none; }
@media (max-width:820px){ .sticky-cta:not([hidden]){ display:flex; } }
