@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Cinzel:wght@400;600;700&family=Rajdhani:wght@400;500;600;700&display=swap");

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-neon:        #a8ff7a;
  --color-neon-suave:  rgba(140, 255, 100, 0.65);
  --color-blanco-frio: #e6f4ec;
  --color-fondo:       #02060a;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--color-blanco-frio);
  font-family: "Rajdhani", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

kbd {
  font-family: inherit;
  border: 1px solid rgba(230, 244, 236, 0.2);
  border-radius: 3px;
  padding: 2px 6px;
  color: rgba(230, 244, 236, 0.7);
  margin-right: 8px;
}

button { background: none; border: none; color: inherit; cursor: pointer; font: inherit; }
ul { list-style: none; }

/* ===== Escenario principal ===== */
.escenario {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.pantalla {
  position: absolute;
  inset: 0;
  animation: ben-fade-in 1.1s ease-out both;
}
.pantalla.oculto { display: none; }

/* ===== Fondos ===== */
.fondo-menu {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform, opacity;
  transition: opacity 1.2s ease;
  animation: ben-drift 24s ease-in-out infinite;
}

/* Fondo de la pantalla intro */
.fondo-intro {
  background-image: url('imagenes-videos/galaxia.jpg');
  animation-duration: 22s;
}

/* Fondo del menú principal */
.fondo-menu-principal {
  background-image: url('imagenes-videos/omnitrix-index.jpg');
  animation-duration: 28s;
}

.niebla-inferior {
  pointer-events: none;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,8,4,0.95), rgba(0,8,4,0.55) 35%, transparent);
  animation: ben-fog 20s ease-in-out infinite alternate;
}

/* Niebla de la pantalla intro */
.niebla-intro {
  height: 55%;
  animation-duration: 18s;
}

/* Niebla del menú principal */
.niebla-menu {
  animation-duration: 22s;
}

.rayo-superior {
  pointer-events: none;
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 8%, rgba(170,255,140,0.35), transparent 55%);
  opacity: 0.4;
}

/* ===== Capas de efecto ===== */
.capa-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 50;
}
.escaneo {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.3;
}
.ruido {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
}
.viñeta {
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.95) 100%);
}

/* ===== Intro ===== */
.contenido-intro {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.aviso-intro {
  margin-top: 48px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  color: rgba(230,244,236,0.8);
  animation: ben-parpadeo 2.2s ease-in-out infinite;
}
.pie-intro, .pie-menu {
  position: absolute;
  bottom: 24px; left: 0; right: 0;
  text-align: center;
  font-family: "Rajdhani", sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: rgba(230,244,236,0.4);
  z-index: 10;
}

/* ===== Logo Ben 10 ===== */
.logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: ben-rise 1.2s ease-out both;
}
.fila-logo {
  position: relative;
  display: flex;
  align-items: center;
  animation: ben-brillo-pulso 4s ease-in-out infinite;
}
.texto-logo {
  font-family: "Orbitron", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--color-blanco-frio);
  line-height: 1;
}
.logo-omni { position: relative; }
.logo-omni .brillo-omni {
  position: absolute; inset: 0; border-radius: 50%;
  animation: ben-omni-pulso 3s ease-in-out infinite;
}
.subtitulo-logo {
  margin-top: 16px;
  font-family: "Rajdhani", sans-serif;
  color: rgba(230,244,236,0.7);
}

/* Tamaño heroico */
.logo.heroico .fila-logo { gap: 24px; }
.logo.heroico .texto-logo {
  font-size: 9rem;
  -webkit-text-stroke: 2px var(--color-neon-suave);
}
.logo.heroico .logo-omni { width: 7.5rem; height: 7.5rem; }
.logo.heroico .subtitulo-logo { font-size: 1rem; letter-spacing: 0.7em; }

/* Tamaño pequeño */
.logo.pequeño .fila-logo { gap: 12px; }
.logo.pequeño .texto-logo {
  font-size: 2.5rem;
  -webkit-text-stroke: 1px rgba(140,255,100,0.5);
}
.logo.pequeño .logo-omni { width: 3rem; height: 3rem; }
.logo.pequeño .subtitulo-logo { font-size: 0.6rem; letter-spacing: 0.55em; }

/* ===== Menú principal ===== */
.contenido-menu {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 0;
}
.lista-menu {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: ben-rise 0.9s 0.2s ease-out both;
}
.item-menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 20px;
  font-family: "Cinzel", serif;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  outline: none;
  transition: all 0.5s ease;
}
.item-menu .etiqueta {
  color: rgba(230,244,236,0.7);
  transition: all 0.5s ease;
}
.item-menu:hover .etiqueta { color: var(--color-blanco-frio); }
.item-menu.activo .etiqueta {
  color: var(--color-neon);
  text-shadow:
    0 0 6px rgba(140,255,100,0.85),
    0 0 18px rgba(80,220,80,0.55),
    0 0 40px rgba(40,200,60,0.35);
  transform: scale(1.05);
}

/* Corchetes decorativos */
.corchete {
  pointer-events: none;
  position: absolute;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: all 0.5s ease;
}
.corchete.izquierda  { left: -8px;  transform: translateX(8px); }
.corchete.derecha    { right: -8px; transform: translateX(-8px); }
.item-menu.activo .corchete.izquierda  { opacity: 1; transform: translateX(-8px); }
.item-menu.activo .corchete.derecha    { opacity: 1; transform: translateX(8px); }
.corchete svg path {
  fill: none;
  stroke: var(--color-neon);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(140,255,100,0.9));
}

