/* ==========================================
   VARIABLES GLOBALES Y FUENTES LOCALES
   ========================================== */
:root {
    --lacsma-green: #5DAE22;
}

:root {
    --lacsma-green: #5DAE22;
    --lacsma-green-light: #CFE7BD;
    /* 🟢 Agregamos esta variable para tus botones de servicios */
}

@font-face {
    font-family: 'aptos regular';
    src: url('../font/Aptos.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'aptos light';
    src: url('../font/Aptos-Light.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'aptos semibold';
    src: url('../font/Aptos-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'teko regular';
    src: url('../font/Teko-Regular.ttf') format('truetype');
    font-style: normal;
}

html {
    scroll-behavior: smooth !important;

}

/* ==========================================
   NAVBAR LACSMA
   ========================================== */
/* Contenedor principal del Navbar (Alineado a 1rem según estándar) */
.navbar-lacsma {
    background-color: var(--lacsma-green);
    height: 90px;
    padding: 22px 1rem;
}

/* Reseteo limpio de la marca/logo */
.navbar-lacsma .navbar-brand {
    padding-left: 0 !important;
}

.navbar-lacsma .navbar-brand img {
    height: 45px;
    width: auto;
}

/* Links del menú (Estado normal) */
.navbar-lacsma .navbar-nav .nav-link {
    font-family: 'teko regular', Arial, sans-serif;
    font-size: 20px;
    color: #ffffff !important;
    line-height: 1;
    padding: 0;
    white-space: nowrap;
    display: inline-block !important;
    /* 👈 OBLIGATORIO: 'transform' necesita que el elemento sea bloque o inline-block para funcionar */

    /* 🎯 Agregamos 'transform' a la transición para que el cambio de tamaño sea suave y fluido */
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* 🎯 CORRECCIÓN Y EFECTO HOVER */
@media (hover: hover) {
    .navbar-lacsma .navbar-nav .nav-link:hover {
        opacity: 0.9 !important;

        /* 🚀 EFECTO AGRANDAR: 
           1.05 significa que crecerá un 5% de su tamaño original. */
        transform: scale(1.05) !important;
        cursor: pointer;
    }
}

/* Botón hamburguesa móvil (Estado normal) */
.navbar-lacsma .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* 🎯 CAMBIO DEL COLOR DE SELECCIÓN A #EDEDED */
.navbar-lacsma .navbar-toggler:focus,
.navbar-lacsma .navbar-toggler:active {
    outline: none !important;
    border-color: #EDEDED !important;
    box-shadow: 0 0 0 0.25rem rgba(237, 237, 237, 0.5) !important;
}

.navbar-lacsma .navbar-toggler-icon {
    filter: invert(1);
}

/* ==========================================
   NUEVO TEXTO CORPORATIVO DEL NAVBAR (APTOS)
   ========================================== */

/* 📱 POR DEFECTO (Celulares menores a 768px): El texto permanece oculto */
.navbar-text-brand {
    display: none; /* 🎯 CORREGIDO: Eliminamos el !important para permitir que se active en pantallas grandes */
}

/* 📐 Puntaje y estilo de la barra separadora "|" */
.navbar-text-brand .brand-divider {
    color: #ffffff !important;
    font-size: 36px;                  
    font-weight: 300;
    display: inline-block;
    line-height: 1;                   
    align-self: center;               
    margin-top: -4px;                 /* 🔧 Truco óptico para centrado */
    margin-bottom: 4px;
    margin-left: 2px;
}

/* 📐 Puntaje y Tipografía para el texto largo */
.navbar-text-brand .brand-sub {
    font-family: 'aptos regular', Arial, sans-serif; 
    color: #ffffff !important;
    font-size: 18px;                  
    line-height: 1;                   
    letter-spacing: 0.3px;            
    opacity: 0.95;
    align-self: center;               
}

/* 🎯 CONFIGURACIÓN DESDE IPAD EN ADELANTE (768px hasta monitores grandes) */
@media (min-width: 768px) {
    .navbar-text-brand {
        color: #ffffff !important;        
        display: inline-flex !important;  /* 🚀 Forzamos a que aparezca al lado de la imagen */
        align-items: center !important;   
        justify-content: center;          
        gap: 12px;                        
        line-height: 1; 
    }
}

/* ==========================================
   RESPONSIVE NAVBAR (Estructura de colapso de tu menú)
   ========================================== */
@media (max-width: 991px) {
    .navbar-lacsma {
        height: auto;
    }

    .navbar-lacsma .navbar-collapse {
        padding-top: 12px;
        padding-bottom: 8px;
    }

    .navbar-lacsma .navbar-nav .nav-link {
        padding: 6px 0;
    }
}

/* Asegurar visibilidad total en cualquier navegador (Chrome, Opera, Safari, etc.) */
@media (min-width: 768px) {
    .navbar-text-brand {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important; /* Evita que librerías JS lo dejen transparente en Opera */
    }
    .navbar-text-brand .brand-sub,
    .navbar-text-brand .brand-divider {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ==========================================
   FOOTER LACSMA
   ========================================== */
/* Contenedor principal del Footer */
.footer-lacsma {
    background-color: var(--lacsma-green);
    padding: 40px 0;
}

/* Reseteo limpio de la sección del logo */
.footer-lacsma .footer-left-section {
    padding-left: 0 !important;
}

/* Logo LACSMA */
.footer-logo {
    height: 52px;
    width: auto;
}

/* Divisor vertical entre logo y nombre corporativo */
.footer-divider {
    width: 1px;
    height: 57px;
    background-color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

/* Nombre corporativo */
.footer-corp-name {
    font-family: 'aptos semibold', Arial, sans-serif;
    font-size: 14px;
    color: #ffffff;
    line-height: 1.3;
    max-width: 297px;
}

/* Estilos de los Enlaces (Contacto y Redes) */
.footer-contact-item-link,
.footer-social-item {
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* Iconos de contacto y redes */
.footer-icon,
.footer-icon-ubi,
.footer-icon-tel {
    flex-shrink: 0;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.footer-icon {
    width: 20px;
    height: 20px;
}

.footer-icon-ubi {
    width: 20px;
    height: 27px;
}

.footer-icon-tel {
    width: 20px;
    height: 25px;
}

/* Textos de información */
.footer-contact-text {
    font-family: 'aptos regular', Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    line-height: 1.4;
    margin: 0;
}

.footer-social-text {
    font-family: 'aptos regular', Arial, sans-serif;
    font-size: 10px;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

/* Estructura de filas y Grid */
.footer-right-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* 🎯 LA CLAVE: Forzamos a que todo empiece alineado perfectamente a la izquierda 
       por el mismo eje vertical en pantallas de escritorio */
    align-items: flex-start;
    width: 100%;
    max-width: 600px;
    /* Limita el ancho en monitores ultra anchos para que se vea ordenado */
    margin-left: auto;
    /* Empuja el bloque completo hacia su zona correspondiente de la rejilla */
}

/* Fila para Ubicación y Teléfono alineada al inicio */
.footer-contact-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px 40px;
    /* Cómodo espacio entre bloques */
    width: 100%;
}

.footer-contact-row {
    gap: 8px;
    display: flex;
    align-items: flex-start;
}

.footer-social-grid {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    gap: 12px 30px;
    /* Aseguramos que la cuadrícula también empiece desde la izquierda */
    justify-content: start;
    width: 100%;
}

.footer-social-item {
    gap: 8px;
}

/* ==========================================
   EFECTOS HOVER (FOOTER) - TRANSICIÓN SUAVE
   ========================================== */

/*Estado base con una curva de aceleración ultra suave */
.footer-contact-item-link,
.footer-social-item {


    /* Aumentamos a 0.35s y usamos un cubic-bezier para un frenado elegante y orgánico */
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 2. Micro-zoom sutil */
.footer-contact-item-link:hover,
.footer-contact-item-link:focus,
.footer-social-item:hover,
.footer-social-item:focus {
    transform: scale(1.06) !important;
}

/*Evitamos saltos bruscos en otros elementos internos */
.footer-contact-item-link:hover .footer-contact-text,
.footer-social-item:hover .footer-social-text {
    color: #EDEDED !important;
}

.footer-contact-item-link:hover img,
.footer-social-item:hover img {
    transform: none !important;
}

/* ==========================================
   RESPONSIVE FOOTER (ALINEACIÓN PERFECTA DE ICONOS)
   ========================================== */
@media (max-width: 991px) {

    /* El logo y el nombre corporativo se mantienen centrados para verse estéticos */
    .footer-left-section {
        justify-content: center !important;
        margin-bottom: 16px;
    }

    /* 🎯 LA CLAVE: Forzamos a que el bloque de contactos empiece al ras por la izquierda, 
       pero centramos la caja contenedora completa en la pantalla del celular/tablet */
    .footer-right-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        /* 🚀 Alinea todos los iconos al mismo ras izquierdo */
        text-align: left !important;
        margin: 0 auto !important;
        /* 🚀 Centra el bloque entero en el cuerpo del móvil */
        width: 100% !important;
        max-width: 320px;
        /* Acota el ancho para que luzca ordenado en tablets y teléfonos */
    }

    /* Convertimos la fila superior de contacto en una lista vertical limpia */
    .footer-contact-top-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        margin-bottom: 16px !important;
        width: 100% !important;
    }

    /* Modificamos el Grid de redes para que sea una lista de una sola columna vertical */
    .footer-social-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        width: 100% !important;
    }

    /* Aseguramos que los contenedores usen flexbox alineado al inicio */
    .footer-contact-row,
    .footer-social-item {
        display: flex !important;
        align-items: center !important;
        /* Centrado vertical para que icono y texto se cuadren */
        justify-content: flex-start !important;
        gap: 12px !important;
        /* Separación idéntica para todos los elementos */
        width: 100% !important;
    }

    /* 🎯 UNIFICACIÓN GEOMÉTRICA DE ICONOS:
       Como tus tres tipos de iconos tienen anchos diferentes originalmente, 
       forzamos a que todos ocupen exactamente 22px de espacio horizontal en móvil. 
       Esto hace que el texto de al lado arranque MILIMÉTRICAMENTE en la misma coordenada. */
    .footer-icon,
    .footer-icon-ubi,
    .footer-icon-tel {
        width: 22px !important;
        height: 22px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        margin-top: 0 !important;
        /* Reseteamos el mt-1 del HTML que los desalineaba */
    }

    /* Ajuste fino especial para textos con saltos de línea (Ubicación y Teléfono) */
    .footer-contact-row {
        align-items: flex-start !important;
    }

    .footer-contact-row .footer-icon-ubi,
    .footer-contact-row .footer-icon-tel {
        margin-top: 3px !important;
        /* Pequeño empuje visual si el texto ocupa dos renglones */
    }
}

/* ==========================================================================
   SOLUCIÓN COMPACTA PARA EL FOOTER (PANTALLAS MINI - 326px)
   ========================================================================== */
@media (max-width: 360px) {

    /* 1. Aseguramos un colchón seguro a los extremos del footer para que nada toque el borde */
    .footer-lacsma {
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    /* 2. Encogemos sutilmente el logo para que no empuje el divisor vertical */
    .footer-logo {
        height: 42px !important;
        /* Baja de 52px a 42px en pantallas mini */
        width: auto;
    }

    /* 3. Achicamos la barra divisora para que vaya acorde al nuevo tamaño del logo */
    .footer-divider {
        height: 45px !important;
    }

    /* 4. Hacemos el texto corporativo un poco más chiquito para que no se desborde */
    .footer-corp-name {
        font-size: 11.5px !important;
        /* Baja de 14px a 11.5px */
        max-width: 190px !important;
        /* Acorta el límite para que use saltos de línea ordenados */
    }

    /* 5. Ajustamos el bloque de la derecha para que no supere físicamente la pantalla de 326px */
    .footer-right-section {
        max-width: 100% !important;
        /* Cambia el 320px fijo por un 100% elástico */
        padding-left: 4px !important;
        /* Pequeño ajuste para que ensamble con la izquierda */
    }
}

/* ==========================================================================
   COMPONENTE AISLADO: TARJETAS ESPECÍFICAS DE SERVICIOS (lacsma-svc-)
   ========================================================================== */

/* Contenedor principal de la tarjeta */
.lacsma-svc-card {
    background-color: #EDEDED !important;
    /* Fondo #EDEDED (Brand C2) */
    border: none !important;
    border-radius: 32px 32px 0 0 !important;
    /* Esquinas superiores redondeadas */

    /* 🎯 SOLUCIÓN DEFINITIVA DE ANCHO:
       Forzamos a que mida 320px fijos en tu pantalla, y con 'max-width: 100%' 
       le permitimos adaptarse en pantallas más chicas (como el iPad) sin deformarse. */
    width: 320px !important;
    max-width: 100% !important;

    /* Altura elástica para evitar cortes de texto */
    height: auto !important;
    min-height: 393px !important;
    /* Mantenemos tu min-height base del Figma */
    padding-bottom: 25px !important;

    /* Disposición interna */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 auto;
    /* Centrado en su columna */

    /* Microinteracción premium (Zoom al pasar el cursor) */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Efecto Hover aislado */
.lacsma-svc-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Contenedor de la imagen (Crop) */
.lacsma-svc-card__img-container {
    position: relative !important;
    width: 100% !important;
    height: 210px !important;
    border-radius: 32px 32px 0 0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;

}

/* Ajuste geométrico exacto de la imagen según Figma */
.lacsma-svc-card__img-container img {
    position: absolute !important;
    width: 125.21% !important;
    height: 139.95% !important;
    top: auto !important;
    left: -10.19% !important;
    max-width: none !important;
    object-fit: cover !important;

    /* 🎯 FILTRO BLANCO INTENSO */
    filter: brightness(140%) contrast(70%) !important;
}



/* Bloque contenedor del texto */
.lacsma-svc-card__body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;

    /* El bloque de texto ocupa un ancho proporcional de la tarjeta */
    width: 285px !important;
    max-width: 90% !important;
    text-align: center !important;
    flex: 1 1 auto !important;
}

/* Configuración del Título */
.lacsma-svc-card__title {
    font-family: 'Aptos semibold', 'Segoe UI', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: normal !important;
    color: #5DAE22 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Configuración del Texto descriptivo */
.lacsma-svc-card__text {
    font-family: 'Aptos', 'Segoe UI', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 19px !important;
    color: #191919 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* AGREGA MÁS ESPACIO ENTRE LAS FILAS DE TARJETAS (36px) */
#cards-container>div {
    margin-bottom: 36px !important;
    display: flex !important;
    justify-content: center !important;
}

/* 📱 Para celulares (menores a 768px) se mantiene totalmente limpio, 
   respetando los márgenes nativos y originales de ambas cajas por defecto. */

/* ==========================================================================
   MANTENIDO: LIBERAR ESPACIO DEL HOVER EN LA PRIMERA FILA
   ========================================================================== */
.lacsma-section,
main {
    overflow: visible !important;
}

#cards-container {
    margin-top: 20px !important;
    overflow: visible !important;
}

#cards-container>div {
    position: relative !important;
    z-index: 5 !important;
}

.lacsma-svc-card:hover {
    z-index: 999 !important;
}

/* 📱 Soporte responsivo para evitar desbordes en celulares muy delgados */
@media (max-width: 340px) {
    .lacsma-svc-card__body {
        width: 90% !important;
    }
}

/* ==========================================
   COMPONENTE INTERNO: BANNER DE SERVICIOS
   ========================================== */
.lacsma-banner {
    position: relative;
    width: 100%;
    height: 380px;
    /* Altura ideal en escritorio */
    overflow: hidden;

    /* 🎯 SOLUCIÓN: Cambiamos la imagen fija por un fondo oscuro neutro */
    background-color: #1a1a1a;

    /* Borramos o comentamos la línea de background-image */
    /* background-image: url('../img/muestras.webp'); */

    background-size: cover;
    background-position: center;
}


/* 🎯 CONTENEDOR MÁSCARA (Corte diagonal tipo Figma) */
.banner__mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    
    z-index: 1;
}

/* FOTO DE FONDO */
.banner__photo {
    width: 100%;
    height: 105%;
    /* Desborde sutil controlado */
    top: -5%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================
   PANEL DE CONTROL DEL GRADIENTE (FÁCIL DE MANIPULAR)
   ========================================== */
:root {
    /* 1. Mueve este número entre 0.1 y 0.9 para controlar la oscuridad (Ejemplo: 0.45 es nivel medio) */
    --banner-oscuridad: 2;

    /* 2. Controla hasta qué porcentaje de la pantalla avanza la sombra (Ejemplo: 70% de la foto) */
    --banner-alcance: 100%;
}

/* GRADIENTE AUTOMATIZADO */
.banner__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(30, 30, 30, var(--banner-oscuridad)) 0%,
            rgba(30, 30, 30, calc(var(--banner-oscuridad) * 0.35)) 35%,
            rgba(30, 30, 30, 0) var(--banner-alcance)) !important;
    z-index: 2;
}

/* CONTENEDOR FLUIDO DE TEXTO */
.banner__content-wrapper {
    position: absolute;
    inset: 0;
    z-index: 3;
    /* Al frente de todo para permitir clicks o selección */
    display: flex;
    align-items: center;
}

/* TÍTULO PRINCIPAL (TEKO) */
.banner__title {
    font-family: 'Teko', sans-serif;
    font-weight: 400;
    font-size: 64px;
    /* Simetría con los títulos de la Home */
    line-height: 0.9;
    color: #ffffff;
    margin-bottom: 16px;
    text-transform: uppercase;
}

/* DESCRIPCIÓN (APTOS) */
.banner__description {
    font-family: 'Aptos', 'Segoe UI', Arial, sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: #e0e0e0;
    max-width: 550px;
    margin: 0;
}

/* 📱 RESPONSIVE: COMPORTAMIENTO EN TABLETS Y CELULARES */
@media (max-width: 991px) {
    .lacsma-banner {
        height: auto;
        min-height: 320px;
    }

    .banner__mask {
        clip-path: none !important;
    }

    /* 🟢 ELIMINADO EL DEGRADADO NEGRO OSCURO VIEJO DE AQUÍ 
       Ahora hereda el diseño ultra claro y suave que pusimos arriba */

    .banner__content-wrapper {
        position: relative !important;
        /* 🎯 Ajustamos el padding horizontal aquí también para móviles */
        padding: 60px 24px !important;
    }

    .banner__title {
        font-size: 48px;
    }
}

/* 🎯 ALINEACIÓN DE TEXTO DEL BANNER CON LAS TARJETAS (SOLO ESCRITORIO) */
@media (min-width: 992px) {
    .banner__content-wrapper .container-fluid {
        /* Empuja el contenedor del texto hacia la derecha para hacer match con la rejilla */
        padding-left: 9.5% !important;
    }
}


/* ==========================================================================
   COMPONENTE AISLADO: BOTÓN VER MÁS ENSAYOS (lacsma-btn-more-)
   ========================================================================== */

/* Contenedor para centrar el botón debajo de la rejilla */
.lacsma-btn-more__container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 50px !important;
    margin-bottom: 30px !important;
    overflow: visible !important;
}

/* El botón con la forma exacta de paralelogramo */
.lacsma-btn-more__element {
    /* Dimensiones del diseño */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 200px !important;
    height: 48px !important;
    padding: 0 16px !important;

    /* Tipografía */
    font-family: 'Aptos', 'Segoe UI', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    /* Color oficial de marca: Brand C1 */
    background-color: #5DAE22 !important;
    border: none !important;

    /* Forma de paralelogramo (skew) exacto de tu diseño */
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%) !important;
    border-radius: 0 !important;
    cursor: pointer !important;

    /* 🎯 TRANSICIÓN ANIMADA: Controla la velocidad con la que reacciona el botón */
    transition: background-color 0.3s ease, transform 0.3s ease, filter 0.3s ease !important;
}

/*NUEVO EFECTO HOVER SELECCIONADO */
.lacsma-btn-more__element:hover {
    background-color: #4e9a1d !important;
    /* Se vuelve un verde un poco más oscuro y sólido */
    transform: translateY(-3px) !important;
    /* El botón se eleva suavemente 3 píxeles */
    filter: brightness(1.1) !important;
    /* Aumenta un 10% el brillo general para destacar */
}

/* Estado active (Cuando el usuario le da click) */
.lacsma-btn-more__element:active {
    background-color: #3f7d16 !important;
    transform: translateY(-1px) !important;
    /* Baja ligeramente simulando una pulsación mecánica */
    filter: brightness(0.95) !important;
}

/* Estado focus (accesibilidad) */
.lacsma-btn-more__element:focus-visible {
    outline: 3px solid #5DAE22 !important;
    outline-offset: 3px !important;
}

/* Estado disabled */
.lacsma-btn-more__element:disabled,
.lacsma-btn-more__element.disabled {
    background-color: #a8d48a !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
}
/* ==========================================
   BANNER 1 LACSMA
   ========================================== */
/* Contenedor principal del Banner */
.banner1-lacsma {
    background-color: #ffffff !important; /* 👈 AQUÍ MODIFICAS EL FONDO (Puedes usar 'white' o '#ffffff') */
    position: relative;
    width: 100%;
    min-height: 513px;
    overflow: hidden !important; /* Bloquea cualquier desborde lateral durante la animación */
    display: flex;
    align-items: center;
}

/* Imagen de fondo - CON ANIMACIÓN CINEMÁTICA DE ACOMODO */
.banner1-lacsma .banner1-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    z-index: 0;
    
    /* 🚀 ENTRADA DINÁMICA: Inicia más grande y se desplaza de derecha a izquierda hasta encuadrar */
    animation: acomodarImagenHero 1.5s ease-out forwards;
}

/* Overlay degradado de izquierda a derecha */
.banner1-lacsma .banner1-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(89.6deg, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0) 80%);
    z-index: 1;
}

