/* =========================================================
   BASE
========================================================= */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#000;
    color:#fff;
    overflow-x:hidden;
}

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

.hero-container{
    position:relative;
    width:100%;
    height:76vh;
    min-height:610px;
    overflow:hidden;
    background:#000;
    margin-top:0;
}

.slide{
    position:absolute;
    inset:0;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    background-color:#000;
    opacity:0;
    transition:opacity 1s ease-in-out;
}

.slide.active{
    opacity:1;
}

.slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.18)),
        radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.28) 80%);
    pointer-events:none;
}

/* =========================================================
   ELEMENTOS OCULTOS, NO ELIMINADOS
========================================================= */

.hidden-hero-item{
    display:none !important;
}

/* =========================================================
   AFICHE IZQUIERDO
========================================================= */

.left-hero-stack{
    position:absolute;
    top:52px;
    left:35px;
    width:300px;
    z-index:20;
    pointer-events:auto;
}

.metal-fest-img{
    width:100%;
    height:auto;
    display:block;
    filter:drop-shadow(0 0 18px #000);
    transition:.25s;
}

.metal-fest-img:hover{
    transform:scale(1.03);
}

/* =========================================================
   DONACION EN HERO
========================================================= */

.center-donation-stack{
    position:absolute;
    top:70px;
    left:35px;
    transform:none;
    width:650px;
    max-width:50vw;
    z-index:30;
    pointer-events:auto;
}

.donate-image-btn{
    width:100%;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    cursor:pointer;
    display:block;
}

.donate-image-btn img{
    width:100%;
    height:auto;
    display:block;
    filter:drop-shadow(0 0 18px #900);
    transition:transform .25s ease, filter .25s ease;
}

.donate-image-btn:hover img{
    transform:scale(1.04);
    filter:drop-shadow(0 0 24px #f00);
}

/* =========================================================
   AFICHE DERECHO
========================================================= */

.event-banner{
    position:absolute;
    right:25px;
    top:50%;
    transform:translateY(-50%);
    width:250px;
    z-index:20;
    text-decoration:none;
    transition:.25s;
}

.event-banner img{
    width:100%;
    display:block;
    border-radius:12px;
    box-shadow:0 0 25px #000a;
}

.event-banner:hover{
    transform:translateY(-50%) scale(1.04);
    filter:brightness(1.15);
}

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

.arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:44px;
    color:#fff;
    cursor:pointer;
    padding:10px;
    z-index:50;
    transition:.25s;
    text-shadow:0 0 10px #fff;
    user-select:none;
}

.arrow:hover{
    transform:translateY(-50%) scale(1.25);
}

.arrow-left{
    left:18px;
}

.arrow-right{
    right:300px;
}

/* =========================================================
   REDES SOCIALES
========================================================= */

.social-bar{
    position:fixed;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:25px;
    z-index:9999;
    background:rgba(0,0,0,.28);
    padding:8px 14px;
    border-radius:18px;
    backdrop-filter:blur(3px);
}

.social-bar a{
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s;
}

.social-bar a:hover{
    transform:scale(1.15);
}

.social-bar img{
    width:48px;
    height:48px;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

/* =========================================================
   FOOTER
========================================================= */

footer{
    width:100%;
    text-align:center;
    padding:24px 0 90px;
    border-top:1px solid #222;
    color:#aaa;
    font-size:14px;
    background:#050505;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .hero-container{
        min-height:720px;
    }

    .left-hero-stack{
        top:35px;
        left:15px;
        width:155px;
    }

    .center-donation-stack{
        top:235px;
        left:15px;
        width:270px;
        max-width:70vw;
    }

    .event-banner{
        width:145px;
        right:12px;
        top:250px;
    }

    .arrow-right{
        right:15px;
    }

    .social-bar{
        bottom:18px;
        gap:16px;
    }

    .social-bar img{
        width:38px;
        height:38px;
    }
}

@media(max-width:600px){

    .hero-container{
        height:82vh;
        min-height:650px;
    }

    .left-hero-stack{
        width:125px;
        top:30px;
        left:10px;
    }

    .event-banner{
        width:120px;
        top:230px;
    }

    .center-donation-stack{
        top:310px;
        left:10px;
        width:230px;
    }
}