/* Archivo (variável 400–900), servida localmente */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #131110;
  --bg-2: #1c1917;
  --ink: #f3f2f2;
  --ink-2: #d7d3d3;
  --muted: #9b9797;
  --dim: #8a8686;       /* 5.2:1 no fundo (antes #605d5d, 2.9:1) */
  --red: #d92a0e;       /* superfícies com texto branco: 4.9:1 */
  --red-hover: #c52509;
  --red-ink: #f24a2a;   /* vermelho como texto no fundo escuro: 5.2:1 */
  --header-h: 0px;
  --orange: #ff8a1c;
  --line: rgba(243, 242, 242, .22);
  --wa: #25d366;
  --r-sm: 10px;   /* botões, etiquetas */
  --r-md: 16px;   /* cartões */
  --r-lg: 22px;   /* blocos grandes: foto, matrícula */
  --wrap: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: var(--header-h); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--orange); color: var(--bg); font-weight: 800; padding: 12px 16px; }
.skip:focus { top: 12px; color: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Archivo", system-ui, sans-serif; overflow-x: hidden; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: #ffb066; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }

@keyframes pulseCta { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 42, 14, .55); } 50% { box-shadow: 0 0 0 14px rgba(217, 42, 14, 0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none !important; } html { scroll-behavior: auto; } }

/* ── Estrutura ── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 84px 24px; }
.section { border-bottom: 2px solid var(--line); position: relative; }
.section--alt { background: var(--bg-2); }
.col { min-width: 0; }
.grid-auto { display: grid; gap: 56px; align-items: center; }
.bg-layer { position: absolute; inset: 0; }
.bg-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(243,242,242,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(243,242,242,.05) 1px, transparent 1px); background-size: 80px 80px; }
.rel { position: relative; }

/* Tabelas de células separadas por linhas de 2px */
.cells { display: grid; gap: 2px; background: var(--line); border: 2px solid var(--line); }
.cells > * { background: var(--bg); }
.cells--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ── Tipografia ── */
.eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--red-ink); font-weight: 800; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 34px; height: 2px; background: currentColor; flex: none; }
.eyebrow--orange { color: var(--orange); }
.h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; line-height: 1.05; letter-spacing: -.025em; margin-bottom: 18px; }
.lead { font-size: 18px; color: var(--muted); line-height: 1.6; }
.label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); font-weight: 800; }
.num { font-variant-numeric: tabular-nums; }

