/* ============================================
   MENÚ MÓVIL ULTRA MODERNO 2025
   Diseño Premium con Glassmorphism & Animaciones
   ============================================ */

/* Ocultar elementos del menú móvil en desktop */
.nav__menu-footer {
    display: none;
}

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

    /* ============================================
       TOGGLE BUTTON - Hamburger Animado Premium
       ============================================ */

    .nav__toggle {
        display: flex;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, rgba(21, 51, 98, 0.95), rgba(30, 66, 117, 0.95));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 2px solid rgba(182, 138, 84, 0.3);
        box-shadow:
            0 8px 32px rgba(21, 51, 98, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
        z-index: 1001;
        cursor: pointer;
    }

    /* Efecto de brillo en el botón */
    .nav__toggle::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(
            from 0deg,
            transparent,
            rgba(182, 138, 84, 0.3),
            transparent 60deg
        );
        animation: rotate-shine 3s linear infinite;
    }

    @keyframes rotate-shine {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .nav__toggle i {
        position: relative;
        z-index: 2;
        color: var(--gold-beige);
        font-size: 1.5rem;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .nav__toggle:active {
        transform: scale(0.95);
    }

    /* Animación del icono hamburger a X */
    .nav__toggle i {
        display: none;
    }

    .nav__toggle {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 12px;
    }

    .nav__toggle::after,
    .nav__toggle span {
        content: '';
        display: block;
        width: 24px;
        height: 3px;
        background: linear-gradient(90deg, var(--gold-beige), var(--gold-light));
        border-radius: 3px;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        position: relative;
        z-index: 2;
    }

    .nav__toggle span {
        margin: 3px 0;
    }

    /* Cuando el menú está abierto */
    .nav__menu.show-menu ~ .nav__toggle::after {
        transform: rotate(45deg) translateY(9px);
    }

    .nav__menu.show-menu ~ .nav__toggle span:first-of-type {
        opacity: 0;
        transform: translateX(-20px);
    }

    .nav__menu.show-menu ~ .nav__toggle span:last-of-type {
        transform: rotate(-45deg) translateY(-9px);
    }

    /* ============================================
       MENÚ - Glassmorphism Full Screen Premium
       ============================================ */

    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background:
            linear-gradient(135deg,
                rgba(21, 51, 98, 0.98) 0%,
                rgba(13, 31, 58, 0.98) 50%,
                rgba(21, 51, 98, 0.98) 100%
            );
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        padding: 0;
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        z-index: 1000;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Patrón de fondo animado */
    .nav__menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image:
            radial-gradient(circle at 20% 50%, rgba(182, 138, 84, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(182, 138, 84, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 40% 20%, rgba(182, 138, 84, 0.08) 0%, transparent 50%);
        animation: pattern-float 15s ease-in-out infinite;
        pointer-events: none;
    }

    @keyframes pattern-float {
        0%, 100% { transform: translate(0, 0) scale(1); }
        33% { transform: translate(30px, -30px) scale(1.1); }
        66% { transform: translate(-20px, 20px) scale(0.9); }
    }

    /* Partículas doradas flotantes */
    .nav__menu::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image:
            radial-gradient(2px 2px at 20% 30%, rgba(182, 138, 84, 0.6), transparent),
            radial-gradient(2px 2px at 60% 70%, rgba(182, 138, 84, 0.6), transparent),
            radial-gradient(3px 3px at 80% 10%, rgba(182, 138, 84, 0.6), transparent),
            radial-gradient(2px 2px at 40% 80%, rgba(182, 138, 84, 0.6), transparent),
            radial-gradient(2px 2px at 90% 50%, rgba(182, 138, 84, 0.6), transparent);
        background-size: 200% 200%;
        animation: sparkle 10s linear infinite;
        pointer-events: none;
    }

    @keyframes sparkle {
        0%, 100% { background-position: 0% 0%; opacity: 1; }
        50% { background-position: 100% 100%; opacity: 0.5; }
    }

    .nav__menu.show-menu {
        right: 0;
    }

    /* ============================================
       LISTA DE NAVEGACIÓN - Diseño Vertical Premium
       ============================================ */

    .nav__list {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 2rem 1.5rem;
        position: relative;
        z-index: 2;
        width: 90%;
        max-width: 450px;
        margin: 0 auto;
    }

    .nav__item {
        opacity: 0;
        transform: translateX(100px);
        animation: none;
    }

    /* Animación escalonada de entrada */
    .nav__menu.show-menu .nav__item:nth-child(1) {
        animation: slideInRight 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s forwards;
    }

    .nav__menu.show-menu .nav__item:nth-child(2) {
        animation: slideInRight 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s forwards;
    }

    .nav__menu.show-menu .nav__item:nth-child(3) {
        animation: slideInRight 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s forwards;
    }

    .nav__menu.show-menu .nav__item:nth-child(4) {
        animation: slideInRight 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s forwards;
    }

    .nav__menu.show-menu .nav__item:nth-child(5) {
        animation: slideInRight 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s forwards;
    }

    @keyframes slideInRight {
        0% {
            opacity: 0;
            transform: translateX(100px) rotateY(90deg);
        }
        100% {
            opacity: 1;
            transform: translateX(0) rotateY(0);
        }
    }

    /* ============================================
       ENLACES - Glassmorphism Cards con Efectos
       ============================================ */

    .nav__link {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1.15rem 1.25rem;
        margin: 0.5rem 0;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(6, 182, 212, 0.3);
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #ffffff;
        position: relative;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow:
            0 4px 20px rgba(6, 182, 212, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        min-height: 52px;
    }

    /* Icono decorativo - eliminado para diseño centrado */
    .nav__link::before {
        display: none;
    }

    /* Efecto de onda al tocar */
    .nav__link::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(6, 182, 212, 0.4), transparent);
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
    }

    .nav__link:active::after {
        width: 300px;
        height: 300px;
    }

    .nav__link:hover,
    .nav__link:active {
        background: rgba(6, 182, 212, 0.2);
        border-color: rgba(6, 182, 212, 0.6);
        transform: translateY(-3px) scale(1.02);
        box-shadow:
            0 8px 32px rgba(6, 182, 212, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        color: #22d3ee;
    }

    /* Link activo */
    .nav__link.active-link {
        background: linear-gradient(135deg,
            rgba(6, 182, 212, 0.3),
            rgba(34, 211, 238, 0.3)
        );
        border: 2px solid rgba(6, 182, 212, 0.6);
        box-shadow:
            0 0 25px rgba(6, 182, 212, 0.6),
            0 4px 20px rgba(6, 182, 212, 0.3),
            inset 0 0 20px rgba(6, 182, 212, 0.2);
        color: #22d3ee;
    }

    /* Botón CTA especial */
    .nav__link--cta {
        background: linear-gradient(135deg, #06b6d4, #0891b2);
        border: 2px solid #22d3ee;
        color: #ffffff;
        font-weight: 900;
        margin-top: 1rem;
        box-shadow:
            0 8px 32px rgba(6, 182, 212, 0.5),
            inset 0 2px 0 rgba(255, 255, 255, 0.3);
        animation: cta-pulse 2s ease-in-out infinite;
    }

    @keyframes cta-pulse {
        0%, 100% {
            box-shadow:
                0 8px 32px rgba(6, 182, 212, 0.5),
                inset 0 2px 0 rgba(255, 255, 255, 0.3);
        }
        50% {
            box-shadow:
                0 8px 48px rgba(6, 182, 212, 0.8),
                inset 0 2px 0 rgba(255, 255, 255, 0.5);
        }
    }

    .nav__link--cta:hover {
        background: linear-gradient(135deg, #22d3ee, #06b6d4);
        transform: translateY(-3px) scale(1.05);
    }

    /* ============================================
       BOTÓN DE CERRAR - Premium Design
       ============================================ */

    .nav__close {
        display: flex;
        position: absolute;
        top: 2rem;
        right: 2rem;
        width: 50px;
        height: 50px;
        background: rgba(182, 138, 84, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 2px solid rgba(182, 138, 84, 0.5);
        border-radius: 50%;
        z-index: 3;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow:
            0 4px 16px rgba(182, 138, 84, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .nav__close i {
        color: var(--gold-light);
        font-size: 1.5rem;
        transition: all 0.3s ease;
    }

    .nav__close:hover {
        background: rgba(231, 76, 60, 0.3);
        border-color: #e74c3c;
        transform: rotate(90deg) scale(1.1);
        box-shadow:
            0 8px 32px rgba(231, 76, 60, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .nav__close:hover i {
        color: #e74c3c;
    }

    .nav__close:active {
        transform: rotate(90deg) scale(0.95);
    }

    /* ============================================
       INFORMACIÓN ADICIONAL EN EL MENÚ
       ============================================ */

    .nav__menu-footer {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.5s ease 0.6s;
        display: block;
    }

    .nav__menu.show-menu .nav__menu-footer {
        opacity: 1;
    }

    .nav__menu-info {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 1rem;
    }

    .nav__menu-social {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }

    .nav__menu-social a {
        width: 45px;
        height: 45px;
        background: rgba(6, 182, 212, 0.2);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(6, 182, 212, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #06b6d4;
        font-size: 1.2rem;
        transition: all 0.3s ease;
    }

    .nav__menu-social a:hover {
        background: #06b6d4;
        color: #ffffff;
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 8px 16px rgba(6, 182, 212, 0.5);
    }

    /* ============================================
       ANIMACIÓN DE ENTRADA DEL LOGO
       ============================================ */

    /* ============================================
       EFECTOS ADICIONALES Y MICRO-INTERACCIONES
       ============================================ */

    /* Cursor personalizado en hover */
    .nav__link {
        cursor: pointer;
    }

    /* Prevenir scroll cuando el menú está abierto */
    body.menu-open {
        overflow: hidden;
    }

    /* Efecto de desenfoque en el contenido de fondo */
    .header.menu-open ~ .main {
        filter: blur(5px);
        transition: filter 0.3s ease;
    }
}

/* ============================================
   ANIMACIONES ADICIONALES PARA TABLETS
   ============================================ */

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .nav__toggle {
        display: flex;
    }

    .nav__menu {
        width: 400px;
    }
}

/* ============================================
   MEJORAS RESPONSIVE PARA MÓVILES PEQUEÑOS
   ============================================ */

@media screen and (max-width: 640px) {
    .nav__list {
        padding: 1.5rem 1.25rem;
        gap: 0;
    }

    .nav__link {
        padding: 1rem 1rem;
        margin: 0.4rem 0;
        font-size: 0.95rem;
        letter-spacing: 1.25px;
        min-height: 50px;
    }

    .nav__link--cta {
        margin-top: 0.75rem;
    }

    .nav__close {
        top: 1.5rem;
        right: 1.5rem;
        width: 46px;
        height: 46px;
    }

    .nav__close i {
        font-size: 1.4rem;
    }

    .nav__menu-footer {
        bottom: 1.5rem;
    }

    .nav__menu-info {
        font-size: 0.85rem;
        margin-bottom: 0.85rem;
    }

    .nav__menu-social a {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
}

@media screen and (max-width: 480px) {
    .nav__toggle {
        width: 46px;
        height: 46px;
    }

    .nav__toggle::after,
    .nav__toggle span {
        width: 22px;
        height: 2.5px;
    }

    .nav__list {
        padding: 1.25rem 1rem;
    }

    .nav__link {
        padding: 0.95rem 0.85rem;
        margin: 0.35rem 0;
        font-size: 0.9rem;
        letter-spacing: 1px;
        min-height: 48px;
    }

    .nav__close {
        top: 1.25rem;
        right: 1.25rem;
        width: 44px;
        height: 44px;
    }

    .nav__close i {
        font-size: 1.3rem;
    }

    .nav__menu-footer {
        bottom: 1.25rem;
    }

    .nav__menu-social a {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

@media screen and (max-width: 350px) {
    .nav__toggle {
        width: 44px;
        height: 44px;
    }

    .nav__toggle::after,
    .nav__toggle span {
        width: 20px;
        height: 2px;
    }

    .nav__list {
        padding: 1rem 0.85rem;
    }

    .nav__link {
        padding: 0.85rem 0.75rem;
        margin: 0.3rem 0;
        font-size: 0.85rem;
        letter-spacing: 0.75px;
        min-height: 46px;
    }

    .nav__link--cta {
        margin-top: 0.5rem;
        padding: 0.9rem 0.75rem;
    }

    .nav__close {
        top: 1rem;
        right: 1rem;
        width: 42px;
        height: 42px;
    }

    .nav__close i {
        font-size: 1.2rem;
    }

    .nav__menu-footer {
        bottom: 1rem;
    }

    .nav__menu-info {
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
    }

    .nav__menu-social {
        gap: 0.75rem;
    }

    .nav__menu-social a {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }
}