/* ========================================
   WEBCORE / SERIAL EXPERIMENTS LAIN CSS
   ======================================== */

/* === IMPORTAR FUENTES === */
/* Trae las fuentes de Google Fonts para usar en todo el sitio */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

/* === RESET GLOBAL === */
/* Elimina márgenes y padding por defecto del navegador */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Hace que width/height incluya border y padding */
}

/* === VARIABLES DE COLORES === */
/* Define colores reutilizables en todo el CSS con var(--nombre) */
:root {
  --primary-bg: #0a0a0a;      /* Negro de fondo */
  --secondary-bg: #1a1a1a;    /* Negro más claro */
  --accent-green: #00ff41;    /* Verde neón */
  --accent-red: #ff0080;      /* Rosa/rojo neón */
  --accent-blue: #00d9ff;     /* Azul cian */
  --text-primary: #e0e0e0;    /* Gris claro para texto */
  --text-dim: #808080;        /* Gris oscuro para texto secundario */
  --border-color: #333;       /* Gris para bordes */
}

/* === BODY (CUERPO DE LA PÁGINA) === */
body {
  font-family: 'Share Tech Mono', 'Courier New', monospace; /* Fuente monoespaciada */
  background: var(--primary-bg); /* Fondo negro */
  color: var(--text-primary);    /* Texto gris claro */
  line-height: 1.6;              /* Espaciado entre líneas */
  min-height: 100vh;             /* Mínimo altura de ventana completa */
  display: flex;                 /* Activa flexbox */
  flex-direction: column;        /* Apila elementos verticalmente */
  position: relative;            /* Permite posicionar elementos hijos */
  overflow-x: hidden;            /* Oculta scroll horizontal */
}

/* === EFECTOS DE FONDO === */

/* SCANLINES: Líneas horizontales que simulan monitor CRT */
.scanlines {
  position: fixed;        /* Se queda fijo aunque hagas scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),        /* Línea semi-transparente */
    rgba(0, 0, 0, 0.15) 1px,    /* 1px de alto */
    transparent 1px,             /* Espacio transparente */
    transparent 2px              /* 2px entre líneas */
  );
  pointer-events: none;   /* No interfiere con clics del mouse */
  z-index: 9999;         /* Está por encima de todo */
  animation: flicker 0.15s infinite; /* Parpadeo constante */
}

/* Animación de parpadeo sutil */
@keyframes flicker {
  0% { opacity: 0.95; }
  50% { opacity: 0.97; }
  100% { opacity: 0.95; }
}

/* GLITCH OVERLAY: Gradiente sutil de colores neón */
.glitch-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 255, 65, 0.03) 0%,    /* Verde arriba */
    transparent 50%,               /* Transparente en medio */
    rgba(255, 0, 128, 0.03) 100%  /* Rosa abajo */
  );
  pointer-events: none;
  z-index: 1;
}

/* === HEADER (ENCABEZADO) === */
header {
  background: rgba(10, 10, 10, 0.95);      /* Negro semi-transparente */
  border-bottom: 2px solid var(--accent-green); /* Borde verde */
  padding: 20px;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.3); /* Sombra verde brillante */
  position: sticky;                         /* Se queda pegado arriba */
  top: 0;
  z-index: 100;                            /* Por encima del contenido */
  backdrop-filter: blur(10px);             /* Efecto de desenfoque de fondo */
}

/* LOGO */
.logo {
  text-align: center;
  margin-bottom: 15px;
}

.logo-text {
  font-family: 'VT323', monospace;
  font-size: 2.5em;
  font-weight: bold;
  color: var(--accent-green);
  text-shadow: 
    0 0 10px var(--accent-green),
    0 0 20px var(--accent-green),
    0 0 30px rgba(0, 255, 65, 0.5); /* Triple sombra para efecto neón */
  letter-spacing: 8px;
  animation: pulse-glow 3s ease-in-out infinite; /* Pulso de brillo */
}

.logo-subtitle {
  display: block;
  font-size: 0.7em;
  color: var(--text-dim);
  margin-top: 5px;
  letter-spacing: 2px;
}

