/* =========================================================
   --- ESTÉTICA VECTORHEART (LIGHT MODE / HIGH CONTRAST) ---
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Silkscreen&family=Jura:wght@500;700&display=swap');

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

body {
  background-color: #FFFFFF; /* Blanco inmaculado */
  /* Patrón de puntos grises súper sutil simulando impresión */
  background-image: radial-gradient(#E0E0E0 1px, transparent 1px);
  background-size: 20px 20px;
  font-family: 'Jura', sans-serif; /* Fuente técnica y cuadrada */
  color: #000000;
  font-size: 14px;
  line-height: 1.8;
  cursor: crosshair;
}

/* --- BARRA DE NAVEGACIÓN --- */
.navegacion {
  display: flex; justify-content: center; align-items: center; gap: 30px;
  padding: 15px; position: sticky; top: 0; z-index: 100;
  background: #FFFFFF;
  border-bottom: 2px solid #000000;
}

.nav-links {
  display: flex; gap: 30px; justify-content: center;
}

.btn-nav {
  color: #000000; text-decoration: none;
  font-family: 'Silkscreen', monospace; /* Pixel font para los botones */
  font-size: 1rem; letter-spacing: 2px; font-weight: normal;
  padding: 5px 15px; border: 1px solid transparent;
  transition: all 0.2s ease;
  text-transform: uppercase;
  cursor: pointer;
}

.btn-nav:hover {
  color: #FFFFFF; 
  background: #FF4400; /* Naranja Vectorheart */
  border: 1px solid #000000;
}

/* --- CINTA ANIMADA --- */
.cinta-peligro {
  background: #FF4400;
  color: #FFFFFF;
  font-family: 'Silkscreen', monospace; font-weight: normal;
  font-size: 0.85rem; padding: 5px 0;
  border-bottom: 2px solid #000000;
  text-transform: uppercase; letter-spacing: 3px;
  display: flex; align-items: center; height: 30px; overflow: hidden;
}
.cinta-peligro marquee { width: 100%; line-height: 1; margin-top: 2px; }

/* --- CONTENEDOR PRINCIPAL --- */
.contenedor-principal { max-width: 850px; margin: 40px auto; display: flex; flex-direction: column; gap: 40px; padding: 0 20px; }

/* --- CAJAS DE SECCIÓN (Estilo manual técnico sobrecargado) --- */
.caja-seccion {
  background: #FFFFFF;
  /* Cuadrícula de plano arquitectónico muy suave dentro de la caja */
  background-image: 
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 15px 15px;
  border: 2px solid #000000;
  position: relative; padding: 40px; overflow: hidden;
  box-shadow: 8px 8px 0px #EEEEEE;
}

/* Marco técnico interno (HUD Frame) */
.caja-seccion::after {
  content: '';
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  border: 1px solid rgba(0,0,0,0.1);
  pointer-events: none;
}

/* Etiqueta lateral decorativa en cada caja */
.caja-seccion::before {
  content: 'SYSTEM_FILE // PAMABA.261';
  position: absolute;
  top: 50%; right: -60px;
  transform: translateY(-50%) rotate(90deg);
  font-family: 'Silkscreen', monospace;
  font-size: 0.6rem;
  color: rgba(0,0,0,0.2);
  letter-spacing: 2px;
}

