/* 
 * ESTILOS GLOBALES MEJORADOS - FACTURASTOS INTELLIGENCE
 * Efectos visuales llamativos y modernos para todo el sitio
 */

/* ============================================
   EFECTOS DE NEÓN Y RESPLANDOR PARA EL HEADER 
   ============================================ */
body { 
    background: #fff; 
    padding-top: 80px; 
    position: relative; 
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="6" fill="rgba(230,57,70,0.3)"/><circle cx="12" cy="12" r="2" fill="rgb(230,57,70)"/></svg>'), auto;
}

.site-header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 1000; 
    background: rgba(255,255,255,0.95) !important; 
    backdrop-filter: blur(20px) saturate(1.8); 
    border-bottom: 2px solid transparent !important; 
    border-image: linear-gradient(90deg, #E63946, #FF073A, #F77F00, #E63946) 1 !important; 
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.15), 0 1px 4px rgba(0,0,0,0.08) !important; 
    padding: 0 !important; 
    width: 100%; 
    animation: glassShimmer 4s ease-in-out infinite;
}

.site-header::before { 
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.03) 0%, rgba(255, 7, 58, 0.02) 50%, rgba(247, 127, 0, 0.03) 100%);
    z-index: 0;
}

@keyframes intensePulse {
    0% { 
        box-shadow: 0 0 25px rgba(230, 57, 70, 1), 0 0 50px rgba(255, 7, 58, 0.8), 0 0 75px rgba(247, 127, 0, 0.6);
        filter: brightness(1.2);
    }
    100% { 
        box-shadow: 0 0 40px rgba(230, 57, 70, 1), 0 0 80px rgba(255, 7, 58, 1), 0 0 120px rgba(247, 127, 0, 0.8);
        filter: brightness(1.5);
    }
}

.site-header::after { 
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #E63946, #FF073A, #F77F00, #E63946);
    background-size: 200% 100%;
    animation: borderGlow 3s linear infinite;
}

@keyframes glassShimmer {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.site-header nav { position: relative; z-index: 2; }

/* ============================================
   NAVEGACIÓN CON BOTONES TIPO CARD + ICONO
   ============================================ */

.nav-icon-group {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.nav-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 12px;
    text-decoration: none !important;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    border: 1.5px solid rgba(200, 200, 210, 0.4);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    color: #374151 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    min-width: 68px;
}

.nav-icon-btn .nav-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s ease;
}

.nav-icon-btn .nav-icon svg {
    width: 22px;
    height: 22px;
}

