/* =========================================================
   TOKENS / RESET
   ========================================================= */
:root{
  --nav-h:64px;
  --wrap-max:1200px;
  --pad-x: clamp(16px, 4vw, 28px);
  --bg-1:#0b0720; --bg-2:#130b3a;
  --violet:#6a5cff; --violet-2:#8a7aff;
  --mint:#1fd36b; --mint-2:#0aa84e;
  --text:#fff; --muted:#c9c6ff;
  --border:rgba(255,255,255,.18);
  --glass:rgba(255,255,255,.06); --glass2:rgba(255,255,255,.10);
  --shadow:0 14px 44px rgba(0,0,0,.45);
  --grid-gap:64px; --grid-line:rgba(255,255,255,.10); --grid-bold:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial; color:var(--text);
  background:
    radial-gradient(1000px 520px at 80% 15%, rgba(138,122,255,.16), transparent 60%),
    radial-gradient(900px 520px at 15% 40%, rgba(106,92,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1) 55%);
  overflow-x:hidden;
}

/* =========================================================
   FONDO DECORATIVO
   ========================================================= */
.bg-grid,.bg-video{position:fixed; inset:0; z-index:0; pointer-events:none}
.bg-grid::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px var(--grid-gap)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--grid-gap)),
    repeating-linear-gradient(to right, transparent 0 calc(var(--grid-gap)*4 - 1px), var(--grid-bold) calc(var(--grid-gap)*4 - 1px) calc(var(--grid-gap)*4)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--grid-gap)*4 - 1px), var(--grid-bold) calc(var(--grid-gap)*4 - 1px) calc(var(--grid-gap)*4));
  opacity:.85; mix-blend-mode:screen;
}
.bg-video video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:blur(26px) saturate(120%) brightness(85%);
  transform:scale(1.06); opacity:.32;
}

/* =========================================================
   NAVBAR
   ========================================================= */
.container{
  position:relative; 
  z-index:1; 
  min-height:100%; 
  display:flex; 
  flex-direction:column;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.navbar{
  height:var(--nav-h); position:sticky; top:0; 
  z-index:10000; /* 🔧 FIX menú: navbar arriba de todo */
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px var(--pad-x);
  background:linear-gradient(to bottom, rgba(11,7,32,.9), rgba(11,7,32,0));
  backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text); flex:0 0 auto}
.brand__icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#ffd86b,#ff7b7b);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.brand__text{font-weight:900}.brand__dot{color:var(--violet)}

@media (max-width:900px){
  /* 🔧 FIX: deja espacio al icono hamburguesa */
  .nav-right .btn:not(.menu-toggle){ display:none; }
}

