/* ============================================================
   AION — paleta y estilos propios. Mundo aparte, ligado a WZN:
   mismo negro de base, pero con energía violeta/cian en vez del
   cian/dorado de siempre — para que se sienta "otro lugar" sin
   perder la conexión con la red.
   ============================================================ */
:root {
  --aion-bg:        #06040a;
  --aion-bg-soft:   #0e0a17;
  --aion-bg-panel:  #130f1e;
  --aion-line:      #201a2e;
  --aion-text:      #f1eef8;
  --aion-text-dim:  #9b93ac;
  --aion-violeta:   #b34aff;
  --aion-violeta-dim: #3d1f5c;
  --aion-cian:      #3ee8d0;
  --aion-cian-dim:  #17453e;
  --aion-oro:       #ffb84c;
}

.aion-page { background:var(--aion-bg); color:var(--aion-text); font-family:'Inter',sans-serif; overflow-x:hidden; }
.aion-page h1, .aion-page h2, .aion-page h3 { font-family:'Orbitron',sans-serif; }

/* ---- Header propio, distinto al navbar de WZN pero con vuelta a casa ---- */
.aion-header { display:flex; align-items:center; justify-content:space-between; padding:20px 40px; position:relative; z-index:10; }
.aion-volver { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--aion-text-dim); text-decoration:none; padding:8px 14px; border:1px solid var(--aion-line); border-radius:20px; transition:border-color .2s, color .2s; }
.aion-volver:hover { border-color:var(--aion-violeta); color:var(--aion-text); }
.aion-wordmark-chica { font-family:'Orbitron',sans-serif; font-weight:900; font-size:18px; letter-spacing:3px; background:linear-gradient(90deg, var(--aion-violeta), var(--aion-cian)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- HERO: la firma de Aion ---- */
.aion-hero { position:relative; min-height:92vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 20px; overflow:hidden; }
.aion-hero-firma { position:relative; width:min(560px, 80vw); aspect-ratio:1; margin-bottom:8px; }
.aion-hero-firma svg { width:100%; height:100%; }
.aion-hero-wordmark { font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(56px, 12vw, 128px); letter-spacing:10px; line-height:1; position:relative; z-index:2; background:linear-gradient(180deg, #fff 0%, var(--aion-cian) 55%, var(--aion-violeta) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 40px rgba(179,74,255,.5)); margin-top:-90px; }
.aion-hero-tagline { font-size:15px; color:var(--aion-text-dim); max-width:520px; margin:18px auto 36px; line-height:1.6; letter-spacing:.3px; }
.aion-hero-ctas { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.aion-btn { padding:14px 28px; border-radius:10px; font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .15s, box-shadow .15s; border:none; }
.aion-btn:hover { transform:translateY(-2px); }
.aion-btn-primaria { background:linear-gradient(90deg, var(--aion-violeta), #7c2fd6); color:#fff; box-shadow:0 10px 30px rgba(179,74,255,.35); }
.aion-btn-primaria:hover { box-shadow:0 14px 36px rgba(179,74,255,.5); }
.aion-btn-secundaria { background:transparent; border:1.5px solid var(--aion-line); color:var(--aion-text); }
.aion-btn-secundaria:hover { border-color:var(--aion-cian); }

/* ---- Sección "muy pronto" para en vivo ---- */
.aion-seccion { max-width:1200px; margin:0 auto; padding:70px 24px; }
.aion-seccion-titulo { font-size:13px; font-weight:800; letter-spacing:3px; color:var(--aion-violeta); text-transform:uppercase; margin-bottom:10px; }
.aion-seccion h2 { font-size:26px; margin-bottom:14px; }
.aion-seccion-sub { color:var(--aion-text-dim); font-size:14px; max-width:640px; margin-bottom:40px; line-height:1.6; }

.aion-proximamente-box { border:1px solid var(--aion-line); border-radius:16px; padding:60px 40px; text-align:center; background:radial-gradient(ellipse at top, rgba(179,74,255,.06), transparent 60%); }
.aion-proximamente-box .icono { font-size:38px; margin-bottom:14px; }
.aion-proximamente-box h3 { font-size:20px; margin-bottom:10px; }
.aion-proximamente-box p { color:var(--aion-text-dim); font-size:13.5px; max-width:440px; margin:0 auto 26px; line-height:1.6; }

/* ---- Las 4 clases de Aion, como categorías de contenido ---- */
.aion-clases { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.aion-clase-card { background:var(--aion-bg-panel); border:1px solid var(--aion-line); border-radius:14px; padding:26px 22px; position:relative; overflow:hidden; transition:border-color .2s, transform .2s; }
.aion-clase-card:hover { transform:translateY(-4px); }
.aion-clase-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); }
.aion-clase-num { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--aion-text-dim); margin-bottom:14px; }
.aion-clase-icono { font-size:26px; margin-bottom:12px; }
.aion-clase-card h3 { font-size:15px; margin-bottom:8px; }
.aion-clase-card p { font-size:12.5px; color:var(--aion-text-dim); line-height:1.55; }

/* ---- Formulario de streamers ---- */
.aion-form-box { display:flex; gap:12px; max-width:480px; flex-wrap:wrap; }
.aion-form-box input { flex:1; min-width:220px; padding:13px 16px; border-radius:10px; border:1px solid var(--aion-line); background:var(--aion-bg-panel); color:var(--aion-text); font-size:14px; }
.aion-form-box input:focus { outline:none; border-color:var(--aion-violeta); }
.aion-form-msg { font-size:12.5px; margin-top:12px; }

@media (max-width: 760px) {
  .aion-clases { grid-template-columns:1fr 1fr; }
  .aion-header { padding:16px 20px; }
}
@media (max-width: 480px) {
  .aion-clases { grid-template-columns:1fr; }
}

/* ---- Animación de la firma de Aion ---- */
#aionPetalos { animation:aionGira 26s linear infinite; transform-box:fill-box; transform-origin:center; }
@keyframes aionGira { to { transform:rotate(360deg); } }
.aion-petalo { animation:aionPulsoPetalo 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.aion-petalo.p1, .aion-petalo.p5 { animation-delay:0s; }
.aion-petalo.p2, .aion-petalo.p6 { animation-delay:.5s; }
.aion-petalo.p3, .aion-petalo.p7 { animation-delay:1s; }
.aion-petalo.p4, .aion-petalo.p8 { animation-delay:1.5s; }
@keyframes aionPulsoPetalo { 0%, 100% { transform:scaleY(1); } 50% { transform:scaleY(1.12); } }
.aion-nucleo { animation:aionRespira 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes aionRespira { 0%, 100% { transform:scale(1); opacity:.9; } 50% { transform:scale(1.08); opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  #aionPetalos, .aion-petalo, .aion-nucleo { animation:none !important; }
}

/* ============================================================
   Animación de entrada a AION — franjas diagonales en violeta/
   cian que barren la pantalla, con la firma de pétalos (la
   misma del hero, no un logo nuevo) apareciendo en el medio.
   Se muestra una vez al entrar al índice de AION.
   ============================================================ */
.aion-intro { position:fixed; inset:0; z-index:999; pointer-events:none; overflow:hidden; background:var(--aion-bg); }
/* Arrancan pausadas — JS las suelta recién cuando confirma que la
   fuente Orbitron ya está lista, para que el texto "AION" nunca
   llegue a mostrarse con la tipografía de reserva del sistema. */
.aion-intro-franja, .aion-intro-logo { animation-play-state:paused; }
.aion-intro.lista .aion-intro-franja, .aion-intro.lista .aion-intro-logo { animation-play-state:running; }
.aion-intro.terminada { display:none; }
.aion-intro-franja { position:absolute; top:-20%; height:140%; width:38%; transform:translateX(-160%) skewX(-18deg); opacity:0; will-change:transform, opacity; }
.aion-intro-franja.f1 { left:-5%; background:linear-gradient(180deg, var(--aion-violeta), #7c2fd6); animation:aionFranjaEntra 2.4s cubic-bezier(.65,0,.35,1) forwards; animation-delay:0s; }
.aion-intro-franja.f2 { left:24%; background:linear-gradient(180deg, var(--aion-cian), var(--aion-cian-dim)); animation:aionFranjaEntra 2.4s cubic-bezier(.65,0,.35,1) forwards; animation-delay:.08s; }
.aion-intro-franja.f3 { left:53%; background:linear-gradient(180deg, var(--aion-oro), var(--aion-violeta)); animation:aionFranjaEntra 2.4s cubic-bezier(.65,0,.35,1) forwards; animation-delay:.16s; }
@keyframes aionFranjaEntra {
  0%   { transform:translateX(-160%) skewX(-18deg); opacity:0; }
  22%  { transform:translateX(0%) skewX(-18deg); opacity:1; }
  55%  { transform:translateX(0%) skewX(-18deg); opacity:1; }
  100% { transform:translateX(220%) skewX(-18deg); opacity:1; }
}
.aion-intro-logo { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; opacity:0; transform:scale(.7); animation:aionLogoIntroAparece 2.4s cubic-bezier(.34,1.56,.64,1) forwards; will-change:transform, opacity; }
.aion-intro-logo svg { width:min(180px, 32vw); height:min(180px, 32vw); }
.aion-intro-petalo { /* quietos, sin animación infinita — el único movimiento acá es el fade/scale del contenedor padre */ }
.aion-intro-wordmark { width:min(280px, 55vw); height:auto; }
@keyframes aionLogoIntroAparece {
  0%   { opacity:0; transform:scale(.6); }
  30%  { opacity:1; transform:scale(1); }
  62%  { opacity:1; transform:scale(1); }
  85%  { opacity:0; transform:scale(1.15); }
  100% { opacity:0; transform:scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .aion-intro { display:none; }
}