/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  BINGO LYSTO · Landing · v2 (paleta sistema + 3D balls + slider)        ║
   ║  Paleta:  púrpura #602e9e / deep #2d0e61 / amarillo #fcd924 / amber     ║
   ║           #ee4c2c / error #e23f83                                        ║
   ║  Light + Dark con prefers-color-scheme + [data-theme]                    ║
   ║  Reescribe Bootstrap (no se ve "bootstrappy")                           ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ╔═══════════════════════════════ TOKENS ════════════════════════════════╗ */
:root {
    /* — Brand sistema Bingo Lysto — */
    --bl-purple-deep:  #2d0e61;
    --bl-purple-mid:   #602e9e;
    --bl-yellow:       #fcd924;
    --bl-amber:        #ee4c2c;
    --bl-cream:        #ece5d8;
    --bl-error:        #e23f83;

    /* Aliases para gradientes */
    --bl-primary:      #ad7ee8;     /* purple-mid */
    --bl-primary-2:    #2d0e61;     /* purple-deep */
    --bl-accent:       #e23f83;     /* error/magenta accent */
    --bl-gold:         #fcd924;     /* yellow */
    --bl-flame:        #ee4c2c;     /* amber */

    /* — Gradientes — */
    --bl-grad:         linear-gradient(135deg, #602e9e 0%, #2d0e61 100%);
    --bl-grad-warm:    linear-gradient(135deg, #ee4c2c 0%, #fcd924 100%);
    --bl-grad-magenta: linear-gradient(135deg, #602e9e 0%, #e23f83 100%);
    --bl-grad-cta:     linear-gradient(90deg, #602e9e 0%, #e23f83 60%, #ee4c2c 100%);
    --bl-grad-soft:    linear-gradient(135deg, rgba(96,46,158,.08) 0%, rgba(45,14,97,.08) 60%, rgba(238,76,44,.06) 100%);

    /* — Estados — */
    --bl-success:      #10b981;
    --bl-warning:      #f59e0b;
    --bl-danger:       #ef4444;
    --bl-info:         #3b82f6;

    /* — Tipografía — */
    --bl-font:         'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bl-fz-base:      15px;

    /* — Material 3 Shape — */
    --md-radius-xs:    6px;
    --md-radius-sm:    10px;
    --md-radius-md:    16px;
    --md-radius-lg:    22px;
    --md-radius-xl:    28px;
    --md-radius-2xl:   36px;
    --md-radius-pill:  50px;

    /* — Material 3 Elevation — */
    --md-elev-1:       0 1px 2px rgba(45,14,97,.06), 0 1px 3px rgba(45,14,97,.08);
    --md-elev-2:       0 2px 6px rgba(45,14,97,.07), 0 4px 12px rgba(45,14,97,.08);
    --md-elev-3:       0 5px 25px rgba(45,14,97,.10);
    --md-elev-4:       0 10px 40px rgba(96,46,158,.18);
    --md-elev-cta:     0 8px 22px rgba(96,46,158,.42);

    /* — Motion — */
    --md-easing-standard: cubic-bezier(.2,0,0,1);
    --md-easing-emph:     cubic-bezier(.2,0,0,1);
    --md-dur-short:    .18s;
    --md-dur-medium:   .28s;
    --md-dur-long:     .42s;

    /* — Light surface tokens (default) — */
    --bl-bg:           #ffffff;
    --bl-bg-alt:       #faf7fc;
    --bl-bg-elev:      #ffffff;
    --bl-bg-blur:      rgba(255,255,255,.78);

    --bl-surface:      #ffffff;
    --bl-surface-2:    #f5f1fa;
    --bl-surface-3:    #ebe5f3;
    --bl-surface-tint: rgba(96,46,158,.05);

    --bl-text:         #2d0e61;
    --bl-text-2:       #4d3d6b;
    --bl-text-3:       #6f6890;
    --bl-text-muted:   #8a829a;
    --bl-text-on-grad: #ffffff;

    --bl-border:       rgba(45,14,97,.12);
    --bl-border-2:     rgba(45,14,97,.06);
    --bl-divider:      rgba(217,208,238,1);

    --bl-shadow:       0 5px 25px rgba(45,14,97,.08);
    --bl-shadow-lg:    0 12px 40px rgba(96,46,158,.15);

    --bl-nav-bg:       rgba(255,255,255,.85);
    --bl-nav-border:   rgba(45,14,97,.06);
    --bl-nav-text:     #2d0e61;

    color-scheme: light dark;
}

/* ╔═══════════════════════════ DARK MODE ═════════════════════════════════╗ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bl-bg:           #12082c;
        --bl-bg-alt:       #1a0e3d;
        --bl-bg-elev:      #21154a;
        --bl-bg-blur:      rgba(18,8,44,.82);

        --bl-surface:      #21154a;
        --bl-surface-2:    #2a1c5e;
        --bl-surface-3:    #342472;
        --bl-surface-tint: rgba(252,217,36,.06);

        --bl-text:         #ece5d8;
        --bl-text-2:       #d6cef0;
        --bl-text-3:       #c7bedf;
        --bl-text-muted:   #9087a8;

        --bl-border:       rgba(255,255,255,.10);
        --bl-border-2:     rgba(255,255,255,.05);
        --bl-divider:      rgba(255,255,255,.08);

        --bl-shadow:       0 8px 28px rgba(0,0,0,.45);
        --bl-shadow-lg:    0 18px 50px rgba(0,0,0,.55);

        --bl-nav-bg:       rgba(18,8,44,.85);
        --bl-nav-border:   rgba(255,255,255,.06);
        --bl-nav-text:     #ece5d8;

        --md-elev-1:       0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.40);
        --md-elev-2:       0 2px 6px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.45);
        --md-elev-3:       0 5px 25px rgba(0,0,0,.50);
        --md-elev-4:       0 10px 40px rgba(96,46,158,.30);
        --md-elev-cta:     0 8px 22px rgba(96,46,158,.55);
    }
}

[data-theme="dark"] {
    --bl-bg:           #12082c;
    --bl-bg-alt:       #1a0e3d;
    --bl-bg-elev:      #21154a;
    --bl-bg-blur:      rgba(18,8,44,.82);

    --bl-surface:      #21154a;
    --bl-surface-2:    #2a1c5e;
    --bl-surface-3:    #342472;
    --bl-surface-tint: rgba(252,217,36,.06);

    --bl-text:         #ece5d8;
    --bl-text-2:       #d6cef0;
    --bl-text-3:       #c7bedf;
    --bl-text-muted:   #9087a8;

    --bl-border:       rgba(255,255,255,.10);
    --bl-border-2:     rgba(255,255,255,.05);
    --bl-divider:      rgba(255,255,255,.08);

    --bl-shadow:       0 8px 28px rgba(0,0,0,.45);
    --bl-shadow-lg:    0 18px 50px rgba(0,0,0,.55);

    --bl-nav-bg:       rgba(18,8,44,.85);
    --bl-nav-border:   rgba(255,255,255,.06);
    --bl-nav-text:     #ece5d8;

    --md-elev-1:       0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.40);
    --md-elev-2:       0 2px 6px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.45);
    --md-elev-3:       0 5px 25px rgba(0,0,0,.50);
    --md-elev-4:       0 10px 40px rgba(96,46,158,.30);
    --md-elev-cta:     0 8px 22px rgba(96,46,158,.55);
}

[data-theme="light"] {
    --bl-bg:#ffffff;--bl-bg-alt:#faf7fc;--bl-bg-elev:#ffffff;--bl-bg-blur:rgba(255,255,255,.78);
    --bl-surface:#ffffff;--bl-surface-2:#f5f1fa;--bl-surface-3:#ebe5f3;--bl-surface-tint:rgba(96,46,158,.05);
    --bl-text:#2d0e61;--bl-text-2:#4d3d6b;--bl-text-3:#6f6890;--bl-text-muted:#8a829a;
    --bl-border:rgba(45,14,97,.12);--bl-border-2:rgba(45,14,97,.06);--bl-divider:rgba(217,208,238,1);
    --bl-shadow:0 5px 25px rgba(45,14,97,.08);--bl-shadow-lg:0 12px 40px rgba(96,46,158,.15);
    --bl-nav-bg:rgba(255,255,255,.85);--bl-nav-border:rgba(45,14,97,.06);--bl-nav-text:#2d0e61;
}

/* ╔═══════════════════════════ BASE ══════════════════════════════════════╗ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
    font-family: var(--bl-font);
    background: var(--bl-bg);
    color: var(--bl-text-3);
    font-size: var(--bl-fz-base);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    transition: background var(--md-dur-medium) var(--md-easing-standard),
                color var(--md-dur-medium) var(--md-easing-standard);
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 {
    color: var(--bl-text);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: 0 0 .6em;
}
p { margin: 0 0 1rem; }
a { color: var(--bl-primary); text-decoration: none; transition: color var(--md-dur-short) var(--md-easing-standard); }
a:hover { color: var(--bl-accent); }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bl-surface-2); }
::-webkit-scrollbar-thumb { background: var(--bl-grad); border-radius: 10px; border: 2px solid var(--bl-surface-2); }
::-webkit-scrollbar-thumb:hover { background: var(--bl-primary); }
::selection { background: var(--bl-primary); color: #fff; }

/* — Background canvas — */
.lp-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px circle at 8% 8%, rgba(96,46,158,.10), transparent 55%),
        radial-gradient(900px circle at 92% 18%, rgba(252,217,36,.08), transparent 55%),
        radial-gradient(700px circle at 50% 100%, rgba(45,14,97,.06), transparent 60%),
        var(--bl-bg);
    transition: background var(--md-dur-medium) var(--md-easing-standard);
}
[data-theme="dark"] .lp-bg,
:root:not([data-theme="light"]) .lp-bg {
    background:
        radial-gradient(900px circle at 8% 8%, rgba(96,46,158,.22), transparent 55%),
        radial-gradient(900px circle at 92% 18%, rgba(238,76,44,.14), transparent 55%),
        radial-gradient(700px circle at 50% 100%, rgba(45,14,97,.18), transparent 60%),
        var(--bl-bg);
}

/* ╔═══════════════════════════ NAVBAR ════════════════════════════════════╗ */
.lp-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    background: var(--bl-nav-bg);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--bl-nav-border);
    padding: .9rem 0;
    transition: background var(--md-dur-medium) var(--md-easing-standard),
                box-shadow var(--md-dur-medium) var(--md-easing-standard),
                padding var(--md-dur-medium) var(--md-easing-standard);
}
.lp-nav.scrolled { padding: .55rem 0; box-shadow: var(--md-elev-2); }

