/* ======================================================= */
/* --- CONFIGURACIÓN GLOBAL Y VARIABLES (ESTILO NGC) --- */
/* ======================================================= */
:root {
    --ngc-neon: #00d4ff; 
    --ngc-neon-rgb: 0, 212, 255;
    
    --ngc-blur: blur(15px);
    --ngc-glass: rgba(0, 0, 0, 0.5); 
    
    --ngc-border-glass: 1px solid rgba(var(--ngc-neon-rgb), 0.3);
    --ngc-glass-edge: inset 1px 1px 1px rgba(255, 255, 255, 0.15);

    --ngc-btn-bg: #181818;
    --ngc-btn-hover: #242424;

    --ngc-text: #ffffff;
    --ngc-text-main: #ffffff; 
    --ngc-text-desc: rgba(255, 255, 255, 0.9);
    --ngc-text-faded: rgba(255, 255, 255, 0.4);
    --ngc-text-muted: rgba(255, 255, 255, 0.85); 
    --ngc-success: #28a745; 
    --ngc-danger: #ff4d4d;
    
    --bg-body: #121212;
    --ngc-privacy-border: rgba(255, 255, 255, 0.1);
    --ngc-badge-bg: #111;
    --ngc-modal-overlay: rgba(0, 0, 0, 0.75);
    --ngc-cta-banner: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(var(--ngc-neon-rgb), 0.15) 100%);
    --card-shadow: rgba(0, 0, 0, 0.5);

    --success-green: #28a745;
    --warning-amber: #ffcc00;
    --error-red: #ff4b2b;

    --input-bg: rgba(0, 0, 0, 0.6);
    --obs-bg: rgba(0,0,0,0.3);
    --detail-bg: rgba(0,0,0,0.5);
    --result-hover-bg: rgba(0, 0, 0, 0.6);
    --quote-bg: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(var(--ngc-neon-rgb), 0.1) 100%);
    --dropdown-bg: rgba(18, 18, 18, 0.95);
    --item-row-bg: rgba(0, 0, 0, 0.5);
    --select-bg: rgba(20, 20, 20, 0.95);
    --opt-group-bg: rgba(0, 212, 255, 0.1);
    --summary-bg: rgba(0, 0, 0, 0.6);
    --ngc-bg-input: rgba(0, 0, 0, 0.6);
    --content-bg: transparent;
}
    
[data-theme="light"] {
    --ngc-neon: #0056d6; 
    --ngc-neon-rgb: 0, 86, 214;
    
    --ngc-glass: rgba(255, 255, 255, 0.6); 
    --ngc-border-glass: 1px solid rgba(var(--ngc-neon-rgb), 0.6);
    --ngc-glass-edge: inset 1px 1px 1px rgba(255, 255, 255, 0.8);
    
    --ngc-btn-bg: #FFFFFF;
    --ngc-btn-hover: #F0F0F0;

    --ngc-text: #111111;
    --ngc-text-main: #1a1a1a; 
    --ngc-text-desc: #333333;
    --ngc-text-faded: #888888;
    --ngc-text-muted: #333333; 
    --ngc-success: #1e7e34; 
    --ngc-danger: #d93025;
    
    --bg-body: #d6dbe0;
    --ngc-privacy-border: rgba(0, 0, 0, 0.15);
    --ngc-badge-bg: #e2e6ea;
    --ngc-modal-overlay: rgba(225, 230, 235, 0.9);
    --ngc-cta-banner: linear-gradient(135deg, rgba(235, 238, 242, 0.95) 0%, rgba(var(--ngc-neon-rgb), 0.25) 100%);
    --card-shadow: rgba(0, 0, 0, 0.15);
    
    --success-green: #1e7e34;
    --warning-amber: #b58700;
    --error-red: #d93025;
    
    --input-bg: rgba(255, 255, 255, 0.4);
    --obs-bg: rgba(255, 255, 255, 0.5);
    --detail-bg: rgba(255, 255, 255, 0.5);
    --result-hover-bg: rgba(255, 255, 255, 0.8);
    --quote-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(var(--ngc-neon-rgb), 0.15) 100%);
    --dropdown-bg: rgba(255, 255, 255, 0.98);
    --item-row-bg: rgba(255, 255, 255, 0.5);
    --select-bg: rgba(255, 255, 255, 0.98);
    --opt-group-bg: rgba(0, 122, 153, 0.1);
    --summary-bg: rgba(255, 255, 255, 0.6);
    --ngc-bg-input: rgba(255, 255, 255, 0.4); 
    --content-bg: rgba(255, 255, 255, 0.5);
}

