:root {
    --primary-bg: #050a14;
    --card-bg: #0d1424;
    --accent-gold: #c5a059;
    --text-main: #ffffff;
}

body {
    background-color: var(--primary-bg);
    color: var(--text-main);
    font-family: 'Roboto', sans-serif;
}

.orbitron { font-family: 'Orbitron', sans-serif; letter-spacing: 2px; }

/* NAVBAR RECORTE TOTAL */
.navbar {
    background-color: rgba(5, 10, 20, 0.98);
    border-bottom: 1px solid var(--accent-gold);
    padding: 0px 0 !important; /* Eliminamos todo el espacio extra */
    min-height: 50px; /* Definimos una altura pequeña y fija */
}

.navbar-nav .nav-link {
    transition: 0.3s;
}

.navbar-nav .nav-link:hover {
    color: var(--accent-gold) !important;
}
.brand-logo { 
    width: auto; /* Dejamos que el ancho sea proporcional */
    height: 45px; /* LIMITAMOS la altura del logo para que no empuje el navbar */
    object-fit: contain;
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 1rem;
    display: flex;
    align-items: center;
}

/* Ajuste del texto I-CERT para que no quede grande */
.brand-text span {
    font-size: 1.1rem !important; /* Reducimos el tamaño de la letra del nombre */
    line-height: 1;
}

.brand-text small {
    font-size: 0.5rem !important; /* Reducimos el slogan */
}

/* NAVBAR */
.navbar {
    background-color: rgba(5, 10, 20, 0.98);
    border-bottom: 1px solid var(--accent-gold);
    padding: 0.3rem 0; /* Cambia 1rem a 0.3rem para reducir el grosor significativamente */
}

.nav-link {
    line-height: 50px; /* Alinea el texto con la nueva altura del navbar */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.btn-contacto-ws {
    background-color: #25d366; /* Color WhatsApp corporativo */
    color: white !important;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.8rem;
    transition: 0.3s;
    display: flex;
    align-items: center;
}

.btn-contacto-ws:hover {
    background-color: #128c7e;
    box-shadow: 0 0 10px rgba(37, 211, 102, 0.4);
}

.brand-logo { 
    width: 100px; /* Prueba reduciendo un poco el ancho si el navbar sigue grueso */
    height: auto;
}

.brand-text small { color: var(--accent-gold); font-size: 0.6rem; letter-spacing: 1px; }

/* HERO */
.hero {
    padding: 140px 0;
    /* Cambiamos la URL de internet por la ruta local */
    background: linear-gradient(rgba(5,10,20,0.7), rgba(5,10,20,0.9)), 
                url('../images/fondo2.png') no-repeat center/cover;
    text-align: center;
}



.text-accent { color: var(--accent-gold); }

.badge-intl {
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    padding: 5px 15px;
    font-family: 'Orbitron';
    font-size: 0.7rem;
    display: inline-block;
}

/* FOOTER ESTANDARIZADO */
.footer-main {
    background-color: #03070d; /* Un tono más oscuro que el bg principal */
    border-top: 1px solid rgba(197, 160, 89, 0.2);
}

.footer-logo {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.footer-link {
    color: #888;
    text-decoration: none;
    transition: 0.3s;
    line-height: 2;
}

.footer-link:hover {
    color: var(--accent-gold);
    padding-left: 5px;
}

.social-icons a {
    color: var(--accent-gold);
    font-size: 1.2rem;
    margin-right: 15px;
    transition: 0.3s;
}

.social-icons a:hover {
    color: white;
    transform: translateY(-3px);
    display: inline-block;
}

.newsletter-form .form-control {
    border-radius: 2px 0 0 2px;
}

.btn-newsletter {
    background: var(--accent-gold);
    border: none;
    padding: 0 15px;
    color: black;
    font-weight: bold;
    border-radius: 0 2px 2px 0;
}

.footer-divider-full {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    width: 100%;
}

.trust-seals img {
    filter: grayscale(1) brightness(1.5);
    height: 35px;
    opacity: 0.7;
}
.btn-contacto {
    background: var(--accent-gold);
    color: #000;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 2px;
}

.x-small { font-size: 0.7rem; }

#servicios .text-muted {
    color: #ffffff !important;
}

/* ESTILOS LÍNEA DE TIEMPO */
.timeline-container {
    position: relative;
    padding-top: 20px;
}

.timeline-item {
    text-align: center;
    padding: 20px;
    position: relative;
}

/* Línea conectora entre items (solo en escritorio) */
@media (min-width: 768px) {
    .timeline-item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 45px;
        right: -50%;
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, var(--accent-gold), transparent);
        z-index: 1;
    }
}