.lp-nav .nav-brand {
    font-size: 1.55rem;
    font-weight: 800;
    background: var(--bl-grad-magenta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.02em;
    display: inline-flex; align-items: center; gap: .55rem;
}
.lp-nav .nav-brand img { height: 56px; width: auto; }

.lp-nav .navbar-toggler {
    padding: .35rem .55rem;
    color: var(--bl-text);
    box-shadow: none;
    border: none;
}
.lp-nav .navbar-toggler-icon {
    background-image: none;
    width: 22px; height: 16px;
    display: inline-block;
    background: linear-gradient(to bottom,
        var(--bl-text) 0, var(--bl-text) 2px,
        transparent 2px, transparent 7px,
        var(--bl-text) 7px, var(--bl-text) 9px,
        transparent 9px, transparent 14px,
        var(--bl-text) 14px, var(--bl-text) 16px);
}
.lp-nav .nav-link-lp {
    color: var(--bl-text-2) !important;
    font-weight: 500;
    font-size: .92rem;
    padding: .55rem 1rem !important;
    border-radius: var(--md-radius-pill);
    margin: 0 .15rem;
    position: relative;
    transition: color var(--md-dur-short) var(--md-easing-standard),
                background var(--md-dur-short) var(--md-easing-standard);
}
.lp-nav .nav-link-lp:hover,
.lp-nav .nav-link-lp.active {
    color: var(--bl-primary) !important;
    background: var(--bl-surface-tint);
}
.lp-nav .nav-link-lp.active::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 4px;
    transform: translateX(-50%);
    width: 18px; height: 3px;
    border-radius: 3px;
    background: var(--bl-grad);
}

