/* =========================================
   INICIO.CSS // EXCLUSIVO DE INDEX.HTML
   ========================================= */

/* HERO HOLOGRAMA */
.hero-holograma { height: 100vh; display: flex; align-items: flex-start; padding: 0 5%; position: relative; }
.hero-contenido-central { width: 45%; position: relative; z-index: 10; padding-top: clamp(110px, 22vh, 220px); }
.titulo-mega { font-family: var(--font-display); font-size: clamp(50px, 4.5vw, 68px); 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); }
.text-neon { color: var(--neon-yellow); text-shadow: 0 0 10px rgba(255, 234, 0,0.4); }
.texto-descripcion { font-size: clamp(14px, 1.2vw, 19px); color: var(--tech-gray); line-height: 1.6; text-align: justify; margin-bottom: 40px; border-left: 2px solid var(--neon-yellow); padding-left: clamp(15px, 1.5vw, 22px); text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.hero-acciones { display: flex; flex-direction: column; gap: clamp(20px, 2vw, 28px); align-items: flex-start;}
.hero-fila-inferior { display: flex; flex-direction: row; align-items: center; gap: clamp(20px, 2.5vw, 32px); margin-top: 0; }
.stats-holograma { display: flex; flex-direction: row; align-items: center; gap: clamp(10px, 1.5vw, 22px); font-family: var(--font-display); padding-left: clamp(10px, 1.5vw, 15px); border-left: 1px solid rgba(255, 234, 0, 0.3);}
.stat-dato h3 { color: white; margin: 0 0 5px 0; font-size: clamp(12px, 1.1vw, 16px); letter-spacing: 2px; text-shadow: 0 2px 5px black; white-space: nowrap;}
.stat-dato p { color: var(--neon-yellow); margin: 0; font-size: clamp(8px, 0.6vw, 10px); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;}
.stat-linea { width: 1px; height: 30px; background-color: rgba(255,255,255,0.2); }

/* MATRIZ HOLOGRÁFICA ELÍPTICA (V3.0) */
.seccion-matriz { position: relative; width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; background-color: #040b11; }
.matriz-nucleo-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(0px); width: 380px; height: auto; z-index: 1; opacity: 0.25; filter: drop-shadow(0 0 15px rgba(255, 234, 0, 0.3)); pointer-events: none; animation: nucleoRespiracion3D 4s ease-in-out infinite; }
@keyframes nucleoRespiracion3D { 0%, 100% { filter: drop-shadow(0 0 15px rgba(255, 234, 0, 0.3)); opacity: 0.2; transform: translate(-50%, -50%) translateZ(0px) scale(1); } 50% { filter: drop-shadow(0 0 25px rgba(255, 234, 0, 0.5)); opacity: 0.4; transform: translate(-50%, -50%) translateZ(0px) scale(1.03); } }
.matriz-fondo-imagen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #020b14; z-index: -2; }
.matriz-capa-oscura { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(4,11,20,1) 0%, rgba(4,11,20,0.85) 50%, rgba(4,11,20,1) 100%); z-index: 2; }
.matriz-header { 
    text-align: center; 
    margin-bottom: 20px; 
    position: relative; 
    z-index: 20; 
    transform: translateY(-40px); /* ESTE ES TU CONTROL MAESTRO */
}
.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; }
.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%; }
.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; }
.holo-card { position: absolute; width: 320px; height: 460px; padding: 25px; box-sizing: border-box; display: flex; flex-direction: column; background: rgba(5,13,21, 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); }
.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;}
.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;}
.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; }

/* CINTA DE TELEMETRÍA (MARQUEE) */
.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); 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 */
.seccion-nodos { position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 10; overflow: hidden; background-color: #050d15; background-image: radial-gradient(circle at 80% 20%, rgba(24,51,76,0.3) 0%, transparent 50%), repeating-radial-gradient(circle, rgba(24,51,76,0.1) 0px, rgba(24,51,76,0.1) 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; max-height: 90%; }
.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; }
.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; }
.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; }

