/* CARRITO CANTIDADES EN EL HEADER CONTADOR */
.carrito-menu-hmaburguesa {
    padding: 10px 15px;
    background-color: #39AC58;
    right: 0; /* Ajusta la posición a la esquina izquierda */
    top: 0; /* Ajusta la posición arriba */
    z-index: 50;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
   
}

.menu-hmaburguesa {
padding: 5px;
vertical-align: middle;
display: none;
}



.cart {
 border: 2px solid #fff;
    color: floralwhite;
    font-size: 1rem;
    vertical-align: middle;
    padding: 5px 4px;
    background-color: dodgerblue;
    border-radius: 100%;
}

.cantidad-carrito {
    position: absolute;
    top: 1.8%;
    margin-left: -2.3%;
    background-color: orangered;
    border: 2px solid #fff;
    border-radius: 100%;
    padding: 2px 6px;
}

    #menu-icon {
    color: seashell;
     font-size: 1.2rem;
    vertical-align: middle;
    padding: 10px;
    margin-left: 20px; 


    }

    #menu-icon:hover {
      color: khaki;
    }

/* FIN CARRITO CANTIDADES EN EL HEADER CONTADOR */





/* MENU-PRINCIPAL */
.incio-secion{
 padding: 7px;
    background-color: aliceblue;
    margin: 5px;
    border-radius: 100px;
    color: dodgerblue;
    font-size: 1rem;
}

.incio-secion:hover{

    background-color: gainsboro;

}


.promo{
background-image: url(../img/portadas/portada-general.jpg);
height: 122px;
background-size: cover;
background-position: bottom;

}


.po:hover{
opacity: 1;
}

.promocion {
    height: auto;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    
    
}

.menu-pc {
    width: 100%;
    background: #eee;
    text-align: left;
    height: 400px; /* Puedes ajustar la altura según tus necesidades */
    overflow-y: auto;
    font-size: 14px;
    color: #333;
 
    /* Estilos para el scrollbar en WebKit (Chrome, Safari) */
    scrollbar-width: thin; /* Para Firefox, se puede ajustar a 'auto' o 'thin' según preferencias */
    scrollbar-color: #555 #eee; /* Color del scrollbar y su fondo */

    /* Estilos para el scrollbar en Firefox */
    scrollbar-face-color: #555; /* Color del scrollbar */
    scrollbar-track-color: #eee; /* Color del fondo del scrollbar */

    /* Estilos adicionales para el scrollbar en WebKit (Chrome, Safari) */
    &::-webkit-scrollbar {
        width: 12px; /* Ancho del scrollbar */
    }

    &::-webkit-scrollbar-thumb {
        background-color: #555; /* Color del "pulgarcito" del scrollbar */
        border-radius: 6px; /* Radio de borde del "pulgarcito" */
    }

    &::-webkit-scrollbar-track {
        background-color: #eee; /* Color del fondo del scrollbar */
        border-radius: 6px; /* Radio de borde del fondo del scrollbar */
    }
}




span {

    font-size: 14px;
    vertical-align: middle;

}

.conte-imagenes {
    display: grid;
    grid-template-columns: 1fr 3fr;
    text-align: center;

}


#btn{
display: none;
}


.logo-me{
padding: 5px;
}



.categoria-imagen {
    width: 20px; /* ajusta según sea necesario */
    height: 20px; /* ajusta según sea necesario */
    margin-right: 5px; /* espacio entre la imagen y el texto */
    vertical-align: middle;
}
.categoria a {
    color: inherit; /* heredar el color del texto del contenedor */
    text-decoration: none; /* quitar la subrayado predeterminado de los enlaces */
}



.portada{
   height: 85px;
    background-image: url(../img/portadas/portada-general.jpg);
    background-size: cover;
    background-position: center;
    max-width: 100%;
    display: flex;
    align-items: center;
}


a{
 text-decoration: none;
color: red;
}
header{
color: aliceblue;
display: flex;
justify-content:flex-end;


}


.cerrar{
margin-left: -50px;

}

label{
cursor: pointer;
}
header ul{
padding: 0;
}
.menu-pc{

}
.categoria-conte{
  background-color: navajowhite; 
padding: 1px;

    
}

.category{
    color: dimgrey;
    font-size: 1rem;
    padding: 7px;

}
.categorias-seleccionadas {
    text-align: left; /* Alinea las categorías a la izquierda */
    padding-left: 0; /* Elimina el relleno izquierdo predeterminado de la lista */
}


li{
padding: 7px;
list-style: none;
font-weight:700;
font-family: sans-serif;
border-bottom: 0.1px solid #999;
color: slategrey;
}


li:hover{
background: #fff;
color: #444;
cursor: pointer;
}


.menu{
position: fixed;
background: #eee;
padding: 0;
height: 100%;
width: 25%;
margin-right: -100%;
transition: all 1s;
z-index: 99;

}
#btn:checked ~ .menu{
margin: 0;

}


@media (max-width:850px){

.menu{
width: 65%;
margin-left: 2%;
}


.cerrar{
margin-left: -50px;

}
    .menu-hmaburguesa {
   display:inline-block;
 
}

.portada{
text-align: right;
}
        
.promocion {
    height: 300px;

    
    
}
    
        .menu-pc {
        display: none;


    }
        .conte-imagenes {
        grid-template-columns: 1fr;


    }
  


}

/* FIN MENU-PRINCIPAL */