/* — Botón principal CTA — */
.btn-nav-cta {
    background: var(--bl-grad-cta);
    border: none;
    color: #fff !important;
    font-weight: 600;
    font-size: .88rem;
    border-radius: var(--md-radius-pill);
    padding: .6rem 1.5rem;
    box-shadow: var(--md-elev-cta);
    transition: transform var(--md-dur-short) var(--md-easing-standard),
                box-shadow var(--md-dur-short) var(--md-easing-standard),
                filter var(--md-dur-short) var(--md-easing-standard);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: .4rem;
    white-space: nowrap;
}
.btn-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(96,46,158,.55);
    color: #fff !important;
    filter: brightness(1.05);
}

.btn-nav-ghost {
    background: var(--bl-surface-2);
    color: var(--bl-text) !important;
    border: 1px solid var(--bl-border);
    font-weight: 600;
    border-radius: var(--md-radius-pill);
    padding: .6rem 1.5rem;
    font-size: .88rem;
    transition: all var(--md-dur-short) var(--md-easing-standard);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: .4rem;
    white-space: nowrap;
}
.btn-nav-ghost:hover {
    background: var(--bl-surface-3);
    border-color: var(--bl-primary);
    color: var(--bl-primary) !important;
    transform: translateY(-2px);
}

/* — Theme FAB — */
.theme-fab {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--bl-border);
    background: var(--bl-surface-2);
    color: var(--bl-text);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
    transition: all var(--md-dur-short) var(--md-easing-standard);
    flex-shrink: 0;
}
.theme-fab:hover {
    border-color: var(--bl-primary);
    color: var(--bl-primary);
    transform: rotate(15deg);
}

