/* ───────────────────────────────────────────────────────────────────────────
   Aski · Motor de presentaciones (slide deck) — marca navy/gold, 16:9.
   Compartido por todos los decks. Navegacion en deck.js. Imprime a PDF (1
   slide por pagina, horizontal). Self-contained salvo la fuente Inter.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  --navy:#152642; --navy-2:#0E1B33; --navy-dark:#070E1C; --gold:#E5C56A;
  --gold-l:#F5DBA0; --gold-d:#d4a93f; --ink:#1f2b40; --line:rgba(255,255,255,.10);
  --muted:#aeb9cc; --soft:#cdd6e4; --ok:#46d39a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  background:#05080f; color:#fff; line-height:1.5; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Lienzo del deck ─────────────────────────────────────────────────────── */
.deck{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
.slide{
  position:absolute;inset:0;margin:auto;width:min(96vw,1180px);height:min(96vh,664px);
  background:radial-gradient(120% 140% at 80% -10%,#1d3458 0%,var(--navy) 38%,var(--navy-dark) 100%);
  border:1px solid var(--line);border-radius:22px;
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  padding:54px 64px;opacity:0;visibility:hidden;transform:translateY(14px) scale(.99);
  transition:opacity .4s ease,transform .4s ease;overflow:hidden;
  display:flex;flex-direction:column;
}
.slide.active{opacity:1;visibility:visible;transform:none;z-index:2}
.slide::after{ /* glow dorado decorativo */
  content:"";position:absolute;top:-120px;right:-120px;width:340px;height:340px;
  background:radial-gradient(circle,rgba(229,197,106,.18),transparent 70%);pointer-events:none}

/* ── Logo + pie de cada slide ────────────────────────────────────────────── */
.slide .brandmark{position:absolute;top:26px;right:30px;display:flex;align-items:center;gap:9px;z-index:3}
.slide .brandmark img{width:34px;height:34px;border-radius:9px;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.slide .brandmark span{font-weight:800;font-size:16px;color:#fff;letter-spacing:.2px}
.slide .pagefoot{position:absolute;left:64px;right:64px;bottom:22px;display:flex;justify-content:space-between;
  align-items:center;font-size:12px;color:var(--muted);z-index:3}
.slide .pagefoot a{color:var(--muted);text-decoration:none}

/* ── Tipografia / bloques ────────────────────────────────────────────────── */
.eyebrow{display:inline-block;color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 16px}
.kicker-bar{width:54px;height:4px;background:var(--gold);border-radius:3px;margin:0 0 22px}
h1{font-size:clamp(30px,4.6vw,52px);line-height:1.08;margin:0 0 16px;font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(24px,3.2vw,38px);line-height:1.12;margin:0 0 18px;font-weight:800;letter-spacing:-.01em}
h2 .g,h1 .g{color:var(--gold)}
.lead{font-size:clamp(16px,1.7vw,20px);color:var(--soft);max-width:62ch;margin:0 0 10px}
.slide p{margin:0 0 12px}
.dim{color:var(--muted)}
strong,b{color:#fff}
.gold{color:var(--gold)}

/* ── Cover ───────────────────────────────────────────────────────────────── */
.cover{justify-content:center}
.cover .logo-xl{width:92px;height:92px;border-radius:24px;box-shadow:0 18px 50px rgba(0,0,0,.5);
  border:1px solid rgba(229,197,106,.5);margin-bottom:26px}
.cover h1{font-size:clamp(34px,5.4vw,62px)}
.cover .lead{font-size:clamp(17px,2vw,22px);max-width:54ch}
.cover .pill{display:inline-block;border:1px solid rgba(229,197,106,.5);color:var(--gold);border-radius:999px;
  padding:7px 16px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:22px}
.cover .meta{margin-top:30px;display:flex;gap:26px;flex-wrap:wrap;color:var(--soft);font-size:15px}
.cover .meta b{color:var(--gold)}

/* ── Listas con check ────────────────────────────────────────────────────── */
ul.check{list-style:none;padding:0;margin:8px 0;display:grid;gap:13px}
ul.check li{position:relative;padding-left:34px;font-size:clamp(15px,1.5vw,18px);color:var(--soft)}
ul.check li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:7px;
  background:linear-gradient(140deg,var(--gold),var(--gold-d))}
ul.check li::after{content:"✓";position:absolute;left:5px;top:1px;color:var(--navy);font-weight:900;font-size:14px}
ul.check li b{color:#fff}

/* ── Grids de tarjetas ───────────────────────────────────────────────────── */
.grid{display:grid;gap:18px;margin-top:6px}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:16px;padding:20px 20px;
  border-top:3px solid var(--gold)}
.card .ic{font-size:26px;margin-bottom:10px;display:block}
.card h3{margin:0 0 6px;font-size:17px;color:#fff}
.card p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
/* Tarjeta con cifra protagonista (p.ej. cuanto gana el socio al mes). */
.card .num{font-size:clamp(30px,3.6vw,44px);font-weight:800;color:var(--gold);line-height:1;margin-bottom:10px}
.card .sub{margin-top:10px;font-size:clamp(14px,1.4vw,16px);font-weight:700;color:var(--gold)}

/* ── Banda de cierre ─────────────────────────────────────────────────────────
   Remate de una linea al pie del slide: cierra la idea y evita que la mitad
   inferior quede vacia cuando el bloque principal es corto. */
.strip{margin-top:18px;background:rgba(229,197,106,.09);border:1px solid rgba(229,197,106,.28);
  border-left:4px solid var(--gold);border-radius:12px;padding:15px 20px;font-size:clamp(14px,1.4vw,17px);
  color:var(--soft)}
.strip b{color:#fff}

/* ── Pasos numerados ─────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.step{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:16px;padding:18px}
.step .n{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,var(--gold),var(--gold-d));
  color:var(--navy);font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step h3{margin:0 0 5px;font-size:15px;color:#fff}
.step p{margin:0;font-size:13px;color:var(--muted)}

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:10px}
.stat .num{font-size:clamp(30px,4vw,46px);font-weight:800;color:var(--gold);line-height:1}
.stat .lbl{font-size:14px;color:var(--muted);margin-top:6px;max-width:22ch}

/* ── Tabla de precios / tramos ───────────────────────────────────────────── */
.tablewrap{overflow-x:auto;margin-top:4px}
.ptable{width:100%;border-collapse:collapse;font-size:clamp(13px,1.35vw,17px)}
.ptable th,.ptable td{padding:10px 12px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
/* Tablas de 8+ filas: aprieta el interlineado para que la ultima fila NO quede
   tapada por la .tnote. El chequeo de scrollHeight no lo detecta (la tabla no
   desborda su caja, se solapa con la nota) -> hay que MIRAR la diapositiva. */
.ptable.compact th,.ptable.compact td{padding:5px 12px}
.ptable thead th{background:rgba(229,197,106,.12);color:var(--gold);font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid rgba(229,197,106,.35)}
.ptable thead th small{display:block;margin-top:3px;font-size:11px;font-weight:600;color:var(--muted);
  letter-spacing:0;text-transform:none}
.ptable tbody th{text-align:left;color:#fff;font-weight:700}
.ptable tbody td{color:var(--soft)}
.ptable tbody td b{color:var(--gold)}
.ptable tr.best th,.ptable tr.best td{background:rgba(229,197,106,.09)}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:none}
.tnote{font-size:13px;color:var(--muted);margin:10px 0 0;max-width:none}

/* ── Split (texto + imagen) ──────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;flex:1;min-height:0}
.split.narrow{grid-template-columns:1.25fr .75fr}
.shots{display:flex;gap:16px;align-items:center;justify-content:center}
.shots img{height:min(46vh,420px);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.5);border:1px solid var(--line)}
.webshot{width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5);display:block}

/* ── Quote / testimonio ──────────────────────────────────────────────────── */
.quote{font-size:clamp(18px,2.1vw,26px);line-height:1.4;color:#fff;font-weight:600;max-width:30ch}
.quote .mk{color:var(--gold)}
.qmeta{margin-top:18px;color:var(--muted);font-size:15px}
.qmeta b{color:var(--gold)}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-size:16px;
  padding:14px 24px;border-radius:12px}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.contactline{margin-top:26px;display:flex;gap:28px;flex-wrap:wrap;color:var(--soft);font-size:16px}
.contactline b{color:var(--gold)}

.center{align-items:center;text-align:center;justify-content:center}
.center .lead{margin-left:auto;margin-right:auto}
.center ul.check{display:inline-grid;text-align:left}

/* ── Navegacion ──────────────────────────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--gold);width:0;z-index:50;transition:width .3s}
.nav{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;
  background:rgba(7,14,28,.7);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;z-index:50}
.nav button{background:transparent;border:none;color:#fff;cursor:pointer;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.nav button:hover{background:rgba(255,255,255,.12)}
.nav .count{font-size:13px;color:var(--muted);min-width:46px;text-align:center;font-variant-numeric:tabular-nums}
.dots{display:flex;gap:7px}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;transition:background .15s,transform .15s}
.dots i.on{background:var(--gold);transform:scale(1.25)}
.hint{position:fixed;bottom:20px;right:20px;font-size:12px;color:var(--muted);z-index:50;opacity:.7}

/* ── Responsive (movil) ──────────────────────────────────────────────────── */
@media (max-width:820px){
  /* El lienzo de escritorio es fijo (`.deck` position:fixed + `.slide` inset:0), asi que
     `height:auto` no servia de nada: el slide quedaba clavado al alto de la pantalla y
     `overflow:hidden` se comia el resto (en un movil se perdian hasta 800px de tarjetas).
     En movil el lienzo deja de ser fijo, la pagina scrollea y el slide crece con su
     contenido; solo el activo ocupa sitio (display:none en los demas, no visibility). */
  body{overflow:auto}
  .deck{position:static;display:block;padding:12px 0 96px}
  .slide{position:relative;inset:auto;margin:0 auto;width:96vw;height:auto;min-height:0;
    padding:40px 26px 62px;display:none;transform:none;transition:none}
  .slide.active{display:flex;opacity:1;visibility:visible}
  .split,.grid.c2,.grid.c3,.grid.c4,.steps,.stats{grid-template-columns:1fr;display:grid}
  .stats{gap:20px}
  .shots img{height:auto;max-width:100%}
  .slide .pagefoot{left:26px;right:26px}
  /* La tabla de tramos no cabe a 1 columna: scroll horizontal solo dentro de ella.
     El borde se desvanece para avisar que hay mas columnas; deck.js quita el
     desvanecido (.at-end) cuando ya se llego al final. */
  .tablewrap{-webkit-overflow-scrolling:touch}
  .tablewrap.scrollable{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 80%,transparent 100%)}
  .tablewrap.scrollable.at-end{-webkit-mask-image:none;mask-image:none}
  .ptable{font-size:13px}
  .ptable th,.ptable td{padding:9px 10px}
  /* La columna del tramo queda fija: sin ella, al desplazar no se sabe que fila es cual.
     Va estrecha (texto a 2 lineas) para tapar lo menos posible de las columnas de al lado. */
  .ptable thead th:first-child,.ptable tbody th{position:sticky;left:0;z-index:2;
    background:#111e35;border-right:1px solid var(--line);
    white-space:normal;max-width:82px;line-height:1.25;padding-right:8px}
  .ptable thead th:first-child{background:#1b2740}
  .ptable tr.best th{background:#18233b}
}

/* ── Impresion / export PDF (1 slide por pagina, horizontal) ─────────────── */
@media print{
  @page{size:1280px 720px;margin:0}
  body{overflow:visible;background:#fff}
  .deck{position:static;display:block}
  .nav,.progress,.hint{display:none!important}
  .slide{position:relative;inset:auto;opacity:1!important;visibility:visible!important;transform:none!important;
    width:1280px;height:720px;border-radius:0;border:none;margin:0;page-break-after:always;box-shadow:none;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
}