/* Aplicar la tipografía base al cuerpo del documento */
body {
    font-family: 'Rethink Sans', sans-serif;
}

/* Clases de Tipografía Personalizadas */
.text-h1 {
    font-size: 50px;
    font-weight: 600;
    /* semibold */
}

.text-h2 {
    font-size: 45px;
    font-weight: 600;
    /* semibold */
}

.text-h3 {
    font-size: 30px;
    font-weight: 600;
    /* semibold */
}

.text-h4 {
    font-size: 25px;
    font-weight: 600;
    /* semibold */
}

.text-body-large {
    font-size: 20px;
}

.text-body-small {
    font-size: 16px;
}

/* Clases de Botones Personalizadas */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0 !important;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    border: none;
}

.btn-primary {
    background-color: #006eff;
    /* Azul 02 */
    color: #ffffff;
    /* Blanco 01 */
}

.btn-primary:hover {
    background-color: #91ff3d;
    /* Fondo Hover */
    color: #021a3a;
    /* Texto Hover */
}

.btn-secondary {
    background-color: #6eff00;
    /* Verde */
    color: #021a3a;
    /* Azul 01 */
}

.btn-secondary:hover {
    background-color: #91ff3d;
    /* Fondo Hover */
    color: #021a3a;
    /* Texto Hover */
}

/* Botón específico para la navegación principal */
.btn-nav {
    background-color: transparent;
    color: #ffffff;
    /* Blanco 01 */
    border: none;
    /* Reducimos el padding para que los botones sean más pequeños */
    padding: 0.5rem 1rem;
    font-size: 14px;
}

.btn-nav:hover {
    color: #6eff00;
    /* Verde */
}

/* Clases de Utilidad para Colores */
.bg-azul-01 {
    background-color: #021a3a;
}

.bg-azul-02 {
    background-color: #006eff;
}

.bg-gris-01 {
    background-color: #f1f1f1;
}

.bg-gris-02 {
    background-color: #585a5e;
}

.bg-verde {
    background-color: #6eff00;
}

.bg-blanco-01 {
    background-color: #ffffff;
}

.text-azul-01 {
    color: #021a3a;
}

.text-azul-02 {
    color: #006eff;
}

.text-gris-01 {
    color: #f1f1f1;
}

.text-gris-02 {
    color: #585a5e;
}

.text-verde {
    color: #6eff00;
}

.text-blanco-01 {
    color: #ffffff;
}

/* Clases de Utilidad Adicionales */
.border-bottom-gris {
    border-bottom: 1px solid #f1f1f1;
}


/* --- NUEVO: ESTILOS PARA MENÚ MÓVIL FLOTANTE --- */

/* Este media query (max-width: 991.98px) coincide con el
   breakpoint 'lg' de Bootstrap (navbar-expand-lg) */