/* ╔═══════════════════════════ HERO ═══════════════════════════════════════╗ */
section#inicio {
    padding: 130px 0 70px;
    position: relative;
    overflow: hidden;
}
section#inicio::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 480px; height: 480px;
    background: var(--bl-grad-magenta);
    filter: blur(140px);
    opacity: .14;
    border-radius: 50%;
    pointer-events: none;
}
section#inicio::after {
    content: '';
    position: absolute;
    bottom: -100px; left: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--bl-flame), transparent 70%);
    filter: blur(120px);
    opacity: .12;
    border-radius: 50%;
    pointer-events: none;
}

.hero-badge {
    display: inline-block;
    background: var(--bl-surface-tint);
    color: var(--bl-primary);
    border: 1px solid rgba(96,46,158,.25);
    padding: .4rem 1rem;
    border-radius: var(--md-radius-pill);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
}
.hero-title {
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.025em;
    color: var(--bl-text);
    margin-bottom: 1.2rem;
}
.hero-title span,
.hero-title b {
    background: var(--bl-grad-magenta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-sub {
    font-size: 1.05rem;
    color: var(--bl-text-3);
    max-width: 540px;
    line-height: 1.75;
    margin-bottom: 2rem;
}
.hero-btns {
    display: flex; flex-wrap: wrap; gap: .85rem;
    margin-bottom: 1.5rem;
}

.btn-hero-primary {
    background: var(--bl-grad-cta);
    color: #fff !important;
    font-weight: 600;
    font-size: .98rem;
    border: none;
    padding: .95rem 2.1rem;
    border-radius: var(--md-radius-pill);
    box-shadow: var(--md-elev-cta);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: .5rem;
    transition: transform var(--md-dur-short) var(--md-easing-standard),
                box-shadow var(--md-dur-short) var(--md-easing-standard),
                filter var(--md-dur-short) var(--md-easing-standard);
    position: relative;
    overflow: hidden;
}
.btn-hero-primary::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transform: translateX(-100%);
    transition: transform .6s var(--md-easing-standard);
}
.btn-hero-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(96,46,158,.55);
    filter: brightness(1.06);
    color: #fff !important;
}
.btn-hero-primary:hover::before { transform: translateX(100%); }

.btn-hero-secondary {
    background: var(--bl-surface);
    color: var(--bl-text) !important;
    font-weight: 600;
    font-size: .98rem;
    border: 2px solid var(--bl-border);
    padding: calc(.95rem - 2px) calc(2.1rem - 2px);
    border-radius: var(--md-radius-pill);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: .5rem;
    transition: all var(--md-dur-short) var(--md-easing-standard);
}
.btn-hero-secondary:hover {
    border-color: var(--bl-primary);
    color: var(--bl-primary) !important;
    transform: translateY(-3px);
    box-shadow: var(--md-elev-3);
}

/* — Hero stat cards: 1 fila en mobile (3 cols) — */
.hero-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin-top: 1.2rem;
}
.hero-stat-card {
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    border-radius: var(--md-radius-md);
    padding: .85rem .9rem;
    box-shadow: var(--md-elev-1);
    transition: all var(--md-dur-short) var(--md-easing-standard);
    text-align: center;
}
.hero-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--md-elev-3);
    border-color: rgba(96,46,158,.30);
}
.hero-stat-num {
    font-size: clamp(1.05rem, 3vw, 1.55rem);
    font-weight: 800;
    background: var(--bl-grad-magenta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.hero-stat-lbl {
    font-size: clamp(.65rem, 1.8vw, .78rem);
    color: var(--bl-text-3);
    margin-top: .25rem;
    line-height: 1.2;
}

/* ╔════════════════ BINGO BALLS 3D (estilo backend system) ════════════════╗ */
.bingo-balls-hero {
    position: relative;
    height: 480px;
    width: 100%;
    pointer-events: none;
}
.bball {
    position: absolute;
    animation: floatBall 4s ease-in-out infinite;
    pointer-events: auto;
}
.bball:nth-child(1) { top: 8%;  left: 15%; animation-delay: 0s; }
.bball:nth-child(2) { top: 5%;  left: 55%; animation-delay: .4s; }
.bball:nth-child(3) { top: 50%; left: 38%; animation-delay: .8s; }
.bball:nth-child(4) { top: 55%; left: 8%;  animation-delay: 1.2s; }
.bball:nth-child(5) { top: 40%; left: 65%; animation-delay: 1.6s; }
.bball:nth-child(6) { top: 70%; left: 50%; animation-delay: .6s; }
.bball:nth-child(7) { top: 22%; left: 75%; animation-delay: 1s; }

@keyframes floatBall {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50%     { transform: translateY(-12px) rotate(4deg); }
}

/* ╔═══════════════════════ SECTION GENERAL ═══════════════════════════════╗ */
.lp-section { padding: 90px 0; position: relative; }
.lp-section.pt-0 { padding-top: 0; }

.section-badge {
    display: block;
    width: fit-content;
    margin: 0 auto 1rem;
    color: var(--bl-primary);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    background: var(--bl-surface-tint);
    border: 1px solid rgba(96,46,158,.20);
    padding: .35rem 1rem;
    border-radius: var(--md-radius-pill);
}
.section-title {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 800;
    color: var(--bl-text);
    margin: 0 auto 1rem;
    max-width: 780px;
    line-height: 1.2;
    letter-spacing: -.02em;
    position: relative;
    display: inline-block;
    padding-bottom: 18px;
}
.section-title span {
    background: var(--bl-grad-magenta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-title::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 60px; height: 4px;
    border-radius: 4px;
    background: var(--bl-grad-magenta);
    transition: width var(--md-dur-medium) var(--md-easing-standard);
}
section:hover .section-title::after,
.lp-section:hover .section-title::after { width: 100px; }

.section-sub {
    font-size: 1rem;
    color: var(--bl-text-3);
    max-width: 640px;
    margin: 1rem auto 3rem;
    line-height: 1.7;
}

/* ╔═══════════════════════════ CARDS ═════════════════════════════════════╗ */
.feature-card,
.step-card,
.stat-card,
.testimonial-card,
.contact-card {
    background: var(--bl-surface);
    border: 1px solid var(--bl-border-2);
    border-radius: var(--md-radius-lg);
    padding: 2rem 1.6rem;
    box-shadow: var(--md-elev-3);
    transition: transform var(--md-dur-medium) var(--md-easing-standard),
                box-shadow var(--md-dur-medium) var(--md-easing-standard),
                border-color var(--md-dur-medium) var(--md-easing-standard);
    position: relative;
    overflow: hidden;
}

/* Feature */
.feature-card { text-align: center; height: 100%; }
.feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: var(--bl-grad-magenta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--md-dur-medium) var(--md-easing-standard);
}
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--md-elev-4);
    border-color: rgba(96,46,158,.25);
}
.feature-card:hover::before { transform: scaleX(1); }