/* ── Botões ── */
.btn { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; background: var(--red); color: #fff; font-weight: 900; text-transform: uppercase; transition: background .15s; }
.btn:hover { background: var(--red-hover); color: #fff; }
.btn--sm { font-weight: 800; font-size: 13px; letter-spacing: .06em; padding: 12px 18px; }
.btn--lg { font-size: 16px; letter-spacing: .05em; padding: 20px 30px; }
.pulse { animation: pulseCta 2.6s infinite; }

/* ── WhatsApp ── */
.btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 12px 18px; border: 2px solid var(--line); color: var(--ink); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; transition: border-color .15s, color .15s; }
.btn-wa:hover { border-color: var(--wa); color: var(--ink); }
.btn-wa .wa-icon { color: var(--wa); flex: none; }
.btn-wa--light { border-color: rgba(255,255,255,.7); color: #fff; font-size: 15px; padding: 18px 26px; }
.btn-wa--light .wa-icon { color: #fff; }
.btn-wa--light:hover { border-color: #fff; background: rgba(0,0,0,.12); color: #fff; }
.link-wa { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--wa); text-underline-offset: 4px; }
.link-wa:hover { color: var(--wa); }
.link-wa .wa-icon { color: var(--wa); width: 18px; height: 18px; }
.checkout__wa { border: 2px solid var(--line); border-top: 0; background: var(--bg); padding: 8px 26px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.faq-cta { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.faq-cta p { font-size: 16px; color: var(--ink-2); line-height: 1.5; max-width: 460px; }
.final__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ── Topo ── */
.topbar { background: var(--red); color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; padding: 10px 24px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; }
.header { position: relative; z-index: 40; background: var(--bg); border-bottom: 2px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 14px 24px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand__mark { width: 36px; height: 36px; flex: none; object-fit: contain; border-radius: 0; }
@media (max-width: 480px) { .brand { gap: 8px; } .brand__mark { width: 28px; height: 28px; } }
.brand__name { font-weight: 900; font-size: 16px; letter-spacing: -.01em; line-height: 1.1; }
.brand__name small { display: block; font-weight: 600; font-size: 11px; letter-spacing: .16em; color: var(--muted); }

/* ── Hero ── */
.hero { overflow: hidden; }
.hero .bg-layer img { object-position: center 30%; filter: grayscale(.35) contrast(1.1) brightness(.55); }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(100deg, var(--bg) 18%, rgba(19,17,16,.86) 46%, rgba(19,17,16,.25) 100%); }
.hero__watermark { position: absolute; right: -4%; bottom: -6%; font-size: clamp(120px, 20vw, 280px); font-weight: 900; letter-spacing: -.05em; color: rgba(243,242,242,.045); line-height: .8; pointer-events: none; user-select: none; }
.hero .wrap { padding: 84px 24px 64px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 48px; }
.tag { display: inline-block; border: 2px solid var(--orange); color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: 7px 12px; margin-bottom: 24px; }
.hero h1 { font-size: clamp(38px, 5.2vw, 68px); font-weight: 900; line-height: .98; letter-spacing: -.03em; margin-bottom: 22px; text-wrap: balance; }
.accent { color: var(--orange); }
.hero__sub { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 560px; margin-bottom: 32px; }
.hero__sub strong { color: var(--ink); font-weight: 800; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__terms { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* "O que trava sua nota" agora mora na seção do problema */
.pains { background: var(--bg-2); border: 2px solid var(--line); padding: 22px 26px; margin: 0 0 40px; max-width: 900px; }
.pains ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); column-gap: 32px; }
.pains .label { margin-bottom: 14px; letter-spacing: .18em; }
.pains li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(243,242,242,.18); font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.pains li::before { content: "✕"; color: var(--red-ink); font-weight: 900; }

/* ── Faixa de benefícios ── */
.strip { max-width: var(--wrap); margin: 0 auto; padding: 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.strip div { padding: 22px 24px; border-right: 2px solid rgba(243,242,242,.14); border-bottom: 2px solid rgba(243,242,242,.14); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.strip div:last-child { border-right: 0; }

/* ── Método ── */
#metodo .h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.04; margin-bottom: 20px; max-width: 900px; }
#metodo .lead { max-width: 720px; margin-bottom: 32px; }
.pillar { padding: 34px 28px; transition: background .15s; }
.pillar:hover { background: var(--bg-2); }
.pillar__n { font-size: 44px; font-weight: 900; color: var(--red-ink); line-height: 1; margin-bottom: 18px; }
.pillar h3 { font-size: 21px; font-weight: 800; margin-bottom: 10px; letter-spacing: -.01em; }
.pillar p { font-size: 15px; color: var(--muted); line-height: 1.55; }
.pillar .pillar__sub { font-size: 15px; font-weight: 800; color: var(--orange); margin-bottom: 8px; }

/* O problema: sintomas, virada e fechamento */
#metodo .lead { margin-bottom: 18px; color: var(--ink-2); }
.symptoms { list-style: none; margin: 0 0 22px; padding: 0 0 0 18px; border-left: 2px solid var(--red-ink); max-width: 720px; }
.symptoms li { font-size: 17px; color: var(--muted); line-height: 1.5; padding: 3px 0; }
.symptoms li:last-child { color: var(--ink); font-weight: 700; }
.stakes { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.45; max-width: 720px; margin: 0 0 36px; }
.turn { max-width: 900px; margin: 8px 0 32px; }
.turn__kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--muted); margin-bottom: 12px; }
.turn__big { font-size: clamp(24px, 2.8vw, 36px); font-weight: 900; line-height: 1.12; letter-spacing: -.02em; margin-bottom: 14px; }
.turn__text { font-size: 17px; color: var(--muted); line-height: 1.6; max-width: 680px; }
.closing { margin: 40px 0 0; max-width: 900px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; line-height: 1.18; letter-spacing: -.02em; }

/* ── Citação ── */
.quote .bg-layer img { filter: grayscale(.3) brightness(.4); }
.quote__shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 10%, rgba(19,17,16,.7) 70%, rgba(19,17,16,.35)); }
.quote .wrap { padding: 90px 24px; }
.quote blockquote { margin: 0; font-size: clamp(26px, 3.4vw, 44px); font-weight: 900; line-height: 1.12; letter-spacing: -.02em; max-width: 820px; }
.quote cite { display: block; font-style: normal; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 22px; }

/* ── Conteúdo ── */
#conteudo .grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
#conteudo .lead { font-size: 16px; margin-bottom: 28px; }
.extras { border: 2px solid var(--line); padding: 24px; background: var(--bg-2); }
.extras .label { margin-bottom: 12px; }
.extras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.extras li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; }
.extras li::before { content: "▸"; color: var(--orange); font-weight: 900; }
.rows { align-content: start; list-style: none; margin: 0; padding: 0; }
.row { padding: 20px 22px; display: flex; gap: 18px; align-items: baseline; transition: background .15s; }
.row:hover { background: var(--bg-2); }
.row__n { font-size: 13px; font-weight: 900; color: var(--red-ink); font-variant-numeric: tabular-nums; flex: none; }
.row__t { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.row__d { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 4px; }

/* ── Professor ── */
#professor .grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.photo { aspect-ratio: 4 / 5; border: 2px solid var(--line); background: repeating-linear-gradient(135deg, #201e1d 0 10px, #262220 10px 20px); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 20px; }
.photo img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.photo::before { content: ""; position: absolute; left: 50%; top: 8%; width: 130%; height: 0; padding-bottom: 130%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255,138,28,.45) 15%, rgba(217,42,14,.2) 55%, transparent 80%); }
.photo::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 6px; background: var(--orange); }
.placeholder-note { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); line-height: 1.5; }
#professor .h2 { font-size: clamp(28px, 3.4vw, 46px); margin-bottom: 20px; }
.bio-1 { font-size: 18px; color: var(--ink-2); line-height: 1.6; margin-bottom: 16px; }
.bio-2 { font-size: 16px; color: var(--muted); line-height: 1.65; margin-bottom: 28px; }
.creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--line); }
.cred { padding: 18px 16px; border-right: 2px solid var(--line); font-size: 13px; color: var(--muted); }
.cred:first-child { padding-left: 0; }
.cred:last-child { border-right: 0; }
.cred b { display: block; font-weight: 800; color: var(--orange); letter-spacing: .08em; text-transform: uppercase; }