.nav-icon-btn .nav-label {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.nav-icon-btn:hover {
    transform: translateY(-4px) scale(1.06);
    border-color: rgba(230, 57, 70, 0.4);
    background: linear-gradient(135deg, #E63946 0%, #FF073A 50%, #F77F00 100%) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(230, 57, 70, 0.45), 0 4px 10px rgba(247, 127, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}

.nav-icon-btn:hover .nav-icon {
    transform: scale(1.18) rotate(5deg);
}

/* Botón primario (Crear cuenta) */
.nav-icon-btn.nav-primary {
    background: linear-gradient(135deg, #E63946 0%, #FF073A 40%, #F77F00 100%) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.25) !important;
    box-shadow: 0 4px 16px rgba(230, 57, 70, 0.45);
    min-width: 78px;
}

.nav-icon-btn.nav-primary:hover {
    background: linear-gradient(135deg, #C1272D 0%, #E63946 30%, #FF073A 60%, #F77F00 100%) !important;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 14px 30px rgba(230, 57, 70, 0.65), 0 6px 15px rgba(247, 127, 0, 0.45), 0 0 40px rgba(255, 7, 58, 0.25), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Responsive: tablet */
@media (max-width: 991.98px) {
    .nav-icon-group {
        gap: 4px;
    }
    .nav-icon-btn {
        padding: 6px 10px;
        min-width: 56px;
        border-radius: 10px;
    }
    .nav-icon-btn .nav-icon svg {
        width: 18px;
        height: 18px;
    }
    .nav-icon-btn .nav-label {
        font-size: 0.62rem;
    }
}

/* Responsive: móvil - solo iconos */
@media (max-width: 575.98px) {
    .nav-icon-group {
        gap: 3px;
    }
    .nav-icon-btn {
        padding: 6px 8px;
        min-width: auto;
        border-radius: 8px;
    }
    .nav-icon-btn .nav-label {
        display: none;
    }
    .nav-icon-btn .nav-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   LOGO CON EFECTOS ESPECIALES
   ============================================ */
.site-header img[alt="Facturastos"] { 
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    filter: drop-shadow(0 6px 20px rgba(230, 57, 70, 0.6)) drop-shadow(0 3px 10px rgba(247, 127, 0, 0.4)) brightness(1.1) saturate(1.3); 
    border-radius: 16px; 
    background: linear-gradient(145deg, rgba(255,255,255,0.4), rgba(230, 57, 70, 0.1), rgba(255,255,255,0.3)); 
    backdrop-filter: blur(15px); 
    padding: 8px; 
    border: 3px solid transparent; 
    background-clip: padding-box; 
    position: relative; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(230, 57, 70, 0.2), 0 0 30px rgba(230, 57, 70, 0.3); 
}

.site-header img[alt="Facturastos"]::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #E63946, #FF073A, #F77F00, #FF6B35, #C1272D, #E63946);
    border-radius: 19px;
    z-index: -1;
    animation: vibrantBorder 3s linear infinite;
    filter: blur(2px);
}

@keyframes vibrantBorder {
    0% { transform: rotate(0deg); filter: blur(2px) brightness(1.2); }
    50% { filter: blur(1px) brightness(1.5); }
    100% { transform: rotate(360deg); filter: blur(2px) brightness(1.2); }
}

.site-header img[alt="Facturastos"]:hover { 
    transform: rotate(12deg) scale(1.25); 
    filter: drop-shadow(0 12px 35px rgba(230, 57, 70, 0.8)) drop-shadow(0 6px 20px rgba(247, 127, 0, 0.7)) drop-shadow(0 0 40px rgba(255, 7, 58, 0.6)) brightness(1.3) saturate(1.6); 
    animation: logoGlassPulse 1.8s ease-in-out infinite; 
    background: linear-gradient(145deg, rgba(255,255,255,0.6), rgba(230, 57, 70, 0.15), rgba(247, 127, 0, 0.08), rgba(255,255,255,0.4)); 
    backdrop-filter: blur(25px) saturate(2); 
    box-shadow: 
        inset 4px 4px 16px rgba(255,255,255,0.8), 
        inset -4px -4px 16px rgba(230, 57, 70, 0.3), 
        0 0 50px rgba(230, 57, 70, 0.6),
        0 0 100px rgba(247, 127, 0, 0.4); 
}

@keyframes logoGlassPulse { 
    0%, 100% { 
        filter: drop-shadow(0 12px 35px rgba(230, 57, 70, 0.8)) drop-shadow(0 6px 20px rgba(247, 127, 0, 0.7)) brightness(1.3); 
        box-shadow: inset 4px 4px 16px rgba(255,255,255,0.8), inset -4px -4px 16px rgba(230, 57, 70, 0.3), 0 0 50px rgba(230, 57, 70, 0.6); 
    } 
    50% { 
        filter: drop-shadow(0 16px 45px rgba(230, 57, 70, 1)) drop-shadow(0 8px 25px rgba(247, 127, 0, 0.9)) drop-shadow(0 0 60px rgba(255, 7, 58, 0.8)) brightness(1.5) saturate(2); 
        box-shadow: inset 6px 6px 20px rgba(255,255,255,1), inset -6px -6px 20px rgba(230, 57, 70, 0.5), 0 0 80px rgba(230, 57, 70, 0.8), 0 0 120px rgba(247, 127, 0, 0.6); 
    } 
}

/* ============================================
   BOTONES DEL HEADER CON EFECTOS MODERNOS
   ============================================ */
.site-header .navbar-brand { 
    font-weight: 700; 
    letter-spacing: .3px; 
    transition: all 0.3s ease; 
}

.site-header .navbar-brand:hover { 
    transform: scale(1.05); 
    filter: drop-shadow(0 4px 8px rgba(79, 70, 229, 0.3)); 
}

.site-header .btn { 
    color: #1a202c !important; 
    border: 2px solid rgba(230, 57, 70, 0.4) !important; 
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(230, 57, 70, 0.08) 50%, rgba(255,255,255,0.3) 100%) !important; 
    backdrop-filter: blur(20px) saturate(1.5); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 
        0 4px 15px rgba(230, 57, 70, 0.2), 
        inset 0 1px 0 rgba(255,255,255,0.8),
        inset 0 -1px 0 rgba(230, 57, 70, 0.1); 
    border-radius: 15px !important; 
    font-weight: 700; 
    position: relative; 
    overflow: hidden; 
}

.site-header .btn::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: -100%; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); 
    transition: left 0.6s ease; 
}

.site-header .btn:hover { 
    background: linear-gradient(135deg, #E63946 0%, #FF073A 25%, #F77F00 50%, #FF6B35 75%, #C1272D 100%) !important; 
    color: #fff !important; 
    border: 2px solid rgba(255, 255, 255, 0.3) !important; 
    backdrop-filter: blur(30px) saturate(2); 
    transform: translateY(-4px) scale(1.08); 
    box-shadow: 
        0 15px 35px rgba(230, 57, 70, 0.6), 
        0 5px 15px rgba(247, 127, 0, 0.4),
        0 0 40px rgba(255, 7, 58, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.4); 
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="rgba(230,57,70,0.7)"/><circle cx="12" cy="12" r="6" fill="rgb(255,255,255)"/><circle cx="12" cy="12" r="3" fill="rgb(230,57,70)"/></svg>'), pointer;
}

.site-header .btn:hover::before { left: 100%; }

.site-header .btn-primary { 
    background: linear-gradient(135deg, #E63946 0%, #FF073A 30%, #F77F00 70%, #FF6B35 100%) !important; 
    color: #fff !important; 
    border: 2px solid rgba(255, 255, 255, 0.3) !important; 
    backdrop-filter: blur(25px) saturate(1.8); 
    box-shadow: 
        0 8px 25px rgba(230, 57, 70, 0.7), 
        0 0 40px rgba(247, 127, 0, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(193, 39, 45, 0.3); 
    position: relative; 
    font-weight: 800; 
}

.site-header .btn-primary::after { 
    content: '🔥💎'; 
    position: absolute; 
    top: 50%; 
    right: 10px; 
    transform: translateY(-50%); 
    font-size: 14px; 
    opacity: 1; 
    animation: gemFire 2s ease-in-out infinite; 
}

@keyframes gemFire { 
    0%, 100% { 
        opacity: 1; 
        transform: translateY(-50%) rotate(0deg) scale(1); 
        filter: brightness(1.2); 
    } 
    50% { 
        opacity: 0.9; 
        transform: translateY(-50%) rotate(20deg) scale(1.15); 
        filter: brightness(1.5) hue-rotate(15deg); 
    } 
}

.site-header .btn-primary:hover { 
    background: linear-gradient(135deg, #C1272D 0%, #E63946 20%, #FF073A 40%, #F77F00 60%, #FF6B35 80%, #E63946 100%) !important; 
    backdrop-filter: blur(35px) saturate(2.5); 
    box-shadow: 
        0 20px 40px rgba(230, 57, 70, 0.8), 
        0 8px 20px rgba(247, 127, 0, 0.6),
        0 0 60px rgba(255, 7, 58, 0.5),
        0 0 100px rgba(230, 57, 70, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.6); 
    transform: translateY(-6px) scale(1.12); 
    border: 2px solid rgba(255, 255, 255, 0.5) !important; 
}

.site-header .btn-primary:hover::after { 
    animation: sparkleHover 0.6s ease-in-out infinite; 
}

@keyframes sparkleHover { 
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); } 
    50% { opacity: 0.6; transform: translateY(-50%) scale(1.3); } 
}

/* ============================================
   HERO SECTIONS CON EFECTOS DINÁMICOS ROJIZOS
   ============================================ */
.hero { 
    padding: 3rem 0; 
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.05) 0%, rgba(193, 39, 45, 0.04) 50%, rgba(247, 127, 0, 0.03) 100%); 
    position: relative; 
    overflow: hidden; 
}

.hero::before { 
    content: ''; 
    position: absolute; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
    background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(230, 57, 70, 0.08) 90deg, transparent 180deg, rgba(247, 127, 0, 0.06) 270deg, transparent 360deg); 
    animation: heroRotate 20s linear infinite; 
    pointer-events: none; 
}

.hero .container { position: relative; z-index: 2; }

@keyframes heroRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.hero h1 { 
    font-weight: 700; 
    font-size: 2rem; 
    background: linear-gradient(135deg, #1f2937 0%, #E63946 100%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
}

.hero p { color: #6c757d; }

/* ============================================
   BOTONES CTA CON EFECTOS ESPECIALES
   ============================================ */
.cta-group .btn { 
    margin-right: .5rem; 
    position: relative; 
    overflow: hidden; 
}

.cta-group .btn::before { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 0; 
    height: 0; 
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%); 
    transition: all 0.6s ease; 
    transform: translate(-50%, -50%); 
    border-radius: 50%; 
}

.cta-group .btn:hover::before { width: 300px; height: 300px; }

.cta-group .btn-lg { 
    padding: 1rem 2rem; 
    font-weight: 700; 
    letter-spacing: 0.5px; 
    border-radius: 16px; 
}

/* ============================================
   BENEFICIOS DEL HERO CON ANIMACIONES ROJIZAS
   ============================================ */
.hero-benefits { 
    display: flex; 
    flex-direction: column; 
    gap: .75rem; 
    animation: benefitsSlideIn 0.8s ease-out; 
}

@keyframes benefitsSlideIn { 
    from { opacity: 0; transform: translateX(-30px); } 
    to { opacity: 1; transform: translateX(0); } 
}

.benefit-item { 
    display: flex; 
    align-items: center; 
    gap: .75rem; 
    padding: .75rem 1rem; 
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.08) 0%, rgba(247, 127, 0, 0.06) 100%); 
    border-radius: 12px; 
    border: 1px solid rgba(230, 57, 70, 0.15); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    position: relative; 
    overflow: hidden; 
}

.benefit-item::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: -100%; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); 
    transition: left 0.8s ease; 
}

