/* NO volver a tocar este codigo */

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

img{
display: block;
max-width: 100%;
height: 4rem;
}

body{
font-family: "Times New Roman";
line-height: 1.4;
background-color: aquamarine;
color: #000;
}


.header img{
width: 100%;
height: 550px;
object-fit: cover;
}

.nav{
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
padding: 14px 10px;
background: #0e6b57;
flex-wrap: wrap;
border: 2px solid #000;
}

.nav a{
text-decoration: none;
color: #fff;
font-weight: 700;
text-transform: uppercase;
padding: 10px 14px;
border-radius: 10px;
background: rgba(255,255,255,0.12);
transition: background 160ms ease, transform 160ms ease;
}

.nav a:hover{
background: rgba(255,255,255,0.22);
transform: translateY(-1px);
}

/* De aqui para arriba parte principal */


main{
width: min(1100px, 92%);
margin: 10px auto 40px;
}

.carrusel{   
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 14px;
margin-top: 14px;
}

.carrusel img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; 
opacity: 0;
animation: carruselFade 12s infinite;
}

.carrusel img:nth-child(1){ animation-delay: 0s; }
.carrusel img:nth-child(2){ animation-delay: 4s; }
.carrusel img:nth-child(3){ animation-delay: 8s; }

@keyframes carruselFade{
0%   { opacity: 0; }
6%   { opacity: 1; }
33%  { opacity: 1; }
39%  { opacity: 0; }
100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
.carrusel img{
animation: none;
opacity: 1;
position: static;
height: auto;
}
.carrusel img:not(:first-child)

{
display: none;
}
}

.destacados,
.bebidas{
margin-top: 22px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
align-items: stretch;
}

.destacados{
margin-top: 22px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
align-items: stretch;
}

.bebidas{
margin-top: 22px;
display: grid;
grid-template-columns: repeat(4, 1fr); 
gap: 14px;
align-items: stretch;
}

.card{
position: relative;
display: block;
height: 260px;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
}

.card img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 220ms ease;
}

.card::before{
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
opacity: 0;
transition: opacity 200ms ease;
}

.btn-info{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 10px 14px;
border-radius: 10px;
font-weight: 700;
text-transform: uppercase;
background: rgba(255,255,255,0.92);
color: #111;
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
}

.card:hover::before{ opacity: 1; }
.card:hover .btn-info{ opacity: 1; }
.card:hover img{ transform: scale(1.03); }

@media (max-width: 900px){
.header img{ height: 380px; }

.destacados,
.bebidas{
grid-template-columns: repeat(2, 1fr);
}

.card{
height: 260px;
}
}

@media (max-width: 520px){
.header img{ height: 300px; }

.destacados,
.bebidas{
grid-template-columns: 1fr;
}

.carrusel{
aspect-ratio: 3 / 2;
}
}

/* De aqui para abajo footer */

.footer{
margin-top: 40px;
padding: 18px 10px;
text-align: center;
background: #111;
color: #fff;
}

/* Cero sufrimiento  */