.feature-icon {
    width: 72px; height: 72px;
    border-radius: var(--md-radius-md);
    margin: 0 auto 1.4rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.85rem;
    color: #fff;
    background: var(--bl-grad);
    box-shadow: var(--md-elev-cta);
    transition: transform var(--md-dur-medium) var(--md-easing-standard);
}
.feature-card:hover .feature-icon { transform: rotate(-6deg) scale(1.05); }

.icon-primary  { background: var(--bl-grad); }
.icon-success  { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 20px rgba(16,185,129,.35); }
.icon-warning  { background: linear-gradient(135deg, var(--bl-flame), var(--bl-gold)); box-shadow: 0 4px 20px rgba(238,76,44,.35); }
.icon-danger   { background: linear-gradient(135deg, var(--bl-error), #b1226c); box-shadow: 0 4px 20px rgba(226,63,131,.35); }
.icon-info     { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 4px 20px rgba(59,130,246,.35); }
.icon-purple   { background: var(--bl-grad-magenta); box-shadow: 0 4px 20px rgba(96,46,158,.35); }

.feature-title {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--bl-text);
    margin-bottom: .55rem;
    letter-spacing: -.01em;
}
.feature-desc {
    font-size: .92rem;
    color: var(--bl-text-3);
    line-height: 1.65;
}

/* Step (con grid 2-cols ahora) */
.step-card {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.4rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--md-elev-2);
    height: calc(100% - 1rem);
}
.step-card:hover {
    transform: translateX(6px);
    box-shadow: var(--md-elev-3);
    border-color: rgba(96,46,158,.20);
}
.step-number {
    width: 44px; height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: var(--bl-grad-magenta);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--md-elev-cta);
    flex-shrink: 0;
}
.step-icon-wrap {
    width: 50px; height: 50px;
    min-width: 50px;
    border-radius: var(--md-radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.step-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bl-text);
    margin-bottom: .25rem;
}
.step-desc {
    font-size: .9rem;
    color: var(--bl-text-3);
    line-height: 1.6;
}