/* EL REACTOR DE PROCESOS */
.seccion-reactor { height: 400vh; background-color: var(--bg-dark); position: relative; z-index: 15; margin-top: 120px; margin-bottom: 120px; }
.reactor-sticky { position: sticky; top: 75px; height: calc(100vh - 75px); display: flex; align-items: center; overflow: hidden; }
.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; }
.bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 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 { width: 42%; padding-left: 8%; position: relative; height: 100vh; display: flex; flex-direction: column; justify-content: center; z-index: 20; }
.reactor-header { position: absolute; top: 18%; 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); }
.texto-sombra { text-shadow: 0px 4px 20px rgba(0,0,0,1), 0px 2px 5px rgba(0,0,0,1) !important; }
.panel-telemetria { margin-top: 35px; border-top: 1px dashed rgba(255, 255, 255, 0.2); padding-top: 15px; max-width: 90%; }
.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); width: 0%; transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s; }
.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)); }
.reactor-nucleo { position: absolute; width: 25%; height: 25%; background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(4px); 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; }

/* SIMULADOR TÁCTICO DE ESTRÉS GEOGRÁFICO */
.seccion-simulador { height: auto; min-height: 100vh; padding: 100px 5% 40px 5%; box-sizing: border-box; position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; margin-top: 0; background-color: transparent; }
.consola-container { display: flex; gap: 40px; max-width: 1400px; width: 100%; margin: 0 auto; background: rgba(5, 13, 21, 0.85); background-image: repeating-linear-gradient(45deg, rgba(24,51,76,0.15) 0px, rgba(24,51,76,0.15) 1px, transparent 1px, transparent 4px); border: 1px solid rgba(255, 234, 0, 0.15); border-radius: 12px; padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.9), inset 0 0 60px rgba(0,0,0,0.8); backdrop-filter: blur(12px); height: auto; align-items: stretch; }
.panel-radar { flex: 0.8; position: relative; border: none; background: transparent; box-shadow: none; overflow: hidden; border-radius: 8px; display: flex; align-items: center; }
.peru-map { width: 100%; height: auto; display: block; filter: grayscale(60%) contrast(150%) brightness(0.6) 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.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 234, 0,0.08) 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; width: 85%; max-width: 350px; text-align: center; white-space: normal; line-height: 1.5; }
.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 { background: white; box-shadow: 0 0 15px var(--neon-yellow), 0 0 30px white; z-index: 100; }
.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); }
.tooltip-dep { display: block; font-size: 8px; color: var(--neon-yellow); margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.2); letter-spacing: 2px; }

/* Coordenadas */
.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%; 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 { flex: 1.5; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; }
.simulador-header { text-align: left; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 15px; }
.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-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; }


/* INICIO RESPONSIVE */
@media (max-height: 850px) { .nodos-container { transform: scale(0.88); } }
@media (max-height: 800px) { .escenario-3d { transform: scale(0.85); } .matriz-header { margin-bottom: 0; } }
@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; }
    .nodos-container { flex-direction: column; transform: scale(1); padding-top: 50px;}
    .seccion-nodos { height: auto; padding: 100px 0; } 
    .telemetria-marquee { transform: skewY(0deg); }
    .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; }
    .consola-container { flex-direction: column; height: auto; }
    /* Eliminado ratio defectuoso */
    .consola-contacto { flex-direction: column; }
    .info-operativa { border-right: none; border-bottom: 1px dashed var(--tech-gray); padding-right: 0; padding-bottom: 20px; margin-bottom: 20px; }
    .input-fila-2, .input-fila-3, .input-fila-4 { grid-template-columns: 1fr; }
}

/* =========================================
   OVERRIDE MOBILE HERO & MAPPING
   ========================================= */
