.menu{
    display: flex;
    align-items: center;
}


.menu ul{
    display: flex;
    align-items: center;
}

.menu ul li{
    list-style: none;
    margin-left: 36px;
}


.menu nav img{
    display: none;
}

.menu #btn_menu{
    display: none;
}

#back_menu{
    display: none;
}



/*Haciendo la página Responsive: menú overlay a pantalla completa*/
/* Mismo breakpoint (810px) que resolucionindex.css para que no haya
   una franja donde se mezclen el menú de escritorio y el de móvil */

@media screen and (max-width:810px){

    header{
        padding: 0px;
    }

    .nav{
        padding-left: 25px;
        padding-right: 20px;
    }

    .menu{
        margin-right: 0;
        margin-left: auto;
    }

    /* Botón hamburguesa: cuadrado redondeado, las rayas se vuelven X al abrir */
    .menu #btn_menu{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 46px;
        height: 46px;
        background: #fff;
        border: 2px solid #0e0e0e;
        border-radius: 12px;
        box-shadow: 3px 3px 0 #e72c76;
        cursor: pointer;
        transition: all 300ms;
        position: relative;
        z-index: 14;
    }

    .menu #btn_menu span{
        display: block;
        width: 20px;
        height: 3px;
        border-radius: 2px;
        background: #0e0e0e;
        transition: transform 300ms ease, opacity 200ms ease, background 300ms ease;
    }

    .menu #btn_menu:hover span{
        background: #e72c76;
    }

    .menu #btn_menu.abierto span:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }

    .menu #btn_menu.abierto span:nth-child(2){
        opacity: 0;
        transform: scaleX(0);
    }

    .menu #btn_menu.abierto span:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Overlay a pantalla completa: se revela en círculo desde el botón */
    .menu nav{
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        /* Fondo transparente: se ven las nubes REALES del fondo de la
           página (mismos elementos, misma animación, cero desfase).
           Solo añadimos la mancha rosa de la esquina. */
        background: radial-gradient(circle 160px at calc(100% - 50px) calc(100% - 30px), #fdeaf2 0 158px, rgba(253, 234, 242, 0) 160px);
        z-index: 12;
        display: flex;
        align-items: center;
        padding: 0 38px;
        overflow: hidden;
        overscroll-behavior: contain;
        clip-path: circle(0px at calc(100% - 43px) 50px);
        visibility: hidden;
        transition: clip-path 650ms cubic-bezier(0.65, 0, 0.25, 1), visibility 0s 650ms;
    }

    .menu nav.abierto{
        clip-path: circle(150% at calc(100% - 43px) 50px);
        visibility: visible;
        transition: clip-path 650ms cubic-bezier(0.65, 0, 0.25, 1);
    }

    /* Al abrir el menú se desvanece el contenido de la página: queda
       solo el cielo con sus nubes (las de verdad) y encima el menú */
    .cabecera,
    #proyectos,
    #servicios,
    #contacto,
    .footer-cloud-divider,
    footer,
    #button-up{
        transition: opacity 250ms ease;
    }

    body.menu-abierto .cabecera,
    body.menu-abierto #proyectos,
    body.menu-abierto #servicios,
    body.menu-abierto #contacto,
    body.menu-abierto .footer-cloud-divider,
    body.menu-abierto footer,
    body.menu-abierto #button-up{
        opacity: 0 !important;
        pointer-events: none;
    }

    .menu ul{
        flex-direction: column;
        align-items: flex-start;
        margin: 0;
        width: 100%;
        position: relative;
        z-index: 1;
    }

    /* Entrada escalonada de los enlaces */
    .menu ul li{
        margin: 0 0 32px 0;
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 400ms ease, transform 400ms ease;
        transition-delay: 0ms;
    }

    .menu nav.abierto ul li{
        opacity: 1;
        transform: translateY(0);
    }

    .menu nav.abierto ul li:nth-child(1){ transition-delay: 250ms; }
    .menu nav.abierto ul li:nth-child(2){ transition-delay: 340ms; }
    .menu nav.abierto ul li:nth-child(3){ transition-delay: 430ms; }
    .menu nav.abierto ul li:nth-child(4){ transition-delay: 520ms; }
    .menu nav.abierto ul li:nth-child(5){ transition-delay: 610ms; }

    .menu ul li a{
        color: #0e0e0e;
        font-size: 36px;
        font-weight: 900;
    }

    .menu ul li a:hover{
        padding: 0;
        background: none;
    }

    /* Círculos rosas junto a las secciones */
    .menu ul li:nth-child(-n+3) a{
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .menu ul li:nth-child(-n+3) a::before{
        content: "";
        width: 13px;
        height: 13px;
        border-radius: 50%;
        border: 3px solid #e72c76;
        background: transparent;
        flex-shrink: 0;
        transition: background 300ms ease, transform 300ms ease;
    }

    .menu ul li:nth-child(-n+3) a:hover::before,
    .menu ul li:nth-child(-n+3) a:active::before{
        background: #e72c76;
        transform: scale(1.15);
    }

    .menu ul li:nth-child(4) a{
        font-size: 26px;
    }

    .menu ul li.lang-li{
        margin-top: 6px;
        margin-bottom: 0;
    }

}


@media screen and (max-width: 480px){
    .logo img{
        width: 44px;
    }

    .menu ul li a{
        font-size: 30px;
    }
}