* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}







.input-container input {
  width: 100%;
  padding: 5px;
  border: none;
  border-radius: 5px;
background: none!important; 
  color: #ffd700;
  font-size: 16px;
}

.button-container {
  width: 100%;
  text-align: center;
}

.button-container button {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background:rgb(0, 0, 0); 
  color: #ffd700; 
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 0 10px #ffd700;
  transition: all 0.3s ease;
}

/* Al pasar el mouse */
.button-container button:hover {
  background-color: #ffd700 !important;
  color: #000000 !important;
}

/* Al hacer clic o mantener enfocado */
.button-container button:active,
.button-container button:focus {
  background-color: #ffd700 !important;
  color: #ffffff !important;
}


body{
  align-items: center;
  justify-content: center;
  min-height: 200vh;
  width: 100%;
}

.container-fluid {
margin-top: 100px; /* Agrega un margen superior para separar el contenido */
width:100%;
 padding-left: 0 !important;
  padding-right: 0 !important;
margin-right:0px!important;
margin-left:0px!important;
}


@media (max-width:500px){
.container-fluid {
margin-top: 250px; /* Agrega un margen superior para separar el contenido */
}
}
@media (max-width:425px){
.container-fluid {
margin-top: 100px; /* Agrega un margen superior para separar el contenido */
}
}
@media (max-width:320px){
.container-fluid {
margin-top: -500px; /* Agrega un margen superior para separar el contenido */
}
}

body {
flex-direction: column; /* Organiza los elementos en columnas */
background-color:#000000;
padding-right:0%!important;
}


#inputBusqueda {
width: 200px; /* Ancho automático para el input de búsqueda */
}

#titulo1 {
font-size: 20px; /* Restaura el tamaño de fuente original para pantallas más grandes */
}



/* Media query para dispositivos móviles */
@media (max-width: 768px) {
  #top-panel {
      display: absolute; /* Asegura que el panel esté visible en dispositivos pequeños */
      flex-direction: column; /* Organiza los elementos en una columna */
      align-items: center; /* Centra los elementos horizontalmente */
    }

  #top-panel > * {
      margin: 0px; /* Ajusta el margen vertical */
  }

  .stilo {
      width: auto; /* Ajusta el ancho de los botones */
  }

  #top-panel .logo {
      order: -1; /* Cambia el orden de la imagen del logo si es necesario */
  }
}

/* Estilos para dispositivos más pequeños */
@media only screen and (max-width: 600px) {
  #top-panel {
      display: flex; /* Asegura que el panel esté visible */
      flex-direction: column; /* Organiza los elementos en una columna */
      
      height: 300px!important; 

  }

  #logo img {
      margin-bottom: 10px;
  }
}

/* Estilos para pantallas más grandes que 600px */
@media only screen and (min-width: 601px) {
  #top-panel {
      display: flex; /* Asegura que el panel esté visible */
      flex-direction: row; /* Cambia la dirección del flujo de los elementos a una fila */
      justify-content: space-between;
      align-items: center; /* Alinea verticalmente los elementos */
      padding: 2px 5px;
      position: fixed;
      top: 0;
      left: 0;
      width: 600px;
      z-index: 1000;
      border: none;
      border-color: #cfcfcf;
  }


  #inputBusqueda {
      width: 200px; /* Ancho automático para el input de búsqueda */
  }

  #titulo1 {
      font-size: 20px; /* Restaura el tamaño de fuente original para pantallas más grandes */
  }
}




.panel-item {
margin-bottom: 15px;
padding: 10px;
border:none;
border-radius: 0%;
background: none!important; 

}



#catalogo{
flex: 1; /* El catálogo ocupará todo el espacio disponible */
margin-top: 0px;
width: 100%;
gap:20px;
background:transparent;
padding-left: 0 !important;
padding-right: 0 !important;
margin-right:0px!important;

}

/* Estilo para las imágenes dentro de panel-item */
.panel-item img {
width: 200px;  /* Ancho de 20 píxeles */
height: 200px; /* Altura de 20 píxeles */
background: transparent!important; 

}




