/* ============================================================
   NAV MÓVIL — overlay a pantalla completa
   ============================================================ */
@media screen and (max-width: 1024px) {
    .contenedor-header header nav {
        display: none;
    }

    /* El min-width que equilibra logo y controles solo hace falta en
       escritorio para centrar el menú; en móvil no hay menú que centrar */
    .logo,
    .nav-controles {
        min-width: 0;
    }

    .lang-switch--header {
        display: none;
    }

    .lang-switch--menu {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }

    .nav-responsive {
        display: flex;
    }

    .contenedor-header header nav.responsive {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(var(--bg-primary-rgb), 0.98);
        backdrop-filter: blur(10px);
        z-index: 1000;
        animation: fadeIn 0.25s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .contenedor-header header nav.responsive ul {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .contenedor-header header nav.responsive ul li {
        width: 100%;
        text-align: center;
        margin: 8px 0;
        padding: 6px 0;
    }

    .contenedor-header header nav.responsive ul li a {
        font-family: var(--font-display);
        font-size: 26px;
        font-weight: 600;
        padding: 10px;
        display: block;
        margin: 0;
    }
}

/* ============================================================
   RESPONSIVE GENERAL
   ============================================================ */
@media screen and (max-width: 900px) {

    .proyecto-destacado {
        grid-template-columns: 1fr;
    }

    .destacado-img {
        min-height: 220px;
    }

    .inicio-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .inicio-texto .etiqueta-rol {
        margin-inline: auto;
    }

    .inicio-texto .redes {
        justify-content: center;
    }

    .inicio-foto {
        order: -1;
    }

    .sobremi-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-marca {
        grid-column: 1 / -1;
    }

    .footer-marca p {
        max-width: none;
    }
}

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

    .sobremi,
    .skills,
    .portfolio,
    .certificados,
    .curriculum {
        padding: 80px 0;
    }

    .inicio {
        padding: 120px var(--pad) 60px;
        min-height: auto;
    }

    .sobremi-texto p {
        text-align: left;
    }

    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-stat {
        border-bottom: 1px solid var(--glass-border);
    }

    .hero-stat:nth-child(odd) {
        border-right: 1px solid var(--glass-border);
    }

    .hero-stat:last-child {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: none;
    }

    .hero-stat:nth-last-child(n + 2):nth-last-child(-n + 3) {
        border-bottom: none;
    }

    footer {
        padding-top: 70px;
        text-align: left;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-marca {
        grid-column: auto;
    }

    .footer-bottom-inner {
        justify-content: center;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .contenedor-header header .logo a {
        font-size: 22px;
    }

    button,
    .cv-btn button {
        padding: 14px 26px;
        font-size: 15px;
    }
}