/* Contenedor estructural */
.banner1-container {
    position: relative;
    z-index: 2;
}

/* Bloque del contenido de texto */
.banner1-content {
    padding-top: 93px;
    padding-bottom: 93px;
    padding-left: 9% !important;
    max-width: 580px;
}

/* Título principal (Usa tu Teko local) */
.banner1-title {
    font-family: 'teko regular', Arial, sans-serif;
    font-size: 44px;
    line-height: 44px;
    color: #ffffff;
    margin-bottom: 20px;
}

/* Cuerpo de texto (Usa tu Aptos Light local) */
.banner1-body {
    font-family: 'aptos light', Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    max-width: 446px;
    margin: 0;
}

.banner1-body .highlight {
    color: var(--lacsma-green) !important;
    font-family: 'aptos semibold', Arial, sans-serif !important;
}

/* ==========================================
   BANNER 1 LACSMA (Base para pantallas medianas/laptops)
   ========================================== */
/* Redefinición para pantallas estándar */
@media (min-width: 769px) and (max-width: 1199px) {
    .banner1-lacsma {
        min-height: 350px; /* Altura equilibrada para laptops */
    }
    
    .banner1-content {
        padding-left: 0 !important; /* Remueve el padding lateral extra en pantallas medianas si es necesario */
    }
}

