:root {
  /* Paleta EL ECOMMERCE (tomada del logo): marino, azul y cian */
  --ink: #011A46; --ink2: #0A3478;
  --deep: #013F96; --deep2: #0052C2; --sky: #20CEFC;
  --cta: #0066DE; --cta2: #0050B8; --cta-soft: #E5F0FD;
  --ground: #EEF3FA; --paper: #F5F8FD; --white: #fff;
  --txt: #13233F; --mute: #55637A; --faint: #7E8BA0;
  --line: #D3DDEA; --line2: #E4EAF3; --ok: #0066DE; --hero-em: #5FD3FF;
  --r: 14px;
  --f-head: 'Anton', 'Arial Narrow', sans-serif;            /* cifras, precios, botones y rótulos */
  --f-title: 'Inter Tight', 'Inter', system-ui, sans-serif;  /* títulos: extra negritas y apretados */
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 var(--f-body); font-synthesis: none; color: var(--txt); background: var(--white); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cta); }
h1, h2, h3 { font-family: var(--f-title); font-weight: 800; line-height: 1.02; margin: 0 0 .4em; letter-spacing: -.045em; }
h1 { font-size: clamp(40px, 6vw, 68px); }
h2 { font-size: clamp(32px, 4.4vw, 50px); }
h3 { font-size: 24px; }
h1 em, h2 em { font-style: normal; color: var(--hero-em); }
p { margin: 0 0 1em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 820px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.lead { font-size: 18px; color: var(--mute); max-width: 720px; }
.kick { font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--deep2); margin-bottom: 14px; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--cta); color: #fff; font-weight: 400; font-size: 18px; text-transform: uppercase; letter-spacing: .02em;
  padding: 15px 24px; border-radius: 10px; text-decoration: none; border: 2px solid var(--cta); transition: background .15s, transform .15s; cursor: pointer; font-family: var(--f-head); line-height: 1.15; }