/* ======================================================= */
/* --- RESET, BODY Y FONDOS --- */
/* ======================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    background-color: var(--bg-body);
    overscroll-behavior-y: none;
    transition: background-color 0.4s ease;
}

html::before, html::after {
    content: "";
    position: fixed;
    top: 0; left: 0; 
    width: 100%; 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
    transition: opacity 0.5s ease-in-out;
    transform: translateZ(0); 
    will-change: opacity, transform;
}

html::before {
    background: #121212;
    opacity: 1;
}

html::after {
    background: #E2E6EA;
    opacity: 0;
}

[data-theme="light"]::before { opacity: 0; }
[data-theme="light"]::after { opacity: 1; }

body {
    margin: 0; 
    padding: 80px 4px 4px 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--ngc-text); 
    width: 100%; 
    min-height: 100svh; 
    position: relative; 
    overflow-x: hidden;
    display: flex; justify-content: center;
}

/* --- EFECTO DE DESVANECIMIENTO SUPERIOR (SCROLL MÁSCARA) --- */
body::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 110px; 
    z-index: 9990; pointer-events: none; 
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
}

/* ======================================================= */
/* --- ESTRUCTURA PRINCIPAL (CONTENEDORES) --- */
/* ======================================================= */
.ngc-wrapper {
    display: flex; flex-direction: column; width: 100%; max-width: 500px; padding: 15px;
    flex: 1; /* ESTO FUERZA A QUE LLEGUE HASTA EL FONDO DE LA PANTALLA */
}

.layout-desktop {
    display: flex; flex-direction: column; width: 100%; gap: 15px;
}

.ngc-banner, details, .ngc-form-container {
    background: var(--ngc-glass); backdrop-filter: var(--ngc-blur);
    -webkit-backdrop-filter: var(--ngc-blur); border: var(--ngc-border-glass);
    border-radius: 16px; border-left: 4px solid var(--ngc-neon); 
    overflow: hidden; transition: all 0.3s ease; width: 100%;
    box-shadow: 0 10px 30px var(--card-shadow), inset 0 0 15px rgba(var(--ngc-neon-rgb), 0.05), var(--ngc-glass-edge); 
    margin-bottom: 15px;
}

/* ======================================================= */
/* --- COMPONENTES FLOTANTES SUPERIORES (MÓVIL) --- */
/* ======================================================= */
/* 1. Botones Flotantes (General) */
.btn-flotante-accion {
    position: fixed; top: 15px; z-index: 9999; height: 60px; border-radius: 8px;
    background: var(--ngc-glass); backdrop-filter: var(--ngc-blur);
    border: var(--ngc-border-glass); color: var(--ngc-text);
    display: flex; justify-content: center; align-items: center;
    font-size: 1.5rem; cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--card-shadow), var(--ngc-glass-edge); outline: none; text-decoration: none;
}
.btn-flotante-accion:hover {
    color: var(--ngc-neon); border-color: var(--ngc-neon);
    box-shadow: 0 0 15px rgba(var(--ngc-neon-rgb), 0.4), var(--ngc-glass-edge); transform: translateY(-2px);
}

#btn-ir-menu { width: 60px; left: 15px; }