/* Animación de pulso de brillo */
@keyframes pulse-glow {
  0%, 100% { 
    text-shadow: 0 0 10px var(--accent-green), 0 0 20px var(--accent-green), 0 0 30px rgba(0, 255, 65, 0.5);
  }
  50% { 
    text-shadow: 0 0 15px var(--accent-green), 0 0 30px var(--accent-green), 0 0 45px rgba(0, 255, 65, 0.7);
  }
}

/* === NAVEGACIÓN === */
nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;    /* Se acomoda en varias líneas si es necesario */
  gap: 15px;
  padding: 10px 0;
}

nav a {
  background: transparent;
  color: var(--accent-green);
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid var(--accent-green);
  font-family: 'VT323', monospace;
  font-size: 1.2em;
  letter-spacing: 2px;
  transition: all 0.3s;    /* Transición suave de 0.3 segundos */
  position: relative;
  overflow: hidden;
}

/* Efecto hover: elemento "fantasma" que se desliza */
nav a::before {
  content: attr(data-text);      /* Toma el texto del atributo HTML */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-green);
  color: var(--primary-bg);
  transform: translateY(-100%);  /* Fuera de vista (arriba) */
  transition: transform 0.3s;
}

nav a:hover::before {
  transform: translateY(0);      /* Se desliza a vista */
}

nav a:hover {
  box-shadow: 0 0 15px var(--accent-green); /* Brillo al pasar mouse */
}

/* === MAIN (CONTENIDO PRINCIPAL) === */
main {
  flex: 1;                /* Ocupa todo el espacio disponible */
  max-width: 1000px;
  width: 100%;
  margin: 30px auto;      /* Centrado horizontal */
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* === TERMINAL BOX (CAJA DE TERMINAL) === */
.terminal-box {
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid var(--accent-green);
  margin-bottom: 30px;
  box-shadow: 
    0 0 20px rgba(0, 255, 65, 0.2),       /* Sombra externa */
    inset 0 0 50px rgba(0, 255, 65, 0.05); /* Sombra interna */
}

.terminal-header {
  background: var(--accent-green);
  color: var(--primary-bg);
  padding: 8px 15px;
  font-family: 'VT323', monospace;
  font-size: 1.1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.terminal-content {
  padding: 20px;
  font-family: 'VT323', monospace;
  font-size: 1.3em;
  line-height: 1.8;
}

.terminal-content p {
  margin: 5px 0;
}

/* === EFECTOS DE TEXTO === */

/* Texto resaltado en rojo */
.highlight {
  color: var(--accent-red);
  text-shadow: 0 0 5px var(--accent-red);
}

/* Status online: punto verde parpadeante */
.status-online {
  color: var(--accent-green);
  animation: blink 2s infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}

/* Animación de escritura (typing) */
.typing-text {
  animation: typing 2s steps(20) 1s 1 normal both;
  overflow: hidden;
  white-space: nowrap; /* No permite saltos de línea */
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* === EFECTO GLITCH === */
/* Crea efecto de distorsión visual tipo VHS/RGB */
.glitch {
  position: relative;
  font-size: 1.5em;
  font-weight: bold;
  color: var(--accent-blue);
}

/* Crea dos copias del texto (una roja, una azul) */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 var(--accent-red);
  clip: rect(24px, 550px, 90px, 0);  /* Corta partes del texto */
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 var(--accent-blue);
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim-3 2s infinite linear alternate-reverse;
}

/* Animaciones que cambian qué partes del texto se ven */
@keyframes glitch-anim-2 {
  0% { clip: rect(65px, 9999px, 119px, 0); }
  25% { clip: rect(90px, 9999px, 40px, 0); }
  50% { clip: rect(10px, 9999px, 80px, 0); }
  100% { clip: rect(65px, 9999px, 119px, 0); }
}

@keyframes glitch-anim-3 {
  0% { clip: rect(5px, 9999px, 15px, 0); }
  50% { clip: rect(75px, 9999px, 95px, 0); }
  100% { clip: rect(5px, 9999px, 15px, 0); }
}

/* Glitch pequeño (sin animación) */
.glitch-sm {
  font-style: italic;
  color: var(--accent-blue);
}

.glitch-footer {
  font-family: 'VT323', monospace;
  font-size: 1.2em;
}

/* === MARQUEE (TEXTO DESPLAZANTE) === */
.marquee {
  background: var(--primary-bg);
  color: var(--accent-green);
  padding: 12px;
  border: 1px solid var(--accent-green);
  margin-bottom: 30px;
  overflow: hidden;  /* Oculta el texto que se sale */
  font-family: 'VT323', monospace;
  font-size: 1.2em;
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
}

.marquee p {
  animation: scroll-left 25s linear infinite; /* Se mueve infinitamente */
  white-space: nowrap; /* No permite saltos de línea */
}

@keyframes scroll-left {
  from { transform: translateX(100%); }  /* Empieza fuera a la derecha */
  to { transform: translateX(-100%); }   /* Termina fuera a la izquierda */
}

/* === CAJAS DE CONTENIDO === */
.content-box {
  background: rgba(26, 26, 26, 0.8);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-red); /* Borde izquierdo grueso */
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  position: relative;
}

/* Línea superior degradada */
.content-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-red), transparent);
}