.benefit-item:hover { 
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.15) 0%, rgba(247, 127, 0, 0.12) 100%); 
    border-color: rgba(230, 57, 70, 0.3); 
    transform: translateY(-3px) scale(1.02); 
    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.2); 
}

.benefit-item:hover::before { left: 100%; }

.benefit-icon { 
    font-size: 1.25rem; 
    width: 28px; 
    text-align: center; 
    transition: all 0.4s ease; 
}

.benefit-item:hover .benefit-icon { 
    transform: rotate(15deg) scale(1.2); 
    text-shadow: 0 2px 8px rgba(230, 57, 70, 0.4); 
}

.benefit-item span:last-child { 
    font-size: .95rem; 
    line-height: 1.4; 
    color: #374151; 
}

@media (max-width: 768px) { 
    .hero-benefits { gap: .5rem; } 
    .benefit-item { padding: .5rem .75rem; } 
}

/* ============================================
   TARJETAS CON EFECTOS MODERNOS
   ============================================ */
.plan-card, .service-card, .status-card { 
    background: linear-gradient(180deg,#ffffff 0%, #f9fbff 100%); 
    border: 1px solid #e9ecef; 
    border-radius: 20px; 
    box-shadow: 0 8px 18px rgba(0,0,0,.06); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    position: relative; 
    overflow: hidden; 
}

.plan-card::before, .service-card::before, .status-card::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: -100%; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); 
    transition: left 0.8s ease; 
}