#container {
display: flex;
flex-direction: column; /* Organiza los elementos en columnas */
justify-content:center;
width: 100%;
z-index:1000;
padding-left: 0 !important;
padding-right: 0 !important;
margin-right:0px!important;
background: none!important; 
}
#catalogo .row {
margin-bottom: 10px;
width: 100%;
margin-top:-300px;
padding-left: 0 !important;
padding-right: 0 !important;
z-index:1000;
margin-right:0px!important;
background: none!important; 

}
.bottom-panel {
  background-color: #000; /* Fondo oscuro para destacar los colores */
  text-align: center;     /* Centra el texto horizontalmente */
  padding: 20px;
  color: #ffd700;         /* Dorado brillante */
  margin-right:0px!important;
  border:none!important;
}
#catalogo {
  width: 100%;
    display: flex;
  flex-wrap: wrap;
  gap: 30px; /* Espacio entre tarjetas */
  justify-content: flex-start;
margin-right:0px!important;
  z-index:1000;

}
#container,
.container-fluid,
.container-flex {
  max-width: 100% !important;
  width: 100% !important;
  gap:50px;
margin-right:5px!important;
margin-left: 5px;
}
.container-flex {
display: flex;
flex-direction: column;
flex: 1; /* Ajusta el tamaño del contenedor flex */
background-color:transparent!important;

}

.productoTam {
  flex: 1 1 calc(25% - 20px); /* 4 por fila, menos el gap */
  max-width: calc(25% - 20px);
  min-width: 250px; /* evita que se encojan demasiado */
gap:20px;
}

@media screen and (max-width: 650px) {
  .productoTam {
    flex: 1 1 100% !important;   /* una tarjeta por fila */
    max-width: 100% !important;
  }
}



.panel-content {
  display: flex;
  flex-direction: column; /* Hace torre */
  align-items: center;    /* Centra horizontalmente los elementos */
  justify-content: center;
  background: none!important; 

}

.card-body {
  background-color: #000000!important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 0 15px #FFD700 !important;
  color:rgb(255, 255, 255)  !important;
  gap: 50px;
  border: none!important;

  border-bottom-left-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}



.bottom-panel h1,
.bottom-panel b {
  color: #ffd700;         /* Dorado brillante */
  margin: 5px 0;
}

.bottom-panel ul {
  list-style: none;
  padding: 0;
}

.bottom-panel ul li {
  margin: 5px 0;
}

.bottom-panel a {
  color: #ccc;            /* Gris para los links */
  text-decoration: none;
}

.bottom-panel a:hover {
  text-decoration: underline;
  color: #fff;
}
#card img {
border: none!important;
border-radius: 15px!important;

}

#card body {
border: none!important;
}

#contenedorCarrito {
  position: fixed;
  top: 150px;
  right: 10px;
  width: 250px;
  height: 400px;

  background-color: rgba(0, 0, 0, 0.7); /* fondo negro con transparencia */
  backdrop-filter: blur(10px); /* efecto borroso */
  -webkit-backdrop-filter: blur(10px); /* para compatibilidad con Safari */

  border: none;
  border-radius: 15px;

  overflow-y: auto;
  z-index: 1000;
  display: none;

  box-shadow: 0 0 15px #ffd700;
  color: #ffd700; /* color dorado para el texto */
  padding: 15px;
  font-family: 'Montserrat', sans-serif;
}

.card {
  background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente negro */
  backdrop-filter: blur(8px);    /* Desenfoque */
  -webkit-backdrop-filter: blur(8px); /* Para compatibilidad con Safari */
  border: none!important;        /* Borde dorado brillante */
  color: #ffd700;                   /* Texto dorado */
border-radius: 15px!important;
  box-shadow: 0 0 10px #ffd700;
}

.card-body button {
  /* estilos comunes para todos los botones dentro de .card-body */
  background-color:transparent;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 6px 12px;
  box-shadow: 0 0 8px #ffd700;
  font-weight: bold;
}

.card-body button:hover {
  background-color: #ffd700!important;
  color: #000000!important;
  border: 1px solid #ffd700!important;
}



@media screen and (max-width: 350px) {
  #contenedorCarrito {
    width: 200px;
    right: 0px;
  }
}

#carrito {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px;
  width: 200px;
  height: 300px;
  border: none;
  border-radius: 5px;
  gap: 20px; /* separa los hijos con 20px */
background: none!important; 
}

#carritoContenedor .carrito-contenedor {
  position: absolute;
  top: 100px;
  left: 100px;
}