/* ===== Imágenes decorativas de omnitrix en los costados ===== */
.omni-deco {
  width: 32px;
  height: 32px;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 6px rgba(140,255,100,0.8))
    drop-shadow(0 0 14px rgba(80,220,80,0.5));
}
.item-menu.activo .omni-deco {
  opacity: 1;
}

/* ===== Ubicaciones ===== */
.capa-fondo-ubicacion {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.capa-fondo-ubicacion.activo {
  opacity: 1;
  animation: ben-drift 26s ease-in-out infinite;
}
.degradado-izquierda-ubicacion {
  pointer-events: none;
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 55%;
  background: linear-gradient(to right, rgba(0,8,4,0.92) 0%, rgba(0,8,4,0.75) 40%, rgba(0,8,4,0.2) 80%, transparent 100%);
}
.contenido-ubicacion { position: relative; z-index: 10; display: flex; height: 100%; }
.columna-izquierda-ubicacion {
  width: 44%; min-width: 380px;
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 64px; padding-right: 40px;
}
.cabecera-ubicacion {
  margin-bottom: 32px;
  display: flex; align-items: center; gap: 16px;
  animation: ben-rise 0.7s ease-out both;
}
.cabecera-ubicacion .omni-icono { width: 40px; height: 40px; }
.subtexto-pequeño {
  font-family: "Rajdhani", sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: rgba(230,244,236,0.5);
}
.titulo-grande {
  font-family: "Orbitron", sans-serif;
  font-size: 1.5rem;
  color: var(--color-blanco-frio);
}
.lista-ubicaciones { display: flex; flex-direction: column; gap: 8px; }
.item-ubicacion {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 6px 0;
  text-align: left; outline: none;
}
.item-ubicacion .guion {
  display: inline-block;
  height: 1px;
  width: 16px;
  background: rgba(230,244,236,0.3);
  transition: all 0.5s ease;
}
.item-ubicacion .nombre {
  font-family: "Cinzel", serif;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(230,244,236,0.65);
  transition: all 0.5s ease;
}
.item-ubicacion:hover .nombre { color: var(--color-blanco-frio); }
.item-ubicacion.activo .guion { width: 40px; background: var(--color-neon); }
.item-ubicacion.activo .nombre {
  color: var(--color-neon);
  transform: translateX(4px);
  text-shadow:
    0 0 6px rgba(140,255,100,0.85),
    0 0 18px rgba(80,220,80,0.55);
}
.item-ubicacion .etiqueta-seleccionada {
  margin-left: auto; padding-right: 8px;
  font-family: "Rajdhani", sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: rgba(168,255,122,0.8);
  display: none;
}
.item-ubicacion.activo .etiqueta-seleccionada { display: inline; }

.pistas-navegacion {
  margin-top: 40px;
  display: flex; align-items: center; gap: 24px;
  font-family: "Rajdhani", sans-serif;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: rgba(230,244,236,0.45);
}
.pistas-navegacion button { transition: color 0.3s ease; }
.pistas-navegacion button:hover { color: var(--color-neon); }

.columna-derecha-ubicacion {
  margin-left: auto;
  width: 40%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 64px;
}
.info-ubicacion {
  border-left: 1px solid rgba(168,255,122,0.4);
  padding-left: 24px;
  animation: ben-rise 0.7s ease-out both;
}
.info-ubicacion .subtexto-pequeño {
  color: rgba(168,255,122,0.8);
}
#conteo-tarjetas-nivel {
  margin-top: 12px;
  color: #7bff5a;
  font-family: monospace;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}
.conteo-tarjetas {
  font-size: 0.75rem;
  color: #7bff5a;
  margin-left: 8px;
  opacity: 0.8;
}
.nombre-ubicacion {
  font-family: "Orbitron", sans-serif;
  margin-top: 8px;
  font-size: 1.875rem;
  color: var(--color-blanco-frio);
}
.descripcion-ubicacion {
  margin-top: 12px;
  max-width: 24rem;
  font-family: "Rajdhani", sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(230,244,236,0.5);
}

/* ===== Keyframes de animación ===== */
@keyframes ben-fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes ben-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ben-parpadeo {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@keyframes ben-brillo-pulso {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(120,255,90,0.35)) drop-shadow(0 0 60px rgba(60,200,90,0.15)); }
  50%      { filter: drop-shadow(0 0 32px rgba(140,255,100,0.75)) drop-shadow(0 0 90px rgba(80,255,120,0.35)); }
}

@keyframes ben-omni-pulso {
  0%, 100% { box-shadow: 0 0 18px 2px rgba(120,255,90,0.35), inset 0 0 22px rgba(120,255,90,0.25); }
  50%      { box-shadow: 0 0 36px 6px rgba(140,255,100,0.7),  inset 0 0 36px rgba(140,255,100,0.45); }
}

@keyframes ben-drift {
  0%   { transform: translate3d(0,0,0) scale(1.08); }
  50%  { transform: translate3d(-1.2%, -0.8%, 0) scale(1.1); }
  100% { transform: translate3d(0,0,0) scale(1.08); }
}

@keyframes ben-fog {
  0%   { transform: translate3d(-5%, 0, 0); }
  100% { transform: translate3d(5%, 0, 0); }
}