* {

  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 {

  padding-top: 2rem;

  max-height: 450px;
  width: 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: #fd7a00;
  padding: 5px;
}

h1 {
padding-top: 1rem;
  color: #98C93A;

  font-size: 1.3rem;

  text-align: center;

}



.tituloMenu {

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

  margin: 30px;

  font-size: 4rem;

  text-align: center;



  font-weight: 400;



}




.aviso {
    background-color: #00000000;
    color: var(--menu-text-color);
    text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    animation: glow 1.5s infinite alternate;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e, 0 0 40px #ff005e, 0 0 80px #ff005e;
    }
    100% {
        text-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 80px #00d4ff, 0 0 160px #00d4ff;
    }
}

.totalBody {





  max-width: 720px;



  background-color: var(--menu-bg-color);
  border: 1px solid 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%;
   max-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; 

  margin-bottom: 2rem;

}



.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: rgb(28 19 28 / 42%);
    backdrop-filter: blur(10px);

}



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;

  flex-direction: column;
  align-items: center;
  gap: 1rem;





  overflow: hidden;

  z-index: 1000;

  display: flex;

  justify-content: center;

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





}



.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;





 

}



.label{
  display: flex;
  gap: 10px;
  font-size: 15px;
}



.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;

  position: relative;

}

.badgePromo {
    position: absolute;
    top: 6px;
    left: 6px;
    background-color: #f8690a;
    box-shadow: 5px 5px 3px rgb(85, 42, 3);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
}


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;



}


.contInfoBilletera{
  display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.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: 3px 5px;

  font-size: 16px;

  border: none;

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

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

  border-radius: 8px;

  cursor: pointer;

}


button:hover {

 

 

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

}



.botonWifi:active {

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



}

.botonWifi:hover{
 
  scale: 1.1;
}




@media (max-width: 500px) {

 



  

}



@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 {

   display: flex;
  flex-direction: column;





}


.acciones {
 position: relative;
    margin-top: auto;
    display: flex;
    justify-content: center;
    
}
.margin{
  margin-bottom: 35px;
}
.contador {

  display: flex;

  gap: 16px;

  align-items: center;





}

.promoAviso{
  text-align: center;
  background-color: gainsboro;
  color: rgb(247, 142, 5);
  padding: 10px;
}
.opciones{
      display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}
.label input {
    display: none;
}

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

/* cuando está seleccionado */
.label input:checked + span {
    background: var(--menu-text-color);
    color: var(--menu-bg-color);
}

/*--- 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);

  /* Se hunde */

}



.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;

 

}

.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-size: 18px;

  font-weight: 600;
 color: #181717;
}

.promoResumen{
  color: #404040;
}

.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 */



}





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













/* Estilos para el botón */

.confetti{

   

    font-size: 13px; 

    padding: 5px;

    font-weight: bold;

    color: white; 

    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 */

}



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

.confetti: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;

}


.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;
  







}