:root{--bg:#140a2e;--bg2:#1b1040;--card:#211650;--bd:#3a2d66;--fg:#f2edff;--mu:#b3a8d4;--ac:#ff5a4f;--ac2:#6a3df0;--ok:#48bb78;--sombra:0 10px 30px rgba(0,0,0,.35)}
@media (prefers-color-scheme:light){:root{--bg:#f7f4ff;--bg2:#ece6ff;--card:#ffffff;--bd:#ddd5ee;--fg:#1d1533;--mu:#5f5580;--ac:#e8352b;--ac2:#6a3df0;--ok:#1f9d55;--sombra:0 10px 30px rgba(60,30,120,.12)}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 "Segoe UI",system-ui,-apple-system,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--ac2)}
@media (prefers-color-scheme:dark){a{color:#b9a4ff}}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.sr{position:absolute;left:-9999px}
/* encabezado */
header.sitio{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--bd)}
header.sitio .wrap{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;font:800 22px/1 "Fredoka","Segoe UI",system-ui,sans-serif;color:var(--fg);text-decoration:none;letter-spacing:-.5px}
.marca img{width:36px;height:36px}.marca b{color:var(--ac)}
nav.menu{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;align-items:center}
nav.menu a{color:var(--fg);text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:600;font-size:15px}
nav.menu a:hover,nav.menu a[aria-current=page]{background:var(--bg2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:12px;border:2px solid var(--ac);background:var(--ac);color:#fff!important;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:transparent;color:var(--fg)!important;border-color:var(--bd)}
.btn.sec:hover{border-color:var(--ac2)}
.btn.chico{padding:8px 14px;font-size:14px}
/* portada */
.hero{padding:64px 0 40px;background:radial-gradient(900px 400px at 80% -10%,rgba(106,61,240,.35),transparent),radial-gradient(700px 300px at 0% 0%,rgba(255,90,79,.18),transparent)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,54px);line-height:1.08;margin:0 0 14px;letter-spacing:-1px}
.hero h1 em{font-style:normal;color:var(--ac)}
.lema{letter-spacing:3px;text-transform:uppercase;font-size:13px;font-weight:700;color:var(--mu);margin:0 0 14px}
.hero p.sub{font-size:19px;color:var(--mu);margin:0 0 22px;max-width:34em}
.acciones{display:flex;gap:12px;flex-wrap:wrap}
.nota{font-size:13px;color:var(--mu);margin-top:12px}
.captura{border-radius:14px;border:1px solid var(--bd);box-shadow:var(--sombra);display:block;width:100%}
/* secciones */
section.bloque{padding:56px 0}
section.bloque.alt{background:var(--bg2)}
h2.t{font-size:clamp(26px,3.4vw,36px);margin:0 0 8px;letter-spacing:-.5px}
p.st{color:var(--mu);margin:0 0 28px;max-width:46em;font-size:17px}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:22px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.card h3{margin:0 0 6px;font-size:19px}
.card p{margin:0;color:var(--mu)}
.num{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--ac);color:#fff;align-items:center;justify-content:center;font-weight:800;margin-bottom:10px}
.ico{font-size:28px;margin-bottom:6px}
/* galería */
.galeria{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.galeria figure{margin:0}.galeria figcaption{color:var(--mu);font-size:14px;margin-top:8px}
/* planes */
.planes{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}
.plan{display:flex;flex-direction:column;gap:10px;position:relative}
.plan.dest{border:2px solid var(--ac)}
.plan .cinta{position:absolute;top:-12px;right:16px;background:var(--ac);color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:99px;letter-spacing:.5px}
.plan h3{font-size:22px}
.precio{font-size:34px;font-weight:800;line-height:1}
.precio small{font-size:15px;font-weight:600;color:var(--mu)}
.plan ul{margin:6px 0 0;padding-left:20px;color:var(--mu);flex:1}
.plan ul li{margin:5px 0}
.plan .btn{margin-top:8px}
table.comp{width:100%;border-collapse:collapse;background:var(--card);border-radius:14px;overflow:hidden;border:1px solid var(--bd);font-size:15px}
table.comp th,table.comp td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--bd);vertical-align:top}
table.comp th{background:var(--bg2);font-size:14px}
table.comp td:not(:first-child),table.comp th:not(:first-child){text-align:center}
.tabla-scroll{overflow-x:auto}
/* preguntas */
details.faq{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:4px 18px;margin:10px 0}
details.faq summary{cursor:pointer;font-weight:700;padding:12px 0}
details.faq p{margin:0 0 14px;color:var(--mu)}
/* texto legal */
.texto{max-width:46rem}
.texto h1{font-size:clamp(30px,4vw,40px);letter-spacing:-.5px}
.texto h2{margin-top:32px;font-size:22px}
.texto p,.texto li{color:var(--fg)}
.aviso{border:1px dashed var(--bd);border-radius:12px;padding:12px 16px;color:var(--mu);font-size:14px}
.pendiente{background:#ffe08a;color:#3b2a00;padding:0 4px;border-radius:4px}
/* pie */
footer.sitio{border-top:1px solid var(--bd);background:var(--bg2);padding:34px 0;margin-top:30px;color:var(--mu);font-size:14px}
footer.sitio .wrap{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer.sitio a{color:var(--fg);text-decoration:none}footer.sitio a:hover{text-decoration:underline}
footer.sitio h4{margin:0 0 8px;color:var(--fg);font-size:14px}
footer.sitio ul{list-style:none;padding:0;margin:0}footer.sitio li{margin:5px 0}
.fin{grid-column:1/-1;border-top:1px solid var(--bd);padding-top:16px;font-size:13px}
/* móvil */
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero{padding:40px 0 24px}nav.menu{margin-left:0;width:100%}section.bloque{padding:40px 0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* página de compra */
#lista .card{display:flex;flex-direction:column;gap:10px}
#lista .card h2{margin:0;font-size:20px}
.det{color:var(--mu);font-size:14px;flex:1}
input[type=text],#lista input{width:100%;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:transparent;color:inherit;font:inherit}
#gracias{display:none;background:var(--card);border:2px solid var(--ok);border-radius:16px;padding:22px;margin-top:20px}
.clave{font-family:Consolas,monospace;font-size:22px;letter-spacing:1px;padding:12px 14px;border-radius:10px;background:var(--bg);display:flex;gap:10px;align-items:center;justify-content:space-between;margin:10px 0 4px;flex-wrap:wrap}
.mu{color:var(--mu);font-size:14px}.err{color:#e5484d}
button.btn:disabled{opacity:.5;cursor:default}

/* ---------- Movimiento al hacer scroll (ligero) ----------
   Cada elemento .rev se desvanece al entrar en pantalla y al salir por arriba o por abajo. No está ligado al desplazamiento:
   un IntersectionObserver solo alterna la clase .rev-on cuando el elemento cruza el borde, y la transición (opacidad + un pequeño
   desplazamiento, ambas en la tarjeta gráfica) corre una vez. Durante el scroll no se recalcula nada por fotograma.
   Se desactiva con «reducir movimiento». */
@media (prefers-reduced-motion:no-preference){
  .js-rev .rev{opacity:0;transform:translate3d(0,26px,0);transition:opacity .45s ease-out,transform .45s cubic-bezier(.22,1,.36,1)}
  .js-rev .rev.rev-on{opacity:1;transform:none}
  .js-rev .rev.rev-sale-arriba{transform:translate3d(0,-18px,0)}
  .card{transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .2s}
  .card:hover{transform:translateY(-3px);border-color:var(--ac2)}
  .btn{transition:transform .12s ease-out,filter .12s}
  .btn:active{transform:scale(.97)}
}

/* ---------- Visor de capturas (clic para ampliar y hacer zoom) ---------- */
img[data-grande]{cursor:zoom-in}
.visor{position:fixed;inset:0;z-index:100;background:rgba(8,4,22,.98);display:none;flex-direction:column;touch-action:none;user-select:none}
.visor.abierto{display:flex}
.visor-barra{display:flex;align-items:center;gap:8px;padding:10px 14px;flex-wrap:wrap;color:#f2edff;font-size:14px}
.visor-barra .tit{flex:1;min-width:140px;font-weight:600}
.visor-barra button{background:#2a1c5e;color:#f2edff;border:1px solid #4a3a85;border-radius:10px;min-width:40px;height:40px;padding:0 12px;font:inherit;font-weight:700;cursor:pointer}
.visor-barra button:hover{background:#3a2a7c}
.visor-barra button:focus-visible,.visor-nav:focus-visible{outline:3px solid #ff5a4f;outline-offset:2px}
.visor-zona{position:relative;flex:1;overflow:hidden;cursor:grab}
.visor-zona.arrastrando{cursor:grabbing}
.visor-zona img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;will-change:transform;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.6);-webkit-user-drag:none}
.visor-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;border-radius:12px;border:1px solid #4a3a85;background:rgba(42,28,94,.85);color:#fff;font-size:26px;cursor:pointer;z-index:2}
.visor-nav.ant{left:12px}.visor-nav.sig{right:12px}
.visor-ayuda{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(42,28,94,.9);color:#d9d0ff;padding:6px 14px;border-radius:99px;font-size:13px;pointer-events:none;transition:opacity .6s}
@media (max-width:600px){.visor-nav{width:38px;height:52px}.visor-ayuda{display:none}}