/* =========================================================================
   BaloCard — Landing 2026 SUPER (mesh, glass, shimmer, float, sparkles, bento)
   ========================================================================= */

/* ====== Variables / propiedades animables ====== */
@property --gr-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* =================== Shell con mesh animado + grain + orbs flotantes =================== */
.bc-shell {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    padding-bottom: 2rem;
}
.bc-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(at 18% 8%,   hsla(220, 100%, 70%, .12) 0, transparent 50%),
        radial-gradient(at 82% 12%,  hsla(265, 95%, 72%, .10) 0, transparent 50%),
        radial-gradient(at 8% 92%,   hsla(190, 100%, 70%, .08) 0, transparent 50%),
        radial-gradient(at 92% 96%,  hsla(330, 95%, 72%, .08) 0, transparent 50%),
        #FAFBFC;
    z-index: -3;
    pointer-events: none;
    animation: bc-mesh 30s ease-in-out infinite alternate;
}
.bc-shell::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    z-index: -1;
    pointer-events: none;
    opacity: .35;
    mix-blend-mode: overlay;
}
@keyframes bc-mesh {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(20px, -15px) scale(1.05); }
    100% { transform: translate(-15px, 10px) scale(1); }
}

/* Orbs flotantes de fondo */
.bc-orbs { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.bc-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .18;
    animation: bc-orb-float 32s ease-in-out infinite;
}
.bc-orb--1 { width: 360px; height: 360px; background: #6366F1; top: -120px; left: -120px; animation-duration: 36s; }
.bc-orb--2 { width: 260px; height: 260px; background: #EC4899; top: 35%; right: -100px; animation-duration: 32s; animation-delay: -8s; opacity: .14; }
.bc-orb--3 { width: 300px; height: 300px; background: #06B6D4; bottom: 25%; left: 10%; animation-duration: 38s; animation-delay: -14s; opacity: .12; }
.bc-orb--4 { display: none; }
@media (max-width: 767.98px) {
    .bc-orb { opacity: .10 !important; filter: blur(110px); }
}
@keyframes bc-orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(60px, -40px) scale(1.1); }
    66%      { transform: translate(-50px, 30px) scale(.95); }
}

/* =================== Social-proof ticker (arriba del hero) =================== */
.bc-ticker {
    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    color: #475569;
    padding: .5rem 0;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid rgba(15,23,42,.06);
}
.bc-ticker__track {
    display: inline-flex;
    gap: 2.5rem;
    white-space: nowrap;
    animation: bc-ticker-roll 40s linear infinite;
    padding-left: 100%;
    will-change: transform;
}
.bc-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 500;
    color: #64748B;
}
.bc-ticker__item strong { color: #0F172A; font-weight: 700; }
.bc-ticker__item i { color: #6366F1; font-size: .9rem; }
@keyframes bc-ticker-roll { to { transform: translateX(-100%); } }

/* =================== Entrada por seccion =================== */
.bc-section {
    padding: 5rem 0;
    animation: bc-fade-up .9s cubic-bezier(.22,.68,0,1.2) backwards;
}
@keyframes bc-fade-up {
    from { opacity: 0; transform: translateY(34px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =================== HERO compacto (single card oscuro) =================== */
.bc-hero {
    padding: 3rem 0 2rem;
    position: relative;
}
/* Variante full-bleed: rompe el container del _Layout (margin negativo)
   para ocupar el 100% del viewport sin tocar el layout global. */
.bc-hero--full {
    padding: 0;
    margin-bottom: 1rem;
    /* Negative-margin trick: extiende el ancho hasta los bordes del viewport */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
}
.bc-hero--full .bc-hero-card {
    max-width: none;
    border-radius: 0;
    padding: 5rem 1.5rem 4.5rem;
    margin: 0;
    box-shadow: 0 16px 50px -16px rgba(49,46,129,.45);
}
@media (min-width: 768px) {
    .bc-hero--full .bc-hero-card { padding: 6rem 2rem 5rem; }
}

.bc-hero-card {
    position: relative;
    text-align: center;
    padding: 3.5rem 2rem 3rem;
    border-radius: 28px;
    background:
        radial-gradient(at 25% 20%, hsla(220, 100%, 70%, .35) 0, transparent 50%),
        radial-gradient(at 75% 85%, hsla(330, 95%, 70%, .28) 0, transparent 50%),
        linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 30px 80px -20px rgba(49,46,129,.55);
    max-width: 780px;
    margin: 0 auto;
}
.bc-hero-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from var(--gr-angle, 0deg) at 50% 50%,
        transparent 0deg,
        rgba(139,92,246,.30) 30deg,
        transparent 60deg,
        rgba(236,72,153,.28) 180deg,
        transparent 220deg,
        rgba(6,182,212,.28) 300deg,
        transparent 360deg);
    z-index: -1;
    animation: bc-rotate 22s linear infinite;
}
.bc-hero-card > * { position: relative; z-index: 1; }

.bc-hero-card__pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem 1.1rem;
    background: rgba(251,191,36,.18);
    color: #FBBF24;
    border: 1px solid rgba(251,191,36,.35);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.bc-hero-card__pill i { font-size: 1rem; }

.bc-hero-card__title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 1rem;
}

.bc-hero-card__subtitle {
    color: rgba(255,255,255,.85);
    font-size: 1.1rem;
    max-width: 540px;
    margin: 0 auto 2rem;
    line-height: 1.55;
}

.bc-hero-card__actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}
.bc-hero-card .bc-btn-primary {
    background: #fff;
    color: #312E81;
    box-shadow: 0 22px 50px rgba(0,0,0,.35);
}
.bc-hero-card .bc-btn-primary:hover { color: #312E81; background: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.45); }

/* Outline claro (sobre el fondo oscuro del hero) */
.bc-btn-outline-light {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: 1rem 1.7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.40);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.22,.68,0,1.2), background .3s, border-color .3s;
}
.bc-btn-outline-light:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.65);
    color: #fff;
}