/* Stat */
.stat-card {
    text-align: center;
    height: 100%;
    margin: 0 .25rem;
}
.stat-card:hover { transform: translateY(-6px); }
.stat-icon {
    width: 60px; height: 60px;
    border-radius: var(--md-radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
    color: #fff;
    background: var(--bl-grad);
    box-shadow: var(--md-elev-cta);
}
.stat-num {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
    background: var(--bl-grad-magenta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: .35rem;
}
.stat-label {
    font-size: .92rem;
    font-weight: 600;
    color: var(--bl-text);
    margin-bottom: .15rem;
}
.stat-desc {
    font-size: .8rem;
    color: var(--bl-text-muted);
}

/* ╔══════════════════════════ TESTIMONIALS SLIDER ════════════════════════╗ */
.testimonials-slider-wrap {
    overflow: hidden;
    position: relative;
    padding: 1rem 0 2rem;
    margin: 0 -1rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testimonials-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: slideTestimonials 40s linear infinite;
    will-change: transform;
}
.testimonials-slider-wrap:hover .testimonials-track {
    animation-play-state: paused;
}
@keyframes slideTestimonials {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.testimonials-track .testimonial-card {
    flex: 0 0 360px;
    width: 360px;
    height: auto;
}
@media (max-width: 575.98px) {
    .testimonials-track .testimonial-card { flex: 0 0 86vw; width: 86vw; }
}

.testimonial-card {
    padding: 1.8rem 1.6rem;
}
.testimonial-card:hover {
    transform: translateY(-6px);
    border-color: rgba(96,46,158,.20);
}
.t-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--bl-grad);
    flex-shrink: 0;
}
.avatar-primary  { background: var(--bl-grad-magenta); }
.avatar-success  { background: linear-gradient(135deg, #10b981, #059669); }
.avatar-warning  { background: linear-gradient(135deg, var(--bl-flame), var(--bl-gold)); }
.avatar-danger   { background: linear-gradient(135deg, var(--bl-error), #b1226c); }
.avatar-info     { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.avatar-purple   { background: var(--bl-grad); }

.t-name { font-weight: 700; color: var(--bl-text); font-size: .98rem; }
.t-location {
    font-size: .78rem;
    color: var(--bl-text-muted);
}
.t-stars {
    color: var(--bl-gold);
    font-size: 1rem;
    letter-spacing: 2px;
    margin: .5rem 0;
}
.t-comment {
    font-size: .92rem;
    color: var(--bl-text-3);
    line-height: 1.7;
    font-style: italic;
    position: relative;
    padding-left: 1.2rem;
}
.t-comment::before {
    content: '“';
    position: absolute;
    left: -.2rem; top: -.8rem;
    font-size: 2.5rem;
    color: var(--bl-primary);
    font-family: Georgia, serif;
    line-height: 1;
    opacity: .35;
}

/* ╔══════════════════════════ FAQ ACCORDION ══════════════════════════════╗ */
.accordion-item {
    background: var(--bl-surface) !important;
    border: 1px solid var(--bl-border-2);
    border-radius: var(--md-radius-md) !important;
    margin-bottom: .85rem;
    overflow: hidden;
    box-shadow: var(--md-elev-1);
    transition: box-shadow var(--md-dur-short) var(--md-easing-standard),
                border-color var(--md-dur-short) var(--md-easing-standard);
}
.accordion-item:hover {
    border-color: rgba(96,46,158,.25);
    box-shadow: var(--md-elev-2);
}
.accordion-button {
    background: var(--bl-surface);
    color: var(--bl-text);
    font-weight: 600;
    font-size: .95rem;
    padding: 1rem 1.2rem;
    border: none;
    box-shadow: none !important;
    line-height: 1.45;
}
.accordion-button:not(.collapsed) {
    background: var(--bl-surface-tint);
    color: var(--bl-primary);
}
.accordion-button::after {
    width: 22px; height: 22px;
    background-size: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23602e9e'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-color: var(--bl-surface-tint);
    transition: transform var(--md-dur-short) var(--md-easing-standard);
    color: var(--bl-text);
}
.accordion-body {
    background: var(--bl-surface);
    color: var(--bl-text-3);
    font-size: .9rem;
    line-height: 1.7;
    padding: 0 1.2rem 1.1rem;
}

/* ╔══════════════════════════ CONTACT FORM ═══════════════════════════════╗ */
.contact-card {
    padding: 2rem;
    height: 100%;
}
.contact-card h5 {
    color: var(--bl-text);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
}
.contact-info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px dashed var(--bl-divider);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-icon {
    width: 44px; height: 44px;
    min-width: 44px;
    border-radius: var(--md-radius-sm);
    background: var(--bl-surface-tint);
    color: var(--bl-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.contact-label {
    font-size: .76rem;
    color: var(--bl-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-bottom: 2px;
}
.contact-value {
    font-size: .94rem;
    color: var(--bl-text);
    font-weight: 500;
}

.form-lp label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--bl-text-2);
    margin-bottom: .35rem;
    display: block;
}
.form-lp .form-control {
    background: var(--bl-surface-2);
    border: 1.5px solid var(--bl-border);
    color: var(--bl-text);
    border-radius: var(--md-radius-sm);
    padding: .75rem 1rem;
    font-size: .92rem;
    transition: border-color var(--md-dur-short) var(--md-easing-standard),
                box-shadow var(--md-dur-short) var(--md-easing-standard),
                background var(--md-dur-short) var(--md-easing-standard);
}
.form-lp .form-control::placeholder { color: var(--bl-text-muted); }
.form-lp .form-control:focus {
    background: var(--bl-surface);
    border-color: var(--bl-primary);
    box-shadow: 0 0 0 4px rgba(96,46,158,.15);
    outline: none;
}

.btn-contact {
    background: var(--bl-grad-cta);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: var(--md-radius-pill);
    padding: .8rem 2rem;
    box-shadow: var(--md-elev-cta);
    transition: all var(--md-dur-short) var(--md-easing-standard);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .5rem;
}
.btn-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(96,46,158,.55);
    filter: brightness(1.05);
    color: #fff;
}

/* ╔══════════════════════════ FOOTER ═════════════════════════════════════╗ */
.lp-footer {
    background: var(--bl-bg-alt);
    border-top: 1px solid var(--bl-border);
    padding: 4rem 0 2rem;
    color: var(--bl-text-3);
}
.footer-brand {
    font-size: 1.5rem;
    font-weight: 800;
    background: var(--bl-grad-magenta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    display: inline-flex;
}
.footer-brand img { height: 90px; width: auto; }
.footer-tagline {
    color: var(--bl-text-3);
    font-size: .92rem;
    line-height: 1.7;
}
.footer-heading {
    color: var(--bl-text);
    font-weight: 700;
    font-size: .88rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 1rem;
}
.footer-link {
    display: block;
    color: var(--bl-text-3) !important;
    font-size: .88rem;
    padding: .35rem 0;
    transition: color var(--md-dur-short) var(--md-easing-standard),
                transform var(--md-dur-short) var(--md-easing-standard);
}
.footer-link:hover {
    color: var(--bl-primary) !important;
    transform: translateX(4px);
}

/* — Footer legal: 2 columnas — */
.footer-legal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.social-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: .55rem;
    margin-bottom: .55rem;
    color: var(--bl-text-2);
    transition: all var(--md-dur-short) var(--md-easing-standard);
    text-decoration: none;
}
.social-btn:hover {
    transform: translateY(-3px);
    border-color: var(--bl-primary) !important;
    box-shadow: var(--md-elev-2);
}

.footer-divider {
    border: none;
    height: 1px;
    background: var(--bl-divider);
    margin: 2.5rem 0 2rem;
}
.footer-copy {
    font-size: .82rem;
    color: var(--bl-text-muted);
}

/* ╔══════════════════════════ PAGE.PHP ═══════════════════════════════════╗ */
.page-hero {
    padding: 130px 0 60px;
    background: var(--bl-grad-soft);
    border-bottom: 1px solid var(--bl-border);
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 360px; height: 360px;
    background: var(--bl-grad-magenta);
    filter: blur(140px);
    opacity: .12;
    border-radius: 50%;
}
.page-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--bl-text);
    margin: 0;
    letter-spacing: -.02em;
}
.page-hero .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: .8rem;
    font-size: .85rem;
}
.page-hero .breadcrumb-item a {
    color: var(--bl-primary);
    text-decoration: none;
}
.page-hero .breadcrumb-item.active { color: var(--bl-text-muted); }
.page-hero .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bl-text-muted);
    content: '›';
}
.page-hero .meta {
    color: var(--bl-text-muted);
    font-size: .88rem;
    margin-top: .8rem;
}
.page-content { padding: 60px 0 90px; }

.prose {
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    border-radius: var(--md-radius-xl);
    padding: 2.8rem 2.4rem;
    box-shadow: var(--md-elev-3);
    color: var(--bl-text-3);
    line-height: 1.8;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: var(--bl-text);
    font-weight: 700;
    letter-spacing: -.01em;
}
.prose h2 {
    font-size: 1.5rem;
    margin: 1.8rem 0 .8rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--bl-divider);
    position: relative;
}
.prose h2::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 50px; height: 2px;
    background: var(--bl-grad-magenta);
}
.prose h3 {
    font-size: 1.15rem;
    color: var(--bl-primary);
    margin: 1.4rem 0 .55rem;
}
.prose p { margin-bottom: 1rem; color: var(--bl-text-3); }
.prose ul, .prose ol {
    color: var(--bl-text-3);
    line-height: 1.8;
    padding-left: 1.4rem;
    margin-bottom: 1rem;
}
.prose li { margin-bottom: .35rem; }
.prose strong { color: var(--bl-text); font-weight: 700; }
.prose a {
    color: var(--bl-primary);
    text-decoration: underline;
    text-decoration-color: rgba(96,46,158,.35);
    text-underline-offset: 3px;
}
.prose a:hover { text-decoration-color: var(--bl-primary); color: var(--bl-accent); }
.prose blockquote {
    border-left: 4px solid var(--bl-primary);
    background: var(--bl-surface-tint);
    border-radius: 0 var(--md-radius-sm) var(--md-radius-sm) 0;
    padding: 1rem 1.2rem;
    margin: 1.2rem 0;
    color: var(--bl-text-2);
}
.prose code {
    background: var(--bl-surface-2);
    color: var(--bl-primary);
    padding: .15rem .4rem;
    border-radius: 4px;
    font-size: .88em;
}

