* {



  padding: 0;



  margin: 0;



  box-sizing: border-box;



  font-family: "Inter", "serif";















}







:root {



  --menu-bg-color: #ffffff;



  /* Color por defecto */



  --menu-text-color: #000000;



  /* Color por defecto */











}







body {







  display: flex;



  flex-direction: column;



  align-items: center;



  padding-top: env(safe-area-inset-top);



  padding-bottom: env(safe-area-inset-bottom);



  color: var(--menu-text-color);



  display: flex;



  flex-direction: column;



  align-items: center;



  background-color: var(--menu-text-color);











}







body.loading main {



  display: none;







}







.logoEstudio {







  width: 15%;



  height: auto;







}



#pantalla-cerrado{

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(77, 76, 76, 0.678);

  z-index: 9999;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-family: sans-serif;

  transition: opacity 0.4s ease;

}

.cerradoH2{
  font-size: 2.5rem;
  color: #1d3b38;
  background-color: #009e89;
  padding: 5px;
  margin-bottom: 2rem;
  width: 100%;
}




h1 {



  color: #98C93A;



  font-size: 3.5rem;



  text-align: center;



}







.tituloMenu {



  color: var(--menu-text-color);



  margin: 10px 10px 0 10px;



  font-size: 2.5rem;



  text-align: center;







  font-weight: 400;







}



.tituloMenuP {

  text-align: center;

  font-size: 12px;

  padding-bottom: 10px;

  color: var(--menu-text-color);



}





.totalBody {











  max-width: 720px;







  background-color: var(--menu-bg-color);







  display: flex;



  flex-direction: column;











}







#pantalla-carga {



  position: fixed;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  background: white;



  z-index: 9999;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  font-family: sans-serif;



  transition: opacity 0.4s ease;



}







.sectionTotal {



  display: flex;



  flex-direction: column;



  gap: 2rem;



}







.imagenTotal {



  width: 100%;



  height: auto;



  display: block;



}







.imagen_1 {



  max-width: 100%;

  /* nunca más ancho que su contenedor */



  height: auto;

  /* mantiene la proporción original */



  display: block;







}







.imagen_2 {



  max-width: 100%;

  /* nunca más ancho que su contenedor */



  height: auto;

  /* mantiene la proporción original */



  display: block;



 



}







.imagen_3 {



  max-width: 100%;

  /* nunca más ancho que su contenedor */



  height: auto;

  /* mantiene la proporción original */



  display: block;



  margin-bottom: 0.5rem;



}







nav {



  background-color: var(--menu-bg-color);



}







nav a {



  all: unset;



  display: inline-block;



  /* Permite aplicar altura */



  font-size: 17px;



  letter-spacing: 1px;



  font-weight: 800;



  color: var(--menu-bg-color);



  background-color: var(--menu-text-color);



  border-radius: 0px 10px;



  padding: 2px 14px 3px 14px;















}



















nav a:active {



  transform: scale(1.2);



  background-color: rgb(216, 52, 52);







}







header {











  width: 100%;







  /* Ajusta el color si es necesario */



















}







nav {







  padding: 10px 10px;



  position: sticky;



  top: 35px;















  overflow: hidden;



  z-index: 1000;



  display: flex;



  justify-content: center;



  box-shadow: 0px 12px 6px 1px rgb(0 0 0 / 20%);

  flex-direction: column;

  align-items: center;











}







.aclaracion {



  text-align: center;



  font-size: 1.3rem;



  padding: 15px 10px 0 0;



  color: var(--menu-text-color);



  animation: glow 2s ease-in-out infinite alternate;







}







@keyframes glow {



  from {



    text-shadow: 0 0 20px #2d9da9;



  }







  to {



    text-shadow: 0 0 30px #34b3c1, 0 0 10px #4dbbc7;



  }



}















ul {



  list-style: none;



  padding: 0;



  margin: 0;



  cursor: pointer;



  display: flex;



  gap: 1rem;



  flex-wrap: wrap;



  justify-content: space-around;















}







.UlCategorias {





  padding: 10px 0;



}



.navCategorias {

  background-color: #e8e8e8c2;

}



.navCategorias_P,

.tituloMenu {



  text-align: center;

  padding: 5px 8px;

  font-size: 20px;

  color: var(--menu-text-color);

  font-weight: 600;

}