.bc-hero-card__login {
    display: block;
    margin-top: 1.1rem;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-size: .88rem;
}
.bc-hero-card__login:hover { color: #fff; }

/* Confetti dentro del hero card */
.bc-hero-card .bc-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bc-hero-card .bc-confetti span {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 3px;
    opacity: .85;
    animation: bc-confetti 8s linear infinite;
}

/* Pill superior con star giratoria */
.bc-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(99,102,241,.20);
    color: #4338CA;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(99,102,241,.18);
    margin-bottom: 1.4rem;
}
.bc-pill i { color: #8B5CF6; animation: bc-spin 4s linear infinite; }
@keyframes bc-spin { to { transform: rotate(360deg); } }

.bc-title {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: #0F172A;
    margin: 0 0 1.4rem;
}
.bc-title-shine {
    background: linear-gradient(110deg, #6366F1 0%, #8B5CF6 25%, #EC4899 50%, #06B6D4 75%, #6366F1 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: bc-shimmer 4s linear infinite;
    display: inline-block;
}
@keyframes bc-shimmer { to { background-position: 200% center; } }

.bc-subtitle {
    font-size: 1.18rem;
    color: #475569;
    max-width: 540px;
    margin: 0 0 1.6rem;
    line-height: 1.6;
}
@media (max-width: 991.98px) { .bc-subtitle { margin-left: auto; margin-right: auto; } }

.bc-bullets {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem 1.4rem;
    margin: 1.4rem 0 2rem;
    list-style: none;
    padding: 0;
}
@media (max-width: 991.98px) { .bc-bullets { justify-content: center; } }
.bc-bullets li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #334155;
    font-size: .92rem;
    font-weight: 600;
}
.bc-bullets i {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    box-shadow: 0 4px 12px rgba(16,185,129,.40);
    animation: bc-pulse 2.4s ease-in-out infinite;
}
.bc-bullets li:nth-child(2) i { animation-delay: .4s; }
.bc-bullets li:nth-child(3) i { animation-delay: .8s; }
@keyframes bc-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(16,185,129,.40); }
    50%      { transform: scale(1.1); box-shadow: 0 6px 18px rgba(16,185,129,.60); }
}

.bc-cta-row { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 991.98px) { .bc-cta-row { justify-content: center; } }

.bc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #fff;
    font-weight: 700;
    font-size: 1.02rem;
    text-decoration: none;
    border: none;
    box-shadow: 0 16px 40px rgba(99,102,241,.45), 0 4px 12px rgba(0,0,0,.10);
    transition: transform .35s cubic-bezier(.22,.68,0,1.2), box-shadow .35s ease;
    position: relative;
    overflow: hidden;
}
.bc-btn-primary::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .8s ease;
}
.bc-btn-primary:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 24px 50px rgba(99,102,241,.60), 0 8px 16px rgba(0,0,0,.18); color: #fff; }
.bc-btn-primary:hover::before { transform: translateX(100%); }
.bc-btn-primary:active { transform: translateY(0) scale(.98); }

