/* =========================================
   VARIABLES 2099
   ========================================= */
:root {
    --bg-dark: #080a0b; /* Asfalto oscuro */
    --neon-yellow: #ffea00;
    --neon-yellow-glow: rgba(255, 234, 0, 0.4);
    --tech-gray: #b0b5b9;
    --font-display: 'Orbitron', sans-serif;
    --font-text: 'Rajdhani', sans-serif;
}

body {
    margin: 0;
    font-family: var(--font-text);
    /* Fondo oscuro con micro-textura granulada (asfalto) */
    background-color: #0b0c0d;
    background-image: repeating-radial-gradient(circle, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 4px);
    color: white;
    overflow-x: hidden;
}

/* =========================================
   TEXTURA INDUSTRIAL Y VIDEO 16:9
   ========================================= */

/* 1. Malla de Ingeniería (Triple Capa Visible) */
.bg-base-textura {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -12;
    background-color: var(--bg-dark);
    /* Una cuadrícula técnica evidente + Líneas diagonales tipo placa de acero */
    background-image: 
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 10px),
        linear-gradient(rgba(255,234,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,234,0,0.05) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
}

/* Foco de luz sutil para resaltar las letras */
.bg-brillo-central {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -11;
    background: radial-gradient(circle at 20% 50%, rgba(255, 234, 0, 0.05) 0%, transparent 60%);
}

/* 2. Muro Derecho: Contenedor del video 16:9 intocable */
.video-split-container {
    position: absolute;
    top: 52%; right: 2%; /* Anclado a la derecha */
    transform: translateY(-50%);
    width: 48vw; /* 48% de la pantalla EXACTO */
    aspect-ratio: 16 / 9; /* Obliga al formato video */
    z-index: -10;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: -50px 0 100px var(--bg-dark), 0 0 30px rgba(255,234,0,0.05);
}

.bg-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }

/* Textura scanlines restaurada sobre el video */
.video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px);
    z-index: 1; pointer-events: none;
}

.video-marco-decorativo {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 2px solid var(--neon-yellow); 
    z-index: 2; pointer-events: none;
}

/* =========================================
   ELEMENTOS HUD
   ========================================= */
.hud-marco { position: fixed; width: 50px; height: 50px; border: 2px solid var(--neon-yellow); z-index: 9000; opacity: 0.5; pointer-events: none; }
.top-left { top: 30px; left: 30px; border-right: none; border-bottom: none; }
.top-right { top: 30px; right: 30px; border-left: none; border-bottom: none; }
.bottom-left { bottom: 30px; left: 30px; border-right: none; border-top: none; }
.bottom-right { bottom: 30px; right: 30px; border-left: none; border-top: none; }

/* (Eliminado .data-stream por completo) */

/* =========================================
   HEADER CYBER (Optimizado Extremo para 7 Enlaces)
   ========================================= */
.header-2099 {
    position: fixed; top: 0; width: 100%; 
    padding: 10px 3%; box-sizing: border-box; display: flex; justify-content: space-between; 
    align-items: center; gap: 15px; z-index: 9999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(8, 10, 11, 0.85); backdrop-filter: blur(10px);
}

.logo-link { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-imagen { height: 60px; width: auto; display: block; image-rendering: crisp-edges; filter: drop-shadow(0px 0px 8px var(--neon-yellow-glow)); transition: transform 0.3s ease; }
.logo-imagen:hover { transform: scale(1.05); }

.nav-cyber { display: flex; gap: 12px; align-items: center; justify-content: center; flex-grow: 1; }
.nav-cyber a { font-family: var(--font-display); font-size: 10px; color: white; text-decoration: none; letter-spacing: 1px; position: relative; transition: color 0.3s; padding: 4px 0; white-space: nowrap; }
.nav-cyber a::before, .nav-cyber a::after { position: absolute; opacity: 0; color: var(--neon-yellow); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); font-weight: 900; }
.nav-cyber a::before { content: '['; left: -10px; }
.nav-cyber a::after { content: ']'; right: -10px; }
.nav-cyber a:hover { color: var(--neon-yellow); text-shadow: 0 0 8px var(--neon-yellow-glow); }
.nav-cyber a:hover::before { opacity: 1; left: -6px; }
.nav-cyber a:hover::after { opacity: 1; right: -6px; }

.btn-cyber-outline { flex-shrink: 0; border: 1px solid var(--neon-yellow); padding: 10px 18px; color: var(--neon-yellow); font-family: var(--font-display); font-size: 11px; text-decoration: none; position: relative; overflow: hidden; letter-spacing: 1px; white-space: nowrap; }
.btn-cyber-outline:hover { background-color: var(--neon-yellow); color: var(--bg-dark); box-shadow: 0 0 20px var(--neon-yellow-glow); }

/* =========================================
   HERO CONTENT (Muro Izquierdo Antichoque)
   ========================================= */
.hero-holograma { height: 100vh; display: flex; align-items: center; padding: 0 5%; }

/* MURO DE CONTENCIÓN: Máximo 45% de la pantalla. Imposible tocar el video. */
.hero-contenido-central { 
    width: 45vw; 
    max-width: 800px; 
    position: relative; z-index: 10; padding-top: 50px; 
}

.etiqueta-sistema { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.2); padding: 8px 15px; font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; margin-bottom: 30px; background: rgba(0,0,0,0.5); }
.punto-rojo { width: 8px; height: 8px; background-color: #ff3333; border-radius: 50%; box-shadow: 0 0 10px red; }

.titulo-mega { font-family: var(--font-display); font-size: 70px; line-height: 1.1; margin: 0 0 30px 0; text-transform: uppercase; }
.texto-hueco { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8); }

.texto-descripcion { font-size: 18px; color: var(--tech-gray); line-height: 1.6; margin-bottom: 40px; border-left: 2px solid var(--neon-yellow); padding-left: 20px; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }

