@import url("/css/fonts/fonts.css");
@import url("/css/global/global.css");
@import url("/css/components/header.css");
@import url("/css/components/footer.css");
@import url("/css/components/cards.css");

main > section {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 3.125rem 0;
    text-align: center;
}

/*Carrusel*/

#services-carousel {
    margin-top: 0.7rem;
    width: 85%;
    max-width: 125rem;
    max-height: 37.5rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

#services-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-slider-progress {
    background: #ccc;
}

.my-slider-progress-bar {

    background: #035074;
    height: .1875rem;
    transition: width 400ms ease;
    width: 0;
}

#product-carousel {
    width: 85%;
    max-width: 125rem;
}

#product-carousel li.splide__slide {
    display: flex;
    justify-content: center;
    padding: .3125rem 0;
}

#product-carousel .splide__slide a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 11.25rem;
    min-width: 10.625rem;
    max-width: 11.25rem;
    height: 100%;
    text-align: center;
    padding: .625rem;
    transition: all 0.3s ease-in-out;
    border-radius: 1.25rem;
}

#product-carousel .splide__slide a:focus-visible {
    outline: .1875rem solid #04435F;
    border-radius: .3125rem;
}

#product-carousel .splide__slide a p {
    color: #000;
    font-size: .875rem;
}

#product-carousel .splide__slide a img {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    object-fit: cover;
}

#product-carousel .splide__slide a:hover img {
    border: .1875rem solid #a1db0e;
    box-shadow: 0 0 .625rem #5f791e;
}

#product-carousel .splide__slide a:hover {
    transform: translateY(-0.0625rem);
}

section h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/*Sección destacamos*/
.destacamos-por {
    align-items: center;
    width: 85%;
    max-width: 125rem;
}

.destacamos__contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    max-width: 93.75rem;
    gap: .3125rem;
}

.destacamos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-basis: calc(100% / 3);
    text-align: center;
    height: 8.125rem;
}

.destacamos p {
    margin-top: 0;
}

.destacamos h3 {
    color: #a1db0e;
    font-weight: bold;
    font-size: 2.8125rem;
    margin: .625rem 0;
    font-family: 'Lato';
    user-select: none;
    -webkit-text-stroke: #035074 .0625rem;
}

.destacamos img {
    width: 4.6875rem;
    height: auto;
}

.destacamos img#design {
    width: 3.4375rem;
}

div.imagen-secundaria {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../../img/img_secundaria.jpg") no-repeat center center;
    width: 85%;
    max-width: 125rem;
    height: 18.75rem;
}

div.imagen-secundaria h2 {
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 2.5em;
    text-align: center;
    user-select: none;
    text-shadow: #000 0 0 .3125rem;
}

/* Sección dirección (mapa) */

.direccion{
    align-items: center;
    width: 85%;
    max-width: 125rem;
}
.direccion iframe{
    width: 100%;
}


/* Media Queries */

@media screen and (min-width: 64.0625rem) and (max-width: 85.375rem) {
    
}

@media screen and (min-width: 48rem) and (max-width: 64rem) {
    .contenedor_carrusel {
        min-width: 37.5rem;
        width: 37.5rem;
        max-width: 37.5rem;
    }

    #services-carousel,
    #product-carousel,
    div.imagen-secundaria {
        width: 85%;
    }

    #product-carousel .splide__slide a:focus img {
        border: .1875rem solid #a1db0e;
        box-shadow: 0 0 .625rem #5f791e;
    }

    #product-carousel .splide__slide a img {
        width: 7.5rem;
        height: 7.5rem;
    }

    .destacamos__contenedor {
        width: 100%;
    }

}

@media screen and (min-width: 30.0625rem) and (max-width: 47.9375rem) {
    #services-carousel {
        margin-top: 0;
    }

    #services-carousel,
    #product-carousel,
    div.imagen-secundaria {
        width: 100%;
    }

    #product-carousel .splide__slide a:focus img {
        border: .1875rem solid #a1db0e;
        box-shadow: 0 0 .625rem #5f791e;
    }

    #product-carousel .splide__slide a img {
        width: 7.5rem;
        height: 7.5rem;
    }

    .destacamos__contenedor {
        width: 50%;
        flex-wrap: wrap;
        gap: 3.125rem;
    }

    .destacamos {
        flex-basis: 100%;
    }

}

@media screen and (max-width: 30rem) {
    #services-carousel {
        margin-top: 0;
    }

    #services-carousel,
    #product-carousel,
    div.imagen-secundaria {
        width: 100%;
    }

    #product-carousel .splide__slide a:focus img {
        border: .1875rem solid #a1db0e;
        box-shadow: 0 0 .625rem #5f791e;
    }

    #product-carousel .splide__slide a img {
        width: 7.5rem;
        height: 7.5rem;
    }

    .destacamos__contenedor {
        width: 50%;
        flex-wrap: wrap;
        gap: 3.125rem;
    }

    .destacamos {
        flex-basis: 100%;
    }

    div.imagen-secundaria h2 {
        font-size: 2em;
    }

}