.bc-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .95rem 1.7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(15,23,42,.10);
    color: #1F2937;
    font-weight: 600;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.22,.68,0,1.2), background .3s, border-color .3s;
}
.bc-btn-ghost:hover { transform: translateY(-3px); background: #fff; border-color: rgba(99,102,241,.40); color: #1F2937; }

/* Hero kpis (debajo de los CTA) */
.bc-hero__kpis {
    display: flex;
    gap: 1.4rem;
    margin-top: 2.2rem;
    flex-wrap: wrap;
}
@media (max-width: 991.98px) { .bc-hero__kpis { justify-content: center; } }
.bc-hero__kpi { display: flex; flex-direction: column; }
.bc-hero__kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6366F1, #EC4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}
.bc-hero__kpi-label { font-size: .78rem; color: #64748B; font-weight: 500; margin-top: .25rem; text-transform: uppercase; letter-spacing: .04em; }
.bc-hero__kpi-divider { width: 1px; background: rgba(15,23,42,.10); }

/* =================== HERO MOCKUP (visual derecho) =================== */
.bc-hero__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 480px; }

/* Stamp circular "GRATIS" */
.bc-stamp {
    position: absolute;
    top: -10px;
    right: 10px;
    width: 110px; height: 110px;
    z-index: 5;
    animation: bc-stamp-bounce .8s cubic-bezier(.22,.68,0,1.2) backwards;
    animation-delay: .8s;
}
@media (max-width: 575.98px) { .bc-stamp { width: 88px; height: 88px; top: -5px; right: 5px; } }
.bc-stamp__circle {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.3rem;
    text-transform: uppercase;
    box-shadow: 0 16px 38px rgba(245,158,11,.55);
    border: 4px dashed rgba(255,255,255,.7);
    transform: rotate(-12deg);
    animation: bc-stamp-spin 12s linear infinite;
    letter-spacing: .03em;
}
@keyframes bc-stamp-spin {
    from { transform: rotate(-12deg); }
    to   { transform: rotate(348deg); }
}
@keyframes bc-stamp-bounce {
    from { opacity: 0; transform: scale(.4); }
    to   { opacity: 1; transform: scale(1); }
}

/* Sparkles flotantes alrededor del mockup */
.bc-sparkle {
    position: absolute;
    width: 18px; height: 18px;
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    box-shadow: 0 8px 20px rgba(245,158,11,.40);
    animation: bc-sparkle 4s ease-in-out infinite;
}
.bc-sparkle--1 { top: 8%;  left: 10%; animation-delay: 0s; }
.bc-sparkle--2 { top: 20%; right: 8%; animation-delay: 1s; background: linear-gradient(135deg, #06B6D4, #0891B2); box-shadow: 0 8px 20px rgba(6,182,212,.40); }
.bc-sparkle--3 { bottom: 18%; left: 5%; animation-delay: 2s; background: linear-gradient(135deg, #EC4899, #DB2777); box-shadow: 0 8px 20px rgba(236,72,153,.40); }
.bc-sparkle--4 { bottom: 8%; right: 12%; animation-delay: 1.5s; background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 8px 20px rgba(16,185,129,.40); }
@keyframes bc-sparkle {
    0%, 100% { transform: translateY(0) rotate(0); opacity: .9; }
    50%      { transform: translateY(-12px) rotate(15deg); opacity: 1; }
}

/* Mini cards flotantes (notificaciones tipo iOS) */
.bc-float-card {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    padding: .65rem .85rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    box-shadow: 0 18px 40px -10px rgba(15,23,42,.20), 0 6px 16px rgba(15,23,42,.10);
    border: 1px solid rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 4;
    animation: bc-float-card 5s ease-in-out infinite;
}
.bc-float-card--qr {
    bottom: 14%;
    left: -10px;
    animation-delay: 0s;
}
.bc-float-card--bell {
    top: 25%;
    right: -15px;
    animation-delay: 1.5s;
}
@media (max-width: 575.98px) {
    .bc-float-card--qr   { left: -5px; bottom: 8%; }
    .bc-float-card--bell { right: -5px; top: 18%; }
}
@keyframes bc-float-card {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.bc-float-card__icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .9rem;
    flex-shrink: 0;
}
.bc-float-card__title { font-size: .78rem; font-weight: 700; color: #0F172A; line-height: 1.1; }
.bc-float-card__sub { font-size: .68rem; color: #64748B; line-height: 1.1; }

/* Phone mockup (flota suavemente con borde conic) */
.bc-phone {
    width: 290px;
    background: #fff;
    border-radius: 36px;
    padding: 1.4rem 1.1rem 1.6rem;
    box-shadow:
        0 50px 110px -30px rgba(99,102,241,.55),
        0 25px 60px -20px rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.85);
    position: relative;
    z-index: 2;
    animation: bc-phone-float 6s ease-in-out infinite;
}
@keyframes bc-phone-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-10px) rotate(1deg); }
}
.bc-phone::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 38px;
    padding: 2px;
    background: conic-gradient(from var(--gr-angle, 0deg), #6366F1, #8B5CF6, #EC4899, #06B6D4, #10B981, #6366F1);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .85;
    animation: bc-rotate 8s linear infinite;
}
@keyframes bc-rotate { to { --gr-angle: 360deg; } }
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .bc-phone::before { display: none; }
}
.bc-phone__notch {
    width: 70px; height: 5px;
    border-radius: 5px;
    background: #E5E7EB;
    margin: 0 auto .85rem;
}
.bc-phone__avatar {
    width: 78px; height: 78px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366F1, #8B5CF6, #EC4899);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin: 0 auto .8rem;
    box-shadow: 0 14px 28px rgba(99,102,241,.40);
    border: 3px solid #fff;
}
.bc-phone__name { text-align: center; font-weight: 700; color: #0F172A; margin-bottom: .1rem; }
.bc-phone__role { text-align: center; color: #6366F1; font-weight: 600; font-size: .82rem; margin-bottom: 1rem; }
.bc-phone__btns { display: grid; gap: .45rem; }
.bc-phone__btn {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .8rem;
    border-radius: 10px;
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.15);
    color: #1F2937;
    font-weight: 600;
    font-size: .82rem;
}
.bc-phone__btn i { color: #6366F1; }
.bc-phone__qr {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px dashed rgba(15,23,42,.10);
    display: flex;
    align-items: center;
    gap: .65rem;
}
.bc-phone__qr-box {
    width: 44px; height: 44px;
    background: #0F172A;
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.bc-phone__qr-text { font-size: .72rem; color: #64748B; line-height: 1.25; }
.bc-phone__qr-text strong { color: #0F172A; }

/* ----- Variante "demo" mas alta y con todas las secciones ----- */
.bc-phone--demo {
    width: 320px;
    padding: 1.2rem 1rem 1.4rem;
    /* Anular la animacion float del phone normal para esta variante mas alta */
    animation: bc-phone-float-soft 6s ease-in-out infinite;
}
@keyframes bc-phone-float-soft {
    0%, 100% { transform: translateY(0) rotate(-.5deg); }
    50%      { transform: translateY(-6px) rotate(.5deg); }
}
@media (max-width: 575.98px) {
    .bc-phone--demo { width: 280px; padding: 1rem .85rem 1.2rem; }
}

/* Section title chiquita dentro del phone demo */
.bc-phone__section-title {
    font-size: .65rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-align: center;
    margin: 1rem 0 .55rem;
    position: relative;
}
.bc-phone__section-title::before,
.bc-phone__section-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 18%;
    height: 1px;
    background: rgba(15,23,42,.10);
}
.bc-phone__section-title::before { left: 8%; }
.bc-phone__section-title::after  { right: 8%; }

/* Mini servicio card */
.bc-phone__service {
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.06));
    border: 1px solid rgba(99,102,241,.12);
    border-radius: 10px;
    padding: .55rem .7rem;
    margin-bottom: .45rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}
.bc-phone__service-name { font-size: .76rem; font-weight: 700; color: #0F172A; }
.bc-phone__service-desc { font-size: .68rem; color: #64748B; line-height: 1.2; }
.bc-phone__service-price {
    font-size: .78rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    white-space: nowrap;
}

/* Mini galeria 3 thumbs */
.bc-phone__gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
}
.bc-phone__gallery-thumb {
    aspect-ratio: 1/1;
    border-radius: 8px;
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(99,102,241,.55);
    font-size: 1.1rem;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}
.bc-phone__gallery-thumb:nth-child(1) { background: linear-gradient(135deg, #FEF3C7, #FCD34D); color: #92400E; }
.bc-phone__gallery-thumb:nth-child(2) { background: linear-gradient(135deg, #DBEAFE, #93C5FD); color: #1E40AF; }
.bc-phone__gallery-thumb:nth-child(3) { background: linear-gradient(135deg, #FCE7F3, #F9A8D4); color: #9D174D; }

/* Mini mapa */
.bc-phone__map {
    height: 70px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 50%, transparent 6px, rgba(99,102,241,.08) 7px, transparent 8px),
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(99,102,241,.04) 8px 9px),
        linear-gradient(135deg, #ECFEFF, #F0FDF4);
    border: 1px solid rgba(15,23,42,.06);
    position: relative;
    overflow: hidden;
}
.bc-phone__map-pin {
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    background: linear-gradient(135deg, #2563EB, #8B5CF6);
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: translate(-50%, -100%) rotate(-45deg);
    box-shadow: 0 4px 8px rgba(37,99,235,.35);
}

/* Mini redes (iconos coloreados) */
.bc-phone__socials {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: .35rem;
    flex-wrap: wrap;
}
.bc-phone__social {
    width: 34px; height: 34px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 6px 12px rgba(0,0,0,.18);
    transition: transform .25s cubic-bezier(.22,.68,0,1.2);
}
.bc-phone__social:hover { transform: translateY(-3px) scale(1.08); }
.bc-phone__social--ig { background: linear-gradient(135deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5); }
.bc-phone__social--fb { background: #1877F2; }
.bc-phone__social--wa { background: #25D366; }
.bc-phone__social--tt { background: linear-gradient(135deg, #25F4EE, #000, #FE2C55); }
.bc-phone__social--yt { background: #FF0000; }
.bc-phone__social--li { background: #0A66C2; }
.bc-phone__social--tw { background: #000; }

/* QR realista (no solo icono, patron real) */
.bc-phone__qr-real {
    width: 60px; height: 60px;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.bc-phone__qr-real svg { display: block; width: 100%; height: 100%; }

/* =================== Section heading =================== */
.bc-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #6366F1;
    background: rgba(99,102,241,.10);
    padding: .35rem .85rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.bc-eyebrow--green { color: #059669; background: rgba(16,185,129,.10); }
.bc-eyebrow--pink  { color: #DB2777; background: rgba(236,72,153,.10); }
.bc-eyebrow--orange{ color: #D97706; background: rgba(245,158,11,.12); }
.bc-h2 {
    font-size: clamp(1.8rem, 3.8vw, 2.7rem);
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -.015em;
    line-height: 1.18;
    margin-bottom: 1rem;
}
.bc-lead {
    font-size: 1.1rem;
    color: #475569;
    max-width: 680px;
    margin: 0 auto 1rem;
    line-height: 1.6;
}

/* =================== Stepper "60 segundos" =================== */
.bc-stepper-wrap {
    background:
        radial-gradient(at 20% 20%, hsla(220,100%,70%,.10) 0, transparent 60%),
        radial-gradient(at 80% 30%, hsla(265,95%,70%,.10) 0, transparent 60%),
        rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 28px;
    padding: 3rem 2rem;
    box-shadow: 0 20px 60px -20px rgba(99,102,241,.20);
    text-align: center;
}
.bc-clock-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1.2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: 0 14px 30px rgba(16,185,129,.40);
    margin-bottom: 1.4rem;
}
.bc-clock-badge i { animation: bc-tick 1s ease-in-out infinite; font-size: 1.2rem; }
@keyframes bc-tick {
    0%, 100% { transform: rotate(0); }
    50%      { transform: rotate(15deg); }
}

.bc-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}
@media (min-width: 768px) {
    .bc-steps { grid-template-columns: repeat(3, 1fr); position: relative; }
    .bc-steps::before {
        content: '';
        position: absolute;
        top: 32px;
        left: 16.66%;
        right: 16.66%;
        height: 3px;
        background: linear-gradient(90deg, #6366F1, #8B5CF6, #EC4899);
        z-index: 0;
        border-radius: 999px;
        opacity: .35;
    }
}
.bc-step { position: relative; z-index: 1; text-align: center; }
.bc-step__num {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.6rem;
    box-shadow: 0 14px 30px rgba(99,102,241,.40);
    margin-bottom: .85rem;
    border: 4px solid #fff;
}
.bc-step:nth-child(2) .bc-step__num { background: linear-gradient(135deg, #8B5CF6, #EC4899); box-shadow: 0 14px 30px rgba(139,92,246,.40); }
.bc-step:nth-child(3) .bc-step__num { background: linear-gradient(135deg, #EC4899, #F43F5E); box-shadow: 0 14px 30px rgba(236,72,153,.40); }
.bc-step__title { font-weight: 700; color: #0F172A; font-size: 1.05rem; margin-bottom: .25rem; }
.bc-step__text  { color: #475569; font-size: .9rem; line-height: 1.5; max-width: 240px; margin: 0 auto; }
.bc-step__time {
    display: inline-block;
    margin-top: .5rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(16,185,129,.12);
    color: #047857;
    font-size: .72rem;
    font-weight: 700;
}

/* =================== Glass card (genérica) =================== */
.bc-card {
    position: relative;
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 22px;
    padding: 1.8rem 1.4rem;
    box-shadow: 0 12px 32px -12px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.04);
    transition: transform .35s cubic-bezier(.22,.68,0,1.2), box-shadow .35s ease;
    height: 100%;
    overflow: hidden;
}
.bc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 56px -16px rgba(99,102,241,.30), 0 10px 18px rgba(15,23,42,.08);
}
.bc-card__icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.55rem;
    margin-bottom: 1rem;
    transition: transform .35s cubic-bezier(.22,.68,0,1.2);
}
.bc-card:hover .bc-card__icon { transform: rotate(-8deg) scale(1.10); }
.bc-card__icon--indigo { background: linear-gradient(135deg, #6366F1, #4F46E5); box-shadow: 0 12px 26px rgba(79,70,229,.40); }
.bc-card__icon--purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED); box-shadow: 0 12px 26px rgba(124,58,237,.40); }
.bc-card__icon--pink   { background: linear-gradient(135deg, #EC4899, #DB2777); box-shadow: 0 12px 26px rgba(219,39,119,.40); }
.bc-card__icon--cyan   { background: linear-gradient(135deg, #06B6D4, #0891B2); box-shadow: 0 12px 26px rgba(8,145,178,.40); }
.bc-card__icon--orange { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 12px 26px rgba(217,119,6,.40); }
.bc-card__icon--green  { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 12px 26px rgba(5,150,105,.40); }
.bc-card__icon--rose   { background: linear-gradient(135deg, #F43F5E, #E11D48); box-shadow: 0 12px 26px rgba(225,29,72,.40); }
.bc-card__icon--indigo2{ background: linear-gradient(135deg, #4F46E5, #3730A3); box-shadow: 0 12px 26px rgba(55,48,163,.40); }
.bc-card__title { font-weight: 700; font-size: 1.1rem; color: #0F172A; margin-bottom: .35rem; }
.bc-card__text  { font-size: .92rem; color: #475569; line-height: 1.55; margin: 0; }

/* =================== BENTO grid (beneficios / features) =================== */
.bc-bento {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .bc-bento {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(160px, auto);
    }
    .bc-bento__big   { grid-column: span 2; grid-row: span 2; }
    .bc-bento__wide  { grid-column: span 2; }
    .bc-bento__tall  { grid-row: span 2; }
}

/* Tarjeta destacada del bento (con gradient bg propio) */
.bc-card--feature {
    background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
    color: #fff;
    border: none;
    overflow: hidden;
    position: relative;
}
.bc-card--feature::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background:
        radial-gradient(at 30% 30%, rgba(139,92,246,.40) 0, transparent 50%),
        radial-gradient(at 70% 70%, rgba(236,72,153,.30) 0, transparent 50%);
    animation: bc-rotate-bg 20s linear infinite;
    pointer-events: none;
}
@keyframes bc-rotate-bg { to { transform: rotate(360deg); } }
.bc-card--feature > * { position: relative; z-index: 1; }
.bc-card--feature .bc-card__title { color: #fff; font-size: 1.45rem; }
.bc-card--feature .bc-card__text { color: rgba(255,255,255,.80); font-size: 1rem; }
.bc-card--feature .bc-card__icon { background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; width: 64px; height: 64px; }

/* Variante "stats" para mostrar número grande */
.bc-card--stat .bc-card__big-number {
    font-size: clamp(2.5rem, 6vw, 3.8rem);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #6366F1, #EC4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .35rem;
}

/* =================== PROBLEMA =================== */
.bc-problema-box {
    max-width: 760px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(244,63,94,.06), rgba(236,72,153,.06));
    border: 1px solid rgba(244,63,94,.20);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.bc-problema-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #F43F5E, #E11D48);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    box-shadow: 0 14px 30px rgba(225,29,72,.40);
    margin-bottom: 1rem;
    animation: bc-shake 5s ease-in-out infinite;
}
@keyframes bc-shake {
    0%, 90%, 100% { transform: rotate(0); }
    92% { transform: rotate(-8deg); }
    94% { transform: rotate(8deg); }
    96% { transform: rotate(-5deg); }
    98% { transform: rotate(5deg); }
}
.bc-problema-cierre {
    margin-top: 1rem;
    font-weight: 700;
    color: #0F172A;
    font-size: 1.08rem;
}

/* =================== Casos de uso =================== */
.bc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }
.bc-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(99,102,241,.18);
    color: #1F2937;
    font-weight: 600;
    font-size: .95rem;
    transition: transform .3s cubic-bezier(.22,.68,0,1.2), box-shadow .3s ease, border-color .3s;
    cursor: default;
    box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.bc-chip i { font-size: 1.15rem; }
.bc-chip:nth-child(1) i { color: #6366F1; }
.bc-chip:nth-child(2) i { color: #8B5CF6; }
.bc-chip:nth-child(3) i { color: #EC4899; }
.bc-chip:nth-child(4) i { color: #06B6D4; }
.bc-chip:nth-child(5) i { color: #F59E0B; }
.bc-chip:hover { transform: translateY(-4px) scale(1.05); border-color: rgba(99,102,241,.50); box-shadow: 0 14px 28px -8px rgba(99,102,241,.35); }

/* =================== Diferenciador =================== */
.bc-diferenciador {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(at 20% 20%, hsla(220, 100%, 70%, .14) 0, transparent 60%),
        radial-gradient(at 80% 30%, hsla(265, 95%, 70%, .12) 0, transparent 60%),
        radial-gradient(at 50% 100%, hsla(330, 95%, 70%, .10) 0, transparent 60%),
        rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 28px;
    padding: 3rem 2rem;
    box-shadow: 0 20px 60px -20px rgba(99,102,241,.25);
}
.bc-dif-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .85rem;
    border-radius: 14px;
    transition: background .25s ease, transform .25s cubic-bezier(.22,.68,0,1.2);
}
.bc-dif-item:hover { background: rgba(99,102,241,.05); transform: translateX(4px); }
.bc-dif-check {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    box-shadow: 0 8px 18px rgba(16,185,129,.40);
}
.bc-dif-item strong { display: block; color: #0F172A; font-size: 1.05rem; margin-bottom: .15rem; }
.bc-dif-item small { color: #64748B; font-size: .88rem; line-height: 1.5; }

/* =================== PRICING (2 planes anuales) =================== */
.bc-pricing-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    max-width: 880px;
    margin: 2rem auto 0;
}
@media (min-width: 768px) {
    .bc-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

.bc-plan {
    position: relative;
    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 24px;
    padding: 2rem 1.75rem 1.75rem;
    box-shadow: 0 14px 40px -16px rgba(15,23,42,.18);
    transition: transform .35s cubic-bezier(.22,.68,0,1.2), box-shadow .35s ease;
    display: flex;
    flex-direction: column;
}
.bc-plan:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -16px rgba(99,102,241,.30); }

/* Plan destacado (Multi) */
.bc-plan--featured {
    background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
    color: #fff;
    border: none;
    overflow: hidden;
}
.bc-plan--featured::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background:
        radial-gradient(at 30% 30%, rgba(139,92,246,.40) 0, transparent 50%),
        radial-gradient(at 70% 70%, rgba(236,72,153,.30) 0, transparent 50%);
    animation: bc-rotate-bg 22s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.bc-plan--featured > * { position: relative; z-index: 1; }
.bc-plan--featured .bc-plan__name,
.bc-plan--featured .bc-plan__price-num,
.bc-plan--featured .bc-plan__feat,
.bc-plan--featured .bc-plan__cards-num { color: #fff; }
.bc-plan--featured .bc-plan__price-period,
.bc-plan--featured .bc-plan__cards-label { color: rgba(255,255,255,.75); }
.bc-plan--featured .bc-plan__feat i { color: #FBBF24; }
.bc-plan--featured .bc-btn-primary { background: #fff; color: #312E81; }
.bc-plan--featured .bc-btn-primary:hover { background: #fff; color: #312E81; }

/* Badge "Más popular" */
.bc-plan__badge {
    position: absolute;
    top: -12px;
    right: 24px;
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: #fff;
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    box-shadow: 0 8px 20px rgba(245,158,11,.45);
    z-index: 2;
}

.bc-plan__name { font-size: 1.35rem; font-weight: 800; color: #0F172A; margin-bottom: .25rem; }
.bc-plan__tag { color: #6366F1; font-weight: 600; font-size: .9rem; margin-bottom: 1.2rem; }
.bc-plan--featured .bc-plan__tag { color: #FBBF24; }

.bc-plan__price { display: flex; align-items: baseline; gap: .35rem; margin-bottom: 1rem; }
.bc-plan__price-currency { font-size: 1.1rem; font-weight: 700; color: #475569; }
.bc-plan__price-num { font-size: 3.2rem; font-weight: 900; color: #0F172A; line-height: 1; letter-spacing: -.02em; }
.bc-plan__price-period { color: #64748B; font-size: .92rem; font-weight: 500; }
.bc-plan__price-equiv { color: #64748B; font-size: .82rem; margin-bottom: 1.4rem; margin-top: -.4rem; }
.bc-plan--featured .bc-plan__price-equiv { color: rgba(255,255,255,.65); }

/* Caja de "tarjetas incluidas" */
.bc-plan__cards-box {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    background: rgba(99,102,241,.08);
    border-radius: 14px;
    margin-bottom: 1.4rem;
    border: 1px solid rgba(99,102,241,.15);
}
.bc-plan--featured .bc-plan__cards-box { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); }
.bc-plan__cards-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.bc-plan--featured .bc-plan__cards-icon { background: linear-gradient(135deg, #FBBF24, #F59E0B); }
.bc-plan__cards-num { font-weight: 800; color: #0F172A; font-size: 1.05rem; line-height: 1.1; }
.bc-plan__cards-label { color: #64748B; font-size: .82rem; }

.bc-plan__features { list-style: none; padding: 0; margin: 0 0 1.6rem; flex-grow: 1; }
.bc-plan__feat { display: flex; align-items: flex-start; gap: .55rem; padding: .35rem 0; color: #334155; font-size: .92rem; }
.bc-plan__feat i { color: #10B981; font-size: 1rem; margin-top: .15rem; flex-shrink: 0; }

.bc-plan .bc-btn-primary { width: 100%; justify-content: center; }

/* Tira de metodos de pago */
.bc-payments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.4rem;
    color: #64748B;
    font-size: .85rem;
    flex-wrap: wrap;
}
.bc-payments span { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: #334155; }
.bc-payments i { font-size: 1.1rem; color: #6366F1; }

/* =================== CTA Final =================== */
.bc-cta-final {
    position: relative;
    text-align: center;
    padding: 5rem 2rem;
    border-radius: 32px;
    background:
        radial-gradient(at 30% 20%, hsla(220, 100%, 65%, .25) 0, transparent 50%),
        radial-gradient(at 70% 80%, hsla(330, 95%, 70%, .22) 0, transparent 50%),
        linear-gradient(135deg, #1E1B4B, #312E81);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 30px 80px -20px rgba(49, 46, 129, .60);
}
.bc-cta-final::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from var(--gr-angle, 0deg) at 50% 50%,
        transparent 0deg,
        rgba(139,92,246,.30) 30deg,
        transparent 60deg,
        rgba(236,72,153,.30) 180deg,
        transparent 220deg,
        rgba(6,182,212,.30) 300deg,
        transparent 360deg);
    z-index: -1;
    animation: bc-rotate 18s linear infinite;
}

/* Confetti sparkles dentro del CTA */
.bc-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bc-confetti span {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 3px;
    opacity: .85;
    animation: bc-confetti 6s linear infinite;
}
.bc-confetti span:nth-child(1) { left: 10%; background: #FBBF24; animation-delay: 0s; }
.bc-confetti span:nth-child(2) { left: 25%; background: #EC4899; animation-delay: -1s; }
.bc-confetti span:nth-child(3) { left: 50%; background: #06B6D4; animation-delay: -2s; }
.bc-confetti span:nth-child(4) { left: 70%; background: #10B981; animation-delay: -3s; }
.bc-confetti span:nth-child(5) { left: 85%; background: #8B5CF6; animation-delay: -4s; }
@keyframes bc-confetti {
    0%   { top: -10%; transform: rotate(0); opacity: 0; }
    10%  { opacity: .85; }
    100% { top: 110%; transform: rotate(360deg); opacity: 0; }
}

.bc-cta-final h2 {
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
    letter-spacing: -.015em;
    position: relative;
    z-index: 1;
}
.bc-cta-final p { color: rgba(255,255,255,.88); font-size: 1.15rem; max-width: 600px; margin: 0 auto 2rem; position: relative; z-index: 1; }
.bc-cta-final .bc-btn-primary {
    background: #fff;
    color: #312E81;
    box-shadow: 0 22px 50px rgba(0,0,0,.35);
    position: relative;
    z-index: 1;
}
.bc-cta-final .bc-btn-primary:hover { color: #312E81; background: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.bc-cta-final__login { display: block; margin-top: 1rem; color: rgba(255,255,255,.75); text-decoration: none; font-size: .88rem; position: relative; z-index: 1; }
.bc-cta-final__login:hover { color: #fff; }
.bc-cta-final__price {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1rem;
    padding: .35rem .9rem;
    background: rgba(251,191,36,.20);
    color: #FBBF24;
    border: 1px solid rgba(251,191,36,.35);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    position: relative;
    z-index: 1;
}

/* =================== AUTH (Login / Register / ForgotPassword) =================== */
.bc-auth {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    position: relative;
}
.bc-auth-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 28px;
    padding: 2.5rem 2rem;
    box-shadow:
        0 30px 80px -20px rgba(99,102,241,.30),
        0 12px 32px -12px rgba(15,23,42,.15);
    overflow: hidden;
    isolation: isolate;
    animation: bc-fade-up .7s cubic-bezier(.22,.68,0,1.2) backwards;
}
.bc-auth-card--wide { max-width: 580px; }

/* Borde conic-gradient sutil */
.bc-auth-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 28px;
    padding: 2px;
    background: conic-gradient(from var(--gr-angle, 0deg),
        rgba(99,102,241,.50),
        rgba(139,92,246,.50),
        rgba(236,72,153,.50),
        rgba(6,182,212,.50),
        rgba(99,102,241,.50));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .6;
    animation: bc-rotate 14s linear infinite;
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .bc-auth-card::before { display: none; }
}

.bc-auth-card__head { text-align: center; margin-bottom: 1.8rem; }
.bc-auth-card__icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 1rem;
    box-shadow: 0 14px 30px rgba(99,102,241,.40);
    transition: transform .3s cubic-bezier(.22,.68,0,1.2);
}
.bc-auth-card__icon--green { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 14px 30px rgba(16,185,129,.40); }
.bc-auth-card__icon--pink  { background: linear-gradient(135deg, #EC4899, #DB2777); box-shadow: 0 14px 30px rgba(219,39,119,.40); }
.bc-auth-card:hover .bc-auth-card__icon { transform: rotate(-6deg) scale(1.05); }

.bc-auth-card__title {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -.015em;
    margin: 0 0 .35rem;
}
.bc-auth-card__subtitle {
    color: #64748B;
    font-size: .92rem;
    margin: 0;
}

/* Inputs estilizados */
.bc-auth-form .form-label {
    font-weight: 600;
    color: #334155;
    font-size: .85rem;
    margin-bottom: .35rem;
}
.bc-auth-form .form-control {
    background: #fff;
    border: 1.5px solid rgba(15,23,42,.10);
    border-radius: 12px;
    padding: .75rem 1rem;
    font-size: .95rem;
    color: #0F172A;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.bc-auth-form .form-control:focus {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 4px rgba(99,102,241,.12);
    background: #fff;
}
.bc-auth-form .form-control::placeholder { color: #94A3B8; }

.bc-auth-form .form-check-input {
    border-color: rgba(15,23,42,.20);
    width: 1.05em; height: 1.05em;
    cursor: pointer;
}
.bc-auth-form .form-check-input:checked { background-color: #6366F1; border-color: #6366F1; }
.bc-auth-form .form-check-label { color: #475569; font-size: .87rem; cursor: pointer; }

/* Boton primary full-width */
.bc-auth-form .bc-btn-primary { width: 100%; justify-content: center; padding: .95rem 1.5rem; }

/* Link "olvidaste tu contrasena" */
.bc-auth-link {
    color: #6366F1;
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
    transition: color .2s ease;
}
.bc-auth-link:hover { color: #4338CA; text-decoration: underline; }

/* Footer del card (cambiar a login/register) */
.bc-auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(15,23,42,.08);
    color: #64748B;
    font-size: .9rem;
}
.bc-auth-footer a {
    color: #6366F1;
    font-weight: 700;
    text-decoration: none;
    margin-left: .25rem;
}
.bc-auth-footer a:hover { color: #4338CA; text-decoration: underline; }

/* Trust badges debajo del form (login + register) */
.bc-auth-trust {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    font-size: .75rem;
    color: #94A3B8;
    font-weight: 500;
}
.bc-auth-trust span { display: inline-flex; align-items: center; gap: .35rem; }
.bc-auth-trust i { color: #10B981; font-size: .9rem; }

/* Validation summary mas suave */
.bc-auth-form .alert-danger {
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.20);
    color: #B91C1C;
    border-radius: 12px;
    padding: .75rem 1rem;
    font-size: .85rem;
}
.bc-auth-form .text-danger { color: #DC2626 !important; font-weight: 500; }

/* =================== Reduce motion =================== */
@media (prefers-reduced-motion: reduce) {
    .bc-shell::before, .bc-orb, .bc-section, .bc-phone, .bc-pill i, .bc-title-shine,
    .bc-phone::before, .bc-cta-final::before, .bc-stamp__circle, .bc-sparkle,
    .bc-float-card, .bc-bullets i, .bc-clock-badge i, .bc-problema-icon,
    .bc-card--feature::before, .bc-confetti span, .bc-ticker__track {
        animation: none !important;
    }
}

/* =================== Mobile tweaks =================== */
@media (max-width: 767.98px) {
    .bc-section { padding: 2.5rem 0; }
    .bc-hero { padding: 2rem 0 1rem; }
    .bc-card { padding: 1.5rem 1.2rem; }
    .bc-stepper-wrap, .bc-diferenciador { padding: 2rem 1.25rem; }
    .bc-cta-final { padding: 3rem 1.25rem; }
    .bc-hero__grid { gap: 1.5rem; }
    .bc-hero__visual { min-height: 340px; padding: 1rem 0; }
    .bc-phone { width: 230px; padding: 1.1rem 1rem 1.3rem; }
    .bc-phone__avatar { width: 64px; height: 64px; font-size: 1.4rem; }
    .bc-phone__btns { gap: .35rem; }
    .bc-phone__btn { padding: .45rem .65rem; font-size: .76rem; }
    .bc-bento { grid-template-columns: 1fr; }

    /* Solo dejar UNA float card en movil para no abigarrar */
    .bc-float-card--qr { display: none; }
    .bc-float-card--bell { font-size: .85rem; }

    /* Sparkles mas chicas + menos prominentes */
    .bc-sparkle { width: 14px; height: 14px; font-size: .68rem; }
    .bc-sparkle--3, .bc-sparkle--4 { display: none; }

    /* Stamp mas chico y reposicionado */
    .bc-stamp { width: 76px; height: 76px; top: -8px; right: -4px; }
    .bc-stamp__circle { font-size: .85rem; border-width: 3px; }

    .bc-title { font-size: 2.1rem; line-height: 1.1; }
    .bc-subtitle { font-size: 1rem; }
    .bc-bullets { gap: .5rem 1rem; }
    .bc-bullets li { font-size: .85rem; }
    .bc-hero__kpis { gap: .9rem; padding-top: 1rem; }
    .bc-hero__kpi-value { font-size: 1.35rem; }
    .bc-hero__kpi-label { font-size: .68rem; }
}