/* Variables para colores (opcional, pero útil para mantener consistencia) */
:root {
    --dim-dark-gray: #000000; /* Un gris oscuro para el fondo general */
    --dim-light-gray: #e9e9e9; /* Fondo claro para algunas secciones si las hubiera */
    --dim-yellow: #cfb104;    /* Amarillo del logo */
    --dim-red: #c0392b;      /* Rojo de tu branding, si aplica */
    --text-white: #ffffff;
    --dim-black: #000000; /* Un negro oscuro */
    
}
#top-bar .contact-link {
    color: var(--text-yellow); /* Asume que la barra superior es oscura */
    font-size: 0.9rem; /* O el tamaño de fuente que uses */
    transition: color 0.3s;
}

#top-bar .contact-link:hover {
    color: var(--dim-white); /* Color de resaltado al pasar el mouse */
}

/* Estilos para la sección del carrusel */
#customCarouselSection {
    background-color: var(--dim-dark-gray); /* Fondo oscuro general */
  
    display: flex; 
    align-items: center;
    /* Añadimos un padding o altura mínima para el contenedor de la sección */
    padding-top: 12rem; /* Espacio superior */
    padding-bottom: 3rem; /* Espacio inferior */
    height: auto; /* La altura se adaptará al contenido */
}

/* El contenedor del carrusel en sí */
#heroCarousel {
    width: 100%;

}


/* Contenedor principal de cada slide del carrusel */
.carousel-content-wrapper {
    display: flex;
    flex-direction: column; 
    /* Altura fija o máxima para cada slide item. 
       Esto es clave para controlar el tamaño general del carrusel.
       Ajusta este valor (`60vh`) para hacer la imagen más pequeña o más grande. 
    */
    height: 40vh; /* <-- ¡Este es el valor clave a ajustar! Prueba con 50vh, 70vh, etc. */
    min-height: 350px; /* Altura mínima para asegurar que no sea demasiado pequeño en pantallas muy chicas */
    background-color: var(--dim-dark-gray); 
}

/* Área de Texto (izquierda) */
.carousel-text-area {
    flex: 1; /* Ocupa espacio flexible */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
    padding: 2rem 1rem; /* Espaciado interno, reducido un poco */
    color: var(--text-white);
    text-align: center; /* Centra el texto en móviles */
    background-color: var(--dim-dark-gray); 
}

/* Área de Imagen (derecha) */
.carousel-image-area {
    flex: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}

.carousel-image-area img {
    height: 100%; 
    object-fit: cover; 
    width: 100%; 
}

/* Media query para pantallas más grandes (Desktop) */
@media (min-width: 768px) {
    .carousel-content-wrapper {
        flex-direction: row; 
        height: 60vh; /* Mantenemos la misma altura para desktop */
        min-height: 500px; /* Altura mínima para desktop para que se vea bien */
    }
    .carousel-text-area {
        flex: 0 0 50%; 
        text-align: left; 
        padding: 3rem 5rem; 
    }
    .carousel-image-area {
        flex: 0 0 50%; 
    }
}


/* Estilos de los elementos de texto (sin cambios, a menos que quieras ajustarlos) */
.small-badge {
    background-color: #e0bb00; 
    color: var(--text-white);
    padding: 0.3rem 0.8rem;
    border-radius: 5px;
    font-size: 0.8rem;
    display: inline-block; 
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: bold;
}

.carousel-title {
    font-size: 3rem; /* Reducido un poco el tamaño del título */
    font-weight: bold;
    color: var(--text-white);
    margin-bottom: 0.8rem; /* Espacio inferior ajustado */
    line-height: 1.1; 
}

.carousel-description {
    font-size: 1.1rem; /* Reducido un poco el tamaño de la descripción */
    color: var(--text-white);
    margin-bottom: 1.5rem; /* Espacio inferior ajustado */
}