@media (max-width: 991.98px) {

    /* 1. Hacemos que el contenedor del menú colapsado 
          sea 'absolute' cuando se muestra. 
          Esto evita que empuje el contenido del sitio. */
    .navbar-collapse.collapse.show,
    .navbar-collapse.collapsing {
        position: absolute;
        top: 100%;
        /* Se posiciona justo debajo de la barra de navegación */
        left: 0;
        right: 0;
        /* Ocupa todo el ancho */
        z-index: 1050;
        /* Se asegura de estar sobre el contenido */

        /* 2. Le damos un fondo sólido y estilo de popup */
        background-color: #021a3a;
        /* Color bg-azul-01 */
        padding: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        /* Línea sutil de separación */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* 3. Hacemos que los botones del menú ocupen todo el ancho 
          y se alineen a la izquierda para un look de menú móvil. */
    .navbar-collapse.collapse.show .navbar-nav .nav-item .btn-nav {
        display: block;
        width: 100%;
        text-align: left;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* 4. Damos un poco de separación entre los botones */
    .navbar-collapse.collapse.show .navbar-nav .nav-item {
        margin-bottom: 0.25rem;
    }
}

/* IMAGEN HEADER */
.bg-img-header {
    background-image: url('img/img-header.webp');
    background-size: cover;
    /* Asegura que la imagen cubra todo el contenedor */
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    background-position: center center;
    /* Centra la imagen en el contenedor */
}

.numero-telefono {
    font-size: 12px;
}

/* Media query para 540px o menos */
@media (max-width: 540px) {

    .contenedor-seccion {
        padding-left: 0.25rem !important;
        /* Equivale a px-1 */
        padding-right: 0.25rem !important;
        /* Equivale a px-1 */
    }

    /* NUEVA REGLA (AÑADIR ESTA):
          Esta regla es MÁS específica que la conflictiva (0,5,0)
          y anulará SOLAMENTE el padding horizontal.
        */
    .bg-img-header .row .bg-blanco-01.contenedor-seccion,
    .bg-img-header .row .bg-azul-02.contenedor-seccion {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* 3. NUEVO PARCHE para la sección de Contacto */
    /*
       Este selector (ID + 2 clases) es más específico
       que la regla conflictiva (ID + 1 clase).
    */
    #contacto .p-5.contenedor-seccion {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container-fluid.py-2 {
        padding-top: 0 !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .navbar-brand {
        padding-left: 10px !important;
    }

    /* 1. La pagina no debe tener margenes hacia los bordes */
    body .container-fluid.p-2 {
        padding-left: 0;
        padding-right: 0;
    }

    /* 2. La imagen de header debe aparecer pero sin los botones... */
    .bg-img-header {
        position: relative;
        /* Necesario para el pseudo-elemento */
        height: auto;
        /* Dejamos que crezca con su contenido */
        background-image: none !important;
        /* Quitamos la imagen del contenedor */

        /* Quitamos paddings laterales y fondo */
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding-top: 15px !important;
        /* Reseteamos el padding superior */
    }

    /* Pseudo-elemento que simula el fondo de imagen */
    .bg-img-header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 56.25vw;
        /* Altura responsiva (ratio 16:9) */
        background-image: url('img/img-header.webp');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: 0;
        /* Detrás del contenido */
    }

    /* Aseguramos que el contenido esté sobre la imagen */
    .bg-img-header nav.navbar,
    .bg-img-header .row {
        position: relative;
        z-index: 1;
    }

    /* Ajustamos el nav para que tenga padding interno y se vea bien */
    .bg-img-header nav.navbar {
        margin: 0 1rem !important;
        /* Margen lateral */
        /* Espacio superior (simulando el pt-3 original) */
        width: auto;
        /* Para que respete los márgenes */
    }

    /* 3. El cuadro de Botones de HEADER debe verse fuera de la imagen */
    .bg-img-header>.row {
        /* Empujamos los cuadros para que inicien DESPUÉS de la imagen */
        margin-top: 45.25vw !important;
        margin-bottom: 0 !important;
        width: 100%;
        margin-left: 0;
    }

    /* 4. El cuadro blanco... ocupa una siguiente fila... */
    /* 5. El cuadro azul... ocupa una siguiente fila... */
    .bg-img-header .row .col-lg-5,
    .bg-img-header .row .col-lg-7 {
        width: 100% !important;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .bg-img-header .row .col-lg-5 {
        margin-bottom: 0 !important;
        /* Anula mb-4 mb-lg-0 */
    }

    /* Ajustamos paddings internos de los boxes (de p-5 a p-4) */
    .bg-img-header .row .bg-blanco-01,
    .bg-img-header .row .bg-azul-02 {
        padding: 2rem !important;
    }

    /* 6. las divisiones se mantengan de forma horizontal (3 divisiones) */
    .bg-img-header .row .bg-azul-02 .col-4 {
        margin-bottom: 0 !important;
    }
}

/* --- ESTILOS SWIPER SERVICIOS --- */
/* Añadimos estilos para el carrusel de servicios */
.service-swiper .swiper-pagination {
    bottom: 0px !important;
    /* Coloca los puntos más abajo, fuera del slide */
    position: relative;
    /* Lo hacemos relativo para que empuje el contenido */
    margin-top: 2rem;
    /* Damos un espacio superior */
}

.service-swiper .swiper-pagination-bullet {
    background-color: #021a3a;
    /* bg-azul-01 (Color inactivo - "negro") */
    opacity: 0.5;
    /* Un poco de opacidad para el inactivo */
    width: 10px;
    height: 10px;
    transition: all 0.3s ease;
    /* Transición suave */
    margin: 0 4px !important;
    /* Añadido para espacio táctil */
}

.service-swiper .swiper-pagination-bullet-active {
    background-color: #6eff00;
    /* bg-verde (Color activo) */
    opacity: 1;
    transform: scale(1.2);
    /* Hacemos el punto activo un poco más grande */
    margin: 0 4px !important;
    /* Añadido para espacio táctil */
}


/* --- ESTILOS SECCIÓN NUESTRO PROCESO --- */
.bg-img-proceso {
    /* Fondo con la imagen solicitada */
    background-image: url('img/proceso.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    /* Efecto parallax simple */
    position: relative;
    /* Necesario para la superposición */
}

/* Superposición oscura para mejorar legibilidad del texto blanco */
.bg-img-proceso::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Usamos el color azul-01 con 80% de opacidad */
    background-color: rgba(2, 26, 58, 0.8);
    z-index: 1;
    /* Detrás del contenido */
}

/* Asegura que el contenido (container) esté sobre la superposición */
.bg-img-proceso .container-fluid {
    position: relative;
    z-index: 2;
}

/* Esta regla anula el 'g-4' (gap) de Bootstrap 
   específicamente para la fila de procesos */
#proceso .row.g-4 {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

#proceso .text-body-small {
    font-size: 12px !important;
}

.proceso-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    /* Asegura que todas las tarjetas tengan la misma altura */
    min-height: 280px;
    /* Altura mínima para que se vea bien */
    transition: background-color 0.4s ease-in-out, border-color 0.4s ease-in-out;
    /* Transición actualizada */
    cursor: pointer;
    display: flex;
    /* Usamos flex para alinear contenido */
    flex-direction: column;
    /* Alineación vertical */
    border: 1px solid #585a5e;
    /* BORDE AÑADIDO (color gris01) */
}

.proceso-numero {
    font-size: 5.5rem;
    /* TAMAÑO GRANDE INICIAL (AJUSTADO) */
    font-weight: 800;
    /* Extra-bold */
    line-height: 1;
    position: absolute;
    top: 1rem;
    left: 1rem;
    /* Transición para todos los cambios */
    transition: all 0.4s ease-in-out;
    z-index: 3;
    /* El color por defecto (text-azul-02) se aplica desde el HTML */
}

.proceso-contenido {
    opacity: 0;
    /* Oculto por defecto */
    transform: translateY(20px);
    /* Ligeramente desplazado */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    transition-delay: 0.1s;
    /* Retraso para que aparezca después del fondo */
    margin-top: 6rem;
    /* Espacio para que no se encime con el número */
    position: relative;
    z-index: 4;
}

/* --- ESTADOS HOVER --- */

.proceso-card:hover {
    background-color: #006eff !important;
    /* bg-azul-02 */
    /* El borde se mantiene #f1f1f1 por defecto */
}

.proceso-card:hover .proceso-numero {
    font-size: 2rem;
    /* Tamaño más pequeño en hover */
    color: #ffffff !important;
    /* text-blanco-01 (sobreescribe text-azul-02) */
    top: 1rem;
    left: 1rem;
}

.proceso-card:hover .proceso-contenido {
    opacity: 1;
    /* Mostrar contenido */
    transform: translateY(0);
    /* Posición original */
}

/* Ajustes responsivos para las tarjetas de proceso */
@media (max-width: 991px) {

    /* tablets */
    .proceso-card {
        min-height: 220px;
        /* Menor altura en tablets */
    }
}

@media (max-width: 767px) {

    /* móviles */
    .proceso-card {
        min-height: auto;
        /* Altura automática en móviles */
        min-height: 200px;
    }

    .proceso-numero {
        font-size: 4.5rem;
        /* TAMAÑO GRANDE INICIAL (AJUSTADO) */
    }

    .proceso-card:hover .proceso-numero {
        font-size: 1.5rem;
        /* Tamaño más pequeño en hover */
    }

    .proceso-contenido {
        margin-top: 5rem;
    }
}

@media (max-width: 991.98px) {

    /* Debajo del breakpoint lg (cuando el texto y botón se apilan) */
    .btn-contacto-proceso {
        width: 100%;
        /* Ocupa todo el ancho disponible */
    }
}


/* --- ESTILOS SWIPER PORTAFOLIO --- */

.portfolio-swiper .swiper-pagination {
    bottom: 0px !important;
    position: relative;
    margin-top: 2rem;
}

.portfolio-swiper .swiper-pagination-bullet {
    background-color: #021a3a;
    /* bg-azul-01 */
    opacity: 0.5;
    width: 10px;
    height: 10px;
    transition: all 0.3s ease;
    margin: 0 4px !important;
    /* Añadido para espacio táctil */
}

.portfolio-swiper .swiper-pagination-bullet-active {
    background-color: #6eff00;
    /* bg-verde */
    opacity: 1;
    transform: scale(1.2);
    margin: 0 4px !important;
    /* Añadido para espacio táctil */
}

.portfolio-icon {
    height: 1em;
}

/* Ajuste para que la imagen del proyecto no se desborde y tenga fondo blanco */
.portfolio-swiper .swiper-slide img {
    max-width: 100%;
    background-color: #ffffff;
    /* Fondo blanco como solicitado */
}

/* Ajuste de texto en slides de portafolio para móviles */
@media (max-width: 991.98px) {
    .portfolio-swiper .swiper-slide .col-lg-4 {
        /* Apila el texto después de la imagen en móvil */
        order: 2;
        text-align: left;
        /* Asegura alineación izquierda */
        margin-top: 1.5rem;
    }

    .portfolio-swiper .swiper-slide .col-lg-8 {
        order: 1;
    }

    .portfolio-swiper .swiper-slide .text-h4 {
        font-size: 1.75rem;
        /* Ajusta tamaño de título en móvil */
    }
}

/* --- ESTILOS SECCIÓN CLIENTES --- */
/* Contenedor general de los carruseles de clientes */
.client-swiper-1,
.client-swiper-2 {
    overflow: hidden;
    /* Asegura que nada se salga */
}

.client-swiper-1 .swiper-wrapper,
.client-swiper-2 .swiper-wrapper {
    /* Esto elimina el "arranque" y "frenado" (ease) de la animación */
    transition-timing-function: linear !important;
}

/* Estilo para cada slide (el logo individual) */
.client-swiper-1 .swiper-slide,
.client-swiper-2 .swiper-slide {
    background-color: #ffffff;
    /* Fondo blanco */
    border: 0;
    /* Borde sutil */
    border-radius: 0;
    /* Esquinas agudas */
    /* padding: 0.5rem; */
    box-sizing: border-box;

    /* Centrar la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    /* Altura fija para alinear ambas filas */

    /* Transición para el efecto hover */
    transition: filter 0.3s ease;
}

/* Estilo de la imagen dentro del slide */
.client-swiper-1 .swiper-slide img,
.client-swiper-2 .swiper-slide img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    /* Efecto: gris por defecto */
    /* filter: grayscale(100%) opacity(0.7); */
    transition: filter 0.3s ease;
}