.content-box h2 {
  color: var(--accent-green);
  font-family: 'VT323', monospace;
  font-size: 1.8em;
  margin-bottom: 15px;
  letter-spacing: 2px;
}

.content-box p {
  margin-bottom: 12px;
}

/* Texto corrupto (gris itálica) */
.corrupted-text {
  font-style: italic;
  color: var(--text-dim);
}

/* === LISTAS CYBER === */
.cyber-list {
  list-style: none; /* Sin bullets tradicionales */
  margin: 15px 0;
}

.cyber-list li {
  padding: 8px 0;
  padding-left: 20px;
  border-left: 2px solid var(--accent-blue);
  margin-bottom: 8px;
  transition: all 0.3s;
}

/* Efecto hover en items de lista */
.cyber-list li:hover {
  border-left-color: var(--accent-green); /* Cambia a verde */
  padding-left: 25px;                     /* Se mueve a la derecha */
  background: rgba(0, 255, 65, 0.05);     /* Fondo verde sutil */
}

/* === ASCII ART === */
.ascii-art {
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  margin: 15px 0;
  border: 1px dashed var(--accent-blue);
  overflow-x: auto; /* Scroll horizontal si es necesario */
}

.ascii-art pre {
  color: var(--accent-blue);
  font-size: 0.9em;
  line-height: 1.2;
  text-align: center;
}

/* === WARNING BOX (CAJA DE ADVERTENCIA) === */
.warning-box {
  background: rgba(255, 0, 128, 0.1);
  border: 1px solid var(--accent-red);
  padding: 15px;
  margin-top: 15px;
  font-family: 'VT323', monospace;
  font-size: 1.1em;
}

.warning-box p {
  margin: 0;
  color: var(--accent-red);
}

/* === LOG ENTRIES (ENTRADAS DE REGISTRO) === */
.log-entry {
  padding: 15px;
  margin-bottom: 15px;
  background: rgba(0, 0, 0, 0.5);
  border-left: 3px solid var(--accent-blue);
}

.timestamp {
  color: var(--accent-blue);
  font-family: 'VT323', monospace;
  font-size: 0.9em;
  display: block;
  margin-bottom: 8px;
}

/* === CONTADOR DE VISITAS === */
.stats-counter {
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  border: 2px dashed var(--accent-green);
  padding: 25px;
  margin: 25px 0;
  font-family: 'VT323', monospace;
}

.counter-label {
  color: var(--text-dim);
  font-size: 1em;
  margin-bottom: 10px;
}

.counter-number {
  font-size: 3em;
  color: var(--accent-green);
  text-shadow: 0 0 20px var(--accent-green);
  margin: 10px 0;
  animation: blink 1.5s infinite;
}

.counter-text {
  color: var(--accent-red);
  font-size: 1.1em;
  margin-top: 10px;
}

/* === BOTONES === */
.button-container {
  text-align: center;
  margin: 20px 0;
}

.button {
  display: inline-block;
  background: transparent;
  color: var(--accent-green);
  text-decoration: none;
  padding: 12px 30px;
  border: 2px solid var(--accent-green);
  font-family: 'VT323', monospace;
  font-size: 1.3em;
  letter-spacing: 2px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

/* Efecto de deslizar fondo al hacer hover */
.button::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-green);
  color: var(--primary-bg);
  transform: translateX(-100%); /* Fuera de vista (izquierda) */
  transition: transform 0.3s;
}

.button:hover::before {
  transform: translateX(0);     /* Se desliza a vista */
}

.button:hover {
  box-shadow: 0 0 20px var(--accent-green);
}