.contenedor_h2 {



  display: flex;



  justify-content: center;



  color: var(--menu-bg-color);



  background-color: var(--menu-text-color);







}







.boton-subir {



  border: 2px solid var(--menu-text-color);



  position: fixed;







  bottom: 40px;



  right: 20px;



  width: 56px;



  height: 56px;



  border-radius: 50%;



  background-color: var(--menu-bg-color);



  color: var(--menu-text-color);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 34px;



  box-shadow: 0 0 11px 7px rgba(0, 0, 0, 0.3);



  cursor: pointer;



  opacity: 0;



  pointer-events: none;



  transition: opacity 0.3s ease;



  z-index: 1000;



}







.boton-subir.visible {



  opacity: 1;



  pointer-events: auto;



}







.visible:active {



  background-color: #00502f;



  scale: 1.2;



}







.contFlecha {







  opacity: 0;



  position: fixed;



  bottom: 20px;



  right: 100px;







  width: 56px;



  height: 56px;



  border-radius: 50%;



  background-color: var(--menu-bg-color);



  color: var(--menu-text-color);



  border: 2px solid var(--menu-text-color);



  box-shadow: 5px 3px 6px rgb(37, 36, 36);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 34px;







  cursor: pointer;



  z-index: 1000;



}







.flecha {



  opacity: 0;



  display: none;



  font-family: sans-serif;



  font-size: 2.5rem;



  all: unset;







}



















h2 {



  font-size: 3rem;



  font-weight: 800;







  text-align: center;



























}







.linea {



  height: 1px;



  background-color: #000000;







  margin: 0 0.5rem;







}







.linea_1 {







  margin: 0 20px 10px 20px;



  border-bottom: 2px dotted var(--menu-text-color);



}







.linea_2 {







  margin: 0 50px;



  border-bottom: 1px solid color-mix(in srgb, var(--menu-text-color) 30%, transparent);







}







.contDatos {



  display: flex;



  flex-direction: column;



  align-items: center;



  padding: 10px;



  justify-content: space-around;























  border-radius: 10px;











  border: 1px solid color-mix(in srgb, var(--menu-text-color) 20%, transparent);







}







.contPrecioDato {



  width: 100%;



  display: flex;



  gap: 1rem;



  flex-direction: column;







}



.datos {



  /*flex: 0 0 50%;



  max-width: 50%;*/















  display: flex;



  flex-direction: column;















}























.datos h3 {



  font-size: 16px;



  padding-bottom: 3px;



  font-weight: 800;



}







.precio {















  display: flex;











  flex-direction: column;



  align-items: center;







}







h5 {



  width: 100%;



  font-size: 18px;



  font-weight: 800;



  background-color: var(--menu-text-color);



  color: var(--menu-bg-color);



  padding: 2px 5px;



  text-align: center;



  border-radius: 0px 0px 8px 8px;







}







.data {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));



  gap: 10px;



  padding: 10px 10px;



}







.foto {



  width: 100%;



  height: 130px;







  border-radius: 10px;



  object-fit: cover;



  background-color: var(--menu-text-color);



  box-shadow: 3px 3px 15px rgb(0 0 0);







  cursor: zoom-in;























}







/* Overlay */



.foto-activa {



  position: fixed;



  inset: 0;



  margin: auto;



  max-width: 90vw;



  max-height: 90vh;



  z-index: 9999;



  cursor: zoom-out;



  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);



  border-radius: 10px;



}











/* fondo oscuro */



.overlay-foto {



  position: fixed;



  inset: 0;



  background: rgba(0, 0, 0, .6);



  z-index: 9998;



  display: flex;



  align-items: center;



  justify-content: center;



}







.overlay-foto img {



max-width: 290px;



  height: auto;



  border-radius: 10px;



  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);



  cursor: zoom-out;



}







/*------------Footer---------------*/







footer {







  color: var(--menu-text-color);



  padding: 20px 10px;



  margin-top: 2rem;











}







.footer-social {



  display: flex;



  flex-direction: column;



  align-items: center;



}







.footer-container {



  display: flex;



  justify-content: space-around;



  flex-wrap: wrap;



  gap: 2rem;

  margin-bottom: 4rem;

     align-items: baseline;


}



.contInstalar{
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
        gap: 0.5rem;
}







.footer-info {



  display: flex;



  flex-direction: column;



  gap: 1rem;



  align-items: center;



  text-align: center;











}







