/* ============================================================
   EXPERT EM LISOS — Design System (navy + dourado)
   Identidade: Nayanni Santana · Especialista em Alisamento
   Serif (Georgia) para display/corpo · Arial para rótulos/UI
   ============================================================ */

:root {
  /* Navy */
  --navy-900:#0D1B2A;
  --navy-850:#0B1622;
  --navy-800:#10202F;
  --navy-700:#1B263B;
  --navy-600:#243449;
  --navy-500:#415A77;

  /* Dourado */
  --gold:#D4AF37;
  --gold-2:#E8C766;
  --gold-soft:rgba(212,175,55,.14);
  --gold-line:rgba(212,175,55,.40);

  /* Creme / texto */
  --cream:#F7F3E9;
  --cream-dim:rgba(247,243,233,.66);
  --cream-faint:rgba(247,243,233,.44);
  --line:rgba(247,243,233,.12);
  --line-strong:rgba(247,243,233,.22);

  /* Aliases p/ estilos inline herdados */
  --pc-green-dark:var(--cream);
  --pc-green-deep:var(--navy-850);
  --pc-green-mid:var(--navy-700);
  --pc-terra:var(--gold);
  --pc-terra-light:var(--gold-2);
  --pc-cream:var(--cream);
  --pc-cream-dark:var(--line-strong);
  --pc-white:var(--cream);
  --pc-text-dark:var(--cream);
  --pc-text-mid:var(--cream-dim);
  --pc-text-light:var(--cream-faint);
  --pc-page:var(--navy-900);

  /* Tipografia */
  --font-display:Georgia,'Times New Roman',serif;
  --font-body:Georgia,'Times New Roman',serif;
  --font-ui:Arial,Helvetica,sans-serif;

  /* Espaçamento */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --sp-16:64px; --sp-20:80px; --sp-24:96px;

  /* Radius */
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px;
  --radius-xl:12px; --radius-pill:100px; --radius-full:50%;

  --max-container:820px;
  --max-copy:660px;
}

*, *::before, *::after { box-sizing:border-box; }

img { display:block; max-width:100%; }

/* ============================================================
   LAYOUT — bandas e containers
   ============================================================ */
.section {
  padding: clamp(60px, 9vw, 108px) var(--sp-6);
  position: relative;
  font-family: var(--font-body);
  color: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: var(--max-container); margin: 0 auto; }
.copy { max-width: var(--max-copy); }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* Bandas — todas família navy, ritmo por tonalidade */
.bg-deep  { background: var(--navy-900); }
.bg-cream { background: var(--navy-800); border-top: 1px solid var(--line); }
.bg-green { background: linear-gradient(180deg, var(--navy-850), var(--navy-900)); }
.bg-terra {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-600));
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}

/* Halo dourado decorativo */
.halo { overflow: hidden; }
.halo::before {
  content:''; position:absolute; left:50%; top:-140px; transform:translateX(-50%);
  width:680px; height:500px;
  background: radial-gradient(ellipse at center, rgba(212,175,55,.12) 0%, transparent 70%);
  pointer-events:none;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--sp-4);
}
.kicker-line { display:inline-flex; align-items:center; gap: var(--sp-3); }
.kicker-line::before { content:''; width:30px; height:1.5px; background: var(--gold); }
.eyebrow::after {
  content:''; /* reset for standalone eyebrows */
}

.display { font-family: var(--font-display); font-weight: normal; line-height: 1.16; letter-spacing: 0.4px; }
h1.display { font-size: clamp(34px, 5.6vw, 56px); }
h2.display { font-size: clamp(28px, 4.4vw, 44px); }
h3.display { font-size: clamp(22px, 3vw, 30px); }

.lede { font-size: clamp(17px, 2.1vw, 21px); line-height: 1.6; color: var(--cream-dim); }
.body-lg { font-size: 18px; line-height: 1.78; color: var(--cream-dim); }
p + p { margin-top: var(--sp-4); }