/* Efecto hover: imagen a color */
/* .client-swiper-1 .swiper-slide:hover img,
.client-swiper-2 .swiper-slide:hover img {
    filter: grayscale(0%) opacity(1);
} */

/* En móvil, hacemos los logos un poco más pequeños */
@media (max-width: 767px) {

    .client-swiper-1 .swiper-slide,
    .client-swiper-2 .swiper-slide {
        height: 90px;
        padding: 1rem;
    }
}

/* --- ESTILOS SECCIÓN QUIÉNES SOMOS --- */

/* Línea horizontal sutil sobre fondos oscuros */
.hr-line-light {
    height: 1px;
    opacity: 0.3;
}

/* Iconos de características (invertir color y tamaño) */
.quienes-somos-icon {
    height: 2rem;
}

/* Imagen lateral (asegurar que cubra el contenedor) */
.quienes-somos-img {
    object-fit: cover;
    object-position: center;
}

/* --- ESTILOS SECCIÓN GARANTIA MKS --- */
.garantia-mks-icon {
    height: 2rem;
    /* Tamaño para desktop */
}

/* Estilo del título */
.garantia-mks-title span {
    display: block;
    /* Forzar segunda línea */
    color: #000000;
    /* Forzar color negro como se pidió */
    font-weight: 600;
}

