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

body {
font-family: Arial, sans-serif;
color: #3d2217;
background-color: #fffaf5;
}

header {
background: white;
border-bottom: 2px solid #8b5e3c;
position: sticky;
top: 0;
z-index: 10;
}

nav {
max-width: 1100px;
margin: 0 auto;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}

nav .logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}

nav .logo img {
width: 40px;
}

nav .logo span {
font-size: 20px;
font-weight: bold;
color: #6b4226;
}

nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 0;
padding: 0;
}

nav ul li a {
display: inline-block;
padding: 8px 12px;
border-radius: 20px;
font-weight: bold;
color: #6b4226;
text-decoration: none;
transition: background-color .2s ease, color .2s ease;
}

nav ul li a:hover {
background: #f7f2ed;
color: #8b5e3c;
}

nav ul li a.active {
background: #6b4226;
color: white;
}

.menu-hamburguesa {
display: none;
background: none;
border: none;
color: #800000;
font-size: 32px;
cursor: pointer;
line-height: 1;
z-index: 1001;
}

.link-ayuda {
position: fixed;
bottom: 20px;
right: 20px;
width: 55px;
height: 55px;
border-radius: 50%;
background-color: #f28c28;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: bold;
text-decoration: none;
border: 2px solid #723e2a;
cursor: pointer;
z-index: 1000;
transition: 0.3s ease;
}

.link-ayuda:hover {
transform: scale(1.1);
background-color: #800000;
}

.portada {
width: 100%;
min-height: 420px;
background-image: url("IMG/banner.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
align-items: center;
}

.texto {
margin-left: clamp(30px, 8vw, 120px);
max-width: 550px;
}

#h5_1 {
color: #ff8800;
font-size: clamp(20px, 3vw, 28px);
margin-bottom: 5px;
}

#h5_2 {
color: white;
font-size: clamp(20px, 3vw, 28px);
margin-bottom: 10px;
}

#banner {
color: white;
font-size: clamp(32px, 5vw, 52px);
line-height: 1.1;
margin-bottom: 15px;
}

#text_encabezado {
color: white;
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
}

.ver-menu {
display: inline-block;
padding: 10px 24px;
border-radius: 25px;
background-color: #800000;
color: white;
text-decoration: none;
transition: 0.3s ease;
}

.ver-menu:hover {
background-color: #5e0000;
transform: translateY(-2px);
}

.contenedor {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.encabezado-destacados {
text-align: center;
padding: 60px 20px 30px;
}

.h3 {
color: #f28c28;
font-size: 18px;
margin-bottom: 8px;
}

.encabezado-destacados h1 {
color: #3d2217;
font-size: clamp(28px, 4vw, 40px);
margin-bottom: 12px;
}

.encabezado-destacados p {
color: #723e2a;
font-size: 16px;
}

#desayuno {
color: #800000;
margin-top: 30px;
}

.elementos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
width: 100%;
margin-bottom: 30px;
}

.caja {
width: 100%;
min-height: 350px;
background-color: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(128, 128, 128, 0.25);
transition: 0.3s ease;
}

.caja:hover {
transform: translateY(-7px);
box-shadow: 0 8px 20px rgba(128, 128, 128, 0.35);
}

.flor {
width: 100%;
}

.flor img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}

.informacion {
min-height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
}

.Producto-textoH3 {
color: #ea7145;
font-size: 20px;
margin-bottom: 10px;
}

.Producto-Parrafo {
color: #723e2a;
font-size: 14px;
line-height: 1.5;
}

#derechos {
    margin-top: 10px;
}

footer {
text-align: center;
background-color: #542d1d;
color: white;
padding: 40px 20px;
margin-top: 60px;
}

.footer-menu {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 25px;
}

.Lista-footer {
transition: 0.3s ease;
}

.opcion-menu {
text-decoration: none;
color: white;
padding: 5px 10px;
}

.Lista-footer:hover {
transform: scale(1.1);
}

.Lista-footer:hover .opcion-menu {
color: #ffb347;
}

.horario {
font-size: 22px;
margin-bottom: 15px;
}

.fecha {
color: #ffb347;
margin-top: 10px;
}

.hora {
color: #eadbd0;
margin-top: 5px;
}

@media (max-width: 900px) {

header {
padding: 10px 20px;
}

nav ul {
gap: 0;
}

nav ul li a {
padding: 8px 10px;
font-size: 14px;

}

.portada {
min-height: 400px;
}

.texto {
margin-left: 50px;
}

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

@media (max-width: 650px) {

header {
padding: 0px 20px;
}

nav {
position: relative;
}

.menu-hamburguesa {
display: block;
position: absolute;
right: 20px;
top: 20px;
}

nav ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin-top: 10px;
padding: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
border-top: 1px solid #8b5e3c;
transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}

nav ul.activo {
max-height: 500px;
padding: 5px 0;
opacity: 1;
}

nav ul li {
width: 100%;
}

nav ul li a {
width: 100%;
display: block;
text-align: center;
padding: 13px 10px;
border-radius: 0;
border-bottom: 1px solid rgba(114, 62, 42, 0.25);
cursor: pointer;
transition: none;
}

nav ul li:last-child a {
border-bottom: none;
}

.portada {
min-height: 480px;
background-position: center;
}

.texto {
width: 100%;
margin: 0;
padding: 30px;
text-align: center;
}

#banner {
font-size: 34px;
}

#text_encabezado {
font-size: 15px;
}

.encabezado-destacados {
padding: 45px 10px 25px;
}

.encabezado-destacados h1 {
font-size: 30px;
}

.encabezado-destacados p {
line-height: 1.5;
}

.elementos {
grid-template-columns: 1fr;
max-width: 350px;
margin-left: auto;
margin-right: auto;
}

.caja {
min-height: 350px;
}

.link-ayuda {
width: 50px;
height: 50px;
bottom: 15px;
right: 15px;
font-size: 24px;
}

footer {
padding: 35px 15px;
}

.footer-menu {
flex-direction: column;
gap: 12px;
}
}

@media (max-width: 400px) {

nav ul li a {
font-size: 12px;
padding: 12px 7px;
}

#banner {
font-size: 29px;
}

#h5_1,
#h5_2 {
font-size: 20px;
}

.portada {
min-height: 450px;
}
}