/* ============================================================================
   Microapps con IA que Venden · hoja de estilos del embudo (v2 · «dopamínica»)
   Modelada sobre scalesi.ai, los OTO de Socios Black y miniapplucrativo.com:
   antes del botón solo titular + video; después, bloques grandes, una idea por
   pantalla, precio ancla tachado, verde para comprar, tarjetas blancas sobre
   fondo oscuro y CTA fijo. Tokens de estebanguzman.co (grafito frío, Inter,
   ion #0B4CFA) para la identidad; oro para Gold. Sin imágenes: todo es CSS/SVG.
   ========================================================================== */

:root {
  --bg: #06070B;
  --bg-2: #0A0D15;
  --s1: #0C0F16;
  --s2: #12151D;
  --s3: #1A1F2A;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .13);
  --line-3: rgba(255, 255, 255, .22);
  --t1: #FFFFFF;
  --t2: #D5DBE6;
  --t3: #A2ACBC;
  --t4: #7C8798;
  --t5: #5B657A;
  --ion: #0B4CFA;
  --ion-2: #1A59FF;
  --ion-300: #7AA0FF;
  --ion-400: #3E77FF;
  --signal: #22E4FE;
  /* verde de compra: el color de «pagar» en los tres referentes */
  --buy: #12C46A;
  --buy-2: #0FA85A;
  --buy-glow: rgba(18, 196, 106, .45);
  --gold: #F2C230;
  --gold-2: #B98A0E;
  --gold-3: #7A5F13;
  --red: #E5162B;
  --ok: #1FD18C;
  --warn: #FFC55C;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --hm-bg: #FFFFFF;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--t1); font: 400 17px/1.5 var(--font); letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip }
body.has-sticky { padding-bottom: 92px }
.atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 50% at 50% -8%, rgba(11, 76, 250, .22), transparent 60%), radial-gradient(70% 40% at 50% 108%, rgba(11, 76, 250, .10), transparent 60%) }
.theme-gold .atmos { background: radial-gradient(90% 46% at 50% -8%, rgba(242, 194, 48, .14), transparent 60%), radial-gradient(70% 40% at 50% 108%, rgba(242, 194, 48, .06), transparent 60%) }
.page { position: relative; z-index: 1 }
h1, h2, h3, h4, p { margin: 0 }
p { text-wrap: pretty }
a { color: var(--ion-300); text-decoration: none }
a:hover { text-decoration: underline; text-underline-offset: 3px }
img, svg { display: block; max-width: 100% }
button, input, textarea, select { font: inherit; letter-spacing: inherit; color: inherit }
:focus { outline: none }
:focus-visible { outline: 2px solid var(--ion-400); outline-offset: 2px; border-radius: 6px }
::selection { background: rgba(11, 76, 250, .34); color: #fff }
strong, b { font-weight: 700; color: var(--t1) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 18px }
.narrow { max-width: 720px }
.center { text-align: center }
.mt-1 { margin-top: 8px } .mt-2 { margin-top: 16px } .mt-3 { margin-top: 24px } .mt-4 { margin-top: 32px } .mt-6 { margin-top: 48px }

/* ── cabecera mínima ──────────────────────────────────────────────────────── */
.top { padding: 16px 0 6px }
.top-in { display: flex; align-items: center; justify-content: center; gap: 9px }
.top img { width: 22px; height: 22px }
.wordmark { font-weight: 600; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--t3); line-height: 1 }