/* Ajustes responsivos para Garantía */
@media (max-width: 991.98px) {

    /* tablets y móviles */
    .garantia-mks-icon {
        height: 2rem;
        /* Ajustado a 2rem como solicitaste */
    }

    /* Título de Garantía en una línea en móvil */
    .garantia-mks-title {
        font-size: 1.25rem;
        /* Reducir tamaño para que quepa */
        line-height: 1.2;
    }

    .garantia-mks-title span {
        display: inline;
        /* Cambiar a inline en lugar de block */
        color: #000000;
        margin-left: 0.25rem;
    }
}

@media (max-width: 540px) {

    .quienes-somos-title-mobile {
        font-size: 18px;
    }

    .quienes-somos-desc-mobile {
        font-size: 14px;
    }

}

/* --- ESTILOS SECCIÓN IA Y TECNOLOGÍAS --- */

#ia-tecnologias {
    position: relative;
    /* Para posicionar el pseudo-elemento */
    overflow: hidden;
    /* Para que el pseudo-elemento no se desborde */
}

/* NUEVO: Contenedor para la col-lg-5 
  que tendrá la imagen y los logos
*/
.ia-image-container {
    position: relative;
    /* Añadir padding que se active en móvil cuando se apila */
    padding-top: 3rem;
    padding-bottom: 3rem;
    min-height: 300px;
    /* Altura mínima en móvil para que la imagen de fondo se vea */
}