.btn:hover { background: var(--cta2); border-color: var(--cta2); transform: translateY(-1px); }
.btn.sec2 { background: transparent; color: var(--cta); }
.btn.sec2:hover { background: var(--cta-soft); }
.btn.full { width: 100%; }
.btn.sm { padding: 9px 16px; font-size: 14px; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* Cabecera */
.topstrip { background: var(--deep); color: #fff; text-align: center; font-size: 13px; padding: 8px 12px; }
.nav { background: #fff; border-bottom: 1px solid var(--line2); position: sticky; top: 0; z-index: 50; }
.nav-g { display: flex; align-items: center; gap: 24px; height: 66px; }
.logo img { height: 40px; width: auto; }
.nav-l { flex: 1; display: flex; gap: 22px; justify-content: flex-end; }
.nav-l a { color: var(--txt); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav-l a:hover { color: var(--cta); }
.nav-b { display: flex; gap: 10px; }

/* Hero */
.hero { background: radial-gradient(1200px 600px at 85% -10%, var(--ink2), var(--ink) 60%); color: #fff; padding: 56px 0 70px; overflow: hidden; }
.hero-g { display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: center; }
.hero-logo { display: block; width: 300px; margin: -16px auto 20px; mix-blend-mode: multiply; } /* logo centrado arriba del hero claro */
.badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(32,206,252,.12); color: var(--sky); border: 1px solid rgba(32,206,252,.35);
  border-radius: 99px; padding: 7px 14px; font: 500 12px/1 var(--f-mono); cursor: pointer; margin-bottom: 18px; }
.badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(32,206,252,.2); }
.badge u { text-decoration: none; opacity: .8; }
.datanote { background: rgba(255,255,255,.06); border-left: 3px solid var(--sky); padding: 10px 14px; font-size: 14px; color: #C7D6EE; border-radius: 0 8px 8px 0; }
.hlead { color: #C7D6EE; }
.hlead b { color: #fff; }
.price-l { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.price-l .from { font: 500 12px var(--f-mono); text-transform: uppercase; color: var(--faint); }
.num { font: 700 46px/1 var(--f-head); }
.num small { font-size: 16px; margin-left: 4px; font-family: var(--f-body); font-weight: 600; opacity: .7; }
.once { font-size: 13px; line-height: 1.3; color: var(--faint); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ctas.center { justify-content: center; }
.hero .btn.sec2 { color: #fff; border-color: rgba(255,255,255,.35); }
.hero .btn.sec2:hover { background: rgba(255,255,255,.08); }
.demolink { color: var(--hero-em); font-size: 14px; flex-basis: 100%; }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0 18px; }
.proof span { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: #B3C5E3; line-height: 1.35; }
.proof b { display: block; font: 700 26px/1.1 var(--f-head); color: #fff; }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: #B3C5E3; }
.ticks.center { justify-content: center; margin-top: 20px; }
.ticks span::before { content: '✓'; color: var(--sky); margin-right: 6px; font-weight: 700; }
.stage { position: relative; padding: 0 40px 60px 0; }
/* Escritorio: el mockup arranca a la altura del titular y se queda centrado en pantalla
   mientras se recorre la columna de texto (que es mucho más alta) */
@media (min-width: 861px) {
  .hero { overflow: clip; } /* hidden rompería el sticky; clip recorta igual */
  .hero-g { align-items: start; }
  .stage { position: sticky; top: max(24px, calc(50vh - 230px)); margin-top: 64px; }
}
.win { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.win-bar { display: flex; align-items: center; gap: 6px; background: #E4EAF3; padding: 9px 12px; }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #C0CCDE; }
.win-bar b { margin-left: 10px; font: 500 11px var(--f-mono); color: var(--mute); }
.phone { position: absolute; right: 0; bottom: 0; width: 34%; border: 6px solid #010F2C; border-radius: 26px; overflow: hidden; background: #010F2C; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.phone video { aspect-ratio: 9/19; object-fit: cover; width: 100%; }
.cajetin { position: absolute; left: -24px; bottom: 6px; background: #fff; color: var(--txt); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: repeat(2, auto); gap: 6px 18px; box-shadow: 0 18px 40px rgba(0,0,0,.35); font-size: 12px; }
.cajetin div:first-child { grid-column: 1 / -1; }
.cajetin b { display: block; font: 500 10px var(--f-mono); color: var(--faint); text-transform: uppercase; }
.cajetin strong { font-weight: 700; }

.stats { background: var(--deep); color: #fff; }
.stats-g { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 22px 16px; border-left: 1px solid rgba(255,255,255,.14); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font: 700 34px/1 var(--f-head); color: var(--sky); }
.stat span { font-size: 13px; color: #D6E6FB; }

/* Secciones */
.sec { padding: 88px 0; }
.sec.tight { padding: 64px 0; }
.sec.paper { background: var(--ground); }
.sec.dark { background: var(--ink); color: #fff; }
.sec.dark .lead { color: #B3C5E3; }
.sec.dark .kick { color: var(--sky); }
/* Sección ¿Me sirve?: mismo degradado oscuro del VSL; las tarjetas siguen blancas */
.sec.blue { background: radial-gradient(900px 420px at 50% -8%, #0B3D8E, transparent 70%), linear-gradient(180deg, #010F2C, var(--ink)); color: #fff; }
.sec.blue h2 { color: #fff; }
.sec.blue .lead { color: #DCE6F7; }
.sec.blue .kick { color: var(--sky); }
/* Sección con el mismo degradado azul oscuro del VSL (La aplicación) */
.sec.noche { background: radial-gradient(900px 420px at 50% -8%, #0B3D8E, transparent 70%), linear-gradient(180deg, #010F2C, var(--ink)); color: #fff; }
.sec.noche h2, .sec.noche h3 { color: #fff; }
.sec.noche h2 em { color: var(--hero-em); }
.sec.noche .kick { color: var(--sky); }
.sec.noche .lead, .sec.noche .fs-slide p { color: #C7D6EE; }
.sec.noche .fs-slide li { color: #DCE6F7; }
.sec.noche .fs-slide li::before { color: var(--sky); }
.sec.noche .chip.pro { background: rgba(32,206,252,.12); color: var(--sky); border: 1px solid rgba(32,206,252,.35); }
.sec.noche .fs-tabs button { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #C7D6EE; }
.sec.noche .fs-tabs button span { background: rgba(255,255,255,.1); color: #fff; }
.sec.noche .fs-tabs button:hover { border-color: var(--sky); color: #fff; }
.sec.noche .fs-tabs button[aria-selected=true] { background: var(--cta); border-color: var(--cta); color: #fff; }
.sec.noche .fs-tabs button[aria-selected=true] span { background: #fff; color: var(--cta); }
.sec.noche .fs-arr { background: var(--ink2); color: #fff; border-color: rgba(255,255,255,.25); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.sec.noche .fs-dots i { background: rgba(255,255,255,.25); }
.sec.noche .fs-dots i.on { background: var(--sky); }
.sec.noche .shot { border-color: rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.sec.noche .blurnote { color: #8FA3C4; }
.sec.blue .card { color: var(--ink); border-color: transparent; box-shadow: 0 14px 34px rgba(1,26,70,.25); }
.sec .center { margin-bottom: 40px; }

.card { background: #fff; border: 1px solid var(--line2); border-radius: var(--r); padding: 24px; }
.card p { color: var(--mute); font-size: 15px; }
.tag { display: inline-block; font: 500 11px var(--f-mono); color: var(--deep2); background: #E3EEFD; border-radius: 6px; padding: 4px 8px; }
.card h3 + p + .tag { margin-top: auto; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.grid5 .card .tag { margin-bottom: 12px; }
.grid4 .card { display: flex; flex-direction: column; }

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vs-c { border-radius: var(--r); padding: 28px; border: 1px solid var(--line); }
.vs-c b { font: 700 22px var(--f-head); text-transform: uppercase; letter-spacing: .04em; }
.vs-c.bad { background: #F7F9FC; }
.vs-c.bad b { color: var(--faint); }
.vs-c.good { background: #EEF5FE; border-color: #B8D4F6; }
.vs-c.good b { color: var(--deep2); }
.flow { font: 500 14px/1.6 var(--f-mono); margin: 12px 0; }
.res2 { color: var(--mute); margin: 0; }

.feat { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; margin: 0 0 64px; }
.feat.rev .ftxt { order: 2; }
.chip { display: inline-block; font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; background: var(--cta-soft); color: var(--cta2); padding: 5px 10px; border-radius: 99px; margin-bottom: 12px; }
.chip.pro { background: var(--ink); color: var(--sky); }
.feat h3 { font-size: 32px; }
.feat p { color: var(--mute); }
.feat ul, .plan ul, .checks { list-style: none; padding: 0; margin: 0 0 1em; }
.feat li, .checks li { padding-left: 26px; position: relative; margin-bottom: 8px; font-size: 15px; }
.feat li::before, .checks li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.shot { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(1,26,70,.14); background: #fff; }
/* Slider de funciones: captura grande + texto debajo */
.fslider { margin: 8px 0 28px; }
.fs-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 24px; }
.fs-tabs button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; color: var(--mute); border-radius: 99px; padding: 8px 14px 8px 8px; font: 600 14px var(--f-body); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.fs-tabs button span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ground); font: 600 12px var(--f-mono); }
.fs-tabs button:hover { border-color: var(--cta); color: var(--txt); }
.fs-tabs button[aria-selected=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fs-tabs button[aria-selected=true] span { background: var(--sky); color: var(--ink); }
.fs-view { position: relative; }
.fs-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.fs-track::-webkit-scrollbar { display: none; }
.fs-slide { flex: 0 0 100%; scroll-snap-align: center; padding: 0 2px 6px; }
.fs-slide .shot { max-width: 1060px; margin: 0 auto; }
.fs-slide .ftxt { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px 48px; max-width: 1060px; margin: 28px auto 0; }
.fs-slide h3 { font-size: 34px; }
.fs-slide p { color: var(--mute); margin: 0; }
.fs-slide ul { list-style: none; padding: 0; margin: 0; align-self: center; }
.fs-slide li { padding-left: 26px; position: relative; margin-bottom: 10px; font-size: 15px; }
.fs-slide li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.fs-arr { position: absolute; top: 30%; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 400 30px/1 var(--f-body); cursor: pointer; box-shadow: 0 10px 24px rgba(1,26,70,.16); transition: transform .2s, opacity .2s; }
.fs-arr:hover { transform: scale(1.06); }
.fs-arr:disabled { opacity: 0; pointer-events: none; }
.fs-arr.prev { left: -8px; }
.fs-arr.next { right: -8px; }
.fs-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.fs-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .25s, background .25s; }
.fs-dots i.on { width: 26px; background: var(--cta); }
@media (max-width: 860px) {
  .fs-tabs { display: none; }
  .fs-slide .ftxt { grid-template-columns: 1fr; margin-top: 20px; }
  .fs-slide h3 { font-size: 28px; }
  .fs-arr { top: 18%; width: 40px; height: 40px; font-size: 26px; }
  .fs-arr.prev { left: 4px; }
  .fs-arr.next { right: 4px; }
}
.blurnote { text-align: center; font-size: 13px; color: var(--faint); }

/* Precios */
.value { max-width: 760px; margin: 0 auto 36px; text-align: center; background: rgba(32,206,252,.08); border: 1px dashed rgba(32,206,252,.4); border-radius: var(--r); padding: 16px 22px; }
.value b { color: var(--sky); font: 700 20px var(--f-head); text-transform: uppercase; letter-spacing: .04em; }
.value p { margin: 6px 0 0; color: #C7D6EE; font-size: 15px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 920px; margin: 0 auto; align-items: start; }
.plans.uno { grid-template-columns: minmax(0, 560px); justify-content: center; }
.plan .instant { background: var(--cta-soft); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 14px 0 4px; }
.plan { background: #fff; color: var(--txt); border-radius: 18px; padding: 30px 28px; position: relative; }
.plan.rec { outline: 3px solid var(--cta); box-shadow: 0 30px 70px rgba(0,102,222,.35); }
.ribbon { position: absolute; top: -14px; left: 28px; background: var(--cta); color: #fff; font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px; border-radius: 99px; }
.plan h3 { font-size: 36px; margin-bottom: 4px; }
.for { color: var(--mute); font-size: 15px; min-height: 48px; }
.flowpro { font: 500 12px var(--f-mono); color: var(--deep2); margin-top: -8px; }
.pprice { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 18px; }
.pprice s { color: var(--faint); font-size: 18px; }
.pprice .once { color: var(--mute); }
.lbl { font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin: 22px 0 10px; }
.plan li { padding: 6px 0 6px 26px; position: relative; font-size: 15px; border-bottom: 1px solid var(--line2); }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.plan li.no { color: var(--faint); text-decoration: line-through; }
.plan li.no::before { content: '—'; color: var(--faint); }
.plan li.plus::before { content: '+'; color: var(--cta); font-size: 18px; line-height: 1.2; }
.plan li.gift::before { content: '🎁'; font-size: 13px; }
.up { font-size: 13px; color: var(--mute); margin: 16px 0 0; }
.licnote { text-align: center; color: #B3C5E3; font-size: 14px; margin: 28px auto 0; max-width: 680px; }
.deliver, .which { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 920px; margin: 26px auto 0; }
.deliver > div, .which > div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 18px 20px; }
.deliver b, .which b { display: block; margin-bottom: 6px; }
.deliver span, .which p { color: #B3C5E3; font-size: 14px; margin: 0; }
.guarantee { display: flex; gap: 22px; align-items: center; max-width: 920px; margin: 26px auto 0; background: var(--deep); border-radius: var(--r); padding: 22px 26px; }
.guarantee h3 { font-size: 28px; }
.guarantee p { margin: 0; color: #D6E6FB; }
.seal { flex: none; width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--sky); display: flex; flex-direction: column; align-items: center; justify-content: center; font: 500 11px var(--f-mono); color: var(--sky); }
.seal b { font: 700 40px/1 var(--f-head); }

.size { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 24px; }
.size span { font: 500 12px var(--f-mono); color: #B3C5E3; text-transform: uppercase; }
.size b { display: block; font: 700 54px/1.1 var(--f-head); color: var(--sky); margin: 6px 0; }
.size p { color: #C7D6EE; font-size: 15px; margin: 0; }
.cnote { text-align: center; color: #B3C5E3; font-size: 14px; margin: 26px auto 0; max-width: 720px; }

.fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 36px; }
.fields div { border: 1px solid var(--line2); border-radius: 12px; padding: 16px; }
.fields i { font-style: normal; font-size: 22px; display: block; margin-bottom: 6px; }
.fields b { display: block; font-size: 15px; }
.fields span { font-size: 13.5px; color: var(--mute); }

.quote .stars { color: #F5A524; letter-spacing: 2px; }
.who { font-size: 13px; color: var(--faint); }

.faq details { background: #fff; border: 1px solid var(--line2); border-radius: 12px; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 18px 50px 18px 20px; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--cta); }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 20px 18px; color: var(--mute); }

.try-g { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.tcard { background: var(--ink); color: #fff; border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.tcard span { font: 500 11px var(--f-mono); color: var(--sky); text-transform: uppercase; }
.tcard b { font: 700 30px var(--f-head); }
.tcard small { color: #B3C5E3; margin-bottom: 14px; }

.final { padding: 96px 0; background: radial-gradient(900px 400px at 50% 0, var(--ink2), var(--ink)); }
.final .lead { margin: 0 auto 26px; }

/* Calculadora */
.calc { display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; }
.calc-in, .calc-out { min-width: 0; background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r); padding: 24px; }
.calc label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.calc select, .field input { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
/* Ejemplos: una sola fila que se desliza de lado; los bordes se difuminan solo donde hay más ejemplos */
.chips-w { position: relative; margin-bottom: 14px; --fi: 0px; --fd: 36px; }
.chips-w.ini-no { --fi: 36px; }
.chips-w.fin { --fd: 0px; }
.chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scroll-snap-type: x proximity; scroll-padding: 0 34px;
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fi), #000 calc(100% - var(--fd)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--fi), #000 calc(100% - var(--fd)), transparent); }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; white-space: nowrap; scroll-snap-align: start; border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit; }
.chips button:hover { border-color: var(--cta); color: var(--cta); }
.chips button.on { background: var(--cta); border-color: var(--cta); color: #fff; }
.chips-arr { position: absolute; top: 50%; z-index: 1; width: 30px; height: 30px; margin-top: -16px; display: grid; place-items: center; padding: 0 0 2px;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font: 700 20px/1 var(--f-body); cursor: pointer;
  box-shadow: 0 2px 8px rgba(1,26,70,.14); transition: border-color .15s, color .15s; }
.chips-arr:hover { border-color: var(--cta); color: var(--cta); }
.chips-arr:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.chips-arr.prev { left: -4px; }
.chips-arr.next { right: -4px; }
.chips-arr[hidden] { display: none; }
/* En computadora, los ejemplos siguen en lista (varias filas), sin flechas ni difuminado */
@media (min-width: 861px) {
  .chips { flex-wrap: wrap; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .chips-arr, .chips-arr[hidden] { display: none; }
}
.note { font-size: 13px; color: var(--faint); margin: 0; }
.calc-out { background: var(--ink); border-color: var(--ink); color: #DCE6F7; min-height: 420px; transition: opacity .2s; }
.calc-out.busy { opacity: .55; }
.c-load { color: #B3C5E3; margin: 0; }
.c-h { font: 500 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: #9AAED0; }
.c-big { font: 700 clamp(48px, 7vw, 72px)/1 var(--f-head); color: #fff; margin-top: 10px; }
.c-sub { color: #9AAED0; font-size: 14px; margin-bottom: 16px; }
.c-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.c-rows b { color: #fff; font: 700 20px var(--f-head); white-space: nowrap; }
.c-rows small { font: 500 12px var(--f-body); color: #A3E635; margin-left: 4px; }
.pro { font: 600 10px/1 var(--f-mono); font-style: normal; background: #A3E635; color: var(--ink); border-radius: 4px; padding: 3px 5px; margin-left: 6px; vertical-align: 1px; }
.c-lbl { font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: #9AAED0; margin: 20px 0 8px; }
.c-muestra, .c-bars { list-style: none; margin: 0; padding: 0; }
.c-muestra li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; background: rgba(255,255,255,.06); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; font-size: 13px; }
.c-muestra b { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-muestra span { grid-column: 1; color: #9AAED0; font-size: 12px; }
.c-muestra i { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-size: 12px; color: #A3E635; white-space: nowrap; }
.c-bars li { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 7px; }
.c-bars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-bars i { height: 10px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.c-bars u { display: block; height: 100%; background: #5A7099; border-radius: 99px; }
.c-bars li:first-child u { background: #A3E635; }
.c-bars b { color: #fff; font-weight: 600; min-width: 64px; text-align: right; }
.calc-out .btn { justify-content: center; text-align: center; }
.c-note { font-size: 12px; color: #9AAED0; margin: 18px 0 14px; }
.c-demo { display: block; text-align: center; color: #C9D7EE; font-size: 14px; margin-top: 10px; }
.after { text-align: center; color: var(--mute); font-size: 14px; margin: 22px auto; max-width: 700px; }

/* Pie */
.foot { background: #010F2C; color: #9AAED0; padding: 56px 0 30px; font-size: 14px; }
.foot-g { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; margin-bottom: 30px; }
.foot-logo { height: 34px; width: auto; background: #fff; border-radius: 8px; padding: 4px 8px; margin-bottom: 12px; }
.foot b { display: block; color: #fff; margin-bottom: 10px; }
.foot a { color: #C9D7EE; text-decoration: none; display: block; margin-bottom: 6px; }
.foot p a { display: inline; }
.foot a:hover { color: #fff; }
.legal { font-size: 12px; color: #7A90B3; border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; margin: 0 0 8px; }

/* Barra fija de compra (móvil): precio a la izquierda, botón a la derecha, sin que el texto se apriete */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ink); color: #fff; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 12px; box-shadow: 0 -10px 28px rgba(1,26,70,.28); border-top: 1px solid rgba(32,206,252,.35); transition: transform .25s; }
.sticky .st-txt { flex: 1; min-width: 0; line-height: 1.2; }
.sticky b { display: block; font: 700 26px/1 var(--f-head); color: #fff; white-space: nowrap; }
.sticky b small { font: 600 11px var(--f-body); color: #B3C5E3; margin-left: 2px; }
.sticky span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--hero-em); line-height: 1.3; }
.sticky .btn { flex: none; width: auto; padding: 13px 16px; font-size: 15px; white-space: nowrap; border-radius: 10px; }

/* Hero: cifra grande y aviso de acceso directo */
.bignum { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.bignum b { font: 700 clamp(44px, 7vw, 64px)/.9 var(--f-head); color: var(--hero-em); white-space: nowrap; }
.bignum span { font-size: 15px; line-height: 1.35; color: #DCE6F7; }
.bignum em { font-style: normal; color: #fff; font-weight: 700; }
.access { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 0; padding: 14px 16px; border-radius: 12px; background: rgba(32,206,252,.1); border: 1px solid rgba(32,206,252,.35); }
.access i { font-style: normal; font-size: 22px; line-height: 1; }
.access b { display: block; color: #fff; font-size: 16px; }
.access span { font-size: 14px; color: #C7D6EE; line-height: 1.45; }
.access strong { color: #fff; }

/* Pasos del acceso */
/* Paso a paso: números unidos por una línea que se llena al llegar a la sección (JS agrega .anim y luego .vista) */
.steps { --gap: 24px; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); max-width: 1020px; margin: 36px auto 0; padding: 0; }
.steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.steps li:not(:last-child)::before, .steps li:not(:last-child)::after { content: ''; position: absolute; top: 27px; left: calc(50% + 38px); right: calc(38px - 50% - var(--gap));
  height: 3px; border-radius: 2px; background: var(--line); }
.steps li:not(:last-child)::after { background: linear-gradient(90deg, var(--cta), var(--sky)); transform-origin: left; transition: transform .5s ease-out; }
.st-n { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%;
  background: var(--cta); border: 2px solid var(--cta); color: #fff; font: 700 26px/1 var(--f-head);
  box-shadow: 0 0 0 6px var(--cta-soft); transition: background .3s, border-color .3s, color .3s, box-shadow .3s, transform .3s; }
.st-c { flex: 1; width: 100%; background: var(--paper); border: 1px solid var(--line2); border-radius: var(--r); padding: 20px 22px 22px;
  transition: opacity .4s, transform .4s; }
.st-c small { display: block; margin-bottom: 8px; font: 600 11px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--deep2); }
.steps b { display: block; font-size: 18px; margin-bottom: 4px; color: var(--ink); }
.steps p { margin: 0; font-size: 15px; color: var(--mute); }
/* Antes de verse: números en gris, línea vacía y tarjetas un poco abajo; luego se encienden uno tras otro */
.steps.anim:not(.vista) .st-n { background: #fff; border-color: var(--line); color: var(--faint); box-shadow: 0 0 0 6px transparent; transform: scale(.9); }
.steps.anim:not(.vista) .st-c { opacity: 0; transform: translateY(12px); }
.steps.anim:not(.vista) li::after { transform: scaleX(0); }
.steps li:nth-child(2) .st-n, .steps li:nth-child(2) .st-c { transition-delay: .55s; }
.steps li:nth-child(3) .st-n, .steps li:nth-child(3) .st-c { transition-delay: 1.1s; }
.steps li:nth-child(1)::after { transition-delay: .2s; }
.steps li:nth-child(2)::after { transition-delay: .75s; }
@media (prefers-reduced-motion: reduce) { .st-n, .st-c, .steps li::after { transition: none !important; } }
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 61; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); }

/* Checkout */
.co { background: var(--ground); padding: 48px 0 80px; min-height: 70vh; }
.co-g { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; max-width: 980px; margin: 0 auto; align-items: start; }
.box { background: #fff; border: 1px solid var(--line2); border-radius: 18px; padding: 28px; }
.box h1 { font-size: 38px; }
.field { margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 600; }
.field small { color: var(--faint); font-weight: 400; }
.field input:focus, .calc select:focus { outline: 2px solid var(--cta); border-color: transparent; }
.err { background: #FDECEC; color: #9B1C1C; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.ok-box { background: #EEF5FE; border: 1px solid #B8D4F6; border-radius: 12px; padding: 16px; }
.sum-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line2); font-size: 15px; }
.sum-row.total { font-weight: 700; font-size: 20px; border: 0; }
.plan-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.plan-sw a { border: 2px solid var(--line); border-radius: 12px; padding: 12px; text-decoration: none; color: var(--txt); }
.plan-sw a.on { border-color: var(--cta); background: var(--cta-soft); }
.plan-sw b { display: block; }
.secure { font-size: 13px; color: var(--mute); text-align: center; margin-top: 12px; }
.coupon { display: flex; gap: 8px; }
.coupon input { flex: 1; }

@media (max-width: 1020px) {
  .grid5 { grid-template-columns: repeat(3, 1fr); }
  .grid4, .fields { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero { padding: 36px 0 48px; }
  .hero-g, .feat, .calc, .try-g, .co-g { grid-template-columns: 1fr; gap: 28px; }
  .feat.rev .ftxt { order: 0; }
  .stage { padding: 0 24px 48px 0; }
  .cajetin { left: 0; }
  .stats-g { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .plans, .deliver, .which, .vs, .grid3 { grid-template-columns: 1fr; }
  .nav-l { display: none; }
  .nav-g { justify-content: space-between; }
  .sec { padding: 60px 0; }
  .sticky { display: flex; }
  .sticky.hide { display: none; }
  /* En celular, la línea baja por la izquierda */
  .steps { grid-template-columns: 1fr; --gap: 18px; margin-top: 28px; }
  .steps li { flex-direction: row; align-items: flex-start; gap: 16px; text-align: left; }
  .steps li:not(:last-child)::before, .steps li:not(:last-child)::after { top: 64px; bottom: calc(8px - var(--gap)); left: 26.5px; right: auto; width: 3px; height: auto; }
  .steps li:not(:last-child)::after { background: linear-gradient(180deg, var(--cta), var(--sky)); transform-origin: top; }
  .steps.anim:not(.vista) li::after { transform: scaleY(0); }
  .st-n { margin: 0; }
  .st-c { padding: 16px 18px 18px; }
  body.has-sticky { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .wa-float { bottom: calc(88px + env(safe-area-inset-bottom)); width: 50px; height: 50px; }
}
@media (max-width: 560px) {
  .calc-in, .calc-out { padding: 20px 18px; }
  .c-muestra li { grid-template-columns: 1fr; }
  .c-muestra i { grid-column: 1; grid-row: auto; margin-top: 2px; }
  .c-bars li { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .c-bars i { grid-column: 1 / -1; grid-row: 2; }
  .c-bars span { grid-row: 1; }
  .wrap { padding: 0 16px; }
  .proof { grid-template-columns: 1fr; }
  .grid4, .grid5, .fields { grid-template-columns: 1fr; }
  .guarantee { flex-direction: column; text-align: center; }
  .btn { width: 100%; }
  .nav .btn { width: auto; }
  .logo img { height: 32px; }
  .nav-b { gap: 8px; }
  .nav .btn.sm { padding: 8px 12px; }
  .num { font-size: 40px; }
}

/* ── Páginas legales ── */
.legal-doc h1 { margin-bottom: 20px; }
.legal-doc h2 { font-size: 24px; margin: 30px 0 10px; }
.legal-doc p, .legal-doc li { font-size: 16px; line-height: 1.65; color: var(--txt); }
.legal-doc ul { padding-left: 22px; margin: 0 0 14px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc mark { background: #FEF3C7; padding: 0 4px; border-radius: 4px; }
.legal-tldr { margin-bottom: 8px; }
.legal-tldr ul.checks { padding-left: 0; margin: 8px 0 0; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line2); font-size: 14px; }

/* Gracias: clave de activación */
.lic-box { background: #EEF5FE; border: 1px solid #B8D4F6; border-radius: 12px; padding: 16px 18px; margin: 0 0 16px; }
.lic-box .lbl { display: block; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--deep2); margin-bottom: 10px; }
.lic-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lic-row code { font: 600 clamp(20px, 4.4vw, 26px)/1.2 var(--f-mono); color: var(--ink); letter-spacing: .04em; word-break: break-all; }
.pasos { margin: 0 0 18px; padding-left: 22px; } .pasos li { margin: 0 0 6px; }

/* Botones de compra con brillo: pulso de luz + destello que cruza el botón */
.btn-glow { position: relative; overflow: hidden; isolation: isolate; animation: glow-pulso 2.2s ease-in-out infinite; }
.btn-glow::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg);
  animation: glow-destello 3.2s ease-in-out infinite; pointer-events: none; }
.sticky .btn-glow { background: linear-gradient(90deg, var(--cta), #1C8CFF, var(--cta)); background-size: 200% 100%; animation: glow-pulso 2.2s ease-in-out infinite, glow-fondo 3s linear infinite; }
@keyframes glow-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,102,222,.55); transform: translateY(0) scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(0,102,222,0), 0 6px 22px rgba(32,206,252,.45); transform: translateY(-1px) scale(1.04); }
}
/* CTA de cierre en naranja de compra (mismo tono que la barra fija en celular) */
.btn-naranja { background: linear-gradient(120deg, #FF8A1F, #E85A00); border-color: #FF8A1F; animation-name: glow-pulso-n; }
.btn-naranja:hover { background: linear-gradient(120deg, #FF9A3A, #D45200); border-color: #FF9A3A; }
@keyframes glow-pulso-n {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,138,31,.55); transform: translateY(0) scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(255,138,31,0), 0 6px 22px rgba(255,138,31,.45); transform: translateY(-1px) scale(1.04); }
}
@keyframes glow-destello { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes glow-fondo { to { background-position: -200% 0; } }

/* Aviso de compra real */
.toast { position: fixed; left: 18px; bottom: 18px; z-index: 70; display: flex; align-items: center; gap: 12px; max-width: 340px;
  background: #fff; color: var(--txt); border: 1px solid var(--line2); border-radius: 14px; padding: 12px 34px 12px 12px;
  box-shadow: 0 18px 40px rgba(1,26,70,.22); font-size: 13.5px; line-height: 1.35;
  opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .35s; }
.toast.in { opacity: 1; transform: none; }
.toast-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #E7F9D2; color: #3F7A0A; font-weight: 700; }
.toast-t b { color: var(--ink); }
.toast-t small { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; }
.toast-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--faint); cursor: pointer; padding: 4px; }
@media (max-width: 860px) {
  .toast { left: 12px; right: 74px; max-width: none; bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-glow, .btn-glow::after, .sticky .btn-glow { animation: none; }
  .toast { transition: none; }
}

/* Chips de confianza: solo en celular (en escritorio lo cubren .access y .ticks) */
.mchips { display: none; }

/* Barra fija en celular: tarjeta flotante azul brillante, distinta del marino del hero y del blanco de las secciones */
@media (max-width: 860px) {
  .sticky { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 10px 10px 10px 16px; border-radius: 18px;
    background: linear-gradient(120deg, #0B7BFF, #0050C8); border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 14px 34px rgba(0,60,160,.45), 0 0 0 4px rgba(32,206,252,.16); }
  .sticky b small { color: #DCEBFF; }
  .sticky span { color: #fff; opacity: .9; }
  .sticky .btn, .sticky .btn-glow { background: #fff; color: var(--deep); border-color: #fff; animation: glow-pulso 2.2s ease-in-out infinite; }
  .sticky .btn:hover { background: #EAF3FF; border-color: #EAF3FF; }
  .sticky .btn-glow::after { background: linear-gradient(105deg, transparent, rgba(32,206,252,.35), transparent); }
  body.has-sticky { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .wa-float { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ── Hero en celular: solo lo esencial (qué es, cuánto, cuánto cuesta, comprar) y entrada animada ── */
@media (max-width: 560px) {
  .dsk { display: none; }
  .hero-logo { width: 190px; margin: 0 auto 14px; }
  .topstrip { display: none; }
  .hero { padding: 22px 0 32px; }
  .badge { margin-bottom: 12px; padding: 6px 12px; font-size: 11px; }
  .hero h1 { font-size: 32px; line-height: 1.04; margin-bottom: 14px; }
  .bignum { margin: 0 0 18px; gap: 12px; }
  .bignum b { font-size: 48px; }
  .bignum span { font-size: 14px; }
  .hlead, .ticks, .demolink, .access, .proof, .datanote { display: none; }
  .price-l { margin: 0 0 14px; padding: 12px 16px; gap: 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
  .price-l .from { color: var(--hero-em); white-space: nowrap; }
  .price-l .once { margin-left: auto; text-align: right; color: #B3C5E3; font-size: 12px; }
  .ctas { gap: 10px; }
  .mchips { display: flex; gap: 8px; list-style: none; margin: 16px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .mchips::-webkit-scrollbar { display: none; }
  .mchips li { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: #DCE6F7;
    background: rgba(32,206,252,.1); border: 1px solid rgba(32,206,252,.28); white-space: nowrap; }
  .mchips i { font-style: normal; font-size: 13px; }
  .hero-g > * { min-width: 0; }
  .sticky b small { display: block; margin: 3px 0 0; font-size: 11.5px; }
  .sticky span { display: none; }
  .stage { padding: 0; }
  .phone, .cajetin { display: none; }
  .win { box-shadow: 0 18px 44px rgba(0,0,0,.45); }
  .stat { padding: 16px 12px; }
  .stat b { font-size: 28px; }
  .stat span { font-size: 12px; }
  .hero-g > div:first-child > * { animation: hero-sube .55s cubic-bezier(.2,.7,.3,1) both; }
  .hero-g > div:first-child > :nth-child(3) { animation-delay: .06s; }
  .hero-g > div:first-child > :nth-child(4) { animation-delay: .12s; }
  .hero-g > div:first-child > :nth-child(n+5) { animation-delay: .2s; }
}
@keyframes hero-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-g > div:first-child > * { animation: none; } }
@media (prefers-reduced-motion: reduce) { .sticky .btn, .sticky .btn-glow, .sticky .btn-glow::after { animation: none; } }

/* Checkout: precio final siempre a la vista y cupón detrás de un switch */
.co-price { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 22px; padding: 14px 18px; border-radius: 14px;
  background: linear-gradient(120deg, var(--ink), var(--deep)); color: #fff; }
.co-price b { display: block; font: 700 38px/1 var(--f-head); }
.co-price b small { font: 600 14px var(--f-body); opacity: .75; }
.co-price span { display: inline-block; margin-top: 6px; font: 600 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink); background: var(--sky); border-radius: 99px; padding: 5px 9px; }
.co-price p { margin: 0; flex: 1 1 180px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #DCEBFF; text-transform: uppercase; letter-spacing: .02em; }
.switch { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 14px; font-size: 14px; color: var(--mute); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch i { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--line); transition: background .15s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.switch input:checked + i { background: var(--cta); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { outline: 2px solid var(--cta); outline-offset: 2px; }
#coCupon[hidden] { display: none; }

/* Testimonios: carrusel deslizable (swipe en celular, flechas en escritorio) */
.testi-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.testi-h h2 { max-width: 640px; margin: 0; }
.testi-score { flex: none; display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line2); border-radius: 14px; padding: 10px 16px; }
.testi-score b { font: 700 40px/1 var(--f-head); color: var(--ink); }
.testi-score small { display: block; font-size: 13px; color: var(--mute); }
.testi-sec .stars { color: #F5A524; letter-spacing: 2px; font-size: 15px; }
.testi { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 18px; scrollbar-width: none; outline: none; }
.testi::-webkit-scrollbar { display: none; }
.tq { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line2); border-radius: 18px; padding: 24px; box-shadow: 0 12px 32px rgba(1,26,70,.07); position: relative; transition: transform .2s, box-shadow .2s; }
.tq:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(1,26,70,.12); }
.tq::before { content: '“'; position: absolute; top: 4px; right: 20px; font: 700 84px/1 Georgia, serif; color: var(--cta-soft); }
.tq h3 { font-size: 24px; margin: 0; color: var(--ink); }
.tq blockquote { margin: 0; flex: 1; color: var(--mute); font-size: 15px; line-height: 1.6; }
.tq figcaption { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line2); }
.tq figcaption i { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--f-body); font-style: normal; color: #fff; background: linear-gradient(135deg, var(--cta), var(--sky)); }
.tq figcaption span { font-size: 13px; color: var(--faint); line-height: 1.35; }
.tq figcaption b { display: block; font-size: 15px; color: var(--txt); }
.testi-nav { display: flex; justify-content: flex-end; gap: 8px; }
.testi-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 18px; cursor: pointer; transition: background .15s, border-color .15s; }
.testi-nav button:hover { border-color: var(--cta); color: var(--cta); }
.testi-nav button:disabled { opacity: .35; cursor: default; }
@media (max-width: 1020px) { .tq { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 860px) {
  .testi-h { flex-direction: column; align-items: flex-start; gap: 16px; }
  .testi-nav { display: none; }
}
@media (max-width: 560px) {
  .testi { margin: 0 -16px; padding: 6px 16px 18px; scroll-padding: 0 16px; gap: 12px; }
  .tq { flex-basis: 86%; padding: 20px; }
  .tq h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .testi { scroll-behavior: auto; } .tq, .tq:hover { transition: none; transform: none; } }

/* ── PROSPECTOR PRO: logo ── */
.pp-logo { display: block; height: auto; max-width: 100%; }
.pp-chip { display: inline-flex; background: #fff; border-radius: 14px; padding: 6px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.pp-chip .pp-logo { width: 116px; }
.pp-chip .pp-caja { width: 130px; }   /* caja del producto: más alta que el logo, un poco más ancha para que se lea */
.plan h3.pp-h { margin: 4px 0 10px; }
.plan h3.pp-h .pp-logo { width: 230px; }
.co-logo { display: flex; justify-content: center; margin: -8px 0 14px; }
.co-logo .pp-logo { width: 190px; }
@media (max-width: 640px) {
  .pp-chip .pp-logo { width: 96px; }
  .pp-chip .pp-caja { width: 108px; }
  .plan h3.pp-h .pp-logo { width: 200px; }
  .co-logo .pp-logo { width: 160px; }
}

.pp-chip { flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px 8px; }
.pp-chip small, .co-logo small { font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--deep); }
.plan h3.pp-h { display: flex; justify-content: center; margin: 8px 0 2px; }
.pp-acc { text-align: center; margin: 0 0 14px; font: 600 13px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--deep); }
.pp-acc b { color: var(--cta); }
.co-logo { flex-direction: column; align-items: center; gap: 6px; }
.sticky span strong { color: var(--sky); font-weight: 700; letter-spacing: .02em; }
@media (max-width: 560px) {
  .pp-acc { font-size: 12px; }
  .sticky span { font-size: 12.5px; }
}
.pp-chip small { display: block; text-align: center; white-space: nowrap; margin: 0; }
@media (max-width: 560px) {
  .sticky .st-txt > span { display: block; margin-top: 5px; }
  .sticky span strong { color: #fff; font-weight: 800; white-space: nowrap; }
  .sticky .st-txt > span { font-size: 12px; }
}

/* Barra fija en celular: naranja de compra, con precio grande y sello «Pago único» */
.st-precio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sticky .st-precio b { display: inline-flex; align-items: baseline; gap: 3px; font: 700 30px/1 var(--f-head); letter-spacing: -.01em; }
.sticky .st-precio b small { display: inline; margin: 0; font: 700 11px/1 var(--f-body); letter-spacing: .04em; color: #fff; opacity: .85; }
.st-precio em { font: 800 10.5px/1 var(--f-body); font-style: normal; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  color: #B84A00; background: #fff; padding: 5px 8px; border-radius: 99px; box-shadow: 0 2px 6px rgba(90,35,0,.25); }
@media (max-width: 860px) {
  .sticky { background: linear-gradient(120deg, #FF8A1F, #E85A00); border-color: rgba(255,255,255,.3);
    box-shadow: 0 14px 34px rgba(150,55,0,.45), 0 0 0 4px rgba(255,138,31,.2); }
  .sticky .st-txt > span, .sticky span strong { color: #fff; }
  .sticky .btn, .sticky .btn-glow { color: #C24E00; padding: 13px 14px; font-size: 14.5px; align-self: center; }
  .st-precio { flex-wrap: nowrap; gap: 7px; }
  .sticky .st-precio b { font-size: 29px; }
  .st-precio em { font-size: 10px; padding: 5px 7px; }
  .sticky .st-txt > span { margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky .btn:hover { background: #FFF1E6; border-color: #FFF1E6; }
  .sticky .btn-glow::after { background: linear-gradient(105deg, transparent, rgba(255,138,31,.35), transparent); }
}
/* Teléfonos angostos: el sello baja debajo del precio y se omite la línea del producto */
@media (max-width: 420px) {
  .st-precio { flex-wrap: wrap; row-gap: 5px; }
  .sticky .st-txt > span { display: none; }
  .sticky .btn, .sticky .btn-glow { padding: 12px 12px; font-size: 14px; }
}
@keyframes glow-pulso-v {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); transform: scale(1); }
  50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); transform: scale(1.04); }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .sticky .btn-glow { animation: glow-pulso-v 2.2s ease-in-out infinite; }
}

/* ── Comprar: contador de oferta y beneficios ── */
.cd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(100deg, #FF6A3D, #E8304A); color: #fff; box-shadow: 0 10px 26px rgba(232,48,74,.28); }
.cd[hidden] { display: none; }
.cd-l b { display: block; font: 700 17px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; }
.cd-l span { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; opacity: .95; }
.cd-r { text-align: right; flex: none; }
.cd-r small { display: block; font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; opacity: .9; }
.cd-n { display: block; margin-top: 4px; font: 700 30px/1 var(--f-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cd-mob { display: none; }
.ben-t { margin: 0 0 8px; font: 600 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--deep); }
.checks.ben li { font-size: 14px; }
.gar { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 14px; border: 1px dashed #9FD8B5; background: #F0FAF4; border-radius: 12px; font-size: 13.5px; }
.gar span { font-size: 24px; }
.gar b { display: block; font-size: 14.5px; }
@media (max-width: 860px) {
  .cd-mob { display: flex; }
  .cd-mob[hidden], .cd-desk { display: none; }
}
@media (max-width: 400px) {
  .cd { padding: 10px 12px; }
  .cd-l b { font-size: 15px; }
  .cd-n { font-size: 24px; }
}

.checks.ben li { padding-top: 3px; padding-bottom: 3px; }
.gar { padding: 10px 14px; }
.gar span { font-size: 20px; }
.gar b { display: inline; }
/* Comprar en computadora: ambas columnas de la misma altura; los beneficios se reparten en el espacio */
@media (min-width: 861px) {
  .co-g { align-items: stretch; }
  .co-g > aside.box { display: flex; flex-direction: column; }
  .co-g > aside .ok-box { flex: 1; display: flex; flex-direction: column; }
  .co-g > aside .checks.ben { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
}

/* Aviso con opinión de cliente: iniciales como en el carrusel + estrellas */
.toast.op .toast-ic { width: 38px; height: 38px; background: linear-gradient(135deg, var(--cta), var(--sky)); color: #fff; font: 700 13px var(--f-body); }
.toast-st { display: block; font-style: normal; color: #F5A623; font-size: 12px; letter-spacing: 1px; margin-bottom: 1px; }

/* ═════════ Video de ventas (primera sección) ═════════ */
.vsl { --vsl-red: #D8122B; --vsl-red2: #A50D20;
  background: radial-gradient(900px 420px at 50% -8%, #0B3D8E, transparent 70%), linear-gradient(180deg, #010F2C, var(--ink));
  color: #fff; padding: 34px 0 40px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.06); }
.vsl-kick { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--sky); }
.vsl-kick i { width: 8px; height: 8px; border-radius: 50%; background: #FF3B4E; animation: vsl-rec 1.6s ease-out infinite; flex: none; }
.vsl-t { font-size: clamp(28px, 4vw, 46px); margin: 0 auto 22px; max-width: 860px; }
.vsl-player { position: relative; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(95,211,255,.28), 0 0 60px rgba(32,206,252,.18), 0 30px 70px rgba(0,0,0,.55); isolation: isolate; }
.vsl-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
.vsl-player button { font-family: inherit; }

/* Carga */
.vsl-spin { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none;
  border: 3px solid rgba(255,255,255,.2); border-top-color: var(--sky); animation: vsl-gira .8s linear infinite; opacity: 0; transition: opacity .2s; }
.vsl-player.esperando .vsl-spin { opacity: 1; }

/* Etiqueta «Activa el audio» */
.vsl-audio { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 14px; border: 2px solid rgba(255,255,255,.9); border-radius: 999px; cursor: pointer; color: #fff; text-align: left;
  background: linear-gradient(135deg, rgba(0,102,222,.94), rgba(1,63,150,.94)); box-shadow: 0 10px 30px rgba(0,0,0,.45);
  animation: vsl-pulso 1.8s ease-in-out infinite; transition: opacity .25s, visibility .25s; white-space: nowrap; }
.vsl-audio:hover { background: linear-gradient(135deg, #1C8CFF, var(--cta)); }
.vsl-audio:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.vsl-audio-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; font-size: 21px; flex: none; }
.vsl-audio-t { display: flex; flex-direction: column; line-height: 1.15; }
.vsl-audio-t b { font: 700 21px/1.05 var(--f-head); letter-spacing: .01em; text-transform: uppercase; }
.vsl-audio-t span { font-size: 14px; font-weight: 600; color: #CFF4FF; }
.vsl-player:not([data-estado="mudo"]):not([data-estado="bloqueado"]) .vsl-audio { opacity: 0; visibility: hidden; pointer-events: none; animation: none; }

/* Botón grande si el navegador bloquea la reproducción automática (ahorro de batería o de datos) */
.vsl-big { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 0; cursor: pointer; color: #fff; background: radial-gradient(circle, rgba(1,26,70,.35), rgba(1,15,44,.75)); }
.vsl-big span { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--cta); font-size: 32px; padding-left: 6px;
  animation: vsl-pulso 1.8s ease-in-out infinite; }
.vsl-big small { font: 600 16px var(--f-body); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.vsl-big:focus-visible span { outline: 3px solid var(--sky); outline-offset: 6px; }

/* Aviso al pausar y final del video */
.vsl-pausa, .vsl-fin { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(1,10,30,.45); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
.vsl-pausa[hidden], .vsl-fin[hidden], .vsl-big[hidden] { display: none; }
.vsl-pausa-c { width: min(470px, 100%); padding: 22px 24px 20px; border-radius: 14px; color: #fff;
  background: linear-gradient(160deg, var(--vsl-red), var(--vsl-red2)); border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 0 6px rgba(216,18,43,.22), 0 24px 60px rgba(0,0,0,.55); animation: vsl-entra .38s cubic-bezier(.2,.9,.3,1.25) both; }
.vsl-pausa-c b { display: block; font: 700 clamp(26px, 3.4vw, 36px)/1 var(--f-head); letter-spacing: .03em; margin-bottom: 8px; }
.vsl-pausa-c p { margin: 0 0 16px; font-size: 16px; font-weight: 500; line-height: 1.45; }
.vsl-seguir { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 13px 26px; cursor: pointer;
  background: #fff; color: var(--vsl-red2); font: 800 16px var(--f-body); box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .15s; }
.vsl-seguir:hover { transform: translateY(-1px) scale(1.03); }
.vsl-seguir:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vsl-fin { background: rgba(1,15,44,.84); }
.vsl-fin-c { display: flex; flex-direction: column; align-items: center; gap: 14px; animation: vsl-entra .38s ease both; }
.vsl-fin-c b { font: 700 clamp(22px, 3vw, 32px)/1.1 var(--f-head); max-width: 520px; }
.vsl-otra { background: none; border: 0; color: #C7D6EE; font-size: 14px; cursor: pointer; text-decoration: underline; }

/* Barra de controles propia (sin controles nativos) */
.vsl-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 26px 10px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.72)); transition: opacity .3s; }
.vsl-player.ocio .vsl-bar { opacity: 0; }
.vsl-player.ocio video { cursor: none; }
.vsl-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 8px; border: 0; border-radius: 8px;
  background: transparent; color: #fff; cursor: pointer; font: 600 13px var(--f-body); }
.vsl-b:hover { background: rgba(255,255,255,.14); }
.vsl-b:focus-visible, .vsl-prog:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.vsl-b svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.vsl-b-txt { background: rgba(255,255,255,.12); }
.vsl-player:not(.pausado) .i-play, .vsl-player.pausado .i-pausa { display: none; }
.vsl-player.callado .i-on, .vsl-player:not(.callado) .i-off { display: none; }
.vsl-prog { flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; position: relative; touch-action: none; }
.vsl-prog::before { content: ''; position: absolute; left: 0; right: 0; height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); }
.vsl-prog i { position: relative; height: 5px; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--cta), var(--sky)); }
.vsl-prog i::after { content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; }
.vsl-player:fullscreen { max-width: none; border-radius: 0; }
.vsl-player:-webkit-full-screen { max-width: none; border-radius: 0; width: 100%; height: 100%; }

/* Capítulos: fila de botones bajo el video (en celular se desliza de lado) */
.vsl-caps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 960px; margin: 14px auto 0; padding: 0; }
.vsl-caps button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #DCE6F7; font: 500 13px var(--f-body); white-space: nowrap; transition: background .15s, border-color .15s; }
.vsl-caps button span { font: 500 11.5px var(--f-mono); color: var(--sky); }
.vsl-caps button:hover { background: rgba(255,255,255,.14); }
.vsl-caps button:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.vsl-caps button[aria-current] { background: var(--cta); border-color: var(--cta); color: #fff; }
.vsl-caps button[aria-current] span { color: #CFF4FF; }

.vsl-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
/* El botón de compra espera a que el video llegue a la oferta (sin JS se ve siempre) */
.vsl-cta.espera .vsl-cta-btn { display: none; }
.vsl-cta.llega .vsl-cta-btn { animation: vsl-entra .5s cubic-bezier(.2,.9,.3,1.25) both; }
.vsl-proof { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #DCE6F7; }
.vsl-proof i { font-style: normal; color: #FFC53D; letter-spacing: 1px; font-size: 15px; }
.vsl-proof b { color: #fff; }
.vsl-promo { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #FFD3D8;
  background: rgba(216,18,43,.18); border: 1px solid rgba(255,90,108,.45); padding: 6px 14px; border-radius: 99px; }

@keyframes vsl-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(32,206,252,.6), 0 10px 30px rgba(0,0,0,.45); }
  50% { box-shadow: 0 0 0 14px rgba(32,206,252,0), 0 10px 30px rgba(0,0,0,.45); }
}
.vsl-audio { animation-name: vsl-pulso-e; }
.vsl-player[data-estado="mudo"] .vsl-audio, .vsl-player[data-estado="bloqueado"] .vsl-audio { animation-duration: 2.6s; }
.vsl-player[data-estado="mudo"] .vsl-audio-ic, .vsl-player[data-estado="bloqueado"] .vsl-audio-ic { animation: vsl-bocina 2.6s ease-in-out infinite; }
@keyframes vsl-pulso-e {   /* respira y, a cada ciclo, da un pequeño «toque» que pide el clic */
  0%, 100% { box-shadow: 0 0 0 0 rgba(32,206,252,.6), 0 10px 30px rgba(0,0,0,.45); transform: translate(-50%, -50%) scale(1); }
  35% { box-shadow: 0 0 0 18px rgba(32,206,252,0), 0 10px 30px rgba(0,0,0,.45); transform: translate(-50%, -50%) scale(1.05); }
  70% { transform: translate(-50%, -50%) scale(1); }
  76% { transform: translate(-50%, -50%) scale(1.09) rotate(-2deg); }
  82% { transform: translate(-50%, -50%) scale(1.09) rotate(2deg); }
  88% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes vsl-bocina { 0%, 70%, 88%, 100% { transform: none; } 76% { transform: rotate(-14deg) scale(1.12); } 82% { transform: rotate(14deg) scale(1.12); } }
@keyframes vsl-entra { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes vsl-gira { to { transform: rotate(360deg); } }
@keyframes vsl-rec { 0% { box-shadow: 0 0 0 0 rgba(255,59,78,.6); } 100% { box-shadow: 0 0 0 8px rgba(255,59,78,0); } }

@media (max-width: 860px) {
  .vsl { padding: 22px 0 28px; }
  .vsl-b-txt span { display: none; }
}
@media (max-width: 560px) {
  .vsl .wrap { padding: 0; }
  .vsl-kick, .vsl-t, .vsl-cta { padding: 0 16px; }
  .vsl-kick { font-size: 10.5px; }
  .vsl-t { font-size: 27px; margin-bottom: 16px; }
  /* En celular, marco claro para que el reproductor no se funda con el fondo oscuro */
  .vsl-player { margin: 0 12px; border-radius: 12px;
    box-shadow: 0 0 0 1.5px rgba(150,225,255,.55), 0 0 0 5px rgba(32,206,252,.12), 0 0 36px rgba(32,206,252,.32), 0 18px 40px rgba(0,0,0,.6); }
  .vsl-audio { gap: 9px; padding: 8px 15px 8px 9px; }
  .vsl-audio-ic { width: 32px; height: 32px; font-size: 16px; }
  .vsl-audio-t b { font-size: 16px; }
  .vsl-audio-t span { font-size: 12px; }
  .vsl-pausa { padding: 8px; }
  .vsl-pausa-c { padding: 12px 14px; }
  .vsl-pausa-c b { font-size: 22px; margin-bottom: 4px; }
  .vsl-pausa-c p { font-size: 13px; line-height: 1.35; margin-bottom: 10px; }
  .vsl-seguir { padding: 9px 18px; font-size: 14px; }
  .vsl-fin-c { gap: 8px; }
  .vsl-fin-c .btn { padding: 11px 16px; font-size: 14px; }
  .vsl-bar { padding: 18px 4px 2px; gap: 2px; }
  .vsl-b { height: 34px; min-width: 34px; padding: 0 5px; }
  .vsl-cta .btn { width: 100%; }
  .vsl-caps { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .vsl-caps::-webkit-scrollbar { display: none; }
  .vsl-caps li { flex: none; }
  .vsl-proof { font-size: 13px; }
  .vsl-promo { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .vsl-audio, .vsl-big span, .vsl-kick i, .vsl-pausa-c, .vsl-fin-c, .vsl-cta.llega .vsl-cta-btn, .vsl-player[data-estado="mudo"] .vsl-audio-ic { animation: none; }
}

/* ═════════ Hero claro: fondo azul muy suave, titular marino y resalte en azul de marca ═════════
   Sobrescribe solo dentro de .hero; el resto de la página conserva su paleta. */
.hero { background: radial-gradient(1100px 560px at 85% -10%, var(--cta-soft), var(--paper) 62%); color: var(--txt); border-bottom: 1px solid var(--line2); }
.hero h1 { color: var(--ink); }
.hero h1 em { color: var(--cta); }
.hero .badge { background: var(--cta-soft); color: var(--cta2); border-color: #B8D4F6; }
.hero .badge i { background: var(--cta); box-shadow: 0 0 0 4px rgba(0,102,222,.15); }
.hero .datanote { background: #fff; border-left-color: var(--cta); color: var(--mute); }
.hero .hlead { color: var(--mute); }
.hero .hlead b { color: var(--txt); }
.hero .bignum b { color: var(--cta); }
.hero .bignum span { color: var(--mute); }
.hero .bignum em { color: var(--ink); }
.hero .num { color: var(--ink); }
.hero .once { color: var(--mute); }
.hero .pp-chip { box-shadow: 0 8px 24px rgba(1,26,70,.12); border: 1px solid var(--line2); }
.hero .btn.sec2 { color: var(--cta); border-color: var(--cta); }
.hero .btn.sec2:hover { background: var(--cta-soft); }
.hero .demolink { color: var(--cta); }
.hero .access { background: #fff; border-color: #B8D4F6; box-shadow: 0 8px 24px rgba(1,26,70,.06); }
.hero .access b, .hero .access strong { color: var(--ink); }
.hero .access span { color: var(--mute); }
.hero .proof span { background: #fff; border-color: var(--line); color: var(--mute); }
.hero .proof b { color: var(--ink); }
.hero .ticks { color: var(--mute); }
.hero .ticks span::before { color: var(--cta); }
.hero .win { box-shadow: 0 30px 70px rgba(1,26,70,.22); border: 1px solid var(--line); }
.hero .phone { box-shadow: 0 24px 50px rgba(1,26,70,.3); }
.hero .cajetin { box-shadow: 0 18px 40px rgba(1,26,70,.18); border: 1px solid var(--line2); }
@media (max-width: 560px) {
  .hero .price-l { background: #fff; border-color: var(--line); box-shadow: 0 6px 18px rgba(1,26,70,.06); }
  .hero .price-l .from { color: var(--cta); }
  .hero .price-l .once { color: var(--mute); }
  .hero .mchips li { color: var(--ink); background: #fff; border-color: #B8D4F6; }
}

/* ── Precio promocional (−50%, termina hoy): barra superior, precio tachado y contadores ── */
.promo-bar { display: flex; align-items: center; justify-content: center; gap: 6px 16px; flex-wrap: wrap; padding: 8px 14px; text-align: center;
  background: linear-gradient(100deg, #FF6A3D, #E8304A); color: #fff; font-size: 14px; line-height: 1.3; text-decoration: none; }
.promo-bar:hover { color: #fff; filter: brightness(1.05); }
.promo-bar s { opacity: .8; font-weight: 500; }
.pb-c { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pb-c b, .vsl-promo b, .vsl-fin-promo b, .promo-plan b[data-cd-n] { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.pb-c b { background: rgba(0,0,0,.22); border-radius: 6px; padding: 2px 7px; }
.pr-antes { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }
.pr-antes s { color: var(--faint); font-size: 17px; font-weight: 600; }
.pr-antes em, .co-price span { font-style: normal; }
.pr-antes em { font: 800 11px/1 var(--f-body); text-transform: uppercase; letter-spacing: .04em; color: #fff; background: #E8304A; padding: 4px 7px; border-radius: 99px; white-space: nowrap; }
.pprice s { text-decoration-color: #E8304A; }
.promo-plan { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: -8px 0 16px; padding: 9px 12px; border-radius: 10px;
  background: #FFF0EC; color: #B4231F; font-size: 13.5px; }
.vsl-fin-promo { font-size: 14px; font-weight: 600; color: #FFD9C2; }
.vsl-fin-promo s { opacity: .75; }
.vsl-fin-c .vsl-fin-promo b { font: 700 14px var(--f-mono); color: #fff; max-width: none; }
.sticky .st-precio s { font-size: 14px; font-weight: 600; color: #fff; opacity: .75; white-space: nowrap; }
.co-price s { display: block; font-size: 15px; opacity: .7; margin-bottom: 2px; }
.sum-row s { color: var(--faint); }
.sum-row.promo { color: #C8261F; font-weight: 600; }
@media (max-width: 560px) {
  .promo-bar { font-size: 12.5px; padding: 7px 10px; gap: 2px 10px; }
}
.cd-l span span { display: inline; margin: 0; }
/* Hero en celular: logo + precio arriba; precio tachado y «pago único» en la segunda fila */
@media (max-width: 560px) {
  .hero .price-l { flex-wrap: wrap; row-gap: 10px; }
  .hero .price-l .pp-chip { order: 1; }
  .hero .price-l .num { order: 2; }
  .hero .price-l .pr-antes { order: 3; flex-direction: row; align-items: center; gap: 8px; }
  .hero .price-l .once { order: 4; flex: 1 1 140px; }
}