/* =========================================================================
   CreatorFans — Capa de mejora visual "Pro" (enhance.css)
   Se carga DESPUÉS de styles.css. Es puramente aditiva: para revertir,
   basta con quitar el <link> de enhance.css en las páginas .html.
   Diseñada para el modo oscuro (la web siempre usa data-theme="dark").
   ========================================================================= */

:root {
    --cf-glow-indigo: rgba(99, 102, 241, 0.45);
    --cf-glow-violet: rgba(139, 92, 246, 0.40);
    --cf-card-bg: rgba(30, 41, 59, 0.55);
    --cf-card-border: rgba(148, 163, 184, 0.14);
    --cf-card-border-hover: rgba(129, 140, 248, 0.55);
    --cf-radius: 18px;
    --cf-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Fondo con malla de gradientes (profundidad) -------------------------- */
[data-theme="dark"] body {
    background-color: #080b16;
    position: relative;
}
[data-theme="dark"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 15% 0%, rgba(99, 102, 241, 0.14), transparent 60%),
        radial-gradient(50% 45% at 100% 10%, rgba(139, 92, 246, 0.12), transparent 55%),
        radial-gradient(55% 50% at 50% 110%, rgba(16, 185, 129, 0.07), transparent 60%);
}
/* Grano sutil para textura premium */
[data-theme="dark"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Navbar: cristal más marcado ----------------------------------------- */
[data-theme="dark"] .navbar {
    background: rgba(9, 12, 22, 0.72) !important;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
}
[data-theme="dark"] .navbar.scrolled {
    background: rgba(9, 12, 22, 0.90) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(129, 140, 248, 0.18) inset;
}

/* ---- Botones primarios: gradiente con brillo y barrido -------------------- */
.btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #a855f7 100%);
    border-radius: 14px;
    box-shadow: 0 10px 30px -8px var(--cf-glow-indigo), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.35s var(--cf-ease), box-shadow 0.35s var(--cf-ease);
    isolation: isolate;
}
.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s var(--cf-ease);
    z-index: 1;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -10px var(--cf-glow-indigo), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-primary:hover::after { left: 130%; }
.btn-primary.white {
    background: #ffffff;
    color: #4f46e5 !important;
    box-shadow: 0 14px 40px -10px rgba(255, 255, 255, 0.35);
}

/* ---- Botones secundarios: cristal con borde luminoso ---------------------- */
.btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    color: #e7e9f5;
    backdrop-filter: blur(8px);
    transition: all 0.3s var(--cf-ease);
}
.btn-secondary:hover {
    background: rgba(129, 140, 248, 0.12);
    border-color: rgba(129, 140, 248, 0.65);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px var(--cf-glow-indigo);
}