/* NUEVO: Wrapper para la imagen */
.ia-image-wrapper {
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {

    /* lg and up */
    .ia-image-container {
        padding-top: 0;
        /* Sin padding en desktop */
        padding-bottom: 0;
        min-height: 500px;
        /* Altura fija para el contenedor desktop */
    }

    /* NUEVO: El wrapper de la imagen se vuelve absoluto en desktop */
    .ia-image-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}


/* MODIFICADO: La imagen de fondo ahora 
  es relativa a .ia-image-container (col-lg-5)
*/
.ia-bg-image {
    position: relative;
    /* Mobile-first: es una imagen normal */
    /* top: 0; */
    /* left: 0; */
    /* bottom: 0; */
    width: 100%;
    height: auto;
    /* Mobile-first: altura automática */
    object-fit: contain;
    /* Mobile-first: se ve completa */
    object-position: center center;
    opacity: 1;
    /* Visible al 100% */
    z-index: 1;
    /* transition: all 0.3s ease; */
    /* Deshabilitado por ahora */
}


/* Forzar que las filas de contenido estén por encima de la imagen */
#ia-tecnologias .row {
    position: relative;
    z-index: 2;
}

/* MODIFICADO: Contenedor de logos 
  ahora se centra en .ia-image-container
*/
.ia-logos-container {
    position: relative;
    z-index: 2;
    /* Sobre la imagen */
    display: flex;
    flex-direction: column;
    /* Mobile-first: vertical */
    justify-content: center;
    /* Mobile-first: centrado vertical en su col-4 */
    align-items: flex-start;
    /* Mobile-first: alineado a la izquierda */
    height: 100%;
}


/* Estilo de los logos de IA */
.ia-logo {
    max-height: 35px;
    /* Tamaño unificado */
    width: auto;
    opacity: 0.6;
    /* Ligeramente atenuados */
    margin-bottom: 1.5rem;
    /* Espacio entre logos */
}

/* Lista de tecnologías con viñetas personalizadas */

.tech-list li {
    position: relative;
    font-size: 16px;
    /* text-body-small */
    color: #021a3a;
    /* text-azul-01 (Oscuro) */
    font-weight: 600;
    /* semibold (Bold) */
    margin-bottom: 0.75rem;
    /* Espacio entre elementos */
    line-height: 1.3;
}

/* Viñeta de círculo (•) */
.tech-list li::before {
    /* Círculo como viñeta */
    position: absolute;
    left: 0;
    /* Posición de la viñeta */
    top: 0;
    /* color azul-02 */
    font-weight: bold;
    font-size: 1rem;
    /* Tamaño del círculo */
}

/* NUEVO: Reglas de Desktop para la imagen y logos */
@media (min-width: 992px) {
    /* .ia-bg-image {
        position: absolute;
        height: 100%;
        object-fit: cover;
        object-position: right center;
    } */

    .ia-logos-container {
        justify-content: flex-start;
        /* MODIFICADO: Alinear Arriba (Top) */
        align-items: flex-start;
        /* MODIFICADO: Alinear Izquierda (Left) */
        /* padding: 3rem; */
        /* AÑADIDO: Espacio desde el borde */
    }
}