.small-text {
  font-size: 0.85em;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 15px;
}

/* === FOOTER (PIE DE PÁGINA) === */
footer {
  background: rgba(10, 10, 10, 0.95);
  border-top: 2px solid var(--accent-green);
  padding: 30px 20px;
  text-align: center;
  margin-top: auto;  /* Se pega al fondo */
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
}

.footer-content p {
  margin: 8px 0;
  font-family: 'VT323', monospace;
  font-size: 1.1em;
}

.footer-note {
  color: var(--accent-red);
  font-size: 1.2em;
  margin: 15px 0;
}

.footer-ascii {
  margin-top: 20px;
  color: var(--accent-blue);
  opacity: 0.7;
}

.footer-ascii pre {
  font-size: 0.8em;
  line-height: 1.2;
}

/* ========================================
   ESTILOS ESPECÍFICOS PARA PÁGINA 404
   ======================================== */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;      /* Centra horizontalmente */
  justify-content: center;  /* Centra verticalmente */
  min-height: 60vh;
}

.error-terminal {
  width: 100%;
  max-width: 800px;
  border-color: var(--accent-red) !important;     /* Borde rojo en lugar de verde */
  box-shadow: 0 0 20px rgba(255, 0, 128, 0.3) !important; /* Sombra roja */
}

.error-terminal .terminal-header {
  background: var(--accent-red); /* Barra superior roja */
}

.error-code {
  font-size: 4em;
  color: var(--accent-red);
  text-align: center;
  margin: 20px 0;
  text-shadow: 0 0 20px var(--accent-red), 0 0 40px var(--accent-red);
}

.error-message {
  font-size: 1.5em;
  color: var(--accent-red);
  text-align: center;
}

/* Status offline: punto rojo parpadeante más lento */
.status-offline {
  color: var(--accent-red);
  animation: blink-slow 3s infinite;
}

@keyframes blink-slow {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}

.error-explanation {
  width: 100%;
  max-width: 800px;
  margin-top: 20px;
}

/* ASCII art con tema de error (rojo) */
.ascii-error-art {
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid var(--accent-red);
  padding: 20px;
  margin: 30px 0;
  max-width: 800px;
  width: 100%;
}

.ascii-error-art pre {
  color: var(--accent-red);
  font-family: 'VT323', monospace;
  font-size: 1.1em;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 0 10px var(--accent-red);
}

/* Botón secundario (azul) */
.button-secondary {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  margin-left: 15px;
}

.button-secondary::before {
  background: var(--accent-blue);
}

.button-secondary:hover {
  box-shadow: 0 0 20px var(--accent-blue);
}

.glitch-message {
  text-align: center;
  margin-top: 30px;
  max-width: 600px;
}

/* ========================================
   RESPONSIVE DESIGN (ADAPTACIÓN A MÓVIL)
   ======================================== */

/* Para tablets y móviles (pantallas menores a 768px) */
@media (max-width: 768px) {
  .logo-text {
    font-size: 2em;
    letter-spacing: 4px;
  }

  nav {
    flex-direction: column; /* Botones apilados verticalmente */
    gap: 10px;
  }

  nav a {
    width: 100%;
    text-align: center;
  }

  .terminal-content {
    font-size: 1.1em;
    padding: 15px;
  }

  .glitch {
    font-size: 1.2em;
  }

  .content-box {
    padding: 20px;
  }

  .content-box h2 {
    font-size: 1.5em;
  }

  .counter-number {
    font-size: 2.5em;
  }

  main {
    padding: 0 15px;
  }

  .ascii-art pre {
    font-size: 0.7em;
  }
}

/* Para móviles pequeños (pantallas menores a 480px) */
@media (max-width: 480px) {
  .logo-text {
    font-size: 1.6em;
    letter-spacing: 3px;
  }

  .logo-subtitle {
    font-size: 0.6em;
  }

  nav a {
    padding: 10px 15px;
    font-size: 1.1em;
  }

  .terminal-content {
    font-size: 1em;
  }

  .marquee {
    font-size: 1em;
  }

  .content-box {
    padding: 15px;
  }

  .button {
    font-size: 1.1em;
    padding: 10px 20px;
  }

  footer {
    padding: 20px 15px;
  }

  .footer-ascii pre {
    font-size: 0.6em;
  }
}