/* RESET */
*{
   /*esto evita que cada navegador tenga un estilo por aparte*/
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* FONDO GENERAL */
body{
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, red, orange, yellow);
    min-height: 100vh;
    color: white;
}

/* HEADER parte superior*/
header{
    background: #222;
    text-align:center;
    padding:20px;
}

header h1{
   /*separa el titulo de los botones*/
    margin-bottom:10px;
}

/* BOTONES NAV */
nav button{
    margin:5px;
    padding:10px 15px;
    border:none;
    border-radius:8px;
    background: orange;
    color:white;
    cursor:pointer; /*sobre salta al pasar el cursor*/
    transition:0.3s;
}

nav button:hover{
    /*al pasar el cursor por los botones de arriba se pone rojo*/
    background: red;
}

/* BANNER (ARRIBA SOLO) */
.banner{
    text-align:center;
    padding:40px;
    background: rgba(0,0,0,0.3);
}

/* MENÚ */
.menu{
    display:flex;
    justify-content:center;
    gap:30px;
    padding:40px;
    flex-wrap:wrap;
}

/* TÍTULO DEL MENÚ */
.menu h2{
    width:100%;
    text-align:center;
    margin-bottom:20px;
}

/* TARJETAS */
.card{
    background:white;
    color:black;
    width:230px;
    padding:20px;
    border-radius:15px;
    text-align:center;

    /* EFECTO ELEVADO */
    box-shadow:0 8px 20px rgba(0,0,0,0.3);

    /* ANIMACIÓN */
    transition:0.3s;
}

.card:hover{
    /*efecto al pasar el cursor*/
    transform:translateY(-10px);
    box-shadow:0 12px 25px rgba(0,0,0,0.5);
}

.card h3{
    margin-bottom:10px;
}

.card p{
    font-size:14px;
    margin-bottom:10px;
}

.card span{
     /*El precio queda en verde y destacado*/
    font-weight:bold;
    color:green;
}

/* UBICACIÓN */
.ubicacion{
    text-align:center;
    padding:30px;
}

.ubicacion button{
    margin-top:10px;
    padding:10px 15px;
    border:none;
    border-radius:8px;
    background:black;
    color:white;
    cursor:pointer;
}

/* FOOTER */
footer{
    text-align:center;
    padding:15px;
    background:black;
}