/* Estilo del botón */
.custom-btn {
    background-color: var(--dim-yellow); 
    color: var(--dim-dark-gray); 
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.custom-btn:hover {
    background-color: #e0bb00; 
    color: var(--dim-dark-gray);
}

/* Estilo de los indicadores del carrusel (los puntos blancos de abajo) */
.carousel-indicators [data-bs-target] {
    background-color: rgba(255, 255, 255, 0.5); 
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    margin: 0 5px;
}

.carousel-indicators .active {
    background-color: var(--text-white); 
}

/* Estilo de las flechas de navegación del carrusel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none; 
    width: 40px; 
    height: 40px;
    border-radius: 50%; 
    background-color: rgba(255, 255, 255, 0.3); 
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); 
}

/* Añadimos el icono de flecha SVG manualmente dentro del span */
.carousel-control-prev-icon::after {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    width: 20px;
    height: 20px;
}

.carousel-control-next-icon::after {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    width: 20px;
    height: 20px;
}

/* Ajuste de posición de las flechas para que estén más cerca del contenido */
.carousel-control-prev {
    left: 2%; 
}

.carousel-control-next {
    right: 2%; 
}
/* ... (Todo el CSS del carrusel que ya tenías) ... */

/* --- NUEVOS ESTILOS PARA EL HEADER (Basado en image_7cc3de.png) --- */

/* Barra Superior de Contacto */
#top-bar {
    background-color: #000000; /* Fondo negro */
    color: #F3D00D; /* Texto en amarillo del logo */
    font-size: 0.9rem;
}

#top-bar .contact-info {
    color: #F3D00D;
}

#top-bar .contact-info i {
    margin-right: 5px;
}

/* Navegación Principal */
#main-nav {
    background-color: #000000 !important; /* Asegura que el fondo de la barra de navegación sea negro */
    border-bottom: 5px solid #F3D00D; /* Línea separadora amarilla */
}

#main-nav .navbar-nav .nav-link {
    color: white; /* Texto del menú en blanco */
    font-weight: 500;
    margin-right: 15px;
    padding: 10px 15px;
    transition: color 0.3s;
}

#main-nav .navbar-nav .nav-link:hover {
    color: #F3D00D; /* Cambio de color al pasar el ratón a amarillo */
}
/* --- ESTILOS DE LA BARRA DE NAVEGACIÓN (main-nav) --- */

#main-nav {
    /* Transiciones para suavizar los cambios de tamaño y color */
    transition: all 0.4s ease-in-out; 
    
    /* Altura por defecto (cuando está arriba del todo) */
    padding-top: 20px; 
    padding-bottom: 20px; 
}

/* Estilo para el logo por defecto */
#main-nav .navbar-brand img {
    height: 60px;
    transition: height 0.4s ease-in-out;
}

/* --- ESTILOS CUANDO SE DETECTA EL SCROLL (Clase 'scrolled') --- */

#main-nav.scrolled {
    /* 1. Fondo negro semitransparente */
    background-color: rgba(0, 0, 0, 0.9) !important; 
    
    /* 2. Compactar la barra (menos padding) */
    padding-top: 10px; 
    padding-bottom: 10px; 
    
    /* 3. Sombra (opcional, para darle más profundidad) */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8); 
}

/* Ajuste del tamaño del logo en el estado 'scrolled' */
#main-nav.scrolled .navbar-brand img {
    height: 40px; /* Logo más pequeño */
}

/* Ajuste del tamaño de fuente de los enlaces en el estado 'scrolled' (opcional) */
#main-nav.scrolled .nav-link {
    font-size: 0.95rem; 
}
/* --- ESTILO 3: MODERNO Y ASIMÉTRICO --- */

/* Estilos de la sección principal */
#confiabilidad-activos-moderno {
    /* Fondo muy oscuro, pero no negro puro, para profundidad */
    background-color: #ffffff; 
    padding-top: 6rem;
    padding-bottom: 6rem;
    color: rgb(0, 0, 0); 
}

/* Contenedor del título y la línea */
.title-container-moderno {
    position: relative;
    padding-left: 15px; 
}

