/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#fff;
    color:#222;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

.container{
    width:min(1200px,92%);
    margin:auto;
}

/* =========================
   HERO
========================= */

.hero{

    width:100%;
    line-height:0;

}

.hero img{

    width:100%;
    height:auto;

}

/* =========================
   INTRO
========================= */

.intro{

    padding:60px 20px;

}

.intro .container{

    max-width:980px;

    margin:auto;

    text-align:center;

}

.intro h2{

    font-size:44px;

    font-weight:900;

    line-height:1.15;

    color:#111;

    margin-bottom:18px;

}

.intro-line{

    width:70px;

    height:4px;

    background:#F2DA31;

    margin:0 auto 30px;

}

.intro p{

    font-size:21px;

    color:#555;

    line-height:1.8;

}

/* =========================
   BANNERS
========================= */

.banner{

    margin:18px auto;

}

.banner img{

    width:100%;
    height:auto;

}

/* =========================
   PRODUCTOS
========================= */

.productos{

    padding:80px 0 100px;

    background:#fff;

    box-shadow:

        0 -10px 40px rgba(0,0,0,.04),

        0 10px 40px rgba(0,0,0,.04);

}


.productos h2{

    text-align:center;

    font-size:46px;

    font-weight:900;

}

.linea{

    width:90px;

    height:5px;

    background:#F2DA31;

    margin:18px auto 50px;

}

.productosSwiper{

    width:min(1320px,92%);

}

.swiper-slide{

    text-align:center;

    background:#fff;

    border-radius:12px;

    padding:25px 15px 30px;

    transition:.25s;

}



.swiper-slide img{

    width:220px;

    height:220px;

    object-fit:contain;

    margin:auto;

    transition:.3s;

}

.swiper-slide:hover img{

    transform:scale(1.04);

}

.swiper-slide h3{

    font-size:17px;

    font-weight:800;

    margin-top:15px;

    color:#222;

}
.swiper-slide:hover{

    transform:translateY(-6px);

    box-shadow:

    0 15px 35px rgba(0,0,0,.10);

}
.swiper-button-next,
.swiper-button-prev{

    color:#111;

}

.swiper-button-next::after,
.swiper-button-prev::after{

    font-size:30px;

    font-weight:bold;

}

/* =========================
   TABLET
========================= */

@media(max-width:992px){

.intro h2{

    font-size:38px;

}

.intro p{

    font-size:19px;

}

.swiper-slide img{

    width:210px;
    height:210px;

}

}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

.intro{

    padding:45px 20px;

}

.intro h2{

    font-size:32px;

    margin-bottom:15px;

}

.intro-line{

    margin-bottom:22px;

}

.intro p{

    font-size:17px;

    line-height:1.7;

}

.banner{

    margin:18px auto;

}

.productos{

    padding:55px 0 80px;

}

.productos h2{

    font-size:34px;

}

.linea{

    margin-bottom:35px;

}

.swiper-slide img{

    width:180px;
    height:180px;

}

}

/* =========================
   ANIMACIONES
========================= */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


/* =========================
   HOVER BANNERS
========================= */

.banner{

    overflow:hidden;

}

.banner img{

    transition:transform .5s ease;

}

.banner:hover img{

    transform:scale(1.03);

}


/* =========================
   PRODUCTOS
========================= */

.swiper-slide{

    transition:

        transform .3s ease,

        box-shadow .3s ease;

    border-radius:12px;

}

.swiper-slide:hover{

    transform:translateY(-8px);

    box-shadow:

        0 15px 35px rgba(0,0,0,.10);

}

.swiper-slide img{

    transition:transform .35s ease;

}

.swiper-slide:hover img{

    transform:scale(1.05);

}

.swiper-slide h3{

    transition:color .3s ease;

}

.swiper-slide:hover h3{

    color:#d9b300;

}


/* =========================
   CURSOR
========================= */

.productosSwiper{

    cursor:grab;

}

.productosSwiper:active{

    cursor:grabbing;

}