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

html{
    scroll-behavior:smooth;
}

body{

    background:#050505;
    color:white;

    font-family:Arial, Helvetica, sans-serif;

    overflow-x:hidden;
}

/* BACKGROUND */

.track-bg{

    position:fixed;

    width:100%;
    height:100%;

    top:0;
    left:0;

    background:
    linear-gradient(
        rgba(0,0,0,0.82),
        rgba(0,0,0,0.9)
    ),
    url("./img/bg-track.jpg");

    background-size:cover;
    background-position:center;

    z-index:-20;
}

/* HEADER */

header{

    position:fixed;

    width:100%;
    top:0;

    padding:25px 8%;

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

    z-index:999;

    backdrop-filter:blur(12px);

    background:rgba(0,0,0,0.35);
}

.logo img{
    height:55px;
}

/* NAV */

nav{

    display:flex;
    gap:30px;
}

nav a{

    text-decoration:none;
    color:#d8d8d8;

    letter-spacing:1px;

    transition:0.3s;
}

nav a:hover{

    color:#00ffff;
}

/* MENU MOBILE */

.menu-toggle{

    display:none;

    width:35px;
    height:25px;

    position:relative;

    cursor:pointer;

    z-index:2000;
}

.menu-toggle span{

    position:absolute;

    width:100%;
    height:2px;

    background:#f5d36b;

    transition:0.4s;
}

.menu-toggle span:nth-child(1){
    top:0;
}

.menu-toggle span:nth-child(2){
    top:10px;
}

.menu-toggle span:nth-child(3){
    top:20px;
}

/* HERO */

.hero{

    position:relative;

    width:100%;
    height:100vh;

    display:flex;
    align-items:center;

    padding:0 10%;
}

.hero-video{

    position:absolute;

    width:100%;
    height:100%;

    top:0;
    left:0;

    object-fit:cover;

    z-index:-3;
}

.hero-overlay{

    position:absolute;

    width:100%;
    height:100%;

    top:0;
    left:0;

    background:
    linear-gradient(
        to right,
        rgba(0,0,0,0.92),
        rgba(0,0,0,0.4),
        rgba(0,0,0,0.85)
    );

    z-index:-2;
}

.hero-content{

    max-width:700px;
}

.hero-tag{

    display:inline-block;

    padding:10px 20px;

    border:
    1px solid rgba(255,255,255,0.1);

    background:
    rgba(255,255,255,0.04);

    letter-spacing:2px;

    margin-bottom:30px;
}

.hero h1{

    font-size:7rem;

    line-height:0.9;

    margin-bottom:25px;
}

.hero h1 span{

    color:#f5d36b;
}

.hero p{

    line-height:2;
    color:#d0d0d0;

    font-size:18px;

    max-width:600px;
}

.hero-buttons{

    display:flex;
    gap:20px;

    margin-top:40px;
}

/* BUTTONS */

.btn{

    padding:16px 30px;

    border:none;

    cursor:pointer;

    text-decoration:none;

    transition:0.3s;

    letter-spacing:1px;
}

.primary{

    background:#f5d36b;
    color:black;
}

.secondary{

    background:
    rgba(255,255,255,0.08);

    color:white;

    border:
    1px solid rgba(255,255,255,0.1);
}

.btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 0 20px rgba(255,255,255,0.15);
}

/* MENU SECTION */

.menu-section{

    padding:120px 10%;
}

.menu-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;
}

.menu-card{

    text-decoration:none;

    color:white;

    padding:60px 40px;

    background:
    rgba(255,255,255,0.04);

    border:
    1px solid rgba(255,255,255,0.08);

    transition:0.4s;

    backdrop-filter:blur(10px);
}

.menu-card:hover{

    transform:translateY(-10px);

    border-color:#ff0000;

    box-shadow:
    0 0 30px rgba(0,255,255,0.1);
}

/* GALLERY */

.gallery-section{

    padding:100px 10%;
}

.gallery-title{

    margin-bottom:50px;
}

.gallery-title h2{

    font-size:3rem;
}

.gallery-container{

    display:grid;

    grid-template-columns:
    1fr 2fr 1fr;

    gap:20px;
}