.accent { color: var(--gold); font-style: italic; }
strong { font-weight: 700; color: var(--cream); }
em { color: var(--cream); }

.microcopy { font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--cream-faint); }

.punch { font-family: var(--font-display); font-weight: normal; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.24; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn-cta {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--sp-2);
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: var(--navy-900); border: none; border-radius: var(--radius-md);
  padding: 19px 46px; font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 30px rgba(212,175,55,.28), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn-cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 38px rgba(212,175,55,.4); }
.btn-cta:active { transform: translateY(0); }
.btn-cta.full { display:flex; width:100%; }
.cta-wrap { display:flex; flex-direction:column; align-items:center; gap: var(--sp-4); }

/* ============================================================
   TOPBAR / LOGO
   ============================================================ */
.topbar {
  background: var(--navy-850);
  border-bottom: 1px solid var(--gold-line);
  padding: 18px var(--sp-6);
  text-align: center;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 21px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cream); display: inline-flex; align-items: baseline; gap: 0.34em;
  position: relative;
}
.wordmark .accent { font-style: normal; color: var(--gold); }
.wordmark::before {
  content: '♛';
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--gold); letter-spacing: 0;
}

/* ============================================================
   VÍDEO (hero)
   ============================================================ */
.video-frame {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--gold-line);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.play-btn {
  position:absolute; inset:0; margin:auto; width:78px; height:78px; border-radius:50%;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(212,175,55,.5); pointer-events:none;
}
.play-btn::after {
  content:''; margin-left:5px;
  border-style:solid; border-width:14px 0 14px 22px;
  border-color: transparent transparent transparent var(--navy-900);
}
.hero-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(19px, 2.4vw, 24px); line-height: 1.42; color: var(--cream);
  max-width: 640px; margin: 0 auto var(--sp-10);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--sp-6) 0;
}
.hero-quote .accent { font-style: italic; }

/* ============================================================
   LISTA AVATAR
   ============================================================ */
.arrow-list { list-style:none; display:flex; flex-direction:column; gap: var(--sp-4); max-width: 700px; }
.arrow-list li { position:relative; padding-left: 34px; font-size: 17px; line-height: 1.6; color: var(--cream-dim); }
.arrow-list li::before { content:''; position:absolute; left:5px; top:13px; width:8px; height:8px; border-radius:50%; background: var(--gold); }
.arrow-list strong { color: var(--cream); }

/* ============================================================
   PROVA SOCIAL — galeria + banner
   ============================================================ */
.gallery { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.gallery image-slot { aspect-ratio: 9/16; border-radius: var(--radius-lg); }
.section-banner {
  width:100%; aspect-ratio: 16/6; border-radius: var(--radius-lg);
  margin-bottom: var(--sp-10); box-shadow: 0 18px 44px rgba(0,0,0,.4);
}

/* ============================================================
   AGITAÇÃO — perguntas + dúvidas
   ============================================================ */
.ask-line {
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; line-height: 1.8; color: var(--cream-dim);
  max-width: 660px; margin: 0 auto var(--sp-8); text-align: center;
}
.ask-line span { display: block; }
.agit-image {
  width:100%; aspect-ratio: 16/7; border-radius: var(--radius-lg);
  margin: 0 auto var(--sp-10); max-width: 760px;
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
}
.doubts { display:flex; flex-direction:column; gap: var(--sp-3); max-width: 720px; margin: 0 auto; }
.doubt {
  background: rgba(212,175,55,.05);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-display); font-style: italic;
  font-size: 17px; line-height: 1.5; color: var(--cream-dim);
}

/* ============================================================
   PATTERN INTERRUPT — highlight
   ============================================================ */
.highlight-block {
  text-align:left; max-width: var(--max-copy); margin: var(--sp-4) auto;
  background: rgba(0,0,0,.28);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-8);
}
.highlight-block strong, .highlight-block em { color: var(--cream); }

/* ============================================================
   ANTES × DEPOIS
   ============================================================ */