.plan-card:hover, .service-card:hover, .status-card:hover { 
    transform: translateY(-8px) scale(1.02); 
    box-shadow: 0 20px 40px rgba(230,57,70,.12); 
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="8" fill="rgba(230,57,70,0.4)"/><circle cx="12" cy="12" r="4" fill="rgb(230,57,70)"/></svg>'), pointer;
}

.plan-card:hover::before, .service-card:hover::before, .status-card:hover::before { 
    left: 100%; 
}

/* ============================================
   BOTÓN WHATSAPP FLOTANTE CON ANIMACIONES
   ============================================ */
.whatsapp-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #fff;
    padding: .6rem .9rem;
    border-radius: 999px;
    box-shadow: 0 12px 24px rgba(37,211,102,.35), 0 0 0 0 rgba(37,211,102,0.4);
    z-index: 9999;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .2px;
    animation: whatsappPulse 2s ease-in-out infinite;
    transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes whatsappPulse { 
    0%, 100% { box-shadow: 0 12px 24px rgba(37,211,102,.35), 0 0 0 0 rgba(37,211,102,0.4); } 
    50% { box-shadow: 0 16px 30px rgba(37,211,102,.45), 0 0 0 6px rgba(37,211,102,0.2); } 
}

.whatsapp-float:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 18px 35px rgba(37,211,102,.55), 0 0 0 8px rgba(37,211,102,0.15);
    color: #fff;
    filter: brightness(1.1) saturate(1.2);
    animation: none;
}

.whatsapp-float .icon { width: 28px; height: 28px; }
.whatsapp-float .label, .whatsapp-float .number { display: none !important; }