.gallery-container img{

    width:100%;
    height:100%;

    object-fit:cover;

    border:
    1px solid rgba(255,255,255,0.08);

    transition:0.4s;
}

.gallery-container img:hover{

    transform:scale(1.03);
}

/* FOOTER */

footer{

    padding:50px;

    text-align:center;

    color:#888;
}

/* RESPONSIVE */

@media(max-width:900px){

    .hero h1{

        font-size:4rem;
    }

    .hero-buttons{

        flex-direction:column;
        align-items:flex-start;
    }

    .gallery-container{

        grid-template-columns:1fr;
    }

    .menu-toggle{
        display:block;
    }

    nav{

        position:fixed;

        top:0;
        right:-100%;

        width:300px;
        height:100vh;

        background:rgba(0,0,0,0.96);

        flex-direction:column;

        padding-top:140px;
        padding-left:40px;

        transition:0.5s;
    }

    nav.active{

        right:0;
    }

}

/* ========================= */
/* CAROUSEL */
/* ========================= */

.carousel-container{

    position:relative;

    width:100%;

    overflow:hidden;

    margin-top:50px;
}

.carousel-track{

    display:flex;

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

    gap:30px;

    transition:0.5s ease;
}

.carousel-item{

    width:25%;

    opacity:0.45;

    transform:scale(0.8);

    transition:0.5s;
}

.carousel-item img{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:12px;

    border:
    1px solid rgba(255,255,255,0.08);
}

/* CENTRO */

.carousel-item.active{

    width:50%;

    opacity:1;

    transform:scale(1);
}

.carousel-item.active img{

    box-shadow:
    0 0 40px rgba(0,255,255,0.15);
}

/* BOTONES */

.carousel-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:10;

    background:
    rgba(0,0,0,0.55);

    border:none;

    color:white;

    width:55px;
    height:55px;

    cursor:pointer;

    font-size:24px;

    backdrop-filter:blur(10px);

    transition:0.3s;
}

.carousel-btn:hover{

    background:#00ffff;
    color:black;
}

.left{

    left:10px;
}

.right{

    right:10px;
}

/* MOBILE */

@media(max-width:900px){

    .carousel-item{

        display:none;
    }

    .carousel-item.active{

        display:block;

        width:100%;
    }

}
/* ========================= */
/* COVERFLOW */
/* ========================= */

.coverflow-container{

    position:relative;

    width:100%;

    height:650px;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;
}

.coverflow{

    position:relative;

    width:100%;
    height:100%;

    perspective:1400px;
}

/* ITEMS */

.cover-item{

    will-change:
    transform,
    opacity;

    position:absolute;

    top:50%;
    left:50%;

    transform-style:preserve-3d;

    transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;

    opacity:0;

    pointer-events:none;

    backface-visibility:hidden;

}

.cover-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:16px;

    border:
    1px solid rgba(255,255,255,0.08);

    box-shadow:
    0 0 40px rgba(0,0,0,0.45);
}

/* CENTRO */

.cover-item.center{

    width:700px;
    height:420px;

    transform:
    translate(-50%, -50%)
    scale(1);

    opacity:1;

    z-index:5;
}

/* IZQUIERDA */

.cover-item.left{

    width:350px;
    height:220px;

    transform:
    translate(-170%, -50%)
    rotateY(35deg)
    scale(0.85);

    opacity:0.55;

    z-index:3;
}

/* DERECHA */

.cover-item.right{

    width:350px;
    height:220px;

    transform:
    translate(70%, -50%)
    rotateY(-35deg)
    scale(0.85);

    opacity:0.55;

    z-index:3;
}

/* BOTONES */

.cover-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:20;

    width:60px;
    height:60px;

    border:none;

    cursor:pointer;

    font-size:28px;

    color:white;

    background:
    rgba(0,0,0,0.45);

    backdrop-filter:blur(10px);

    transition:0.3s;
}

.cover-btn:hover{

    background:#00ffff;

    color:black;
}

.left-btn{

    left:20px;
}

.right-btn{

    right:20px;
}

/* MOBILE */

@media(max-width:900px){

    .cover-item.left,
    .cover-item.right{

        display:none;
    }

    .cover-item.center{

        width:90%;
        height:300px;
    }

}