/* La línea horizontal amarilla con un sutil efecto de degradado */
.title-line-moderno {
    width: 250px; /* Línea más larga */
    height: 6px; /* Línea más gruesa */
    background: linear-gradient(to right, var(--dim-yellow), rgba(255, 255, 255, 0));
    margin-bottom: 30px; 
    margin-left: -15px; 
}

/* Estilo del título principal (Parte 1) */
.section-title-dim-moderno {
    font-size: 3rem; 
    font-weight: 300; 
    line-height: 1.1;
    color: rgb(0, 0, 0); 
    margin-bottom: 0;
}

/* Color amarillo para la palabra "DIM" */
.text-yellow-dim-moderno {
    color: var(--dim-yellow);
    font-weight: 900; 
    font-size: 3.3rem; 
    letter-spacing: 2px; /* Espaciado para hacerlo más impactante */
}

/* Estilo del título principal (Parte 2) */
.section-title-expertas-moderno {
    font-size: 3rem;
    font-weight: 600; /* Semi-negrita */
    line-height: 1.1;
    color: rgb(39, 39, 39); 
    margin-top: 5px;
}

/* Estilo del contenido de la descripción */
.description-content-moderno {
    /* Separar la descripción en desktop para un look asimétrico */
    padding-left: 50px; 
}

.description-content-moderno p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #000000; /* Gris muy claro para fácil lectura */
    margin-bottom: 1.8rem;
    text-align: left;
}

/* Estilo para el texto clave resaltado */
.description-content-moderno .font-bold-moderno {
    font-weight: 700; 
    color: white; 
}

.description-content-moderno p b {
    /* Aplica negrita a las etiquetas <b> en el HTML */
    font-weight: 700;
}


/* Media Query para pantallas grandes */
@media (min-width: 992px) {
    .section-title-dim-moderno,
    .section-title-expertas-moderno {
        font-size: 4rem; /* Títulos más grandes en desktop */
    }
    .text-yellow-dim-moderno {
        font-size: 4.4rem; 
    }
    .title-container-moderno {
        /* Reset de padding para usar el layout de 50/50 de Bootstrap */
        padding-left: 0; 
    }
    .description-content-moderno {
        /* Usamos padding para crear el espacio asimétrico */
        padding-top: 20px; 
        padding-left: 50px; 
    }
}
/* --- ESTILO BASE PARA EL ENCABEZADO FIJO --- */

#sticky-header-wrapper {
    /* Fija el contenedor completo en la parte superior de la ventana */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030; /* Alto z-index para que esté siempre por encima de todo */
    transition: all 0.4s ease-in-out; /* Transición para suavizar el cambio al encogerse */
}

/* --- ESTILOS DE LA BARRA DE CONTACTO (#top-bar) --- */

#top-bar {
    /* Altura por defecto de la barra de contacto */
    transition: padding 0.4s ease-in-out, font-size 0.4s ease-in-out;
}

#top-bar .py-2 {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
}

/* --- ESTILOS DE LA BARRA DE NAVEGACIÓN (#main-nav) --- */

#main-nav {
    transition: all 0.4s ease-in-out;
    padding-top: 20px; 
    padding-bottom: 20px; 
}

#main-nav .navbar-brand img {
    height: 60px;
    transition: height 0.4s ease-in-out;
}


/* --- ESTILOS CUANDO SE DETECTA EL SCROLL (Clase 'scrolled') --- */

#sticky-header-wrapper.scrolled #top-bar {
    /* 1. Opcional: Reducir padding de la barra de contacto */
    font-size: 0.8rem; /* Letra más pequeña */
}

#sticky-header-wrapper.scrolled #top-bar .py-2 {
    /* Reducir el padding vertical de la barra de contacto */
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}


#sticky-header-wrapper.scrolled #main-nav {
    /* 2. Compactar la barra de navegación */
    padding-top: 10px; 
    padding-bottom: 10px; 
    
    /* 3. Fondo negro semitransparente (si quieres que se vea el contenido debajo) */
    background-color: rgba(0, 0, 0, 0.8) !important; 
    
    /* 4. Sombra para destacar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
}

#sticky-header-wrapper.scrolled #main-nav .navbar-brand img {
    /* 5. Logo más pequeño */
    height: 40px; 
}/* ========================================================================= */
/* AJUSTES DE ESPACIO (Padding) PARA GRANDES SECCIONES */
/* ========================================================================= */

