/* Estilos para carrusel automático de logos de clientes */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

body {
    font-family: 'Ubuntu', sans-serif;
}


.clientes-swiper-cont {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

.clientes-swiper-list {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-shrink: 0;
}

.clientes-swiper-list img {
    height: 40px !important;
    width: auto;
}


/* Seccion Principal y Contenedor */
.cro-thumbsGallery {
    height: 90vh; 
    background: #eee;
    display: flex;
    flex-direction: column;
}

.cro-thumbsGallery__container {
    /* padding: 40px 0px; */
    height: 100%;
    flex: 1;

}

/* Estilos Generales Swiper */
.swiperPrincipal,
.swiperThumbs {
    width: 100%;
    height: 100%;
}

.swiperPrincipal .swiper-slide {
    height: 100%;
    display: flex;    
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0px;
    text-align: center;
}

/* .swiperPrincipal .swiper-slide, */
.swiperThumbs .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* background: #444; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiperPrincipal .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* textos por defecto */
.auto-detalle-text {
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: center;

}

.auto-detalle-text .title {
    color: #121316;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
}

/* subtitle */
.auto-detalle-text .title {
    color: #121316;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    margin: 0px;
}

.auto-detalle-text .sub-title {
    color: #121316;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    margin: 0px;
}


/* detalles de texto */
.auto-detalle-text2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 30px;
}

.auto-detalle-text-cont2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.separator {
    height: 21px;
    border-left: 2px solid #121316;
}

.separator_white {
    height: 21px;
    border-left: 2px solid #ffffff;
}

.text1 {
    color: #121316;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
}

.text2 {
    color: #121316;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
}

.nombre_corto,
.text1,
.text2 {
    margin-block-start: 0;
    margin-block-end: 0 !important;
}

.nombre_corto {
    color: #121316;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 12px;
}

/* botones */
.cont_buttons {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}


.button_hijo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700 !important;
    text-transform: uppercase;
    border: 1.5px solid #121316 !important;
}

.button_hijo_transparent {
    background-color: transparent;
    color: #121316;
}

.button_hijo_transparent:hover {
    background-color: #121316;
    color: #eee;
    border: 1.5px solid #121316 !important;
}

.button_hijo_black {
    color: #eee !important;
    background-color: #121316 !important;
}

.button_hijo_black:hover {
    background-color: #fffbfb00 !important;
    color: #121316 !important;
    border: 1.5px solid #121316 !important;
}


/* Swiper Principal */

.swiperPrincipal {
    height: calc(100% - 25vw + 20px);
    width: 100%;
}

.swiperPrincipal .swiper-slide img {
    width: 92%;
    object-fit: contain;
}



/* Swiper Thumbs */
.swiperThumbs {
    height: calc(25vw - 10px);
    box-sizing: border-box;
    padding: 5px 0;
}

.swiperThumbs .swiper-slide {
    width: 25%;
    height: fit-content;
    background-color: #fff;
    border-radius: 5px;
    padding: 5px;
    height: auto;
    aspect-ratio: 4/3;
}

.swiperThumbs .swiper-slide img {
    display: block;
    width: 100%;
    object-fit: cover;
}



/* Thumb que esta activo */
.swiperThumbs .swiper-slide-thumb-active {
    opacity: 1;
}

/* Ocultamos las flechas default */
.swiperPrincipal .swiper-button-next::after {
    display: none;
}

.swiperPrincipal .swiper-button-prev::after {
    display: none;
}



/* Estilos flechas nuevas */
.swiperPrincipal .swiper-button-next svg {
    width: 33px;
    height: 34px;
    display: block;
    margin: auto;
}



/* Responsive para PC */

@media(min-width:1200px) {

    .cro-thumbsGallery {
        height: 100vh;
        /* padding: 0px 70px; */
        max-height: 100vh;
        max-width: min( calc(100vw - 140px ), var(--content-width));
        margin: auto;
    }


    .cro-thumbsGallery__container {
        display: flex;
        flex-direction: row-reverse;
        gap: 6.5vw;
        padding: 0px;
        height: 100%;
        flex: 1;
        align-items: center;        
    }

    .swiper.swiperThumbs {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 12vw;
        padding: 10px 0px;
    }

    .swiper.swiperPrincipal {
        height: 100%;
    }

    .swiper.swiperPrincipal .swiper-slide{
        padding: 70px 0px;
    }

    .swiper.swiperPrincipal .swiper-slide img{
        max-height: 30vw;
    }

    .swiperThumbs .swiper-slide {
        width: 100%;
    }


    /* estilos tjts */
    .auto-detalle-text .sub-title {        
        font-size: 32px;        
    }

    .auto-detalle-text .title {        
        font-size: 32px;        
    }

    .nombre_corto {        
        font-size: 28px !important;        
    }

}

@media(max-width:850px) {
    .auto-detalle-text {
        flex-direction: column;
        gap: 0px;
    }

    .auto-detalle-text-cont2 {
        flex-direction: column;
        gap: 5px;
    }


    .separator {
        display: none;
    }

    .separator_white {
        display: none;
    }
}


































