/* =========================================
   1. FRANJA ROJA Y PRESENTACIÓN
========================================= */
.group--color-full {
    background: #be1421;
    width: 100%;
}

.group--color-full .container {
    color: white;
    text-align: center;
}

.group--color-full .main__title {
    margin-bottom: 20px;
    font-size: 2em;
    font-family: 'Heebo', sans-serif;
}

.group--color-full .main__txt {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    padding: 0 15px;
}

/* =========================================
2. PILARES CORPORATIVOS Y EQUIPO
========================================= */
.flex-pilares {
    align-items: stretch;
}

.pilar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; /* <-- Agrega esto aquí para forzar centrado desde la raíz */
    margin-bottom: 0px;
}

.our-team__title {
    font-family: 'Heebo', sans-serif;
    color: #be1421;
    font-size: 1.6em;
    margin-bottom: 20px;
}

.img-wrapper {
    width: 220px;
    height: 220px;
    flex-shrink: 0;
    margin-bottom: 25px;
}

.our-team__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.our-team__txt {
    padding: 0 10px;
    color: #1b71b8;
    line-height: 1.5;
    text-align: center !important; /* <--- Esto fuerza el centrado por encima de todo */
    width: 100%; /* <-- Esto evita que el texto se encoja a la izquierda */
}

/* =========================================
   3. SERVICIO TÉCNICO
========================================= */
.text-blue { 
    color: #1b71b8; 
    line-height: 1.6; 
}

.img-serv-tecnico {
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.text-left-pc { 
    text-align: left; 
}

/* =========================================
   4. ESTRUCTURA DEL SLIDER SWIPER (HERO)
========================================= */
.banner-slider {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    background: transparent !important;
}

.mySwiper {
    width: 100%;
    height: 100%;
    z-index: 1;
    background: transparent !important;
}

.swiper-slide {
    background: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide-main-content {
    width: 100%;
    height: 100%;
}

.slide-main-content img {
    display: block !important;
    width: calc(100% + 2px) !important;
    height: calc(100% + 2px) !important;
    margin: -1px;
    object-fit: cover !important;
    object-position: center !important;
    animation: bounceFloat 6s ease-in-out infinite;
}

.swiper-button-next, 
.swiper-button-prev, 
.swiper-pagination {
    display: none !important;
}

/* =========================================
   5. MEDIA QUERIES (RESPONSIVE DESIGN)
========================================= */
@media screen and (max-width: 768px) {
    /* Ajustes Slider Móvil */
    .banner-slider { 
        height: 340px !important; 
    }
    
    .slide-main-content img {
        object-fit: contain !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0; /* Resetea el margen en versión contain */
    }

    /* Ajustes de Diseño Móvil */
    .column--33, .column--50 {
        width: 100%;
    }

    .our-team__txt {
        padding: 0 5px;
    }

    .align-center-mobile {
        flex-direction: column;
        text-align: center;
    }

    .text-left-pc {
        text-align: center !important;
    }

    /* Espaciados Móvil */
    .service-tech .container,
    .our-team .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* =========================================
   6. CORRECCIONES DE ESPACIOS Y FONDO EN SERVICIO TÉCNICO
========================================= */

/* --- FONDO GRIS Y CORRECCIÓN DE ESPACIOS EN SERVICIO TÉCNICO --- */
.service-tech {
    background-color: #f9f9f9 !important; /* Aplica el gris claro a toda la franja */
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}
/* Quita la barra blanca entre Servicio Técnico y el Footer */
main.main {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.service-tech + .main-footer,
.service-tech ~ .main-footer {
    margin-top: 0 !important;
}