/* ===================================
   1. CAMBIO DE FUENTE GLOBAL
   =================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap');

:root {
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* {
    font-family: 'Inter', sans-serif;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

html, body {
    overflow-x: hidden;
}

body {
    min-height: 100dvh;
}

/* ===================================
   2. BASE DE BOTONES CON ANIMACIONES
   =================================== */
.btn {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    --bs-btn-box-shadow: none !important;
    --bs-btn-focus-box-shadow: none !important;
    --bs-btn-active-box-shadow: none !important;
}

/* Efecto ripple al hacer clic */
.btn:active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    animation: ripple 0.4s ease-out;
}

@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

/* ========== PRIMARY ========== */
.btn-primary {
    --bs-btn-bg: #3b82f6 !important;
    --bs-btn-border-color: #3b82f6 !important;
    --bs-btn-color: white !important;
    --bs-btn-hover-bg: #2563eb !important;
    --bs-btn-hover-border-color: #2563eb !important;
    --bs-btn-hover-color: white !important;
    --bs-btn-active-bg: #1d4ed8 !important;
    --bs-btn-active-border-color: #1d4ed8 !important;
    --bs-btn-active-color: white !important;
    --bs-btn-focus-bg: #3b82f6 !important;
    --bs-btn-focus-color: white !important;
    --bs-btn-box-shadow: none !important;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4) !important;
    --bs-btn-active-box-shadow: none !important;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.btn-primary:active {
    transform: translateY(0);
}

/* ========== SECONDARY ========== */
.btn-secondary {
    --bs-btn-bg: #64748b !important;
    --bs-btn-border-color: #64748b !important;
    --bs-btn-color: white !important;
    --bs-btn-hover-bg: #475569 !important;
    --bs-btn-hover-border-color: #475569 !important;
    --bs-btn-hover-color: white !important;
    --bs-btn-active-bg: #334155 !important;
    --bs-btn-active-border-color: #334155 !important;
    --bs-btn-active-color: white !important;
    --bs-btn-focus-bg: #64748b !important;
    --bs-btn-focus-color: white !important;
    --bs-btn-box-shadow: none !important;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.4) !important;
    --bs-btn-active-box-shadow: none !important;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3) !important;
}

.btn-secondary:active {
    transform: translateY(0);
}

/* ========== SUCCESS ========== */
.btn-success {
    --bs-btn-bg: #10b981 !important;
    --bs-btn-border-color: #10b981 !important;
    --bs-btn-color: white !important;
    --bs-btn-hover-bg: #059669 !important;
    --bs-btn-hover-border-color: #059669 !important;
    --bs-btn-hover-color: white !important;
    --bs-btn-active-bg: #047857 !important;
    --bs-btn-active-border-color: #047857 !important;
    --bs-btn-active-color: white !important;
    --bs-btn-focus-bg: #10b981 !important;
    --bs-btn-focus-color: white !important;
    --bs-btn-box-shadow: none !important;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4) !important;
    --bs-btn-active-box-shadow: none !important;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.btn-success:active {
    transform: translateY(0);
}

/* ========== DANGER ========== */
.btn-danger {
    --bs-btn-bg: #ef4444 !important;
    --bs-btn-border-color: #ef4444 !important;
    --bs-btn-color: white !important;
    --bs-btn-hover-bg: #dc2626 !important;
    --bs-btn-hover-border-color: #dc2626 !important;
    --bs-btn-hover-color: white !important;
    --bs-btn-active-bg: #b91c1c !important;
    --bs-btn-active-border-color: #b91c1c !important;
    --bs-btn-active-color: white !important;
    --bs-btn-focus-bg: #ef4444 !important;
    --bs-btn-focus-color: white !important;
    --bs-btn-box-shadow: none !important;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4) !important;
    --bs-btn-active-box-shadow: none !important;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

.btn-danger:active {
    transform: translateY(0);
}

/* ========== WARNING ========== */
.btn-warning {
    --bs-btn-bg: #f59e0b !important;
    --bs-btn-border-color: #f59e0b !important;
    --bs-btn-color: #000 !important;
    --bs-btn-hover-bg: #d97706 !important;
    --bs-btn-hover-border-color: #d97706 !important;
    --bs-btn-hover-color: #000 !important;
    --bs-btn-active-bg: #b45309 !important;
    --bs-btn-active-border-color: #b45309 !important;
    --bs-btn-active-color: #000 !important;
    --bs-btn-focus-bg: #f59e0b !important;
    --bs-btn-focus-color: #000 !important;
    --bs-btn-box-shadow: none !important;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4) !important;
    --bs-btn-active-box-shadow: none !important;
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.btn-warning:active {
    transform: translateY(0);
}

