/* ========================================================================= */
/* 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 se mantienen */
    --km-green-primary: #9dcc07; /* Verde de acento */
    --km-green-dark: #70a402;    /* Verde oscuro para hover */
    
    /* Blancos/Fondos se mantienen */
    --km-white-pure: #ffffff;
    --km-white-light: #f4f4f4;  /* Fondo muy claro para secciones */
}
/* Base - para eliminar conflictos del footer antiguo */
html, body {
    height: 100%;
}

/* Asegura que el contenido principal ocupe todo el ancho */
main {
    padding-top: 0;
    padding-bottom: 0;
}

/* Estilo para el botón primario de acento */
.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; /* Transición más limpia */
}
.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 (Fancy - Sticky Scroll) */
/* ========================================================================= */
#main-navbar {
    background-color: rgba(0, 0, 0, 0.5); 
    /* REDUCIMOS LA DURACIÓN a 0.3s para una transición más rápida y limpia */
    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) !important;
    transition: color 0.3s ease;
    /* ... (resto de estilos) ... */
}

.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 { /* <-- Esto asegura que el texto pequeño cambie */
    color: var(--km-dark-text) !important; 
}
.navbar-scrolled small { /* Por si acaso, también apuntamos a la etiqueta small */
    color: var(--km-dark-text) !important; 
}

/* ========================================================================= */
/* 3. ESTILOS DE CARRUSEL (IMPACTO VISUAL 100%) */
/* ========================================================================= */
#servicesCarousel {
    position: relative;
    height: 100vh;
    margin-top: -95px; 
}
.carousel-img {
    height: 100vh;
    object-fit: cover; 
    /* Transición suave para las imágenes al cambiar (se requiere JS/Bootstrap) */
    transition: transform 0.6s ease-in-out; 
}
.carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Overlay más oscuro para mejor contraste del texto blanco */
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 1;
}
.carousel-caption {
    /* Centrado perfecto del contenido en la pantalla */
    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); /* Sombra para resaltar el texto */
}

/* ========================================================================= */
/* 4. ESTILOS DE TARJETAS (Misión/Visión) */
/* ========================================================================= */
.section-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px; /* Reducción ligera del borde para un look más moderno */
    border-top: 5px solid var(--km-green-primary) !important; /* Borde verde */
    background-color: var(--km-white-pure);
}

.section-card:hover {
    transform: translateY(-8px); /* Más levantamiento en hover */
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.1) !important; /* Sombra más limpia */
    cursor: pointer;
}
.section-card .card-body i {
    color: var(--km-green-primary) !important;
}

/* Estilos para el formulario de contacto */
.form-control:focus {
    border-color: var(--km-green-primary);
    box-shadow: 0 0 0 0.25rem rgba(157, 204, 7, 0.25);
}
/* ========================================================================= */
/* ESTILOS DE NÚMEROS Y CONTADORES */
/* ========================================================================= */
.km-counter-number {
    font-size: 3.5rem; /* Más grande que el display-3 de Bootstrap */
    font-weight: 700;
    color: var(--km-green-primary);
    display: inline-block;
}

/* Colorea los títulos secundarios dentro de la sección de proyectos */
.bg-dark h3 {
    color: var(--km-white-pure) !important;
}

/* ========================================================================= */
/* ESTILOS ESPECÍFICOS DE LA SECCIÓN DE CONTACTO */
/* ========================================================================= */

.map-container {
    /* Eliminamos la altura fija (400px) para que el d-flex h-100 funcione */
    overflow: hidden; 
    border: 3px solid var(--km-green-dark); 
    border-radius: 8px; 
}

/* ========================================================================= */
/* CARRUSEL SECUNDARIO (Nosotros.cshtml) */
/* ========================================================================= */
.carousel-reduced-height {
    position: relative;
    height: 400px; /* Altura fija para el contenedor del carrusel */
    margin-top: -95px; /* Compensa la altura de la barra de navegación fija */
}

.carousel-img-reduced {
    height: 400px; /* Altura fija para la imagen */
    object-fit: cover; 
}

/* Modificamos el caption para subir el texto, ya que la altura es menor */
.carousel-reduced-height .carousel-caption {
    padding-bottom: 50px; 
    /* Asegúrate de que el texto no sea display-3, sino h2, como en el HTML de Nosotros.cshtml */
}