/* Imagen de fondo del Banner 1 - Ajuste de encuadre para laptops/escritorio */
@media (min-width: 769px) {
    .banner1-lacsma .banner1-bg {
        object-position: 65% 50%; /* Amarra al ingeniero a la derecha y centra verticalmente */
    }
}

/* ==========================================
   RESPONSIVE Y ADAPTACIÓN DE PANTALLAS
   ========================================== */

/* 🖥️ EXCLUSIVO PARA PANTALLAS GRANDES (Monitores de escritorio avanzados) */
@media (min-width: 1200px) {
    .banner1-lacsma {
        min-height: 900px;
    }

    .banner1-content {
        padding-top: 140px;
        padding-bottom: 140px;
        max-width: 800px;
    }
}

/* 📱 EXCLUSIVO PARA PANTALLAS PEQUEÑAS (Celulares) */
@media (max-width: 768px) {
    .banner1-lacsma {
        min-height: 80vh; 
    }

    .banner1-content {
        padding-top: 35px;
        padding-bottom: 35px;
        max-width: 560px;
    }

    .banner1-title {
        font-size: 34px;
        line-height: 36px;
    }

    .banner1-body {
        font-size: 16px;
        max-width: 100%;
    }

    .banner1-lacsma .banner1-bg {
        object-position: 65% 50%;
    }

    /* Desvanecimiento suave hacia la base en móviles */
    .banner1-lacsma .banner1-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0) 100%) !important;
    }
}


/* ==========================================
   SECCIÓN SERVICIOS LACSMA (CON TEXTURA)
   ========================================== */

.servicios-lacsma {
    padding: 110px 0;

    /* 🎯 FONDO LIMPIO: Eliminamos la textura y dejamos un color sólido */
    background-color: #ffffff;
    background-image: none !important;
    /* Asegura que no se cargue ninguna imagen previa */
}


.servicios-titulo {
    font-family: 'teko regular', Arial, sans-serif;
    font-size: 52px;
    color: #000000;
    text-align: center;
    margin-bottom: 48px;
    line-height: 1;
}

/* Wrapper adaptable de las cards */
.servicios-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

/* Card individual */
.servicio-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 16px;
    min-height: 318px;
    gap: 19px;
}

.servicio-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* Íconos de servicios */
.servicio-icon {
    width: 109px;
    height: 109px;
    object-fit: contain;
}

