/* CAMBIO DE PADDING EL HEADER DEL MOVIL */
header {
    padding: 1.75rem 1.5rem;
    z-index: 4; /* Asegura que el header esté por encima del menú */
}






/* EN EL MOVIL SI APARECE LA IMAGEN DE LA HAMBURGUESA */
.img_hamburguer {
    display: flex;
}

/* REESCALAMOS EL SVG */
label img {
    width: 120%;
    height: 25px;
    position: relative; /* Asegura que el SVG se mantenga en su lugar cuando el menú aparece */
    z-index: 999; /* Asegura que el SVG está por encima del menú */
}

/* CAMBIANDO EL TAMAÑO DEL LOGO */
.logo img {
    height: 53px;
}







/* EL MENU DESAPARECE Y DA PASO A LA HAMBURGUESA */
.menu {
    display: none;
}

/* AL SELECCIONAR LA HAMBURGUESA, ESTA ACTIVA LISTA_MENU Y SE APARECE */
#boton_menu:checked ~ .lista_menu {
    opacity: 1;
    visibility: visible; /* Asegura que el menú sea visible */
    top: 0;
}

/* Cambia la imagen de la hamburguesa a una cruz */
#boton_menu:checked + label img {
    content: url(../img/0-header-favicon/Icono-x2.svg);
}

/* FORMA DEL MENU QUE APARECE Y SU ANIMACIÓN DE OPACIDAD */
.lista_menu {
    display: flex;
    flex-direction: column;
    background-color: var(--col-base-background);
    position: fixed; /* Asegura que el menú esté en una posición fija en la pantalla */
    top: 0; /* Empieza desde la parte superior */
    right: 0;
    width: 100%;
    height: 100vh; /* Ocupa toda la altura de la vista */
    opacity: 0;
    visibility: hidden; /* Inicialmente oculto */
    z-index: 3; /* Asegura que el menú esté por encima del contenido, pero por debajo del header */
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    padding-top: 0; /* Ajusta el padding según sea necesario */
    justify-content: center; /* Centra los elementos verticalmente */
}

/* COLOCACIÓN DE LOS ELEMENTOS DEL MENU */
.menu__item {
    text-align: center;
    padding: 1.2em;
    border-bottom: 1px solid var(--col-font-background);
}

/* ELIMINAR REBORDE AL FINAL DEL ULTIMO ATAJO */
.menu__item:last-child {
    border-bottom: 0;
}

/* CAMBIO DE COLOR AL COLOCAR EL CURSOR ENCIMA */
.menu__item:hover {
    background-color: rgb(38, 38, 38);
}