/* 2. Menú de Exploración */
.menu-flotante-container { position: fixed; top: 15px; left: 85px; z-index: 9999; }
.menu-flotante-container .btn-flotante-accion { position: static; }

.btn-explorar {
    width: auto !important; padding: 0 20px; gap: 8px;
    font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.btn-explorar span { display: inline-block; }

.dropdown-flotante-content {
    position: absolute; top: 70px; left: 0; background: var(--ngc-glass);
    backdrop-filter: var(--ngc-blur); border: var(--ngc-border-glass);
    border-radius: 12px; width: 220px; box-shadow: 0 10px 25px var(--card-shadow), var(--ngc-glass-edge);
    flex-direction: column; padding: 8px; gap: 5px; z-index: 10000;
}
.dropdown-flotante-content a {
    color: var(--ngc-text); text-decoration: none; padding: 10px 12px;
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    border-radius: 8px; display: flex; align-items: center; gap: 8px; transition: 0.2s;
}
.dropdown-flotante-content a i { color: var(--ngc-neon); }
.dropdown-flotante-content a:hover { background: rgba(var(--ngc-neon-rgb), 0.15); color: var(--ngc-neon); }

/* --- ESTADO ACTIVO (Pestaña Actual) --- */
.dropdown-flotante-content a.activo {
    background: rgba(var(--ngc-neon-rgb), 0.2);
    color: var(--ngc-neon);
    border: 1px solid rgba(var(--ngc-neon-rgb), 0.5);
    box-shadow: 0 0 10px rgba(var(--ngc-neon-rgb), 0.15), inset 0 0 8px rgba(var(--ngc-neon-rgb), 0.1);
    pointer-events: none; /* Evita que el usuario haga clic en la página donde ya está */
}

/* Brillo extra para el icono de la página activa */
.dropdown-flotante-content a.activo i {
    text-shadow: 0 0 8px rgba(var(--ngc-neon-rgb), 0.8);
}

/* 3. Interruptor de Tema (Switch Minimalista) */
#btn-tema-servicios.switch-plate {
    position: fixed; top: 15px; right: 85px; z-index: 9999;
    width: 40px; height: 60px;
    background: var(--ngc-glass); backdrop-filter: var(--ngc-blur); -webkit-backdrop-filter: var(--ngc-blur);
    border: var(--ngc-border-glass); border-radius: 8px;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; box-shadow: 0 4px 15px var(--card-shadow), var(--ngc-glass-edge);
    transition: all 0.3s ease; outline: none; padding: 0;
}
#btn-tema-servicios.switch-plate:hover {
    border-color: rgba(var(--ngc-neon-rgb), 0.4);
    box-shadow: 0 4px 12px rgba(var(--ngc-neon-rgb), 0.15);
}
.switch-rocker {
    width: 14px; height: 28px; border-radius: 4px; position: relative;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease;
    transform-origin: center; transform: perspective(200px) rotateX(-12deg);
    background: #2a2a2a; border: 1px solid #1a1a1a;
    box-shadow: 0 3px 2px -1px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.05);
}
[data-theme="light"] .switch-rocker {
    transform: perspective(200px) rotateX(12deg); background: #f4f4f4; border: 1px solid #dcdcdc;
    box-shadow: 0 -3px 2px -1px rgba(0,0,0,0.1), inset 0 -1px 1px rgba(255,255,255,0.5);
}
.switch-rocker::after {
    content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; left: 50%; transform: translateX(-50%); transition: all 0.3s ease;
    top: 4px; background: rgba(255, 255, 255, 0.15); box-shadow: none;
}
[data-theme="light"] .switch-rocker::after {
    top: auto; bottom: 4px; background: var(--ngc-neon); box-shadow: 0 0 6px rgba(var(--ngc-neon-rgb), 0.8);
}

