*{
box-sizing:border-box;
}


body{

margin:0;

background:#050505;

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

color:white;

}



/* HEADER */

header{

text-align:center;

padding:30px;

border-bottom:1px solid #ffd600;

}



.logo{

width:90px;

border-radius:10px;

}



header h1{

color:#ffd600;

font-size:38px;

margin:10px;

}



header p{

margin:0;

color:#ddd;

}



.menu{

margin-top:25px;

}



.menu a{

color:white;

text-decoration:none;

margin:0 15px;

font-weight:bold;

}



.menu a:hover{

color:#ffd600;

}






/* HERO */


.hero{

width:90%;

margin:50px auto;

padding:60px 20px;

background:#151515;

border:1px solid #333;

border-radius:25px;

text-align:center;

}



.hero h2{

color:#ffd600;

font-size:42px;

}



.hero p{

font-size:18px;

color:#ddd;

}



.boton{

display:inline-block;

background:#ffd600;

color:#000;

padding:15px 35px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

margin-top:20px;

}







/* ESTADISTICAS */


.info-home{

width:90%;

margin:30px auto;

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}



.info-box{

background:#151515;

border:1px solid #333;

border-radius:20px;

padding:25px;

width:220px;

text-align:center;

}



.info-box strong{

display:block;

font-size:35px;

color:#ffd600;

}






/* BUSCADOR */


.herramientas{

width:90%;

margin:auto;

text-align:center;

}



#busqueda{

width:400px;

max-width:90%;

padding:15px;

border-radius:30px;

background:#222;

border:1px solid #ffd600;

color:white;

}



.filtros{

margin:25px;

}



button{

background:#111;

color:#ffd600;

border:1px solid #ffd600;

padding:12px 25px;

border-radius:25px;

cursor:pointer;

font-weight:bold;

margin:5px;

}



button:hover{

background:#ffd600;

color:black;

}






/* DESTACADAS */


.destacadas{

width:90%;

margin:50px auto;

background:#151515;

padding:30px;

border-radius:20px;

border:1px solid #333;

}



.destacadas h2{

color:#ffd600;

text-align:center;

}



#destacadas{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}



.destacada{

background:#222;

padding:20px;

border-radius:20px;

text-align:center;

}



.destacada img{

width:150px;

height:220px;

object-fit:contain;

}



.destacada h3{

color:#ffd600;

}






/* CATALOGO */


.catalogo{

width:90%;

margin:40px auto;

background:#151515;

padding:25px;

border-radius:20px;

}



.catalogo h2{

color:#ffd600;

}





#resultados{

width:90%;

margin:auto;

display:grid;

grid-template-columns:repeat(5,1fr);

gap:25px;

}





.carta{

background:#151515;

border:1px solid #333;

border-radius:20px;

padding:20px;

text-align:center;

}



.carta img{

width:100%;

height:250px;

object-fit:contain;

}



.carta h3{

color:#ffd600;

}



.carta h2{

color:#00e676;

}





.estado{

display:inline-block;

background:#00c853;

padding:8px 20px;

border-radius:20px;

font-weight:bold;

}





.detalle{

color:#ffd600;

text-decoration:none;

font-weight:bold;

}





.comprar{

display:inline-block;

background:#00c853;

color:white;

padding:10px 20px;

border-radius:20px;

text-decoration:none;

margin-top:10px;

}







/* FOOTER */


.footer{

margin-top:80px;

background:#151515;

border-top:2px solid #ffd600;

padding:40px;

text-align:center;

}



.footer h2{

color:#ffd600;

}



.footer-links{

margin:25px;

}



.footer-links a{

color:white;

text-decoration:none;

margin:10px;

}



.copy{

color:#777;

}







/* MOVIL */


@media(max-width:1000px){


#resultados{

grid-template-columns:repeat(2,1fr);

}


#destacadas{

grid-template-columns:repeat(2,1fr);

}


}



@media(max-width:600px){


#resultados,
#destacadas{

grid-template-columns:1fr;

}


.menu a{

display:block;

margin:15px;

}



.hero h2{

font-size:30px;

}


}