.btn-back {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--bl-surface-2);
    border: 1.5px solid var(--bl-border);
    color: var(--bl-text-2);
    border-radius: var(--md-radius-pill);
    padding: .7rem 1.6rem;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: all var(--md-dur-short) var(--md-easing-standard);
}
.btn-back:hover {
    background: var(--bl-surface-tint);
    border-color: var(--bl-primary);
    color: var(--bl-primary);
    transform: translateY(-2px);
    box-shadow: var(--md-elev-2);
}

/* ╔══════════════════════════ UTIL ═══════════════════════════════════════╗ */
.mobile-only { display: none; }

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--md-easing-standard), transform .7s var(--md-easing-standard);
}
[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal][data-delay="1"].revealed { transition-delay: .08s; }
[data-reveal][data-delay="2"].revealed { transition-delay: .16s; }
[data-reveal][data-delay="3"].revealed { transition-delay: .24s; }
[data-reveal][data-delay="4"].revealed { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ╔══════════════════════════ BOOTSTRAP OVERRIDES ════════════════════════╗ */
.btn:focus, .btn:focus-visible {
    box-shadow: 0 0 0 4px rgba(96,46,158,.25) !important;
}
.btn-primary {
    background: var(--bl-grad-cta) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--md-radius-pill) !important;
    padding: .65rem 1.6rem !important;
    box-shadow: var(--md-elev-cta) !important;
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-2px); }