/* Ajustes responsivos para IA y Tecnologías */
@media (max-width: 991.98px) {
    /* Debajo de lg (tablets y móviles) */

    .ia-logo {
        max-height: 25px;
        /* Más pequeños en móvil */
        margin: 0;
        margin-bottom: 1.5rem;
        /* Espacio vertical */
    }

    .tech-list {
        padding-left: 1rem;
    }

    .tech-list li {
        font-size: 14px;
        /* Texto de lista más pequeño */
    }
}

/* --- ESTILOS SWIPER TESTIMONIOS --- */
.testimonial-swiper {
    overflow: hidden;
    /* Previene cualquier desbordamiento accidental */
}

.testimonial-swiper .swiper-slide {
    height: auto;
    /* Deja que el slide se ajuste a la altura de la tarjeta */
    width: 80%;
    /* Ancho para móviles, para que se vean los lados */
}

/* En pantallas de 992px o más (desktop) */
@media (min-width: 992px) {
    .testimonial-swiper .swiper-slide {
        width: 50%;
        /* Ancho equivalente a col-lg-6 */
    }
}

.testimonial-swiper .swiper-pagination {
    bottom: 0px !important;
    position: relative;
    margin-top: 2rem;
    /* Espacio para que no se pegue al carrusel */
}

.testimonial-swiper .swiper-pagination-bullet {
    background-color: #021a3a;
    /* bg-azul-01 */
    opacity: 0.5;
    width: 10px;
    height: 10px;
    transition: all 0.3s ease;
    margin: 0 4px !important;
    /* Añadido para espacio táctil */
}

.testimonial-swiper .swiper-pagination-bullet-active {
    background-color: #6eff00;
    /* bg-verde */
    opacity: 1;
    transform: scale(1.2);
    margin: 0 4px !important;
    /* Añadido para espacio táctil */
}

/* Estilo de la tarjeta de testimonio */
.testimonial-card {
    border-radius: 0;
    /* Esquinas agudas */
    height: 100%;
    /* La tarjeta ocupa el 100% del alto del slide */
    display: flex;
    flex-direction: column;
    min-height: 300px;
    /* --- ALTURA MÍNIMA FIJA --- */
}

/* Empuja al autor al fondo de la tarjeta */
.testimonial-card p.text-azul-01 {
    margin-top: auto;
}


/* NUEVO: Ajuste para forzar el ancho completo de la tarjeta 
  en móviles pequeños (menos de 576px), 
  sobreponiéndose a la clase col-6 del HTML.
*/
@media (max-width: 575.98px) {
    .testimonial-swiper .row .col-6 {
        width: 100%;
        /* Ocupa el 100% del slide (que es 80% del viewport) */
    }
}

/* --- ESTILOS SECCIÓN CONTACTO --- */

.contacto-icon {
    height: 1.5rem;
    /* 24px aprox */
    width: 1.5rem;
    /* Filtro CSS para convertir SVG a color azul-02 (#006eff) */
    filter: brightness(0) saturate(100%) invert(40%) sepia(97%) saturate(3578%) hue-rotate(200deg) brightness(102%) contrast(105%);
}

.form-control-contacto {
    background-color: #f1f1f1;
    /* bg-gris-01 (color grid claro) */
    border: none;
    border-radius: 0;
    /* Sin bordes redondeados */
    padding: 0.75rem 1rem;
    font-size: 16px;
    /* text-body-small */
    color: #021a3a;
    /* text-azul-01 (para el texto escrito) */
}

.form-control-contacto::placeholder {
    color: #585a5e;
    /* text-gris-02 (placeholder gris obscuro) */
    opacity: 1;
    /* Sobrescribe el default de Bootstrap */
}

/* Ajustes responsivos para Contacto */
@media (max-width: 991.98px) {

    /* Orden de las columnas en móvil */
    #contacto .bg-blanco-01 {
        order: 1;
        /* Formulario blanco (arriba) */
    }

    #contacto .bg-azul-01 {
        order: 2;
        /* Info azul (abajo) */
    }

    #contacto .p-5 {
        padding: 3rem !important;
        /* Reducir padding en móvil */
    }
}