/* Nombre del servicio (Usa tu Aptos Regular local) */
.servicio-nombre {
    font-family: 'aptos regular', Arial, sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: #000000;
    margin: 0;
}

/* Botón "Ver más" con forma de paralelogramo */
.servicio-btn {
    display: inline-block;
    font-family: 'aptos regular', Arial, sans-serif;
    font-size: 14px;
    color: var(--lacsma-green);
    background-color: var(--lacsma-green-light);
    border: none;
    padding: 8px 24px;
    text-decoration: none;
    line-height: 1;
    border-radius: 0px;
    /* Inclinamos el botón */
    transform: skewX(-25deg);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.servicio-btn:hover {
    background-color: var(--lacsma-green);
    color: #ffffff;
    transform: skewX(-25deg) scale(1.03);
}

/* ⬇️ NUEVA REGLA: Selecciona el span de adentro y lo regresa a 0 grados (recto) */
.servicio-btn span {
    display: inline-block;
    transform: skewX(25deg);
    /* Contrarréstate el sesgado exacto del botón */
}

/* Divisor vertical minimalista */
.servicio-divider {
    width: 1px;
    height: 162px;
    background-color: var(--lacsma-green);
    flex-shrink: 0;
    align-self: center;
}

/* ==========================================
   SECCIÓN SERVICIOS LACSMA
   ========================================== */
.servicios-lacsma {
    padding-top: 110px;
    padding-bottom: 170px;
    /* 🎯 Si decides eliminar la textura por completo, cambia la línea de abajo por background-image: none !important; */
    background-image: url('../img/textura-servicios.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.servicios-titulo {
    font-family: 'teko regular', Arial, sans-serif;
    font-size: 52px;
    color: #000000;
    text-align: center;
    margin-bottom: 48px;
    line-height: 1;
}

/* Wrapper de las cards */
.servicios-grid {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}

/* Card individual */
.servicio-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* Comportamiento base para pantallas normales */
    text-align: center;
    padding: 0 16px;
    min-height: 318px;
}

.servicio-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin-bottom: 20px;
}

/* Ícono */
.servicio-icon {
    width: 109px;
    height: 109px;
    object-fit: contain;
}

/* Nombre del servicio */
.servicio-nombre {
    font-family: 'aptos regular', Arial, sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: #000000;
    margin: 0;
    min-height: 56px;
    display: flex;
    align-items: center;
}

/* Botón "Ver más" Paralelogramo */
.servicio-btn {
    display: inline-block;
    font-family: 'aptos regular', Arial, sans-serif;
    font-size: 14px;
    color: var(--lacsma-green);
    background-color: var(--lacsma-green-light);
    border: none;
    padding: 8px 24px;
    text-decoration: none;
    line-height: 1;
    border-radius: 0px;
    transform: skewX(-25deg);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.servicio-btn:hover {
    background-color: var(--lacsma-green);
    color: #ffffff;
    transform: skewX(-25deg) scale(1.03);
}

/* Texto del botón derecho */
.servicio-btn span {
    display: inline-block;
    transform: skewX(25deg);
}

/* Divisor vertical entre cards en PC */
.servicio-divider {
    width: 1px;
    height: 162px;
    background-color: var(--lacsma-green);
    flex-shrink: 0;
    align-self: center;
}


/* ==========================================================================
   AJUSTE EXCLUSIVO: COMPACTAR BOTÓN Y TÍTULO EN IPAD/TABLETS Y PC
   ========================================================================== */
@media (min-width: 768px) {

    /* Se activa en iPad Mini (768px) y pantallas más grandes (Laptops/PC) */
    .servicio-card {
        justify-content: center !important;
        gap: 0px !important;
        /* Eliminamos el espacio automático gigante */
    }

    /* Controlamos de manera estricta el espacio inferior del contenedor del título */
    .servicio-card-inner {
        margin-bottom: 24px !important;
        /* 🎯 Distancia entre el bloque del título y el botón */
        gap: 20px !important;
        /* Distancia interna entre el icono y el texto del servicio */
    }
}


/* ==========================================
   RESPONSIVE Y CONTROLES DEL CARRUSEL MÓVIL
   ========================================== */
/* Flechas redondeadas y verdes a los costados */
.servicios-control {
    width: 40px;
    height: 40px;
    background-color: var(--lacsma-green);
    border-radius: 50%;
    top: 45%;
    transform: translateY(-50%);
    opacity: 0.8;
}

.servicios-control:hover {
    background-color: #000000;
    opacity: 1;
}

/* Ajuste fino de distancias para móvil */
.carousel-control-prev.servicios-control {
    left: 5px;
}

.carousel-control-next.servicios-control {
    right: 5px;
}

.servicios-control .carousel-control-prev-icon,
.servicios-control .carousel-control-next-icon {
    width: 18px;
    height: 18px;
}

/* 🎯 AQUÍ CAMBIAMOS EL VALOR A -65px */
.servicios-indicators {
    bottom: -65px;
    /* ↕️ Modificado para alejar los puntos del botón */
}

.servicios-indicators button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #c8c8c8 !important;
    border: none !important;
    margin: 0 6px !important;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.servicios-indicators button.active {
    background-color: var(--lacsma-green) !important;
    opacity: 1;
    width: 12px !important;
    height: 12px !important;
}

/*Cambios estructurales cuando entra en tamaño móvil (SOLO CELULARES) */
@media (max-width: 767px) {

    /* 🎯 Cambiado a 767px para dejar fuera al iPad Mini */
    .servicios-titulo {
        font-size: 40px;
        margin-bottom: 35px;
    }

    .servicio-card {
        padding: 0 40px;
        min-height: 250px;
    }

    .servicio-card-inner {
        gap: 15px;
        margin-bottom: 15px;
    }
}

/*Ocultar los puntos de navegación cuando la pantalla sea grande (iPad Mini, Tablets, PC/Laptop) */
@media (min-width: 768px) {

    /* 🎯 Cambiado a 768px para atrapar al iPad Mini y ocultarle los puntos */
    .servicios-indicators {
        display: none !important;
        /* 🚫 Borra por completo el contenedor de círculos */
    }
}

/* ==========================================
   SECCIÓN ¿QUIÉNES SOMOS? LACSMA
   ========================================== */
.quienes-lacsma {
    background-color: #ededed;
    /* Gris claro de fondo que rodea la sección */
    overflow: hidden;
    min-height: 351px;
    /* 📐 Actualizado a tu medida exacta de Figma */
    width: 100%;
}

/* Columna de la Imagen (Desktop) */
.quienes-col-img {
    position: relative;
    min-height: 351px;
    /* 📐 Actualizado a tu medida exacta de Figma */
    overflow: hidden;
    /* Corta lo que sobresalga de la columna */
    padding: 0;
}

.quienes-col-img img {
    position: absolute;
    /* 📐 CONTROL DE TAMAÑO: Mantengo tu 80%. Si al aplicar el cambio de abajo
       sientes que se sigue viendo separado, puedes subirlo a un 100% o 110% */
    width: 90%;
    height: auto;
    /* 🚀 LA SOLUCIÓN AL HUECO IZQUIERDO: */
    left: -17%;
    top: -25px;
    /* Control vertical */
    max-width: none;
    pointer-events: none;
}

/* Columna de Texto - Modificado para PEGAR el bloque hacia la izquierda (junto a la foto) */
.quienes-col-texto {
    display: flex;
    align-items: center;
    /* 🎯 LA CLAVE 1: Cambiamos 'center' por 'flex-start' para que la caja de texto
       viaje al extremo izquierdo de su columna, justo donde termina la imagen */
    justify-content: flex-start;
    /* 🎯 REGLA DE ESPACIADO EXACTO:
       110px Arriba | 40px Derecha | 110px Abajo | 50px Izquierda (Separación con la imagen) */
    padding: 110px 40px 110px 50px;
}

.quienes-texto-inner {
    display: flex;
    flex-direction: column;
    /* 🎯 LA CLAVE 2: Mantenemos 'center' aquí para que el título, el párrafo 
       y tu botón sigan perfectamente alineados en un eje central entre sí */
    align-items: center;
    gap: 18px;
    max-width: 525px;
    text-align: center;
    /* Mantiene la estética de centrado de tus textos */
}

/* Títulos y Párrafos heredando tus fuentes globales */
.quienes-titulo {
    font-family: 'teko regular', Arial, sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1;
    color: var(--lacsma-green);
    margin: 0;
    width: 100%;
}

.quienes-parrafo {
    font-family: 'aptos light', Arial, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    color: #000000;
    margin: 0;
}

/* Botón "Leer más" estilizado como Paralelogramo (Igual a Servicios) */
.quienes-btn {
    display: inline-block;
    font-family: 'aptos regular', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background-color: var(--lacsma-green);
    text-decoration: none;
    padding: 8px 24px;
    line-height: 1;
    border-radius: 0px;
    margin-top: 8px;
    transform: skewX(-25deg);
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.quienes-btn:hover {
    color: #ffffff;
    opacity: 0.9;
    background-color: #4a911a;
    transform: skewX(-25deg) scale(1.03);
}

/* ESTO ENDEREZA EL TEXTO ADENTRO DEL BOTÓN */
.quienes-btn span {
    display: inline-block;
    transform: skewX(25deg);
}

/* ==========================================
   RESPONSIVE ¿QUIÉNES SOMOS?
   ========================================== */

/* 📐 Bloque A: Para pantallas desde 701px hasta 991px (Tablets) */
@media (min-width: 701px) and (max-width: 991px) {
    .quienes-lacsma {
        min-height: auto;
    }

    .quienes-lacsma .row {
        display: flex !important;
        flex-direction: row !important;
        /* Imagen Izquierda, Texto Derecha */
    }

    /* Columna Imagen (Izquierda) */
    .quienes-col-img {
        position: relative;
        display: flex !important;
        flex: 0 0 50%;
        max-width: 50%;
        min-height: 350px;
        /* Altura fija de la columna en tablet */
        height: 350px;
        overflow: hidden;
        /* Corta lo que sobresalga al moverla */
    }

    .quienes-col-img img {
        position: absolute !important;
        /* 🎛️ Cambia estos números a tu gusto y el !important forzará el movimiento */
        width: 130% !important;
        left: -100px !important;
        top: -10px !important;
        height: auto !important;
        max-width: none !important;
        pointer-events: none;
    }

    /* Columna Texto (Derecha) */
    .quienes-col-texto {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 40px 24px 40px 50px;
        /* Mantiene tus 50px de espacio con la imagen */
    }
}

/* 📱 Bloque B: Para pantallas de 700px o menos (Celulares) */
@media (max-width: 700px) {
    .quienes-col-img {
        display: none !important;
        /* Desaparece por completo en celular */
    }

    .quienes-col-texto {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        /* Centra el bloque de texto en móvil */
        padding: 60px 24px;
    }

    .quienes-titulo {
        font-size: 42px;
    }

    .quienes-parrafo {
        font-size: 16px;
        line-height: 22px;
    }
}

/*Bloque C: EXCLUSIVO PARA PANTALLAS GRANDES (Laptops y PC de escritorio) */
@media (min-width: 992px) {

    /* 1. Desplazamos la columna entera hacia la izquierda usando el margen negativo */
    .quienes-col-texto {
        margin-left: -70px !important;
        /* 👈 Ajusta este número si quieres que se mueva más o menos a la izquierda */
    }

    /* 2. MANTENEMOS TU MEDIDA EXACTA: Forzamos que la caja mida estrictamente 525px */
    .quienes-texto-inner {
        max-width: 525px !important;
        width: 100% !important;
    }
}

/* ==========================================
   SECCIÓN CASOS DE ÉXITO LACSMA
   ========================================== */
.clientes-lacsma {
    background-color: var(--lacsma-green);
    padding: 40px 0 32px;
    margin-top: 110px;
    margin-bottom: 110px;
}

/* Cabecera: título + divisor + descripción */
.clientes-header {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 94px;
    margin-bottom: 48px;
}

.clientes-titulo {
    font-family: 'Teko', sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    margin: 0;
}

.clientes-header-divider {
    width: 1px;
    height: 61px;
    background-color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.clientes-descripcion {
    font-family: 'aptos light', 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    color: #ffffff;
    margin: 0;
}

/* Wrapper del carrusel y flechas */
.clientes-carousel-wrap {
    position: relative;
    padding: 0 64px;
    margin-bottom: 40px !important;
}

/* Botones de flecha */
.clientes-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}

.clientes-arrow:hover {
    background: rgba(255, 255, 255, 0.35);
}

.clientes-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.clientes-arrow.prev {
    left: 12px;
}

.clientes-arrow.next {
    right: 12px;
}

.clientes-arrow svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
}

/* Tarjetas de Clientes (Cards) */
.card-cliente {
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.15);
    padding: 32px 24px 24px;
    height: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Efecto interactivo sutil (Solo en computadoras gigantes) */


.card-cliente-logo {
    width: 100%;
    height: 95px;
    object-fit: contain;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.card-cliente-nombre {
    font-family: 'aptos regular', 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--lacsma-green);
    text-align: center;
    margin-bottom: 12px;
    width: 100%;
    letter-spacing: 0.5px;
}

.card-cliente-texto {
    font-family: 'aptos regular', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #333333;
    text-align: center;
    margin: 0;
    overflow-y: auto;
}

.clientes-dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 0 !important;
    padding-bottom: 10px;
}