.ba-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items:start; }
.ba-card { border-radius: var(--radius-xl); padding: var(--sp-8); }
.ba-before { background: var(--navy-800); border: 1px solid var(--line); }
.ba-after { background: var(--navy-700); border: 1px solid var(--gold-line); box-shadow: 0 12px 34px rgba(0,0,0,.35); }
.ba-head { font-family: var(--font-display); font-size: 22px; margin-bottom: var(--sp-6); }
.ba-before .ba-head { color: var(--cream-faint); }
.ba-after .ba-head { color: var(--gold); }
.ba-list { list-style:none; display:flex; flex-direction:column; gap: var(--sp-4); }
.ba-list li { display:flex; align-items:flex-start; gap: var(--sp-3); font-size: 15px; color: var(--cream-dim); line-height: 1.5; }
.tick { width:22px; height:22px; border-radius: var(--radius-full); display:flex; align-items:center; justify-content:center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.tick-yes { background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-line); }
.tick-no { background: rgba(247,243,233,.06); color: var(--cream-faint); border: 1px solid var(--line); }

/* ============================================================
   MÉTODO — passos
   ============================================================ */
.steps { display:flex; flex-direction:column; gap: var(--sp-4); }
.step {
  display:grid; grid-template-columns: auto 1fr; gap: var(--sp-6);
  background: var(--navy-700); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-8);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.step:hover { box-shadow: 0 10px 30px rgba(0,0,0,.35); transform: translateY(-2px); border-color: var(--gold-line); }
.step > image-slot[id^="el-step-"] {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-2);
}
.step-num {
  width:54px; height:54px; border-radius: var(--radius-full);
  background: var(--navy-900); border: 1.5px solid var(--gold); color: var(--gold);
  font-family: var(--font-display); font-size: 24px; font-weight: normal;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.step-kicker { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.step-name { font-family: var(--font-display); font-size: 24px; color: var(--cream); line-height: 1.2; margin-bottom: var(--sp-3); }
.step-body { font-size: 15px; color: var(--cream-dim); line-height: 1.65; }
.step-result {
  margin-top: var(--sp-4); background: rgba(212,175,55,.07);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4); font-size: 14px; line-height: 1.55; color: var(--cream-dim);
}
.step-result b { color: var(--cream); }
.step-result .rl { display:block; font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }
.flow-line { text-align:center; font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--cream-faint); margin-top: var(--sp-8); max-width: 680px; margin-left:auto; margin-right:auto; }

/* ============================================================
   CONTEÚDO PROGRAMÁTICO
   ============================================================ */
.syllabus { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.syl-item { background: var(--navy-700); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); transition: border-color .18s; }
.syl-item:hover { border-color: var(--gold-line); }
.syl-item.wide { grid-column: 1 / -1; }
.syl-name { font-family: var(--font-display); font-size: 21px; color: var(--cream); margin-bottom: var(--sp-2); }
.syl-name .n { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--gold); margin-right: 10px; letter-spacing: 0.06em; }
.syl-desc { font-size: 14px; line-height: 1.6; color: var(--cream-dim); }
.syl-shot { width:100%; aspect-ratio: 16/9; border-radius: var(--radius-md); margin-bottom: var(--sp-4); }

/* ============================================================
   BÔNUS
   ============================================================ */
.bonus-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.bonus-card { background: var(--navy-700); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); display:flex; flex-direction:column; gap: var(--sp-3); }
.bonus-card.feature {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--navy-600), var(--navy-700));
  border: 1px solid var(--gold-line);
  display:grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-8); align-items:center;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.bonus-top { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); }
