:root {
    /* Tipografías */
    --font-title: 'Cormorant Garamond', serif;
    --font-body: 'Lora', serif;
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: #1a0736;
    /* The default color of the main navmenu links */
    --nav-hover-color: #ffffff;
    /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff;
    /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff;
    /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #0353ff;
    /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #00ff84;
    /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* .navbar-nav .nav-item .nav-link.active {
    background: linear-gradient(135deg, #7d37b6 50%, #7722da 100%) !important;
    border: 1px solid #ffffff !important;
} */

#nav-cta {
    animation: glowPulse 1.8s ease-in-out infinite;
    transform-origin: center;
    filter: brightness(1.05);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

#nav-cta:hover {
    background-color: #7d4d94;
    color: #ffc107 !important;
    filter: brightness(1.15);
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.8),
        0 0 50px rgba(255, 193, 7, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    #nav-cta {
        animation: fadeInUpNavItem 0.8s ease forwards;
    }

    @keyframes fadeInUpNavItem {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@keyframes glowPulse {

    0%,
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.6),
            0 0 20px rgba(255, 193, 7, 0.3);
    }

    50% {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 0 20px rgba(255, 193, 7, 0.8),
            0 0 40px rgba(255, 193, 7, 0.4);
    }
}



@media (prefers-reduced-motion: reduce) {
    #nav-cta {
        animation: fadeInUpNavItem 0.8s ease forwards;
    }

    @keyframes fadeInUpNavItem {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}