/* 4. Logo Flotante (Efecto Interactivo Elegante) */
.hero-logo-icon {
    position: fixed; top: 15px; right: 15px; z-index: 9999; width: 60px; height: 60px;
    border-radius: 8px; 
    background: var(--ngc-glass); 
    backdrop-filter: var(--ngc-blur); 
    padding: 5px;
    box-shadow: 0 4px 15px var(--card-shadow), var(--ngc-glass-edge);
    border: 1px solid transparent; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transición muy suave */
}

/* Efecto al pasar el mouse: Brillo estático de conexión eléctrica */
.hero-logo-icon:hover {
    border-color: rgba(var(--ngc-neon-rgb), 0.5);
    box-shadow: 0 4px 15px var(--card-shadow), 0 0 15px rgba(var(--ngc-neon-rgb), 0.3), var(--ngc-glass-edge);
    transform: translateY(-2px); /* Se eleva un poquito */
}

.logo-oscuro, .logo-claro {
    position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px);
    object-fit: contain; border-radius: 4px; transition: opacity 0.4s ease-in-out;
}
.logo-claro { opacity: 0; }
[data-theme="light"] .logo-oscuro { opacity: 0; }
[data-theme="light"] .logo-claro { opacity: 1; }

.hero-neon-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-neon-rect {
    width: 100%; height: 100%; fill: none; stroke: var(--ngc-neon); stroke-width: 3px;
    stroke-dasharray: 60 180; animation: run-border 3s linear infinite;
}
@keyframes run-border { to { stroke-dashoffset: -240; } }

.ngc-main-title {
    font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
    color: var(--ngc-neon); text-align: center; margin: 5px 0 10px 0;
    text-shadow: 0 0 8px rgba(var(--ngc-neon-rgb), 0.3); animation: fadeIn 0.6s ease;
}

/* ======================================================= */
/* --- FOOTER, CRÉDITOS Y REDES SOCIALES --- */
/* ======================================================= */
.footer-gnc-compact {
    width: 100%; display: flex; justify-content: space-around; align-items: center; 
    padding: 12px 0; background: var(--ngc-glass); backdrop-filter: var(--ngc-blur); 
    border: var(--ngc-border-glass); border-radius: 16px; margin-top: auto; 
    box-shadow: 0 4px 15px var(--card-shadow), var(--ngc-glass-edge);
}

