/* --- Variables Corporativas --- */
:root {
    --vextron-bg: #0a0e17;       
    --vextron-section-bg: #151a25; /* Antes vextron-dark-gray */
    --vextron-cobalt: #0047AB;   
    --vextron-cyan: #00f2ff;     
    --vextron-text-main: #ffffff;
    --vextron-text-muted: #adb5bd;
    --vextron-card-bg: rgba(255, 255, 255, 0.03);
    --vextron-card-border: rgba(255, 255, 255, 0.05);
    --vextron-nav-bg: #0a0e17;
    --nav-text-color: #ffffff;
    --nav-scrolled-bg: #0a0e17; /* Negro */
    --nav-brand-color: #ffffff;
}
@media (prefers-color-scheme: light) {
    :root {
        --vextron-bg: #ffffff;           /* Fondo blanco limpio */
        --vextron-section-bg: #f4f6f9;   /* Gris muy claro para secciones */
        --vextron-cobalt: #003380;       /* Azul más oscuro para contraste */
        --vextron-cyan: #0099a3;         /* Cian oscurecido para leerse en blanco */
        --vextron-text-main: #1a1e2b;    /* Texto casi negro */
        --vextron-text-muted: #6c757d;   /* Gris medio */
        --vextron-card-bg: #ffffff;      /* Tarjetas blancas */
        --vextron-card-border: #e9ecef;  /* Bordes sutiles */
        --vextron-nav-bg: #ffffff;
        --nav-text-color: #1a1e2b; /* Oscuro casi negro */
        --nav-scrolled-bg: rgba(255, 255, 255, 0.95); /* Blanco con transparencia */
        --nav-brand-color: #003380; /* Azul corporativo */
    }
}

body {
    background-color: var(--vextron-bg);
    color: var(--vextron-text-main); /* Usamos variable, no white fijo */
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* --- Utilidades de Color --- */
.text-cyan { color: var(--vextron-cyan) !important; }
.text-cobalt { color: var(--vextron-cobalt) !important; }
.bg-darker { background-color: var(--vextron-section-bg) !important; }
.text-white { color: var(--vextron-text-main) !important; }
.text-secondary { color: var(--vextron-text-muted) !important; }
.text-light { color: var(--vextron-text-muted) !important; }

.bg-gradient-dark {
    background: linear-gradient(180deg, var(--vextron-bg) 0%, var(--vextron-dark-gray) 100%);
}

.text-gradient {
    background: linear-gradient(90deg, #ffffff, var(--vextron-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Navbar --- */
.navbar {
    transition: background-color 0.3s ease, padding 0.3s ease;
    padding: 1rem 0;
}

/* --- Hero Section & Canvas --- */
.hero-section {
    height: 100vh; /* Pantalla completa */
    width: 100%;
}

#matrixCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Detrás del texto */
    opacity: 0.4; /* Sutil, no invasivo */
}

/* --- Botones --- */
.btn-cyan {
    background-color: var(--vextron-cyan);
    color: var(--vextron-bg);
    border: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-cyan:hover {
    background-color: #fff;
    box-shadow: 0 0 15px var(--vextron-cyan);
    transform: translateY(-2px);
}

.btn-outline-cyan {
    border: 1px solid var(--vextron-cyan);
    color: var(--vextron-cyan);
}

.btn-outline-cyan:hover {
    background-color: var(--vextron-cyan);
    color: var(--vextron-bg);
}

/* --- Tarjetas de Servicios (Glassmorphism sutil) --- */
.service-card {
    background: var(--vextron-card-bg);
    border: 1px solid var(--vextron-card-border);
    /* En light mode agregamos una sombra suave para que destaque */
}
@media (prefers-color-scheme: light) {
    .service-card {
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    /* Ajuste para el texto gradiente en fondo blanco */
    .text-gradient {
        background: linear-gradient(90deg, var(--vextron-cobalt), var(--vextron-cyan));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--vextron-cyan);
    box-shadow: 0 10px 30px rgba(0, 242, 255, 0.1);
}
/* --- Override (Sobrescritura) de Bootstrap Navbar --- */
/* Forzamos a que los enlaces usen nuestra variable dinámica */
#mainNav .nav-link {
    color: var(--nav-text-color) !important;
    font-weight: 500;
    transition: color 0.3s ease;
}

#mainNav .navbar-brand {
    color: var(--nav-brand-color) !important;
    transition: color 0.3s ease;
}

/* Estado Hover para los links */
#mainNav .nav-link:hover {
    color: var(--vextron-cyan) !important;
}

/* Clase personalizada para cuando se hace scroll */
.navbar-scrolled {
    background-color: var(--nav-scrolled-bg);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Sombra suave */
    backdrop-filter: blur(5px); /* Efecto vidrio (opcional) */
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
/* --- Estilos del Formulario Vextron --- */

/* Input Base */
.form-vextron {
    background-color: transparent !important; /* Fondo transparente */
    border: 1px solid var(--vextron-card-border);
    color: var(--vextron-text-main) !important; /* Texto dinámico (blanco/negro) */
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Color del Label (El texto flotante) */
.form-floating > label {
    color: var(--vextron-text-muted);
}

/* Cuando escribes o seleccionas el input */
.form-vextron:focus {
    background-color: transparent;
    border-color: var(--vextron-cyan); /* Borde Cian al escribir */
    box-shadow: 0 0 0 4px rgba(0, 242, 255, 0.1); /* Resplandor suave */
    color: var(--vextron-text-main);
}

/* El select (dropdown) necesita un ajuste especial para las opciones */
.form-vextron option {
    background-color: var(--vextron-bg); /* Fondo de las opciones desplegadas */
    color: var(--vextron-text-main);
}

/* Iconos de contacto */
.icon-square {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vextron-card-bg); /* Usa variable dinámica */
}

/* --- Utilidades --- */
.tracking-wide { letter-spacing: 2px; }
.z-2 { z-index: 2; }