.clientes-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.clientes-dot.active {
    transform: scale(1.3);
    background-color: #ffffff;
}

/* ==========================================================================
   ESTRUCTURACIÓN RESPONSIVA COMPLETA (MÓVIL, TABLET Y PC)
   ========================================================================== */

/* 🎯 CORREGIDO: Bloque unificado para pantallas menores a 1200px */
@media (max-width: 1200px) {
    #cardsContainer {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* Mantiene las tarjetas en una sola línea horizontal */
        overflow-x: auto !important;
        /* Permite el deslizamiento */

        /* 🚀 APAGAMOS el snap-type de raíz para que no interfiera con el comportamiento smooth */
        scroll-snap-type: none !important;

        /* Forzamos al motor del navegador a aplicar la animación fluida */
        scroll-behavior: smooth !important;

        /* Evita que los márgenes negativos de Bootstrap rompan el cálculo del scroll */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 15px !important;
        justify-content: flex-start !important;

        /* Propiedad nativa para suavizar el scroll táctil en iOS/Android */
        -webkit-overflow-scrolling: touch !important;
    }

    #cardsContainer::-webkit-scrollbar {
        display: none !important;
        /* Oculta la barra de scroll */
    }

    /* Cada tarjeta en carrusel ocupará exactamente el 100% de ancho visible */
    .cliente-card-col {
        display: block !important;
        flex: 0 0 100% !important;
        /* Ocupa el 100% exacto de la pantalla */
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;

        /* 🚀 ELIMINADO EL RUIDO: Nos aseguramos de que no se herede ningún comportamiento snap */
        scroll-snap-align: none !important;
    }

    /* Caja contenedora interna perfectamente centrada en el dispositivo móvil/tablet */
    .card-cliente {
        max-width: 420px !important;
        width: 100% !important;
        margin: 0 auto !important;
        height: 430px !important;
    }

    .clientes-carousel-wrap {
        padding: 0 80px !important;
    }
}

/* Cada tarjeta en carrusel ocupará exactamente el 100% de ancho visible */
.cliente-card-col {
    display: block !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    scroll-snap-align: center !important;
}

/* Caja contenedora interna perfectamente centrada en el dispositivo móvil/tablet */
.card-cliente {
    max-width: 420px !important;
    width: 100% !important;
    margin: 0 auto !important;
    height: 430px !important;
}

.clientes-carousel-wrap {
    padding: 0 80px !important;
}


/*Monitores grandes (Más de 1201px): Se muestran las 3 juntas con controles visibles */
@media (min-width: 1201px) {
    #cardsContainer {
        display: flex !important;
        flex-wrap: wrap !important;
        /* Permite que se posicionen una al lado de la otra */
        overflow-x: visible !important;
        justify-content: center !important;
    }

    /* Obligamos a que las tres tarjetas sean visibles al mismo tiempo en PC */
    .cliente-card-col {
        display: block !important;
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .card-cliente {
        max-width: 340px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Forzamos a que las flechas y los círculos (dots) se mantengan visibles en PC */
    .clientes-arrow {
        display: flex !important;
    }

    .clientes-dots {
        display: flex !important;
    }

    .clientes-carousel-wrap {
        padding: 0 64px !important;
        /* Mantiene la separación lateral para las flechas */
    }
}

/* Adaptación de Cabeceras en Tablets */
@media (max-width: 991px) {
    .clientes-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 32px;
        gap: 12px;
    }

    .clientes-header-divider {
        display: none;
    }

    .clientes-carousel-wrap {
        padding: 0 54px !important;
    }
}

