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

.hero-v2{

    background:#000000;

    padding:25px 0 50px;

    overflow:hidden;
}

/* ==========================================
   NAVBAR
========================================== */

.top-nav{

    width:90%;
    max-width:1400px;

    margin:auto;

    display:flex;

    justify-content:space-between;
    align-items:center;

    margin-bottom:35px;
}

.top-logo img{

    height:70px;

    width:auto;
}

.top-menu{

    display:flex;

    align-items:center;

    gap:35px;

    list-style:none;

    margin:0;
    padding:0;
}

.top-menu li{

    list-style:none;
}

.top-menu a{

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.3s;
}

.top-menu a:hover{

    color:#ff2020;
}

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

.banner-slider{

    width:90%;
    max-width:1400px;

    margin:auto;

    position:relative;
}

.banner-track{

    position:relative;

    overflow:hidden;

    height:450px;

    border-radius:24px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);
}

.banner-slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity .8s ease;
}

.banner-slide.active{

    opacity:1;

    z-index:1;
}

.banner-slide img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

/* ==========================================
   FLECHAS
========================================== */

.banner-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;
    height:58px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    color:#fff;

    cursor:pointer;

    z-index:50;

    transition:.3s;
}

.banner-arrow:hover{

    background:#d90000;

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

.banner-arrow.prev{

    left:20px;
}

.banner-arrow.next{

    right:20px;
}

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

.banner-dots{

    margin-top:18px;

    display:flex;

    justify-content:center;

    gap:10px;
}

.dot{

    width:12px;
    height:12px;

    border-radius:50%;

    background:#555;

    cursor:pointer;

    transition:.3s;
}

.dot.active{

    background:#ff2020;

    transform:scale(1.3);
}

/* ==========================================
   EFECTO PREMIUM
========================================== */

.banner-track::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:120px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.65),
        transparent
    );

    z-index:2;

    pointer-events:none;
}

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

@media(max-width:992px){

    .top-nav{

        flex-direction:column;

        gap:25px;
    }

    .top-menu{

        justify-content:center;

        flex-wrap:wrap;

        gap:20px;
    }

    .banner-track{

        height:320px;
    }

}

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

@media(max-width:768px){

    .hero-v2{

        padding:20px 0 35px;
    }

    .top-logo img{

        height:55px;
    }

    .top-menu{

        gap:15px;
    }

    .top-menu a{

        font-size:14px;
    }

    .banner-track{

        height:200px;

        border-radius:18px;
    }

    .banner-arrow{

        width:42px;
        height:42px;

        font-size:14px;
    }

    .banner-arrow.prev{

        left:8px;
    }

    .banner-arrow.next{

        right:8px;
    }

}

/* ==========================================
   MOBILE PEQUEÑO
========================================== */

@media(max-width:480px){

    .banner-track{

        height:170px;
    }

    .dot{

        width:10px;
        height:10px;
    }

    .top-menu{
        display:none;
    }

}