/* =========================================
   # CONFIGURACION GLOBAL
   ========================================= */
:root {
  /* # COLORES */
  --bg-color: #0d0d0d;
  --text-color: #33ff00;
  --dim-color: #008f11;
  --color-error: #ff0000;
  --color-accent: #ff00de;
  
  /* # FUENTES */
  --font-main: "Courier New", Courier, monospace;
  
  /* # TAMAÑOS (Requisito Solicitado) */
  --tamano-fuente-base: 16px;
  --tamano-fuente-h1: 1.5rem auto;
  --tamano-fuente-footer: 0.8rem;
  
  --ancho-contenedor-movil: 90%;
  --ancho-contenedor-max: 800px;
  
  --margen-contenedor: 10px;
  --espacio-elementos: 15px;
}

/* =========================================
   # ESTRUCTURA BASE
   ========================================= */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-main);
  font-size: var(--tamano-fuente-base);
  line-height: 1.6;
  
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Efecto CRT (Overlay de líneas de escaneo) */
body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.container {
  width: var(--ancho-contenedor-movil);
  max-width: var(--ancho-contenedor-max);
  margin: var(--margen-contenedor) auto;
  position: relative;
  z-index: 1;
}

/* =========================================
   # TIPOGRAFIA Y ELEMENTOS
   ========================================= */
h1 {
  font-size: var(--tamano-fuente-h1);
  border-bottom: 2px solid var(--text-color);
  padding-bottom: 10px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

/* Terminal Logs */
.log-entry { margin-bottom: var(--espacio-elementos); }
.timestamp { color: #666; margin-right: 10px; }
.timestamp_Advertencia { color: var(--color-error); margin-right: 10px; }

/* Footer */
footer { 
  margin-top: 0.01%; 
  margin-bottom: -6%;
  font-size: var(--tamano-fuente-footer); 
  color: #444; 
  text-align: center;
}

/* =========================================
   # NAVEGACION Y BOTONES
   ========================================= */
.nav-links {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-elementos);
}

.cmd-btn {
  background: transparent;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
  text-transform: uppercase;
}

.cmd-btn:hover {
  background: var(--text-color);
  color: var(--bg-color);
  box-shadow: 0 0 10px var(--text-color);
  cursor: pointer;
}

/* =========================================
   # SECCION PARTNERS (Sponsors)
   ========================================= */
.partners {
  margin-top: 30px;
  border-top: 1px dashed var(--dim-color);
  padding-top: var(--espacio-elementos);
}

.partners h3 { font-size: 0.9rem; color: var(--dim-color); }
.logo-grid { display: flex; gap: 20px; opacity: 0.7; flex-wrap: wrap; }
.partner-box { border: 1px solid var(--dim-color); padding: 10px; font-size: 0.8rem; }

/* =========================================
   # ANIMACIONES
   ========================================= */
/* Parpadeo cursor */
.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

/* Efecto Glitch Texto */
.glitch-text {
  text-shadow: 2px 0 var(--color-accent), -2px 0 var(--text-color);
  animation: noise 5s infinite linear alternate-reverse;
}

@keyframes noise {
  0% { text-shadow: 2px 0 var(--color-accent), -2px 0 var(--text-color); transform: skewX(0deg); }
  10% { text-shadow: -2px 0 var(--color-accent), 2px 0 var(--text-color); transform: skewX(2deg); }
  20% { text-shadow: 1px 0 var(--color-accent), -1px 0 var(--text-color); transform: skewX(-1deg); }
  30% { text-shadow: 2px 0 var(--color-accent), -2px 0 var(--text-color); transform: skewX(0deg); }
  100% { text-shadow: 2px 0 var(--color-accent), -2px 0 var(--text-color); transform: skewX(0deg); }
}

/* =========================================
   # MEDIA QUERIES
   ========================================= */

/* NIVEL 1: 1440px (Laptop Alta Res) */
@media (min-width: 1440px) {
  :root { --tamano-fuente-base: 18px; }
  .container { max-width: 1000px; }
}

/* NIVEL 2: 1920px (Full HD Grande) */
@media (min-width: 1920px) {
  :root { --tamano-fuente-base: 22px; }
  .container { max-width: 1300px; }
}

/* NIVEL 3: 2500px+ (4K) */
@media (min-width: 2500px) {
  :root { --tamano-fuente-base: 32px; }
  .container { max-width: 2000px; }
}