/* ========== INFO ========== */
.btn-info {
    --bs-btn-bg: #06b6d4 !important;
    --bs-btn-border-color: #06b6d4 !important;
    --bs-btn-color: white !important;
    --bs-btn-hover-bg: #0891b2 !important;
    --bs-btn-hover-border-color: #0891b2 !important;
    --bs-btn-hover-color: white !important;
    --bs-btn-active-bg: #0e7490 !important;
    --bs-btn-active-border-color: #0e7490 !important;
    --bs-btn-active-color: white !important;
    --bs-btn-focus-bg: #06b6d4 !important;
    --bs-btn-focus-color: white !important;
    --bs-btn-box-shadow: none !important;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.4) !important;
    --bs-btn-active-box-shadow: none !important;
}

.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}

.btn-info:active {
    transform: translateY(0);
}

/* ========== LIGHT ========== */
.btn-light {
    --bs-btn-bg: #f3f4f6 !important;
    --bs-btn-border-color: #e5e7eb !important;
    --bs-btn-color: #1f2937 !important;
    --bs-btn-hover-bg: #e5e7eb !important;
    --bs-btn-hover-border-color: #d1d5db !important;
    --bs-btn-hover-color: #111827 !important;
    --bs-btn-active-bg: #d1d5db !important;
    --bs-btn-active-border-color: #cbd5e1 !important;
    --bs-btn-active-color: #111827 !important;
    --bs-btn-focus-bg: #f3f4f6 !important;
    --bs-btn-focus-color: #1f2937 !important;
    --bs-btn-box-shadow: none !important;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(243, 244, 246, 0.6) !important;
    --bs-btn-active-box-shadow: none !important;
}

.btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.btn-light:active {
    transform: translateY(0);
}

/* ========== DARK ========== */
.btn-dark {
    --bs-btn-bg: #1e293b !important;
    --bs-btn-border-color: #1e293b !important;
    --bs-btn-color: white !important;
    --bs-btn-hover-bg: #0f172a !important;
    --bs-btn-hover-border-color: #0f172a !important;
    --bs-btn-hover-color: white !important;
    --bs-btn-active-bg: #020617 !important;
    --bs-btn-active-border-color: #020617 !important;
    --bs-btn-active-color: white !important;
    --bs-btn-focus-bg: #1e293b !important;
    --bs-btn-focus-color: white !important;
    --bs-btn-box-shadow: none !important;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.4) !important;
    --bs-btn-active-box-shadow: none !important;
}

.btn-dark:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3) !important;
}

.btn-dark:active {
    transform: translateY(0);
}

/* ===================================
   3. LINKS MEJORADOS - SOLO CON CLASE .link
   =================================== */
/* Links normales (sin clase) - solo cambio de color */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.link) {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.link):hover {
    color: #2563eb;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.link):active {
    color: #1d4ed8;
}

/* Links con clase .link - efectos completos */
.link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    display: inline-block;
}

/* Efecto underline elegante para .link */
.link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.3s ease;
}

.link:hover {
    color: #2563eb;
}

.link:hover::after {
    width: 100%;
}

.link:active {
    color: #1d4ed8;
    transform: scale(0.98);
}

/* Botón tipo link (btn-link) con efectos completos */
.btn-link {
    --bs-btn-color: #3b82f6 !important;
    --bs-btn-bg: transparent !important;
    --bs-btn-border-color: transparent !important;
    --bs-btn-hover-color: #2563eb !important;
    --bs-btn-hover-bg: transparent !important;
    --bs-btn-active-color: #1d4ed8 !important;
    --bs-btn-active-bg: transparent !important;
    --bs-btn-box-shadow: none !important;
    --bs-btn-focus-box-shadow: none !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    padding: 0 !important;
    position: relative !important;
}

.btn-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.3s ease;
}

.btn-link:hover::after {
    width: 100%;
}

.btn-link:hover {
    transform: translateX(4px) !important;
    box-shadow: none !important;
}

.btn-link:active {
    transform: translateX(2px) !important;
}

/* Links dentro de cards con clase .link */
.card .link {
    color: #3b82f6;
    font-weight: 600;
}

/* Links en modo oscuro para .link (opcional) */
.dark-mode .link {
    color: #60a5fa;
}

.dark-mode .link:hover {
    color: #93c5fd;
}

/* ===================================
   4. TAMAÑOS DE BOTONES
   =================================== */
.btn-sm {
    padding: 6px 16px !important;
    border-radius: 50px !important;
    font-size: 0.875rem !important;
}

.btn-lg {
    padding: 14px 32px !important;
    border-radius: 50px !important;
    font-size: 1.125rem !important;
}

/* ===================================
   5. QUITAR SOMBRAS POR DEFECTO
   =================================== */
