/* ==========================================================================
   Código da Edição IA · Página de vendas
   Breakpoints: desktop ≥ 1025px · tablet/mobile ≤ 1024px
   ========================================================================== */

:root {
  --bg: #0B0B0B;
  --bg-2: #0E0E0E;
  --bg-3: #0F0F0F;
  --card: #121212;
  --card-2: #161616;
  --line: #1A1A1A;
  --line-2: #262626;
  --white: #FFFFFF;
  --text: #E5E5E5;
  --muted: #A3A3A3;
  --muted-2: #8A8A8A;
  --dim: #6B6B6B;
  --orange: #FF6A3D;
  --red: #FF2D2D;
  --pink: #FF4FA8;
  --purple: #C542FF;
  --violet: #8A5BFF;
  --grad: linear-gradient(135deg, #FF6A3D, #FF2D2D 50%, #FF4FA8);
  --grad-text: linear-gradient(135deg, #FF6A3D, #FF2D2D 45%, #FF4FA8 85%);
  --grad-border: linear-gradient(135deg, #FF6A3D, #FF2D2D 40%, #FF4FA8 75%, #C542FF);
  --sans: 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --header-h: 63px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--orange); }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(255, 79, 168, .35); color: #fff; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Layout ---------- */
.container { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.section { padding-top: 120px; padding-bottom: 120px; }
.section-sm { padding-top: 96px; padding-bottom: 96px; }
.band { border-top: 1px solid var(--line); background: var(--bg-2); }

.section-head { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.maxw-760 { max-width: 760px; }

.stack-6, .stack-12, .stack-14, .stack-16, .stack-20, .stack-22, .stack-24, .stack-48 { display: flex; flex-direction: column; }
.stack-6 { gap: 6px; } .stack-12 { gap: 12px; } .stack-14 { gap: 14px; } .stack-16 { gap: 16px; }
.stack-20 { gap: 20px; } .stack-22 { gap: 22px; } .stack-24 { gap: 24px; } .stack-48 { gap: 48px; } 

/* ---------- Type ---------- */
.mono { font-family: var(--mono); }
.c-pink { color: var(--pink); }
.c-dim { color: var(--dim); }
.eyebrow { font-family: var(--mono); font-size: 0.75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pink); line-height: 1.5; }

.h1 { font-weight: 600; font-size: clamp(2.375rem, 5vw, 4.125rem); line-height: 1.04; letter-spacing: -.04em; color: var(--white); text-wrap: balance; }
.h2 { font-weight: 600; font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.03em; color: var(--white); text-wrap: balance; }
.h2--xl { font-size: clamp(2.125rem, 5vw, 3.75rem); line-height: 1.04; letter-spacing: -.035em; }
.h2--lg { font-size: clamp(2.125rem, 4.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.035em; }
.h2--sm { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.lead { max-width: 540px; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.body-lg { font-size: 1.125rem; line-height: 1.65; color: var(--muted); max-width: 520px; }
.body-md { font-size: 1.0625rem; line-height: 1.65; color: var(--muted); max-width: 620px; }
.text-strong { color: var(--text); }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-weight: 600; color: var(--white); border-radius: 999px; background: var(--grad); box-shadow: 0 10px 40px rgba(255, 45, 45, .38), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .25s var(--ease), box-shadow .25s var(--ease); white-space: nowrap; }
.btn:hover { color: var(--white); transform: translateY(-2px); box-shadow: 0 16px 50px rgba(255, 45, 45, .5), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn--sm { font-size: 0.875rem; padding: 11px 20px; box-shadow: 0 6px 24px rgba(255, 45, 45, .3); }
.btn--md { font-size: 1rem; padding: 17px 30px; }
.btn--lg { font-size: 1.0625rem; padding: 20px 34px; }
.btn--block { width: 100%; }
/* brilho branco passando no botão */
.btn--shine::after { content: ''; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 38%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .08) 25%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .08) 75%, transparent 100%); transform: translateX(-160%) skewX(-22deg); animation: shine 3.6s cubic-bezier(.45, 0, .2, 1) infinite; pointer-events: none; }
.btn--shine > * { position: relative; }
@keyframes shine { 0% { transform: translateX(-160%) skewX(-22deg); } 55%, 100% { transform: translateX(360%) skewX(-22deg); } }

.hero__lote { font-size: 0.9375rem; color: var(--muted); }
.hero__lote b { color: var(--white); font-weight: 600; }

/* ---------- Chips / tags ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; }
.chip { font-size: 0.875rem; color: var(--text); border: 1px solid var(--line-2); background: var(--card); border-radius: 999px; padding: 8px 14px; transition: border-color .25s, color .25s; }
.chip:hover { border-color: rgba(255, 79, 168, .45); color: var(--white); }
.chips--sm .chip { font-size: 0.75rem; padding: 6px 12px; }
.tag { font-size: 0.75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border: 1px solid #333; border-radius: 999px; padding: 7px 12px; }
.tag--grad { color: var(--bg); font-weight: 500; background: linear-gradient(135deg, var(--orange), var(--pink)); border: 0; }

.stripes { background: repeating-linear-gradient(135deg, #121212 0 10px, #161616 10px 20px); }

/* ---------- Spotlight (cursor segue o card) ---------- */
.spot { position: relative; isolation: isolate; }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .35s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 79, 168, .12), transparent 60%); pointer-events: none; }
.spot:hover::before { opacity: 1; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(11, 11, 11, .6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, .04); transition: background .3s, border-color .3s; }
.header.is-scrolled { background: rgba(11, 11, 11, .95); border-color: rgba(255, 255, 255, .08); }
.header__inner { padding-top: 14px; padding-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.header__logo { height: 34px; width: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background-color: var(--bg); background-image: radial-gradient(45% 58% at 78% 30%, rgba(255, 45, 45, .15), transparent 70%), radial-gradient(26% 32% at 94% 58%, rgba(197, 66, 255, .08), transparent 70%); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; background: linear-gradient(180deg, rgba(11, 11, 11, 0), var(--bg)); pointer-events: none; }
.hero__grid { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 64px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 24px; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 8px; }
.hero__media { display: flex; justify-content: center; perspective: 1200px; }

.phone { position: relative; width: 100%; max-width: 380px; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.phone__glow { position: absolute; inset: 10% -12% -6%; background: radial-gradient(closest-side, rgba(255, 45, 45, .4), transparent); filter: blur(20px); pointer-events: none; }
.phone__frame { position: relative; border-radius: 32px; padding: 1px; background: linear-gradient(160deg, rgba(255, 106, 61, .8), rgba(255, 255, 255, .08) 45%, rgba(197, 66, 255, .6)); }
.phone__screen { position: relative; aspect-ratio: 9 / 16; border-radius: 31px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.badge-live { position: absolute; top: 22px; left: 22px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text); background: rgba(11, 11, 11, .6); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 6px 10px; }
.badge-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink 1.6s ease-in-out infinite; }
.play { width: 84px; height: 84px; border: 0; border-radius: 24px; background: var(--grad); box-shadow: 0 16px 48px rgba(255, 45, 45, .5), inset 0 1px 0 rgba(255, 255, 255, .35); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .25s var(--ease); }
.play:hover { transform: scale(1.06); }
.play > span { width: 0; height: 0; border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; }
.play--sm { width: 38px; height: 38px; border-radius: 12px; }
.play--sm > span { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; margin-left: 3px; }

.phone__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .08); }
.phone__progress i { display: block; width: 28%; height: 100%; background: linear-gradient(90deg, var(--orange), var(--pink)); animation: progress 9s linear infinite; }
@keyframes progress { from { width: 0; } to { width: 100%; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ==========================================================================
   S2 + S3 · Carrossel horizontal
   ========================================================================== */
.panel { position: relative; overflow: hidden; }
.panel--dor { background: var(--bg); }
.panel--virada { background: var(--bg); background-image: radial-gradient(50% 80% at 90% 50%, rgba(255, 45, 45, .22), transparent 70%), radial-gradient(40% 60% at 5% 100%, rgba(197, 66, 255, .14), transparent 70%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.panel__grid { padding-top: 120px; padding-bottom: 120px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px; align-items: center; }
.dor__text { display: flex; flex-direction: column; gap: 18px; font-size: 1.0625rem; line-height: 1.65; color: var(--muted); max-width: 500px; margin-top: 8px; }
.callout { padding: 18px 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--white); font-weight: 600; }
.nope { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); font-weight: 600; font-size: 1.25rem; color: var(--white); backdrop-filter: blur(6px); }
.nope__x { font-size: 1rem; color: var(--red); }

.hscroll__nav { display: none; }

/* ativado via JS (classe .has-h no <html>) só em ≥1025px */
@media (min-width: 1025px) {
  .has-h .hscroll { position: relative; height: 100vh; overflow: hidden; }
  .has-h .hscroll__track { display: flex; width: 200vw; height: 100%; will-change: transform; }
  .has-h .panel { width: 100vw; height: 100vh; flex-shrink: 0; display: flex; align-items: center; }
  .has-h .panel > .container { width: 100%; }
  .has-h .panel__grid { padding-top: calc(var(--header-h) + 24px); padding-bottom: 72px; }
  .has-h .panel--virada { border-top: 0; border-bottom: 0; border-left: 1px solid var(--line); }
  .has-h .hscroll__nav { display: flex; position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%); align-items: center; gap: 14px; font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
  .hscroll__nav span { transition: color .3s; }
  .hscroll__nav span.is-on { color: var(--text); }
  .hscroll__bar { width: 120px; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
  .hscroll__bar i { display: block; height: 100%; width: 100%; background: rgba(255, 255, 255, .8); transform-origin: left; transform: scaleX(0); }
}

/* ---------- Galeria animada (S2) ---------- */
.gallery-wrap { position: relative; display: flex; justify-content: center; }
.gallery-wrap::before { content: ''; position: absolute; inset: -12% -6%; background-image: radial-gradient(circle, rgba(255, 255, 255, .13) 1px, transparent 1.3px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent); mask-image: radial-gradient(closest-side, #000 35%, transparent); pointer-events: none; }
.gallery { position: relative; width: 100%; max-width: 480px; border-radius: 24px; background: linear-gradient(180deg, rgba(20, 20, 20, .92), rgba(13, 13, 13, .96)); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04); padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.gallery__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gallery__title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1rem; color: var(--white); }
.gallery__title svg { color: var(--muted); }
.gallery__count { font-size: 0.6875rem; font-weight: 400; color: var(--muted-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 9px; }
.gallery__count b { color: var(--white); font-weight: 500; }
.gallery__day { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; }
.gallery__day i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px rgba(255, 45, 45, .6); }
.gallery__week { display: flex; flex-direction: column; gap: 8px; }
.week__line { height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.week__line i { display: block; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .85)); transform-origin: left; transform: scaleX(0); }
.week__days { display: flex; justify-content: space-between; font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.week__days span { transition: color .3s; }
.week__days span.is-on { color: var(--text); }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.thumb { position: relative; aspect-ratio: 9 / 13; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .06); background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .13) 0 14%, transparent 15%), radial-gradient(ellipse 46% 30% at 50% 96%, rgba(255, 255, 255, .09) 0 97%, transparent 100%), linear-gradient(165deg, #171717, #111 70%); transition: filter .6s; }
.thumb::after { content: ''; position: absolute; top: 8px; left: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.thumb span { position: absolute; right: 6px; bottom: 6px; font-size: 0.5625rem; color: var(--text); background: rgba(11, 11, 11, .7); border-radius: 4px; padding: 2px 5px; }
.gallery.is-stale .thumb { filter: grayscale(.7) brightness(.6); }
.gallery__foot { display: flex; align-items: center; gap: 12px; font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); padding-top: 14px; border-top: 1px solid var(--line); }
.gallery__bar { flex: 1; height: 6px; border-radius: 6px; background: var(--line-2); overflow: hidden; position: relative; }
.gallery__bar i { position: absolute; inset: 0; width: 6%; background: rgba(255, 255, 255, .5); border-radius: 6px; }
.gallery.is-stale .gallery__bar i { animation: blink 1.4s ease-in-out infinite; }
.gallery__ratio { color: var(--text); }
.gallery__ratio b { font-weight: 400; }
.toast { position: absolute; bottom: 64px; right: -32px; width: min(300px, 86%); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(24, 24, 24, .82); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); opacity: 0; }
.toast__icon { position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--text); background: #222; border: 1px solid #2E2E2E; }
.toast__icon::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid #181818; }
.toast__body { display: flex; flex-direction: column; gap: 2px; font-size: 0.8125rem; line-height: 1.35; color: var(--muted); }
.toast__body b { color: var(--white); font-weight: 600; }
.toast__time { align-self: flex-start; font-size: 0.625rem; color: var(--dim); }

/* ==========================================================================
   S4 · Como funciona (console sticky + passos)
   ========================================================================== */
.how { position: relative; }
.how__grid { padding-top: 120px; padding-bottom: 120px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: start; }
.how__sticky { position: sticky; top: calc(var(--header-h) + 48px); display: flex; flex-direction: column; gap: 36px; }

.console { border-radius: 24px; background: linear-gradient(180deg, #141414, #0E0E0E); border: 1px solid var(--line-2); box-shadow: 0 40px 100px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .02) inset; overflow: hidden; }
.console__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #2A2A2A; }
.dots i:first-child { background: var(--red); opacity: .8; }
.console__step b { color: var(--white); font-weight: 500; }
.console__body { position: relative; height: 300px; background-image: radial-gradient(circle, rgba(255, 255, 255, .09) 1px, transparent 1.3px), linear-gradient(180deg, rgba(11, 11, 11, .6), transparent 30%, transparent 70%, rgba(11, 11, 11, .6)); background-size: 24px 24px, 100% 100%; }
.cstate { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.cstate.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s; }

.code { border-radius: 16px; background: #0B0B0B; border: 1px solid var(--line); overflow: hidden; }
.code__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 0.6875rem; color: var(--muted-2); }
.pill-ok { font-size: 0.625rem; letter-spacing: .08em; color: var(--text); border: 1px solid var(--line-2); background: #161616; border-radius: 999px; padding: 3px 8px; }
.console .c-pink { color: var(--muted); }
.code pre { margin: 0; padding: 16px; font-size: 0.8125rem; line-height: 1.75; color: var(--text); white-space: pre-wrap; }
.code pre span { display: inline; }

.upload { display: flex; flex-direction: column; gap: 16px; }
.upload__file { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: #0B0B0B; border: 1px solid var(--line); }
.upload__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text); background: #1A1A1A; border: 1px solid var(--line-2); flex-shrink: 0; }
.upload__meta { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.upload__meta b { font-size: 0.9375rem; color: var(--white); }
.upload__meta span { font-size: 0.6875rem; color: var(--muted-2); }
.upload__pct { font-size: 0.8125rem; color: var(--text); }
.upload__bar { height: 6px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
.upload__bar i { display: block; height: 100%; width: 0; background: rgba(255, 255, 255, .8); border-radius: 6px; }
.wave { display: flex; align-items: center; gap: 4px; height: 54px; padding: 0 4px; }
.wave i { flex: 1; border-radius: 3px; background: rgba(255, 255, 255, .12); height: 30%; }
.wave i:nth-child(3n) { height: 70%; } .wave i:nth-child(4n) { height: 45%; } .wave i:nth-child(5n) { height: 90%; } .wave i:nth-child(7n) { height: 12%; background: rgba(255, 255, 255, .06); }

.chat { display: flex; flex-direction: column; gap: 14px; }
.bubble { max-width: 92%; font-size: 0.9375rem; line-height: 1.55; border-radius: 18px; padding: 14px 16px; }
.bubble--me { align-self: flex-end; background: #1C1C1C; border: 1px solid #2E2E2E; color: var(--white); border-bottom-right-radius: 6px; min-height: 52px; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--text); animation: blink .9s steps(2) infinite; }
.chat__input { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 14px; background: #0B0B0B; border: 1px solid var(--line); font-size: 0.75rem; color: var(--dim); }
.send { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--bg); background: var(--text); font-weight: 600; }
.bubble--ai { align-self: flex-start; background: #0B0B0B; border: 1px solid var(--line-2); color: var(--text); border-bottom-left-radius: 6px; display: flex; flex-direction: column; gap: 12px; }
.bubble__who { display: flex; align-items: center; gap: 8px; font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bubble__who img { width: 16px; height: 16px; }
.result { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.result__thumb { width: 64px; height: 64px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.result__meta { display: flex; flex-direction: column; gap: 3px; }
.result__meta b { font-size: 0.875rem; color: var(--white); }
.result__meta span { font-size: 0.6875rem; color: var(--muted); }
.result__meta span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3DDC97; margin-right: 6px; vertical-align: 1px; }
.result .play--sm { background: #222; border: 1px solid #333; box-shadow: none; }

.steps { position: relative; display: flex; flex-direction: column; padding-left: 0; }
.steps__line { position: absolute; top: 12px; bottom: 12px; left: 21px; width: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.steps__line i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .8)); transform-origin: top; transform: scaleY(0); }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 24px; padding: 56px 0; opacity: .32; transition: opacity .5s var(--ease); }
.step:first-of-type { padding-top: 0; }
.step.is-active { opacity: 1; }
.step__n { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 500; color: var(--muted); background: var(--card); border: 1px solid var(--line-2); transition: background .4s, color .4s, border-color .4s, box-shadow .4s; }
.step.is-active .step__n { color: var(--bg); background: linear-gradient(135deg, var(--orange), var(--pink)); border-color: transparent; box-shadow: 0 8px 28px rgba(255, 79, 168, .35); }
.step__t { font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; color: var(--white); margin-bottom: 12px; padding-top: 2px; }
.step p { font-size: 1.0625rem; line-height: 1.6; color: var(--muted); max-width: 420px; }

@media (min-width: 1025px) {
  .steps { padding-top: 96px; padding-bottom: 20vh; }
  .step { min-height: 42vh; align-content: center; padding: 0; }
  .step:first-of-type { padding-top: 0; }
  .steps__line { top: 96px; bottom: 20vh; }
}

/* ==========================================================================
   S5 · 9 códigos
   ========================================================================== */

.codes { position: relative; }

.ba__media span { font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

.carousel-dots, .carousel-nav { display: none; }

@media (max-width: 1024px) {
  
  
  .arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--white); cursor: pointer; font-size: 1rem; transition: border-color .25s, opacity .25s; }
  .arrow:hover { border-color: rgba(255, 79, 168, .5); }
  .arrow:disabled { opacity: .35; cursor: default; }
  .codes { margin: 0 -24px; }
  
  
  
  
  .carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: -32px; }
  .carousel-dots i { width: 6px; height: 6px; border-radius: 6px; background: var(--line-2); transition: width .35s var(--ease), background .35s; }
  .carousel-dots i.is-on { width: 22px; background: linear-gradient(90deg, var(--orange), var(--pink)); }
}
@media (max-width: 640px) {
  
  
  .arrow { width: 40px; height: 40px; }
}

/* ==========================================================================
   Demais seções
   ========================================================================== */
.ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.ba__media { aspect-ratio: 16 / 9; border-radius: 24px; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; }
.ba__media--after { padding: 1px; border: 0; background: var(--grad-border); box-shadow: 0 30px 80px rgba(255, 45, 45, .25); }
.ba__media--after > div { width: 100%; height: 100%; border-radius: 23px; display: flex; align-items: center; justify-content: center; }
.ba__meta { display: flex; justify-content: center; align-items: center; gap: 24px; }
.ba__note { font-size: 0.875rem; color: var(--muted-2); }
.ba__caption { margin: 0 auto; max-width: 720px; text-align: center; font-size: 1.125rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; }

.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: border-color .3s; }
.card:hover { border-color: rgba(255, 79, 168, .35); }
.card > span { font-size: 0.75rem; }
.card h3 { font-weight: 600; font-size: 1.375rem; line-height: 1.25; color: var(--white); }
.card p { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.cta-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; padding: 36px 40px; border-radius: 24px; border: 1px solid rgba(255, 79, 168, .3); background: var(--bg) radial-gradient(60% 120% at 100% 50%, rgba(255, 45, 45, .22), transparent 70%); }
.cta-strip p { font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.3; letter-spacing: -.015em; color: var(--white); }

/* Accordion (módulos + FAQ) */
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.acc__panel > div { overflow: hidden; }
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__btn { width: 100%; display: flex; align-items: center; gap: 16px; background: none; border: 0; cursor: pointer; text-align: left; }
.acc__plus { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; line-height: 1; color: var(--pink); transition: transform .45s var(--ease); }
.acc.is-open .acc__plus { transform: rotate(135deg); }

.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: stretch; }
.compare__brand { display: flex; align-items: center; gap: 12px; }
.grad-border { border-radius: 24px; padding: 1px; background: var(--grad-border); box-shadow: 0 30px 80px rgba(255, 45, 45, .22); }
.xlist, .vlist { display: flex; flex-direction: column; gap: 14px; }
.xlist li, .vlist li { display: flex; gap: 12px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.xlist li::before { content: '✕'; font-family: var(--mono); color: var(--dim); }
.vlist li { color: var(--white); }
.vlist li::before { content: '✓'; font-family: var(--mono); color: var(--pink); }

/* Oferta · borda com feixe de luz girando */
.offer { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: var(--bg); background-image: radial-gradient(50% 55% at 50% 0%, rgba(255, 45, 45, .14), transparent 70%), radial-gradient(38% 30% at 50% 72%, rgba(197, 66, 255, .06), transparent 70%); }
.offer::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 260px; background: linear-gradient(180deg, rgba(11, 11, 11, 0), var(--bg)); pointer-events: none; }
.offer__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 48px; }
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.beam { width: 100%; max-width: 960px; border-radius: 32px; padding: 1px; background: conic-gradient(from var(--beam), rgba(255, 79, 168, .25), rgba(255, 106, 61, .25) 20%, #FF6A3D 30%, #fff 33%, #FF4FA8 36%, rgba(197, 66, 255, .3) 50%, rgba(255, 79, 168, .25) 75%, #C542FF 85%, rgba(255, 79, 168, .25)); box-shadow: 0 20px 70px rgba(255, 45, 45, .24); animation: beam 6s linear infinite; }
@keyframes beam { to { --beam: 360deg; } }
.offer__card { border-radius: 31px; background: var(--bg-3); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); overflow: hidden; }
.offer__list { padding: 40px; display: flex; flex-direction: column; }
.offer__list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.5; color: var(--text); }
.offer__list li:last-child { border-bottom: 0; }
.offer__list li::before { content: '✓'; font-family: var(--mono); font-size: 0.875rem; color: var(--pink); line-height: 1.5; }
.offer__price { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 20px; border-left: 1px solid var(--line); background: radial-gradient(80% 60% at 50% 0%, rgba(255, 45, 45, .14), transparent 70%); }
.offer__from { font-size: 1rem; color: var(--muted-2); text-decoration: line-through; }
.offer__value { font-weight: 600; font-size: clamp(3.5rem, 7vw, 5rem); line-height: 1; letter-spacing: -.04em; color: var(--white); }
.offer__install { font-size: 1rem; color: var(--muted); }
.offer__trust { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-align: left; font-size: 0.8125rem; color: var(--muted-2); }
.offer__cakto { height: 20px; width: auto; opacity: .7; }

/* Garantia */
.guarantee { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 56px; padding: 56px; border-radius: 32px; background: var(--bg-3) radial-gradient(40% 80% at 12% 50%, rgba(255, 45, 45, .18), transparent 70%); border: 1px solid var(--line); }
.guarantee__copy { flex: 0 1 640px; min-width: 260px; }
.seal { position: relative; width: 220px; height: 220px; flex-shrink: 0; }
.seal__blur, .seal__ring { position: absolute; border-radius: 50%; background: conic-gradient(from 0deg, #FF6A3D, #FF2D2D, #FF4FA8, #C542FF, #8A5BFF, #FF6A3D); animation: spin 6s linear infinite; }
.seal__blur { inset: 6px; filter: blur(22px); opacity: .55; }
.seal__ring { inset: 0; }
.seal__mask { position: absolute; inset: 2px; border-radius: 50%; background: var(--bg); }
.seal__text { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 24s linear infinite reverse; font-family: var(--mono); font-size: 0.7188rem; letter-spacing: 2.4px; text-transform: uppercase; }
.seal__core { position: absolute; inset: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: radial-gradient(circle at 50% 30%, #1A1A1A, #0B0B0B 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; animation: pulse 3s ease-in-out infinite; }
.seal__n { font-weight: 600; font-size: 4rem; line-height: 1; letter-spacing: -.05em; background: linear-gradient(160deg, #fff 20%, var(--pink) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.seal__d { font-size: 0.6875rem; letter-spacing: .3em; text-transform: uppercase; color: var(--orange); margin-right: -.3em; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* Autor */
.author { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 56px; align-items: center; }

/* FAQ */
.faq { padding-top: 48px; display: flex; flex-direction: column; gap: 40px; }
.faq__list { border-top: 1px solid var(--line-2); }
.faq .acc { border-bottom: 1px solid var(--line-2); }
.faq .acc__btn { justify-content: space-between; padding: 22px 0; }
.faq .acc__title { font-weight: 600; font-size: 1.125rem; line-height: 1.35; color: var(--white); }
.faq .acc__panel p { padding-bottom: 22px; font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 720px; }

/* CTA final */
.final { padding: 0 24px 96px; }
.final__box { position: relative; overflow: hidden; max-width: 1200px; margin: 0 auto; border-radius: 32px; border: 1px solid var(--line); background: var(--bg); background-image: radial-gradient(60% 90% at 50% 120%, rgba(255, 45, 45, .45), transparent 70%), radial-gradient(40% 60% at 100% 0%, rgba(197, 66, 255, .2), transparent 70%); padding: 96px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.final__box .h2 { max-width: 820px; }
.final__icon { width: 72px; height: 72px; animation: float 5s ease-in-out infinite; }
.final__sub { font-size: 1.1875rem; line-height: 1.6; color: var(--text); }
.final__box .btn { margin-top: 8px; padding: 19px 36px; }
.final__note { font-size: 0.8125rem; color: var(--muted); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Footer */
.footer { border-top: 1px solid var(--line); }
.footer__inner { padding-top: 40px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }

.footer__logo { height: 30px; width: auto; }
.footer__legal { font-size: 0.75rem; color: var(--muted-2); }

/* ==========================================================================
   Tablet / mobile
   ========================================================================== */
@media (max-width: 1024px) {
  .section, .how__grid, .panel__grid { padding-top: 88px; padding-bottom: 88px; }
  .how__grid { grid-template-columns: 1fr; gap: 40px; }
  .how__sticky { position: static; }
  .steps__line { left: 21px; }
  .step { padding: 28px 0; }
  .gallery-wrap { padding-top: 28px; }
  .toast { right: -8px; bottom: 56px; }
}
@media (max-width: 640px) {
  .section, .how__grid, .panel__grid { padding-top: 72px; padding-bottom: 72px; }
  .hero__grid { padding-top: 56px; padding-bottom: 72px; gap: 48px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .codes { margin: 0 -16px; }
  
  .gallery { padding: 16px; border-radius: 22px; }
  .gallery__grid { gap: 6px; }
  .toast { right: -4px; bottom: 52px; }
  .console__body { height: 320px; }
  .cstate { padding: 16px; }
  .code pre { font-size: 0.75rem; }
  .cta-strip { padding: 28px 24px; }
  .offer__list, .offer__price { padding: 28px 24px; }
  .offer__price { border-left: 0; border-top: 1px solid var(--line); }
  .guarantee { padding: 36px 24px; gap: 36px; }
  
  
  
  
  .final__box { padding: 72px 20px; }
  .final { padding: 0 16px 72px; }
}


/* ==========================================================================
   S8 · Aulas: corredor 3D (desktop) + carrossel (≤1024px)
   ========================================================================== */
.learn { position: relative; overflow: hidden; padding: 120px 0 96px; }
.learn__head .body-lg { max-width: 560px; }
.learn__mods { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; font-size: 0.75rem; color: var(--muted); }
.learn__mods span { border: 1px solid var(--line-2); background: var(--card); border-radius: 999px; padding: 7px 14px; }
.learn__mods b { color: var(--pink); font-weight: 500; margin-right: 6px; }

.lcard { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 2 / 3; padding: 7%; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background-color: #111; background-image: radial-gradient(circle, rgba(255, 255, 255, .08) 1px, transparent 1.3px), radial-gradient(90% 60% at 20% 0%, color-mix(in srgb, var(--t) 30%, transparent), transparent 70%), linear-gradient(180deg, #151515, #0D0D0D); background-size: 18px 18px, 100% 100%, 100% 100%; color: var(--white); }
.lcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lcard.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 35%, transparent 50%, rgba(0, 0, 0, .8)); z-index: 0; }
.lcard > *:not(img) { position: relative; z-index: 1; }
.lcard__mod { align-self: flex-start; font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text); background: rgba(11, 11, 11, .55); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 5px 9px; }
.lcard__foot { display: flex; flex-direction: column; gap: 8px; }
.lcard__n { font-size: 2.125rem; line-height: 1; letter-spacing: -.04em; background: linear-gradient(160deg, #fff 20%, var(--t) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lcard h3 { font-weight: 600; font-size: 1.0625rem; line-height: 1.25; letter-spacing: -.01em; }

.corridor { display: none; }
@media (min-width: 1025px) {
  .learn { padding-bottom: 40px; }
  .lessons, .carousel-nav { display: none !important; }
  .learn__head { position: relative; z-index: 2; }
  .corridor { display: block; position: relative; height: clamp(460px, 42vw, 620px); margin-top: -130px; container-type: inline-size; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent); }
  .corridor__stage { position: absolute; inset: 0; pointer-events: none; }
  .corridor__world { position: absolute; inset: 0; transform-style: preserve-3d; }
  .corridor .lcard { position: absolute; aspect-ratio: auto; backface-visibility: hidden; padding: 1.4cqw; border-radius: .9cqw; }
  .corridor .lcard__mod { font-size: .8cqw; padding: .35cqw .7cqw; }
  .corridor .lcard__n { font-size: 2.6cqw; }
  .corridor .lcard h3 { font-size: 1.3cqw; }
  .corridor.is-paused .lcard { animation-play-state: paused; }
}
@media (max-width: 1024px) {
  .learn { padding: 88px 0 72px; }
  .lessons { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px; padding: 40px 24px 8px; scrollbar-width: none; }
  .lessons::-webkit-scrollbar { display: none; }
  .lessons .lcard { flex: 0 0 240px; scroll-snap-align: start; }
  .carousel-nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 20px; }
  .carousel-nav .carousel-dots { margin-top: 0; }
}
@media (max-width: 640px) {
  .lessons { padding: 32px 16px 8px; scroll-padding: 0 16px; }
  .lessons .lcard { flex-basis: 64%; }
}

/* ==========================================================================
   S9 · Comparativo (cards com visual)
   ========================================================================== */
.vcard { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 24px; }
.vcard--win { border: 0; border-radius: 23px; background: var(--bg-3) radial-gradient(80% 50% at 100% 100%, rgba(255, 45, 45, .12), transparent 70%); }
.vcard__body { padding: 28px 30px 32px; display: flex; flex-direction: column; gap: 20px; }
.vcard h3 { font-weight: 600; font-size: 1.375rem; letter-spacing: -.015em; color: var(--muted); }
.vcard--win h3 { color: var(--white); }
.visual { position: relative; aspect-ratio: 564 / 410; overflow: hidden; border-bottom: 1px solid var(--line); background-color: #0D0D0D; background-image: radial-gradient(circle, rgba(255, 255, 255, .11) 1px, transparent 1.3px); background-size: 22px 22px; }
.visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 13, .7), transparent 25%, transparent 70%, rgba(13, 13, 13, .8)); pointer-events: none; }

/* editar sozinho */
.nle { position: absolute; inset: 14% 8%; display: flex; flex-direction: column; gap: 8px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(16, 16, 16, .9); padding: 10px; overflow: hidden; }
.nle__top { display: flex; justify-content: space-between; align-items: center; font-size: 0.5625rem; color: var(--dim); }
.nle__clock { display: flex; align-items: center; gap: 6px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 8px; }
.nle__clock i { width: 5px; height: 5px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; }
.nle__clock b { font-weight: 500; }
.nle__ruler { height: 8px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .15) 0 1px, transparent 1px 12px); }
.nle__tracks { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.nle__track { position: relative; flex: 1; border-radius: 4px; background: rgba(255, 255, 255, .03); }
.nle__track i { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: #2A2A2A; border: 1px solid #333; }
.nle__track--a i { background: repeating-linear-gradient(90deg, #262626 0 2px, #1E1E1E 2px 4px); }
.nle__head { position: absolute; top: 34px; bottom: 8px; left: 20%; width: 1px; background: var(--muted); animation: scrub 7s ease-in-out infinite alternate; }
.nle__head::before { content: ''; position: absolute; top: -4px; left: -4px; border: 4px solid transparent; border-top: 5px solid var(--muted); }
@keyframes scrub { to { left: 78%; } }

/* contratar editor */
.thread { position: absolute; inset: 14% 9% 10%; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.tb { max-width: 82%; font-size: 0.75rem; line-height: 1.4; padding: 8px 11px; border-radius: 12px; border: 1px solid var(--line-2); background: #151515; color: var(--muted); opacity: 0; animation: tb 9s infinite; }
.tb--me { align-self: flex-end; border-bottom-right-radius: 4px; background: #1B1B1B; color: var(--text); }
.tb--them { align-self: flex-start; border-bottom-left-radius: 4px; }
.tb--file { align-self: flex-start; font-size: 0.625rem; display: flex; gap: 8px; align-items: center; }
.tb--file span { color: var(--dim); }
.tb:nth-child(2) { animation-delay: .8s; } .tb:nth-child(3) { animation-delay: 1.6s; } .tb:nth-child(4) { animation-delay: 2.4s; }
.thread__price { position: absolute; top: -8%; left: 0; font-size: 0.625rem; letter-spacing: .08em; color: var(--muted); border: 1px dashed #3A3A3A; border-radius: 999px; padding: 4px 9px; }
@keyframes tb { 0% { opacity: 0; transform: translateY(6px); } 6%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }

/* hub · Código da Edição IA */
.hub { position: absolute; inset: 0; }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub__base path { stroke: #2C2C2C; stroke-width: 1; }
.hub__flow path { stroke: url(#comet); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 36 164; stroke-dashoffset: 200; animation: flow 4s linear infinite; animation-delay: var(--d, 0s); }
@keyframes flow { to { stroke-dashoffset: -200; } }
.hub__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 9px; border-radius: 18px; border: 1px solid var(--line-2); background: #121212; box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 45, 45, .18); }
.hub__core img { width: 36px; height: 36px; display: block; }
.hub__pulse { position: absolute; inset: -1px; border-radius: 18px; border: 2px solid rgba(255, 79, 168, .35); animation: hubPulse 3s ease-out infinite; }
@keyframes hubPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }
.hub__node { position: absolute; z-index: 1; width: 42px; height: 42px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--line-2); background: #141414; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.hub__node svg { width: 19px; height: 19px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .hub__node { width: 34px; height: 34px; border-radius: 10px; } .hub__node svg { width: 16px; height: 16px; } .vcard__body { padding: 24px; } }

/* ==========================================================================
   Molduras claras (Quem ensina + FAQ)
   ========================================================================== */
.frame { --f-bg: #F5F5F5; --f-text: #0B0B0B; --f-muted: #6B6B6B; --f-line: #E5E5E5; margin: 10px; border-radius: 32px; background: var(--f-bg); color: var(--f-text); }
.frame + .frame { margin-top: 0; }
.frame + .final { padding-top: 96px; }
.frame .h2 { color: var(--f-text); }
.frame .body-md, .frame .body-lg { color: var(--f-muted); }
.frame .text-strong { color: #262626; }

.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; padding-top: 120px; }
.faq__head .h2 { max-width: 360px; }
.frame .faq__list { border-top: 1px solid var(--f-line); }
.frame .faq .acc { border-bottom: 1px solid var(--f-line); }
.frame .faq .acc__title { color: var(--f-text); font-weight: 500; }
.frame .faq .acc__panel p { color: var(--f-muted); }
.frame .acc__plus { color: #0B0B0B; }
@media (max-width: 1024px) { .faq { grid-template-columns: 1fr; gap: 40px; padding-top: 88px; } }
@media (max-width: 640px) { .frame { margin: 6px; border-radius: 24px; } .faq { padding-top: 72px; } }

/* ==========================================================================
   Dot pattern sutil (hero, seções 1–2, antes/depois, oferta, garantia, rodapé)
   ========================================================================== */
.dotted { position: relative; isolation: isolate; }
.dotted::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, rgba(255, 255, 255, .075) 1px, transparent 1.4px); background-size: 24px 24px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 100%); }
.dotted--bleed::before { left: 50%; right: auto; width: 100vw; margin-left: -50vw; }

/* ==========================================================================
   Header · lote de lançamento (desktop) / hero (mobile)
   ========================================================================== */
.header__right { display: flex; align-items: center; gap: 20px; }
.header__lote { font-size: 0.875rem; color: var(--muted); white-space: nowrap; }
.header__lote b { color: var(--white); font-weight: 600; }
.step__visual { display: none; }
@media (min-width: 1025px) {
  .hero__lote { display: none; }
  .hero__media { justify-content: flex-end; }
}

/* ==========================================================================
   Tablet / mobile (≤1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .header__lote { display: none; }

  /* ritmo vertical mais enxuto */
  .section, .how__grid, .panel__grid { padding-top: 72px; padding-bottom: 72px; }
  .stack-48 { gap: 32px; }
  .panel__grid { gap: 32px; }
  .learn { padding: 72px 0 64px; }
  .section-sm { padding-top: 56px; padding-bottom: 56px; }

  /* hero: título → texto → tags → vídeo → botão */
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding-top: 40px; padding-bottom: 56px; }
  .hero__copy { display: contents; }
  .hero__media { order: 4; margin-top: 10px; }
  .hero__ctas { order: 5; margin-top: 6px; gap: 16px; }
  .phone { max-width: 320px; }

  /* A realidade: apoio visual antes do texto */
  .panel--dor .gallery-wrap { order: -1; padding-top: 0; }

  /* Como funciona: 4 cards empilhados, cada um com seu apoio visual */
  .how__grid { gap: 28px; }
  .how .console, .steps__line { display: none; }
  .steps { gap: 12px; }
  .step { opacity: 1; grid-template-columns: 40px 1fr; gap: 16px 14px; padding: 12px 12px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; }
  .step:first-of-type { padding-top: 12px; }
  .step .step__n { width: 40px; height: 40px; color: var(--bg); background: linear-gradient(135deg, var(--orange), var(--pink)); border-color: transparent; }
  .step__t { font-size: 1.625rem; margin-bottom: 6px; }
  .step p { font-size: 1rem; }
  .step__visual { display: block; grid-column: 1 / -1; position: relative; height: 210px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background-color: #0D0D0D; background-image: radial-gradient(circle, rgba(255, 255, 255, .09) 1px, transparent 1.3px); background-size: 22px 22px; }
  .step__visual .cstate { opacity: 1; visibility: visible; transform: none; padding: 12px; }
  .step__visual .code pre { font-size: 0.6875rem; line-height: 1.6; padding: 10px 12px; }
  .step__visual .code__head { padding: 8px 12px; }
  .step__visual .bubble { font-size: 0.8125rem; padding: 11px 13px; }
  .step__visual .bubble--ai { gap: 8px; }
  .step__visual .result__thumb { width: 44px; height: 44px; }
  .step__visual .chips--sm { display: none; }
  .step__visual .wave { height: 40px; }

  /* Para quem é: cards empilhando no scroll */
  .stack-cards { display: flex; flex-direction: column; gap: 14px; }
  .stack-cards .card { position: sticky; top: calc(var(--header-h) + 8px); background: var(--card); box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); min-height: 170px; }
  .stack-cards .card:nth-child(2) { top: calc(var(--header-h) + 16px); }
  .stack-cards .card:nth-child(3) { top: calc(var(--header-h) + 24px); }
  .stack-cards .card:nth-child(4) { top: calc(var(--header-h) + 32px); }
}
@media (max-width: 640px) {
  .section, .how__grid, .panel__grid { padding-top: 56px; padding-bottom: 56px; }
  .hero__grid { padding-top: 32px; padding-bottom: 48px; }
  .learn { padding: 56px 0 48px; }
  .frame + .final { padding-top: 56px; }
  .final { padding-bottom: 56px; }
}

.is-dragging { scroll-snap-type: none !important; cursor: grabbing; user-select: none; }
@media (max-width: 1024px) { .lessons { cursor: grab; } .lessons img { pointer-events: none; } }
@media (max-width: 1024px) { .step__visual .chat { width: 100%; } .step__visual .bubble { max-width: 100%; } }
@media (max-width: 640px) { .br-desk { display: none; } }

/* ==========================================================================
   Mobile · refinamentos (≤1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* hero centralizado */
  .hero__grid { align-items: center; text-align: center; }
  .hero .lead { margin: 0 auto; }
  .hero .chips { justify-content: center; margin: 0 auto; }
  .hero .chip { font-size: 0.75rem; padding: 7px 12px; }
  .hero__ctas { flex-direction: column; align-items: center; }
  .hero__media { justify-content: center; }

  /* galeria (A realidade) mais compacta */
  .gallery { max-width: 340px; padding: 14px; gap: 12px; border-radius: 20px; }
  .gallery__title { font-size: 0.875rem; gap: 8px; }
  .gallery__title svg { width: 16px; height: 16px; }
  .gallery__count { font-size: 0.625rem; padding: 2px 7px; }
  .gallery__day { font-size: 0.625rem; padding: 4px 10px; }
  .week__days { font-size: 0.5625rem; }
  .gallery__grid { gap: 6px; }
  .thumb { aspect-ratio: 9 / 12; border-radius: 9px; }
  .thumb span { font-size: 0.5rem; right: 4px; bottom: 4px; }
  .thumb::after { top: 6px; left: 6px; width: 4px; height: 4px; }
  .gallery__foot { font-size: 0.5625rem; padding-top: 10px; gap: 10px; }
  .gallery__bar { height: 4px; }
  .toast { width: 250px; bottom: 40px; right: -6px; padding: 10px 12px; gap: 10px; border-radius: 14px; }
  .toast__icon { width: 28px; height: 28px; border-radius: 8px; }
  .toast__body { font-size: 0.6875rem; }

  /* Como funciona: número discreto acima do título */
  .step { display: flex; flex-direction: column; gap: 0; }
  .step__visual { margin-bottom: 18px; }
  .step .step__n { width: auto; height: auto; justify-content: flex-start; margin: 0 6px 8px; font-size: 0.75rem; color: var(--pink); background: none; border: 0; box-shadow: none; border-radius: 0; }
  .step > div:last-child { padding: 0 6px; }

  /* comparativo: sem brilho no card vencedor */
  .grad-border { box-shadow: none; }
  .vcard--win { background: var(--bg-3); }

  /* oferta: brilhos bem fracos */
  .offer { background-image: radial-gradient(50% 55% at 50% 0%, rgba(255, 45, 45, .03), transparent 70%), radial-gradient(38% 30% at 50% 72%, rgba(197, 66, 255, .012), transparent 70%); }
  .offer__price { background: radial-gradient(80% 60% at 50% 0%, rgba(255, 45, 45, .03), transparent 70%); }
  .beam { box-shadow: 0 20px 70px rgba(255, 45, 45, .05); }
}
@media (max-width: 1024px) {
  .hero__media { align-self: stretch; width: 100%; }
  .step .step__n, .step.is-active .step__n { align-self: flex-start; width: auto; height: auto; color: var(--pink); background: none; border: 0; box-shadow: none; }
  .panel--dor .panel__grid { padding-top: 24px; }
}

/* ==========================================================================
   Antes e depois · vídeo 16:9 (ajuste de largura mínima)
   ========================================================================== */
.ba { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }

/* ==========================================================================
   Bônus · Comunidade no WhatsApp
   ========================================================================== */
.bonus-wrap { padding-top: 24px; }
.bonus { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 48px; border-radius: 32px; background: var(--bg-3); border: 1px solid var(--line); }
.bonus__ribbon { position: absolute; z-index: 3; top: 40px; right: -46px; width: 200px; transform: rotate(45deg); text-align: center; padding: 7px 0; font-size: 0.6875rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--white); background: var(--pink); box-shadow: 0 6px 20px rgba(255, 79, 168, .35); }
.bonus__copy .h2 { max-width: 460px; }

.wa { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); background-color: #0D0D0D; background-image: radial-gradient(circle, rgba(255, 255, 255, .08) 1px, transparent 1.3px); background-size: 22px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.wa__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: rgba(20, 20, 20, .95); }
.wa__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa__title b { font-size: 0.875rem; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa__title span { display: flex; align-items: center; gap: 6px; font-size: 0.6875rem; color: var(--muted); }
.wa__title i { width: 6px; height: 6px; border-radius: 50%; background: #25D366; box-shadow: 0 0 6px rgba(37, 211, 102, .6); }
.wa__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 20px; min-height: 340px; justify-content: flex-end; }
.wa__avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 600; color: var(--muted); background: #1E1E1E; border: 1px solid #2C2C2C; }
.wa__avatar img { width: 16px; height: 16px; }
.wa__avatar--group { width: 36px; height: 36px; background: #181818; }
.wa__avatar--group img { width: 22px; height: 22px; }
.wa__msg { display: flex; align-items: flex-end; gap: 8px; opacity: 0; animation: waIn 14s infinite; }
.wa__msg:nth-child(2) { animation-delay: 1.2s; }
.wa__msg:nth-child(3) { animation-delay: 2.6s; }
.wa__msg:nth-child(4) { animation-delay: 4.2s; }
.wa__msg--admin { flex-direction: row-reverse; }
.wa__bubble { position: relative; max-width: 80%; display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; border-radius: 14px 14px 14px 4px; font-size: 0.8125rem; line-height: 1.4; color: var(--text); background: #1A1A1A; border: 1px solid #262626; }
.wa__bubble b { font-size: 0.6875rem; font-weight: 600; color: var(--muted); }
.wa__msg--admin .wa__bubble { border-radius: 14px 14px 4px 14px; background: #222; border-color: #303030; }
.wa__msg--admin .wa__bubble b { color: var(--pink); }
.wa__file { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 9px; border-radius: 8px; font-size: 0.6875rem; color: var(--text); background: #161616; border: 1px solid #2C2C2C; }
.wa__msg:nth-child(4) .wa__bubble { margin-bottom: 8px; }
.wa__react { position: absolute; right: 8px; bottom: -11px; font-size: 0.625rem; color: var(--text); padding: 1px 7px; border-radius: 999px; background: #222; border: 1px solid #333; }
.wa__typing { display: flex; align-items: center; gap: 8px; font-size: 0.6875rem; color: var(--dim); opacity: 0; animation: waIn 14s infinite; animation-delay: 5.6s; }
.wa__dots { display: inline-flex; gap: 3px; padding: 7px 9px; border-radius: 10px; background: #1A1A1A; border: 1px solid #262626; }
.wa__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); animation: waDot 1.2s infinite; }
.wa__dots i:nth-child(2) { animation-delay: .15s; } .wa__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes waIn { 0% { opacity: 0; transform: translateY(8px); } 4%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes waDot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

@media (max-width: 1024px) {
  .bonus { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; border-radius: 24px; }
  .bonus__ribbon { top: 32px; right: -52px; font-size: 0.625rem; }
  .wa__body { min-height: 300px; }
}
@media (max-width: 640px) {
  .bonus { padding: 24px 16px 28px; }
  .bonus-wrap { padding-left: 16px; padding-right: 16px; }
}

/* sem animação: mensagens visíveis direto (vale também para a conversa do comparativo) */

/* ==========================================================================
   Rodapé · links legais
   ========================================================================== */
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.8125rem; }
.footer__links a { color: var(--muted); transition: color .2s; }
.footer__links a:hover { color: var(--white); }

/* Hero · tags: texto menor e sem efeito de hover */
.hero .chip { font-size: 0.75rem; }
.hero .chip:hover { border-color: var(--line-2); color: var(--text); }

/* Bônus · apoio visual mais baixo no mobile */
@media (max-width: 1024px) {
  .wa__body { min-height: 0; gap: 8px; padding: 12px 12px 16px; }
  .wa__head { padding: 10px 12px; }
  .wa__avatar--group { width: 30px; height: 30px; }
  .wa__bubble { font-size: 0.75rem; padding: 6px 9px; }
  .wa__bubble b { font-size: 0.625rem; }
  .wa__avatar { width: 24px; height: 24px; font-size: 0.625rem; }
  .wa__file { margin-top: 4px; padding: 4px 8px; font-size: 0.625rem; }
  .wa__msg:nth-child(2) { display: none; }
}

.bonus__hl { color: var(--white); font-weight: 600; }

/* ==========================================================================
   Quem ensina · foto em camadas
   Canvas 1200×1500 (mobile: 1200×1224, mesmo recorte 19px mais acima).
   Logo medido na montagem: centro (592, 594), largura 776, inclinação −8°.
   Animações só em transform/opacity para rodar liso na GPU.
   ========================================================================== */
.bio { --logo-top: 15.61%; position: relative; aspect-ratio: 1200 / 1500; border-radius: 28px; overflow: hidden; isolation: isolate; background: #7A0C1C; }
.bio__layer, .bio__layer img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bio__layer img { object-fit: cover; }

/* logo girando atrás do homem + brilho pulsando */
.bio__logo { position: absolute; left: 17%; top: var(--logo-top); width: 64.67%; height: auto; transform: rotate(-8deg); transform-origin: 50% 50%; animation: bioSpin 48s linear infinite, bioBlink 3.6s ease-in-out infinite; will-change: transform, filter; }
.bio__fundo::after { content: ''; position: absolute; left: 22%; top: calc(var(--logo-top) + 4%); width: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 79, 168, .55), rgba(255, 106, 61, .25) 55%, transparent 75%); opacity: 0; animation: bioGlow 3.6s ease-in-out infinite; will-change: opacity; }
@keyframes bioSpin { from { transform: rotate(-8deg); } to { transform: rotate(352deg); } }
@keyframes bioBlink { 0%, 100% { filter: brightness(.9) saturate(1); } 50% { filter: brightness(1.45) saturate(1.15); } }
@keyframes bioGlow { 0%, 100% { opacity: .15; } 50% { opacity: .85; } }

/* piscadinha: o olho fecha por ~120ms a cada 5s */
.bio__wink { opacity: 0; animation: bioWink 5s infinite; }
@keyframes bioWink { 0%, 84% { opacity: 0; } 85.5%, 87.5% { opacity: 1; } 89%, 100% { opacity: 0; } }

/* luz atravessando as lentes (máscara = lente.webp) */
.bio__shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(../assets/quem-ensina/lente.webp) center / 100% 100% no-repeat; mask: url(../assets/quem-ensina/lente.webp) center / 100% 100% no-repeat; }
.bio__shine::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(120deg, transparent 45.5%, rgba(255, 255, 255, .15) 46.5%, rgba(255, 255, 255, .85) 48%, rgba(255, 255, 255, .15) 49.5%, transparent 50.5%, transparent 51.5%, rgba(255, 255, 255, .55) 52.2%, transparent 53%); transform: translateX(-24%); animation: bioShine 4s cubic-bezier(.4, 0, .2, 1) infinite; will-change: transform; }
/* reflexo rápido (~0,5s) atravessando as lentes; o resto do ciclo fica em espera */
@keyframes bioShine { 0% { transform: translateX(-24%); } 13%, 100% { transform: translateX(22%); } }
.bio__shine::after { content: ''; position: absolute; inset: 0; background: rgba(255, 106, 61, .55); opacity: 0; animation: bioLensFlash 4s ease-in-out infinite; will-change: opacity; }
@keyframes bioLensFlash { 0%, 14% { opacity: 0; } 20% { opacity: .75; } 30%, 100% { opacity: 0; } }

@media (max-width: 1024px) {
  .bio { --logo-top: 17.58%; aspect-ratio: 1200 / 1224; border-radius: 22px; }
  .bio__shine { -webkit-mask-image: url(../assets/quem-ensina/mobile/lente.webp); mask-image: url(../assets/quem-ensina/mobile/lente.webp); }
}

/* Quem ensina · card inclinando em perspectiva no scroll (GSAP) */
.bio-wrap { perspective: 1100px; }
.bio { transform-origin: 50% 60%; will-change: transform; }

/* Antes e depois · vídeos com botão de som */
.ba__media { position: relative; overflow: hidden; background-color: #111; }
.ba__media--after > div { position: relative; overflow: hidden; }
.ba__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__sound { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(11, 11, 11, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--white); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background .25s, border-color .25s, transform .25s var(--ease); }
.ba__sound:hover { background: rgba(11, 11, 11, .8); border-color: rgba(255, 255, 255, .3); transform: translateY(-1px); }
.ba__sound .i-on { display: none; }
.ba__sound[aria-pressed="true"] .i-on { display: block; }
.ba__sound[aria-pressed="true"] .i-off { display: none; }
.ba__sound[aria-pressed="true"] { background: var(--grad); border-color: transparent; }

@media (max-width: 1024px) {
  .author { gap: 28px; }
}

/* Textura de grão sutil sobre a página inteira */
body::after { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: radial-gradient(at 20% 80%, #fff 1px, transparent 0px); background-size: 2px 2px; pointer-events: none !important; z-index: 999; opacity: 0.02; mix-blend-mode: plus-lighter; }
.ba__media .ba__sound span { font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: inherit; font-family: var(--sans); }

/* Antes e depois · borda em degradê no editado (como o card do comparativo) e "antes" menos saturado */
.ba__media--after { background: var(--grad-border); box-shadow: 0 30px 80px rgba(255, 45, 45, .22); }
.ba__media:not(.ba__media--after) .ba__video { filter: saturate(.55) contrast(.95) brightness(.95); }

/* Imagens decorativas e logos: não capturam clique/arrasto (botões e links seguem clicáveis) */
.bio img, .bio__logo, .header__logo, .footer__logo, .offer__cakto, .final__icon, .compare__brand img, .hub__core img, .wa__avatar img, .bubble__who img {
  pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.header__inner > a { display: block; }

/* Rodapé · logo + direitos à esquerda, links à direita, centralizados na vertical */
.footer__inner { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px 40px; }
.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer__links { justify-content: flex-end; }
@media (max-width: 640px) { .footer__inner { flex-direction: column; align-items: flex-start; } .footer__links { justify-content: flex-start; } }

/* WhatsApp fixo · balanço suave */
.wa-float { position: fixed; z-index: 90; right: 24px; bottom: 24px; width: 60px; height: 60px; display: block; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); transform-origin: 50% 50%; animation: waSwing 3.2s ease-in-out infinite; transition: filter .25s; }
.wa-float img { width: 100%; height: 100%; display: block; pointer-events: none; }
.wa-float:hover { animation-play-state: paused; filter: drop-shadow(0 12px 28px rgba(37, 211, 102, .35)); }
@keyframes waSwing { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(-12deg); } 70% { transform: rotate(10deg); } 78% { transform: rotate(-6deg); } 86% { transform: rotate(3deg); } 92% { transform: rotate(0); } }
@media (max-width: 640px) { .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; } }
.footer__brand { align-items: flex-start; } .footer__brand .footer__logo { width: auto; height: 30px; }

/* ==========================================================================
   S5 · Códigos · carrossel em leque (CardStack · 21st.dev) com cards 9:16
   ========================================================================== */
.codes-sec { overflow: hidden; }
.stack-32 { display: flex; flex-direction: column; gap: 32px; }
.fan { --cw: 290px; position: relative; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.fan:focus-visible { outline: 1px dashed var(--line-2); outline-offset: 8px; border-radius: 24px; }
/* stage: altura = card + 80, cards alinhados pela base, perspectiva 1100 */
.fan__stage { position: relative; height: max(380px, calc(var(--cw) * 16 / 9 + 80px)); perspective: 1100px; display: flex; align-items: flex-end; justify-content: center; }
.fan__wash { position: absolute; left: 0; right: 0; margin: 0 auto; border-radius: 999px; filter: blur(64px); pointer-events: none; }
.fan__wash--top { top: 24px; height: 192px; width: 70%; background: rgba(255, 255, 255, .05); }
.fan__wash--bottom { bottom: 0; height: 160px; width: 76%; background: rgba(0, 0, 0, .3); }
.fan__card { position: absolute; bottom: 0; width: var(--cw); aspect-ratio: 9 / 16; border-radius: 16px; border: 4px solid rgba(255, 255, 255, .1); overflow: hidden; background: var(--card); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .35), 0 8px 10px -6px rgba(0, 0, 0, .35); transform-style: preserve-3d; cursor: pointer; will-change: transform; }
.fan__card.is-active { cursor: grab; }
.fan__card.is-active:active { cursor: grabbing; }
.fan__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.fan__media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fan__media span { font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding-bottom: 40%; text-align: center; }
.fan__video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* gradiente from-black/60 e conteúdo com padding 20px */
.fan__inner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 60%); pointer-events: none; }
.fan__body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 20px; pointer-events: none; }
.fan__body > span { font-size: 0.75rem; }
.fan__body h3 { font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fan__body p { font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, .8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* setas abaixo do carrossel e acima das bolinhas */
.fan-nav { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: -4px; }
.fan-arrows { display: flex; justify-content: center; gap: 10px; }
.arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--white); cursor: pointer; font-size: 1rem; transition: border-color .25s, background .25s, transform .25s var(--ease); }
.arrow:hover { border-color: rgba(255, 79, 168, .5); transform: translateY(-1px); }
.fan__dots { display: flex; justify-content: center; gap: 6px; }
.fan__dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: var(--line-2); cursor: pointer; transition: width .35s var(--ease), background .35s; }
.fan__dots button.is-on { width: 22px; background: linear-gradient(90deg, var(--orange), var(--pink)); }
@media (max-width: 1024px) { .fan { --cw: 230px; } }
@media (max-width: 640px) { .fan { --cw: 200px; } .fan__body { padding: 16px; } .fan__body h3 { font-size: 1rem; } .fan__body p { font-size: 0.75rem; } }

/* Códigos · 24px entre título e carrossel; capa/vídeo preenchendo o card */
.codes-sec .stack-32 { gap: 24px; }
.fan__media img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fan__media { background: #111; }

/* Códigos · só número + título, com degradê de baixo para cima para contraste */
.fan__inner::after { background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 18%, rgba(0, 0, 0, .2) 32%, transparent 45%); }
.fan__body { gap: 6px; }

/* Códigos · botão de som no card ativo (canto superior direito) */
.fan__sound { top: 12px; right: 12px; bottom: auto; padding: 7px 12px 7px 9px; gap: 6px; font-size: 0.75rem; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s, background .25s, border-color .25s; }
.fan__card.is-active .fan__sound { opacity: 1; visibility: visible; transition: opacity .3s .15s, visibility 0s, background .25s, border-color .25s; }
.fan__sound span { font-size: 0.75rem; letter-spacing: 0; text-transform: none; color: inherit; font-family: var(--sans); }

/* Aulas · capas 2:3; capa de módulo mostra a contagem de aulas */
.lcard.has-img::after { background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .5) 22%, transparent 45%); }
.lcard__count { font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.corridor .lcard__count { font-size: .75cqw; }

/* Aulas (mobile) · rolagem contínua controlada por JS, sem snap */
@media (max-width: 1024px) { .lessons { scroll-snap-type: none; scroll-behavior: auto; } }

/* Códigos · menos espaço entre o título e os cards */
.fan__stage { height: calc(var(--cw) * 16 / 9 + 34px); }
.codes-sec .stack-32 { gap: 8px; }
.codes-sec .fan-nav { margin-top: 20px; }

@media (max-width: 1024px) {
  /* Comparativo · ilustração mais baixa (o hub mantém a proporção e fica centralizado) */
  .visual { aspect-ratio: 16 / 9; }
  .hub { inset: auto; top: 50%; left: 50%; height: 100%; aspect-ratio: 564 / 410; transform: translate(-50%, -50%); }
  .nle { inset: 12% 7%; gap: 6px; }
  .thread { inset: 14% 7% 8%; gap: 6px; }
  .tb { font-size: 0.6875rem; padding: 6px 9px; }
  .thread__price { top: -12%; }

  /* Rodapé centralizado */
  .footer__inner { flex-direction: column; align-items: center; text-align: center; }
  .footer__brand { align-items: center; }
  .footer__links { justify-content: center; }
}
@media (max-width: 1024px) { .footer__inner { padding-bottom: 96px; } }

/* Hero · capa provisória da VSL */
.phone__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.phone__screen > :not(.phone__thumb) { z-index: 1; }
.badge-live, .phone__progress { z-index: 2; }
@media (max-width: 1024px) { .nope { padding: 16px 20px; font-size: 1rem; gap: 14px; } }

/* Acessibilidade · contraste do rosa sobre as molduras claras e nomes no chat do bônus */
.frame .eyebrow { color: #C2185B; }
.wa__bubble b { color: #B5B5B5; }
.codes-sec .section-head { margin-bottom: 20px; }
@media (max-width: 1024px) { .codes-sec .section-head { margin-bottom: 13px; } }