.nav{display:flex;gap:12px; flex:0 1 auto}
.nav a{
  color:var(--muted);text-decoration:none;font-weight:800;font-size:14px;
  padding:8px 10px;border-radius:12px;transition:.2s;border:1px solid transparent;
  white-space:nowrap; flex:0 0 auto;
}
.nav a:hover,.nav a:focus-visible{outline:none;color:#fff;background:var(--glass)}
.nav a.active{color:#fff;background:var(--glass2);border-color:var(--border)}

.nav-right{display:flex;gap:10px; flex:0 0 auto}
.btn{
  --px:16px;--py:10px;
  display:inline-flex;align-items:center;gap:8px;padding:var(--py) var(--px);
  border-radius:999px;border:1px solid transparent;color:#fff;background:var(--glass);
  cursor:pointer;font-weight:900;letter-spacing:.3px;box-shadow:var(--shadow);
  transition:transform .1s,background .2s,border-color .2s;
  white-space:nowrap; flex:0 0 auto;
  font-size: clamp(12px, 3vw, 14px);
}
.btn:active{transform:translateY(1px)} .btn.ghost{background:transparent;border-color:var(--border)}
.btn.primary{background:linear-gradient(135deg,var(--violet),#7b73ff)} .btn.secondary{background:rgba(255,255,255,.08);border:1px solid var(--border)}

/* Menú toggle */
.menu-toggle{
  display:none; 
  align-items:center; 
  justify-content:center; 
  width:44px; 
  height:44px; 
  border-radius:12px; 
  border:1px solid var(--border); 
  background:var(--glass); 
  color:#fff;
  font-size: 20px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 10001; /* 🔧 FIX: botón por encima */
}
.menu-toggle:hover { background: var(--glass2); }

@media (max-width:1200px){ 
  .nav{display:none} 
  .menu-toggle{display:flex} 
}

/* Menú móvil */
.mobile-menu{
  display:none; 
  position:fixed; 
  inset:var(--nav-h) 0 0 0; 
  z-index:9999;
  background:rgba(15,12,36,.98); 
  backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  padding:12px var(--pad-x);
  /* 🔧 FIX scrolls: sin scroll propio cuando está cerrado */
  overflow: hidden; 
  transform: translateY(-100%);
  transition: transform 0.3s ease-out;
}
.mobile-menu.open{
  display:block;
  transform: translateY(0);
  /* 🔧 FIX scrolls: solo cuando está abierto permitimos scroll interno */
  overflow-y: auto;
}

.mobile-menu a{
  display:block; 
  color:#fff; 
  text-decoration:none; 
  font-weight:800; 
  padding:16px 0; 
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size: 16px;
  transition: background 0.2s;
}
.mobile-menu a:hover { background: rgba(255, 255, 255, 0.1); }
.mobile-menu a:last-child{ border-bottom:none; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding: max(10px, env(safe-area-inset-top)) var(--pad-x) clamp(28px, 6vw, 48px); }
.hero-grid{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(16px, 2.4vw, 28px);
  max-width: var(--wrap-max);
  margin-inline: auto;
  align-items:center;
  min-height: 80svh;
}
.video-col{ order:1; display:flex; justify-content:flex-start; align-items:center }
.video-frame{
  width:min(38vw, 520px); aspect-ratio:9/16;
  border-radius:22px; overflow:hidden; background:rgba(0,0,0,.25);
  outline:1px solid rgba(255,255,255,.18);
  box-shadow:0 22px 60px rgba(0,0,0,.55), 0 0 0 10px rgba(255,255,255,.06) inset;
  position: relative; /* 🔊 AUDIO FIX: para posicionar el botón dentro */
}
.video-frame video{ width:100%; height:100%; object-fit:contain }

/* 🔊 AUDIO FIX: botón flotante para activar/desactivar sonido */
.audio-toggle{
  position:absolute;
  bottom:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
  color:#fff;
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
  z-index:2;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  user-select:none;
  transition:opacity .2s ease, transform .1s ease, background .2s ease;
}
.audio-toggle:active{ transform: translateY(1px); }
.audio-toggle[aria-pressed="true"]{
  background:linear-gradient(135deg, var(--mint-2), var(--mint));
  color:#0a1b10;
  border-color: rgba(255,255,255,.24);
}
.audio-toggle .ico{ font-size:16px; line-height:1; }
.audio-toggle .txt{ font-size:12px; white-space:nowrap; }

/* Ocultar texto del botón en pantallas muy pequeñas */
@media (max-width:360px){
  .audio-toggle{ padding:8px 10px; bottom:10px; right:10px; }
  .audio-toggle .txt{ display:none; }
}

.hero-panel{
  order:2; background:rgba(12,8,32,.45); border:1px solid var(--border);
  border-radius:22px; padding:24px; backdrop-filter: blur(10px) saturate(120%);
  box-shadow: var(--shadow); display:flex; flex-direction:column; gap:16px;
  max-width: 100%;
  overflow: hidden;
}

/* Strip */
.strip{ display:flex; align-items:center; gap: 8px; background:rgba(255,255,255,.06);
  border:1px solid var(--border); border-radius:999px; padding:8px 12px; width:100%; flex-wrap: wrap; }
.pill{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); font-weight:900; letter-spacing:.6px;
  background:linear-gradient(135deg,var(--mint),var(--mint-2)); color:#eafff2; white-space: nowrap; }
.strip-text { display: inline; }
.btn.mini { --px:12px; --py:6px; font-size:12px; white-space: nowrap; }

.title{ margin:12px 0 2px; text-transform:uppercase; font-weight:900; line-height:.9;
  font-size: clamp(56px, 8.4vw, 108px); color:#fff; -webkit-text-stroke:1px rgba(255,255,255,.25);
  text-shadow:0 0 12px rgba(106,92,255,.40),0 0 32px rgba(106,92,255,.30),0 6px 24px rgba(0,0,0,.65);
  animation:titleGlow 4s ease-in-out infinite alternate; word-wrap: break-word; overflow-wrap: break-word; }
@keyframes titleGlow{0%{text-shadow:0 0 10px rgba(106,92,255,.35),0 0 26px rgba(106,92,255,.25),0 6px 24px rgba(0,0,0,.65)}100%{text-shadow:0 0 20px rgba(138,122,255,.55),0 0 44px rgba(138,122,255,.45),0 8px 30px rgba(0,0,0,.70)}}
.subtitle{ color:#c9c6ff; margin:0; font-size:clamp(16px,2vw,19px); max-width:62ch; word-wrap: break-word; }
.ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.btn.xl{ --px:22px; --py:14px; padding: clamp(10px, 2.5vw, 14px) clamp(16px, 4vw, 22px); }

.stats-wrap{ order:99; margin-bottom:6px; }
.stats-grid{ 
  display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:14px;
  transition: transform .5s ease; will-change: transform;
}
.card{
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:18px; padding:16px 16px 18px; box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:10px;
  max-width: 100%;
  overflow: hidden;
}
.card .media{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background:#0e0e1a; }
.card .media img, .card .media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.card h3{margin:0; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:14px}

/* Mobile hero */
@media (max-width:900px){
  :root{ --nav-h:56px }
  .hero{ padding: max(8px, env(safe-area-inset-top)) var(--pad-x) clamp(24px, 6vw, 36px); }
  .hero-grid{ grid-template-columns:1fr; gap:14px; max-width: 560px; margin-inline:auto; min-height:auto; }
  .video-col{ order:1; justify-content:center }
  .video-frame{ width:100%; max-width:520px; max-height:70svh; border-radius:18px }
  .hero-panel{ order:3; border-radius:18px; padding:16px }
  .title{font-size: clamp(34px, 11vw, 54px)}
  .subtitle{font-size: clamp(14px, 4vw, 16px)}
  .stats-wrap{ order:2; overflow:hidden; border-radius:18px; margin-bottom:12px }
  .stats-grid{ display:flex; gap:0 }
  .card{ width:100%; flex:0 0 100%; border-radius:18px; padding:16px 16px 20px }
  .diamond{display:none}
}

/* Ajustes strip */
@media (max-width: 768px) {
  .strip { justify-content: center; }
  .btn.mini { --px: 10px; --py: 5px; font-size: 11px; }
}
@media (max-width: 480px) {
  .strip-text { display: none; }
  .btn.mini { --px: 8px; --py: 4px; font-size: 10px; }
}

/* =========================================================
   CONTINUACIÓN / FOOTER
   ========================================================= */
.after{ padding: clamp(28px,6vw,56px) 0 clamp(64px, 12vw, 96px); background: transparent; }
.after .max { max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--pad-x); display:block; }
.after .section{ display:block; width:100%; }
@media (max-width:900px) {
  .after .max { max-width: 560px; padding-inline: var(--pad-x); }
}
.after .kicker{ color:#cbd0ff; letter-spacing:.18em; font-weight:800; text-transform:uppercase; font-size:12px }
.after .h2{ font-size: clamp(26px,4.6vw,46px); line-height:1.05; font-weight:900; text-align:center; margin: 12px 0 6px; word-wrap: break-word; overflow-wrap: break-word; }
.after .lead{ color:var(--muted); text-align:center; margin:0 0 18px; word-wrap: break-word; }
.after .banner{
  display:grid; gap: clamp(12px,2vw,18px);
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  background: linear-gradient(135deg, #2a1c64, #180f3e 60%, #120a30);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 20px; overflow:hidden; box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.after .banner.reverse{ grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); }
.after .banner .media{ position:relative; min-height: clamp(200px, 28vw, 340px) }
.after .banner .media img, .after .banner .media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.after .banner .body{ padding: clamp(16px, 3.2vw, 28px); display:flex; flex-direction:column; justify-content:center; gap:8px }
.after .banner .title{ font-size: clamp(24px, 3.8vw, 44px); font-weight:900; line-height:1.06; margin:0; text-transform:uppercase; }
.after .banner .title strong{ display:block }
@media (max-width:900px){
  .after .banner, .after .banner.reverse{ grid-template-columns: 1fr; }
  .after .banner .media{ min-height: clamp(180px, 45vw, 260px) }
}
.after .info-grid{ display:grid; gap: clamp(12px, 2vw, 18px); grid-template-columns: repeat(3, minmax(220px, 1fr)); }
@media (max-width:900px){ .after .info-grid{ grid-template-columns: 1fr; } }
.after .info-card{ display:flex; flex-direction:column; gap:10px; }
.after .info-card .head{ display:flex; align-items:center; gap:10px }
.after .info-card .emoji{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--glass); border:1px solid var(--border); font-size:18px; }
.after .info-card .actions{ margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; }
.after .big-cta{
  margin-top: clamp(24px,4vw,32px);
  background: radial-gradient(1200px 500px at 10% 20%, rgba(138,122,255,.25), transparent 60%),
              linear-gradient(135deg, #3a22b0, #2a177f 60%, #1b1156);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  padding: clamp(18px, 3.6vw, 28px);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  display:grid; gap: clamp(14px,2vw,18px);
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;
}
.after .big-cta .title{ font-size: clamp(26px, 4.6vw, 56px); line-height:1.04; margin:0 0 10px; text-transform:none; }
.after .big-cta .lead{ color:#ddd; margin:0 0 16px; }
.after .big-cta .media{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio: 4/3; background:#0e0e1a; }
.after .big-cta .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

.site-footer{
  position:relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background:
    radial-gradient(1200px 380px at 15% 0%, rgba(138,122,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(11,7,32,.10) 0%, rgba(11,7,32,.85) 30%, rgba(11,7,32,.95) 100%);
  padding: clamp(24px, 3vw, 36px) 0 calc(26px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 38px rgba(0,0,0,.45);
  border-top:1px solid var(--border);
  box-sizing: border-box;
  overflow: visible; 
}
.site-footer__inner{
  max-width: var(--wrap-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(14px, 2.6vw, 36px);
  align-items: flex-start;
}
.site-footer .brand-col, .site-footer .col { min-width: 0; max-width: 100%; overflow: hidden; }
.site-footer .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; font-weight:900; max-width: 100%; }
.site-footer .brand .brand__icon{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,#ffd86b,#ff7b7b); box-shadow:0 8px 18px rgba(0,0,0,.35); flex-shrink: 0; }
.site-footer h4{ margin:6px 0 10px; font-size:16px; font-weight:800; color:#fff; letter-spacing:.02em; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li a{
  display:inline-block; color:var(--muted); text-decoration:none; padding:8px 0;
  font-size: clamp(13px, 2.5vw, 14px); font-weight:700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  transition:color .2s, transform .12s;
}
.site-footer li a:hover, .site-footer li a:focus-visible{ color:#fff; outline:none; transform:translateX(2px) }
.footer-social{ display:flex; gap:12px; margin-top:12px; flex-wrap: wrap; }
.footer-social a{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--glass); border:1px solid var(--border);
  color:#fff; text-decoration:none; transition: transform .12s, background .2s, border-color .2s, box-shadow .2s; box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.footer-social a:hover{ background:var(--glass2); border-color:#ffffff30; transform:translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.45) }
.footer-social svg{ width:18px; height:18px }
.site-footer__bottom{
  width: 100%; margin-top: clamp(16px, 2.4vw, 22px); border-top:1px solid var(--border); color:var(--muted);
  font-size: clamp(12px, 3vw, 13px); font-weight:700; text-align: center; padding: 12px var(--pad-x) clamp(10px, 2.2vw, 14px);
}
@media (max-width: 768px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 20px; }
  .site-footer .brand-col { grid-column: span 2; text-align: center; }
  .footer-social { justify-content: center; }
  .site-footer li a { white-space: normal; }
}
@media (max-width: 480px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 16px; }
  .site-footer .brand-col { grid-column: span 1; }
  .site-footer .col { text-align: center; }
  .site-footer li a { white-space: normal; text-align: center; display: block; }
  .footer-social { margin: 0 auto 12px; flex-wrap: wrap; justify-content: center; }
}