body{
    width: 100%;
    
    height: 100%;
    background-color: #ffffff;
    margin: auto;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../img/ffpp.png');
    scrollbar-width: 5px;
}
body::-webkit-scrollbar {
    width: 15px;
    height: 10px;
}
  
body::-webkit-scrollbar-track {
    background: #000000;
    border-radius: 50px;
}
body::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 50px;
}
body::-webkit-scrollbar-thumb:hover {
    background: #49ccd4ff;
}
nav{
    width: calc(100% - 20px );
    padding: 10px 10px ;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top:0px;
    display: flex;
    border-bottom: 0.5px solid #1a1a1aff;
}
.icocno_ba_p_aa{
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.icocno_ba_p{
    height: 40px;
    margin: 0;
    margin-right: 10px;
}
.btn_b_p{
    width: 40px;
    height: 40px;
    background-color: #c7050500;
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.icon_ba_b_b_p{
    width: 100%;
}
main{
width: calc(100% - 100px);
height: calc(100% - 30px);
background-color: #ffffff;
padding: 15px;
position: fixed;
top:0px;
left: -200px;
max-width: 400px;
animation: slideIn 1s forwards;
-webkit-animation: slideIn 1s forwards;
overflow-y: auto;
}
@keyframes slideIn {
    0% {
      left: calc(-100% + 100px);
    }
    100% {
      left: 0;
    }
  }
.txt_titulo_secciones_main{
    font-family: 'Poppins';
    color:#1a1a1aff;
    font-weight: 300;
    font-size:20px;
    line-height:20px;
    margin:40px 0px 0px 0px;
    text-align: center;
}

.pan_n{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.574);
    backdrop-filter: blur(5px);
    position: fixed;
    top:0px;
    display: flex;
    opacity: 0.;
    animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
        opacity: 0.7;
    }
  }

