@charset "UTF-8";

/* =========================================
   SLIDER
========================================= */

.hero-slider{

    width:100%;

    max-width:1800px;

    height:320px;

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:#000;

    margin:20px auto;

    box-shadow:
        0 8px 28px rgba(0,0,0,.14);
}

/* =========================================
   SLIDES
========================================= */

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}

/* =========================================
   ACTIVO
========================================= */

.slide.active{

    opacity:1;

    visibility:visible;

    z-index:2;
}

/* =========================================
   IMAGEN
========================================= */

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

/* =========================================
   BOTONES
========================================= */

.slider-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:
        rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:16px;

    cursor:pointer;

    z-index:10;

    transition:.25s ease;
}

.slider-btn:hover{

    background:var(--blue);

    transform:
        translateY(-50%)
        scale(1.05);
}

.slider-btn.prev{

    left:14px;
}

.slider-btn.next{

    right:14px;
}

/* =========================================
   DOTS
========================================= */

.slider-dots{

    position:absolute;

    left:50%;

    bottom:14px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:8px;

    z-index:10;
}

.dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:
        rgba(255,255,255,.45);

    cursor:pointer;

    transition:.25s ease;
}

.dot.active{

    background:var(--blue);

    transform:scale(1.1);
}

/* =========================================
   MONITORES GRANDES
========================================= */

@media (min-width:1600px){

    .hero-slider{

        max-width:2100px;

        height:460px;

        border-radius:28px;
    }

    .slider-btn{

        width:62px;
        height:62px;

        font-size:22px;
    }

    .dot{

        width:13px;
        height:13px;
    }
}

/* =========================================
   LAPTOPS
========================================= */

@media (max-width:1200px){

    .hero-slider{

        height:280px;
    }
}

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

@media (max-width:992px){

    .hero-slider{

        height:240px;

        border-radius:18px;

        margin:16px auto;
    }

    .slider-btn{

        width:42px;
        height:42px;

        font-size:14px;
    }
}

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

@media (max-width:768px){

    .hero-slider{

        height:200px;

        border-radius:16px;

        margin:14px auto;
    }

    .slider-btn{

        width:38px;
        height:38px;

        font-size:13px;
    }

    .slider-btn.prev{

        left:8px;
    }

    .slider-btn.next{

        right:8px;
    }

    .slider-dots{

        bottom:10px;
    }
}

/* =========================================
   TELEFONOS GRANDES
========================================= */

@media (max-width:580px){

    .hero-slider{

        height:165px;

        border-radius:14px;

        margin:12px auto;
    }

    .slider-btn{

        width:34px;
        height:34px;

        font-size:12px;
    }

    .dot{

        width:8px;
        height:8px;
    }
}

/* =========================================
   TELEFONOS PEQUEÑOS
========================================= */

@media (max-width:420px){

    .hero-slider{

        height:145px;

        border-radius:12px;
    }

    .slider-btn{

        display:none;
    }

    .slider-dots{

        bottom:8px;

        gap:6px;
    }

    .dot{

        width:7px;
        height:7px;
    }
}