/* estilos car detail */

.section-car-detail {
    height: 100vh;
    overflow: hidden;
}


/* .swiper-thumbs-car-detail-principal {
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
} */

.swiper-thumbs-car-detail-principal {
    position: relative;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
}


.swiper-thumbs-car-detail-principal .swiper-slide {
    height: 100%;
}

.swiper-thumbs-car-detail-principal .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-thumbs-car-detail-thumbs {
    position: absolute;
    /* background-color: blue; */
    bottom: 70px;
    left: 0;
    max-width: 100vw;
    height: calc(25vw - 10px);
}

.swiper-thumbs-car-detail-thumbs .swiper-slide {
    width: 25%;
    height: fit-content;
    background-color: #fff;
    border-radius: 5px;
    /* padding: 5px; */
    overflow: hidden;
    height: auto;
    aspect-ratio: 4/3;
}

/* imagen de thumbs */
.swiper-thumbs-car-detail-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}





/* estilos container_top */

.container_top {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: absolute;
    z-index: 1;
    /* background-color: blue; */
    top: 70px;
    left: 0;
    max-width: 100vw;
}

.container_top_nombre h3 {
    color: #fff !important;
    font-family: Ubuntu;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
}


/* textos derecha */
.container_top_texts {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}



.container_top_texts h4 {
    color: #fff !important;
    font-family: Ubuntu;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
}

.s_h4 {
    font-weight: 700 !important;
}

/* ocultamos las flechas del detail car */


.swiper-thumbs-car-detail-principal .swiper-button-next::after {
    display: none;
}

.swiper-thumbs-car-detail-principal .swiper-button-prev::after {
    display: none;
}


.button_hijo_transparent_thumbs {
    width: 250px;
    /* background-color: blue; */
    border: solid 1px #fff !important;
    color: #fff !important;
}



@media(min-width:1200px) {

    .swiper-thumbs-car-detail-thumbs {
        display: flex;
        justify-content: space-between;
        margin: auto;
        width: 100%;
        max-width: 1200px;
        height: calc(8vw - 10px);
        bottom: 70px;
        left: calc((100vw - 1500px - 70px)/2);
        right: calc((100vw - 1500px - 70px)/2);
        
    }


    /* contenedor de cada thumbs */
    .swiper-thumbs-car-detail-thumbs .swiper-slide {
        width: auto;
        margin: 0;
        /* background-color: #fff; */
    }

    /* contenedor boton */
    .cont_buttons {        
        flex-direction: row;
        align-items: end;
        gap: 20px;
    }




    .container_top {
        flex-direction: row;
        display: flex;
        justify-content: space-between;
        margin: auto;
        width: 100%;
        padding: 0px 70px;
        max-width: 1200px;
        left: calc((100vw - 1500px - 70px)/2);
        right: calc((100vw - 1500px - 70px)/2);
        border-bottom: 1px solid #fff;
    }

    .container_top_texts {
        gap: 20px;
        flex-direction: row;
    }

    .swiper-thumbs-car-detail-principal .swiper-button-next {
        right: calc((100vw - 1200px + 70px)/2);
    }

    .swiper-thumbs-car-detail-principal .swiper-button-prev {
        left: calc((100vw - 1200px - 70px)/2);
    }
}

@media(min-width:1500px) {
    .container_top {
        max-width: 1500px;
    }

    .swiper-thumbs-car-detail-thumbs {
        max-width: 1500px;
    }

    .swiper-thumbs-car-detail-principal .swiper-button-next {
        right: calc((100vw - 1500px + 70px)/2);
    }

    .swiper-thumbs-car-detail-principal .swiper-button-prev {
        left: calc((100vw - 1500px - 70px)/2);
    }
}










/* estilos texto dinamico*/

.section-car-detail {
    height: 100%;
}

/* .swiper-wrapper {
    background-color: green;
} */

.swiper-dynamic-text {
    display: flex;
    flex-direction: column;
    height: 200px;
    
}

.swiper-dynamic-text .swiper-button-next::after {
    display: none;
}


.swiper-dynamic-text .swiper-button-prev::after {
    display: none;
}

.swiper-dynamic-text .swiper-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.nombre_corto_detail {
    color: #121316;
    font-family: Ubuntu;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 700 !important;
    text-align: center;
    text-transform: uppercase;
}

.text_detail {
    color: #121316;
    text-align: center;
    font-family: Ubuntu;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    max-width: 400px;
    /* 46.8px */
}

.swiper-pagination {}

.custom-pagination {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 120px;
}

.custom-bullet {
    color: #121316;
    text-align: center;
    font-family: Ubuntu;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    /* 388.889% */
    text-transform: uppercase;
    position: relative;
}

.custom-bullet::after {
    content: '';
    display: block;
    margin-top: 4px;
    height: 2px;
    background: #ccc;
    transition: background 0.3s;
    width: 50px;
}

.custom-bullet.active {
    font-weight: 700;
    color: #000;
    width: 50px;
}

.custom-bullet.active::after {
    background: #000;
    width: 50px;
}