/* --- ESTRUCTURA DEL PANEL DE MANDO (La 'L' Invertida) --- */
.hero-acciones { display: flex; flex-direction: column; gap: 25px; align-items: flex-start;}

.btn-cyber-solid { background-color: var(--neon-yellow); color: var(--bg-dark); font-family: var(--font-display); font-weight: 900; padding: 15px 35px; font-size: 13px; text-decoration: none; letter-spacing: 2px; display: inline-flex; align-items: center; gap: 15px; transition: 0.3s; clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 0 100%); white-space: nowrap; }
.btn-cyber-solid:hover { background-color: white; transform: scale(1.05); }

/* Segundo Botón Transparente */
.btn-cyber-solid.alt { background-color: transparent; color: var(--neon-yellow); border: 2px solid var(--neon-yellow); }
.btn-cyber-solid.alt:hover { background-color: var(--neon-yellow); color: var(--bg-dark); border-color: var(--neon-yellow); }

/* Fila Inferior: Botón a la izquierda + Productos a la derecha */
.hero-fila-inferior { display: flex; flex-direction: row; align-items: center; gap: 30px; }

/* Contenedor de Productos 100% Horizontal */
.stats-holograma { display: flex; flex-direction: row; align-items: center; gap: 20px; font-family: var(--font-display); padding-left: 15px; border-left: 1px solid rgba(255, 234, 0, 0.3);}
.stat-dato h3 { color: white; margin: 0 0 5px 0; font-size: 16px; letter-spacing: 2px; text-shadow: 0 2px 5px black; white-space: nowrap;}
.stat-dato p { color: var(--neon-yellow); margin: 0; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;}
.stat-linea { width: 1px; height: 30px; background-color: rgba(255,255,255,0.2); }

@media (max-width: 1200px) {
    .header-2099 { flex-wrap: wrap; justify-content: center; padding: 15px; gap: 15px;}
    .nav-cyber { width: 100%; order: 3; } 
}

@media (max-width: 1024px) {
    .video-split-container { width: 100%; right: 0; opacity: 0.3; z-index: -15; border: none;}
    .hero-contenido-central { width: 100%; max-width: 100%; }
    .titulo-mega { font-size: 50px; }
    .hero-fila-inferior { flex-direction: column; align-items: flex-start; }
    .stats-holograma { border-left: none; padding-left: 0; padding-top: 15px; border-top: 1px solid rgba(255,234,0,0.3); flex-wrap: wrap;}
    .hud-marco { display: none; }
}

/* =========================================
   MATRIZ HOLOGRÁFICA ELÍPTICA (V3.0)
   ========================================= */
.seccion-matriz {
    position: relative;
    width: 100%;
    height: 100vh; /* ¡ESTO OBLIGA A ENCAJAR EN UNA SOLA PANTALLA! */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el título y el carrusel en el medio */
    align-items: center;
    overflow: hidden; /* Nada se sale del cuadro */
    background-color: #050505;
}

/* --- NUEVO: EL NÚCLEO CENTRAL (MARCA DE AGUA HOLOGRÁFICA) --- */
.matriz-nucleo-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0px);
    width: 380px; 
    height: auto;
    z-index: 1; 
    
    /* BAJAMOS LA OPACIDAD: Ahora es un fantasma tecnológico (25%) */
    opacity: 0.25; 
    /* Suavizamos el resplandor para que no encandile las letras */
    filter: drop-shadow(0 0 15px rgba(255, 234, 0, 0.3));
    
    pointer-events: none; 
    animation: nucleoRespiracion3D 4s ease-in-out infinite;
}

/* Animación de pulso adaptada a baja opacidad */
@keyframes nucleoRespiracion3D {
    0%, 100% { 
        filter: drop-shadow(0 0 15px rgba(255, 234, 0, 0.3)); 
        opacity: 0.2; /* Nivel más transparente */
        transform: translate(-50%, -50%) translateZ(0px) scale(1); 
    }
    50% { 
        filter: drop-shadow(0 0 25px rgba(255, 234, 0, 0.5)); 
        opacity: 0.4; /* Brilla un poco más pero sin estorbar */
        transform: translate(-50%, -50%) translateZ(0px) scale(1.03); 
    }
}

/* Ajuste del fondo para máxima oscuridad */
.matriz-fondo-imagen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #020202; /* Negro profundo para resaltar el núcleo */
    z-index: -2;
}
.matriz-capa-oscura {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* Un gradiente negro al 90% para que la foto se vea pero no compita con las tarjetas */
    background: linear-gradient(180deg, rgba(5,5,5,1) 0%, rgba(5,5,5,0.85) 50%, rgba(5,5,5,1) 100%);
    z-index: 2;
}

/* TÍTULOS */
.matriz-header { text-align: center; margin-bottom: 20px; position: relative; z-index: 20; }
.matriz-titulo { font-family: var(--font-display); font-size: 40px; margin: 0; letter-spacing: 5px; text-shadow: 0 0 15px black;}
.matriz-sub { font-family: var(--font-display); color: var(--tech-gray); font-size: 11px; letter-spacing: 3px; }

/* CONTROLES */
.holo-nav {
    position: absolute; top: 55%; transform: translateY(-50%);
    background: transparent; border: 1px solid var(--neon-yellow);
    color: var(--neon-yellow); font-size: 40px;
    width: 60px; height: 100px; cursor: pointer; z-index: 50; transition: 0.3s;
    font-family: var(--font-display); display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(5px);
}
.holo-nav:hover { background: var(--neon-yellow); color: var(--bg-dark); box-shadow: 0 0 20px var(--neon-yellow-glow); }
.prev { left: 5%; }
.next { right: 5%; }