/* ---- Botones de la barra de navegación ----------------------------------- */
/* Botón Register: verde llamativo con flujo + pulso animado */
.btn-login {
    background: linear-gradient(120deg, #10b981, #06b6d4, #22c55e, #06b6d4, #10b981) !important;
    background-size: 220% 100% !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px -4px rgba(16, 185, 129, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    animation: navBtnFlow 6s linear infinite, cf-green-pulse 2.4s ease-in-out infinite;
    transition: transform 0.25s var(--cf-ease), filter 0.25s var(--cf-ease) !important;
}
.btn-login:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.1);
    box-shadow: 0 14px 32px -6px rgba(16, 185, 129, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}
@keyframes cf-green-pulse {
    0%, 100% { box-shadow: 0 6px 20px -4px rgba(16, 185, 129, 0.55), 0 0 0 0 rgba(16, 185, 129, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
    50%      { box-shadow: 0 6px 22px -4px rgba(16, 185, 129, 0.7), 0 0 0 8px rgba(16, 185, 129, 0), inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
}
/* Quitar la barrita morada que se expande bajo el botón Register */
.nav-menu a.btn-login::after { display: none !important; }
.btn-download-highlight {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px -8px var(--cf-glow-indigo);
    transition: transform 0.25s var(--cf-ease), box-shadow 0.25s var(--cf-ease) !important;
}
.btn-download-highlight:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -8px var(--cf-glow-indigo);
}
.btn-telegram-support {
    border-radius: 12px !important;
    transition: transform 0.25s var(--cf-ease) !important;
}
.btn-telegram-support:hover { transform: translateY(-1px); }

/* ---- Badges de sección: pastilla con halo -------------------------------- */
.section-badge {
    background: rgba(129, 140, 248, 0.10) !important;
    border: 1px solid rgba(129, 140, 248, 0.35);
    color: #b4bbf5 !important;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 0 24px -6px var(--cf-glow-indigo);
    backdrop-filter: blur(6px);
}

/* ---- Texto con gradiente animado ----------------------------------------- */
.gradient-text {
    background: linear-gradient(120deg, #818cf8, #c084fc, #818cf8);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cf-shine 6s linear infinite;
}
@keyframes cf-shine { to { background-position: 200% center; } }

/* ---- Hero: títulos más impactantes --------------------------------------- */
.hero-title {
    letter-spacing: -0.02em;
    line-height: 1.08;
}
.hero-subtitle { color: #aab2c8 !important; }
[data-theme="dark"] .hero { padding-top: 3rem; }

/* ---- Tarjetas (features / pricing / testimonios / integraciones) ---------- */
[data-theme="dark"] .feature-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .integration-item,
[data-theme="dark"] .advantage-card,
[data-theme="dark"] .trust-item {
    background: var(--cf-card-bg) !important;
    border: 1px solid var(--cf-card-border) !important;
    border-radius: var(--cf-radius) !important;
    backdrop-filter: blur(12px);
    transition: transform 0.4s var(--cf-ease), border-color 0.4s var(--cf-ease), box-shadow 0.4s var(--cf-ease), background 0.4s var(--cf-ease);
}
[data-theme="dark"] .feature-card::before,
[data-theme="dark"] .pricing-card::before,
[data-theme="dark"] .testimonial-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.55), transparent 40%, transparent 60%, rgba(192, 132, 252, 0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s var(--cf-ease);
    pointer-events: none;
}
[data-theme="dark"] .feature-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .testimonial-card { position: relative; }
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .testimonial-card:hover,
[data-theme="dark"] .integration-item:hover {
    transform: translateY(-6px);
    border-color: var(--cf-card-border-hover) !important;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7), 0 0 40px -18px var(--cf-glow-violet);
    background: rgba(36, 47, 70, 0.65) !important;
}
[data-theme="dark"] .feature-card:hover::before,
[data-theme="dark"] .testimonial-card:hover::before { opacity: 1; }

/* Iconos de features con halo */
.feature-icon {
    filter: drop-shadow(0 8px 16px rgba(99, 102, 241, 0.35));
    transition: transform 0.4s var(--cf-ease);
}
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(-3deg); }

/* ---- Pricing: tarjeta destacada con anillo luminoso ---------------------- */
[data-theme="dark"] .pricing-card.featured {
    background: linear-gradient(180deg, rgba(49, 46, 129, 0.45), rgba(30, 41, 59, 0.6)) !important;
    border-color: rgba(129, 140, 248, 0.55) !important;
    box-shadow: 0 30px 70px -30px rgba(99, 102, 241, 0.6), 0 0 0 1px rgba(129, 140, 248, 0.25);
    position: relative;
}
[data-theme="dark"] .pricing-card.featured:hover {
    transform: translateY(-6px) scale(1.01);
}
.popular-badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    box-shadow: 0 8px 24px -6px var(--cf-glow-indigo);
    letter-spacing: 0.08em;
}
.price .amount {
    background: linear-gradient(120deg, #fff, #c7d2fe);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pricing-features li svg { filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.5)); }
.full-width { border-radius: 14px !important; }

/* ---- Pasos "Cómo funciona": grupo centrado y compacto ------------------- */
.how-it-works .container { align-items: center; }
.steps {
    max-width: 1080px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    justify-content: center;
}
.step-number {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    box-shadow: 0 10px 28px -8px var(--cf-glow-indigo), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ---- Cifras (hero stats + contador) con gradiente ------------------------ */
.stat-number, .stat-value, .stat-suffix {
    background: linear-gradient(120deg, #818cf8, #c084fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}
.hero-stats .stat { transition: transform 0.3s var(--cf-ease); }
.hero-stats .stat:hover { transform: translateY(-3px); }

[data-theme="dark"] .stat-card {
    background: var(--cf-card-bg) !important;
    border: 1px solid var(--cf-card-border) !important;
    border-radius: var(--cf-radius);
    backdrop-filter: blur(12px);
    transition: transform 0.4s var(--cf-ease), box-shadow 0.4s var(--cf-ease);
}
[data-theme="dark"] .stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.7), 0 0 36px -16px var(--cf-glow-violet);
}
.stat-icon { filter: drop-shadow(0 6px 14px rgba(99, 102, 241, 0.3)); }

/* ---- Badges de seguridad / insignias ------------------------------------- */
.badge-item { transition: transform 0.35s var(--cf-ease); }
.badge-item:hover { transform: translateY(-4px); }
.badge-icon {
    filter: drop-shadow(0 6px 16px rgba(99, 102, 241, 0.35));
    transition: transform 0.35s var(--cf-ease);
}
.badge-item:hover .badge-icon { transform: scale(1.12); }

/* ---- Estrellas de testimonios -------------------------------------------- */
.testimonial-stars svg { color: #fbbf24; filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.4)); }
.author-avatar { box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6); }

/* ---- Sección CTA: panel con halo ----------------------------------------- */
.cta {
    position: relative;
    overflow: hidden;
}
.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 120% at 50% 0%, rgba(129, 140, 248, 0.18), transparent 70%);
    pointer-events: none;
}

/* ---- Iconos de integraciones --------------------------------------------- */
.integration-icon { transition: transform 0.35s var(--cf-ease); }
.integration-item:hover .integration-icon { transform: scale(1.15) translateY(-2px); }

/* ---- Barras de scroll afinadas ------------------------------------------- */
[data-theme="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0b0f1c; }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(#4b5563, #374151);
    border-radius: 999px;
    border: 2px solid #0b0f1c;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(#6366f1, #8b5cf6); }

/* ---- Selección de texto -------------------------------------------------- */
::selection { background: rgba(129, 140, 248, 0.35); color: #fff; }

/* ---- Animación de entrada suave para secciones --------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .feature-card, .pricing-card, .testimonial-card, .stat-card, .integration-item, .badge-item, .step {
        animation: cf-rise 0.6s var(--cf-ease) both;
    }
}
@keyframes cf-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Botones de formularios (auth) --------------------------------------- */
.auth-card .btn-primary, .auth-card button[type="submit"] { border-radius: 14px; }

/* ---- Responsive: suavizar sombras en móvil ------------------------------- */
@media (max-width: 640px) {
    .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
}