/* ── hero: cinta + titular + sub (lo ÚNICO sobre el video) ────────────────── */
.hero { padding: 18px 18px 16px; text-align: center }
.kicker { display: inline-block; font-size: 14px; font-weight: 500; color: var(--t3); letter-spacing: -.005em }
.kicker b { color: var(--t1); font-weight: 600 }
.hl { margin: 12px auto 0; max-width: 22ch; font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: var(--t1) }
.hl .pill, .h-big .pill { display: inline; padding: 0 .28em; margin: 0 .04em; border-radius: .28em; background: var(--ion); color: #fff; box-decoration-break: clone; -webkit-box-decoration-break: clone }
.hl .hi, .h-sec .hi, .h-big .hi { color: var(--ion-300) }
.theme-gold .hl .pill, .theme-gold .h-big .pill { background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #1a1200 }
.sub { margin: 14px auto 0; max-width: 52ch; font-size: 17px; line-height: 1.45; color: var(--t2); font-weight: 500 }
.sub em { font-style: italic; color: var(--t1) }
@media (min-width: 720px) {
  .top { padding: 24px 0 8px }
  .hero { padding: 26px 18px 22px }
  .hl { font-size: 50px; letter-spacing: -.035em; max-width: 24ch; line-height: 1.06 }
  .sub { font-size: 20px }
}

/* ── video ────────────────────────────────────────────────────────────────── */
.video-wrap { max-width: 960px; margin: 0 auto; padding: 0 }
.video { position: relative; background: #000; border: 1px solid var(--line-2); overflow: hidden; box-shadow: 0 30px 90px -32px rgba(11, 76, 250, .5) }
.theme-gold .video { box-shadow: 0 30px 90px -32px rgba(242, 194, 48, .35) }
.video .embed { display: none }
.video.has-embed .embed { display: block }
.video.has-embed .poster { display: none }
@media (min-width: 720px) { .video { border-radius: 14px } }
@media (max-width: 719px) { .video { border-left: 0; border-right: 0 } }
.poster { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center;
  background: linear-gradient(180deg, rgba(11, 76, 250, .12), transparent 46%, rgba(0, 0, 0, .55)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 48px), #07090F }
.theme-gold .poster { background: linear-gradient(180deg, rgba(242, 194, 48, .10), transparent 46%, rgba(0, 0, 0, .55)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 48px), #0A0906 }
.poster-in { display: grid; justify-items: center; gap: 12px; padding: 20px }
.poster-ring { width: 74px; height: 74px; border-radius: 50%; border: 1px solid rgba(140, 185, 255, .55); display: grid; place-items: center;
  background: rgba(11, 76, 250, .22); box-shadow: 0 0 0 10px rgba(11, 76, 250, .08), 0 0 60px rgba(11, 76, 250, .4) }
.theme-gold .poster-ring { border-color: rgba(242, 194, 48, .55); background: rgba(242, 194, 48, .18); box-shadow: 0 0 0 10px rgba(242, 194, 48, .08), 0 0 60px rgba(242, 194, 48, .35) }
.poster-ring svg { width: 26px; height: 26px; margin-left: 3px }
.poster-t { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--t3) }
.poster-s { font-size: 13.5px; color: var(--t5); max-width: 36ch }
/* «Dale play y sube el volumen» */
.play-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 0; font-size: 16.5px; font-weight: 600; color: var(--t2) }
.play-hint svg { width: 20px; height: 20px; color: var(--buy) }
.theme-gold .play-hint svg { color: var(--gold) }
/* franja de confianza bajo el video (mínima) */
.trust { display: flex; align-items: center; justify-content: center; gap: 10px 12px; flex-wrap: wrap; margin: 26px auto 0; padding: 0 18px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--t5) }
.trust > span:first-child { flex-basis: 100%; text-align: center }
@media (min-width: 720px) { .trust { font-size: 13px } .trust > span:first-child { flex-basis: auto } }
.trust .lg { display: inline-flex; align-items: center; gap: 7px; color: var(--t2); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 15px }
.trust .lg img { width: 20px; height: 20px; border-radius: 5px }
.trust i { width: 4px; height: 4px; border-radius: 50%; background: var(--t5) }
/* aviso de membresía compacto ANTES del botón (interruptor showPlanBeforePitch) */
.plan-pre { max-width: 720px; margin: 18px auto 0; padding: 0 18px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--t5) }
.plan-pre a { color: var(--t4) }

/* ── contenido que se revela con el precio ───────────────────────────────── */
.gated { display: none }
.gated.is-open { display: block; animation: rise .6s var(--ease) both }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* ── ritmo de secciones (una idea por pantalla) ───────────────────────────── */
.sec { padding: 56px 0 }
.sec--tight { padding: 36px 0 }
.sec--band { background: linear-gradient(180deg, transparent, rgba(11, 76, 250, .06) 30%, rgba(11, 76, 250, .06) 70%, transparent); }
.theme-gold .sec--band { background: linear-gradient(180deg, transparent, rgba(242, 194, 48, .05) 30%, rgba(242, 194, 48, .05) 70%, transparent) }
.h-sec { text-align: center; font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; color: var(--t1) }
.h-sec .hi { color: var(--ion-300) }
.theme-gold .h-sec .hi, .theme-gold .h-big .hi { background: linear-gradient(180deg, #FFE38A, var(--gold) 50%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent }
.h-sub { margin: 12px auto 0; max-width: 56ch; text-align: center; font-size: 17px; line-height: 1.5; color: var(--t2) }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ion-300) }
.theme-gold .eyebrow { color: var(--gold) }
.rule { height: 1px; background: var(--line); margin: 0 18px }
@media (min-width: 720px) { .sec { padding: 72px 0 } .h-sec { font-size: 38px } .h-sub { font-size: 19px } .rule { margin: 0 } }

/* ── bloque de oferta ─────────────────────────────────────────────────────── */
.offer { padding: 44px 18px 30px; text-align: center }
.h-big { margin: 10px auto 0; max-width: 20ch; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--t1) }
.price-row { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 22px }
.was { font-size: 15px; color: var(--t4) }
.was s { color: var(--t4); text-decoration-color: rgba(255, 122, 135, .9); text-decoration-thickness: 2px }
.now { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 800; letter-spacing: -.04em; color: var(--t1); line-height: 1 }
.now .cur { font-size: 26px; font-weight: 700; color: var(--t2); letter-spacing: -.02em }
.now .num { font-size: 76px }
.now small { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--t3) }
.per { font-size: 16px; color: var(--t2) }
.per b { color: var(--buy) }
@media (min-width: 720px) { .offer { padding: 64px 18px 40px } .h-big { font-size: 46px } .now .num { font-size: 96px } .now .cur { font-size: 32px } }