.btnEnviarWhatsApp {
  font-weight: bold;
  margin-top: 20px;
  margin-bottom:30px;
  font-size: 18px;
}

#btnEnviarWhatsApp {
  display: flex;
  align-items: center;
  margin-bottom:10px;
}



#btnEnviarWhatsApp img {
  width: 20px;
  height: auto;
  margin-right: 5px;

}


#contenedorCarrito button {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background:rgba(0, 0, 0, 0.6);
  color: white;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 10px #FFD700;
  transition: all 0.3s ease;
  margin-bottom:10px;
  text-align:center;
  height: 40px;


}

#contenedorCarrito button:hover {
  background: #FFD700;
  color: #000000;
  box-shadow: 0 0 15px #FFD700;
}




/* Media query para dispositivos móviles */
@media screen and (max-width: 768px) {
#bottom-panel {
flex-direction: column; /* Coloca los elementos uno debajo del otro en dispositivos móviles */
}
}

.bottom-panel > * {
flex: 1; /* Distribuye el espacio disponible entre los elementos hijos */
display: flex; /* Hace que los elementos hijos sean contenedores flex */
align-items: center; /* Alinea verticalmente los elementos hijos */
}

.logo {
margin-right: 10px; /* Espacio entre el logo y el contenido */
background:none;
}

.panel-content {
flex-direction: column; /* Alinea el contenido verticalmente */
margin-right: 0px; /* Espacio entre el contenido y el menú */
}



.panel-image {
max-width: 200px; /* Ancho máximo de la imagen */
height: auto;
margin-right: 19%;
border-radius: 15px!important;

}

.panel-content {
flex-grow: 1;
padding: 1px;
padding-bottom: 1px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 50%;
margin: 0 auto; /* Ajusta el margen derecho para dejar espacio al panel derecho */
max-width: 1200px; ; /* Resta el ancho del panel derecho al 100% del ancho total */
}




#top-panel {
  background-color: #000 !important;
  box-shadow: 0 5px 15px -5px #FFD700!important; /* solo abajo */
  width: 100% !important;
  height: 60px;
}

  .top-panel:hover {
  background:none;
  }
  #top-panel button{
    background:none;
  } 

/* Establecer una altura predeterminada para el top-panel */
.top-panel {
height:80px; /* Altura predeterminada */
max-width: 100%!important; /* Ancho máximo del panel */

}








/* Media query para dispositivos con un ancho máximo de 768px */
@media screen and (max-width: 768px) {
.bottom-panel {
padding: 2%; /* Reducir el espacio interior */
height: 500px!important;

}
.panel-content {
font-size: 12px; /* Reducir el tamaño de la letra */
}
}
/* Media query para dispositivos con un ancho máximo de 768px */
@media screen and (max-width: 500px) {
.bottom-panel {
margin-top: 100px;
margin-bottom: -300px;
height: 300px!important;
}
}
/* Media query para dispositivos con un ancho máximo de 768px */
@media screen and (max-width: 350px) {
.bottom-panel {
margin-top: -450px;
margin-bottom: -400px;
height: 300px!important;
}
}




/* Ajustar el ancho máximo de los elementos internos */
.elemento-interno {
max-width:100%;
background-color:transparent!important;

}
.top-panel {
overflow: hidden; /* Ocultar el desbordamiento */
}
.elemento-interno {
margin: 0; /* Ajustar los márgenes según sea necesario */
padding: 0; /* Ajustar el relleno según sea necesario */
}




.logo{
height: 60px;
width: 70px;
border:none;
background:none;
position:relative;
align-items: center;
display: flex;
justify-content: center;
margin:none;
padding:none;

}

.logoBottonP{
background-color:#f5f5f5;
height: 250px;
width: 250px;
border:none;
position:relative;
align-items: center;
display: flex;
justify-content: center;
}

/* Media query para dispositivos pequeños */
@media screen and (max-width: 768px) {
/* Reduce el margen inferior del texto sofisticado en dispositivos pequeños */
.logoBottonP {
height: 100px;
width: 100px;
}

/* Reduce el margen superior del div de opciones en dispositivos pequeños */
.opciones {
margin-top: 0%; /* Ajusta este valor según sea necesario */
}
}




.imgLogo{
max-height: 90%; /* Establece la altura máxima al 100% del contenedor */
max-width: 80%;
position: relative;
margin-top: 0px;
height: 100%;
width: 100%;
}