.bonus-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.bonus-price { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--cream-faint); text-decoration: line-through; }
.bonus-name { font-family: var(--font-display); font-size: 22px; color: var(--cream); line-height: 1.2; }
.bonus-desc { font-size: 14px; line-height: 1.6; color: var(--cream-dim); }
.bonus-quote { font-family: var(--font-display); font-size: 14px; font-style: italic; line-height: 1.5; color: var(--gold-2); border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: auto; }
.feature-shot { width:100%; }
.bonus-shot { width:100%; aspect-ratio: 16/9; border-radius: var(--radius-md); margin-bottom: var(--sp-1); }
.badge { display:inline-block; font-family: var(--font-ui); font-size: 10px; font-weight: 700; padding: 5px 13px; border-radius: var(--radius-pill); letter-spacing: 0.1em; text-transform: uppercase; }
.badge-onterra { background: var(--gold); color: var(--navy-900); }

/* ============================================================
   AUTORIDADE
   ============================================================ */
.author-grid { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-12); align-items:center; }
.author-photo { width:100%; aspect-ratio: 4/5; border-radius: var(--radius-lg); border: 1px solid var(--gold-line); }
.author-name { font-family: var(--font-display); font-size: 32px; color: var(--cream); margin-bottom: 4px; }
.author-role { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-6); }

/* ============================================================
   ANCORAGEM
   ============================================================ */
.anchor-list { display:flex; flex-direction:column; gap: var(--sp-3); margin: var(--sp-8) 0; }
.anchor-row { display:flex; justify-content:space-between; align-items:baseline; gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); font-size: 16px; color: var(--cream-dim); }
.anchor-row .price { font-family: var(--font-display); font-size: 22px; color: var(--cream-faint); flex-shrink: 0; }
.price-flip { background: var(--navy-700); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-8); text-align:center; margin-top: var(--sp-8); }
.price-flip .big { font-family: var(--font-display); font-size: clamp(26px, 4.2vw, 38px); color: var(--cream); line-height: 1.25; }
.price-flip .big b { color: var(--gold); }

/* ============================================================
   OFERTA — stack de valor
   ============================================================ */
.mockup-total { width:100%; aspect-ratio: 16/10; border-radius: var(--radius-lg); margin-bottom: var(--sp-8); }
.offer-card {
  background: linear-gradient(160deg, var(--navy-700), var(--navy-600));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.offer-eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: var(--sp-6); }
.offer-row { display:flex; justify-content:space-between; align-items:baseline; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--cream-dim); }
.offer-row .it { display:flex; gap: var(--sp-3); align-items:baseline; }
.offer-row .tag { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); }
.offer-was { color: var(--cream-faint); text-decoration: line-through; font-size: 14px; flex-shrink: 0; }
.offer-total { display:flex; justify-content:space-between; align-items:center; padding: var(--sp-4) 0 var(--sp-2); font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-faint); }
.offer-total .v { font-family: var(--font-display); font-size: 22px; color: var(--cream-faint); text-decoration: line-through; letter-spacing: 0; }
.offer-final { text-align:center; padding: var(--sp-6) 0 var(--sp-2); }
.offer-final-label { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-faint); }
.offer-price { font-family: var(--font-display); font-size: clamp(56px, 9vw, 84px); line-height: 1; color: var(--gold); margin: var(--sp-2) 0; }
.offer-price .cur { font-size: 0.45em; vertical-align: 0.5em; }
.offer-micro { font-family: var(--font-ui); font-size: 12.5px; color: var(--cream-faint); margin-bottom: var(--sp-6); }
.seals { display:flex; flex-wrap:wrap; justify-content:center; gap: var(--sp-4); margin-top: var(--sp-6); }
.seal { display:inline-flex; align-items:center; gap: var(--sp-2); font-family: var(--font-ui); font-size: 12px; color: var(--cream-faint); }
.seal .dot { width:7px; height:7px; border-radius:50%; background: var(--gold); }

/* ============================================================
   GARANTIA
   ============================================================ */
.guarantee { display:grid; grid-template-columns: auto 1fr; gap: var(--sp-8); align-items:center; }
.seal-big {
  width:136px; height:136px; border-radius: var(--radius-full);
  border: 2px solid var(--gold); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; flex-shrink:0;
  background: rgba(212,175,55,.08);
}
.seal-big .num { font-family: var(--font-display); font-size: 54px; color: var(--gold); line-height: 1; }
.seal-big .lbl { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); margin-top: 4px; }
.guarantee-strip { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--cream-dim); margin-top: var(--sp-6); }