/* MOTOR 3D */
.escenario-3d {
    position: relative; width: 100%; height: 480px;
    perspective: 1000px; display: flex; justify-content: center; align-items: center;
    z-index: 10;
}
.carrusel-3d { width: 320px; height: 450px; position: absolute; transform-style: preserve-3d; }

/* LA TARJETA (RESTAURADA A SU BELLEZA ORIGINAL) */
.holo-card {
    position: absolute; width: 320px; height: 460px;
    padding: 25px; box-sizing: border-box; display: flex; flex-direction: column;
    /* ESTE ES EL COLOR HERMOSO ORIGINAL */
    background: rgba(3, 3, 3, 0.5); 
    border: 1px solid rgba(255, 234, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 234, 0, 0.05), inset 0 0 30px rgba(0,0,0,0.8);
    transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    transform-style: preserve-3d;
}

.holo-projection-layer {
    position: relative; width: 100%; height: 150px; 
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 20px; z-index: 10; transform: translateZ(25px); 
}

.holo-projection-layer img {
    max-width: 100%; max-height: 100%; object-fit: contain; 
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.8)); transition: transform 0.4s ease;
}

.projection-glow {
    position: absolute; width: 70%; height: 15px; bottom: -10px;
    background: var(--neon-yellow); filter: blur(15px); opacity: 0.15; border-radius: 50%;
}

.holo-content { position: relative; z-index: 10; flex-grow: 1; display: flex; flex-direction: column; transform: translateZ(10px); }

/* EFECTOS HOVER (RESTAURADOS) */
.holo-card:hover { border-color: var(--neon-yellow); box-shadow: 0 0 40px var(--neon-yellow-glow), inset 0 0 30px rgba(0,0,0,0.9); background: rgba(15, 15, 15, 0.8); }
.holo-card:hover .holo-projection-layer img { transform: scale(1.15); }
.holo-card:hover .projection-glow { opacity: 0.4; }

.card-esquinas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.card-esquinas::before, .card-esquinas::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid var(--neon-yellow); opacity: 0.5; }
.card-esquinas::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.card-esquinas::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.holo-header { font-family: var(--font-display); font-size: 10px; color: var(--tech-gray); letter-spacing: 2px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px; }
.holo-title { font-family: var(--font-display); font-size: 18px; color: white; margin: 0 0 10px 0; line-height: 1.2; text-transform: uppercase; }
.holo-desc { font-size: 12px; color: #aaa; line-height: 1.4; flex-grow: 1; margin: 0 0 10px 0;}

/* CAJA DE DATOS ADAPTADA A TEXTO LARGO */
.holo-data { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-display); font-size: 9px; letter-spacing: 1px; margin-bottom: 15px; background: rgba(0,0,0,0.7); padding: 8px; border-left: 2px solid var(--neon-yellow); }
.holo-data span { white-space: normal; line-height: 1.3;} /* Permite doble línea sin deformarse */

.holo-btn { font-family: var(--font-display); font-size: 11px; color: var(--bg-dark); background-color: var(--neon-yellow); text-decoration: none; padding: 10px; text-align: center; font-weight: 900; letter-spacing: 2px; transition: 0.3s; margin-top: auto;}
.holo-btn:hover { background: white; box-shadow: 0 0 15px white; }

/* COMPRESIÓN PARA PANTALLAS DE LAPTOP */
@media (max-height: 800px) {
    .escenario-3d { transform: scale(0.85); } /* Si tu pantalla es baja, el carrusel se encoge un poco para encajar */
    .matriz-header { margin-bottom: 0; }
}

/* =========================================
   CINTA DE TELEMETRÍA (MARQUEE)
   ========================================= */
/* La cinta es independiente, sirve de puente entre bloques */
.telemetria-marquee {
    width: 100%; background-color: var(--neon-yellow); 
    padding: 18px 0; overflow: hidden; position: relative; z-index: 20; 
    box-shadow: 0 0 25px var(--neon-yellow-glow); 
    transform: skewY(-1.5deg); 
    /* LA MAGIA OCURRE AQUÍ: 120px de espacio oscuro arriba y abajo */
    margin: 120px 0; 
}
.marquee-track { display: inline-flex; white-space: nowrap; animation: scroll-telemetria 35s linear infinite; }
.marquee-track span { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--bg-dark); padding: 0 20px; letter-spacing: 3px; }
@keyframes scroll-telemetria { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* =========================================
   NODOS DE INFRAESTRUCTURA (BLOQUE 3: Ajuste Perfecto)
   ========================================= */
.seccion-nodos { 
    position: relative;
    width: 100%;
    /* RECUPERA SU 100% ABSOLUTO */
    height: 100vh; 
    display: flex;
    align-items: center; 
    justify-content: center;
    z-index: 10; 
    overflow: hidden; 
    
    background-color: #0b0c0d;
    background-image: 
        radial-gradient(circle at 80% 20%, rgba(255, 234, 0, 0.04) 0%, transparent 50%),
        repeating-radial-gradient(circle, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 4px),
        repeating-linear-gradient(45deg, rgba(0,0,0,0.3) 0px, rgba(0,0,0,0.3) 2px, transparent 2px, transparent 4px); 
}

.nodos-container { 
    display: flex; gap: 80px; align-items: center; 
    max-width: 1300px; width: 90%; margin: 0 auto; 
    /* Compresión interna para asegurar que la imagen y texto no toquen los bordes */
    max-height: 90%;
}

/* Izquierda: Visualizador Holográfico */
.nodo-visual { flex: 1; position: relative; }
.marco-cyber { 
    position: relative; border: 1px solid var(--tech-gray); 
    padding: 10px; background: rgba(0,0,0,0.5); 
    border-radius: 3px; overflow: hidden; transition: border-color 0.4s ease; 
}
.marco-cyber:hover { border-color: var(--neon-yellow); box-shadow: 0 0 40px var(--neon-yellow-glow); }
.marco-cyber img { 
    width: 100%; display: block; 
    filter: grayscale(90%) contrast(120%) sepia(20%) hue-rotate(180deg) brightness(0.6); 
    transition: filter 0.5s ease; 
}
.marco-cyber:hover img { filter: grayscale(0%) brightness(1); }

.scanline { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--neon-yellow); opacity: 0.6; box-shadow: 0 0 15px var(--neon-yellow); animation: escaneo 4s linear infinite; }
@keyframes escaneo { 0% { top: -10px; } 100% { top: 100%; } }
.coordenadas { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 11px; color: var(--tech-gray); margin-top: 15px; letter-spacing: 2px; }