.footer-info p {



  font-size: 16px;



}







.ico {



  font-size: 1.3rem;



}







.footer-container h3 {



  font-size: 2.2rem;



  text-align: center;



  font-weight: 400;



  color: var(--menu-text-color);



  border: 1px solid var(--menu-bg-color);



  padding: 2px 10px 2px 10px;



  border-radius: 10px

}







.copy {



  margin-top: 1rem;







  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 3rem;



}











.redes {



  padding-top: 0.5rem;



  display: flex;



  gap: 2rem;











}







.redes a {



  font-size: 2rem;



}











.footer-container a {







  color: var(--menu-text-color);



  text-decoration: none;







}







.footer-container a:active {



  transform: scale(1.2);



  color: rgb(216, 52, 52);







}







.footer-copy {



  margin-top: 15px;



  font-size: 14px;



  opacity: 0.7;



  text-align: center;



}







.copy a {







  text-decoration: none;







}







.pulse-elegante {



  font-size: 0.7rem;



  font-weight: bold;



  color: var(--menu-text-color);



  animation: pulse 3s ease-in-out infinite;



  display: inline-block;



  transform-origin: center;



}







@keyframes pulse {







  0%,



  100% {



    transform: scale(1);



  }







  50% {



    transform: scale(1.05);



  }



}











.copy a:active {







  transform: scale(1.2);



  color: #00502f;







}







.contwifi {



  display: flex;



  flex-direction: column-reverse;



  gap: 1rem;







  align-items: center;



}







#wifiInfo {



  margin-top: 20px;



  padding: 20px;











  border-radius: 12px;



  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);



  display: none;



}







.contInfoWifi {



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 1rem;



}







canvas {



  margin-top: 15px;



}







.botonWifi {



  padding: 10px 20px;



  font-size: 16px;



  border: none;



  background: var(--menu-text-color);



  color: var(--menu-bg-color);



  border-radius: 8px;



  cursor: pointer;



}




button {

  border: none;

}



button:hover {







  color: var(--menu-text-color);



  box-shadow: 5px 5px 5px rgb(68, 68, 68);



}







.botonWifi:active {



  background-color: rgb(216, 52, 52);







}



.botonWifi:hover{
  color: var(--menu-bg-color);
  scale: 1.1;
}







@media (max-width: 500px) {



  .logoEstudio {







    width: 35%;











  }











}







@media (max-width:450px) {}







@media (max-width:380px) {}







/*--------------Delivery----------------*/


.horariosH6{

font-size: 1.1rem;



}