/* Adaptación de Flechas en Celulares */
@media (max-width: 767px) {
    .clientes-arrow {
        display: flex !important;
        width: 34px;
        height: 34px;
    }

    .clientes-arrow.prev {
        left: 8px;
    }

    .clientes-arrow.next {
        right: 8px;
    }
}

.clientes-dot {
    width: 8px !important;
    height: 8px !important;
}

@media (max-width: 576px) {
    .clientes-lacsma {
        margin: 60px 0;
        padding: 32px 0 24px;
    }

    .clientes-dot {
        width: 7px !important;
        height: 7px !important;
    }

    .clientes-dot.active {
        transform: scale(1.2) !important;
    }

    .card-cliente {
        height: 450px !important;
        padding: 24px 16px;
    }
}


/* ==========================================
   SECCIÓN NUESTRAS REDES LACSMA
   ========================================== */

.banner3-lacsma {
    background-color: #ffffff;
    overflow: hidden;
    margin: 0;
}

.divisor-secciones-lacsma {
    border: none;
    border-top: 1px solid var(--lacsma-green);
    opacity: 1;
    width: 100%;
    margin: 55px 0;
}

/* Columna izquierda contenedora */
.banner3-col-texto {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Base original */
.banner3-texto-inner {
    display: flex;
    flex-direction: column;
    gap: 19px;
    max-width: 450px;
    width: 100%;
    border-left: 4px solid var(--lacsma-green);
    padding-left: 28px;
}

.banner3-titulo {
    font-family: 'Teko', sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1;
    color: #070707;
    margin: 0;
}

.banner3-parrafo {
    font-family: 'aptos light', 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    color: #000000;
    margin: 0;
    max-width: 450px;
    /* Base original */
}

/* Iconos redes sociales */
.banner3-redes {
    display: flex;
    align-items: center;
    gap: 15px;
}

.banner3-redes a {
    display: block;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.banner3-redes a:hover {
    opacity: 0.8;
}

.banner3-redes img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Post de Instagram */
.banner3-col-post {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 40px;
}

.post-wrap {
    position: relative;
    width: 287px;
    height: 468px;
    background-color: #d9d9d9;
    border-radius: 20px;
    flex-shrink: 0;
}

.post-wrap img {
    position: absolute;
    top: 12px;
    left: 14px;
    width: 259px;
    height: 445px;
    object-fit: cover;
    border-radius: 17px;
}

/* ==========================================
   RESPONSIVE NUESTRAS REDES
   ========================================== */

@media (max-width: 991px) {
    .banner3-col-texto {
        padding-left: 32px;
        padding-right: 32px;
        margin-bottom: 48px;
    }

    .banner3-col-post {
        padding-right: 0;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .banner3-lacsma {
        padding: 0 24px;
    }

    .banner3-titulo {
        font-size: 40px;
    }

    .banner3-parrafo {
        font-size: 16px;
    }

    .post-wrap {
        width: 200px;
        height: 326px;
    }

    .post-wrap img {
        top: 10px;
        left: 10px;
        width: 180px;
        height: 306px;
    }
}

/*EXCLUSIVO PARA IPAD MINI, TABLETS Y PANTALLAS GRANDES (PC / Laptops) */
@media (min-width: 768px) {

    /* 1. Ampliamos el contenedor general que tiene el borde verde */
    .banner3-texto-inner {
        max-width: 660px !important;
        /* 🎯 CONTROL DEL ANCHO: Subimos el espacio horizontal para que respire */
    }

    /* 2. Ampliamos el párrafo para que use el nuevo espacio disponible */
    .banner3-parrafo {
        max-width: 100% !important;
        /* Permite estirar los renglones horizontalmente */
    }
}


/* ==========================================
   SECCIÓN FORMULARIO LACSMA
   ========================================== */
.formulario-lacsma {
    background-color: #ffffff;
    margin-bottom: 110px;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    /* Evita que la imagen pueda salirse por accidente */
    scroll-margin-top: 100px;
}

/* Contenedor del formulario interno */
.formulario-inner {
    width: 100%;
    max-width: 510px;
    /* Mantiene la estética de tus inputs */
    padding: 0 24px;
    /* Colchón para que no se pegue a las orillas en móvil */
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.formulario-titulo {
    font-family: 'Teko', sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1;
    color: var(--lacsma-green);
    margin: 0 0 14px;
}

.formulario-subtitulo {
    font-family: 'Aptos', 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    color: #000000;
    margin: 0;
}

.form-lacsma-element {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.form-fields {
    display: flex;
    flex-direction: column;
    gap: 31px;
    max-width: 510px;
    width: 100%;
}

.campo-lacsma {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.campo-lacsma label {
    font-family: 'Aptos', 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--lacsma-green);
    margin-bottom: 4px;
}

.campo-lacsma input,
.campo-lacsma select {
    background-color: #d9d9d9;
    border: none;
    border-radius: 0;
    height: 34px;
    padding: 3px 14px 5px;
    font-family: 'Aptos', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #333333;
    box-shadow: none !important;
    outline: none;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

.campo-lacsma input::placeholder {
    color: #787676;
    font-weight: 300;
}

.campo-lacsma select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23787676' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

.form-response-msg {
    font-family: 'Aptos', sans-serif;
    font-size: 14px;
    padding: 12px;
    text-align: center;
    border-radius: 4px;
    display: none;
}

.formulario-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
    max-width: 510px;
    width: 100%;
}

.btn-enviar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 175px;
    height: 38px;
    background-color: var(--lacsma-green);
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    border: none;
    cursor: pointer;
    font-family: 'aptos regular', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s;
}

.btn-enviar:hover {
    opacity: 0.88;
    color: #ffffff;
}

/* ==========================================
   MOVIMIENTO DIRECTO A LA IMAGEN SIN ALTERAR LA CAJA
   ========================================== */

/* Hace que el contenedor corte cualquier pedazo de foto que se salga al moverla */
.img-container-lacsma {
    display: none !important;
    /* 🚫 OCULTA LA IMAGEN POR DEFECTO EN PANTALLAS PEQUEÑAS */
    position: relative;
    overflow: hidden !important;
}

/* 💻 PARA LAPTOPS Y MONITORES COMUNES (De 992px a 1199px) */
@media (min-width: 992px) {
    .img-container-lacsma {
        display: block !important;
        /* 👁️ MUESTRA LA IMAGEN DE LAPTOPS EN ADELANTE */
        position: absolute;
        right: 0;
        top: 0;
        width: 35% !important;
        /* Mantiene tu ancho original */
        height: 100% !important;
        /* Mantiene tu alto original completo */
        transform: none !important;
    }

    /* 🎯 EMPUJA EL FORMULARIO HACIA LA DERECHA EN LAPTOPS */
    .formulario-inner {
        margin-left: auto !important;
        margin-right: 30px !important;
        /* Separación de la imagen en Laptops */
    }

    /* 🎯 CONTROL DE LA FOTO EN LAPTOPS */
    .img-container-lacsma img {
        position: absolute;
        object-fit: cover;

        width: 100% !important;
        height: 100% !important;

        /* Valores para mover en Laptops */
        left: 5px !important;
        top: 0px !important;

        transform: scaleX(-1) !important;
    }
}

/* 🖥️ PARA PANTALLAS GRANDES Y MONITORES DE ESCRITORIO (De 1200px para arriba) */
@media (min-width: 1200px) {
    .img-container-lacsma {
        display: block !important;
        /* 👁️ MANTIENE LA IMAGEN VISIBLE EN PANTALLAS GRANDES */
        position: absolute;
        right: 0;
        top: 0;
        width: 35% !important;
        /* Mantiene tu ancho original */
        height: 100% !important;
        /* Mantiene tu alto original completo */
        transform: none !important;
    }

    /* 🎯 EMPUJA EL FORMULARIO HACIA LA DERECHA EN COMPUS GRANDES */
    .formulario-inner {
        margin-left: auto !important;
        margin-right: 15px !important;
        /* 💡 CONTROL DE CERCANÍA: 
           - Si quieres que el formulario se pegue por completo a la estrella, cámbialo a 0px.
           - Si sientes que quedó demasiado encimado, súbelo a 30px o 40px para alejarlo. */
    }

    /* 🎯 PANEL DE CONTROL PARA TU MONITOR GRANDE */
    .img-container-lacsma img {
        position: absolute;
        object-fit: cover;

        width: 100% !important;
        height: 100% !important;

        /* 🛠️ CONTROLES MANUALES DIRECTOS: */
        left: 5px !important;
        top: 0px !important;

        transform: scaleX(-1) !important;
    }
}


/* ==========================================
   SECCIÓN HISTORIA, MISIÓN Y VISIÓN (ESTILOS UNIFICADOS RECTANGULARES)
   ========================================== */
.lacsma-section {
    margin-top: 110px;
    margin-bottom: 110px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

.teko-title {
    font-family: 'Teko', sans-serif;
    font-weight: 400;
    color: var(--lacsma-green);
    line-height: 1;
    letter-spacing: 0;
}

.teko-title--52 {
    font-size: 52px;
}

.teko-title--64 {
    font-size: 64px;
}

.body-text {
    font-family: 'Aptos', 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 28px;
    color: #000000;
    text-align: justify;
}

.body-text p {
    margin-bottom: 1rem;
    text-align: justify;
}

/* Contenedor fluido moderno para las imágenes rectangulares */
.mv-img-contenedor {
    width: 100%;
    overflow: hidden;
    display: flex;
}

/* Reglas blindadas para que tus imágenes rectangulares encajen sin deformarse */
.mv-foto-rectangular {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Recorta la imagen armónicamente para llenar el espacio disponible */
    display: block;
}

/* Margen de separación entre bloques internos */
.mv-block+.mv-block {
    margin-top: 48px;
}

/* Corrección de cajas de alineación de Bootstrap */
#mision-vision .d-flex.align-items-center.mb-3 {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

.highlight {
    color: var(--lacsma-green) !important;
    font-family: 'aptos semibold', Arial, sans-serif !important;
}

/* ==========================================================================
   📱 PARA DISPOSITIVOS MÓVILES (Pantallas pequeñas - Menores a 768px)
   ========================================================================== */
@media (max-width: 767px) {

    /* 1. LIBERAMOS EL MAIN GENERAL: Forzamos a expandir */
    main#nosotroslacs {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2. Limpiamos todas las estructuras contenedoras e internas de Bootstrap */
    #historia,
    #mision-vision,
    #historia .container-fluid,
    #mision-vision .container-fluid,
    #historia .row,
    #mision-vision .row {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Forzamos a que las columnas nativas de Bootstrap no metan paddings laterales a la foto */
    #historia .col-12,
    #mision-vision .col-12 {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin: 0px !important;
        width: 100% !important;
    }

    /* 3. La caja de la foto se expande y se adhiere obligatoriamente al ras de la pantalla */
    .mv-img-contenedor {
        width: 100% !important;
        /* 🎯 Corregido a 100% */
        max-width: 100% !important;
        height: 300px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        border-radius: 0px !important;
        overflow: hidden !important;
    }

    /* 4. La imagen interna se estira al ras de extremo a extremo */
    .mv-img-contenedor img {
        width: 100% !important;
        /* 🎯 Corregido a 100% para que reaccione al movimiento */
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0px !important;
    }

    /* 🎯 CONTROLES MANUALES DE POSICIÓN PARA CELULAR: */

    /* 📸 Imagen de la sección HISTORIA */
    #historia .mv-img-contenedor img {
        /* Puedes probar valores como: center top, center bottom, o usar porcentajes */
        object-position: center 20% !important;
    }

    /* 📸 Imagen de la sección MISIÓN Y VISIÓN */
    #mision-vision .mv-img-contenedor img {
        /* 💡 Ahora que mide 100%, si cambias estos valores notarás el movimiento inmediato */
        object-position: center 20% !important;
    }

    /* 5. PROTECCIÓN SEGURO DEL TEXTO: Cambiado el selector :has() propenso a fallas en móvil
          por paddings internos asignados directamente a las envolturas de texto */
    .historia-texto-wrap,
    .mision-vision-texto-wrap {
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   📟 PARA TABLETS (COMO IPAD) - Desde 768px hasta 991px
   CONSERVA LA ALTURA GRANDE (800px) Y SE ADAPTA A LO ANCHO
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {

    .historia-texto-wrap,
    .mision-vision-texto-wrap {
        width: 100%;
        max-width: 580px;
        margin: 0 auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .mv-img-contenedor {
        position: relative !important;
        width: 80% !important;
        max-width: 100% !important;
        height: 800px !important;
        border-radius: 0px !important;
        overflow: hidden !important;
    }

    #historia .mv-img-contenedor {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    #mision-vision .mv-img-contenedor {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .mv-img-contenedor img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ==========================================================================
   🖥️ PARA COMPUTADORAS Y LAPTOPS (Desde 992px en adelante)
   ========================================================================== */
@media (min-width: 992px) {

    #historia .col-md-6,
    #mision-vision .col-md-6 {
        display: flex;
        align-items: center;
    }

    /* 📸 LA CAJA (HISTORIA): Medidas originales al ras IZQUIERDO */
    #historia .mv-img-contenedor {
        position: relative !important;
        width: 80% !important;
        max-width: 100% !important;
        height: 800px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        border-radius: 0px !important;
        overflow: hidden !important;
    }

    /* 🎯 LA IMAGEN INTERNA (HISTORIA): Controles manuales activos */
    #historia .mv-img-contenedor img {
        position: absolute !important;
        object-fit: cover !important;
        border-radius: 0px !important;
        width: 100% !important;
        height: 140% !important;
        left: 0px !important;
        top: 0px !important;
    }

    /* 📸 LA CAJA (MISIÓN Y VISIÓN): Medidas originales al ras DERECHO */
    #mision-vision .mv-img-contenedor {
        position: relative !important;
        width: 80% !important;
        max-width: 100% !important;
        height: 800px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        border-radius: 0px !important;
        overflow: hidden !important;
    }

    /* 🎯 LA IMAGEN INTERNA (MISIÓN Y VISIÓN): Controles manuales activos */
    #mision-vision .mv-img-contenedor img {
        position: absolute !important;
        object-fit: cover !important;
        border-radius: 0px !important;
        width: 100% !important;
        height: 140% !important;
        left: 0px !important;
        top: 0px !important;
    }

    /* 🎯 SOLUCIÓN HISTORIA: Añadimos su regla independiente para controlarla
       y que viaje hacia su respectivo ras izquierdo sin tocar a Misión y Visión */
    .historia-texto-wrap {
        width: 100% !important;
        max-width: 680px !important;
        /* Regresa al tamaño estándar original */
        margin-left: 0px !important;
        /* Se pega al ras izquierdo */
        margin-right: auto !important;
        /* Empuja el espacio libre a la derecha */
        padding-right: 40px;
    }

    /* 🎯 MISIÓN Y VISIÓN INTOCABLE: Dejada exactamente con las medidas 
       que me pasaste en tu código original que ya te funcionaban al ras */
    .mision-vision-texto-wrap {
        width: 100% !important;
        max-width: 680px !important;
        margin-right: 0px !important;
        margin-left: auto !important;
        padding-left: 40px;
    }
}

/* ==========================================
   AJUSTE DE LÍNEAS AUTO-ALINEADAS AL TEXTO
   ========================================== */
#mision-vision .teko-title {
    line-height: 0.8 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    flex-shrink: 0;
}