/* Derecha: Identidad Corporativa (Original) */
.nodo-datos { flex: 1; }
.lista-nodos { display: flex; flex-direction: column; gap: 20px; }
.nodo-item { 
    display: flex; gap: 25px; padding: 25px; 
    background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255,255,255,0.05); 
    border-left: 4px solid var(--tech-gray); transition: all 0.3s ease; cursor: default; 
    backdrop-filter: blur(4px); 
}
.nodo-item:hover { background: rgba(255, 234, 0, 0.05); border-left: 4px solid var(--neon-yellow); transform: translateX(15px); box-shadow: inset 30px 0 30px -30px var(--neon-yellow-glow); }
.nodo-icono { font-family: var(--font-display); font-size: 35px; font-weight: 900; color: var(--tech-gray); transition: color 0.3s ease; }
.nodo-item:hover .nodo-icono { color: var(--neon-yellow); text-shadow: 0 0 15px var(--neon-yellow-glow); }
.nodo-texto h4 { font-family: var(--font-display); font-size: 16px; color: white; margin: 0 0 8px 0; letter-spacing: 1px; }
.nodo-texto p { color: #aaa; font-size: 14px; margin: 0; line-height: 1.6; }

/* Animaciones Controladas por JS */
.animar-fade { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.animar-fade.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.3s; } .delay-3 { transition-delay: 0.5s; }

/* Compresión Inteligente para Laptops (Evita que estalle en pantallas pequeñas) */
@media (max-height: 850px) {
    .nodos-container { transform: scale(0.88); } /* Reduce la escala un 12% para encajar */
}
@media (max-width: 1024px) {
    .nodos-container { flex-direction: column; transform: scale(1); padding-top: 50px;}
    .seccion-nodos { height: auto; padding: 100px 0; } 
    .telemetria-marquee { transform: skewY(0deg); }
}

/* =========================================
   EL REACTOR DE PROCESOS (WHEEL SCROLL)
   ========================================= */
.seccion-reactor {
    height: 400vh;
    background-color: var(--bg-dark);
    position: relative;
    z-index: 15;
    margin-top: 120px; /* Abismo de entrada */
    margin-bottom: 120px; /* NUEVO: Abismo de salida hacia el Bloque 5 */
}

.reactor-sticky {
    position: sticky;
    top: 75px; /* Empieza justo debajo de la barra superior */
    height: calc(100vh - 75px); /* Encaja perfectamente sin salirse por abajo */
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* --- FONDOS DE PANTALLA COMPLETA --- */
.reactor-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0; 
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.reactor-bg.activa { opacity: 1; }

.reactor-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center; /* Centra la imagen para evitar zoom extraño */
    filter: none; /* IMÁGENES 100% CLARAS Y CON SUS COLORES REALES */
}

/* Sombra ultra-sutil solo para ayudar un mínimo a las letras */
/* LA MAGIA PARA LEER SIN OSCURECER TODA LA FOTO */
.bg-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Restaurado a la sombra original sutil */
    background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 40%, transparent 100%);
    z-index: 1;
}

.reactor-info, .reactor-rueda-container { z-index: 10; }

.reactor-info { 
    width: 42%; /* ¡CORRECCIÓN! Reducido para que jamás toque el núcleo derecho */
    padding-left: 8%; 
    position: relative; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    z-index: 20; 
}

.reactor-header { 
    position: absolute; 
    top: 18%; /* Lo bajamos un poco para que no choque con el techo */
    font-family: var(--font-display); 
    font-size: 11px; 
    color: var(--neon-yellow); 
    letter-spacing: 3px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.9); 
}

.reactor-fase { position: absolute; top: 50%; transform: translateY(-20px); opacity: 0; pointer-events: none; transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reactor-fase.activa { opacity: 1; transform: translateY(-50%); pointer-events: auto; }

.fase-num { font-family: var(--font-display); font-size: 16px; color: var(--neon-yellow); margin-bottom: 10px; letter-spacing: 2px; text-shadow: 0 2px 10px rgba(0,0,0,0.9); }

/* LA MAGIA PARA LEER SIN OSCURECER EL FONDO */
.texto-sombra {
    text-shadow: 0px 4px 20px rgba(0,0,0,1), 0px 2px 5px rgba(0,0,0,1) !important;
}

/* --- NUEVO: PANEL DE TELEMETRÍA Y PROGRESO --- */
.panel-telemetria {
    margin-top: 35px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    padding-top: 15px;
    max-width: 90%; /* Asegura que la línea no se estire demasiado */
}

.telemetria-datos {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--neon-yellow);
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-shadow: 0 2px 5px black;
}