/* botón de compra: grande, verde, uppercase, con brillo (el de los referentes) */
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 620px; margin: 0 auto;
  min-height: 68px; padding: 16px 22px; border-radius: 12px; border: 1px solid rgba(120, 240, 190, .55); background: linear-gradient(180deg, #19D97A, var(--buy-2)); color: #fff;
  font-weight: 800; font-size: 17.5px; line-height: 1.2; letter-spacing: .01em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 46px -12px var(--buy-glow), 0 0 0 4px rgba(18, 196, 106, .12);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease); animation: pulse 2.6s var(--ease) infinite }
.btn:hover { color: #fff; text-decoration: none; transform: translateY(-1px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 18px 54px -12px var(--buy-glow), 0 0 0 6px rgba(18, 196, 106, .16) }
.btn:active { transform: translateY(0) scale(.99) }
.btn svg { width: 20px; height: 20px; flex: none }
@keyframes pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 46px -12px var(--buy-glow), 0 0 0 4px rgba(18, 196, 106, .12) } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 46px -12px var(--buy-glow), 0 0 0 10px rgba(18, 196, 106, .04) } }
.btn--ion { background: linear-gradient(180deg, #2E6DFF, #1445E0); border-color: rgba(140, 185, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 46px -12px rgba(28, 86, 255, .9); animation: none }
.btn--ghost { background: transparent; border-color: var(--line-3); color: var(--t1); box-shadow: none; animation: none; text-transform: none; font-weight: 600 }
.btn--ghost:hover { border-color: var(--ion-400); filter: none; box-shadow: 0 0 0 1px rgba(62, 119, 255, .25) }
.btn--quiet { animation: none; text-transform: none; font-weight: 600; font-size: 16px; min-height: 56px }
.btn.is-pending { filter: saturate(.35) brightness(.75); cursor: not-allowed; animation: none }
.micro { margin: 12px auto 0; max-width: 48ch; font-size: 13.5px; line-height: 1.5; color: var(--t4) }
.quiet { display: inline-block; margin-top: 16px; font-size: 15px; color: var(--t4); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3) }
.quiet:hover { color: var(--t2) }

/* detalles de la membresía (política de suscripciones de Meta) */
.plan { max-width: 640px; margin: 22px auto 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--s1); font-size: 14.5px; line-height: 1.55; color: var(--t3); text-align: left }
.plan b { display: block; margin-bottom: 3px; color: var(--t2); font-weight: 600 }
.plan a { color: var(--ion-300) }

/* CTA fijo (también en escritorio, como Melo) */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px 12px;
  background: rgba(6, 7, 11, .9); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .35s var(--ease) }
.sticky.is-on { transform: none }
.sticky .btn { min-height: 56px; font-size: 15.5px; max-width: 520px; animation: none }

/* ── estadísticas (prueba en cifras autorizadas) ──────────────────────────── */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr) }
.stat { padding: 20px 16px; border: 1px solid var(--line-2); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); text-align: center }
.stat-n { font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--t1) }
.stat-n small { font-size: 18px; font-weight: 700; color: var(--ion-300); margin-left: 2px }
.stat-l { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--t3) }
.stat-l b { color: var(--t1); font-weight: 600 }
.stat-logo { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--t2) }
.stat-logo img { width: 18px; height: 18px; border-radius: 5px }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr) } .stat-n { font-size: 48px } }
.foot-note { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--t5) }