.imgP{
border-radius: 25px;
max-height: 100%; /* Establece la altura máxima al 100% del contenedor */
max-width: 100%;
position: relative;


}
.imgPP{
top:100px;
height: 700px;
width: 50%;
border:none;
background:none;
position:relative;
align-items: center;
display: flex;
justify-content: center;
margin: 0 auto; /* Ajusta el margen derecho para dejar espacio al panel derecho */

}
/* Media query para dispositivos pequeños */
@media screen and (max-width: 600px) {
/* Reduce el margen inferior del texto sofisticado en dispositivos pequeños */
.imgPP {
height: 500px;
width: 100%;
margin-top: 100px;
margin-bottom: 100px;
}

/* Reduce el margen superior del div de opciones en dispositivos pequeños */
.imgPP {
margin-top: 0%; /* Ajusta este valor según sea necesario */
}
}





#titulo1{
color:#ffd700;
font-size: 30px;
margin-top: 3px; /* Ajusta el margen superior según sea necesario */
margin-bottom: 3px;

}

.cursiva {
font-style: italic;
}

/* Agregar sobreado a las palabras */




#items-panel {
margin-bottom: 10px;

}

#items-panel div {
margin-bottom: 15px;
  background: rgba(0, 0, 0, 0.8); /* Fondo semitransparente negro */
  backdrop-filter: blur(8px);    /* Desenfoque */
  -webkit-backdrop-filter: blur(8px); /* Para compatibilidad con Safari */
  border: none;        /* Borde dorado brillante */
  color: gold;                   /* Texto dorado */
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 0 10px gold;
}

#total-panel {
font-weight: bold;
background-color:transparent!important;
}


#formulario-contenedor {
max-height: 400px; /* Establece la altura máxima que deseas para el formulario */
overflow-y: auto; /* Agrega una barra de desplazamiento vertical si el contenido es demasiado alto */
}






#panelBusqueda {
overflow-y: auto;  
background-color: transparent;
z-index: 1000;
display: none;
max-height: 500px; /* Establece la altura máxima para la lista de resultados */
max-width: 400px; 
padding: 1px;
padding-bottom: 0px;
margin-left: 200px;
margin-right: 200px;
margin-bottom: 100px;
padding-top: 10px;
margin: 0 auto; /* Centra horizontalmente */
transform: translateX(-50%, -50%);
margin-top: 200px;
box-shadow: 0 7px 7px 7px rgb(255, 238, 5);
gap:20px;
border-radius:15px;
}
@media screen and (max-width: 700px) {

#panelBusqueda {
  margin-top:300px;
  margin-bottom: 100px;
  max-width: 200px !important;
  z-index: 9999!important;
    position: fixed !important;
}
}
@media screen and (max-width: 500px) {
  #resultadoBusqueda,
  #panelBusqueda{
  max-width: 200px !important;
  z-index: 9999!important;
    position: relative !important;

 }
}
#panelBusqueda ul {
max-height: 300px; /* Establece la altura máxima para la lista de resultados */
overflow-y: auto; /* Agrega una barra de desplazamiento vertical si es necesario */
max-width: 200px;
margin-left: 100px;
margin-bottom: 20px;
}

#resultadoBusqueda {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: #e6e6e6 !important;
  border: 1px solid #ffd700 !important;
  z-index: 9999 !important;
  display: block !important;
  max-height: 300px !important;
  max-width: 400px !important;
  overflow-y: auto !important;
  padding: 20px !important;
  box-shadow: 0 0 15px 3px gold;
border: 2px solid gold;

}

#inputBusqueda{
height:40px;
padding-left: 3px;
padding-right: 3px;
position: relative;
width: 150px; /* Ajusta el ancho del botón de búsqueda */
padding: 5px; /* Ajusta el espacio interior del botón de búsqueda */
} 


.detalle {
position: absolute; /* Posiciona el panel de detalles de forma fija en la pantalla */
top: -100px; /* Lo mueve al centro verticalmente */
left: 50%; /* Lo mueve al centro horizontalmente */
transform: translate(-50%, -50%); /* Lo centra exactamente en el centro */
z-index: 9999; /* Asegura que esté por encima de otros elementos */
background: rgba(0, 0, 0, 0.8); /* Fondo semitransparente negro */
backdrop-filter: blur(8px);    /* Desenfoque */padding: 10px; /* Agrega un espacio interno */
box-shadow: 0 0 5px gold;
border:none;
border-radius:10px;
color:white;
}