/* ============================================================
   PARA QUEM É / NÃO É
   ============================================================ */
.fit-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items:start; }
.fit-card { border-radius: var(--radius-xl); padding: var(--sp-8); }
.fit-yes { background: var(--navy-700); border: 1px solid var(--gold-line); }
.fit-no { background: transparent; border: 1px solid var(--line); }
.fit-head { font-family: var(--font-display); font-size: 22px; margin-bottom: var(--sp-6); }
.fit-yes .fit-head { color: var(--gold); }
.fit-no .fit-head { color: var(--cream-faint); }
.check-list { list-style:none; display:flex; flex-direction:column; gap: var(--sp-4); }
.check-list li { display:flex; align-items:flex-start; gap: var(--sp-3); font-size: 15px; color: var(--cream-dim); line-height: 1.5; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display:flex; flex-direction:column; gap: var(--sp-3); }
.faq-item { background: var(--navy-700); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; }
.faq-q { width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family: var(--font-display); font-size: 18px; color: var(--cream); padding: var(--sp-6); display:flex; justify-content:space-between; align-items:center; gap: var(--sp-4); }
.faq-q .ico { flex-shrink:0; width:22px; height:22px; position:relative; }
.faq-q .ico::before, .faq-q .ico::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background: var(--gold); }
.faq-q .ico::before { width:14px; height:2px; }
.faq-q .ico::after { width:2px; height:14px; transition: transform .25s; }
.faq-item[open] .ico::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-a { padding: 0 var(--sp-6) var(--sp-6); font-size: 15px; color: var(--cream-dim); line-height: 1.65; }
.faq-item summary { list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { text-align:center; padding: var(--sp-12) var(--sp-6) var(--sp-10); background: var(--navy-850); border-top: 1px solid var(--gold-line); color: var(--cream-faint); }
.footer .brand { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.06em; color: var(--cream); margin-bottom: var(--sp-3); }
.footer .meta { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; }

/* ============================================================
   IMAGE SLOTS (tema escuro)
   ============================================================ */
image-slot {
  --islot-bg: rgba(255,255,255,0.04);
  --islot-fg: var(--cream-faint);
  --islot-border: 1px dashed rgba(212,175,55,0.30);
  width: 100%;
  touch-action: pan-y;
}
.shot { background: var(--islot-bg) repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(255,255,255,0.02) 9px, rgba(255,255,255,0.02) 10px); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 720px) {
  .hero-section {
    padding: var(--sp-8) var(--sp-4);
  }
  .hero-section .display {
    width: 100%;
    max-width: 400px !important;
    font-size: clamp(20px, 5.4vw, 25px);
    line-height: 1.14 !important;
    margin-bottom: var(--sp-4) !important;
  }
  .hero-section .lede {
    width: 100%;
    max-width: 400px;
    font-size: 15px;
    line-height: 1.58;
    margin-bottom: var(--sp-4) !important;
  }
  .hero-section .microcopy {
    font-size: 10.5px;
    letter-spacing: 0.02em !important;
    margin-bottom: var(--sp-5) !important;
  }
  .hero-section #vturb-video-slot {
    max-width: min(310px, 86vw) !important;
    margin-bottom: var(--sp-6) !important;
  }
  .hero-section .cta-wrap { gap: var(--sp-3); }
  .ba-grid, .syllabus, .bonus-grid, .fit-grid { grid-template-columns: 1fr; }
  .bonus-card.feature { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr !important; gap: var(--sp-6); }
  .author-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .author-photo { max-width: 320px; margin: 0 auto; }
  .guarantee { grid-template-columns: 1fr; justify-items:center; text-align:center; gap: var(--sp-6); }
  .step { padding: var(--sp-6); gap: var(--sp-4); }
  .section-banner, .agit-image { aspect-ratio: 16/9; }
}