/* ── testimonios como «lower-third» del video ─────────────────────────────── */
.quotes { display: grid; gap: 14px }
.quote { position: relative; padding: 22px 20px 20px 22px; border-radius: 16px; background: #fff; color: #0B0E15; border-left: 6px solid var(--buy) }
.quote p { font-size: 17px; line-height: 1.45; font-weight: 500; color: #0B0E15 }
.quote mark { background: rgba(255, 230, 0, .55); color: inherit; padding: 0 .1em; border-radius: 3px }
.quote-who { display: flex; align-items: center; gap: 10px; margin-top: 14px }
.quote-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ion); color: #fff; font-weight: 800; font-size: 15px }
.quote-who b { display: block; font-size: 14.5px; color: #0B0E15 }
.quote-who span { display: block; font-size: 12.5px; color: #5B657A }
@media (min-width: 720px) { .quotes { grid-template-columns: 1fr 1fr } }

/* ── mock del área de miembros (codificado) ───────────────────────────────── */
.mock { max-width: 720px; margin: 26px auto 0; border-radius: 16px; border: 1px solid var(--line-2); background: #0C1018; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(11, 76, 250, .6) }
.mock-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #0A0D14 }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2A3140 }
.mock-bar span { margin-left: auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t5) }
.mock-body { display: grid; grid-template-columns: 150px 1fr }
.mock-side { padding: 12px 10px; border-right: 1px solid var(--line); background: #0A0D14 }
.mock-side div { padding: 8px 10px; font-size: 11.5px; color: var(--t4); border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mock-side div.on { background: rgba(11, 76, 250, .18); color: var(--t1); font-weight: 600 }
.mock-side .cat { margin-top: 8px; padding: 6px 10px 2px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--t5) }
.mock-main { padding: 14px }
.mock-title { font-size: 15px; font-weight: 700; color: var(--t1) }
.mock-sub { margin-top: 3px; font-size: 12px; color: var(--t4) }
.mock-video { margin-top: 12px; aspect-ratio: 16 / 7; border-radius: 10px; background: linear-gradient(135deg, #10203F, #0A0D14); border: 1px solid var(--line-2); display: grid; place-items: center }
.mock-video i { width: 34px; height: 34px; border-radius: 50%; background: var(--ion); display: grid; place-items: center }
.mock-video i::after { content: ""; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; margin-left: 3px }
.mock-list { display: grid; gap: 6px; margin-top: 12px }
.mock-list div { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t3) }
.mock-list div::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--t5); flex: none }
.mock-list div.done { color: var(--t2) }
.mock-list div.done::before { background: var(--buy); border-color: var(--buy) }
@media (max-width: 719px) { .mock-body { grid-template-columns: 112px 1fr } .mock-side div { font-size: 10.5px; padding: 7px 8px } }

/* ── stack con valores (Melo) ─────────────────────────────────────────────── */
.stack { list-style: none; margin: 22px auto 0; padding: 0; max-width: 720px; border-top: 1px solid var(--line) }
.stack li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; color: var(--t2) }
.stack li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--buy) }
.stack li b { color: var(--t1) }
.stack li .v { margin-left: auto; flex: none; font-size: 14px; color: var(--t4); white-space: nowrap }
.stack li.gift svg { color: var(--ion-300) }
.stack li.bonus svg { color: var(--signal) }
.total { max-width: 720px; margin: 22px auto 0; text-align: center }
.total .was { display: block; font-size: 16px }
.total .now { margin-top: 6px }
.total .now .num { font-size: 64px }
@media (min-width: 720px) { .total .now .num { font-size: 84px } }