.telemetria-barra-fondo {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.barra-progreso-activa {
    height: 100%;
    background: var(--neon-yellow);
    box-shadow: 0 0 10px var(--neon-yellow);
    /* La barra empieza en 0 y crece suavemente cuando la fase aparece */
    width: 0%; 
    transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
}

/* Cuando el JS de tu página le pone "activa" a la fase, la barra se llena al % que le indiquemos en el HTML */
.reactor-fase.activa .barra-progreso-activa {
    width: var(--progreso);
}

.reactor-rueda-container { position: absolute; right: -25vw; top: 50%; transform: translateY(-50%); width: 70vw; height: 70vw; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.medidor-grados { position: absolute; left: 10%; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 14px; color: var(--neon-yellow); z-index: 100; text-shadow: 0 0 10px rgba(0,0,0,0.9); }

.anillo-exterior { position: absolute; width: 100%; height: 100%; border: 1px dashed rgba(255, 255, 255, 0.4); border-radius: 50%; box-shadow: inset 0 0 20px rgba(0,0,0,0.3); }
.marca { position: absolute; font-family: var(--font-display); font-size: 12px; color: white; letter-spacing: 2px; text-shadow: 0 2px 5px rgba(0,0,0,0.9); }
.m1 { top: 10px; left: 50%; transform: translateX(-50%); }
.m2 { bottom: 10px; left: 50%; transform: translateX(-50%); }
.m3 { left: 10px; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.m4 { right: 10px; top: 50%; transform: translateY(-50%) rotate(90deg); }

.anillo-interior { position: absolute; width: 75%; height: 75%; border: 2px solid rgba(255, 234, 0, 0.2); border-top: 5px solid var(--neon-yellow); border-bottom: 5px solid var(--neon-yellow); border-radius: 50%; filter: drop-shadow(0 0 15px rgba(0,0,0,0.5)); }

/* EL NÚCLEO TRANSPARENTE DE CRISTAL */
.reactor-nucleo {
    position: absolute; width: 25%; height: 25%;
    background: rgba(0, 0, 0, 0.15); /* Súper transparente */
    backdrop-filter: blur(4px); /* Efecto vidrio para no perder la foto */
    border: 2px solid var(--neon-yellow); border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    overflow: hidden;
}

.nucleo-texto { font-family: var(--font-display); font-size: 16px; font-weight: 900; color: white; text-align: center; letter-spacing: 3px; text-shadow: 0 2px 10px rgba(0,0,0,0.9); z-index: 30; }
.nucleo-pulso { position: absolute; width: 100%; height: 100%; border: 2px solid var(--neon-yellow); border-radius: 50%; animation: pulso-reactor 2s infinite; z-index: 20; pointer-events: none; }
.nucleo-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(255,255,255,0.1) 2px, transparent 2px); background-size: 8px 8px; z-index: 10; pointer-events: none; }

/* Responsivo */
@media (max-width: 1024px) {
    .reactor-info { width: 100%; padding: 0 5%; z-index: 20; background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); }
    .reactor-rueda-container { right: -50vw; width: 120vw; height: 120vw; opacity: 0.5; }
}

/* =========================================
   SIMULADOR TÁCTICO DE ESTRÉS GEOGRÁFICO
   ========================================= */
.seccion-simulador {
    height: 100vh; /* Encuadre perfecto de una pantalla */
    
    /* MODIFICACIÓN: Abismo superior ligeramente reducido para dar aire al mapa */
    padding: 100px 5% 40px 5%; 
    box-sizing: border-box; 
    position: relative; 
    z-index: 20; 
    display: flex;
    align-items: center; /* Centra la consola en la pantalla */
    justify-content: center;
    margin-top: 0;

    /* --- NUEVO: FONDO DE PANTALLA DEL BLOQUE --- */
    /* ¡IMPORTANTE! Reemplaza 'ruta_de_tu_foto_de_fondo.jpg' por la ruta real de tu imagen */
    background-image: url('fondotermo.png'); 
    background-size: cover; /* Calza perfectamente cubriendo todo el bloque */
    background-position: center; /* Centrada */
    background-repeat: no-repeat;
}

.consola-container {
    display: flex; gap: 40px; /* Más aire entre el mapa y los controles */
    max-width: 1400px; width: 100%; margin: 0 auto;
    background: rgba(5,5,5,0.8); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 5px; 
    padding: 30px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    height: 78vh; /* Aumentamos la altura de la consola para que el mapa crezca */
}

/* --- PANEL RADAR (IZQUIERDA) --- */
/* --- PANEL RADAR (PERFECCIÓN PROPORCIONAL) --- */
.panel-radar {
    flex: none; /* Evita que el contenedor se deforme por otras cajas */
    
    /* ELIMINAMOS EL aspect-ratio: 4/5 */
    height: 100%; /* Toma todo el alto de la consola */
    /* El ancho lo determinará la imagen sola */
    
    position: relative;
    border: 2px solid var(--tech-gray);
    border-radius: 8px;
    overflow: hidden;
    background: #020b14;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 234, 0, 0.1);
}

.peru-map { 
    height: 100%; 
    width: auto; /* LA MAGIA: El ancho se ajusta automáticamente a la proporción original de tu foto */
    display: block; /* Elimina cualquier espacio fantasma por debajo de la imagen */
    
    /* ELIMINAMOS object-fit: cover; Ya no hace falta porque la imagen dicta su propio tamaño */
    
    filter: grayscale(60%) contrast(150%) brightness(0.5) sepia(20%) hue-rotate(180deg); 
    opacity: 0.95; transition: filter 0.5s ease; 
}

.radar-sweep { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 70%, rgba(255, 234, 0, 0.3) 100%); animation: giro-radar 5s linear infinite; mix-blend-mode: screen; pointer-events: none; }
@keyframes giro-radar { 100% { transform: rotate(360deg); } }
.radar-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255,234,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,234,0,0.1) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; }
.coordenadas-radar { 
    position: absolute; top: 15px; left: 50%; transform: translateX(-50%); 
    font-family: var(--font-display); font-size: 10px; color: white; 
    background: rgba(0,0,0,0.8); padding: 5px 15px; border: 1px solid var(--tech-gray); 
    z-index: 40; 
    
    /* LA MAGIA PARA QUE NO CHOQUE: */
    width: 85%; /* Se mantiene lejos de los bordes del mapa */
    max-width: 350px; 
    text-align: center; 
    white-space: normal; /* Permite salto a segunda línea si la ciudad es larga */
    line-height: 1.5;
}

