/* Estilo general */
body{
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
    background-color:#fff5f5;
    text-align:center;
}

/* Encabezado */
header{
    background-color:#c62828;
    color:white;
    padding:25px;
}
/* Encabezado */
header{
    background-color:#c62828;
    color:white;
    padding:25px;
}

/* Barra del menú */
nav{
    background-color:#e53935;
    width:100%;
    padding:20px 0;
    text-align:center;
}

/* Lista del menú (VERTICAL Y CENTRADO) */
nav ul{
    list-style:none;
    padding:0;
    margin:0 auto;
    width:150px;
}

/* Opciones */
nav ul li{
    margin:12px 0;
}

/* Links */
nav ul li a{
    display:block;
    padding:10px;
    color:white;
    text-decoration:none;
    font-weight:bold;
    border-radius:8px;
}

/* Efecto mouse */
nav ul li a:hover{
    background-color:#b71c1c;
}

/* Contenedor del menú de productos */
.cmenu{
    padding:30px;
    margin:30px auto;
    width:90%;
    background:white;
    border-radius:10px;
    box-shadow:0px 3px 10px rgba(0,0,0,0.1);
}

/* Títulos */
h1,h2,h3{
    color:#c62828;
}

/* Tabla de productos */
table{
    margin:30px auto;
    border-collapse:separate;
    border-spacing:35px;
}

/* Imágenes de productos (MAS GRANDES) */
table img{
    width:260px;
    height:200px;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0px 4px 12px rgba(0,0,0,0.2);
    cursor:pointer;
}

/* Efecto al pasar mouse */
table img:hover{
    transform:scale(1.07);
    transition:0.3s;
}

/* Texto de productos */
td{
    font-size:16px;
    font-weight:bold;
}

/* Texto descuentos */
p{
    font-size:16px;
    margin-top:20px;
}

/* Botones */
button{
    margin:15px;
    padding:12px 20px;
    background-color:#c62828;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

/* Links dentro de botones */
button a{
    color:white;
    text-decoration:none;
    font-weight:bold;
}

/* Hover botones */
button:hover{
    background-color:#b71c1c;
}
.contenedor{
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}

.tarjeta{
width: 250px;
border: 1px solid #ccc;
border-radius: 15px;
padding: 10px;
text-align: center;
background-color: #fff5f5;
text-align:center;
}

.tarjeta img{
width: 100%;
border-radius: 10px;
}
.tarjeta img{
width: 200px;
height: 250px;
object-fit: cover;
text-align:center;
}
/* Efecto mouse */
nav ul li a:hover{
    background-color:#b71c1c;
}

.tarjeta{
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 10px;
    text-align: center;
    background-color: #fff5f5;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.tarjeta img{
    width: 200px;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
}