/* ── 4 pasos: tarjetas blancas (Melo) ─────────────────────────────────────── */
.steps4 { display: grid; gap: 14px; margin-top: 26px }
.step4 { padding: 22px 20px; border-radius: 18px; background: #fff; color: #0B0E15 }
.step4 .tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(11, 76, 250, .1); color: var(--ion); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase }
.step4 h3 { margin-top: 12px; font-size: 21px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: #0B0E15 }
.step4 p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #414A5C }
.step4 .vis { margin-top: 16px; border-radius: 12px; background: #F1F4F8; border: 1px solid #E3E8EF; padding: 14px; min-height: 120px }
@media (min-width: 720px) { .steps4 { grid-template-columns: 1fr 1fr } }
/* viñetas codificadas de cada paso */
.vis-score { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center }
.vis-score .bars { display: grid; gap: 6px }
.vis-score .bars div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; font-size: 11px; color: #5B657A }
.vis-score .bars i { display: block; height: 8px; border-radius: 4px; background: #E3E8EF; position: relative; overflow: hidden }
.vis-score .bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--ion); border-radius: 4px }
.vis-score .big { font-size: 34px; font-weight: 800; letter-spacing: -.04em; color: var(--ion); line-height: 1 }
.vis-score .big small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5B657A; font-weight: 600; margin-top: 4px }
.vis-app { display: grid; gap: 8px }
.vis-app .row { display: flex; gap: 8px; align-items: center }
.vis-app .in { flex: 1; height: 34px; border-radius: 8px; background: #fff; border: 1px solid #C7CEDA; padding: 0 10px; font-size: 12px; color: #5B657A; display: flex; align-items: center }
.vis-app .go { height: 34px; padding: 0 12px; border-radius: 8px; background: var(--ion); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center }
.vis-app .out { padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid #C7CEDA; font-size: 12px; color: #0B0E15; line-height: 1.4 }
.vis-app .out b { color: var(--buy-2) }
.vis-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.vis-flow span { padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid #C7CEDA; font-size: 12px; font-weight: 600; color: #0B0E15 }
.vis-flow span.on { background: var(--ion); border-color: var(--ion); color: #fff }
.vis-flow i { color: #A2ACBC; font-style: normal; font-size: 12px }
.vis-funnel { display: grid; gap: 5px }
.vis-funnel div { display: grid; grid-template-columns: 86px 1fr 40px; gap: 8px; align-items: center; font-size: 11px; color: #5B657A }
.vis-funnel i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--ion), var(--ion-400)); width: var(--w) }
.vis-funnel em { font-style: normal; text-align: right; font-weight: 700; color: #0B0E15 }

/* ── garantía grande (tarjeta blanca con sello) ───────────────────────────── */
.guar-big { display: grid; gap: 18px; padding: 26px 22px; border-radius: 20px; background: #fff; color: #0B0E15; text-align: center }
.seal { width: 118px; height: 118px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #FFE38A, #F2C230 55%, #B98A0E); box-shadow: 0 10px 30px -10px rgba(185, 138, 14, .7), inset 0 0 0 6px rgba(255, 255, 255, .35) }
.seal div { font-weight: 800; color: #3a2a00; line-height: 1; text-align: center }
.seal .n { font-size: 34px; letter-spacing: -.04em }
.seal .t { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; margin-top: 3px }
.guar-big h3 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; line-height: 1.1; color: #0B0E15 }
.guar-big p { font-size: 15.5px; line-height: 1.55; color: #414A5C; max-width: 56ch; margin: 0 auto }
.guar-big p b { color: #0B0E15 }
.guar-big a { color: var(--ion) }
.guar-split { display: grid; gap: 12px; text-align: left }
.guar-item { padding: 14px 16px; border-radius: 12px; background: #F1F4F8; border: 1px solid #E3E8EF }
.guar-item b { display: block; font-size: 16px; color: #0B0E15 }
.guar-item span { display: block; margin-top: 4px; font-size: 14px; color: #414A5C; line-height: 1.5 }
@media (min-width: 720px) { .guar-big { grid-template-columns: 160px 1fr; text-align: left; align-items: center; padding: 30px 28px } .guar-big p { margin: 0 } .guar-split { grid-template-columns: 1fr 1fr; grid-column: 1 / -1 } }

/* ── quién soy (bloque editorial) ─────────────────────────────────────────── */
.bio { display: grid; gap: 16px; padding: 24px 20px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--s1) }
.bio h3 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; text-transform: uppercase; color: var(--t1) }
.bio p { font-size: 15.5px; line-height: 1.55; color: var(--t2) }
.bio p b { color: var(--t1) }
.bio-facts { display: grid; gap: 8px }
.bio-facts div { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--t2) }
.bio-facts svg { width: 18px; height: 18px; flex: none; color: var(--ion-300); margin-top: 2px }
@media (min-width: 720px) { .bio { grid-template-columns: 1.1fr 1fr; padding: 30px 28px } }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line) }
.faq:last-of-type { border-bottom: 1px solid var(--line) }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 0; font-size: 17px; font-weight: 700; color: var(--t1) }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ion); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
  -webkit-mask: linear-gradient(#000, #000) center / 10px 2px no-repeat, linear-gradient(#000, #000) center / 2px 10px no-repeat, radial-gradient(circle, #000 60%, transparent 62%) center / 100% 100% no-repeat; mask-composite: exclude; -webkit-mask-composite: xor; transition: transform .25s var(--ease) }
.faq[open] summary::after { transform: rotate(45deg) }
.faq p { padding: 0 0 20px; font-size: 16px; color: var(--t2); line-height: 1.6; max-width: 66ch }

/* ── razones (retargeting): bloques numerados grandes ─────────────────────── */
.reasons { display: grid; gap: 12px }
.reason { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 20px 20px; border-radius: 16px; background: #fff; color: #0B0E15 }
.reason .n { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--ion); color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -.03em }
.reason b { display: block; font-size: 19px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: #0B0E15 }
.reason p { margin-top: 6px; font-size: 15px; color: #414A5C; line-height: 1.5 }

/* ── OTO · barra roja de alerta (Skalah) ──────────────────────────────────── */
.alert { position: sticky; top: 0; z-index: 50; padding: 12px 16px 13px; background: var(--red); color: #fff; text-align: center; box-shadow: 0 8px 30px -8px rgba(229, 22, 43, .7) }
.alert b { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; color: #fff }
.alert b svg { width: 22px; height: 22px; flex: none }
.alert span { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .92) }
.alert span strong { color: #fff }
@media (min-width: 720px) { .alert b { font-size: 21px } .alert span { font-size: 15px } }

/* ── Gold: tipografía dorada, píldora verde, tiles brillantes ────────────── */
.gold-name { display: inline-block; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1;
  background: linear-gradient(180deg, #FFE9A0 0%, var(--gold) 45%, var(--gold-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 24px rgba(242, 194, 48, .25)) }
.gold-lock { display: grid; justify-items: center; gap: 6px; text-align: center }
.gold-lock .gold-name { font-size: 44px }
.gold-lock small { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--t3) }
@media (min-width: 720px) { .gold-lock .gold-name { font-size: 64px } }
.price-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 12px 22px; border-radius: 14px; background: linear-gradient(180deg, #19D97A, var(--buy-2)); color: #fff; font-weight: 800; font-size: 24px; letter-spacing: -.02em; text-transform: uppercase; box-shadow: 0 14px 46px -12px var(--buy-glow), 0 0 0 4px rgba(18, 196, 106, .12) }
.price-pill small { font-size: 15px; font-weight: 700; letter-spacing: .04em }
.strike-price { font-size: 22px; font-weight: 700; color: #FF7A87; text-decoration: line-through; text-decoration-thickness: 3px }
@media (min-width: 720px) { .price-pill { font-size: 30px; padding: 14px 28px } }
.tiles { display: grid; gap: 22px; margin-top: 30px }
.tile { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center }
.tile:nth-child(even) { grid-template-columns: 1fr 96px }
.tile:nth-child(even) .tile-ic { order: 2 }
.tile:nth-child(even) .tile-tx { text-align: right }
.tile-ic { width: 96px; height: 96px; border-radius: 24px; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 30% 25%, #2A2410, #0B0906 70%); border: 1px solid rgba(242, 194, 48, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 18px 50px -14px rgba(242, 194, 48, .55), inset 0 1px 0 rgba(255, 233, 160, .45), inset 0 -10px 24px rgba(0, 0, 0, .6) }
.tile-ic svg { width: 46px; height: 46px; color: var(--gold); filter: drop-shadow(0 0 10px rgba(242, 194, 48, .8)) }
.tile-tx h3 { font-size: 22px; line-height: 1.05; font-weight: 800; letter-spacing: .01em; text-transform: uppercase;
  background: linear-gradient(180deg, #FFE9A0, var(--gold) 50%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent }
.tile-tx p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--t2) }
.tile-tx p b { color: var(--t1) }
@media (min-width: 720px) { .tile { grid-template-columns: 130px 1fr; gap: 26px } .tile:nth-child(even) { grid-template-columns: 1fr 130px } .tile-ic { width: 130px; height: 130px; border-radius: 30px } .tile-ic svg { width: 60px; height: 60px } .tile-tx h3 { font-size: 30px } .tile-tx p { font-size: 17px } }
.gold-box { padding: 20px 18px; border-radius: 16px; border: 2px solid rgba(242, 194, 48, .7); background: linear-gradient(180deg, rgba(242, 194, 48, .10), rgba(242, 194, 48, .03)); text-align: center; box-shadow: 0 0 60px -20px rgba(242, 194, 48, .5) }
.gold-box h3 { font-size: 24px; line-height: 1.12; font-weight: 800; letter-spacing: -.025em; color: #FFE9A0 }
.gold-box p { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--t2) }
.gold-box p b { color: var(--t1) }
@media (min-width: 720px) { .gold-box { padding: 28px 26px } .gold-box h3 { font-size: 32px } }
.shout { text-align: center; font-size: 22px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; color: #FFE9A0 }
@media (min-width: 720px) { .shout { font-size: 30px } }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.checks li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line); font-size: 16px; color: var(--t1); font-weight: 600 }
.checks li svg { width: 22px; height: 22px; flex: none; color: var(--buy) }
.checks li span { display: block; font-weight: 400; color: var(--t3); font-size: 14.5px; margin-top: 2px }

/* widget de un clic de Hotmart (tema claro propio) */
.hm { margin: 22px auto 0; max-width: 560px; padding: 12px; border-radius: 16px; background: var(--hm-bg); color: #111; border: 1px solid var(--line-2); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8) }
.hm-mount { min-height: 120px }
.hm-mount:empty { display: grid; place-items: center; min-height: 120px; color: #5B657A; font-size: 14px }
.hm-mount:empty::after { content: "Cargando el botón de un clic de Hotmart…" }
.hm-fallback { display: none; margin-top: 14px }
.hm.is-fallback .hm-mount { display: none }
.hm.is-fallback { background: transparent; border: 0; padding: 0; box-shadow: none }
.hm.is-fallback .hm-fallback { display: block }

/* ── legado (gracias, legales, estado, contacto) ─────────────────────────── */
.card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--s1) }
.card-k { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t5); font-weight: 600 }
.card-n { margin-top: 10px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--t1) }
.card-d { margin-top: 8px; font-size: 15.5px; color: var(--t3); line-height: 1.5 }
.card-logo { display: flex; align-items: center; gap: 10px; margin-top: 10px }
.card-logo img { width: 28px; height: 28px; border-radius: 8px }
.card-logo span { font-size: 18px; font-weight: 700; color: var(--t1) }
.grid-3 { display: grid; gap: 14px; grid-template-columns: 1fr }
.grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr) } .grid-2 { grid-template-columns: repeat(2, 1fr) } }
.sec-h { text-align: center; margin-bottom: 26px }
.sec-t { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--t1); text-transform: uppercase }
.sec-p { margin: 10px auto 0; max-width: 52ch; font-size: 16px; color: var(--t3) }
@media (min-width: 720px) { .sec-t { font-size: 34px } .sec-p { font-size: 17px } }
.list { display: grid; gap: 10px }
.li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--s1) }
.li-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(11, 76, 250, .14); color: var(--ion-300) }
.li-ic svg { width: 18px; height: 18px }
.li-n { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(11, 76, 250, .14); color: var(--ion-300); font-weight: 700; font-size: 15px }
.li b { display: block; font-size: 16.5px; line-height: 1.3; color: var(--t1) }
.li span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--t3) }
.li--ok .li-ic { background: rgba(31, 209, 140, .14); color: var(--ok) }
.bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; background: var(--ion); color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.3; text-align: center }
.bar svg { width: 18px; height: 18px; flex: none }
.note { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--s2); color: var(--t2); font-size: 15.5px; line-height: 1.55 }
.note--warn { border-color: rgba(255, 197, 92, .35); background: rgba(237, 161, 50, .07) }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--s1) }
.step-n { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ion); color: #fff; font-weight: 800; font-size: 18px; box-shadow: 0 8px 24px -8px rgba(11, 76, 250, .8) }
.step b { display: block; font-size: 18px; line-height: 1.3; color: var(--t1) }
.step p { margin-top: 6px; font-size: 15.5px; color: var(--t3); line-height: 1.55 }
.step .btn { max-width: none; min-height: 54px; font-size: 15px; margin-top: 14px; animation: none }
.tl { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr) }
.tl-d { padding: 12px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--s1); text-align: center }
.tl-n { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--t5) }
.tl-t { margin-top: 4px; font-weight: 700; font-size: 14.5px; color: var(--t1) }
.tl-d:last-child { grid-column: 1 / -1 }
@media (min-width: 720px) { .tl { grid-template-columns: repeat(7, 1fr) } .tl-d:last-child { grid-column: auto } }
.buy { display: grid; gap: 8px }
.buy-i { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--s1); font-size: 15.5px; color: var(--t2) }
.buy-i svg { width: 18px; height: 18px; flex: none; color: var(--ok) }
.buy-i > span { flex: 1 1 200px; min-width: 0 }
.buy-i.is-off { opacity: .45 }
.buy-i.is-off svg { color: var(--t5) }
.buy-i a { margin-left: auto; font-size: 14px; white-space: nowrap }
.cal { display: grid; gap: 10px }
.cal-i { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--s1) }
.cal-i b { display: block; font-size: 16.5px; color: var(--t1) }
.cal-i span { display: block; margin-top: 4px; font-size: 15px; color: var(--t3); line-height: 1.5 }
.cal-i .links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 14.5px }
.form { display: grid; gap: 10px; max-width: 520px; margin: 0 auto }
.in { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--s2); color: var(--t1); font-size: 16px }
.in::placeholder { color: var(--t5) }
.in:focus { border-color: var(--ion-400); box-shadow: 0 0 0 3px rgba(62, 119, 255, .2) }
textarea.in { min-height: 130px; resize: vertical }
.form .btn { min-height: 56px; font-size: 16px; animation: none }
.form .hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0 }
.msg { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 15px; line-height: 1.5 }
.msg.is-on { display: block }
.msg--ok { background: rgba(31, 209, 140, .1); border: 1px solid rgba(31, 209, 140, .3); color: var(--t1) }
.msg--err { background: rgba(244, 57, 79, .1); border: 1px solid rgba(244, 57, 79, .3); color: var(--t1) }
.form.is-busy .btn { opacity: .6; pointer-events: none }
.legal { max-width: 720px; margin: 0 auto; padding: 24px 18px 48px }
.legal h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12 }
.legal .updated { margin-top: 10px; font-size: 13.5px; color: var(--t5) }
.legal h2 { margin-top: 40px; font-size: 21px; font-weight: 700; letter-spacing: -.015em; color: var(--t1) }
.legal h3 { margin-top: 24px; font-size: 17.5px; font-weight: 700; color: var(--t1) }
.legal p, .legal li { margin-top: 12px; font-size: 16.5px; line-height: 1.65; color: var(--t2) }
.legal ul, .legal ol { padding-left: 1.2em; margin: 0 }
.legal li { margin-top: 8px }
.legal .toc { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--s1) }
.legal .toc b { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--t5) }
.legal .toc ol { margin-top: 8px }
.legal .toc li { margin-top: 6px; font-size: 15.5px }
.legal .toc a { color: var(--t2) }
.legal .lead { padding: 18px 20px; border-left: 3px solid var(--ion); background: var(--s1); border-radius: 0 12px 12px 0; font-size: 17px; color: var(--t1) }
.legal table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--t2) }
.legal th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--t5); font-weight: 600 }
.legal .tbl { overflow-x: auto }
.legal .box { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--s2) }
.legal .box p { margin-top: 6px }
.pend { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px dashed var(--line-3); font-size: 10px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--t5); vertical-align: middle; line-height: 1.5 }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--s2); color: var(--t1); font-size: 14.5px; max-width: calc(100% - 32px); transition: opacity .25s, transform .25s var(--ease); pointer-events: none }
.toast.is-on { opacity: 1; transform: translate(-50%, 0) }
.state { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 40px 20px }
.disc { max-width: 720px; margin: 16px auto 0; padding: 0 18px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--t4) }
.disc b { color: var(--t3); font-weight: 500 }

/* ── pie (Melisa/Skalah): logo, enlaces, descargo, Hotmart/Meta, ©) ──────── */
.foot { margin-top: 40px; padding: 40px 0 44px; border-top: 1px solid var(--line); text-align: center; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35)) }
.foot-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--t3) }
.foot-brand img { width: 22px; height: 22px }
.foot-brand .wordmark { font-size: 10px; color: var(--t3) }
.foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: 14.5px; font-weight: 600 }
.foot-links a { color: var(--t2) }
.foot-links a:hover { color: var(--t1) }
.foot-disc { margin: 22px auto 0; max-width: 78ch; padding: 0 18px; font-size: 12px; line-height: 1.55; color: var(--t4) }
.foot-disc b { color: var(--t3); font-weight: 600 }
.foot-legal { margin: 14px auto 0; max-width: 70ch; padding: 0 18px; font-size: 11.5px; line-height: 1.55; color: var(--t5) }
.foot-legal b { display: block; margin-top: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); font-weight: 600; font-size: 11px }

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