#detalleProductoPanel.mostrar {
display: block; /* Mostrar cuando tiene la clase "mostrar" */
}

#detalleProductoPanel.oculto {
display: none; /* Ocultar cuando tiene la clase "oculto" */
}


#contenedorCarrito{
display: none;

}



#imgLogoPrinci{
padding-top: 5px;
padding-bottom: 10px;
justify-content: center;
position:relative;
display: flex;
width: 100%;

}
.imgLogo{
position: relative;

}


#bannerCookies{
display: none;
}





@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');

.texto-sofisticado {
  font-family: 'Playfair Display', serif; /* Tipografía elegante */
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente para resaltar el dorado */
  
  border:none;
  box-shadow: 0 0 15px #FFD700, 0 0 5px #fff; /* Borde dorado brillante */
  border-radius: 20px;

  margin: 10px auto 0;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  margin-top:30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-sofisticado {
  font-family: 'Playfair Display', serif; /* Tipografía elegante */
  font-size: 30px;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: center;
  color:  #FFD700;
  background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente para resaltar el dorado */
  
  border:none;
  border-radius: 20px;

  margin: 100px auto 0;
  padding: 20px;
  width: 90%;
  max-width: 600px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.texto-sofisticado p {
  display: block;
}

.text2 {
  font-family: 'Playfair Display', serif; /* Tipografía elegante */
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente para resaltar el dorado */
  
  border: none;
  border-radius: 20px;

  margin: 40px auto 0;
  margin-bottom:100px;
  padding: 20px;
  width: 90%;
  max-width: 700px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.dorado {
  color: #ffd700; /* Dorado brillante */
  font-weight: bold;
}

.blanco {
  color: white;
}

.text3 {
  font-family: 'Playfair Display', serif; /* Tipografía elegante */
  font-size: 20px;
  line-height: 1.9;
  letter-spacing: 2px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente para resaltar el dorado */
  
  border: none;
  box-shadow: 0 0 15px #FFD700, 0 0 5px #fff; /* Borde dorado brillante */
  border-radius: 20px;

  margin: 10px auto 0;
  margin-bottom:50px;
  padding: 10px;
  width: 90%;
  max-width: 800px;

  display: flex;
  justify-content: center;
  align-items: center;

}







.lora-uniquifier {
font-family: "Lora", serif;
font-optical-sizing: auto;
font-weight: weight;
font-style: normal;

}

.parB{
color: #8a1a1a;
background-color:transparent!important;

}
#opcionesProteina,
#opcionesSalsas,
#opcionesAcompa, 
#opcionesRapida,
#opcionesEnsalada {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-align: center;
}
.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}





.opcionesProteina,
.opcionesSalsas, /* Corregido el selector */
.opcionesAcompa, /* Corregido el selector */
.opcionesRapida,
.opcionesEnsalada {
font-family: "Montserrat", sans-serif;
font-size: 18px;
line-height: 1.5;
letter-spacing: 0.5px;
text-align: center;
color: #333;
border-color: #000000;
border-style:solid;
height: auto;
justify-content: center;
width: 100%;
background-color: #ffffff;
margin:0 auto;
}

@media (max-width:425px){
.opcionesProteina,
.opcionesSalsas, /* Corregido el selector */
.opcionesAcompa, /* Corregido el selector */
.opcionesRapida,
.opcionesEnsalada {margin-top: 100px; /* Agrega un margen superior para separar el contenido */

top: 50%!important;
}
}
@media (max-width:360px){
.opcionesProteina,
.opcionesSalsas, /* Corregido el selector */
.opcionesAcompa, /* Corregido el selector */
.opcionesRapida,
.opcionesEnsalada {margin-top: -500px; /* Agrega un margen superior para separar el contenido */
margin-top: 40%!important;
margin-bottom: -600px;
}
}



ul {
list-style-type: none; /* Elimina los puntos de la lista */
padding: 0;
background-color:transparent!important;

}

/* Media query para ajustar el diseño en pantallas pequeñas */
@media screen and (max-width: 768px) {
.opcionesProteina {
flex-direction: column;
align-items: center;
}
}


/* Media query para dispositivos pequeños */
@media screen and (max-width: 768px) {
/* Reduce el margen inferior del texto sofisticado en dispositivos pequeños */
.text2 {
margin-bottom: 100px; /* Ajusta este valor según sea necesario */
margin-top: 10px;
}

/* Reduce el margen superior del div de opciones en dispositivos pequeños */
.opciones {
margin-top: 1%; /* Ajusta este valor según sea necesario */
}
}


h2 {
color: #FFD700;
background-color:transparent!important;

}
h3 {
color: #FFD700;
background-color:transparent!important;

}

.proteinas{
color: #FFD700;
}



.logo1 {
margin-top: 0%;
margin-left: 2%;
margin-right: 90%;
height: 250px;
width: 250px;
}



.logoP{
margin-top: 200px;
align-items: center;
margin-right: 50px;
margin-left: 50px;
width: 300px;
}



.btn-info{
background-color:transparent!important;
box-shadow: 0 0 10px #FFD700;
color:white;
}

.opcioneSalsas ul,
.opcionAcompa ul,
.opcionesRapida ul,
.opcionesEnsalada ul {
list-style-type: none; /* Elimina los puntos de la lista */
}


body {
font-family: 'Arial', sans-serif;
background-color: #000000!important;
margin: 0px !important;
display: flex;
flex-direction: column;
align-items: center;
padding:0px!important;
}



.menu-button {
display: block; /* Esto asegura que los botones se posicionen uno debajo del otro */
padding: 1px 1px;
color: black;
cursor: pointer;
font-size: 16px;
margin-bottom: 5px;
text-align: center;
margin-top: 5px;
margin-left: 20px;
padding: 5px 10px;
  border: none;
  background: transparent;
  color: white;
  font-weight: bold;
  cursor: pointer;
  text-shadow: 0 0 10px #FFD700;

  transition: all 0.3s ease;
}

.menu-button:hover {
background-color: #ffffff;
text-align: center;
color: #FFD700;
box-shadow: 0 0 10px #FFD700;
border-radius:10px;
}

.menu-button:active {
background-color: #d1c303;
}
.button-container {
display: flex;
justify-content: center; /* Centra los elementos horizontalmente */
flex-wrap: wrap; /* Permite que los botones se envuelvan a la siguiente línea si no caben en una sola fila */
}
.opciones-panel {
position: absolute;
top: 980px; /* Ajusta según la posición deseada */
margin: 0 auto;;
transform: translateX(-50%);
backdrop-filter: blur(10px); /* Borroso elegante */
background-color: rgba(0, 0, 0, 0.4); /* Fondo oscuro translúcido */border-radius: 15px;
border:none;
padding: 2px;
display: none; /* Mantén oculto por defecto */
width: 500px; /* Ajusta según el tamaño deseado */
max-height: 400px; /* Altura máxima del panel antes de agregar scroll */
overflow-y: auto; /* Agrega un scroll vertical si el contenido es más alto que el panel */
z-index: 1000; /* Asegura que el panel se sitúe por encima del resto del contenido */
box-shadow: 0 0 15px #FFD700;
color:white;
border: 1px solid #FFD700; /* Dorado brillante */

}

@media screen and (max-width: 400px) {
  .opciones-panel{
    top: 1020px; 
    width: 250px;
  }

}
@media screen and (max-width: 600px) {
  .opciones-panel{
    top: 1000px; 
    width: 350px;
  }

}
.opciones-panel.active {
display: block; /* Muestra el panel cuando está activo */
}

.hidden-content {
display: none;
width: 90%;
max-width: 600px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}






.face{

height: 30px;
margin-left: 5px;
}


@media screen and (max-width: 350px) {
  .texto-sofisticado.lora-uniquifier,
  .text2.lora-uniquifier,
  .text3.lora-uniquifier,
  .opciones-panel,
  .container-fluid {
    transform: scale(0.9); /* Reduce el tamaño general */
    font-size: 14px;        /* Tamaño de letra más pequeño */
    padding: 5px;
    width: 100%;
  }

  .texto-sofisticado.lora-uniquifier p,
  .text2.lora-uniquifier p,
  .text3.lora-uniquifier p {
    font-size: 13px;
  }

  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }
}