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

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


body{

    background:#050505;

    color:#ffffff;

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

}



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


.hero-bandas{

    position:relative;

    background:#050505;

    padding:110px 20px 80px;

    text-align:center;

    border-bottom:1px solid #222;

}



.overlay{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

}



.overlay h1{

    font-size:62px;

    font-weight:bold;

    text-transform:uppercase;

    letter-spacing:3px;

    color:white;

    margin-bottom:20px;

    text-shadow:
    0 0 10px rgba(255,0,0,.3),
    0 0 30px rgba(255,0,0,.4);

}



.overlay p{

    font-size:22px;

    color:#bbbbbb;

    line-height:1.8;

    max-width:700px;

    margin:auto;

}



/*=================================
BUSCADOR
=================================*/


.busqueda{

    position:relative;

    z-index:5;

    width:100%;

    padding:40px 20px;

    background:#050505;

    display:flex;

    justify-content:center;

}



.busqueda input{

    width:90%;

    max-width:700px;

    height:55px;

    padding:15px 25px;

    background:#111;

    border:2px solid #333;

    border-radius:40px;

    color:white;

    font-size:18px;

    transition:.3s;

}



.busqueda input::placeholder{

    color:#888;

}



.busqueda input:focus{

    outline:none;

    border-color:#990000;

    box-shadow:
    0 0 15px rgba(255,0,0,.4),
    0 0 35px rgba(255,0,0,.2);

}



/*=================================
CATALOGO
=================================*/


.catalogo{

    width:92%;

    max-width:1500px;

    margin:40px auto 80px;

    display:grid;

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

    gap:30px;

}



/*=================================
TARJETAS BANDAS
=================================*/


.banda-card{

    background:#111;

    border:1px solid #222;

    border-radius:14px;

    overflow:hidden;

    transition:.4s;

    box-shadow:
    0 0 20px rgba(0,0,0,.5);

}



.banda-card:hover{

    transform:translateY(-10px);

    border-color:#990000;

    box-shadow:
    0 0 35px rgba(255,0,0,.35);

}



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


.banda-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s;

}



.banda-card:hover img{

    transform:scale(1.08);

}



/*=================================
CONTENIDO
=================================*/


.contenido{

    padding:25px;

}



.contenido h2{

    font-size:30px;

    margin-bottom:15px;

}



.contenido p{

    color:#bbb;

    margin-bottom:8px;

}



/*=================================
BOTON PERFIL
=================================*/


.btn-perfil{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

    padding:13px 25px;

    background:#990000;

    color:white;

    text-decoration:none;

    border-radius:8px;

    font-weight:bold;

    transition:.3s;

}



.btn-perfil:hover{

    background:#d00000;

    transform:scale(1.05);

    box-shadow:
    0 0 20px rgba(255,0,0,.5);

}



/*=================================
ANIMACION
=================================*/


.banda-card{

    animation:entrada .7s ease;

}



@keyframes entrada{

    from{

        opacity:0;

        transform:translateY(40px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



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


@media(max-width:900px){


.overlay h1{

    font-size:45px;

}


.overlay p{

    font-size:18px;

}


}



@media(max-width:600px){


.hero-bandas{

    position:relative;

    background:#050505;

    padding:110px 20px 80px;

    text-align:center;

    border-bottom:1px solid #222;

    overflow:hidden;

}
.busqueda{

    position:relative;

    z-index:10;

    clear:both;

}

.catalogo{

    grid-template-columns:1fr;

}


}