/* ========================================================================= */
/* 1. PALETA DE COLORES Y ESTILOS BASE */
/* ========================================================================= */
:root {
    /* Negros reemplazados por GRISES OSCUROS */
    --km-dark-text: #2c3e50;         /* Gris muy oscuro/Texto principal */
    --km-gray-medium: #6c757d;       /* Gris medio para descripciones */
    --km-black-pure: #000000;        /* Solo para sombras o elementos muy específicos */

    /* Verdes de acento */
    --km-green-primary: #9dcc07;     /* Verde de acento */
    --km-green-dark: #70a402;        /* Verde oscuro para hover */

    /* Blancos y Fondos */
    --km-white-pure: #ffffff;
    --km-white-light: #f4f4f4;       /* Fondo muy claro para secciones */
    
    /* Variable para negro oscuro (para botones) */
    --km-black-darkest: #1a1a1a; 
}

/* Base */
html, body {
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Asegurando fuente base */
}

main {
    padding-top: 0;
    padding-bottom: 0;
}

/* Botón Primario */
.btn-km-primary {
    background-color: var(--km-green-primary);
    color: var(--km-black-darkest);
    border: 1px solid var(--km-green-primary);
    transition: all 0.3s ease;
}

.btn-km-primary:hover {
    background-color: var(--km-green-dark);
    color: var(--km-white-pure);
    border-color: var(--km-green-dark);
}

.btn-km-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(157, 204, 7, 0.5);
}

/* ========================================================================= */
/* 2. ESTILOS DE NAVEGACIÓN (Sticky Scroll) */
/* ========================================================================= */
#main-navbar {
    transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
    padding-top: 25px;
    padding-bottom: 25px;
    z-index: 1030;
}

#main-navbar .nav-link {
    color: var(--km-white-pure);
    transition: color 0.3s ease;
}

/* Estado Scrolled (cuando bajas la página) */
.navbar-scrolled {
    background-color: var(--km-white-light) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.navbar-scrolled .nav-link,
.navbar-scrolled .text-white,
.navbar-scrolled small {
    color: var(--km-dark-text) !important;
}

/* ========================================================================= */
/* 3. ESTILOS DE CARRUSEL PRINCIPAL (Home) */
/* ========================================================================= */
#servicesCarousel {
    position: relative;
    height: 100vh;
    margin-top: -95px;
}

.carousel-img {
    height: 100vh;
    object-fit: cover;
    transition: transform 0.6s ease-in-out;
}

.carousel-item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay oscuro */
    z-index: 1;
}

.carousel-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Carrusel Secundario (Usado en Nosotros) */
.carousel-reduced-height {
    position: relative;
    height: 400px;
    margin-top: -95px;
}

.carousel-img-reduced {
    height: 400px;
    object-fit: cover;
}

.carousel-reduced-height .carousel-caption {
    padding-bottom: 50px;
}

/* ========================================================================= */
/* 4. TARJETAS Y SECCIONES GENERALES */
/* ========================================================================= */
.section-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    border-top: 5px solid var(--km-green-primary) !important;
    background-color: var(--km-white-pure);
}

.section-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.1) !important;
    cursor: pointer;
}

.section-card .card-body i {
    color: var(--km-green-primary) !important;
}

/* Títulos en secciones oscuras */
.bg-dark h3 {
    color: var(--km-white-pure) !important;
}

/* ========================================================================= */
/* 5. NÚMEROS Y CONTADORES */
/* ========================================================================= */
.km-counter-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--km-green-primary);
    display: inline-block;
}

/* ========================================================================= */
/* 6. CONTACTO */
/* ========================================================================= */
.form-control:focus {
    border-color: var(--km-green-primary);
    box-shadow: 0 0 0 0.25rem rgba(157, 204, 7, 0.25);
}

.map-container {
    overflow: hidden;
    border: 3px solid var(--km-green-dark);
    border-radius: 8px;
}

/* ========================================================================= */
/* 7. CORRECCIÓN DE VISIBILIDAD (LÍDERES / EQUIPO) */
/* ========================================================================= */

/* Fuerza el color del texto para que no se pierda en fondos oscuros o claros */
.lideres-section, 
.team-member, 
.card-lider,
.team-card { /* Agregado team-card para compatibilidad con nosotros.css */
    color: #e0e0e0 !important; /* Texto base claro */
}

/* Títulos de nombres */
.lideres-section h3, 
.lideres-section h4, 
.lideres-section h5,
.lideres-section strong,
.team-card h5 {
    color: #ffffff !important; /* Blanco puro */
}

/* Textos secundarios (cargos, descripciones) */
.lideres-section p, 
.lideres-section span, 
.lideres-section small,
.team-card p,
.text-muted {
    color: #b0b3b8 !important; /* Gris claro legible */
}

/* Fondo de tarjeta de respaldo si el glassmorphism falla o no hay fondo */
.lideres-section .card, 
.member-card {
    background-color: #2c2c2c;
    border: 1px solid #444;
}