/* Aplicamos un padding vertical muy grande Y UNA ALTURA MÍNIMA */
.section-large-padding {
    padding-top: 8rem !important; 
    padding-bottom: 8rem !important; 
    /* Fuerzamos una altura mínima para garantizar el "aire" en secciones con poco contenido */
    min-height: 50vh; 
}

/* Aplicamos un padding interno grande a los bloques */
.block-large-padding {
    padding-bottom: 8rem !important;
}

/* Asegura que el borde divisor sea ancho y visible */
.border-secondary {
    border-color: #ccc !important; /* Gris claro */
    border-width: 2px !important;
}

.border-warning {
    border-color: var(--dim-yellow) !important; /* Amarillo */
    border-width: 2px !important;
}

/* ========================================================================= */
/* AJUSTES DE ESPACIO EXAGERADO PARA SECCIONES */
/* ========================================================================= */

/* Aplicamos un padding vertical MUCHO MAYOR (10rem = 160px) */
.section-large-padding {
    padding-top: 10rem !important; 
    padding-bottom: 10rem !important; 
    /* Forzamos una altura mínima para garantizar el "aire" */
    min-height: 70vh; 
}

/* Aplicamos un margen inferior GIGANTE al bloque de la primera mitad */
.block-large-margin-bottom {
    margin-bottom: 8rem !important; /* 8rem = 128px de separación entre bloques */
    padding-bottom: 2rem !important; /* Mantenemos un padding cómodo */
}

/* Asegura que el borde divisor sea ancho y visible */
.border-secondary {
    border-color: #ccc !important; /* Gris claro */
    border-width: 2px !important;
}

.border-warning {
    border-color: var(--dim-yellow) !important; /* Amarillo */
    border-width: 2px !important;
}
/* ========================================================================= */
/* AJUSTES DE ALTURA Y ESPACIO GLOBAL (Para bajar la barra superior) */
/* ========================================================================= */

/* IMPORTANT: AUMENTAR ESTE VALOR para bajar el contenido de la página */
body {
    margin-top: 150px; /* Incrementado a 180px, puede ajustar si necesita más espacio */
}

/* ... (el resto de su CSS, incluyendo los estilos para #main-nav, #top-bar, etc.) ... */

/* ESTILOS ESPECÍFICOS PARA SERVICIOS.PHP */
#hero-servicios {
    /* Mantenemos el padding interno de la sección hero */
    padding-top: 2rem !important; /* Ajuste este valor si el texto aún está muy alto dentro del hero */
    padding-bottom: 2rem !important;
    /* ... (resto de estilos para hero-servicios) ... */
}
/* ========================================================================= */
/* ESTILOS PARA IMÁGENES DE SERVICIO (Mismo Tamaño) */
/* ========================================================================= */

/* Aplicar a todas las imágenes dentro de las secciones de servicios */
.section-large-padding img {
    height: 400px; /* Altura fija para todas las imágenes */
    width: 300px; /* Asegura que ocupe todo el ancho disponible en su columna */
    object-fit: cover; /* Recorta la imagen para que llene el espacio sin distorsionarse */
    object-position: center; /* Centra la imagen dentro de su contenedor */
    border-radius: 8px; /* Mantener bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para un buen efecto */
}
/* ========================================================================= */
/* ESTILOS PARA LA SECCIÓN DE EMPRESAS (index.php) - AJUSTE 3x3 */
/* ========================================================================= */

/* Contenedor específico para la distribución 3x3 */
.logo-item-3x3 {
    /* Forzamos que todos los contenedores tengan la misma altura para una grilla limpia */
    height: 100px; /* Puedes ajustar este valor según la altura deseada para los logos */
    display: flex; /* Usamos flexbox para centrar la imagen */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    padding: 0 10px; 
    opacity: 0.8; 
    transition: opacity 0.3s ease;
}