/* --- NODOS DE CIUDADES (TAMAÑO FIJO, BRILLO AL HOVER) --- */
.nodo-ciudad { 
    position: absolute; width: 6px; height: 6px; background: rgba(255, 255, 255, 0.5); 
    border-radius: 50%; cursor: pointer; transition: all 0.3s ease; z-index: 20; 
    box-shadow: 0 0 10px rgba(255,255,255,0.3); 
}

.nodo-ciudad:hover { 
    /* ELIMINADO EL SCALE que inflaba las letras. Ahora solo brilla intensamente. */
    background: white; 
    box-shadow: 0 0 15px var(--neon-yellow), 0 0 30px white; 
    z-index: 100;
}

/* --- CAJA DEL NOMBRE DE LA CIUDAD --- */
.nodo-ciudad .tooltip { 
    position: absolute; top: -14px; left: 15px; 
    font-family: var(--font-display); font-size: 10px; color: white; 
    background: rgba(0,0,0,0.95); padding: 6px 10px; border: 1px solid rgba(255,255,255,0.3); 
    white-space: nowrap; opacity: 0; pointer-events: none; transition: 0.3s; 
    letter-spacing: 1px; text-align: center; 
}
.nodo-ciudad.edge-right .tooltip { left: auto; right: 15px; }
.nodo-ciudad:hover .tooltip { opacity: 1; border-color: var(--neon-yellow); }

/* --- NUEVO: ESTILO DEL DEPARTAMENTO --- */
.tooltip-dep {
    display: block;
    font-size: 8px; /* Más pequeño para dar jerarquía */
    color: var(--neon-yellow);
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.2); /* Línea divisoria elegante */
    letter-spacing: 2px;
}

/* COORDENADAS ORIGINALES Y CALIBRADAS */
.n-puno { top: 85%; left: 87.7%; }
.n-talara { top: 25.7%; left: 0.4%; }
.n-piura { top: 28.4%; left: 5.5%; }
.n-tumbes { top: 20.3%; left: 7%; }
.n-lima { top: 64.5%; left: 33.6%; width: 12px; height: 12px; border: 2px solid var(--neon-yellow); background: rgba(0,0,0,0.5); }
.n-ptomaldonado { top: 68.1%; left: 94.5%; }
.n-iquitos { top: 20.7%; left: 63.4%; }
.n-pucallpa { top: 45.5%; left: 53.4%; }
.n-chimbote { top: 49%; left: 21.1%; }
.n-trujillo { top: 44%; left: 17.8%; }
.n-chiclayo { top: 37.1%; left: 11.3%; }
.n-moquegua { top: 91.5%; left: 80.5%; }
.n-arequipa { top: 87.5%; left: 76%; }
.n-juliaca { top: 83.3%; left: 87%; }
.n-callao { top: 64.8%; left: 33%; }
.n-pisco { top: 74.3%; left: 40.3%; }
.n-ica { top: 75.7%; left: 44.5%; }
.n-tacna { top: 96%; /* TU VALOR ORIGINAL, SIN CAMBIOS */ left: 85.3%; }
.n-tacna .tooltip {
    top: auto;
    bottom: 15px;
}

.n-abancay { top: 73.7%; left: 66.5%; }
.n-cusco { top: 73%; left: 73.5%; }
.n-ayacucho { top: 71.6%; left: 54.9%; }
.n-huancavelica { top: 69.2%; left: 50.2%; }
.n-huancayo { top: 65.4%; left: 47.8%; }
.n-cerropasco { top: 58.2%; left: 39.4%; }
.n-huanuco { top: 54.1%; left: 39.8%; }
.n-huaraz { top: 51.7%; left: 29.3%; }
.n-cajamarca { top: 38.7%; left: 21.8%; }
.n-tarapoto { top: 35.2%; left: 38.8%; }
.n-moyobamba { top: 32.9%; left: 34%; }
.n-chachapoyas { top: 33.3%; left: 26%; }

/* --- PANEL CONTROLES Y NUEVO HEADER (DERECHA) --- */
.panel-controles { 
    flex: 1.5; /* Le damos más espacio al panel de datos para que el título respire */
    display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; 
}

/* El nuevo estilo del título reubicado */
.simulador-header { 
    text-align: left; /* Alineado a la izquierda como consola real */
    margin-bottom: 10px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Línea divisoria elegante */
    padding-bottom: 15px;
}
.matriz-titulo { font-family: var(--font-display); font-size: 34px; margin: 0; letter-spacing: 3px; text-shadow: 0 0 15px black; line-height: 1.1;}
.matriz-sub { font-family: var(--font-display); color: var(--tech-gray); font-size: 10px; letter-spacing: 2px; margin-top: 8px; }

.control-grupo { margin-bottom: 5px; }
.control-grupo label { display: block; font-family: var(--font-display); font-size: 12px; color: white; margin-bottom: 8px; letter-spacing: 2px; }

.slider-cyber { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; outline: none; position: relative; }
.slider-cyber::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--bg-dark); border: 2px solid var(--neon-yellow); cursor: pointer; transform: rotate(45deg); box-shadow: 0 0 15px rgba(255,255,255,0.2); transition: 0.2s; }
.slider-cyber::-webkit-slider-thumb:hover { background: white; transform: rotate(45deg) scale(1.2); }
.marcas-rango { display: flex; justify-content: space-between; font-family: var(--font-text); font-size: 10px; color: var(--tech-gray); margin-top: 5px; }