/* La línea divisor tipo resorte responsivo */
.mv-divider {
    display: block;
    flex: 1;
    height: 1px;
    background: var(--lacsma-green);
    margin-left: 20px;
    margin-top: 4px;
    width: auto !important;
    max-width: none !important;
}

/* ==========================================================================
   AJUSTE DE IMÁGENES (SIN TOCAR NI ALTERAR EL TEXTO ORIGINAL)
   ========================================================================== */

/* 💻 En computadoras y pantallas grandes (Desde 1200px en adelante) */
@media (min-width: 1200px) {
    .mv-img-contenedor {
        max-width: 460px !important;
        /* 🎯 Controla qué tan ancha es la foto en PC */
        margin: 0 auto !important;
        /* La centra de forma elegante en su propia mitad */
    }

    .mv-foto-rectangular {
        width: 100% !important;
        height: 310px !important;
        /* 🎯 Controla la altura de la foto en PC */
        object-fit: cover !important;
        border-radius: 12px !important;
        /* Bordes suaves que combinan con tu web */
    }
}

/* 📱 En pantallas medianas y tablets (De 768px a 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .mv-img-contenedor {
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    .mv-foto-rectangular {
        width: 100% !important;
        height: 280px !important;
        object-fit: cover !important;
    }
}

/* 📱 En teléfonos celulares (Menores de 767px) */
@media (max-width: 767px) {
    .mv-img-contenedor {
        max-width: 100% !important;

        margin-top: 24px !important;
        /* Separa la foto del texto para que no se peguen en el cel */
    }

    .mv-foto-rectangular {
        width: 100% !important;
        height: 220px !important;
        /* Altura cómoda para la pantalla de un móvil */
        object-fit: cover !important;
        border-radius: 8px !important;
    }
}