/* --- TIPOGRAFÍA DE TÍTULOS --- */
.titulo-principal { font-family: 'Syncopate', sans-serif; font-size: 4.5rem; color: #000000; line-height: 1; font-weight: 700; letter-spacing: -2px; }
.titulo-secundario { font-family: 'Syncopate', sans-serif; font-size: 1.5rem; color: #FF4400; letter-spacing: 5px; font-weight: 700; margin-bottom: 15px;}
.titulo-seccion { font-family: 'Syncopate', sans-serif; font-size: 1.8rem; color: #000000; margin-bottom: 25px; letter-spacing: 2px; font-weight: 700; border-bottom: 2px solid #000000; padding-bottom: 10px;}

.caja-info {
  background: #000000; color: #FFFFFF; display: inline-block;
  padding: 5px 15px; font-size: 0.8rem; font-weight: normal;
  font-family: 'Silkscreen', monospace; letter-spacing: 1px;
}

/* --- TEXTOS --- */
.contenido-texto { position: relative; z-index: 5; font-size: 14px; }
.contenido-texto p { margin-bottom: 15px; background: rgba(255,255,255,0.8); display: inline-block; } /* Fondo blanco al texto para que la cuadrícula no moleste al leer */

/* --- ENTRADAS DE BLOG (Estilo Panel de Datos) --- */
.entrada-blog {
  background: #F8F8F8; 
  /* Líneas de escaneo horizontales (Scanlines) */
  background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 100% 4px;
  border: 1px solid #000000;
  border-left: 5px solid #FF4400;
  padding: 25px 25px 25px 35px; margin-bottom: 20px;
  position: relative; transition: all 0.2s ease;
  overflow: hidden; /* Mantiene la marca de agua dentro de la caja */
}

/* Marca de agua gigante dentro de cada post */
.entrada-blog::before {
  content: 'LOG';
  position: absolute;
  top: -15px; right: -10px;
  font-family: 'Syncopate', sans-serif;
  font-size: 7rem;
  font-weight: 700;
  color: rgba(0,0,0,0.04);
  z-index: 0;
  pointer-events: none;
}

/* Micro-datos en la esquina inferior del post */
.entrada-blog::after {
  content: 'MEM.BLOCK [0x00A] // STATUS: OK';
  position: absolute;
  bottom: 5px; right: 10px;
  font-family: 'Silkscreen', monospace;
  font-size: 0.5rem;
  color: rgba(255, 68, 0, 0.6);
  z-index: 0;
}

.entrada-blog:hover { transform: translateX(5px); background-color: #FFFFFF; border-color: #FF4400; }
.entrada-blog h3, .entrada-blog p, .entrada-blog .fecha-blog, .entrada-blog .btn-pequeno { position: relative; z-index: 1; } /* Sube el texto por encima de la marca de agua */

.entrada-blog h3 { font-family: 'Syncopate', sans-serif; font-size: 1.2rem; color: #000000; margin-bottom: 10px; font-weight: 700; background: #FFF; display: inline-block; padding-right: 10px;}
.fecha-blog { color: #888888; font-size: 0.75rem; font-family: 'Silkscreen', monospace; margin-bottom: 10px; letter-spacing: 1px;}
.btn-pequeno { font-size: 0.75rem; padding: 4px 10px; background: #000000; color: #FFFFFF !important; display: inline-block; margin-top: 10px;}
.btn-pequeno:hover { background: #FF4400; }

/* =========================================================
   --- ESTANTERÍA DE JUEGOS ---
   ========================================================= */
.fila-juegos { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 20px; scroll-snap-type: x mandatory; margin-top: 20px;}
.fila-juegos::-webkit-scrollbar { height: 8px; }
.fila-juegos::-webkit-scrollbar-track { background: #EEEEEE; border: 1px solid #000; }
.fila-juegos::-webkit-scrollbar-thumb { background: #FF4400; border: 1px solid #000; }

.caja-juego {
  flex: 0 0 140px; height: 190px;
  background-color: #F8F8F8; border: 2px solid #000000;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  position: relative; transition: all 0.2s ease; cursor: pointer;
  scroll-snap-align: start; overflow: hidden; text-decoration: none;
}

.caratula { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.2); transition: all 0.3s ease; }

.caja-juego:hover { border-color: #FF4400; transform: translateY(-5px); box-shadow: 4px 4px 0px #FF4400; }
.caja-juego:hover .caratula { filter: grayscale(0%) contrast(1); }

.etiqueta-estado {
  position: absolute; top: 5px; right: 5px; background: #FF4400;
  color: #FFFFFF; font-family: 'Silkscreen', monospace; font-size: 0.65rem;
  padding: 2px 8px; z-index: 5; border: 1px solid #000;
}

/* Caja de "..." */
.caja-juego.caja-mas { border: 2px dashed #000000; background: transparent; }
.caja-juego.caja-mas:hover { border-style: solid; background: #FF4400; border-color: #000; box-shadow: none;}
.puntos-mas { font-family: 'Syncopate', sans-serif; font-size: 2rem; color: #000000; }
.caja-juego.caja-mas:hover .puntos-mas { color: #FFFFFF; }
.texto-mas { font-family: 'Jura', sans-serif; font-size: 0.75rem; color: #000000; font-weight: bold; margin-top: 10px; text-align: center;}
.caja-juego.caja-mas:hover .texto-mas { color: #FFFFFF; }

/* =========================================================
   --- DECORACIÓN VECTORIAL (Shapes sólidos y técnicos) ---
   ========================================================= */

/* Círculos concéntricos limpios */
.halftone-bg {
  position: absolute; top: -60px; right: -60px; width: 250px; height: 250px;
  border: 2px solid #EEEEEE; border-radius: 50%;
  background: transparent; z-index: 1; pointer-events: none;
}
.halftone-bg::after {
  content: ''; position: absolute; top: 20px; right: 20px; width: 206px; height: 206px;
  border: 1px solid #DDDDDD; border-radius: 50%;
}
.halftone-bg::before {
  content: ''; position: absolute; top: 50px; right: 50px; width: 146px; height: 146px;
  border: 2px dashed #CCCCCC; border-radius: 50%;
}

/* Cruces técnicas sólidas */
.estrella-vectorial {
  position: absolute; top: 30px; left: 30px; width: 20px; height: 20px;
  border-top: 2px solid #000000; border-left: 2px solid #000000; z-index: 2;
}
.estrella-vectorial::after {
  content: ''; position: absolute; bottom: -20px; right: -20px; width: 20px; height: 20px;
  border-bottom: 2px solid #000000; border-right: 2px solid #000000;
}

/* Decoración sobre los textos */
.decoracion-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000000; padding-bottom: 10px; margin-bottom: 20px; }
.codigo-barras { width: 60px; height: 15px; background-image: repeating-linear-gradient(to right, #000 0, #000 2px, transparent 2px, transparent 4px); }
.flechas-chevron { font-family: 'Silkscreen', monospace; color: #000000; font-size: 0.75rem; font-weight: normal; }
.flechas-chevron::before { content: 'V. 2.0 // REVISION'; }

/* Miras de francotirador para los artículos */
.diana-target { display: block; position: absolute; width: 15px; height: 15px; border: 1px solid #FF4400; border-radius: 50%; }
.diana-target::after { content: ''; position: absolute; top: 50%; left: -5px; right: -5px; height: 1px; background: #FF4400; }
.diana-target::before { content: ''; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 1px; background: #FF4400; }
.d-1 { top: 25px; right: 25px; }
.d-2 { display: none; } /* Ocultamos la segunda para no recargar */

.rayas-peligro { display: none; }

/* =========================================================
   --- FONDO VECTORHEART CAÓTICO Y ELEGANTE ---
   ========================================================= */

.fondo-vectorial-fijo {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -10; /* Se asegura de estar detrás de todo */
  overflow: hidden;
  pointer-events: none; /* Evita que los textos bloqueen los clics del ratón */
}

/* Cuadrícula técnica de fondo */
.bg-grid {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-image: 
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Líneas que cruzan de punta a punta */
.bg-line { position: absolute; background: rgba(0,0,0,0.06); }
.h-line-1 { top: 30vh; left: 0; width: 100vw; height: 1px; }
.v-line-1 { top: 0; left: 80vw; width: 1px; height: 100vh; }

/* Círculos huecos superpuestos con animación */
.bg-circle-large {
  position: absolute;
  top: -20vh; right: -10vw;
  width: 75vh; height: 75vh;
  border: 2px solid rgba(0,0,0,0.03);
  border-radius: 50%;
  animation: rotacionLenta 120s linear infinite; 
}
.bg-circle-large::after {
  content: ''; position: absolute;
  top: 40px; left: 40px; right: 40px; bottom: 40px;
  border: 8px solid rgba(255, 68, 0, 0.02);
  border-radius: 50%;
}

/* Cruz técnica en la esquina inferior izquierda */
.bg-cross {
  position: absolute; bottom: 15vh; left: 10vw;
  width: 100px; height: 1px; background: rgba(0,0,0,0.08);
}
.bg-cross::after {
  content: ''; position: absolute;
  top: -50px; left: 50px; width: 1px; height: 100px;
  background: rgba(0,0,0,0.08);
}

/* --- TIPOGRAFÍA DEL FONDO --- */
.bg-text {
  position: absolute;
  font-family: 'Syncopate', sans-serif;
  color: rgba(0,0,0,0.04);
  font-weight: 700;
  white-space: nowrap;
}

/* Número gigante al estilo revista de diseño */
.large-number {
  top: 5vh; left: 45vw;
  font-size: 35rem;
  line-height: 0.8;
  letter-spacing: -20px;
  color: rgba(0,0,0,0.02);
}

/* Textos rotados 90 grados */
.vertical-left {
  top: 15vh; left: 3vw;
  transform: rotate(-90deg);
  transform-origin: left top;
  font-size: 2rem; letter-spacing: 15px;
}

.vertical-right {
  bottom: 25vh; right: -8vw;
  transform: rotate(90deg);
  transform-origin: right bottom;
  font-size: 1.5rem; letter-spacing: 20px;
}

/* Texto de advertencia en la base animado de izquierda a derecha */
.horizontal-bottom {
  bottom: 5vh; 
  left: 0; /* Lo anclamos a la izquierda para empezar a moverlo desde ahí */
  font-size: 3rem; 
  letter-spacing: 5px;
  white-space: nowrap; /* Obliga a que el texto no salte a la siguiente línea */
  
  /* Animación: nombre | duración (25s es un ritmo elegante) | lineal | bucle infinito */
  animation: deslizar-derecha 35s linear infinite; 
}

/* Creamos el motor de la animación */
@keyframes deslizar-derecha {
  /* 0%: Empieza fuera de la pantalla por la parte izquierda (oculto en negativo) */
  0% { transform: translateX(-100%); }
  
  /* 100%: Termina cruzando todo el ancho de la pantalla (100vw) hacia la derecha */
  100% { transform: translateX(100vw); }
}

/* =========================================================
   --- EXPLOSIÓN DE CAOS: LÍNEAS ROJAS Y FIGURAS ---
   ========================================================= */

/* Líneas Rojas Estructurales (Translúcidas pero visibles) */
.bg-line-red {
  position: absolute;
  background: rgba(255, 0, 50, 0.4); 
  z-index: -1;
}
.red-line-h { top: 75vh; left: 0; width: 100vw; height: 1px; }
.red-line-v { top: 0; left: 15vw; width: 1px; height: 100vh; }
.red-line-d1 { 
  top: 20vh; left: -20vw; width: 150vw; height: 1px; 
  transform: rotate(15deg); transform-origin: left top;
}
.red-line-d2 { 
  bottom: 10vh; right: -20vw; width: 150vw; height: 1px; 
  transform: rotate(-60deg); transform-origin: right bottom;
}

/* Figuras Geométricas Flotantes */
.vector-shape {
  position: absolute;
  pointer-events: none;
}
/* Triángulo sólido translúcido */
.shape-triangle {
  bottom: 20vh; right: 15vw;
  width: 0; height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid rgba(0, 0, 0, 0.04); 
  transform: rotate(25deg);
}
/* Cuadrado rojo hueco rotado */
.shape-square {
  top: 25vh; right: 8vw;
  width: 120px; height: 120px;
  border: 2px solid rgba(255, 0, 50, 0.15); 
  transform: rotate(45deg);
}
/* Círculo secundario animado (gira al revés) */
.shape-circle-small {
  top: 60vh; left: 25vw;
  width: 250px; height: 250px;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  animation: rotacionLenta 60s linear infinite reverse; 
}

/* Devolvemos las cruces pequeñas a su estado estático original */
.anchor-plus {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 2rem;
  color: rgba(255, 0, 50, 0.4);
  line-height: 1;
}
.p1 { top: 8vh; left: 8vw; }
.p2 { top: 12vh; right: 40vw; }
.p3 { bottom: 30vh; left: 45vw; }
.p4 { bottom: 12vh; right: 12vw; }

/* =========================================================
   --- MOTORES DE MOVIMIENTO INDEPENDIENTES ---
   ========================================================= */

@keyframes flotar-p1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(30px, 20px) rotate(90deg); }
}

@keyframes flotar-p2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-50px, 10px) rotate(-180deg); }
}

@keyframes flotar-p3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(5px, -40px) rotate(45deg); }
}

@keyframes flotar-p4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-25px, -25px) rotate(360deg); }
}

/* =========================================================
   --- MOTOR DE ANIMACIÓN VECTORHEART ---
   ========================================================= */

@keyframes rotacionLenta {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* =========================================================
   --- AMPLIACIÓN DE ELEMENTOS CAÓTICOS PARA EL FONDO ---
   ========================================================= */

/* Líneas Diagonales que cortan la web de lado a lado */
.bg-line-diagonal {
  position: absolute;
  background: rgba(0, 0, 0, 0.04);
  height: 1px;
  width: 150vw; 
  transform: rotate(-35deg);
  transform-origin: top left;
}
.d-line-1 { top: 10vh; left: -10vw; }
.d-line-2 { 
  top: 50vh; left: -10vw; 
  border-top: 1px dashed rgba(255, 68, 0, 0.04);
  background: transparent;
}

/* Corchetes angulares tipo mirilla / HUD de cámara */
.hud-bracket {
  position: absolute;
  width: 40px; height: 40px;
  border: 2px solid rgba(0, 0, 0, 0.05);
  pointer-events: none;
}
.b-top-left { top: 10vh; left: 25vw; border-right: none; border-bottom: none; }
.b-bottom-right { bottom: 15vh; right: 28vw; border-left: none; border-top: none; }

/* Código de barras técnico gigante decorativo */
.barcode-gigante {
  position: absolute;
  top: 40vh; left: 2vw;
  width: 150px; height: 35px;
  opacity: 0.15;
  background-image: repeating-linear-gradient(to right, 
    #000 0, #000 2px, transparent 2px, transparent 5px, 
    #000 5px, #000 9px, transparent 9px, transparent 11px
  );
  transform: rotate(-90deg);
}

/* Bloque denso de código / matriz de datos */
.bloque-datos {
  top: 65vh; left: 5vw;
  font-family: 'Silkscreen', monospace;
  font-size: 0.6rem;
  line-height: 1.4;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.05);
  letter-spacing: 1px;
}

/* Coordenadas tácticas diminutas dispersas */
.mini-coordenada {
  font-family: 'Silkscreen', monospace;
  font-size: 0.5rem;
  font-weight: normal;
  color: rgba(255, 68, 0, 0.06); 
  letter-spacing: 2px;
}
.coord-1 { top: 28vh; right: 22vw; }
.coord-2 { bottom: 8vh; left: 40vw; }

/* =========================================================
   --- ESTÉTICA DESIGNERS REPUBLIC (WIPEOUT / Y2K) ---
   ========================================================= */

/* Texto Japonés en vertical */
.jp-text {
  position: absolute;
  writing-mode: vertical-rl;
  font-family: 'Arial', sans-serif;
  font-weight: 900;
  font-size: 10rem;
  letter-spacing: -15px;
  pointer-events: none;
}
.jp-left { top: 5vh; left: 3vw; color: rgba(0, 0, 0, 0.03); }
.jp-right { bottom: 5vh; right: 2vw; color: rgba(255, 68, 0, 0.06); }

/* Anillos Radar Segmentados (Interfaz de nave) */
.radar-segmented {
  position: absolute;
  top: 15vh; left: 50vw;
  width: 450px; height: 450px;
  border: 45px solid rgba(0, 0, 0, 0.04);
  border-top-color: transparent;
  border-left-color: rgba(255, 68, 0, 0.15);
  border-radius: 50%;
  animation: rotacionLenta 15s linear infinite reverse;
}
.radar-segmented-inner {
  position: absolute;
  top: 24vh; left: 54.5vw;
  width: 250px; height: 250px;
  border: 15px solid rgba(0, 0, 0, 0.08);
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rotacionLenta 8s linear infinite;
}

/* Bloque de Advertencia Sólido y Contraste Alto */
.solid-warning-block {
  position: absolute;
  top: 30vh; left: -5vw;
  background: #000000;
  color: #FFFFFF;
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.5rem;
  padding: 10px 50px 10px 10vw;
  transform: rotate(15deg); 
  white-space: nowrap;
  box-shadow: 15px 15px 0px rgba(255, 68, 0, 0.2);
  z-index: -5;
}
.sw-alert { color: #FF4400; font-size: 2rem; margin-right: 10px; }
.sw-kanji { color: #FF4400; font-size: 1.8rem; margin-left: 20px; font-family: 'Arial', sans-serif; }

/* Cinta de precaución a rayas diagonales */
.caution-tape-d {
  position: absolute;
  bottom: 25vh; right: -62vw;
  width: 150vw; height: 35px;
  background-image: repeating-linear-gradient(45deg, #000 0, #000 20px, #FF4400 20px, #FF4400 40px);
  transform: rotate(-60deg);
  opacity: 0.15;
}

/* =========================================================
   --- NUEVAS FIGURAS TRIBALES Y WIREFRAMES ---
   ========================================================= */

/* Estrella Tribal Y2K Afilada (Hecha con CSS puro) */
.y2k-tribal {
  position: absolute;
  background: #000000;
  clip-path: polygon(50% 0%, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0% 50%, 45% 45%);
}
/* =========================================================
   --- ESTRELLAS TRIBALES (ROTACIÓN PURA SOBRE SU EJE) ---
   ========================================================= */

.t-1 {
  top: 15vh; right: 10vw;
  width: 150px; height: 150px;
  opacity: 0.05; 
  /* Animación lineal (ritmo constante sin frenazos) e infinita */
  animation: rotar-propio-eje-derecha 25s linear infinite;
}

.t-2 {
  bottom: 20vh; left: 5vw;
  width: 80px; height: 80px;
  background: #FF4400;
  opacity: 0.15;
  /* Esta va más rápido y en sentido contrario para crear contraste visual */
  animation: rotar-propio-eje-izquierda 12s linear infinite;
}

/* =========================================================
   --- MOTORES DE ROTACIÓN INFINITA (SIN DESPLAZAMIENTO) ---
   ========================================================= */

/* Gira a favor de las agujas del reloj */
@keyframes rotar-propio-eje-derecha {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Gira en contra de las agujas del reloj */
@keyframes rotar-propio-eje-izquierda {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* =========================================================
   --- VENTANA FLOTANTE DE JUEGOS (INFO HUD) ---
   ========================================================= */

#ventana-info-juego {
  position: absolute;
  display: none; /* JavaScript lo cambia a 'block' al pasar el ratón */
  background: #FFFFFF;
  border: 2px solid #000000;
  box-shadow: 6px 6px 0px #FF4400; /* Sombra sólida naranja */
  padding: 15px;
  width: 250px;
  z-index: 9999; /* Asegura que flote por encima de todo */
  pointer-events: none; /* Evita que el ratón se atasque con la caja */
  
  /* Fondo milimetrado sutil */
  background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Decoración superior de la ventana flotante */
#ventana-info-juego::before {
  content: 'DATA.READ // HUD_ACTIVE';
  display: block;
  font-family: 'Silkscreen', monospace;
  font-size: 0.6rem;
  color: #000000;
  border-bottom: 2px solid #000000;
  margin-bottom: 10px;
  padding-bottom: 5px;
}

/* Estilos para el texto que inyecta tu script.js */
#ventana-info-juego h3 {
  font-family: 'Syncopate', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 5px;
  line-height: 1.2;
}

#ventana-info-juego p {
  font-family: 'Jura', sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  color: #555555;
  margin: 0;
}

/* =========================================================
   --- SECCIÓN DE MÚSICA (AUDIO LOGS) ---
   ========================================================= */

.lista-canciones {
  display: flex;
  flex-direction: column;
  gap: 25px; /* Separación entre cada canción */
  position: relative;
  z-index: 5;
}

/* Caja individual de cada pista */
.track-caja {
  background: #F8F8F8;
  border: 2px solid #000000;
  padding: 20px;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

.track-caja:hover {
  border-color: #FF4400;
  box-shadow: 6px 6px 0px #FF4400;
  transform: translateX(5px);
  background: #FFFFFF;
}

/* Cabecera del panel (Título y número) */
.track-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px dashed #CCCCCC;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.track-titulo {
  font-family: 'Syncopate', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #000000;
}

.track-num {
  font-family: 'Silkscreen', monospace;
  color: #FF4400;
  font-size: 0.8rem;
  background: rgba(255, 68, 0, 0.1);
  padding: 2px 8px;
  border: 1px solid #FF4400;
}

/* Truco CSS para volver monocromático el reproductor por defecto */
.reproductor {
  width: 100%;
  height: 40px;
  margin-bottom: 15px;
  outline: none;
  filter: grayscale(100%) contrast(1.2) sepia(10%) hue-rotate(180deg);
  border: 1px solid #000;
  border-radius: 0; /* Quita los bordes redondos si es posible */
}

/* Explicación de la canción */
.track-info p {
  font-family: 'Jura', sans-serif;
  font-size: 0.9rem;
  color: #333333;
  margin: 0;
  line-height: 1.6;
  background: transparent;
}

/* =========================================================
   --- SISTEMA DE TRADUCCIÓN (ES / EN) ---
   ========================================================= */

/* Por defecto (lang-es), ocultamos todo lo que tenga la clase "en" */
body.lang-es .en { display: none; }

/* Cuando cambiamos a (lang-en), ocultamos el español y mostramos el inglés */
body.lang-en .es { display: none; }
body.lang-en .en { display: inline-block; } /* Alineación estándar para los span */
p.en { display: block; } /* Aseguramos que los párrafos se comporten como bloque */

/* Botón de idioma alineado a la derecha */
#btn-idioma {
  position: absolute;
  right: 20px;
}

/* =========================================================
   --- FILTRO CRT ANALÓGICO (ELEGANTE Y SUTIL) ---
   ========================================================= */

body::after {
  content: ' ';
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  
  /* Doble capa de fondo combinada */
  background: 
    /* 1. Viñeteado radial: Oscurece las esquinas del monitor muy sutilmente */
    radial-gradient(circle, transparent 65%, rgba(0, 0, 0, 0.07) 130%),
    /* 2. Scanlines ultrafinas: Líneas horizontales con solo un 1.5% de opacidad */
    repeating-linear-gradient(rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 3px);
  
  z-index: 99999; /* Se coloca como un cristal por encima de toda la web */
  pointer-events: none; /* ¡CRUCIAL! El ratón ignora esta capa para poder hacer clicks y scroll */
  
  /* 3. Parpadeo eléctrico analógico (Flicker) */
  animation: crt-flicker 0.15s infinite;
}

/* Animación de parpadeo: oscila entre el 99% y el 100% de opacidad de forma caótica */
@keyframes crt-flicker {
  0% { opacity: 0.99; }
  50% { opacity: 1; }
  100% { opacity: 0.995; }
}

/* =========================================================
   --- FILTRO CRT ANALÓGICO (CALIBRACIÓN LIGHT MODE) ---
   ========================================================= */

body::after {
  content: ' ';
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  
  /* Subimos las opacidades para que contrasten con el fondo blanco */
  background: 
    /* 1. Viñeteado: Subido al 15% para que las esquinas se noten ligeramente curvadas */
    radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.15) 120%),
    /* 2. Scanlines: Subidas al 4.5% de opacidad para que la rejilla sea visible en el fondo blanco */
    repeating-linear-gradient(rgba(0, 0, 0, 0.045) 0px, rgba(0, 0, 0, 0.045) 1px, transparent 1px, transparent 3px);
  
  z-index: 99999;
  pointer-events: none; 
  
  /* 3. Flicker: Ampliamos el rango de parpadeo eléctrico para darle más textura viva */
  animation: crt-flicker 0.12s infinite;
}

/* Ajustamos el parpadeo entre 0.97 y 1 para que el ojo note la vibración analógica */
@keyframes crt-flicker {
  0% { opacity: 0.97; }
  50% { opacity: 1; }
  100% { opacity: 0.98; }
}

/* =========================================================
   --- ABERRACIÓN CROMÁTICA EN TÍTULOS (POTENCIADA) ---
   ========================================================= */
.titulo-principal {
  /* Separamos las sombras a 2.5px y subimos su opacidad al 50% */
  text-shadow: 
    2.5px 0px rgba(255, 0, 50, 0.5), 
    -2.5px 0px rgba(0, 255, 255, 0.5);
}

/* =========================================================
   --- NUEVOS ELEMENTOS ANIMADOS (PRUEBA) ---
   ========================================================= */

/* 1. ONDA DE SONAR (Ping) */
.sonar-ping {
  position: absolute;
  width: 40px; height: 40px;
  border: 2px solid #FF4400; /* Naranja técnico */
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index:-20;
}

.sp-1 {
  top: 40vh; left: 75vw;
  /* Animación: nombre_animacion | duración | ritmo | repetición infinita */
  animation: ping-tecnico 4s ease-out infinite; 
}

.sp-2 {
  bottom: 20vh; left: 15vw;
  animation: ping-tecnico 4s ease-out infinite 2s; /* El '2s' al final hace que vaya a destiempo de la otra */
}

@keyframes ping-tecnico {
  0% { transform: scale(0.5); opacity: 0.6; border-width: 4px; }
  100% { transform: scale(6); opacity: 0; border-width: 1px; }
}

/* 2. FLUJO DE DATOS VERTICAL CAYENDO */
.data-stream-v {
  position: absolute;
  right: 4vw; /* Anclado al margen derecho */
  width: 15px; /* Al ser tan estrecho, el texto se rompe hacia abajo */
  font-family: 'Silkscreen', monospace;
  font-size: 0.6rem;
  color: rgba(0, 0, 0, 0.06); /* Súper tenue, como marca de agua */
  word-break: break-all;
  line-height: 1.2;
  pointer-events: none;
  
  /* Animación de caída */
  animation: caida-datos 25s linear infinite;
}

@keyframes caida-datos {
  0% { top: -50vh; }
  100% { top: 110vh; } /* Cae hasta salir de la pantalla por debajo */
}

/* =========================================================
   --- ADAPTACIÓN PARA MÓVILES (RESPONSIVE DESIGN) ---
   ========================================================= */

@media (max-width: 768px) {
  
  /* 1. Ajustar la barra de navegación para que se apile y no se salga */
  .navegacion {
    flex-direction: column;
    padding: 15px 10px;
    gap: 15px;
  }
  
  .nav-links {
    flex-wrap: wrap; /* Permite que los botones bajen a la siguiente línea si no caben */
    gap: 10px;
  }
  
  /* Quitamos el anclaje derecho del botón de idioma para que no aplaste al resto */
  #btn-idioma {
    position: static;
    display: inline-block;
  }

  /* 2. Reducir los textos gigantes para que entren en la pantalla */
  .titulo-principal { font-size: 2.8rem; letter-spacing: -1px; }
  .titulo-secundario { font-size: 1.1rem; letter-spacing: 2px; }
  .titulo-seccion { font-size: 1.3rem; }

  /* 3. Ajustar el espacio interior de las cajas para no desperdiciar pantalla */
  .caja-seccion { padding: 20px; }
  
  /* Ocultamos la etiqueta vertical de "SYSTEM_FILE" porque se saldría por el lado derecho */
  .caja-seccion::before { display: none; } 

  /* 4. Ajustar el bloque de advertencia del fondo y los textos japoneses */
  .solid-warning-block { 
    left: -10vw; 
    font-size: 1rem; 
    padding: 10px 20px 10px 15vw;
  }
  .sw-alert { font-size: 1.5rem; }
  .sw-kanji { font-size: 1.2rem; }
  .jp-text { font-size: 5rem; }
  .large-number { font-size: 15rem; left: 5vw; top: 15vh; }

  /* 5. Ajustar paneles de música y blog */
  .track-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .entrada-blog { padding: 15px; }
  .entrada-blog::before { font-size: 4rem; top: -5px; right: -5px; }
}

/* =========================================================
   --- FORZAR CURSOR TÉCNICO EN ENLACES ---
   ========================================================= */

a, .btn-nav, .caja-juego, .btn-pequeno, .reproductor {
  cursor: crosshair !important; 
}

/* --- ICONOS DE CONEXIÓN CORREGIDOS --- */
.track-titulo {
  display: flex;
  align-items: center; /* Alineación vertical */
  gap: 10px;
  line-height: 1;      /* CRUCIAL: Esto elimina el espacio extra inferior de la fuente */
  margin: 0;           /* Elimina márgenes extra que puedan empujar el icono */
  padding: 0;
}

.icon-svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex-shrink: 0;
  display: block;
  
  /* --- AJUSTE MANUAL --- */
  position: relative; 
  top: -2px; /* Cambia este número: 
                - Si lo quieres más arriba, pon -3px, -4px...
                - Si lo quieres más abajo, pon -1px, 0px, 1px... */
}

/* =========================================================
   --- BOTÓN DE DESCARGA (FILE TRANSFER) ---
   ========================================================= */

.btn-descarga {
  background: #FF4400;
  color: #FFFFFF;
  font-size: 1.2rem;
  padding: 15px 30px;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  border: 2px solid #000000;
  box-shadow: 6px 6px 0px #000000;
  text-decoration: none;
  font-family: 'Silkscreen', monospace;
  transition: all 0.1s ease-out; /* Transición súper rápida y mecánica */
}

/* Efecto al pasar el ratón o hacer clic */
.btn-descarga:hover, .btn-descarga:active {
  background: #000000;
  color: #FF4400;
  transform: translate(6px, 6px); /* Desplaza el botón hacia abajo y a la derecha */
  box-shadow: 0px 0px 0px #000000; /* Hace desaparecer la sombra para simular que se hunde */
}

/* Forzar que el icono herede el color al hacer hover */
.btn-descarga:hover .icon-svg {
  fill: #FF4400;
}

/* =========================================================
   --- DESPLEGABLE DE IDIOMA Y2K (BRUTALISTA) ---
   ========================================================= */
.dropdown-idioma {
  position: absolute;
  right: 20px;
  z-index: 1000; /* Se asegura de flotar por encima de las cajas */
}

/* Ajuste para que el botón disparador use la misma base que los otros botones */
.id-trigger {
  background: transparent;
  border: 1px solid transparent;
  outline: none;
}

/* Caja contenedora del menú que se despliega */
.dropdown-content {
  display: none; /* Oculto por defecto */
  position: absolute;
  right: 0;
  top: 100%;
  background: #FFFFFF;
  border: 2px solid #000000;
  box-shadow: 4px 4px 0px #000000; /* Sombra sólida negra característica */
  min-width: 110px;
}

/* Estilo de cada opción de idioma (las banderas) */
.dropdown-content a {
  color: #000000 !important;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  font-family: 'Silkscreen', monospace;
  font-size: 0.85rem;
  border-bottom: 1px solid #000000;
  text-align: left;
}

.dropdown-content a:last-child {
  border-bottom: none; /* Quita la línea del último elemento */
}

/* Animación de inversión de color al pasar por encima de una bandera */
.dropdown-content a:hover {
  background: #FF4400 !important;
  color: #FFFFFF !important;
}

/* EL TRUCO: Al pasar el ratón por el contenedor, muestra la caja */
.dropdown-idioma:hover .dropdown-content {
  display: block;
}

/* Estado sombreado permanente para el idioma activo */
.dropdown-content .activo {
  background: #FF4400 !important;
  color: #FFFFFF !important;
}

/* =========================================================
   --- FIGURAS INTERNAS PARA LAS CAJAS (FONDOS TÉCNICOS) ---
   ========================================================= */

.bg-figura {
  position: absolute;
  z-index: 0; /* Se queda detrás del texto */
  pointer-events: none; /* El ratón lo ignora */
}

/* 1. Anillos de radar gigantes (Más visibles) */
.fig-circulos {
  bottom: -80px;
  right: -50px;
  width: 300px;
  height: 300px;
  border: 1.5px solid rgba(0, 0, 0, 0.12); /* Subido del 4% al 12% y línea más gruesa */
  border-radius: 50%;
}
.fig-circulos::before {
  content: '';
  position: absolute;
  top: 30px; left: 30px; right: 30px; bottom: 30px;
  border: 1.5px dashed rgba(255, 68, 0, 0.35); /* Subido del 15% al 35% de fuerza en el naranja */
  border-radius: 50%;
}

/* 2. Polígono con rayas de escaneo (Más oscuro) */
.fig-poligono {
  top: 10%;
  right: 5%;
  width: 180px;
  height: 180px;
  background: repeating-linear-gradient(
    45deg, 
    transparent, 
    transparent 5px, 
    rgba(0, 0, 0, 0.1) 5px, /* Subido del 4% al 10% para que la rejilla resalte */
    rgba(0, 0, 0, 0.1) 10px
  );
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

/* 3. Esfera Wireframe 3D (Efecto blueprint más marcado) */
.fig-wireframe {
  top: -30px;
  right: 80px;
  width: 200px;
  height: 60px;
  border: 1.5px solid rgba(0, 0, 0, 0.15); /* Subido al 15% */
  border-radius: 50%;
  transform: rotate(-15deg);
}
.fig-wireframe::after {
  content: '';
  position: absolute;
  top: -20px; left: 40px; right: 40px; bottom: -20px;
  border: 1.5px solid rgba(255, 68, 0, 0.3); /* Subido al 30% en naranja */
  border-radius: 50%;
  transform: rotate(60deg);
}

/* =========================================================
   --- ESTILO BRUTALISTA PARA LA CAJA DE COMENTARIOS ---
   ========================================================= */

/* Forzar fuentes técnicas y colores en la caja */
#HCB_comment_box * {
  font-family: 'Jura', sans-serif !important;
  color: #000000 !important;
}

/* El área de texto donde se escribe */
#HCB_comment_box textarea {
  border: 2px solid #000000 !important;
  border-radius: 0px !important; /* Totalmente cuadrado */
  background: #FFFFFF !important;
  padding: 10px !important;
  font-size: 1rem !important;
  box-shadow: 4px 4px 0px #EEEEEE !important;
}

/* Los inputs de Nombre y Email */
#HCB_comment_box .hcb-shadow-input {
  border: 2px solid #000000 !important;
  border-radius: 0px !important;
  padding: 6px !important;
}

/* Transformar el botón de enviar en un interruptor Y2K */
#HCB_comment_box .submit, #HCB_comment_box input[type="submit"] {
  background: #FF4400 !important;
  color: #FFFFFF !important;
  font-family: 'Silkscreen', monospace !important;
  text-transform: uppercase !important;
  border: 2px solid #000000 !important;
  border-radius: 0px !important;
  padding: 8px 20px !important;
  box-shadow: 4px 4px 0px #000000 !important;
  cursor: crosshair !important;
  transition: all 0.1s ease-out !important;
}

/* Efecto hover mecánico para el botón de comentar */
#HCB_comment_box .submit:hover {
  background: #000000 !important;
  color: #FF4400 !important;
  transform: translate(4px, 4px) !important;
  box-shadow: 0px 0px 0px #000000 !important;
}

/* Quitar marcas redondas de los comentarios ya publicados */
#HCB_comment_box .comment {
  border: 1px solid #000000 !important;
  background: #F8F8F8 !important;
  padding: 15px !important;
  margin-top: 15px !important;
  border-left: 5px solid #000000 !important;
}

/* Detalles del autor del comentario en naranja */
#HCB_comment_box .author {
  font-family: 'Silkscreen', monospace !important;
  color: #FF4400 !important;
}

/* =========================================================
   --- LÍNEA DE TIEMPO (TIMELINE) PARA JUEGOS --- 
   ========================================================= */
.timeline-contenedor {
  position: relative;
  margin: 40px 0;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 60px; /* Separación entre juegos */
}

/* La línea central punteada */
.timeline-linea {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #FF4400, #FF4400 10px, transparent 10px, transparent 20px);
  transform: translateX(-50%);
  z-index: 1;
}

.timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

/* Invierte el orden para alternar izquierda/derecha */
.timeline-item.invertido {
  flex-direction: row-reverse;
}

/* Contenedor de la imagen */
.timeline-img {
  width: 42%;
  position: relative;
}

.timeline-img img {
  width: 100%;
  border: 2px solid #000;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
  display: block;
}

.timeline-img img:hover {
  transform: translate(-4px, -4px);
  box-shadow: 10px 10px 0px #FF4400;
}

/* Contenedor del texto */
.timeline-contenido {
  width: 42%;
  background: #F8F8F8;
  border: 2px solid #000;
  padding: 20px;
  position: relative;
  z-index: 2;
}

.timeline-contenido h3 {
  font-family: 'Syncopate', sans-serif;
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 15px;
  color: #000;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
}

.meta-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

/* El punto cuadrado en el centro de la línea */
.timeline-marcador {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: #FFF;
  border: 3px solid #FF4400;
  z-index: 2;
  transition: background 0.2s ease;
}

.timeline-item:hover .timeline-marcador {
  background: #000;
}

/* --- Botón Volver Arriba --- */
.btn-subir {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999; /* Asegura que esté por encima de la cuadrícula y las líneas */
  background: #000;
  color: #FF4400;
  border: 1px solid #FF4400;
  cursor: pointer;
  display: none; /* Oculto por defecto hasta que se haga scroll */
  box-shadow: 2px 2px 0px rgba(255, 68, 0, 0.3);
  transition: all 0.2s ease-in-out;
}

.btn-subir:hover {
  background: #FF4400;
  color: #FFF;
  border-color: #000;
}

/* --- Texto final del Timeline --- */
.timeline-fin {
  text-align: center;
  padding: 50px 0 30px 0;
  font-family: 'Syncopate', sans-serif; /* Usamos una de las fuentes de tu cabecera */
  font-weight: 700;
  color: #FF4400;
  font-size: 1.2rem;
  letter-spacing: 4px; /* Letras separadas para darle un toque más digital */
  position: relative;
  z-index: 10;
  clear: both; /* Asegura que se coloque debajo de todos los elementos flotantes */
  text-shadow: 2px 2px 0px #000; /* Sombra negra para que resalte sobre el fondo */
}

/* Efecto de parpadeo (opcional, para darle más vida) */
.timeline-fin {
  text-align: center;
  margin-top: 40px; /* Margen para separarlo del final de la línea discontinua */
  padding-bottom: 40px;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  color: #FF4400;
  font-size: 1.2rem;
  letter-spacing: 4px;
  position: relative;
  z-index: 10;
  clear: both;
  text-shadow: 2px 2px 0px #000;
  animation: pulse-text 2s infinite alternate;
}

@keyframes pulse-text {
  0% { opacity: 0.8; }
  100% { opacity: 1; text-shadow: 0 0 10px rgba(255, 68, 0, 0.5); }
}

/* =========================================================
   --- ETIQUETA GIGANTE DE INICIO DE TIMELINE --- 
   ========================================================= */
.timeline-inicio-etiqueta {
  display: table; /* Para que el ancho se ajuste exactamente a tu texto */
  margin: 0 auto 40px auto; /* Centrado horizontal automático y separación inferior */
  background: #FF4400;
  color: #FFF;
  font-family: 'Syncopate', sans-serif;
  font-size: 1.3rem;
  font-weight: bold;
  padding: 12px 30px;
  border: 2px solid #000;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.2);
  text-align: center;
}