/* Estilo para usuarios PRO */
@keyframes proBorderColorCycle {
    0%   { border-color: #ff4d4d; }
    33%  { border-color: #ffae33; }
    66%  { border-color: #00cfff; }
    100% { border-color: #ff4d4d; }
}

.nav-button.pro-border {
    box-shadow: var(--shadow);
    animation: shadowColorCycle 3s linear infinite;
    border-radius: 8px; /* Bordes redondeados */
    padding: 0.5rem 1rem; /* Espaciado interno */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    border: 2.5px solid #ff4d4d;
    animation-name: shadowColorCycle, proBorderColorCycle;
    animation-duration: 3s, 1s;
    animation-iteration-count: infinite, infinite;
    animation-timing-function: linear, linear;
}

.nav-button.pro-border:hover {
    border-color: #ffae33; /* Cambia el color del borde al pasar el cursor */
    box-shadow: 0 0 10px rgba(255, 157, 0, 0.8); /* Efecto de brillo */
}