/* ==========================================
   SECCIÓN VALORES LACSMA (LÍNEAS DE EXTREMO A EXTREMO)
   ========================================== */
.valores-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 56px;

    /* 🎯 TRUCO DE RUPTURA: 
       Forzamos al encabezado a expandirse al 100% de la pantalla (viewport width)
       e ignorar los límites del .container de Bootstrap de manera controlada. */
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* 🛡️ PADDING DE SEGURIDAD:
       Añadimos un pequeño espacio a los lados para que las puntas de las líneas 
       no peguen feo con el borde físico de la pantalla en monitores estándar. */
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.valores-header .teko-title {
    line-height: 0.8 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    flex-shrink: 0;
}

.valores-header .line {
    display: block;
    flex: 1;
    height: 1px;
    background: var(--lacsma-green);
    margin-top: 4px !important;
    max-width: none !important;
    /* Mantiene la elasticidad infinita */
}

.valores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 0;
}

.valores-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.valores-col:not(:last-child) {
    border-right: 1px solid var(--lacsma-green);
}

.valor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-align: center;
}

.valor-card img {
    width: 160px;
    height: 95px;
    object-fit: contain;
}

.valor-card span {
    font-family: 'Aptos', 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #111111;
}

/* ==========================================
   EFECTO DE ZOOM EN TARJETAS DE VALORES
   ========================================== */
.valor-card {
    /* ... (Mantiene tus propiedades de flex, align-items, etc.) ... */

    /* 🎯 TRANSICIÓN: Prepara la tarjeta para que el cambio de tamaño 
       sea suave y dure 0.3 segundos con una aceleración natural */
    transition: transform 0.3s ease-in-out !important;
    cursor: pointer;
    /* Cambia el cursor a una mano para indicar que es interactivo */
}

/* 🎯 AL PASAR EL CURSOR (HOVER) */
.valor-card:hover {
    /* Escalamos la tarjeta un sutil 8% más grande (1.08). 
       Si lo sientes muy exagerado, puedes bajarlo a 1.05 (5%). */
    transform: scale(1.08) !important;
}

/* ==========================================
   CELULARES (Hasta 767px)
   ========================================== */
@media (max-width: 767px) {

    /* Estructuras generales */
    .lacsma-section {
        margin-bottom: 60px !important;
        padding-top: 40px;
    }

    main>.lacsma-section:first-of-type {
        margin-top: 40px !important;
    }

    /* Tipografías */
    .teko-title {
        padding-top: 10px !important;
    }

    .teko-title--52 {
        font-size: 40px;
    }

    .teko-title--64 {
        font-size: 48px;
    }

    /* Ajuste estricto para centrar la imagen en móviles */
    .historia-img-wrap,
    .mv-img-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 300px;
    }

    .historia-img-wrap img,
    .mv-img-wrap img {
        max-width: 60% !important;
        width: 100% !important;

        margin-left: 0 !important;
        /* Resetea el margen de escritorio en móvil */
        height: auto !important;
    }

    /* 🎯 HEADER DE VALORES: Reducimos el espacio inferior en móvil */
    .valores-header {
        margin-bottom: 32px !important;
        gap: 12px !important;
    }

    .valores-grid {
        display: block !important;
        width: 100%;
        position: relative !important;
    }

    /* 🎯 REESTRUCTURACIÓN DE COLUMNAS (Limpieza de márgenes) */
    .valores-col {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px 0px !important;
        /* Espacio arriba/abajo entre filas, 0 a los lados */
        margin-bottom: 32px !important;
        border-right: none !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .valores-col:last-child {
        margin-bottom: 0 !important;
    }

    /* Ajuste de márgenes internos de las tarjetas para dar espacio a la línea */
    .valores-col .valor-card:nth-child(odd) {
        padding-right: 20px !important;
    }

    .valores-col .valor-card:nth-child(even) {
        padding-left: 20px !important;
    }

    /* 🎯 LA SOLUCIÓN: Línea vertical continua de arriba a abajo */
    .valores-grid::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 50% !important;
        /* La clava exactamente a la mitad horizontal */
        transform: translateX(-50%) !important;
        width: 1px !important;
        /* Grosor de la línea */
        background-color: var(--lacsma-green) !important;
        /* Tu verde corporativo */
        z-index: 2 !important;
        display: block !important;
    }
}

/*Optimización extra para celulares muy pequeños (Hasta 360px) */
@media (max-width: 368px) {
    .teko-title {
        margin-top: 0px !important;
        padding-top: 0px !important;
    }

    .valor-card img {
        width: 80px;
        height: 95px;
        object-fit: contain;
    }

}



/* ==========================================
   TABLETS (Desde 768px hasta 1024px)
   ========================================== */
@media (min-width: 768px) and (max-width: 1024px) {

    #historia .row,
    #mision-vision .row {
        align-items: center !important;
    }

    .historia-img-wrap,
    .mv-img-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        min-height: 100% !important;
    }

    /* Mantenemos Historia con su tamaño actual */
    .historia-img-wrap img {
        width: 120% !important;
        margin-left: -100px !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    /* 🎯 AJUSTE QUIRÚRGICO PARA IPAD (MISIÓN Y VISIÓN) */
    .mv-img-wrap img {
        /* Reducimos el ancho para que la silueta sea más pequeña */
        width: 85% !important;

        /* Cambiamos el margen izquierdo negativo por uno menor o ligeramente positivo 
           para empujar físicamente la foto hacia la derecha y sacarla del texto */
        margin-left: -20px !important;

        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        transition: all 0.3s ease;
    }


}


/* ==========================================
   PANTALLAS DE ESCRITORIO / LAPTOPS (Desde 1025px en adelante)
   ========================================== */
@media (min-width: 1025px) {

    .teko-title {
        padding-top: 80px !important;
    }

    /* Ajuste dentro del bloque de Tablets (768px - 1024px) */
    .mv-divider {
        width: auto !important;
        /* Quita los 180px para que use el flex: 1 */
        max-width: none !important;
        margin-left: 15px !important;
    }


    /* 🎯 AJUSTE DE ENTRADA SIMÉTRICO: Historia conserva sus dimensiones */
    .historia-img-wrap img {
        width: 150%;
        max-width: 1200px;
        max-height: 700px;
        height: auto;
        margin-left: -200px;

    }

    .mv-img-wrap img {
        width: 155%;
        max-width: 1200px;
        max-height: 700px;
        height: auto;

        /* 🚀 ANTES: -180px | AHORA: -120px 
           Al reducir el valor negativo, la foto se mueve hacia la derecha. 
           Si quieres que se mueva todavía más a la derecha, bájalo a -90px. */
        margin-left: -50px;
    }

}

/* ==========================================================================
   ANTI-DESBORDAMIENTO: ELIMINA MÁRGENES BLANCOS EN PANTALLAS MINI (326px)
   ========================================================================== */
html,
body {
    width: 100%;
    overflow-x: hidden;
    /* 🎯 Corta de raíz cualquier elemento que intente salirse por la derecha */
}

@media (max-width: 480px) {

    /* 1. Aseguramos que los contenedores de las fotos no superen nunca el ancho de la pantalla */
    .mv-img-contenedor {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 2. Forzamos a que las imágenes internas se adapten estrictamente al contenedor */
    .mv-foto-rectangular {
        width: 100% !important;
        max-width: 100% !important;
        object-fit: cover;
    }

    /* 3. Protegemos las columnas de texto para que sus paddings no sumen ancho extra */
    #historia .col-12,
    #mision-vision .col-12 {

        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================
   CONCRETOS
   ========================================== */
/* 🎯 El punto vuelve a su comportamiento anterior pero congelando la altura */
.punto-color {
    color: var(--lacsma-green) !important;
    /* El color verde de tu marca */
    font-size: 38px;
    /* El tamaño que te gustó */
    display: inline-block;
    margin-right: 2px;
    /* Separación normal con la palabra "Análisis" */
    vertical-align: middle;
    /* Centrado con las letras */

    /* 🔥 LA SOLUCIÓN AL ESPACIO EXTRA: */
    line-height: 0 !important;
    /* Hace que el punto no ocupe espacio hacia arriba ni hacia abajo */
}

/* 🎯 Tono gris oscuro intermedio para la normatividad */
.text-normativa {
    color: #000000 !important;
    /* 💡 Si lo quieres un poquito más oscuro prueba con #333333, si lo quieres más claro usa #555555 */
    font-weight: 500 !important;
    /* Le da una presencia sutil a la letra sin llegar a ser negrita gruesa */
}