@media (max-width: 576px){ 
    .whatsapp-float{ 
        padding: .75rem; 
        border-radius: 50%; 
        animation: whatsappPulseMobile 2.5s ease-in-out infinite; 
    } 
    .whatsapp-float .number{ display: none; } 
}

@keyframes whatsappPulseMobile { 
    0%, 100% { box-shadow: 0 8px 20px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,0.3); } 
    50% { box-shadow: 0 12px 26px rgba(37,211,102,.5), 0 0 0 4px rgba(37,211,102,0.2); } 
}

/* ============================================
   PARTÍCULAS FLOTANTES DECORATIVAS
   ============================================ */
.floating-particles { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    z-index: 1; 
    overflow: hidden; 
}

.floating-particles::before,
.floating-particles::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.4), rgba(247, 127, 0, 0.4));
    border-radius: 50%;
    animation: float 15s infinite linear;
}

.floating-particles::before {
    top: 10%;
    left: 20%;
    animation-delay: -5s;
    animation-duration: 12s;
}

.floating-particles::after {
    top: 80%;
    left: 80%;
    animation-delay: -10s;
    animation-duration: 18s;
}

@keyframes float {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* ============================================
   EFECTOS ESPECIALES PARA PRECIOS ROJIZOS
   ============================================ */
.price-large, .price { 
    font-size: 2.5rem; 
    font-weight: 800; 
    line-height: 1; 
    background: linear-gradient(135deg, #E63946 0%, #F77F00 100%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    transition: all 0.3s ease; 
}

.plan-card:hover .price-large, .plan-card:hover .price { 
    transform: scale(1.05); 
}

.price-large .currency, .price .currency { 
    font-size: 1.5rem; 
    font-weight: 700; 
}

/* ============================================
   BOTONES CON EFECTOS DE PULSO Y CTA ROJIZOS
   ============================================ */
.hero .btn-primary.btn-lg { 
    background: linear-gradient(135deg,#E63946 0%, #C1272D 100%); 
    border: none; 
    box-shadow: 0 12px 26px rgba(230, 57, 70,.3); 
    animation: ctaPulse 3s ease-in-out infinite; 
}

.hero .btn-primary.btn-lg:hover { 
    transform: translateY(-2px) scale(1.05); 
    box-shadow: 0 18px 34px rgba(230, 57, 70,.35); 
    background-size: 200% 200%; 
    animation: shimmerGradient 2s ease infinite; 
}

@keyframes ctaPulse { 
    0%, 100% { box-shadow: 0 12px 26px rgba(230, 57, 70,.3); } 
    50% { box-shadow: 0 16px 32px rgba(230, 57, 70,.4), 0 0 0 4px rgba(230, 57, 70,.1); } 
}

@keyframes shimmerGradient { 
    0%{ background-position: 0% 50%; } 
    50%{ background-position: 100% 50%; } 
    100%{ background-position: 0% 50%; } 
}

/* ============================================
   PLAN DESTACADO CON EFECTOS ESPECIALES ROJIZOS
   ============================================ */
.best { 
    border: 2px solid #E63946; 
    background: linear-gradient(180deg, rgba(230, 57, 70, 0.05) 0%, #ffffff 100%); 
    box-shadow: 0 12px 28px rgba(230, 57, 70, 0.2); 
}

.best::after { 
    content: '🏆 Más elegido'; 
    position: absolute; 
    top: -10px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: linear-gradient(135deg, #E63946 0%, #F77F00 100%); 
    color: #fff; 
    padding: 8px 16px; 
    border-radius: 20px; 
    font-size: 12px; 
    font-weight: 700; 
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3); 
    z-index: 3; 
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 992px) { 
    .pricing-grid, .cards { grid-template-columns: repeat(2,1fr); } 
}

@media (max-width: 576px) { 
    .pricing-grid, .cards { grid-template-columns: 1fr; } 
    .hero h1 { font-size: 1.75rem; }
    .cta-group .btn-lg { padding: .75rem 1.5rem; }
}

/* ============================================
   EFECTOS ROJIZO-DORADO VIBRANTES COMO TEMA PRINCIPAL
   ============================================ */

/* Hero Section con gradiente rojizo-dorado vibrante */
.hero-gradient {
    background: linear-gradient(135deg, #E63946 0%, #C1272D 25%, #F77F00 50%, #FF6B35 75%, #E63946 100%);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
    margin: 2rem 0;
    border-radius: 25px;
}

.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(230, 57, 70, 0.8) 0%, 
        rgba(193, 39, 45, 0.7) 25%, 
        rgba(247, 127, 0, 0.8) 50%, 
        rgba(255, 107, 53, 0.7) 75%, 
        rgba(230, 57, 70, 0.8) 100%);
    animation: colorWave 4s ease-in-out infinite;
}

@keyframes colorWave {
    0%, 100% { opacity: 0.8; transform: translateX(0%); }
    50% { opacity: 1; transform: translateX(2%); }
}

/* Secciones con gradiente rojizo empresarial */
.section-vibrant {
    background: linear-gradient(180deg, 
        rgba(230, 57, 70, 0.12) 0%,
        rgba(247, 127, 0, 0.08) 25%,
        rgba(193, 39, 45, 0.10) 50%,
        rgba(255, 107, 53, 0.08) 75%,
        rgba(230, 57, 70, 0.12) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(230, 57, 70, 0.25);
    border-radius: 20px;
    margin: 2rem 0;
    padding: 3rem 1rem;
    position: relative;
}

.section-vibrant::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #E63946, #F77F00, #C1272D, #FF6B35, #E63946);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 0 20px rgba(230, 57, 70, 0.6);
    animation: neonPulse 3s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(230, 57, 70, 0.6), 0 0 40px rgba(247, 127, 0, 0.4);
        filter: brightness(1.2);
    }
    50% { 
        box-shadow: 0 0 30px rgba(230, 57, 70, 0.9), 0 0 60px rgba(247, 127, 0, 0.7), 0 0 80px rgba(193, 39, 45, 0.5);
        filter: brightness(1.5);
    }
}

/* Cards con gradiente rojizo-dorado glassmorphism */
.card-vibrant {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.25) 0%,
        rgba(230, 57, 70, 0.15) 25%,
        rgba(193, 39, 45, 0.12) 50%,
        rgba(247, 127, 0, 0.15) 75%,
        rgba(255, 255, 255, 0.25) 100%) !important;
    backdrop-filter: blur(25px) saturate(1.8);
    border: 2px solid rgba(230, 57, 70, 0.3);
    border-radius: 20px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(230, 57, 70, 0.2),
        0 0 40px rgba(247, 127, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.card-vibrant::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(230, 57, 70, 0.3) 50%,
        transparent 100%);
    transition: left 0.8s ease;
}