.btn-social {
    text-decoration: none; color: var(--ngc-text-desc); font-size: 24px; transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center; width: 45px; height: 45px;
}
.btn-social:hover { color: var(--ngc-neon); transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(var(--ngc-neon-rgb), 0.6));}
.whatsapp-pulse { color: #28a745; animation: beat 0.7s infinite alternate; }
@keyframes beat { to { transform: scale(1.15); filter: drop-shadow(0 0 10px #28a745); } }

/* Texto de las redes oculto en celulares */
.social-text { display: none; }

.ngc-site-credits {
    text-align: center; font-size: 0.65rem; color: var(--ngc-text-faded);
    margin-top: 15px; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1.5px;
}
.ngc-site-credits span { color: rgba(var(--ngc-neon-rgb), 0.8); font-weight: 700; }
button.btn-share { background-color: transparent; border: none; outline: none; color: var(--ngc-text-desc); cursor: pointer; padding: 0; }

/* ======================================================= */
/* --- UTILIDADES --- */
/* ======================================================= */
.oculto { display: none !important; }
.gpu-accel { backface-visibility: hidden; transform: translateZ(0); }

/* ======================================================= */
/* --- RESPONSIVE DESIGN --- */
/* ======================================================= */

/* --- AJUSTES TABLET --- */
@media (min-width: 768px) {
    #btn-ir-menu { top: 25px; left: 25px; width: 70px; height: 70px; font-size: 1.8rem; }
    .menu-flotante-container { top: 25px; left: 105px; }
    .menu-flotante-container .btn-explorar { height: 70px; font-size: 1.1rem; padding: 0 25px; }
    .dropdown-flotante-content { top: 80px; width: 250px; }
    #btn-tema-servicios.switch-plate { top: 25px; right: 105px; height: 70px; }
    .hero-logo-icon { top: 25px; right: 25px; width: 70px; height: 70px; }
}

/* --- AJUSTES ESCRITORIO (PC - ESTILO ALINEADO Y EXPANDIDO) --- */
@media (min-width: 1024px) {
    /* 1. Ajuste del cuerpo y espaciado para evitar que el menú tape el título */
    body { 
        padding-top: 100px !important; 
    }
    
    .ngc-wrapper { 
        max-width: 1200px; /* Ancho optimizado para PC */
    }
    
    .layout-desktop { 
        display: grid; grid-template-columns: 420px 1fr; gap: 30px; align-items: start; 
    }
    
    /* La columna izquierda queda fija debajo del nuevo menú superior */
    .col-izquierda {
        position: sticky; top: 100px; display: flex; flex-direction: column; gap: 0;
        max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 5px;
    }
    .col-izquierda::-webkit-scrollbar { width: 0px; }
    
    .col-derecha { display: flex; flex-direction: column; }
    
    .ngc-main-title { text-align: left; margin-bottom: 20px; }

    /* 2. Alineación de Menú Superior (Centrado Inteligente a 1200px) */
    #btn-menu-flotante { display: none !important; } /* Oculta botón Explorar */

    #btn-ir-menu { 
        top: 20px !important; 
        /* Se ancla al borde izquierdo del contenedor de 1200px */
        left: max(15px, calc(50% - 600px + 15px)) !important; 
        width: 60px !important; height: 60px !important; font-size: 1.5rem !important; 
    }

    .hero-logo-icon {
        top: 20px !important; 
        /* Se ancla al borde derecho del contenedor de 1200px */
        right: max(15px, calc(50% - 600px + 15px)) !important; 
        width: 60px !important; height: 60px !important;
    }

    #btn-tema-servicios.switch-plate {
        top: 20px !important; 
        /* Se coloca al lado del logo */
        right: max(85px, calc(50% - 600px + 85px)) !important; 
        height: 60px !important;
    }

    .menu-flotante-container {
        top: 20px !important; 
        /* Ocupa exactamente el espacio libre entre el botón Home y el Interruptor */
        left: max(85px, calc(50% - 600px + 85px)) !important; 
        right: max(135px, calc(50% - 600px + 135px)) !important; 
        width: auto; display: flex; align-items: center;
    }

    /* Transformación del Dropdown en Barra Horizontal Fija */
    .dropdown-flotante-content {
        position: relative; top: 0 !important; display: flex !important; flex-direction: row;
        width: 100% !important; height: 60px !important; padding: 0 10px; justify-content: space-evenly; align-items: center;
        background: var(--ngc-glass); backdrop-filter: var(--ngc-blur); border: var(--ngc-border-glass);
        box-shadow: 0 4px 15px var(--card-shadow), var(--ngc-glass-edge); border-radius: 12px;
    }

    .dropdown-flotante-content a {
        padding: 8px 12px; border-radius: 8px; white-space: nowrap; font-size: 0.75rem; 
    }

    /* 3. Footer a todo ancho y Botones Píldora */
    .footer-gnc-compact {
        width: 100%; padding: 15px 20px; gap: 15px; flex-wrap: wrap; justify-content: center; margin-top: 20px;
    }
    
    /* Agregamos button.btn-share para obligar al botón a usar este formato */
    .btn-social, button.btn-share {
        width: auto; padding: 8px 20px; border-radius: 25px; 
        background: rgba(0, 0, 0, 0.2); border: 1px solid var(--ngc-privacy-border); gap: 10px; 
    }
    
    [data-theme="light"] .btn-social, [data-theme="light"] button.btn-share {
        background: rgba(255, 255, 255, 0.4);
    }
    
    /* Mostrar texto de redes sociales al lado de los iconos */
    .social-text {
        display: inline-block !important; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px;
    }
    }