:root{
  --bg:#0b0f1a; --panel:#0f1525cc; --text:#E6EAF2; --muted:#C7D2E1;
  --primary:#6AA2FF; --primary-2:#00E5FF; --brand-grad:linear-gradient(120deg,var(--primary),var(--primary-2));
  --ring:#2A3657; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
  --retro:#00fff0; --retro2:#00bcd4; --retroDark:#06202a;

  /* gutter base y mínimo duro para celus + notch */
  --gutterX: clamp(18px, 6.5vw, 56px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.45;position:relative;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* ✅ Contenedor con safe-areas y mínimo fijo */
.container{
  max-width:1100px;
  margin-inline:auto;
  padding-left:max(var(--gutterX), 16px, env(safe-area-inset-left));
  padding-right:max(var(--gutterX), 16px, env(safe-area-inset-right));
}

/* Background */
.bg-mesh{position:fixed;inset:0;z-index:-3;overflow:hidden;
  background:
    radial-gradient(1200px 600px at 10% 10%, #1b2442 0%, transparent 55%),
    radial-gradient(900px 500px at 80% 20%, #0b5fff33 0%, transparent 60%),
    radial-gradient(1000px 600px at 20% 80%, #00d3ff26 0%, transparent 55%),
    radial-gradient(800px 600px at 90% 70%, #6aa2ff22 0%, transparent 50%),
    #0b0f1a;
}
.pixel-stars{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:
  radial-gradient(1px 1px at 10% 20%, #9dd7ff 50%, transparent 51%),
  radial-gradient(1px 1px at 30% 80%, #9dd7ff 50%, transparent 51%),
  radial-gradient(1px 1px at 70% 30%, #9dd7ff 50%, transparent 51%),
  radial-gradient(1px 1px at 85% 65%, #9dd7ff 50%, transparent 51%);
  opacity:.6;animation: twinkle 6s infinite alternate ease-in-out}
@keyframes twinkle{to{opacity:.2}}
.grid-floor{position:fixed;left:0;right:0;bottom:-10vh;height:40vh;z-index:-3;
  background:
    linear-gradient(to top, rgba(0,0,0,.2), transparent),
    repeating-linear-gradient(to right, rgba(0,229,255,.12) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to top, rgba(0,229,255,.12) 0 1px, transparent 1px 60px);
  transform: perspective(800px) rotateX(65deg) translateY(10vh);
  filter: blur(.2px);border-top:1px solid rgba(0,229,255,.25)
}
.mesh-blobs{position:fixed;inset:calc(-1 * max(10vmax, 60px));z-index:-1;filter:blur(60px);opacity:.5;mix-blend:screen;pointer-events:none}
.blob{position:absolute;border-radius:50%;background:conic-gradient(from 180deg, #6AA2FF, #00E5FF, #6AA2FF);animation:float 16s infinite alternate ease-in-out}
.blob.b1{width:45vmax;height:45vmax;left:-10vmax;top:-5vmax}
.blob.b2{width:40vmax;height:40vmax;right:-8vmax;top:10vmax;animation-duration:18s}
.blob.b3{width:35vmax;height:35vmax;left:30vmax;bottom:-8vmax;animation-duration:20s}
@keyframes float{to{transform:translate3d(3vmax,-2vmax,0) rotate(20deg)}}

/* Navbar */
.navbar{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(10px);padding-top:env(safe-area-inset-top)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:34px;height:34px;border-radius:12px;background:url("/assets/logo.png") center/contain no-repeat, #0f1525;border:1px solid #1a2235;box-shadow:0 6px 22px rgba(43,138,255,.28)}
.brand b{font-family:"Plus Jakarta Sans",Inter,sans-serif;letter-spacing:.2px}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--muted);font-weight:600;font-size:14px;opacity:.9}
.nav a:hover{color:#fff}
.cta{padding:10px 14px;border-radius:12px;background:var(--brand-grad);color:#000!important;font-weight:800;box-shadow:0 10px 24px rgba(0,229,255,.25)}
.scrolled{box-shadow:0 12px 30px rgba(0,0,0,.25);border-bottom:1px solid #1a2235}
.hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid #1a2235;background:#0f1525;color:#cfe3ff}
.hamburger svg{width:22px;height:22px}

/* Mobile panel */
.mobile-panel{position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:auto 1fr;transform:translateY(-100%);
  background:rgba(7,11,20,.6);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:transform .3s ease, opacity .3s ease}
.mobile-panel.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-sheet{
  margin:16px auto;
  padding:20px;
  border-radius:20px;
  max-width:640px;
  width:calc(100% - max(32px, 2*var(--gutterX), env(safe-area-inset-left) + env(safe-area-inset-right)));
  background:linear-gradient(180deg,#0f1525f2,#0f1525e6);border:1px solid #1e2846;box-shadow:var(--shadow)
}
.mobile-menu{display:flex;flex-direction:column;gap:14px}
.mobile-menu a{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;border:1px solid #1f2a48;background:#121a31;color:#d5def1;font-weight:700}

/* Hero & common UI */
.hero{padding-block:92px 26px}
.crumbs{font-size:13px;color:#9fb4ff}
.crumbs a{color:#9fb4ff}
.pill{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border:1px solid var(--ring);border-radius:999px;color:var(--muted);background:#0f152580}
.spark{width:10px;height:10px;border-radius:50%;background:var(--brand-grad);box-shadow:0 0 0 6px rgba(0,229,255,.08)}
.title{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;line-height:1.04;font-size:clamp(32px,6vw,56px);letter-spacing:-.02em;margin:16px 0 10px}
.title .grad{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:840px;color:#C7D2E1;font-size:clamp(16px,2.5vw,18px);line-height:1.7}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid var(--ring);background:#0f1525a0;color:#EAF2FF;font-weight:700}
.btn:hover{border-color:#2c3b61}
.btn.primary{background:var(--brand-grad);color:#06202a;border:none}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #1e2846;border-radius:12px;background:#0f1525a0;font-weight:700;font-size:12px}

/* Sections & grids */
.section{padding-block:48px}
.section h2{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;font-size:clamp(22px,3.2vw,26px);letter-spacing:.2px;margin:0 0 16px}
.muted{color:var(--muted)}
.grid{display:grid;gap:18px}
.two{grid-template-columns:1.1fr .9fr}
.two-equal{grid-template-columns:1fr 1fr}

/* Card */
.card{position:relative;overflow:hidden;border-radius:18px;padding:20px;background:linear-gradient(180deg, #0f1525cc, #0f1525a6);border:1px solid #212a42;box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;inset:-2px;border-radius:20px;padding:2px;background:linear-gradient(140deg,rgba(0,229,255,.35),rgba(106,162,255,.35),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.column{display:flex;flex-direction:column;gap:12px}

/* Meta & features */
.meta{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.pill.small{padding:6px 10px;font-weight:700}
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.feat.one{grid-template-columns:1fr}
.feat.two{grid-template-columns:1fr 1fr}
.g-12{gap:12px}

/* Timeline */
.timeline{display:grid;gap:16px}
.tl-item{position:relative;padding-left:22px}
.tl-item::before{content:"";position:absolute;left:8px;top:8px;width:6px;height:6px;border-radius:999px;background:var(--primary-2);box-shadow:0 0 0 6px rgba(0,229,255,.08)}

/* Schedule */
.schedule{display:grid;gap:14px}
.slot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;border:1px solid #1e2846;border-radius:14px;background:#111a30;flex-wrap:wrap}
.slot strong{font-weight:800}

/* Instructor */
.profile{display:flex;gap:14px;align-items:center}
.avatar{width:64px;height:64px;border-radius:16px;border:1px solid #1e2846;object-fit:cover;display:block;background:#0f1525}

/* FAQ */
details{border:1px solid #1e2846;border-radius:14px;padding:14px;background:#0f1525}
summary{cursor:pointer;font-weight:800}

/* Countdown */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:stretch;margin-top:16px}
.cd-card{min-width:72px;background:#0f1525;border:1px solid #1e2846;border-radius:14px;text-align:center;padding:12px}
.cd-num{font-weight:900;font-size:28px;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cd-lab{font-size:12px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}

/* XP bar */
.xp-wrap{margin-top:12px}
.xp-label{display:flex;justify-content:space-between;font-weight:800;font-size:12px;color:var(--muted)}
.xp-bar{height:14px;border-radius:999px;background:#0d162b;border:1px solid #1e2846;overflow:hidden}
.xp-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--retro),var(--primary));box-shadow:0 0 16px rgba(0,229,255,.35) inset}

/* Retro CTA */
.insert-coin{display:inline-block;padding:16px 20px;border-radius:10px;border:2px solid var(--retro);background:linear-gradient(180deg,#06202a,#051520);font-weight:900;letter-spacing:1px;box-shadow:0 0 18px rgba(0,229,255,.25), inset 0 0 12px rgba(0,229,255,.12);text-transform:uppercase}
.insert-coin:hover{box-shadow:0 0 22px rgba(0,229,255,.35), inset 0 0 16px rgba(0,229,255,.18)}
.blink{animation:blink 1.1s steps(2,end) infinite}
@keyframes blink{50%{opacity:.45}}

/* Games gallery */
.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.game-card{position:relative;border-radius:14px;overflow:hidden;background:#0f1525;border:1px solid #1e2846;box-shadow:var(--shadow);transition:transform .18s ease, border-color .18s ease}
.game-card:hover{transform:translateY(-2px);border-color:#2c3b61}
.game-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;filter:saturate(1.05)}
.game-cap{position:absolute;left:8px;right:8px;bottom:8px;padding:8px 10px;border-radius:10px;background:linear-gradient(180deg,rgba(6,32,42,.0),rgba(6,32,42,.82));display:flex;justify-content:space-between;align-items:center;gap:8px}
.game-title{font-weight:900;letter-spacing:.2px}
.game-play{font-weight:800;font-size:12px;color:#9fdcff}

/* Footer */
footer{padding:56px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted)}

/* Utilities */
.mt-6{margin-top:6px}
.mt-8{margin-top:8px}
.mt-10{margin-top:10px}
.mt-14{margin-top:14px}
.mb-6{margin-bottom:6px}
.mb-12{margin-bottom:12px}
.small{font-size:13px}
.center{text-align:center}
.list{margin:8px 0 0 18px;line-height:1.7}

/* Reveal anim */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .4s ease, transform .4s ease}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media (max-width: 960px){
  .hero{ padding-block-start: calc(96px + env(safe-area-inset-top)); padding-block-end: 28px; }
  .chip{display:none}
  .hero-cta .btn{width:100%; padding:14px 16px; border-radius:12px}
  .countdown{grid-template-columns:1fr 1fr; gap:12px}
  .cd-card{padding:12px}
  .section{padding-block:60px}
  .card{padding: clamp(20px, 5.2vw, 26px)}
  .grid.two, .grid.two-equal{grid-template-columns:1fr;gap:16px}
  .feat{grid-template-columns:1fr}
  .schedule .btn{width:100%}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  #precio .card, #precio .card .card{ overflow:visible }
  #precio .card .feat.two{ grid-template-columns:1fr }
}
@media (max-width: 920px){
  .hamburger{display:flex}
  .nav{display:none}
}
@media (max-width: 700px){
  .feat{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .title{ font-size: clamp(26px, 8.4vw, 36px) }
  .lead{ font-size: 15px; line-height: 1.78 }
  .btn{ padding:12px 14px }
  .cd-num{ font-size: 24px }
  .cd-lab{ font-size: 11px }
  .slot{ padding:14px }
  .insert-coin{ width:100% }
  .game-grid{grid-template-columns:1fr}
}
@media (max-width: 420px){
  .lead{ font-size: 15.5px }
  #precio .card .card{ padding: clamp(20px, 6.5vw, 28px) }
}
@media (max-width: 360px){
  .card{ padding: clamp(18px, 6vw, 24px) }
}

/* Money gradient */
.money-lg{font-weight:900;font-size:28px;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Focus */
:focus-visible{outline:2px solid #88c3ff;outline-offset:2px;border-radius:12px}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .mesh-blobs{animation:none}
  .reveal{transition:none}
}

/* FAQ 1-col en todas las resoluciones */
#faq .grid, .faq-grid { grid-template-columns: 1fr !important; gap: 14px; }