.card-vibrant:hover::before {
    left: 100%;
}

.card-vibrant:hover {
    transform: translateY(-8px) scale(1.05);
    background: linear-gradient(145deg, 
        rgba(230, 57, 70, 0.2) 0%,
        rgba(193, 39, 45, 0.18) 25%,
        rgba(247, 127, 0, 0.2) 50%,
        rgba(255, 107, 53, 0.18) 75%,
        rgba(230, 57, 70, 0.2) 100%) !important;
    border-color: rgba(230, 57, 70, 0.5);
    box-shadow: 
        0 16px 40px rgba(230, 57, 70, 0.4),
        0 0 60px rgba(247, 127, 0, 0.3),
        0 0 80px rgba(193, 39, 45, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Botones con gradiente rojizo empresarial */
.btn-vibrant {
    background: linear-gradient(135deg, #E63946 0%, #F77F00 50%, #C1272D 100%) !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(20px);
    border-radius: 15px !important;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 6px 20px rgba(230, 57, 70, 0.4),
        0 0 30px rgba(247, 127, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-vibrant::after {
    content: '🚀💻';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 12px;
    animation: vibrantPulse 2.5s ease-in-out infinite;
}

@keyframes vibrantPulse {
    0%, 100% { 
        transform: translateY(-50%) scale(1) rotate(0deg);
        opacity: 0.9;
    }
    50% { 
        transform: translateY(-50%) scale(1.1) rotate(15deg);
        opacity: 1;
        filter: brightness(1.3);
    }
}

.btn-vibrant:hover {
    background: linear-gradient(135deg, #C1272D 0%, #E63946 25%, #F77F00 75%, #FF6B35 100%) !important;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 12px 30px rgba(230, 57, 70, 0.6),
        0 0 50px rgba(247, 127, 0, 0.5),
        0 0 70px rgba(193, 39, 45, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Efectos de texto con gradiente rojizo empresarial */
.text-vibrant {
    background: linear-gradient(135deg, #E63946, #C1272D, #F77F00, #E63946);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    animation: textShimmer 3s ease-in-out infinite;
    background-size: 200% 200%;
}

@keyframes textShimmer {
    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(1.2);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.5);
    }
}

/* Partículas flotantes rojizo-dorado */
.floating-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(230, 57, 70, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(193, 39, 45, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(247, 127, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 60% 80%, rgba(255, 107, 53, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 90% 60%, rgba(230, 57, 70, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
    animation: floatingParticles 8s ease-in-out infinite;
}

@keyframes floatingParticles {
    0%, 100% {
        background-position: 0% 0%, 100% 100%, 50% 50%, 100% 0%, 0% 100%;
        opacity: 0.6;
    }
    33% {
        background-position: 30% 70%, 70% 30%, 80% 20%, 20% 80%, 90% 10%;
        opacity: 0.8;
    }
    66% {
        background-position: 70% 30%, 30% 70%, 20% 80%, 80% 20%, 10% 90%;
        opacity: 0.7;
    }
}

/* ============================================
   ANIMACIONES PARA ELEMENTOS FLOTANTES LLAMATIVOS
   ============================================ */
@keyframes float-element {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
        filter: brightness(1);
    }
    25% {
        transform: translateY(-8px) rotate(1deg);
        opacity: 0.95;
        filter: brightness(1.05);
    }
    50% {
        transform: translateY(-12px) rotate(-1deg);
        opacity: 1;
        filter: brightness(1.1);
    }
    75% {
        transform: translateY(-6px) rotate(0.5deg);
        opacity: 0.98;
        filter: brightness(1.03);
    }
}

/* ============================================
   TEMA GLOBAL ROJIZO PARA TODOS LOS ELEMENTOS
   ============================================ */

/* Todos los botones primarios */
.btn-primary, .btn-primary:not(.site-header .btn-primary) {
    background: linear-gradient(135deg, #E63946 0%, #F77F00 50%, #C1272D 100%) !important;
    color: #fff !important;
    border: 2px solid rgba(230, 57, 70, 0.3) !important;
    box-shadow: 
        0 4px 15px rgba(230, 57, 70, 0.3),
        0 0 20px rgba(247, 127, 0, 0.2) !important;
    transition: all 0.3s ease;
}

.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #C1272D 0%, #E63946 50%, #F77F00 100%) !important;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(230, 57, 70, 0.5),
        0 0 40px rgba(247, 127, 0, 0.4) !important;
}

/* Botones secundarios */
.btn-secondary {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.1) 0%, rgba(247, 127, 0, 0.1) 100%) !important;
    color: #E63946 !important;
    border: 2px solid rgba(230, 57, 70, 0.3) !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.2) 0%, rgba(247, 127, 0, 0.2) 100%) !important;
    border-color: rgba(230, 57, 70, 0.5) !important;
    transform: translateY(-1px);
}

/* Enlaces */
a {
    color: #E63946;
    transition: all 0.3s ease;
}

a:hover {
    color: #C1272D;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(230, 57, 70, 0.3);
}

/* Texto de énfasis */
.text-primary {
    color: #E63946 !important;
}

.text-danger {
    color: #C1272D !important;
}

/* Badges y etiquetas */
.badge-primary {
    background: linear-gradient(135deg, #E63946, #F77F00) !important;
    color: white;
}

.badge-secondary {
    background: rgba(230, 57, 70, 0.1);
    color: #E63946;
}

/* Alertas */
.alert-primary {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.1) 0%, rgba(247, 127, 0, 0.05) 100%);
    border-color: rgba(230, 57, 70, 0.3);
    color: #C1272D;
}

/* Formularios */
.form-control:focus {
    border-color: #E63946;
    box-shadow: 
        0 0 0 0.2rem rgba(230, 57, 70, 0.25),
        0 0 10px rgba(247, 127, 0, 0.2);
}

.form-control {
    border: 1px solid rgba(230, 57, 70, 0.2);
    transition: all 0.3s ease;
}

/* Navigación */
.nav-link {
    color: #6c757d;
    position: relative;
    transition: all 0.3s ease;
}

.nav-link:hover, .nav-link.active {
    color: #E63946 !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #E63946, #F77F00);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

/* Tablas */
.table thead th {
    border-bottom: 2px solid rgba(230, 57, 70, 0.3);
    color: #C1272D;
    font-weight: 700;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(230, 57, 70, 0.03);
}

/* Progress bars */
.progress-bar {
    background: linear-gradient(90deg, #E63946, #F77F00) !important;
    box-shadow: 0 2px 8px rgba(230, 57, 70, 0.3);
}

/* Cards adicionales */
.card {
    border: 1px solid rgba(230, 57, 70, 0.15);
    transition: all 0.3s ease;
}

.card:hover {
    border-color: rgba(230, 57, 70, 0.3);
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.1);
}

.card-header {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.05) 0%, rgba(247, 127, 0, 0.03) 100%);
    border-bottom: 1px solid rgba(230, 57, 70, 0.2);
}

/* Separadores */
hr {
    border-top: 1px solid rgba(230, 57, 70, 0.2);
}

/* Iconos especiales */
.fa, .fas, .far, .fab, i[class*="fa-"] {
    color: inherit;
}

.icon-primary {
    color: #E63946;
}

.icon-hover:hover {
    color: #F77F00;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* Efectos de carga */
.spinner-border {
    border: 0.25em solid rgba(230, 57, 70, 0.25);
    border-right-color: #E63946;
}

/* Tooltips */
.tooltip-inner {
    background: linear-gradient(135deg, #E63946, #C1272D);
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
}

.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #E63946;
}

/* Modales */
.modal-header {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.05) 0%, rgba(247, 127, 0, 0.02) 100%);
    border-bottom: 1px solid rgba(230, 57, 70, 0.2);
}

.modal-content {
    border: 1px solid rgba(230, 57, 70, 0.15);
}

/* Paginación */
.page-link {
    color: #E63946;
    border: 1px solid rgba(230, 57, 70, 0.2);
}

.page-link:hover {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.1), rgba(247, 127, 0, 0.05));
    border-color: rgba(230, 57, 70, 0.3);
    color: #C1272D;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #E63946, #C1272D);
    border-color: #E63946;
    color: white;
}

/* Dropdowns */
.dropdown-item:hover {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.1), rgba(247, 127, 0, 0.05));
    color: #C1272D;
}