.dataHorarios{
  display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.contHorarios{
  width: 140px;
  height: 77px;
  color: var(--menu-text-color);
  padding: 5px;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 5px;
}
















.contControl {



  position: relative;



  height: 40px;











}







.contador {



  display: flex;



  gap: 16px;



  align-items: center;











}







/*--- VER MAS DESCRIPCION--------*/







.texto {



  margin: 0;







  line-height: 1.4em;



  max-height: 0em;

  /* 2 líneas reales */







  overflow: hidden;



  transition: max-height 0.5s ease;







  font-style: italic;



  font-weight: 300;



  font-size: 14px;







  word-wrap: break-word;



  overflow-wrap: break-word;



}











.texto.expandido {



  max-height: 1000px;

  /* grande para que muestre todo */



}







.btn-mas {



  background: none;



  border: none;



  color: #007bff;



  cursor: pointer;



  font-weight: 600;



  text-align: left;







}



.btn-mas:hover {



  all: unset;



  cursor: pointer;



}











/*-----BOTON AGREGAR---*/



.contPlato {



  display: flex;



  justify-content: center;



  align-items: center;



  flex-direction: column;



  width: 100%;



  gap: 8px;



  padding: 8px 0;











}



/*



.btnAgregar {



  all: unset;



  cursor: pointer;



  background: #ff4444;



  padding: 8px;



  border-radius: 10px;



  color: white;



  font-size: 0.8em;



  font-weight: 800;



  box-shadow: 5px 5px 3px rgb(24, 24, 24);



  transition: transform 0.1s ease;



}







.btnAgregar:hover {



  background-color: #bb2525;



}











.btnAgregar:active {



  transform: scale(0.95);



 



}







*/



.btnMenos {



  all: unset;



  cursor: pointer;



  font-size: 30px;



  background-color: #2d9da9;



  font-weight: 600;



  font-size: 1.3em;



  height: 20px;



  border-radius: 2px 2px 2px 10px;



  display: flex;



  justify-content: center;



  align-items: center;



  padding: 5px 7px 5px 7px;



  transition: transform 0.1s ease;



}







.btnMas {



  all: unset;



  cursor: pointer;



  font-size: 30px;



  background-color: #2d9da9;



  font-weight: 600;



  font-size: 1.3em;



  height: 20px;



  height: 20px;



  border-radius: 2px 2px 10px 2px;



  display: flex;



  justify-content: center;



  align-items: center;



  padding: 5px 5px 5px 5px;



  transition: transform 0.1s ease;



}







.btnMas:hover,



.btnMenos:hover {



  background-color: #bb2525;



}











.btnMas:active,



.btnMenos:active {



  transform: scale(0.75);



  /* Se hunde */







}







.cantidad {







  font-size: 25px;



  font-weight: 900;



  font-size: 0.9em;



}







/* BOTÓN FLOTANTE */



.btnFlotante {



  position: fixed;



  z-index: 2000;



  bottom: 110px;



  right: 20px;



  background: #007bff;



  color: white;



  padding: 15px 20px;



  border-radius: 50px;



  border: none;



  font-size: 16px;



  cursor: pointer;



  box-shadow: 0 5px 10px rgba(0, 0, 0, .3);



}







/* MODAL CARRITO */



.modal {



  position: fixed;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  background: rgba(0, 0, 0, .6);



  display: flex;



  align-items: center;



  justify-content: center;



  z-index: 2000;







}







.modalContent {



  background: #fff;



  width: 100%;



  max-width: 700px;



  padding: 20px;



  border-radius: 10px;







}


.modalDireccion_2{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.campoDireccion{
      display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

textarea{
    width: 100%;
    min-height: 40px;
    resize: none;           /* opcional: evita que el usuario lo estire */
    overflow-y: hidden;     /* opcional */
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    padding: 8px;
}

.opcionEnvio input{
  display: none;
}


.opcionEnvio span{
display: block;
    padding: 7px 5px;
    border: 1px solid var(--menu-text-color);
    border-radius: 10px;
    text-align: center;

}
.opcionEnvio input:checked + span {
    background: var(--menu-text-color);
    color: var(--menu-bg-color);
}
.btnGuardar, .btnEditar{
      width: 100%;
    background-color: rgb(0, 162, 255);
    color: aliceblue;
    border: 0;
    padding: 5px;
    border-radius: 5px;
    font-weight: 600;
    text-shadow: 3px 3px 5px rgb(5, 39, 54);
    font-size: 20px;
}

.swal2-container {
    z-index: 999999 !important;
}

.opcionesEnvio{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 30px 0;
}
.modalContent {

  background: #fff;

  width: 100%;

  max-width: 700px;

  padding: 20px;

  border-radius: 10px;

    

}

.modalContent h2{

  background-color: rgb(22, 21, 29);

  border-radius:  10px 10px 1px 1px ;
  color: #ececec;

}







.listaCarrito {



  max-width: 680px;



  display: flex;



  flex-direction: column;



  overflow-y: auto;



  max-height: 400px;







}







/* BOTONES DEL MODAL */

.btnDireccion,

.btnVaciar,



.btnEnviar,



.btnCerrar {



  width: 100%;



  padding: 12px;



  margin-top: 10px;



  border: none;



  border-radius: 8px;

 font-weight: 600;
   font-size: 18px;
 color: #181717;

}







.btnVaciar {



  background: #ff4444;



  color: white;



  font-size: 18px;



  font-weight: 600;



  text-shadow: 3px 3px 5px rgb(36, 3, 3);



}







.btnEnviar {



  background: #0fa747;



  color: white;



  font-weight: 600;



  text-shadow: 3px 3px 5px rgb(5, 54, 22);



  font-size: 20px;



}







.btnCerrar {



  background: #ccc;



}











#mensajeCarrito {



  position: fixed;



  top: 10px;



  right: 100px;



  background: #ff4d4d;



  color: white;



  padding: 15px;



  border-radius: 5px;



  z-index: 1000;



}











/* Estado normal (visible) */



.contControl .contador {



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  display: flex;



  justify-content: center;















  opacity: 1;



  transform: scale(1);



  transition: opacity .25s ease, transform .25s ease;



}







/* Oculto (animable) */











.contControl .contador.fadehidden {



  opacity: 0;



  transform: scale(0.8);



  pointer-events: none;



}







.itemCarrito {



  color: #525151;



  padding: 10px 0;



  display: flex;



  justify-content: space-around;



  align-items: center;



  gap: 10px;



  max-width: 680px;



  border: 1px solid gainsboro;



  border-radius: 5px 5px 15px 5px;



  margin: 10px 0;



  flex-wrap: wrap;



  overflow-y: auto;







}







.contSpan {



  display: flex;



  flex-direction: column;



  gap: 5px;



}







.nombreProducto {



  font-size: 20px;



  color: #e40f0f;



  font-weight: 800;







}







.subtotal {



  font-weight: 800;







}







.contadorCarrito {



  display: flex;







  align-items: center;











}







.contadorCarrito {



  display: flex;



  align-items: center;







}







.btnMenosCarrito,



.btnMasCarrito,



.cantidadCarrito {



  width: 26px;



  height: 26px;



  border: 1px solid gainsboro;



  border-radius: 6px;







  display: flex;



  justify-content: center;



  align-items: center;







  font-size: 14px;



  font-weight: 600;



  line-height: 1;

  /* IMPORTANTÍSIMO */



}







.cantidadCarrito {



  border-radius: 0px;



}







.btnMenosCarrito {



  border-radius: 4px 0px 0px 8px;



}







.btnMasCarrito {



  border-radius: 0px 4px 8px 0px;



}



.btnMasCarrito:hover,



.btnMenosCarrito:hover {



  background-color: #bb2525;



}











.btnMasCarrito:active,



.btnMenosCarrito:active {



  transform: scale(0.75);



  /* Se hunde */







}



/*--------------------------------HELADOS--------------------------*/







.btnMedida.disabled {



  opacity: 0.4;



  pointer-events: none;



}



.itemMedida {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.btnMedida {







  border-radius: 10px;







  background-color: var(--menu-text-color);



  color: var(--menu-bg-color);

  box-shadow: 1px 1px 5px var(--menu-text-color);



}







.btnMedidaPmedida {



  color: var(--menu-text-color);



  background-color: var(--menu-bg-color);



  border: 1px solid var(--menu-text-color);











  color: var(--menu-text-color);









  min-width: 70px;



  border-radius: 0px 10px;

  padding: 2px 14px 3px 14px;

  font-weight: bold;



  font-size: 18px;



}





.btnMedidaPmedida:active{

  background-color:#bb2525;

}





.btnMedidaPprecio {



  letter-spacing: 1px;



  font-size: 15px;



  font-weight: 500;



  padding: 5px 5px 0px 5px;











}



.btnMedidaPcantidadGustos {



  font-size: 12px;



  font-weight: 300;



  font-style: italic;



  padding-bottom: 5px;



  letter-spacing: 1px;



}



/*



.btnMedida{



border: 2px solid var(--menu-text-color);



 border-radius: 10px;







 background-color: var(--menu-text-color);



color: var(--menu-bg-color);



}







.btnMedidaPmedida{



  color: var(--menu-text-color);



background-color: var(--menu-bg-color);



border: 1px solid var(--menu-text-color);











    color: var(--menu-text-color);



    background-color: var(--menu-bg-color);



  



    border-radius: 8px 8px 0 0;







    padding: 7px;



    font-weight: bold;



    font-size: 18px;



}



.btnMedida:hover{



scale: 1.1;



}



.btnMedida:active{



  scale: 0.9;



}







.btnMedidaPprecio{



  letter-spacing: 1px;



  font-size: 15px;



  font-weight: 500;



      padding: 5px 5px  0px 5px;



      







}



.btnMedidaPcantidadGustos{



  font-size: 12px;



  font-weight: 300;



  font-style: italic;



      padding-bottom: 5px;



      letter-spacing: 1px;



}



 */



.btnGustos {



  background-color: #bb2525;



}











.contInfoMedida {



  display: flex;



  flex-direction: column;



  padding: 10px 0 0 0;



  gap: 1rem;











}







.listaGustos {



  display: flex;



  flex-direction: column;







}



.contTituloMenu {

  background-color: #e8e8e8;

}



.listaMedidas {



  background-color: #e8e8e8;

  padding: 1rem 0 2rem 0;





  gap: 0.2rem;



}











.listaGustosCarrito {



  flex-direction: column;



  gap: 0;



}











.gustoItem {



  display: flex;



  align-items: center;







  border: 1px solid rgba(128, 128, 128, 0.301);



  padding: 0;



  border-radius: 5px;



  margin-bottom: 10px;







}







.gustoItem span {



  flex: 1;



  white-space: nowrap;

  /* no baja de línea */



  overflow: hidden;

  /* oculta el sobrante */



  text-overflow: ellipsis;

  /* ... elegante */



  letter-spacing: 1px;



  font-size: 15px;



  padding-left: 5px;



}







.btnQuitarGusto {



  flex-shrink: 0;

  /* la X nunca se achica */



  margin-left: 10px;



  background: none;







  cursor: pointer;



  font-size: 15px;



  color: rgb(150, 150, 150);



  border: none;



  padding: 2px 5px;



}







.contMedidaPrecio {



  display: flex;



  justify-content: space-between;















}



.modalContentH2 {



  color: #159e8a;



  font-size: 30px;



  padding: 10px 0;



  letter-spacing: 1px;



}



.gustosMedida,

.gustosPrecio {



  font-size: 20px;



  font-weight: 800;



  color: #159e8a;



}











.cantidadGustos {



  color: #159e8a;



  font-size: 14px;



  padding-bottom: 10px;



  font-weight: 800;



}







.limiteGustos {



  color: #bb2525;



}









/*------Alert--------*/







.swal-helado {



  animation: bounce 0.6s ease;



}







@keyframes bounce {



  0% {

    transform: scale(0.8);

  }



  50% {

    transform: scale(1.05);

  }



  100% {

    transform: scale(1);

  }



}







.swal2-container {



  z-index: 9999 !important;



}















/*---------CONFTTI------------*/



/* Estilos para el botón */



.btnAgregar {







  font-size: 13px;



  padding: 5px;



  font-weight: bold;



  color: white;
  text-shadow: 2px 2px 4px #221d1d;



  border: none;



  border-radius: 8px;



  background: linear-gradient(45deg, #ff6f61, #d6336c, #4a90e2);

  /* Degradado diagonal en el fondo */



  background-size: 300% 300%;

  /* Amplía el tamaño del degradado para animarlo */



  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  /* Sombra suave para dar profundidad */



  transition: all 0.3s ease;

  /* Transición suave para transformaciones y cambios de sombra */



  cursor: pointer;



  outline: none;



  animation: gradientAnimation 5s infinite;

  /* Aplica una animación infinita al degradado */



}


.btnElegir{
 background: linear-gradient(45deg,  #ddbf39,#df9308, #d30654);
 background-size: 300% 300%;

  /* Amplía el tamaño del degradado para animarlo */



  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  /* Sombra suave para dar profundidad */



  transition: all 0.3s ease;

  /* Transición suave para transformaciones y cambios de sombra */
   outline: none;



  animation: gradientAnimation 5s infinite;

  /* Aplica una animación infinita al degradado */
  

}




/* Efecto cuando el usuario pasa el mouse sobre el botón */



.btnAgregar:hover {



  transform: scale(1.1);

  /* Aumenta el tamaño del botón en un 10% */



  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

  /* Aumenta la intensidad de la sombra */



}







/* Animación del degradado del botón */



@keyframes gradientAnimation {



  0% {



    background-position: 0% 50%;

    /* Posición inicial del degradado */



  }



  50% {



    background-position: 100% 50%;

    /* Mueve el degradado hacia la derecha */



  }



  100% {



    background-position: 0% 50%;

    /* Regresa el degradado a la posición inicial */



  }



}















.total {



  font-size: 25px;



  color: #e43f3f;



}



.activo {



  scale: 1.3;



  box-shadow: 0px 0px 20px var(--menu-text-color);



  cursor: default;



  background-color: #bb2525;

}





.agotado {

  filter: grayscale(100%);

  opacity: 0.5;

  pointer-events: none;

  position: relative;

}





.agotado::after {

  content: "AGOTADO";

  position: absolute;

  top: 8px;

  right: 8px;

  background: red;

  color: white;

  font-size: 11px;

  padding: 3px 6px;

  border-radius: 4px;

}



.hidden {



  display: none;















}