.btn:focus,
.btn.focus,
.btn-check:focus + .btn,
.btn:focus-visible,
.btn:active:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ===================================
   6. CARDS MODERNAS
   =================================== */
.cards .card {
    margin-bottom: 24px;
}

.card {
    border: none !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    padding: 26px 32px;
}

.card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.02) !important;
}

.card-body {
    padding: 1.75rem !important;
}

.card-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    color: #1f2937 !important;
    letter-spacing: -0.01em !important;
}

.card-text {
    color: #6b7280 !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
}

.card-footer {
    background-color: #fafafa !important;
    border-top: 1px solid #f3f4f6 !important;
    padding: 1rem 1.75rem !important;
    font-size: 0.875rem !important;
    color: #6b7280 !important;
}

.card-header {
    background-color: #fafafa !important;
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 1.25rem 1.75rem !important;
    font-weight: 600 !important;
}

.card-img-top {
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
}

.card-img-bottom {
    border-bottom-left-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
}

/* ===================================
   7. CLASES EXCLUSIVAS PARA DEGRADADOS
   =================================== */
/* Degradado 1 - Sunset (naranja a rosa) */
.gradient-sunset {
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
    color: white;
    transition: all 0.3s ease;
}

.gradient-sunset:hover {
    background: linear-gradient(135deg, #fa5252 0%, #fd9644 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3);
}

/* Degradado 2 - Ocean (azul a turquesa) */
.gradient-ocean {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #00b4db 100%);
    color: white;
    transition: all 0.3s ease;
}

.gradient-ocean:hover {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(30, 60, 114, 0.3);
}

/* Degradado 3 - Aurora (verde a morado) */
.gradient-aurora {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 40%, #8e44ad 100%);
    color: white;
    transition: all 0.3s ease;
}

.gradient-aurora:hover {
    background: linear-gradient(135deg, #0b4f6c 0%, #1ba098 50%, #deb887 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(17, 153, 142, 0.3);
}

.gradient-sunset:active,
.gradient-ocean:active,
.gradient-aurora:active {
    transform: translateY(0);
}

/* ===================================
   8. BOTONES CON DEGRADADO
   =================================== */
.btn-gradient-sunset {
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
    border: none;
    color: white;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-gradient-sunset:hover {
    background: linear-gradient(135deg, #fa5252 0%, #fd9644 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 107, 107, 0.3);
    color: white;
}

.btn-gradient-sunset:active {
    transform: translateY(0);
}

.btn-gradient-ocean {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #00b4db 100%);
    border: none;
    color: white;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-gradient-ocean:hover {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(30, 60, 114, 0.3);
    color: white;
}

.btn-gradient-ocean:active {
    transform: translateY(0);
}

.btn-gradient-aurora {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 40%, #8e44ad 100%);
    border: none;
    color: white;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-gradient-aurora:hover {
    background: linear-gradient(135deg, #0b4f6c 0%, #1ba098 50%, #deb887 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(17, 153, 142, 0.3);
    color: white;
}

.btn-gradient-aurora:active {
    transform: translateY(0);
}

/* ============================================
   GRADIENTS MODERNOS PARA BACKGROUND COMPLETO
   ============================================ */

:root {
    /* Gradientes principales */
    --bg-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --bg-gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --bg-gradient-dark: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --bg-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --bg-gradient-warning: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    --bg-gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --bg-gradient-danger: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    
    /* Gradientes oceánicos */
    --bg-gradient-ocean: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
    --bg-gradient-sunset: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
    --bg-gradient-midnight: linear-gradient(135deg, #232526 0%, #414345 100%);
    --bg-gradient-aurora: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
    --bg-gradient-peach: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --bg-gradient-mint: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    
    /* Gradientes corporativos */
    --bg-gradient-corporate: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    --bg-gradient-modern: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --bg-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.95) 100%);
    
    /* Gradientes con blur (efecto glassmorphism) */
    --bg-gradient-glassmorphism: linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);
    
    /* Gradientes con pattern overlay */
    --bg-gradient-pattern: linear-gradient(135deg, #667eea 0%, #764ba2 100%),
                           repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 8px);
}

/* Clases utilitarias para usar directamente */
.bg-gradient-primary { background: var(--bg-gradient-primary); }
.bg-gradient-secondary { background: var(--bg-gradient-secondary); }
.bg-gradient-dark { background: var(--bg-gradient-dark); }
.bg-gradient-success { background: var(--bg-gradient-success); }
.bg-gradient-warning { background: var(--bg-gradient-warning); }
.bg-gradient-info { background: var(--bg-gradient-info); }
.bg-gradient-danger { background: var(--bg-gradient-danger); }
.bg-gradient-ocean { background: var(--bg-gradient-ocean); }
.bg-gradient-sunset { background: var(--bg-gradient-sunset); }
.bg-gradient-midnight { background: var(--bg-gradient-midnight); }
.bg-gradient-aurora { background: var(--bg-gradient-aurora); }
.bg-gradient-peach { background: var(--bg-gradient-peach); }
.bg-gradient-mint { background: var(--bg-gradient-mint); }
.bg-gradient-corporate { background: var(--bg-gradient-corporate); }
.bg-gradient-modern { background: var(--bg-gradient-modern); }
.bg-gradient-glass { background: var(--bg-gradient-glass); }

/* Efecto vidrio esmerilado */
.bg-glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Pattern overlay (opcional) */
.bg-gradient-with-pattern {
    background: var(--bg-gradient-pattern);
    background-blend-mode: overlay;
}

/* ============================================
   GRADIENTE AURORA BASE + OVERLAYS
   ============================================ */

/* Gradiente Aurora original */
.gradient-aurora-base {
    background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

/* ============================================
   OPCIONES DE OVERLAY (FONDO SUPERPUESTO)
   ============================================ */

/* Opción 1: Brillo radial en el centro */
.gradient-aurora-radial {
    background: 
        radial-gradient(circle at 30% 40%, rgba(38, 208, 206, 0.3) 0%, rgba(26, 41, 128, 0.3) 100%),
        linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

/* Opción 2: Diagonal brillante (efecto luz) */
.gradient-aurora-diagonal {
    background: 
        linear-gradient(125deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

/* Opción 3: Vignette (oscurece bordes, resalta centro) */
.gradient-aurora-vignette {
    background: 
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%),
        linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

/* Opción 4: Patrón de puntos (efecto estrellas) */
.gradient-aurora-dots {
    background: 
        repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 8px),
        linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

/* Opción 5: Brillo en esquinas múltiples */
.gradient-aurora-multi-light {
    background: 
        radial-gradient(circle at 20% 30%, rgba(38, 208, 206, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(26, 41, 128, 0.4) 0%, transparent 40%),
        linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

/* Opción 6: Efecto neón (bordes iluminados) */
.gradient-aurora-neon {
    background: 
        linear-gradient(90deg, rgba(38, 208, 206, 0.2) 0%, transparent 20%, transparent 80%, rgba(38, 208, 206, 0.2) 100%),
        linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

/* Opción 7: Ondas de luz (movimiento) */
.gradient-aurora-waves {
    background: 
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 10px),
        repeating-linear-gradient(135deg, rgba(38, 208, 206, 0.1) 0px, rgba(38, 208, 206, 0.1) 1px, transparent 1px, transparent 15px),
        linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

/* Opción 8: Degradado vertical + horizontal (efecto profundidad) */
.gradient-aurora-depth {
    background: 
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

/* Opción 9: Efecto cristal (glassmorphism sobre gradiente) */
.gradient-aurora-glass {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
    backdrop-filter: blur(2px);
}

/* Opción 10: Estilo cosmic (múltiples capas radiales) */
.gradient-aurora-cosmic {
    background: 
        radial-gradient(ellipse at 30% 40%, rgba(38, 208, 206, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(26, 41, 128, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 70%),
        linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

/* ===================================
   9. BOTONES DESHABILITADOS
   =================================== */
.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    transform: none !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* ===================================
   10. ANIMACIONES ADICIONALES
   =================================== */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.btn-pulse {
    animation: pulse 2s infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid white;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

/* Gradientes oceánicos */
.text-ocean {
    color: #2b5876;
}

.text-sunset {
    color: #ff7e5f;
}

.text-midnight {
    color: #232526;
}

.text-aurora {
    color: #1a2980;
}

.text-peach {
    color: #ff9a9e;
}

.text-mint {
    color: #43e97b;
}

/* Gradientes corporativos */
.text-corporate {
    color: #0f2027;
}

.text-modern {
    color: #667eea;
}

.text-glass {
    color: rgba(255, 255, 255, 0.9);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #3b82f6 !important;
    border-bottom: #3b82f6 solid 2px !important;
    border-radius: 0 !important;
    transition: all .3s ease-in-out !important;
}

#footer a {
    color: #535353;
    transition: all .3s ease-in-out;
}

#footer a:hover, #footer a:active {
    color: #2563eb;
    text-decoration: underline;
}

.object-fit-cover {
    object-fit: cover !important;
}

/* Figura decorativa */
.card-figure {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    border: none;
    transition: transform 0.3s ease;
}

.card-figure:hover {
    transform: translateY(-5px);
}

/* Figuras geométricas */
.card-figure::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #667eea20, #764ba220);
    border-radius: 50%;
    z-index: 1;
}

.card-figure::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, #f093fb20, #f5576c20);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    z-index: 1;
}