.alert {
    border-radius: var(--md-radius-md);
    border: 1px solid var(--bl-border);
    background: var(--bl-surface);
    color: var(--bl-text-2);
}
.badge {
    border-radius: var(--md-radius-pill);
    padding: .35em .8em;
    font-weight: 600;
}

/* ╔══════════════════════════ RESPONSIVE ═════════════════════════════════╗ */
@media (max-width: 991.98px) {
    .lp-section { padding: 70px 0; }
    section#inicio { padding: 110px 0 50px; }
    .bingo-balls-hero { display: none; }
    .mobile-only { display: list-item; }

    .lp-nav .navbar-collapse {
        background: var(--bl-bg-elev);
        border: 1px solid var(--bl-border);
        border-radius: var(--md-radius-md);
        margin-top: .8rem;
        padding: 1rem;
        box-shadow: var(--md-elev-3);
    }
    .lp-nav .navbar-nav { gap: .15rem; }
    .lp-nav .nav-link-lp {
        padding: .8rem 1rem !important;
        text-align: left;
        border-radius: var(--md-radius-sm);
    }
    .lp-nav .navbar-collapse .d-flex {
        flex-direction: column;
        gap: .5rem !important;
        align-items: stretch !important;
    }
    .lp-nav .btn-nav-cta,
    .lp-nav .btn-nav-ghost {
        width: 100%;
        justify-content: center;
    }
    .theme-fab { align-self: flex-end; }
}

@media (max-width: 767.98px) {
    .lp-section { padding: 60px 0; }
    section#inicio { padding: 100px 0 40px; }
    .feature-card, .step-card, .stat-card, .testimonial-card, .contact-card {
        padding: 1.6rem 1.3rem;
    }
    .prose { padding: 1.6rem 1.3rem; }
    .hero-btns { flex-direction: column; align-items: stretch; }
    .hero-btns .btn-hero-primary,
    .hero-btns .btn-hero-secondary { width: 100%; justify-content: center; }
    .section-title { font-size: 1.7rem; }

    /* Hero stats: 3 en línea con tamaños reducidos */
    .hero-stats-row { gap: .4rem; }
    .hero-stat-card { padding: .65rem .4rem; }
}

@media (max-width: 479.98px) {
    .lp-nav .nav-brand { font-size: 1.25rem; }
    .lp-nav .nav-brand img { height: 44px; }
    .hero-title { font-size: 2rem; }
    .hero-sub { font-size: .95rem; }
    .feature-icon { width: 60px; height: 60px; font-size: 1.5rem; }
    .step-card { flex-direction: column; align-items: flex-start; gap: .8rem; }
    .footer-legal-grid { grid-template-columns: 1fr; }
}

/* — Print — */
@media print {
    .lp-nav, .lp-footer, .theme-fab, .wa-fab, #waFab, #lys-support-widget,
    #cookieConsent, #cookieBanner, [data-reveal], .testimonials-slider-wrap { display: none !important; }
    body { background: #fff; color: #000; }
    .prose { box-shadow: none; border: 1px solid #ccc; }
    a { color: #000; text-decoration: underline; }
}

@media (max-width: 480px) {
    .lys-sup-fab { bottom: 16px !important; right: 16px !important; width: 48px; height: 48px; }
}