/* PANTALLA DE RESULTADOS Y BOTÓN */
.pantalla-diagnostico { 
    flex-grow: 1;
    background: rgba(0,0,0,0.6); border: 1px solid var(--tech-gray); 
    padding: 15px; 
    border-left: 4px solid var(--tech-gray); margin-top: 10px; transition: all 0.4s ease; 
    display: flex; flex-direction: column; justify-content: space-between;
}
.pantalla-diagnostico.calculando { filter: blur(4px) sepia(100%) hue-rotate(180deg); opacity: 0.5; }

.diag-header { font-family: var(--font-display); font-size: 10px; color: var(--tech-gray); letter-spacing: 2px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }

#contenido-diagnostico { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px;}
.bot-alerta { font-family: var(--font-display); font-size: 11px; letter-spacing: 1px; padding-bottom: 5px; border-bottom: 1px dashed; }
.bot-alerta.frio { color: #00c8ff; border-bottom-color: rgba(0, 200, 255, 0.3); text-shadow: 0 0 10px rgba(0,200,255,0.5); }
.bot-alerta.calor { color: #ff3333; border-bottom-color: rgba(255, 51, 51, 0.3); text-shadow: 0 0 10px rgba(255,0,0,0.5); }
.bot-alerta.neutro { color: var(--neon-yellow); border-bottom-color: rgba(255, 234, 0, 0.3); text-shadow: 0 0 10px rgba(255,234,0,0.5); }

.bot-nucleo span { display: block; font-family: var(--font-display); font-size: 9px; color: var(--tech-gray); margin-bottom: 2px; }
.bot-nucleo strong { font-family: var(--font-display); font-size: 14px; color: white; display: block; margin-bottom: 2px;}
.bot-nucleo p { font-size: 12px; color: #aaa; margin: 0; line-height: 1.4;}

.bot-liquidos { background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.1); padding: 10px; border-left: 3px solid var(--tech-gray); }
.bot-liquidos span { display: block; font-family: var(--font-display); font-size: 9px; color: var(--tech-gray); margin-bottom: 5px; }
.bot-liquidos ul { list-style: none; padding: 0; margin: 0; font-size: 12px; color: white; }
.bot-liquidos li { margin-bottom: 4px; }
.bot-liquidos li::before { content: '▸'; color: var(--neon-yellow); margin-right: 6px; }
.diag-desc { font-size: 12px; color: #bbb; line-height: 1.5; margin: 0; }

.pantalla-diagnostico .btn-cyber-solid { 
    width: 100% !important; box-sizing: border-box !important; 
    justify-content: center; margin-top: auto; font-size: 11px; padding: 10px;
}

/* =========================================
   TERMINAL DE ENLACE B2B (BLOQUE 6 - ENCUADRE 100VH)
   ========================================= */
.seccion-terminal {
    height: 100vh; /* Encuadre estricto de una pantalla */
    padding: 70px 5% 15px 5%; /* Colchón superior e inferior optimizado */
    box-sizing: border-box;
    display: flex;
    align-items: center; 
    justify-content: center;
    position: relative;
    z-index: 20;
    background-color: #020b14; /* Estética original: Azulado oscuro industrial */
}

.terminal-container {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    max-height: 85vh; /* Límite de seguridad para no romper la pantalla */
    display: flex;
    flex-direction: column;
}

.terminal-header { text-align: center; margin-bottom: 10px; }

.consola-contacto {
    display: flex; gap: 20px;
    background: rgba(5,5,5,0.85); 
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px; 
    padding: 20px 25px; /* Padding interno reducido para ganar espacio */
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    border-top: 3px solid var(--neon-yellow);
    flex-grow: 1; 
}

/* --- PANEL IZQUIERDO (Info Técnica) --- */
.info-operativa { flex: 1; border-right: 1px dashed var(--tech-gray); padding-right: 30px; }
.info-operativa h3 { font-family: var(--font-display); font-size: 16px; color: white; letter-spacing: 2px; margin-bottom: 20px; border-bottom: 2px solid var(--neon-yellow); padding-bottom: 8px; display: inline-block; }
.datos-lista { list-style: none; padding: 0; margin: 0; }
.datos-lista li { font-family: var(--font-text); font-size: 12px; color: #ccc; margin-bottom: 12px; letter-spacing: 1px; }
.decoracion-tech { margin-top: 20px; height: 4px; background: rgba(255,255,255,0.1); width: 100%; position: relative; overflow: hidden; }
.barra-progreso-falsa { position: absolute; top: 0; left: 0; height: 100%; width: 30%; background: var(--neon-yellow); animation: escaneo-datos 3s infinite linear; }
@keyframes escaneo-datos { 0% { left: -30%; } 100% { left: 100%; } }

/* --- PANEL DERECHO (Formulario Cibernético) --- */
.cyber-form { flex: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 5px;}

/* Títulos de las secciones ultracompactos */
.form-seccion-titulo { 
    font-family: var(--font-display); font-size: 11px; color: var(--neon-yellow); 
    margin: 8px 0 4px 0; border-bottom: 1px dashed rgba(255,234,0,0.3); 
    padding-bottom: 2px; letter-spacing: 2px; 
}
.form-seccion-titulo:first-of-type { margin-top: 0; }

.input-fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.input-fila-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.input-fila-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }

/* ELIMINADOS LOS MÁRGENES EXTERNOS EN CONFLICTO */
.input-grupo { position: relative; width: 100%; }

/* EL ESPACIO EXACTO PARA QUE LA LETRA FLOTE POR ENCIMA */
.input-grupo { position: relative; width: 100%; margin-top: 15px; }

/* ESTILOS DE LOS CAMPOS (Letra de digitación más grande) */
.input-grupo input, .cyber-form select {
    width: 100%; 
    height: 38px; 
    padding: 10px; /* Padding normalizado */
    background: rgba(0,0,0,0.6); 
    border: 1px solid var(--tech-gray); 
    color: white; 
    font-family: var(--font-display); 
    font-size: 13px; /* MAGIA: El texto que el cliente escribe ahora es grande y legible */
    outline: none; 
    transition: 0.3s ease; 
    box-sizing: border-box;
}

/* Ajuste específico para selects (tamaño de letra controlado para que quepan los nombres largos) */
.cyber-form select { padding: 8px 10px; cursor: pointer; font-size: 10px; }
.cyber-form select:focus, .input-grupo input:focus { border-color: var(--neon-yellow); box-shadow: 0 0 10px rgba(255,234,0,0.2); }
.cyber-form select:disabled { opacity: 0.3; cursor: not-allowed; border-color: rgba(255,255,255,0.1); background: rgba(0,0,0,0.8); }

/* LABEL FLOTANTE EXTERNO */
.input-grupo label {
    position: absolute; 
    top: 12px; /* Posición inicial centrada en la caja */
    left: 10px; 
    font-family: var(--font-display); 
    font-size: 11px;
    color: var(--tech-gray); 
    pointer-events: none; 
    transition: 0.3s ease; 
    letter-spacing: 1px;
}

/* La letra sube HACIA AFUERA de la caja y se pone amarilla */
.input-grupo input:focus ~ label, .input-grupo input:not(:placeholder-shown) ~ label {
    top: -16px; /* Sube por encima de la línea superior */
    left: 0;
    font-size: 10px; /* Tamaño perfecto y legible */
    color: var(--neon-yellow); 
}

/* Efecto Escáner */
.linea-escaner {
    position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
    background: var(--neon-yellow); transition: 0.4s ease; transform: translateX(-50%);
}
.input-grupo input:focus ~ .linea-escaner { width: 100%; box-shadow: 0 0 10px var(--neon-yellow); }

/* --- BOTÓN DE TRANSMISIÓN --- */
.btn-transmitir {
    background: transparent; border: 1px solid var(--neon-yellow); color: var(--neon-yellow);
    padding: 10px 25px; font-family: var(--font-display); font-size: 12px; letter-spacing: 2px;
    cursor: pointer; position: relative; overflow: hidden; display: inline-block;
    align-self: flex-end; transition: 0.3s;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    margin-top: 10px !important;
}
.btn-transmitir::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: var(--neon-yellow); transition: 0.4s ease; z-index: -1;
}
.btn-transmitir:hover { color: black; font-weight: bold; }
.btn-transmitir:hover::before { left: 0; }

/* =========================================
   FOOTER B2B - CENTRO DE COMANDO
   ========================================= */
.interdym-footer {
    background-color: #01060b; /* Fondo ultra oscuro para dar peso visual a la base */
    border-top: 2px solid var(--tech-gray);
    padding: 50px 5% 20px 5%;
    font-family: var(--font-text);
    color: #888;
    position: relative;
    z-index: 20;
}

/* --- VERSÍCULO BÍBLICO --- */
.footer-versiculo {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
.footer-versiculo p {
    font-family: 'Georgia', serif; /* Tipografía elegante y clásica */
    font-style: italic;
    font-size: 15px;
    color: #b0b0b0;
    letter-spacing: 1px;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}
.versiculo-ref {
    display: block;
    margin-top: 15px;
    font-family: var(--font-display);
    font-style: normal;
    font-size: 10px;
    color: var(--neon-yellow);
    letter-spacing: 3px;
}

/* --- GRID DE 4 COLUMNAS --- */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto 50px auto;
}

.footer-col h4 {
    font-family: var(--font-display);
    font-size: 11px;
    color: white;
    letter-spacing: 2px;
    margin-bottom: 25px;
    border-left: 3px solid var(--neon-yellow);
    padding-left: 10px;
}

/* Identidad */
.marca-col h3 {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 4px;
    margin-bottom: 15px;
}
.desc-marca {
    font-size: 12px;
    line-height: 1.6;
    color: #999;
}

/* Enlaces (Links) */
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 15px; font-size: 11px; color: #999; font-family: var(--font-display); letter-spacing: 1px;}
.footer-links a { color: #999; text-decoration: none; transition: 0.3s; display: inline-block; }
.footer-links a:hover { color: var(--neon-yellow); transform: translateX(5px); }

/* --- REDES SOCIALES (Botonera Táctica) --- */
.redes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.red-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: 1px solid var(--tech-gray);
    color: #ccc;
    font-family: var(--font-display);
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(0,0,0,0.5);
    letter-spacing: 1px;
}
.red-link:hover {
    background: var(--neon-yellow);
    color: black;
    border-color: var(--neon-yellow);
    font-weight: bold;
    box-shadow: 0 0 15px rgba(255,234,0,0.3);
}

/* --- FRANJA BASE (Legal y Status) --- */
.footer-legal {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 25px;
    max-width: 1400px;
    margin: 0 auto;
}
.legal-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-family: var(--font-display);
    letter-spacing: 1px;
    color: #666;
}
.status-terminal {
    color: #0f0; /* Verde terminal de sistema operativo */
    display: flex;
    align-items: center;
    gap: 10px;
}
.punto-verde {
    width: 8px;
    height: 8px;
    background-color: #0f0;
    border-radius: 50%;
    box-shadow: 0 0 10px #0f0;
    animation: latido-terminal 1.5s infinite;
}

@keyframes latido-terminal {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* --- RESPONSIVE PARA MÓVILES --- */
@media (max-width: 1000px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; }
    .legal-content { flex-direction: column; gap: 15px; text-align: center; }
}