.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    color: #fff;
    cursor: pointer;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible {
    background: rgba(255,255,255,.14);
    outline: 2px solid #6EE7B7;
    outline-offset: 2px;
}

.mobile-menu-toggle svg { width: 24px; height: 24px; }

@media (max-width: 900px) {
    header .nav-container { position: relative; }
    header .nav-right { gap: .65rem; }
    header .mobile-menu-toggle { display: inline-flex; }
    header .nav-right .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + .65rem);
        right: 1.25rem;
        z-index: 1100;
        width: min(290px, calc(100vw - 2.5rem));
        padding: .65rem;
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 14px;
        background: rgba(10,15,29,.98);
        box-shadow: 0 18px 45px rgba(0,0,0,.35);
    }
    header .nav-right.mobile-open .nav-links { display: flex; }
    header .nav-right .nav-links li { width: 100%; }
    header .nav-right .nav-links a {
        display: block;
        width: 100%;
        padding: .8rem .9rem;
        border-radius: 9px;
        font-size: .95rem;
    }
    header .nav-right .nav-links a:hover,
    header .nav-right .nav-links a:focus-visible,
    header .nav-right .nav-links a.active {
        background: rgba(11,122,90,.2);
        outline: none;
    }
}

@media (max-width: 620px) {
    html, body { max-width: 100%; overflow-x: clip; }
    /* En portada el CTA adicional no cabe junto al logo, idiomas y menú. El acceso
       a contacto sigue estando disponible en el menú desplegable y en el hero. */
    header .btn-header { display: none; }
    header .logo-text { display: none; }
    header .nav-container { padding-left: 1rem; padding-right: 1rem; gap: .6rem; }
    header .logo-container { min-width: 0; flex: 0 1 auto; }
    header .logo-img { max-width: 82px; }
    header .nav-right { min-width: 0; gap: .35rem; margin-left: auto; }
    header .lang-selector { min-width: 0; gap: 1px; padding: 3px; }
    header .lang-btn { width: 32px; min-width: 0; gap: 0; padding: 6px; font-size: 0; }
    header .flag-icon { width: 20px; height: 15px; flex: 0 0 auto; }
    header .nav-right .nav-links { right: 1rem; width: calc(100vw - 2rem); }
}

@media (max-width: 370px) {
    header .nav-container { padding-left: .65rem; padding-right: .65rem; gap: .35rem; }
    header .logo-img { max-width: 68px; }
    header .nav-right { gap: .25rem; }
    header .lang-btn { width: 28px; padding: 5px 4px; }
    header .flag-icon { width: 18px; height: 14px; }
    header .mobile-menu-toggle { width: 40px; height: 40px; flex-basis: 40px; }
    header .nav-right .nav-links { right: .65rem; width: calc(100vw - 1.3rem); }
}