.timeline-icon {
    width: 50px;
    height: 50px;
    background: var(--card-bg);
    border: 2px solid var(--accent-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.2rem;
    color: var(--accent-gold);
    position: relative;
    z-index: 2;
    transition: 0.3s;
}

.timeline-item:hover .timeline-icon {
    background: var(--accent-gold);
    color: var(--primary-bg);
    box-shadow: 0 0 15px var(--accent-gold);
}

.timeline-item h5 {
    font-size: 0.9rem;
    color: var(--accent-gold);
}

/* FORMULARIO ESTILOS */
.form-control, .form-select {
    border-radius: 2px;
    padding: 10px;
    transition: 0.3s;
}

.form-control:focus, .form-select:focus {
    background-color: rgba(197, 160, 89, 0.05) !important;
    border-color: var(--accent-gold) !important;
    color: white;
    box-shadow: 0 0 8px rgba(197, 160, 89, 0.2);
}

.border-accent-thin {
    border: 1px solid rgba(197, 160, 89, 0.3);
}

.bg-dark-surface {
    background-color: var(--card-bg);
}

/* Corrección para el Menú Desplegable (Select) */
.form-select {
    background-color: var(--card-bg) !important;
    color: white !important;
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
}

/* Esto asegura que las opciones dentro del desplegable se vean bien */
.form-select option {
    background-color: var(--card-bg); /* Fondo oscuro para las opciones */
    color: white; /* Texto blanco para las opciones */
    padding: 10px;
}

/* Estilo para cuando el campo está enfocado */
.form-select:focus {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 8px rgba(197, 160, 89, 0.2) !important;
}

/* Estilizar el botón de adjuntar archivo */
#inputArchivo::-webkit-file-upload-button {
    background: var(--accent-gold);
    border: none;
    padding: 8px 15px;
    border-radius: 2px;
    color: #000;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    cursor: pointer;
    margin-right: 15px;
    transition: 0.3s;
}

#inputArchivo::-webkit-file-upload-button:hover {
    background-color: #e2b96d;
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.4);
}

/* Para otros navegadores (Firefox) */
#inputArchivo::file-selector-button {
    background: var(--accent-gold);
    border: none;
    padding: 8px 15px;
    border-radius: 2px;
    color: #000;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    cursor: pointer;
    margin-right: 15px;
}

.icon-box {
    width: 60px;
    height: 60px;
    background: rgba(197, 160, 89, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(197, 160, 89, 0.2);
}

.bg-dark-surface {
    background-color: var(--card-bg);
}

.x-small {
    font-size: 0.75rem;
}

.product-card {
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-gold) !important;
}

.btn-outline-gold {
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    transition: 0.3s;
}

.btn-outline-gold:hover {
    background: var(--accent-gold);
    color: black;
}

.icon-box-small {
    min-width: 40px;
    height: 40px;
    background: rgba(197, 160, 89, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.btn-accent-sm {
    background: var(--accent-gold);
    color: black;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 2px;
    text-decoration: none;
    font-family: 'Orbitron';
}

.bg-dark-surface { background-color: var(--card-bg); }
.hover-accent { transition: 0.3s; }
.hover-accent:hover { border-color: var(--accent-gold) !important; box-shadow: 0 0 15px rgba(197, 160, 89, 0.1); }
.btn-accent-sm {
    background: var(--accent-gold);
    color: black;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 8px 15px;
    border: none;
    font-family: 'Orbitron';
    text-transform: uppercase;
}
.list-group-item:hover { background: rgba(197, 160, 89, 0.05) !important; }