.logo-item-3x3:hover {
    opacity: 1; 
}

/* Estilos para la IMAGEN dentro del contenedor */
.logo-item-3x3 img {
    max-width: 90%; /* Máximo ancho de la imagen */
    max-height: 90%; /* Máximo alto dentro del contenedor (100px) */
    width: auto; 
    height: auto; 
    
    /* Esta propiedad garantiza que la imagen se vea completa sin estirarse, 
       ajustándose al tamaño del contenedor (100px de alto) */
    object-fit: contain; 
    
    filter: grayscale(100%); 
    transition: filter 0.3s ease;
}

.logo-item-3x3:hover img {
    filter: grayscale(0%);
}

/* (Mantener el CSS del título si lo usas) */
.section-title-empresas {
    font-size: 3rem; 
    font-weight: 300; 
    color: #343a40; 
    text-transform: lowercase; 
}

@media (min-width: 992px) {
    .section-title-empresas {
        padding-top: 20px; 
    }
}
/* ========================================================================= */
/* ESTILOS PARA LA GALERÍA DE TRABAJOS */
/* ========================================================================= */

#galeria-trabajos {
    
     background-color: #000000; 
}

/* Contenedor de la imagen para forzar un ratio o altura uniforme (opcional pero recomendado) */
.gallery-item .image-wrapper {
    width: 320px;
    /* Altura forzada para que todas las imágenes sean cuadradas o del mismo alto */
    padding-bottom: 100%; /* Ejemplo: 75% de ancho para un ratio 4:3. Usa 100% para cuadrado. */
    position: relative;
    overflow: hidden;
    border-radius: 5px; /* Bordes redondeados sutiles */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilos de la imagen dentro del contenedor */
.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Asegura que la imagen cubra el contenedor sin distorsionarse, 
       cortando lo que no cabe (a diferencia de 'contain') */
    object-fit: cover; 
    transition: transform 0.5s ease;
}

.gallery-item img:hover {
    transform: scale(1.05); /* Zoom sutil al pasar el mouse */
}

/* Estilos de los botones de control (flechas) */
#dynamicGalleryCarousel .carousel-control-prev-icon,
#dynamicGalleryCarousel .carousel-control-next-icon {
    /* Hacemos las flechas amarillas y un poco más grandes para que destaquen */
    background-color: var(--dim-yellow);
    padding: 1rem;
    border-radius: 50%;
    /* Usamos un color negro o oscuro en las flechas para el contraste */
    filter: invert(1); 
    height: 30px;
    width: 30px;
}

#dynamicGalleryCarousel .carousel-control-prev,
#dynamicGalleryCarousel .carousel-control-next {
    width: 5%; /* Reducimos el área de clic */
}

/* ========================================================================= */
/* ESTILOS PARA EL BOTÓN FLOTANTE DE WHATSAPP */
/* ========================================================================= */

.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #25d366; 
    color: white; 
    padding: 12px 20px; /* Padding para el texto y el ícono */
    border-radius: 50px; 
    text-decoration: none; 
    font-size: 1.1rem; 
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
    z-index: 1000; 
    transition: all 0.3s ease-in-out, width 0.3s ease-in-out, padding 0.3s ease-in-out; 
    white-space: nowrap; 
    
    /* Importante para el ícono y el texto */
    display: inline-flex; 
}