.icon_and_x{
    width: calc(100% - 30px );
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.icon_tacopolis_lat{
    width: 80px;
}
.btn_lat_b{
    width: 27px;
    height: 27px;
    border: 0;
    background-color: #00000000;
}
.x_lat_b{
    width: 100%;
}
.icnonos_lat_1{
    width: 35px;
}
.txt_t_lat{
    font-family: 'Poppins';
    color:#1a1a1aff;
    font-weight: 500;
    font-size:17px;
    line-height:18px;
    margin:0px 0px 0px 25px;
}
a {
    text-decoration: none; /* Elimina el subrayado de todos los enlaces */
  }
.sec_t_lat{
    width: calc(100% - 60px);
    display: flex;
    padding: 10px 20px;
    justify-content: start;
    align-items: center;
    margin: 10px 0px;
    border-radius: 40px 0px 0px 40px;
    border-bottom:  solid 1px #1a1a1aff;
    
    
}

.creditos_jemis_in_main{
    font-family: 'Poppins';
    color:rgb(255, 255, 255);
    font-weight: 500;
    font-size:17px;
    line-height:15px;
    margin:20px 0px 0px -20px;
    display: inline-block;
    background-color: #FF9A8B;
    background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
    padding: 10px 15px;
    border-radius: 0px 40px 40px 0px;
}

._nulo_espacio{
    width: 100%;
    height: 63px;
    background-color: #1a1a1aff;
}

.p_s_uno{
    width:100%;
    height: auto;
    background-color: rgb(169, 169, 169);
    background: url(../img/imagen_fondo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.contenido_uno_s_uno{
    backdrop-filter: url(filters.svg#filter)  blur(2px) saturate(150%) brightness(60%) grayscale(80%);
    width: 100%;
    height: 200%;
    padding: 10vh 0px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.logo_nonis_principal_centrado{
    width:100px;
    display:block;
    margin: 10px;
   
    animation-duration: 7s;
    animation-name: logouno;
    animation-iteration-count: infinite;
    animation-direction: alternate; 
}
@keyframes logouno {
    from {
        -webkit-transform: rotate(-7deg);transform: rotate(-7deg);
        }
    to {
        -webkit-transform: rotate(7deg);transform: rotate(7deg);
    }}

.bienbenida1{
    font-family: 'Poppins';
    font-weight: 800;
    font-size:25px;
    line-height:24px;
    text-align:center;
    color:#fff;
    margin:0px;
    
}
.bienbenida2{
    font-family: 'Poppins';
    font-weight: 200;
    font-size:13px;
    line-height:24px;
    text-align:center;
    color:#fff;
    margin:0px;
    
}

.animacion_text_bienvenido{
    margin: 10px;
    animation-duration: 8s;
    animation-name: logotxt;
    animation-iteration-count: infinite;
    animation-direction: alternate; 
    animation-delay: 0s;
}
@keyframes logotxt {
    0% {
    margin-top:60px;
    opacity:0;
}
    40% {
    margin-top:0px;
    opacity:1;
} 
    100% {
}
}

.p_s_dos{
    width: calc(100% - 30px);
    padding: 100px 15px;
    background-color: #fff;
}

.txt_u_p_s_dos{
    font-family: 'Poppins';
    font-weight: 800;
    font-size:25px;
    line-height:24px;
    text-align:center;
    color:#49ccd4ff;
    margin:0px;
}

.txt_u_p_s_dos_dos{
    font-family: 'Poppins';
    font-weight: 400;
    font-size:25px;
    line-height:24px;
    text-align:center;
    color:#1a1a1aff;
    margin:0px;
}
.txt_u_p_s_dos_tres{
    font-family: 'Poppins';
    font-weight: 400;
    font-size:14px;
    line-height:15px;
    text-align:center;
    color:#1a1a1aff;
    margin:20px;
}

.p_s_tres{
    width: calc(100% - 30px);
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: rgba(73, 205, 212, 0);
    border-radius: 40px 40px 0px 0px;
}

.sucursales{
    width: 400px;
    max-width:calc(100% - 40px);
    min-width: 300px;
    background-color: rgb(178, 178, 178);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    margin: 20px;
}
.contenido_sucursales{
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    padding: 15px;
    backdrop-filter:  blur(2px) grayscale(100%) ;
    transition: backdrop-filter 0.5s ease;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.contenido_sucursales:hover{
    backdrop-filter:  blur(2px) grayscale(0%);
    opacity: 0.3;
}

.p_s_tres .txt_uno{
    color: #ffffff;
    font-family: 'Poppins';
    font-weight: 400;
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    margin: 0px;
    text-shadow: #000000 0px 0px 10px,#000000 0px 0px 10px,#000000 0px 0px 10px,#000000 0px 0px 10px
    ;
    
}
.p_s_tres .txt_dos{
    color: #49ccd4ff;
    font-family: 'Poppins';
    font-weight: 600;
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    margin: 0px;
    text-shadow: #000000 0px 0px 10px,#00000071 0px 0px 10px
    ;
}
.p_s_tres .txt_tres{
    color: #fff;
    font-family: 'Poppins';
    font-weight: 400;
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    margin: 0px;
    text-shadow: #000000 0px 0px 10px,#000000 0px 0px 10px,#000000 0px 0px 10px,#000000 0px 0px 10px;
}



.boton_menu_ver{
    background-color: #49ccd4ff;
    padding: 5px 40px;
    font-size: 19px;
    line-height: 19px;
    text-align: center;
    display: block;
    margin: auto;
    font-family: 'Poppins';
    font-weight: 600;
    border: 0;
    border-radius: 40px;
    margin-top:70px;
    color: rgb(255, 255, 255);
}

.p_s_tres #fondo_uno{
    background: url(../img/atotonilco_la_olla.jpg);
   background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.p_s_tres #fondo_dos{
    background: url(../img/atotonilco_libramiento.jpg);
   background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.p_s_tres #fondo_tres{
    background: url(../img/apaxco.jpg);
   background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.p_s_cuatro{
    width: calc(100% - 40px);
    padding: 60px 20px;
}
.img_ubicacion{
    width: 100px;
    display: block;
    margin: auto;
}
.txt_aquiesta_nonis{
    color: #49ccd4ff;
    font-size: 30px;
    line-height: 30px;
    margin: 0px;
    font-family: 'Poppins';
    font-weight: 700;
    text-align: center;
}
.txt_aquiesta_nonis_dos{
    color: #1a1a1aff;
    font-size: 17px;
    line-height: 17px;
    margin: 0px;
    font-family: 'Poppins';
    font-weight: 300;
    text-align: center;
    margin-bottom: 40px;
}

.btn_ubicaciones{
    background-color: rgb(238, 238, 238);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    padding: 15px;
    border: 0;
    width: 100%;
    margin: 10px 0px;
}

 .txt_ub_uno{
    color: #1a1a1aff;
    text-align: left;
    font-size: 20px;
    line-height: 20px;
    margin: 0;
    font-family: 'Poppins';
    font-weight: 600;
}
 .txt_ub_dos{
    color: #49ccd4ff;
    text-align: left;
    font-size: 22px;
    line-height: 22px;
    margin: 4px 0px;
    font-family: 'Poppins';
    font-weight: 500;
}
 .txt_ub_tres{
    color: #1a1a1aff;
    text-align: left;
    font-size: 15px;
    line-height: 15px;
    margin: 0;
    font-family: 'Poppins';
    font-weight: 300;
}

.btn_flotante {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 20px;
    left: 20px;
  }
  
  .btn_flotante {
    animation-name: animacionFlotante;
    animation-duration: 1s; /* Duración de la animación */
    animation-timing-function: ease-in-out; /* Función de temporización de la animación */
    animation-iteration-count: infinite; /* Número de repeticiones de la animación (infinito en este caso) */
    animation-direction: alternate; /* Dirección de la animación (de ida y vuelta en este caso) */
  }
  
  @keyframes animacionFlotante {
    0% {
      transform: translateY(0); /* Posición inicial de la animación */
    }
    100% {
      transform: translateY(10px); /* Posición final de la animación */
    }
  }
  
  .img_compartir {
    width: calc(100% - 00px);
    margin: 0 ;
    border-radius: 2px;
  }

  .btn_compartir {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 10px #000;
    animation: btnScale 1s infinite alternate ease-in-out;
    display:flex;
    justify-content: center;
    align-items: center;
}

@keyframes btnScale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

.btn_opciones_compartir {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icono_comparti_red {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: rgb(255, 255, 255);
    border: 0;
    margin-right: 10px;
    box-shadow: 0px 0px 10px #0000003b;
    animation: iconoScale 1s infinite alternate ease-in-out;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@keyframes iconoScale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

.txt_compartir {
    padding: 4px 8px;
    background-color: rgb(255, 255, 255);
    color: #4d4d4d;
    margin: 0;
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 10px;
    line-height: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    margin-right: 10px;
    box-shadow: 0px 0px 10px #0000003b;
    animation: txtScale 1s infinite alternate ease-in-out;
}

@keyframes txtScale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

.imagen_red_compartir {
    width: 100%;
}


.seccion_menu_todas_las_sucursales{
    width: calc(100% - 30px);
    max-width: 500px;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 40px 40px 0px 0px;
    position: fixed;
    bottom:0px;
    
    height: 0;
    transition: height 0.5s ease-in-out;
    left: 0;
    right: 0; /* Añade esta línea para ocupar todo el ancho horizontal */
    margin-left: auto; /* Establecer margen izquierdo automático */
    margin-right: auto;
}

@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
        opacity: 1;
    }
  }

.pantalla_negra_dos{
    background-color: #00000061;
    width: 100%;
    height: 100vh;
    position: fixed;
    top:0px;
    left: 0px;
    animation: fadeIn 0.5s forwards;
}

.titulo_div_menu_sucursal{
    width: calc(100% - 40px);
    padding: 10px 20px 25px 20px;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.mini_titulo_de_sucursal{
    color: #1a1a1aff;
    text-align: left;
    font-size: 17px;
    line-height: 17px;
    margin: 0px 10px;
    font-family: 'Poppins';
    font-weight: 300;
}
.mini_titulo_de_sucursal_dos{
    color: #49ccd4ff;
    text-align: left;
    font-size: 25px;
    line-height: 25px;
    margin: 0;
    font-family: 'Poppins';
    font-weight: 600;
}
.equisde_menu_sucursales{
    width: 40px;
    height: 40px;
    background-color: #b7b7b700;
    border: 0;
    display:flex;
    justify-content: center;
    align-items: center;
}
.equisde_menu_sucursales_img{
    width: 70%;
}
.img_representativa_sucursal{
    width: 100%;
    border-radius: 20px ;
    margin-bottom: 40px;
}
.img_menu_gif{
    width: 40px;
    border-radius: 10px;
}
.mini_titulo_de_sucursal_tres{
    color: #1a1a1aff;
    text-align: left;
    font-size: 16px;
    line-height:18px;
    margin: 5px 20px;
    font-family: 'Poppins';
    font-weight: 600;
}
.mini_titulo_de_sucursal_cuatro{
    color: #1a1a1aff;
    text-align: left;
    font-size: 16px;
    line-height:18px;
    margin: 5px 20px;
    font-family: 'Poppins';
    font-weight: 400;
}
.seccion_especifica_menu{
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 3px solid #49ccd4ff;
    border-radius: 40px;
    padding: 2px 10px;
    width: calc(100% - 80px);
    
}
.txt_ver_menu_ultimo_seccion{
    color: #1a1a1aff;
    text-align: left;
    font-size: 16px;
    line-height:18px;
    margin: 5px 20px;
    font-family: 'Poppins';
    font-weight: 600;
}
.seccion_especifica_menu_dos{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 0;
    background-color: #1a1a1aff;
    margin-left: 10px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.menu_y_contacto_ultimi_ultimo{
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff00;
    margin-top: 60px;
}

.img_wts_blanco_tarjeta_fianl_menu{
    width: 80%;
}

.creditos_jemis{
    width: calc(100% - 40px);
    background-color: #FF9A8B;
    background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
    padding: 20px;
}
.txt_creditos_uno{
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 16px;
    line-height:18px;
    margin: 5px 20px;
    font-family: 'Poppins';
    font-weight: 600;
}
.txt_creditos_dos{
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 7px;
    line-height:18px;
    margin: 5px 20px;
    font-family: 'Poppins';
    font-weight: 300;
}
.jemis_logo_creditos{
    width: 12px;
    display: block;
    margin: 15px auto 0px auto;
}





.pantalla_de_carga{
    background-color: #ffffff;
    width: 100%;
    height: 100vh;
    position: fixed;
    top:0px;
    left: 0px;
   
}
.pantalla_de_carga_logo{
    width: 100%;
    height: calc(90vh - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.creditos_pantalla_de_carga{
    color: rgb(53, 53, 53);
    text-align: center;
    font-size: 9px;
    line-height:12px;
    font-family: 'Poppins';
    font-weight: 500;
}


.loader  {
    
   width: 200px;
   margin-top: -10vh;
  }

  #polygon2398{
    animation: 
               fillChange 4s alternate infinite;
  }

.loader path {
    
    fill: #49ccd4ff; /* Color de relleno */
    stroke: #000;
    stroke-width: 0.4px;
    animation: dashArray 4s alternate infinite,
               dashOffset 4s alternate infinite,
               fillChange 4s alternate infinite,
               colorChange 4s alternate infinite;
  }
  
  @keyframes dashArray {
    0% {
      stroke-dasharray: 0 1 359 0;
    }
  
    50% {
      stroke-dasharray: 0 359 1 0;
    }
  
    100% {
      stroke-dasharray: 359 1 0 0;
    }
  }
  
  @keyframes dashOffset {
    0% {
      stroke-dashoffset: 365;
    }
  
    100% {
      stroke-dashoffset: 5;
    }
  }
  
  @keyframes colorChange {
    0% {
      stroke: #000;
    }
  
    90% {
        
        stroke-width: 0.0px;
      }
    100% {
      stroke: #49ccd4ff; /* Cambia a tu color deseado */
      stroke-width: 0.0px;
    }
  }

  @keyframes fillChange {
    0% {
      fill: #ffffff; /* Color inicial */
    }
    50% {
        fill: #ffffff; /* Color inicial */
      }
    80% {
        fill: #49ccd4ff; /* Cambia a tu color deseado */
      }
    100% {
        fill: #49ccd4ff; /* Color inicial */
      }
  }





/***   aqui comiensa el estilo del menu       **/



.div_colore{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 10px 15px 10px 15px;
    width: calc(100% - 50px);
    padding: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.lugar_del_menu{
    font-family: 'Poppins';
    font-weight: 600;
    color: rgb(59, 59, 59);
    text-align: center;
    margin: 20px 0px 0px 0px;
    font-size: 18px;
    line-height: 18px;
}

.colores_txt_uno{
    font-family: 'Poppins';
    font-weight: 700;
    color: rgb(59, 59, 59);
    text-align: center;
    margin: 20px 0px 0px 0px;
    font-size: 25px;
    line-height: 25px;
}
.colores_txt_dos{
    font-family: 'Poppins';
    font-weight: 200;
    color: rgb(59, 59, 59);
    text-align: center;
    margin: 00px 0px 0px 0px;
    font-size: 20px;
    line-height: 20px;
    width: 100%;
}
.txt_colores{
    font-family: 'Poppins';
    font-weight: 00;
    font-size: 15px;
    line-height: 15px;
    background-color: rgb(255, 255, 255);
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    padding: 2px 20px;
    margin: 0px 10px;
}

#p_frios{
    border: 2px solid #49ccd4ff;
    color: #49ccd4ff;
}
#p_calientes{
    border: 2px dashed #ff5000ff;
    color: #ff5000ff;
}
#b_calientes{
    border: 2px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);
}

#p_naturales{
    border: 2px dotted #78b82aff;
    color: #78b82aff;
}

#cocteles{
    border: 2px solid #1a1a1aff;
    color: #fff;
    background-color: #1a1a1aff;
}

.txt_colores_paratodos{
    margin: 10px 0px;
}

.titulo_de_la_seccion{
    font-family: 'Poppins';
    font-weight: 700;
    color: #1a1a1aff;
    text-align: left;
    margin: 20px 0px;
    font-size: 35px;
    line-height: 35px;
}

.clase_general_seccion_productos{
    width: calc(100% - 40px);
    padding: 20px;
    max-width: calc(100% - 40px);
    min-width: calc(100% - 40px);
    opacity: 0;
    animation: aparecer 1s forwards; /* Nombre de la animación y duración */
}

@keyframes aparecer {
  from {
    opacity: 0; /* Opacidad inicial */
  }
  to {
    opacity: 1; /* Opacidad final */
  }
}


.cajas_de_recuadros{
    border: solid 4px #000;
    width: calc(100% - 38px );
    padding: 15px;
    border-radius: 20px;
    margin: 15px 0px;
}

.titulo_de_recuadro_redondo{
    background-color: #1a1a1aff;
    font-family: 'Poppins';
    font-weight: 700;
    color: rgb(255, 255, 255);
    text-align: center;
    
    font-size: 25px;
    line-height: 25px;
    padding: 4px 20px;
    border-radius: 40px;
    width: auto; /* Cambia el ancho según sea necesario */
    display: inline-block; /* Cambia display a inline-block */
}
.margin_titulo_de_recuadro_redondo{
    display: block;
    margin: 10px 0px 20px 0px;
}

.nombre_y_precio{
    width: 100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0px 0px 0px;
}
.precio_flotante_right{
    background-color: rgba(3, 191, 113, 0);
    font-family: 'Poppins';
    font-weight: 600;
    color: #1a1a1aff;
    text-align: left;
    margin: 0px 0px 0px 15px;
    font-size: 20px;
    line-height: 20px;
}

.precio_en_texto_uno{
    font-family: 'Poppins';
    font-weight: 600;
    color: #1a1a1aff;
    text-align: center;
    font-size: 20px;
    line-height: 20px;
}

.nombre_pro{
    background-color: rgba(191, 3, 3, 0);
    font-family: 'Poppins';
    font-weight: 600;
    color: #1a1a1aff;
    text-align: left;
    margin: 0px 0px 0px 0px;
    font-size: 20px;
    line-height: 20px;
}
.descripcion_de_producto{
    background-color: rgba(191, 3, 3, 0);
    font-family: 'Poppins';
    font-weight: 300;
    color: #1a1a1aff;
    text-align: left;
    margin: 0px;
    font-size: 18px;
    line-height: 18px;
}

.titulo_complementos_precios{
    width: calc(100% - 30px);
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 15px 0px 15px;
}

.titulo_complementos_name{
    font-family: 'Poppins';
    font-weight: 400;
    color: #1a1a1aff;
    text-align: left;
    font-size: 18px;
    line-height: 18px;
    display: block;
    margin: 3px 0px 0px 10px;
}



.complementos_precios{
    width: calc(100% - 72px);
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 30px 0px 30px;
    border-left: solid 2px #000;
    padding: 0px 0px 0px 10px;
    
}

.nombre_complemento{
    font-family: 'Poppins';
    font-weight: 400;
    color: #1a1a1aff;
    text-align: left;
    font-size: 18px;
    line-height: 18px;
}

.productos_calientes{
    border: dashed 4px #ff5000ff;
}

.productos_calientes .nombre_pro{
    color: #ff5000ff;
}

.productos_calientes .precio_flotante_right{
    color: #ff5000ff;
}


.productos_calientes .titulo_de_recuadro_redondo{
    background-color: #ff5000ff;
}

 


.producto_frio{
    border: solid 4px #49ccd4ff;
}

.producto_frio .nombre_pro{
    color: #49ccd4ff;
}

.producto_frio .precio_flotante_right{
    color: #49ccd4ff;
}

.producto_frio .titulo_de_recuadro_redondo{
    background-color: #49ccd4ff;
}



.producto_caliente{
    border: solid 4px #1a1a1aff;
}

.producto_caliente .nombre_pro{
    color: #1a1a1aff;
}

.producto_caliente .precio_flotante_right{
    color: #1a1a1aff;
}

.producto_caliente .titulo_de_recuadro_redondo{
    background-color: #1a1a1aff;
}






.cocteles_sec{
    border: solid 4px #1a1a1aff;
    background: linear-gradient(-45deg, #1a1a1aff, #1a1a1aff, rgb(50, 50, 50), rgb(107, 107, 107), #1a1a1aff, #1a1a1aff, rgb(104, 104, 104), #1a1a1aff, #1a1a1aff);
	background-size: 400% 400%;
	-webkit-animation: gradient 10s ease infinite;
	        animation: gradient 10s ease infinite;
}
@-webkit-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.cocteles_sec .nombre_pro{
    color: rgb(255, 255, 255);
}

.cocteles_sec .precio_flotante_right{
    color: rgb(255, 255, 255);
}

.cocteles_sec .titulo_de_recuadro_redondo{
    background-color: rgb(255, 255, 255);
    color: #1a1a1aff;
}

.cocteles_sec .titulo_complementos_name{
    color: #fff;
}

.cocteles_sec .descripcion_de_producto{
    color: #fff;
}





.ensaladas_sec{
    border: dotted 4px #78b82aff;
}

.ensaladas_sec .nombre_pro{
    color: #78b82aff;
}

.ensaladas_sec .precio_flotante_right{
    color: #78b82aff;
}

.ensaladas_sec .titulo_de_recuadro_redondo{
    background-color: #78b82aff;
}






.botnos_classes{
    width: 100%;
    margin: 10px 0px;
    display: flex;
    overflow-x: auto; /* Activar el scroll horizontal cuando sea necesario */
    white-space: nowrap;
}
.botno_selecionar_clase{
    padding: 5px 10px;
    background-color: #fff;
    border-radius: 40px;
    margin: 10px 10px;
    font-family: 'Poppins';
    font-weight: 600;
    text-align: left;
    font-size: 18px;
    line-height: 18px;
}

.botnos_classes::-webkit-scrollbar {
    width: 15px;
    height: 5px;
}
  
.botnos_classes::-webkit-scrollbar-track {
    background: #cbcbcb;
    border-radius: 50px;
}
.botnos_classes::-webkit-scrollbar-thumb {
    background: #696969;
    border-radius: 50px;
}
.botnos_classes::-webkit-scrollbar-thumb:hover {
    background: #49ccd4ff;
}