@media (max-width: 1024px) {
    /* Destruir el 50/50, apilar el video arriba del texto orgánicamente */
    .hero-holograma { flex-direction: column; padding-top: 100px; padding-bottom: 50px; height: auto; min-height: 100dvh; justify-content: flex-start; }
    
    /* Restaurar el video como un bloque normal en el flujo */
    .video-split-container { position: relative !important; width: 100% !important; margin-top: 60px !important; margin-bottom: 30px; opacity: 1 !important; z-index: 1 !important; transform: none !important; aspect-ratio: 16/9; right: auto !important; top: auto !important; display: block; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
    
    .hero-contenido-central { padding-top: 0 !important; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .texto-descripcion { text-align: center !important; text-justify: none !important; border-left: none; border-bottom: 2px solid var(--neon-yellow); padding-left: 0; padding-bottom: 20px; }
    .hero-acciones { align-items: center; width: 100%; }
    
    /* El mapa del Peru JAMAS debe tener aspect-ratio 1/1, debe fluir con su imagen natural para no descuadrar los puntos % */
    .panel-radar { aspect-ratio: auto !important; height: auto !important; }
}

@media (max-width: 768px) {
    .hero-fila-inferior { flex-direction: column; gap: 20px; align-items: center; margin-top: 10px !important; width: 100%; }
    .stats-holograma { border-left: none; border-top: 1px solid rgba(255, 234, 0,0.3); padding: 15px 0 0 0; justify-content: center; }
    .titulo-mega { font-size: clamp(35px, 9vw, 50px); }
    .btn-cyber-solid { width: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.4; padding: 12px 20px; }
    
    /* ÓRBITA DE DATOS SCALING */
    .carrusel-3d { transform: scale(0.65); transform-origin: center center; }
    .escenario-3d { height: 360px; margin-top: 0; }
    .matriz-nucleo-logo { width: 240px; }
    .seccion-matriz { height: auto; padding: 80px 0; }
    
    /* TITULOS ALINEADOS */
    .matriz-titulo { font-size: clamp(24px, 6vw, 40px); word-wrap: break-word; text-align: center; margin: 0 auto; letter-spacing: 2px; }
    .matriz-sub { display: block; width: 100%; padding: 0 20px; box-sizing: border-box; line-height: 1.5; text-align: center; word-wrap: break-word; }
    .texto-descripcion { width: 100%; padding: 0 15px; box-sizing: border-box; }
    .coordenadas { flex-direction: column; align-items: center; gap: 5px; text-align: center; }
    .nodo-datos .holo-header, .nodo-datos .titulo-mega, .nodo-datos .texto-descripcion { text-align: center; }

    /* REACTOR MOBILE POLISH */
    .reactor-info { width: 100% !important; padding: 0 8% !important; box-sizing: border-box; align-items: center; text-align: center; }
    .reactor-header { top: 10% !important; left: 50% !important; transform: translateX(-50%); width: 100%; justify-content: center; }
    .telemetria-datos { flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-bottom: 20px; }
    .reactor-fase { width: 100%; }
    .reactor-fase h2.titulo-mega { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.2; margin-bottom: 15px !important; }
    .fase-num { font-size: 14px; }
    .panel-telemetria { margin: 25px auto 0 auto; width: 100%; }

    /* FLECHAS MÁS PEQUEÑAS */
    .holo-nav { width: 45px; height: 70px; font-size: 24px; top: 50%; }
}

@media (max-width: 480px) {
    .carrusel-3d { transform: scale(0.48); transform-origin: center center; }
    .escenario-3d { height: 280px; }
    .matriz-nucleo-logo { width: 180px; }
    .holo-nav { width: 35px; height: 55px; font-size: 18px; }
}

/* SEGURIDAD CONTRA DESBORDAMIENTO HORIZONTAL (MATRIZ Y SIMULADOR) */
.seccion-matriz, .seccion-simulador { overflow: hidden; }
.hero-holograma { overflow-x: hidden; }