/* Oculta el texto normalmente si se muestra el ícono */
.whatsapp-float .whatsapp-text {
    transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* ESTADO: CUANDO EL USUARIO HACE SCROLL HACIA ABAJO */
.whatsapp-float.scrolled-down {
    /* 1. Ocultamos el texto completamente */
    padding: 12px 12px; /* Reducimos el padding para que sea más pequeño */
    width: 45px; /* Fijamos un ancho, igual al alto */
    height: 45px; /* Mismo alto */
    border-radius: 50%; /* Lo hacemos completamente circular */
    
    /* Otros efectos sutiles */
    transform: scale(1); 
    opacity: 0.9;
}

/* Ocultamos el texto DENTRO del estado scrolled-down */
.whatsapp-float.scrolled-down .whatsapp-text {
    display: none; /* Oculta el texto */
}

/* Eliminamos el margen del ícono en el estado de solo ícono */
.whatsapp-float.scrolled-down .fa-whatsapp {
    margin-right: 0 !important;
}

/* Efecto hover (mantener) */
.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.05);
    color: white;
}
/* ========================================================================= */
/* AJUSTES RESPONSIVE GLOBALES (Móviles: hasta 576px) */
/* ========================================================================= */
@media (max-width: 767.98px) {
    /* ------------------------------------------- */
    /* 1. AJUSTES GENERALES DEL BODY (Espacio Superior) */
    /* ------------------------------------------- */
    
    /* Reducimos el margin-top del body para pantallas móviles, ya que el header es más compacto */
    body {
        margin-top: 100px; /* Reducido de 150px a 100px */
    }

    /* ------------------------------------------- */
    /* 2. AJUSTES DEL BOTÓN DE WHATSAPP */
    /* ------------------------------------------- */
    .whatsapp-float {
        bottom: 15px; /* Más cerca de la parte inferior */
        right: 15px; /* Más cerca del borde derecho */
        padding: 10px 15px; /* Padding más pequeño para el estado normal */
        font-size: 1rem; /* Fuente un poco más pequeña */
    }

    /* Estado SCROLLED-DOWN (Solo el ícono) */
    .whatsapp-float.scrolled-down {
        width: 40px; /* Tamaño del ícono un poco más pequeño */
        height: 40px;
        padding: 10px; /* Padding ajustado */
    }

    /* ------------------------------------------- */
    /* 3. AJUSTES DEL CARRUSEL PRINCIPAL */
    /* ------------------------------------------- */
    #customCarouselSection {
        padding-top: 2rem; /* Reduce el padding superior exagerado */
        padding-bottom: 2rem;
    }
    
    /* Contenedor principal de la slide: Ya lo tenías bien en 40vh, solo confirmamos */
    .carousel-content-wrapper {
        height: auto; /* Dejar que el contenido defina la altura */
        min-height: 400px; 
    }
    
    /* Área de Texto: Aumenta el padding para que no se pegue a los lados */
    .carousel-text-area {
        padding: 2rem 1.5rem;
    }
    
    /* Títulos en móvil: Hazlos más pequeños para que no rompan el contenedor */
    .carousel-title {
        font-size: 2.2rem; 
    }
    
    /* Flechas del carrusel: Hazlas más pequeñas y sutiles */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 30px; 
        height: 30px;
    }
    
    /* ------------------------------------------- */
    /* 4. AJUSTES DEL FOOTER (Columna de contacto y mapa) */
    /* ------------------------------------------- */
    
    /* Alineación de texto en móvil: Todo centrado para mejor aspecto */
    #main-footer .col-md-4,
    #main-footer .col-md-6 {
        text-align: center !important;
    }
    
    /* Reduce el margen inferior entre bloques para móviles */
    #main-footer .mb-4.mb-md-0 {
        margin-bottom: 2rem !important; 
    }
    
    /* El mapa se extiende a todo el ancho y se reduce su altura */
    .map-container {
        height: 150px !important;
    }

    /* ------------------------------------------- */
    /* 5. AJUSTES DE LA GALERÍA DE EMPRESAS (Logo 3x3) */
    /* ------------------------------------------- */

    /* Forzar 2 logos por fila en móvil (col-6) en lugar de 3 (col-4) */
    .col-4.col-sm-3.col-lg-2.logo-item-3x3 {
        flex: 0 0 auto;
        width: 50%; /* Dos por fila en el grid de Bootstrap */
    }

    /* ------------------------------------------- */
    /* 6. AJUSTES DE TÍTULOS GRANDES (DIM, etc.) */
    /* ------------------------------------------- */
    
    .section-title-dim-moderno,
    .section-title-expertas-moderno {
        font-size: 2.5rem; /* Títulos más pequeños en móvil */
    }
    .text-yellow-dim-moderno {
        font-size: 2.8rem;
    }
    
    /* Reducir el padding de separación en la descripción */
    .description-content-moderno {
        padding-left: 15px; /* Reducido a un padding normal */
        padding-top: 1.5rem;
    }

}/* ========================================================================= */
/* ESTILOS PARA GALERÍAS DE DOS IMÁGENES EN 'SOBRE NOSOTROS' */
/* ========================================================================= */