/* Lista de grupos */
.list-group-item:hover {
    background: rgba(230, 57, 70, 0.05);
    border-color: rgba(230, 57, 70, 0.2);
}

.list-group-item.active {
    background: linear-gradient(135deg, #E63946, #C1272D);
    border-color: #E63946;
}

/* ============================================
   SISTEMA DE LOGOS ASTOS - EFECTOS MODERNOS
   ============================================ */

/* Logo principal mejorado */
.logo-container {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 12px;
}

.logo-container .main-logo,
.logo-container img {
  filter: drop-shadow(0 4px 12px rgba(230, 57, 70, 0.15));
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 10px;
}

.logo-container:hover .main-logo,
.logo-container:hover img {
  transform: scale(1.05) translateY(-2px);
  filter: drop-shadow(0 8px 25px rgba(230, 57, 70, 0.3)) brightness(1.1);
}

.logo-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  border-radius: 12px;
}

.logo-container:hover::after {
  left: 100%;
}

/* Logos con glassmorphism mejorado */
.logo-glass {
    position: relative;
    display: inline-block;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(230, 57, 70, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    padding: 0.8rem;
    box-shadow: 0 8px 32px rgba(230, 57, 70, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.logo-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%, rgba(230, 57, 70, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.logo-glass:hover::before {
    opacity: 1;
}

.logo-glass:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 20px 60px rgba(230, 57, 70, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(230, 57, 70, 0.12) 100%);
}

.logo-glass img {
    position: relative;
    z-index: 1;
    transition: filter 0.4s ease;
    border-radius: 10px;
}

.logo-glass:hover img {
    filter: brightness(1.15) saturate(1.3);
}

/* Favicon optimizado */
.favicon-enhanced {
    filter: drop-shadow(0 2px 8px rgba(230, 57, 70, 0.4));
    transition: all 0.3s ease;
}

.favicon-enhanced:hover {
    filter: drop-shadow(0 4px 16px rgba(230, 57, 70, 0.6)) brightness(1.1);
    transform: scale(1.1) rotate(5deg);
}

/* Responsive para logos */
@media (max-width: 768px) {
    .logo-container:hover .main-logo,
    .logo-container:hover img {
        transform: scale(1.02) translateY(-1px);
    }
    
    .logo-glass {
        padding: 0.5rem;
    }
    
    .logo-glass:hover {
        transform: scale(1.05) translateY(-2px);
    }
}

/* Animación de entrada para logos */
@keyframes logoEntrance {
    from { 
        opacity: 0; 
        transform: translateY(-20px) scale(0.8); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

.logo-container {
    animation: logoEntrance 0.8s ease-out;
}