/* ── Depoimentos ── */
.proof .h2 { margin-bottom: 40px; max-width: 760px; }
.testimonial { padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; margin: 0; }
.testimonial__shot { height: 150px; border: 1px dashed rgba(243,242,242,.28); background: repeating-linear-gradient(135deg, #1c1917 0 8px, #201e1d 8px 16px); display: flex; align-items: flex-end; padding: 12px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); }
.testimonial blockquote { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.testimonial figcaption { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); font-weight: 800; }

/* ── App ── */
#app { overflow: hidden; }
#app .bg-grid { opacity: .8; }
#app .grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.tag--solid { display: inline-block; background: var(--orange); color: var(--bg); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; padding: 8px 12px; margin-bottom: 20px; }
#app .h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.02; letter-spacing: -.03em; }
#app .lead { font-size: 17px; line-height: 1.65; margin-bottom: 30px; max-width: 560px; }
#app .rows { margin-bottom: 30px; }
#app .row { padding: 18px 20px; gap: 16px; }
#app .row:hover { background: var(--bg); }
#app .row__n { font-size: 12px; }
#app .row__t { font-size: 16px; }
#app .row__d { margin-top: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chips span { border: 2px solid var(--line); padding: 10px 14px; }
.phone-col { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 20px 0; }
/* Celular com a "página do app" (layout de loja de apps, dark + vermelho) */
.phone { width: min(340px, 100%); aspect-ratio: 9 / 19; position: relative; padding: 2.6%; border-radius: 14% / 6.6%; background: linear-gradient(135deg, #4a4643, #1b1918 38%, #2d2a28 62%, #0c0b0b); box-shadow: 0 50px 110px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.12); container-type: inline-size; }
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 11.5% / 5.4%; background: #0d0c0c; color: var(--ink); font-size: 2.94cqw; padding: 0 1.5em; display: flex; flex-direction: column; gap: 1.55em; line-height: 1.3; }
.ph-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); padding: .9em .8em 2.4em; background: linear-gradient(transparent, #0d0c0c 1.4em); border-top: 1px solid rgba(243,242,242,.1); }
.ph-tabs span { display: flex; flex-direction: column; align-items: center; gap: .3em; font-size: .8em; color: var(--dim); }
.ph-tabs svg { width: 2.2em; height: 2.2em; }
.ph-tabs .is-on { color: var(--red-ink); font-weight: 800; }
.ph-status { display: flex; align-items: center; justify-content: space-between; padding-top: 1.1em; font-size: 1.15em; font-weight: 700; }
.ph-island { width: 7.5em; height: 2.2em; background: #000; border-radius: 2em; }
.ph-sys { display: flex; align-items: flex-end; gap: .2em; }
.ph-sys i { width: .3em; background: var(--ink); border-radius: .1em; }
.ph-sys i:nth-child(1) { height: .45em; } .ph-sys i:nth-child(2) { height: .65em; } .ph-sys i:nth-child(3) { height: .85em; }
.ph-sys b { width: 1.9em; height: .9em; margin-left: .35em; border: .12em solid var(--ink); border-radius: .25em; background: linear-gradient(90deg, var(--ink) 75%, transparent 0) content-box; padding: .1em; }
.ph-app { display: flex; gap: 1.1em; align-items: center; }
.ph-icon { width: 6.4em; height: 6.4em; flex: none; border-radius: 1.5em; background: linear-gradient(145deg, #2a1310, #120b0a); border: .12em solid rgba(242,74,42,.55); color: var(--red-ink); display: grid; place-items: center; }
.ph-icon svg { width: 62%; height: 62%; }
.ph-app__name { font-size: 1.9em; font-weight: 900; letter-spacing: -.01em; line-height: 1; }
.ph-app__name span { font-weight: 400; color: var(--muted); }
.ph-app__sub { font-size: 1em; color: var(--muted); margin: .35em 0 .7em; }
.ph-app__row { display: flex; align-items: center; gap: .7em; }
.ph-get { background: var(--red); color: #fff; font-weight: 900; font-size: .95em; letter-spacing: .08em; text-transform: uppercase; padding: .45em 1.3em; border-radius: 2em; }
.ph-note { font-size: .85em; color: var(--dim); }
.ph-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(243,242,242,.12); border-bottom: 1px solid rgba(243,242,242,.12); padding: .9em 0; text-align: center; }
.ph-stats div + div { border-left: 1px solid rgba(243,242,242,.12); }
.ph-stats b { display: block; font-size: 1.2em; font-weight: 900; }
.ph-stats small { display: block; font-size: .75em; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: .2em; }
.ph-cards { display: grid; grid-template-columns: 70% 70%; gap: 1em; margin-right: -1.5em; }
.ph-card { background: linear-gradient(180deg, #1d1a19, #141212); border: 1px solid rgba(243,242,242,.12); border-radius: 1.2em; padding: 1em; display: flex; flex-direction: column; gap: .5em; }
.ph-card__top { display: flex; justify-content: space-between; font-size: .8em; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.ph-live { color: var(--red-ink); font-weight: 800; }
.ph-tag { background: var(--red); color: #fff; font-weight: 800; padding: .15em .5em; border-radius: .3em; }
.ph-card__art { aspect-ratio: 1 / 1 !important; background: repeating-linear-gradient(0deg, rgba(243,242,242,.04) 0 1px, transparent 1px 1.2em), radial-gradient(circle at 60% 45%, #2b1512, #0f0d0d 70%); border-radius: .8em; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.ph-card__art svg { width: 92%; }
.ph-card__kicker { font-size: .8em; color: var(--red-ink); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin-top: .3em; }
.ph-card__title { font-size: 1.55em; font-weight: 900; letter-spacing: -.01em; line-height: 1; }
.ph-card__q { font-size: .92em; color: var(--muted); }
.ph-btn { margin-top: auto; background: var(--red); color: #fff; text-align: center; font-weight: 900; font-size: .85em; letter-spacing: .1em; text-transform: uppercase; padding: .7em; border-radius: .5em; }
.ph-bars { display: grid; gap: .75em; margin: .4em 0 .8em; }
.ph-bars div { display: grid; grid-template-columns: 1fr auto; gap: .3em .5em; font-size: .85em; color: var(--ink-2); }
.ph-bars i { grid-column: 1 / -1; grid-row: 2; height: .35em; background: linear-gradient(90deg, var(--red-ink) var(--p), rgba(243,242,242,.12) 0); border-radius: 1em; }
.ph-bars b { color: var(--ink); }
.ph-section { display: grid; gap: .35em; }
.ph-section__head { display: flex; justify-content: space-between; align-items: baseline; }
.ph-section__head b { font-size: 1.35em; font-weight: 900; }
.ph-section__head span { font-size: .9em; color: var(--red-ink); }
.ph-section small { font-size: .85em; color: var(--dim); }
.ph-section p { font-size: .95em; color: var(--muted); line-height: 1.45; }
.ph-home { position: absolute; left: 50%; bottom: .9em; width: 11em; height: .35em; margin-left: -5.5em; border-radius: 1em; background: var(--ink); z-index: 2; }
.app-cards { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; }
.app-card { flex: 1 1 150px; max-width: 220px; background: var(--bg); border: 2px solid rgba(243,242,242,.3); padding: 14px 16px; }
.app-card--hl { border-color: var(--orange); }
.app-card small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.app-card__big { font-size: 26px; font-weight: 900; color: var(--orange); line-height: 1; }
.app-card__text { font-size: 15px; font-weight: 900; line-height: 1.2; margin-top: 4px; }
.app-card__text span { color: var(--red-ink); }

/* ── Oferta ── */
#oferta { border-top: 6px solid var(--red); }
#oferta .wrap:first-child { padding-bottom: 30px; }
#oferta .h2 { font-size: clamp(30px, 4vw, 54px); line-height: 1.02; letter-spacing: -.03em; max-width: 920px; }
#oferta .lead { font-size: 17px; line-height: 1.65; max-width: 660px; }
.offer { padding-top: 0 !important; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 900px) {
  .offer { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; }
  .plans-head { grid-column: 1 / -1; }
  .checkout--monthly { position: sticky; top: 24px; }
}
.stack { border-top: 2px solid var(--line); list-style: none; margin: 0; padding: 0; }
.stack li { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid rgba(243,242,242,.16); }
.stack__item { min-width: 0; font-size: 15px; line-height: 1.4; }
.stack__item em { font-style: normal; color: var(--orange); font-weight: 900; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 2px; }
.stack__price { flex: none; font-size: 15px; font-weight: 800; color: var(--muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.total { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; padding: 22px 0; }
.total > span:first-child { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.total--real { border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); color: var(--muted); }
.total--real s { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.total--now { color: var(--orange); }
.total--now b { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; }
.checkout { display: grid; gap: 0; }
.plans-head { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }

/* Tickets de preço (efeito de contraste: mensal ancora, vitalício converte) */
.ticket { position: relative; }
.ticket__cut { position: relative; height: 0; border-top: 2px dashed rgba(243,242,242,.2); margin: 0 26px; }
/* Picotes: meia-lua da cor do fundo da seção, "cortando" a borda do ticket */
.ticket__cut::before, .ticket__cut::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--line); box-sizing: border-box; }
.ticket__cut::before { left: -40px; clip-path: inset(-2px -2px -2px 50%); }
.ticket__cut::after { right: -40px; clip-path: inset(-2px 50% -2px -2px); }
.ticket--main .ticket__cut::before, .ticket--main .ticket__cut::after { border-color: var(--red); }
.ticket--monthly { border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--bg); margin-bottom: 18px; }
.ticket__part { padding: 22px 26px; }
.ticket__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; color: var(--ink-2); }
.ticket__price b { font-size: 38px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.ticket__price small { font-size: 16px; font-weight: 700; color: var(--muted); }
.ticket__sub { font-size: 13px; color: var(--muted); }
.ticket__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; font-size: 13px; line-height: 1.4; }
.ticket__list li { display: flex; gap: 10px; }
.ticket__list .yes { color: var(--ink-2); }
.ticket__list .yes::before { content: "✓"; color: var(--muted); font-weight: 900; flex: none; }
.ticket__list .no { color: var(--muted); }
.ticket__list .no::before { content: "✕"; color: var(--red-ink); font-weight: 900; flex: none; }
.ticket__year { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.ticket__year b { color: var(--red-ink); font-size: 15px; }
.btn-ghost { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 2px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 12px 18px; transition: border-color .15s, color .15s; }
.btn-ghost:hover { border-color: var(--muted); color: var(--ink); }
.ticket--main { box-shadow: 0 30px 80px rgba(217,42,14,.18); }
.ticket__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.badge { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,138,28,.6); color: var(--orange); }
.badge--red { background: var(--red); border-color: var(--red); color: #fff; }
.checkout__body--cta { padding-top: 26px; }
.checkout__box { border: 2px solid var(--red); background: var(--bg); }
.checkout__head { background: var(--red); color: #fff; padding: 14px 26px; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.checkout__body { padding: 32px 26px; }
.checkout__kicker { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.price small { font-size: 20px; font-weight: 800; color: var(--muted); }
.price b { font-size: clamp(50px, 6.5vw, 74px); font-weight: 900; line-height: .88; letter-spacing: -.045em; }
.price-pix { font-size: 17px; color: var(--orange); font-weight: 800; margin-bottom: 4px; }
.price-day { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 360px; }
.btn--block { display: flex; font-size: 18px; letter-spacing: .04em; padding: 24px; }
.pay-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 16px; }
.guarantee { border-top: 2px solid var(--line); margin-top: 24px; padding-top: 22px; display: flex; gap: 16px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.guarantee strong { color: #fff; }
.seal { width: 52px; height: 52px; background: var(--orange); flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--bg); font-weight: 900; line-height: 1; }
.seal b { font-size: 22px; }
.seal span { font-size: 9px; letter-spacing: .1em; }
.checkout__foot { border: 2px solid var(--line); border-top: 0; background: var(--bg); padding: 18px 26px; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ── FAQ ── */
#faq .wrap { max-width: 900px; }
#faq .h2 { margin-bottom: 40px; }
.faq { border-top: 2px solid var(--line); }
.faq details { border-bottom: 2px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; font-size: 18px; font-weight: 800; padding: 22px 0; display: flex; gap: 20px; align-items: center; justify-content: space-between; transition: color .15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange); }
.faq summary::after { content: "+"; color: var(--red-ink); font-size: 24px; flex: none; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { font-size: 16px; color: var(--muted); line-height: 1.65; padding: 0 0 24px; max-width: 720px; }

/* ── CTA final ── */
.final { background: var(--red); color: #fff; }
.final .wrap { padding: 90px 24px; }
.final h2 { font-size: clamp(32px, 5vw, 64px); font-weight: 900; line-height: .98; letter-spacing: -.03em; margin-bottom: 24px; max-width: 900px; }
.final p { font-size: 18px; line-height: 1.55; max-width: 620px; margin-bottom: 34px; color: rgba(255,255,255,.92); }
.btn--dark { background: var(--bg); font-size: 17px; letter-spacing: .05em; padding: 22px 32px; }
.btn--dark:hover { background: #000; }

/* ── Rodapé e barra fixa ── */
.footer a { color: inherit; display: inline-block; padding: 15px 0; }
.footer a:hover { color: var(--ink); }
.footer { padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 0 16px; align-items: center; justify-content: space-between; font-size: 12px; color: var(--dim); max-width: var(--wrap); margin: 0 auto; }
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--bg); border-top: 2px solid var(--red); padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.sticky-bar .btn { flex: none; }
.sticky-bar div { font-size: 13px; font-weight: 800; line-height: 1.3; min-width: 0; }
.sticky-bar div span { color: var(--muted); font-weight: 600; }
.sticky-bar .btn { font-size: 13px; letter-spacing: .06em; padding: 13px 20px; }
.bar-spacer { height: 64px; }

@media (max-width: 720px) {
  /* No celular o CTA do topo duplica o da barra fixa: sai para o cabeçalho ocupar uma linha só */
  .header .btn { display: none; }
  .btn-wa--header { padding: 10px; min-width: 44px; }
  .btn-wa--header .btn-wa__label { display: none; }
  .header { padding: 12px 20px; flex-wrap: nowrap; }
  .brand { min-width: 0; }
  .brand__name small { letter-spacing: .1em; }
  .sticky-bar { padding-left: 16px; padding-right: 16px; gap: 12px; }
  .sticky-bar div { font-size: 12px; }
  .sticky-bar div span { display: block; }
  .creds { grid-template-columns: 1fr; }
  .cred { border-right: 0; padding-left: 0; border-bottom: 2px solid var(--line); }
  .cred:last-child { border-bottom: 0; }
  .checkout { position: static; }
  .strip div { border-right: 0; }
}

/* ── Cantos arredondados ── */
.btn, .btn-wa, .skip, .tag, .tag--solid, .chips span { border-radius: var(--r-sm); }

.seal { border-radius: 12px; }

/* Grades coladas viram cartões separados */
.cells { gap: 12px; background: none; border: 0; }
.cells > * { border: 1px solid var(--line); border-radius: var(--r-md); }
.rows { gap: 8px; }
.row { border-radius: var(--r-sm); }

.pains, .extras, .app-card { border-radius: var(--r-md); }
.pains { border-width: 1px; }
.extras { border-width: 1px; }
.testimonial__shot { border-radius: var(--r-sm); }
.photo { border-radius: var(--r-lg); border-width: 1px; }

.checkout__box { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.checkout__head { border-radius: calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0; }
.checkout__wa { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.btn--block { border-radius: 12px; }

.faq { border-top: 0; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); padding: 0 24px; transition: border-color .15s; }
.faq details[open] { border-color: rgba(242,74,42,.5); }
.faq-cta { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 24px; }


/* Lista de benefícios dentro do ticket principal */
.incl__title { font-size: 20px; font-weight: 900; letter-spacing: -.01em; margin: 6px 0 14px; }
.incl { list-style: none; margin: 0; padding: 0; display: grid; }
.incl li { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(243,242,242,.1); }
.incl__text { min-width: 0; display: flex; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.incl__text::before { content: "✓"; color: var(--wa); font-weight: 900; flex: none; }
.incl__text em { font-style: normal; flex: none; align-self: center; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); border: 1px solid rgba(255,138,28,.5); border-radius: 999px; padding: 2px 7px; }
.incl li s { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.incl__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 16px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.incl__total s { font-size: 22px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.checkout__body--price { padding-bottom: 0; }
.incl__now { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.ticket--monthly { margin-bottom: 0; }
.incl__total s, .incl li s { white-space: nowrap; }
@media (max-width: 480px) {
  /* ✓ à esquerda, etiqueta em cima e texto embaixo */
  .incl__text { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
  .incl__text::before { grid-row: span 2; }
  .incl__text em { justify-self: start; }
  .incl__total { font-size: 11px; }
}

@media (max-width: 480px) { .hide-sm { display: none; } }
/* botão com palavra escondida no celular: bloco comum (flex juntaria as palavras quando o span some) */
.btn--words { display: inline-block; line-height: 18px; }


/* ══ Movimento ══
   Tudo aqui depende de html.motion, que só é ligado por JS e nunca com
   prefers-reduced-motion. Sem JS ou com movimento reduzido, a página fica estática. */
@property --fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* Barra de progresso de leitura */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: linear-gradient(90deg, var(--red), var(--orange)); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* Micro-interações (só em aparelhos com mouse) */
.btn .arr { display: inline-block; margin-left: .45em; transition: transform .2s var(--ease-out); }
.btn, .btn-wa, .btn-ghost { transition: background .15s, border-color .15s, color .15s, transform .2s var(--ease-out), box-shadow .2s; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(217, 42, 14, .35); }
  .btn:hover .arr { transform: translateX(5px); }
  .btn-wa:hover, .btn-ghost:hover { transform: translateY(-2px); }
  .pillar, .cells .row, .faq details, .app-card { transition: background .15s, border-color .2s, transform .25s var(--ease-out); }
  .pillar:hover { transform: translateY(-4px); border-color: rgba(255, 138, 28, .55); }
  .cells .row:hover { transform: translateX(4px); border-color: rgba(255, 138, 28, .45); }
  .app-card:hover { transform: translateY(-3px); }
}
.btn:active, .btn-wa:active, .btn-ghost:active { transform: scale(.98); }

/* Barra fixa: entra quando o topo sai da tela */
.js-bar .sticky-bar { transition: transform .45s var(--ease-out), visibility 0s linear 0s; }
.js-bar .sticky-bar:not(.is-on) { transform: translateY(110%); visibility: hidden; transition: transform .35s ease-in, visibility 0s linear .35s; }

/* Topo: entrada em cascata ao carregar */
@keyframes riseIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes driftIn { from { opacity: 0; transform: translateX(8%); } to { opacity: 1; transform: none; } }
.motion .hero .bg-layer img { animation: settle 2.4s var(--ease-out) both; }
.motion .hero__watermark { animation: driftIn 1.8s var(--ease-out) .3s both; }
.motion .hero .tag { animation: riseIn .7s var(--ease-out) .05s both; }
.motion .hero h1 { animation: riseIn .8s var(--ease-out) .15s both; }
.motion .hero__sub { animation: riseIn .8s var(--ease-out) .3s both; }
.motion .hero__cta { animation: riseIn .8s var(--ease-out) .45s both; }

/* Revelação ao rolar */
.motion .rv { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease-out) var(--d, 0s), transform .75s var(--ease-out) var(--d, 0s); }
.motion .rv.in { opacity: 1; transform: none; }
.motion .photo.rv, .motion .phone.rv { transform: translateY(40px) scale(.96); }
.motion .photo.rv.in, .motion .phone.rv.in { transform: none; }
.motion .quote blockquote.rv { transform: translateX(-30px); }
.motion .quote blockquote.rv.in { transform: none; }

/* Traço do rótulo das seções se desenha */
.motion .eyebrow.rv::before { transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out) calc(var(--d, 0s) + .25s); }
.motion .eyebrow.rv.in::before { transform: scaleX(1); }

/* O problema: a linha vermelha dos sintomas desce */
.motion .symptoms { border-left-color: transparent; position: relative; }
.motion .symptoms::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--red-ink); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease-out) .1s; }
.motion .symptoms.in::before { transform: scaleY(1); }

/* Foto do professor: faixa laranja se desenha */
.motion .photo.rv::after { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out) .5s; }
.motion .photo.rv.in::after { transform: scaleX(1); }

/* App: barras de desempenho enchem */
.ph-bars i { --fill: var(--p); background: linear-gradient(90deg, var(--red-ink) var(--fill), rgba(243,242,242,.12) 0); }
.motion .phone:not(.in) .ph-bars i { --fill: 0%; }
.motion .ph-bars i { transition: --fill 1.4s var(--ease-out) .6s; }
.motion .ph-bars div:nth-child(2) i { transition-delay: .72s; }
.motion .ph-bars div:nth-child(3) i { transition-delay: .84s; }
.motion .ph-bars div:nth-child(4) i { transition-delay: .96s; }

/* Oferta: os valores são riscados um a um, depois o total */
.motion .incl li s, .motion .incl__total s { text-decoration: none; background: linear-gradient(var(--red-ink), var(--red-ink)) no-repeat 0 55% / 0% 2px; transition: background-size .45s var(--ease-out) calc(var(--d, 0s) + .45s); }
.motion .incl li.in s, .motion .incl__total.in s { background-size: 100% 2px; }
.motion .incl__total.in s { transition-delay: 1.3s; }
.motion .checkout--main .badge--red { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .6s; transform: scale(.6); }
.motion .checkout--main.in .badge--red { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-wa, .btn-ghost, .pillar, .cells .row, .app-card, .btn .arr, .js-bar .sticky-bar { transition: none !important; transform: none !important; }
}

/* Âncora "Garantir minha vaga": para no bloco do 12x R$ 30,70 */
#preco { scroll-margin-top: calc(var(--header-h) + 40px); }