.image-gallery-2col {
    display: grid;
    /* Divide el espacio en dos columnas iguales con un pequeño espacio */
    grid-template-columns: 1fr 1fr; 
    gap: 10px; /* Espacio entre las imágenes */
    padding: 0;
    margin: 0;
}

.image-gallery-2col .gallery-item {
    overflow: hidden;
    /* Mantiene las imágenes como cuadrados o rectángulos de altura fija */
    height: 250px; 
    
    /* Asegura que el borde redondeado asimétrico se aplique al contenedor padre de la imagen */
    border-radius: 10px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

.image-gallery-2col .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre el área sin distorsionarse */
}

/* Media Query para móviles: las imágenes se apilan verticalmente */
@media (max-width: 767.98px) {
    .image-gallery-2col {
        grid-template-columns: 1fr; /* Una sola columna */
    }
    .image-gallery-2col .gallery-item {
        height: 200px; /* Altura un poco más pequeña en móvil */
    }
}
/* ESTILOS ESPECÍFICOS PARA CONTACTO.PHP */

/* Altura del contenedor del mapa */
.map-container {
    height: 450px; /* Igual que la altura definida en el iframe, pero garantiza el espacio */
    width: 100%;
}

/* Estilo para los inputs del formulario (opcional) */
#contact-form-map .form-control {
    border-radius: 5px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    box-shadow: none;
    transition: border-color 0.3s;
}

#contact-form-map .form-control:focus {
    border-color: var(--dim-yellow);
    box-shadow: 0 0 0 0.25rem rgba(243, 208, 13, 0.25); /* Sombra suave con el color amarillo */
}
/* ESTILOS PARA FOOTER.PHP */

/* Estilo de los íconos sociales en el footer */
.footer-social-icon {
    font-size: 1.5rem; /* Tamaño de los íconos */
    color: var(--text-white);
    transition: color 0.3s;
}

.footer-social-icon:hover {
    color: var(--dim-yellow); /* Color al pasar el mouse */
}

/* Estilo para los enlaces de texto en el footer */
#main-footer a.text-secondary:hover {
    color: var(--dim-yellow) !important;
}
/* 1. Selecciona el contenedor que tiene la imagen para aplicar el pseudo-elemento */
/* Usaremos el .d-flex de tu HTML para mantener la estructura original */
#hero-servicios .d-flex {
    position: relative; /* ¡CLAVE! Punto de referencia para la capa negra y el texto. */
    display: flex; 
    justify-content: center;
    /* Necesitas darle una altura para que el :before sepa cuánto cubrir */
    max-height: 350px; 
    overflow: hidden; /* Oculta cualquier cosa que se desborde */
}

/* 2. Pseudo-elemento para la capa negra (¡Ahora funciona!) */
#hero-servicios .d-flex::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Capa negra (50% opacidad) */
    z-index: 1; 
    border-radius: inherit; /* Hereda bordes redondeados */
}

/* 3. Estilos de la imagen: DEBEN estar en la capa inferior */
#hero-servicios img {
    position: relative; 
    z-index: 0; /* Asegura que la imagen esté debajo de la capa negra (z-index: 1) */
    /* Mantén tus estilos de tamaño */
    max-height: 350px; 
    width: 100%; 
    object-fit: cover;
}

/* 4. Estilos del título: DEBEN estar en la capa superior y centrado */
#hero-servicios h1 {
    position: absolute; /* CLAVE: Posicionamiento sobre la imagen. */
    z-index: 2; /* Asegura que el texto esté encima de la capa negra (z-index: 1) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado perfecto */
    text-shadow: 2px 2px 4px rgba(rgba(0, 0, 0, 0.7)); /* Ayuda a resaltar el texto */
}