/* Fondo amarillo para TODO el carrusel y el separador */
.menu-carrusel-container {
    background-color: #FEAA00; /* Fondo amarillo */
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}



/* Contenedor del menú carrusel */
.menu-carrusel {
    display: flex;
    gap: 20px; /* Espaciado entre imágenes */
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    width: 100%;
    scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */
    background-color: #FEAA00; /* Fondo amarillo */
}

/* Ocultar la barra de desplazamiento en Chrome y Edge */
.menu-carrusel::-webkit-scrollbar {
    display: none;
}

/* Contenedor de cada imagen */
.menu-item {
    background-color: #FEAA00; /* Fondo amarillo */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos horizontalmente */
}

/* Contenedor de la imagen */
.image-container {
    width: 100px; /* Ancho fijo */
    height: 100px; /* Alto fijo */
    background-color: #FEAA00; /* Fondo amarillo */
    display: flex;
    align-items: center; /* Centra la imagen verticalmente */
    justify-content: center; /* Centra la imagen horizontalmente */
    position: relative;
    margin-bottom: 5px; /* Espacio entre la imagen y el texto */
}

.image-container img {
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    max-height: 100%; /* Asegura que la imagen no exceda la altura del contenedor */
    object-fit: cover; /* Cubre el contenedor sin deformar la imagen */
    transition: transform 0.3s ease-in-out;
}

.image-container img:hover {
    transform: scale(1.1);
}

/* Estilo de los textos debajo de las imágenes */
.menu-item p {
    background-color: #FEAA00; /* Fondo amarillo */
    color: #A7006D; /* Texto fucsia oscuro */
    font-size: 16px; /* Asegúrate de que el tamaño de fuente sea legible */
    font-weight: bold;
    text-align: center; /* Centra el texto */
    padding: 5px; /* Ajustar el padding */
    margin: 0;
    border-radius: 0 0 10px 10px; /* Bordes redondeados solo abajo */
}


/* Separador rojo de ancho completo */
.separador {
    width: 100%;
    height: 20px; /* Grosor del separador */
    background-color: #A7006D; /* Color rojo */
    margin: 0;
}
/* Estilos generales del header */
.header {
  width: 100%;
  display: flex;
  flex-direction: column;
  
}
.top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
  background-color: #FF8000; /* Fondo naranja */
}

.header-image img {
  max-width: 100%;
  object-fit: contain; /* Asegura que la imagen se ajuste bien */
}

.header-button a {
  background-color: #D3014D; /* Fondo Purpura */
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  display: block;
  text-align: center;
}





/* Menu Styles */
.menu-container {
  background-color: #A7006D; /* Violeta */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.menu-container ul {
  display: flex;
  padding: 0;
  margin: 0;
  justify-content: center;
  flex-wrap: wrap; /* Menú en dos filas en pantallas más pequeñas */
  width: 100%;
}

.menu-container li {
  margin: 5px 15px; /* Espaciado entre los elementos */
  line-height: 1.8;
}

.menu-container a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  display: block;
}

.menu-container a:hover {
  text-decoration: underline;
}
 /* Estilo del botón de hamburguesa (solo visible en pantallas pequeñas) */
.menu-toggle {
  display: none; /* Oculto por defecto */
}

/* Estilo del menú para pantallas grandes */
.large-menu {
  display: block; /* Menú visible en pantallas grandes */
}



/* Media query para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  /* Ajustar el tamaño del menú */
  .menu-container ul {
    padding: 0;
    margin: 0;
    max-height: 150px; /* Limitar la altura máxima a 150px */
    overflow-y: auto; /* Agregar scroll si el contenido sobrepasa los 150px */
  }

  .menu-container ul li {
    font-size: 14px; /* Reducir el tamaño del texto */
    padding: 8px 10px; /* Reducir el padding de cada elemento */
    margin: 0;
  }

  .menu-container ul li a {
    font-size: 14px; /* Reducir el tamaño del texto en los enlaces */
    padding: 8px 10px; /* Reducir padding de los enlaces */
  }

  .menu-container ul li a:hover {
    background-color: #A7006D; /* El mismo color de hover */
  }
}



/* Estilos generales del footer */
.footer-container {
  background-color: #A7006D; /* Fondo violeta para el contenedor */
  padding: 20px 0; /* Espaciado superior e inferior */
}

/* Estilos del menú dentro del contenedor violeta */
.footer-menu ul {
  display: flex;
  flex-direction: row; /* Alineación horizontal */
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 20px; /* Espaciado entre los elementos del menú */
}

.footer-menu li {
  margin: 0; /* Eliminamos márgenes extras */
}

/* Estilo de los enlaces en el menú */
.footer-menu a {
  color: white; /* Color blanco para los enlaces */
  text-decoration: none; /* Sin subrayado en los enlaces */
  font-size: 22px;
  line-height: 1.5;
}
/* Fila inferior con fondo naranja */
.footer-bottom {
  display: flex;
  justify-content: space-between; /* Espacio entre los elementos */
  align-items: center; /* Centra los elementos verticalmente */
  padding: 20px;
  background-color: #ff8000; /* Fondo naranja (#ff8000) */
}

/* Logo en el pie de página (reducido a la mitad) */
.footer-logo img {
  max-width: 75px; /* Logo reducido a la mitad del tamaño original */
  height: auto;
}

/* Derechos reservados al centro */
.footer-rights {
  text-align: center;
  color: white; /* Texto blanco */
  font-size: 14px; /* Tamaño de texto más pequeño */
}

/* Redes sociales a la derecha */
.footer-socials {
  display: flex;
  justify-content: flex-end; /* Alinea las redes sociales a la derecha */
  gap: 10px; /* Espaciado entre los iconos */
}

.footer-socials a img {
  width: 25px; /* Tamaño de los iconos de redes sociales */
  height: 25px;
}

/* Estilo de la barra divisoria entre los enlaces */
.footer-menu .divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background-color: white;
  margin: 0 10px; /* Separación entre los enlaces */
}

/* Estilos generales del contenedor violeta */
.whatsapp-container {
  width: 100%; /* Ocupa todo el ancho de la página */
  background-color: violet; /* Fondo violeta */
  padding: 20px 0; /* Espaciado dentro del contenedor */
  display: flex;
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
}

/* Menú horizontal dentro del contenedor violeta */
.footer-menu ul {
  display: flex;
  flex-direction: row; /* Alineación horizontal */
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
  gap: 10px; /* Espaciado entre los elementos */
}

/* Estilo del botón de WhatsApp */
.whatsapp-button {
  width: 100%; /* Ocupa todo el ancho */
  background-color: #25D366;  /* Fondo verde para el botón de WhatsApp */
  color: white; /* Texto blanco en el botón */
  padding: 15px 0; /* Ajustamos el padding para que ocupe todo el ancho de forma uniforme */
  text-decoration: none; /* Eliminamos subrayado */
  border-radius: 5px; /* Bordes redondeados */
  text-align: center; /* Centra el texto dentro del botón */
  font-size: 18px; /* Tamaño del texto */
  display: inline-block; /* Asegura que sea un bloque que ocupe todo el ancho */
}

/* Media Queries para pantallas pequeñas */
@media (max-width: 768px) {
  .footer-menu ul {
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    justify-content: space-evenly; /* Distribuye los elementos de forma equitativa */
  }

  .footer-menu a {
    font-size: 12px; /* Reducir tamaño de texto en pantallas pequeñas */
  }
}