/* ==========================================================================
   QUIKILIVE · sistema visual
   Oscuro, con malla de gradientes, vidrio y acentos violeta → rosa → naranja
   ========================================================================== */

:root {
  --ql-bg: #06060c;
  --ql-bg-2: #0c0c18;
  --ql-surface: rgba(255, 255, 255, .045);
  --ql-surface-2: rgba(255, 255, 255, .075);
  --ql-stroke: rgba(255, 255, 255, .10);
  --ql-text: #f5f5fc;
  --ql-muted: #a3a3bf;
  --ql-violet: #8b5cf6;
  --ql-pink: #ec4899;
  --ql-orange: #fb923c;
  --ql-cyan: #22d3ee;
  --ql-live: #ff3b5c;
  --ql-green: #25d366;
  --ql-grad: linear-gradient(120deg, #8b5cf6 0%, #ec4899 55%, #fb923c 100%);
  --ql-radius: 22px;
  --ql-font-display: 'Sora', system-ui, sans-serif;
  --ql-font-body: 'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body.ql-body {
  background: var(--ql-bg);
  color: var(--ql-text);
  font-family: var(--ql-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, h4, .ql-display { font-family: var(--ql-font-display); letter-spacing: -.02em; }
a { color: inherit; }
::selection { background: rgba(236, 72, 153, .45); }

/* ---------- Fondo: malla + grano + rejilla ---------- */
.ql-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ql-bg); }
.ql-bg::after { /* rejilla sutil con desvanecido */
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, #000 30%, transparent 75%);
}
.ql-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; animation: ql-float 18s ease-in-out infinite; }
.ql-orb--1 { width: 520px; height: 520px; background: #6d3df5; top: -160px; left: -120px; }
.ql-orb--2 { width: 460px; height: 460px; background: #e43d8f; top: 12%; right: -140px; animation-delay: -6s; opacity: .42; }
.ql-orb--3 { width: 380px; height: 380px; background: #0ea5c4; bottom: -120px; left: 30%; animation-delay: -11s; opacity: .30; }
@keyframes ql-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(40px, 50px, 0) scale(1.08); }
}

/* ---------- Navegación ---------- */
.ql-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(6,6,12,.78), rgba(6,6,12,.35)); border-bottom: 1px solid rgba(255,255,255,.05); }
.ql-logo { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--ql-font-display); font-weight: 800; letter-spacing: .02em; text-decoration: none; font-size: 1.12rem; }
.ql-logo__mark { width: 30px; height: 30px; border-radius: 9px; background: var(--ql-grad); display: grid; place-items: center; box-shadow: 0 6px 24px rgba(236,72,153,.45); position: relative; }
.ql-logo__mark::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); animation: ql-pulse 1.8s ease-out infinite; }
@keyframes ql-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 100% { box-shadow: 0 0 0 11px rgba(255,255,255,0); } }

/* ---------- Botones ---------- */
.ql-btn { --pad-y: .8rem; --pad-x: 1.5rem; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: var(--pad-y) var(--pad-x); border-radius: 14px; border: 0; font-weight: 700; font-family: var(--ql-font-display); font-size: .95rem; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, opacity .2s; white-space: nowrap; }
.ql-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ql-btn--primary { color: #fff; background: var(--ql-grad); background-size: 160% 100%; box-shadow: 0 10px 34px -8px rgba(236,72,153,.65), inset 0 1px 0 rgba(255,255,255,.35); overflow: hidden; }
.ql-btn--primary::before { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: ql-shine 3.8s ease-in-out infinite; }
@keyframes ql-shine { 0%, 55% { left: -80%; } 100% { left: 140%; } }
.ql-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 42px -8px rgba(236,72,153,.85), inset 0 1px 0 rgba(255,255,255,.4); color: #fff; background-position: 100% 0; }
.ql-btn--primary:active { transform: translateY(0); }
.ql-btn--ghost { color: var(--ql-text); background: var(--ql-surface); border: 1px solid var(--ql-stroke); }
.ql-btn--ghost:hover { background: var(--ql-surface-2); color: #fff; transform: translateY(-1px); }
.ql-btn--lg { --pad-y: 1rem; --pad-x: 2rem; font-size: 1.05rem; border-radius: 16px; }
.ql-btn--whatsapp { color: #04210f; background: var(--ql-green); box-shadow: 0 12px 34px -10px rgba(37,211,102,.7); }
.ql-btn--whatsapp:hover { color: #04210f; transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(37,211,102,.9); }
.ql-btn[disabled], .ql-btn.is-disabled { opacity: .55; pointer-events: none; }
.ql-btn .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }

/* ---------- Tipografía de apoyo ---------- */
.ql-gradient-text { background: var(--ql-grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ql-gradient-pan 7s ease-in-out infinite alternate; }
@keyframes ql-gradient-pan { to { background-position: 100% 0; } }
.ql-eyebrow { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem .4rem .5rem; border-radius: 999px; border: 1px solid var(--ql-stroke); background: var(--ql-surface); font-size: .82rem; color: #d9d9f0; backdrop-filter: blur(8px); }
.ql-eyebrow b { padding: .15rem .55rem; border-radius: 999px; background: var(--ql-grad); color: #fff; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.ql-lead { color: var(--ql-muted); font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.65; }
.ql-section { padding: clamp(4rem, 8vw, 7rem) 0; position: relative; }
.ql-kicker { font-size: .78rem; text-transform: uppercase; letter-spacing: .18em; color: var(--ql-cyan); font-weight: 700; }
.ql-h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; }

/* ---------- Hero ---------- */
.ql-hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
.ql-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); font-weight: 800; line-height: 1.02; }
.ql-hero h1 span.ql-sub { display: block; font-size: .46em; font-weight: 600; color: #cfcfe8; letter-spacing: -.01em; margin-top: .6rem; line-height: 1.2; }

/* ---------- Tarjetas de vidrio ---------- */
.ql-card { background: var(--ql-surface); border: 1px solid var(--ql-stroke); border-radius: var(--ql-radius); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: relative; }
.ql-card--glow { box-shadow: 0 30px 80px -30px rgba(139,92,246,.55), 0 0 0 1px rgba(255,255,255,.04) inset; }
.ql-card--glow::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(139,92,246,.9), rgba(236,72,153,.15) 40%, rgba(34,211,238,.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

/* ---------- Formulario ---------- */
.ql-form { padding: 1.4rem; }
.ql-form__title { font-family: var(--ql-font-display); font-weight: 700; font-size: 1.05rem; }
.ql-field { position: relative; }
.ql-field label { font-size: .78rem; font-weight: 600; color: #c9c9e3; margin-bottom: .35rem; display: block; }
.ql-input { width: 100%; background: rgba(8, 8, 18, .75); color: var(--ql-text); border: 1px solid var(--ql-stroke); border-radius: 13px; padding: .85rem 1rem; font-size: .98rem; transition: border-color .2s, box-shadow .2s, background .2s; }
.ql-input::placeholder { color: #6e6e8c; }
.ql-input:focus { outline: none; border-color: var(--ql-violet); box-shadow: 0 0 0 4px rgba(139,92,246,.22); background: rgba(10, 10, 24, .95); }
.ql-input.is-invalid { border-color: #f43f5e; box-shadow: 0 0 0 4px rgba(244,63,94,.15); }
.ql-error { color: #ff8da4; font-size: .8rem; margin-top: .35rem; display: flex; gap: .35rem; align-items: flex-start; animation: ql-shake .35s ease; }
@keyframes ql-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ql-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ql-inline { display: flex; gap: .6rem; }
.ql-inline .ql-input { padding: 1rem 1.1rem; }
@media (max-width: 575.98px) { .ql-inline { flex-direction: column; } .ql-inline .ql-btn { width: 100%; } }
.ql-pw-toggle { position: absolute; right: .55rem; bottom: .42rem; background: none; border: 0; color: var(--ql-muted); padding: .35rem .5rem; font-size: .8rem; font-weight: 600; }
.ql-pw-toggle:hover { color: #fff; }
.ql-step-in { animation: ql-step-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ql-step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ql-progress-dots { display: flex; gap: .4rem; }
.ql-progress-dots i { width: 28px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.15); }
.ql-progress-dots i.on { background: var(--ql-grad); }
.ql-microcopy { font-size: .8rem; color: var(--ql-muted); }
.ql-check { color: var(--ql-green); }

/* ---------- Prueba social y contador ---------- */
.ql-avatars { display: flex; }
.ql-avatars span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: #fff; border: 2px solid var(--ql-bg); margin-left: -9px; font-family: var(--ql-font-display); }
.ql-avatars span:first-child { margin-left: 0; }
.ql-avatars span:nth-child(5n+1) { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.ql-avatars span:nth-child(5n+2) { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.ql-avatars span:nth-child(5n+3) { background: linear-gradient(135deg, #fb923c, #f59e0b); }
.ql-avatars span:nth-child(5n+4) { background: linear-gradient(135deg, #22d3ee, #0ea5e9); }
.ql-avatars span:nth-child(5n+5) { background: linear-gradient(135deg, #34d399, #10b981); }
.ql-counter__num { font-family: var(--ql-font-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; animation: ql-pop .6s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes ql-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.ql-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.ql-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ql-grad); box-shadow: 0 0 18px rgba(236,72,153,.7); transition: width 1.4s cubic-bezier(.2,.8,.2,1); position: relative; }
.ql-bar > i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); background-size: 60% 100%; background-repeat: no-repeat; animation: ql-bar-shine 2.4s linear infinite; }
@keyframes ql-bar-shine { from { background-position: -100% 0; } to { background-position: 220% 0; } }
.ql-countdown { display: flex; gap: .6rem; }
.ql-countdown div { min-width: 62px; text-align: center; padding: .55rem .4rem; border-radius: 14px; background: var(--ql-surface); border: 1px solid var(--ql-stroke); }
.ql-countdown b { display: block; font-family: var(--ql-font-display); font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ql-countdown small { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ql-muted); }

/* ---------- Maqueta Live (visual del hero) ---------- */
.ql-stage { position: relative; display: grid; place-items: center; min-height: 560px; }
.ql-phone { position: relative; width: min(300px, 78vw); aspect-ratio: 9 / 18.5; border-radius: 42px; padding: 10px; background: linear-gradient(160deg, #2b2b4a, #12121f); box-shadow: 0 50px 100px -30px rgba(139,92,246,.7), 0 0 0 1px rgba(255,255,255,.12) inset; animation: ql-bob 7s ease-in-out infinite; transform: rotate(-3deg); }
@keyframes ql-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(-1.5deg); } }
.ql-phone__screen { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background:
  radial-gradient(120% 80% at 20% 0%, #5b34d6 0%, transparent 60%),
  radial-gradient(100% 70% at 100% 40%, #d6347f 0%, transparent 55%),
  linear-gradient(180deg, #1a1033, #0a0716); }
.ql-phone__host { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd9b8, #e9967a 60%, #b86a56); box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.5); }
.ql-phone__host::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 190px; height: 130px; border-radius: 90px 90px 0 0; background: linear-gradient(180deg, #7c4dff, #4527a0); margin-top: 6px; }
.ql-live-badge { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 8px; background: var(--ql-live); font-size: .7rem; font-weight: 800; letter-spacing: .08em; font-family: var(--ql-font-display); }
.ql-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: ql-blink 1.1s infinite; }
@keyframes ql-blink { 50% { opacity: .2; } }
.ql-viewers { position: absolute; top: 16px; right: 16px; padding: .25rem .6rem; border-radius: 8px; background: rgba(0,0,0,.45); font-size: .72rem; font-weight: 600; backdrop-filter: blur(6px); }
.ql-product { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: .7rem; padding: .65rem; border-radius: 18px; background: rgba(12, 10, 28, .78); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); }
.ql-product__img { width: 46px; height: 46px; border-radius: 12px; background: var(--ql-grad); display: grid; place-items: center; font-size: 1.4rem; flex: none; }
.ql-product__name { font-size: .78rem; font-weight: 700; line-height: 1.2; }
.ql-product__price { font-size: .72rem; color: #ffd0e5; }
.ql-product .ql-buy { margin-left: auto; padding: .45rem .8rem; border-radius: 10px; background: #fff; color: #14102a; font-size: .72rem; font-weight: 800; font-family: var(--ql-font-display); }
.ql-chat { position: absolute; left: 12px; bottom: 82px; display: flex; flex-direction: column; gap: .35rem; max-width: 80%; }
.ql-chat p { margin: 0; padding: .35rem .65rem; border-radius: 12px; font-size: .7rem; background: rgba(0,0,0,.42); backdrop-filter: blur(6px); animation: ql-chat 9s infinite both; opacity: 0; }
.ql-chat p:nth-child(2) { animation-delay: 2.5s; }
.ql-chat p:nth-child(3) { animation-delay: 5s; }
@keyframes ql-chat { 0% { opacity: 0; transform: translateY(10px); } 6%, 38% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: translateY(-8px); } }
.ql-chip { position: absolute; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem .9rem; border-radius: 16px; background: rgba(16, 14, 34, .82); border: 1px solid var(--ql-stroke); backdrop-filter: blur(14px); font-size: .8rem; font-weight: 600; box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); animation: ql-bob2 6s ease-in-out infinite; }
.ql-chip em { font-style: normal; font-size: 1.15rem; }
.ql-chip small { display: block; font-weight: 500; color: var(--ql-muted); font-size: .68rem; }
.ql-chip--a { top: 12%; left: 0; animation-delay: -1s; }
.ql-chip--b { bottom: 24%; right: -4px; animation-delay: -3s; }
.ql-chip--c { bottom: 6%; left: 4%; animation-delay: -4.5s; }
@keyframes ql-bob2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 991.98px) { .ql-stage { min-height: 520px; margin-top: 1.5rem; } .ql-chip--a { left: 2%; } .ql-chip--b { right: 2%; } }

/* ---------- Marquesina ---------- */
.ql-marquee { border-block: 1px solid var(--ql-stroke); background: rgba(255,255,255,.025); overflow: hidden; padding: 1rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ql-marquee__track { display: flex; gap: 3rem; width: max-content; animation: ql-marquee 32s linear infinite; }
.ql-marquee__track span { font-family: var(--ql-font-display); font-weight: 700; font-size: 1.05rem; color: #c9c9e6; display: inline-flex; align-items: center; gap: 3rem; white-space: nowrap; }
.ql-marquee__track span::after { content: '✦'; color: var(--ql-pink); }
@keyframes ql-marquee { to { transform: translateX(-50%); } }

/* ---------- Funciones ---------- */
.ql-feature { padding: 2rem; height: 100%; transition: transform .35s ease, border-color .35s, background .35s; overflow: hidden; }
.ql-feature::after { content: ''; position: absolute; width: 220px; height: 220px; right: -90px; top: -90px; border-radius: 50%; background: var(--ql-grad); opacity: .0; filter: blur(60px); transition: opacity .4s; }
.ql-feature:hover { transform: translateY(-8px); border-color: rgba(236,72,153,.5); background: var(--ql-surface-2); }
.ql-feature:hover::after { opacity: .5; }
.ql-feature__icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 1.7rem; margin-bottom: 1.3rem; background: var(--ql-surface-2); border: 1px solid var(--ql-stroke); }
.ql-feature h3 { font-size: 1.3rem; font-weight: 700; }
.ql-feature p { color: var(--ql-muted); margin: .6rem 0 1.2rem; }
.ql-link { color: #fff; font-weight: 700; text-decoration: none; font-family: var(--ql-font-display); font-size: .92rem; }
.ql-link span { display: inline-block; transition: transform .25s; }
.ql-link:hover span { transform: translateX(5px); }

/* ---------- Flujo ---------- */
.ql-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; }
.ql-flow::before { content: ''; position: absolute; top: 34px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--ql-violet), var(--ql-pink), var(--ql-orange), var(--ql-green)); opacity: .5; }
.ql-step { text-align: center; position: relative; }
.ql-step__dot { width: 68px; height: 68px; border-radius: 22px; margin: 0 auto 1rem; display: grid; place-items: center; font-size: 1.7rem; background: var(--ql-bg-2); border: 1px solid var(--ql-stroke); position: relative; z-index: 1; box-shadow: 0 14px 40px -14px rgba(139,92,246,.7); }
.ql-step b { font-family: var(--ql-font-display); display: block; font-size: 1.05rem; }
.ql-step small { color: var(--ql-muted); }
@media (max-width: 767.98px) { .ql-flow { grid-template-columns: 1fr 1fr; row-gap: 2rem; } .ql-flow::before { display: none; } }

/* ---------- Regalo / contador grande ---------- */
.ql-gift { padding: clamp(1.8rem, 4vw, 3.2rem); overflow: hidden; }
.ql-gift::after { content: ''; position: absolute; inset: auto -10% -60% -10%; height: 90%; background: radial-gradient(ellipse at center, rgba(236,72,153,.35), transparent 65%); pointer-events: none; }
.ql-perk { display: flex; gap: .8rem; align-items: flex-start; }
.ql-perk i { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(37,211,102,.16); color: var(--ql-green); font-style: normal; font-weight: 800; }
.ql-perk p { margin: 0; color: #d6d6ec; }

/* ---------- FAQ ---------- */
.ql-acc .accordion-item { background: var(--ql-surface); border: 1px solid var(--ql-stroke) !important; border-radius: 16px !important; margin-bottom: .8rem; overflow: hidden; }
.ql-acc .accordion-button { background: transparent; color: var(--ql-text); font-family: var(--ql-font-display); font-weight: 600; box-shadow: none; padding: 1.15rem 1.3rem; }
.ql-acc .accordion-button:not(.collapsed) { color: #fff; background: rgba(139,92,246,.1); }
.ql-acc .accordion-button::after { filter: invert(1) brightness(2); }
.ql-acc .accordion-body { color: var(--ql-muted); padding-top: .2rem; }

/* ---------- CTA final ---------- */
.ql-final { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; overflow: hidden; }
.ql-final::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% 120%, rgba(139,92,246,.5), transparent 70%); pointer-events: none; }
.ql-final > * { position: relative; z-index: 1; }

/* ---------- Pie y barra móvil ---------- */
.ql-footer { border-top: 1px solid var(--ql-stroke); color: var(--ql-muted); font-size: .88rem; padding: 2rem 0 5.5rem; }
.ql-sticky { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; display: none; transform: translateY(140%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.ql-sticky.is-on { transform: none; }
.ql-sticky .ql-btn { width: 100%; box-shadow: 0 18px 50px -8px rgba(236,72,153,.8); }
@media (max-width: 767.98px) { .ql-sticky { display: block; } }

/* ---------- Revelar al hacer scroll ---------- */
.ql-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.ql-reveal.is-in { opacity: 1; transform: none; }
.ql-hero-in > * { animation: ql-step-in .8s cubic-bezier(.2,.8,.2,1) both; }
.ql-hero-in > *:nth-child(2) { animation-delay: .08s; } .ql-hero-in > *:nth-child(3) { animation-delay: .16s; }
.ql-hero-in > *:nth-child(4) { animation-delay: .24s; } .ql-hero-in > *:nth-child(5) { animation-delay: .32s; } .ql-hero-in > *:nth-child(6) { animation-delay: .4s; }

/* ---------- Autenticación a 2 columnas ---------- */
.ql-auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.ql-auth__brand { position: relative; padding: clamp(2rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background:
  radial-gradient(90% 60% at 10% 0%, rgba(124,77,255,.55), transparent 60%),
  radial-gradient(80% 60% at 100% 100%, rgba(236,72,153,.5), transparent 60%),
  linear-gradient(160deg, #130b2e, #090614); border-right: 1px solid var(--ql-stroke); }
.ql-auth__brand::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 30% 30%, #000, transparent 75%); }
.ql-auth__brand > * { position: relative; }
.ql-auth__headline { font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 800; line-height: 1.05; }
.ql-auth__main { display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); position: relative; }
.ql-auth__box { width: 100%; max-width: 460px; }
.ql-auth__mobile-brand { display: none; }
.ql-mini-stats { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.ql-mini-stats b { display: block; font-family: var(--ql-font-display); font-size: 1.7rem; }
.ql-mini-stats small { color: #bdbddb; }
@media (max-width: 991.98px) { .ql-auth { grid-template-columns: 1fr; } .ql-auth__brand { display: none; } .ql-auth__mobile-brand { display: block; margin-bottom: 1.6rem; } }

/* ---------- Bienvenida ---------- */
.ql-welcome { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 3rem 0; }
.ql-welcome__check { width: 92px; height: 92px; border-radius: 28px; margin: 0 auto 1.5rem; display: grid; place-items: center; font-size: 2.6rem; background: var(--ql-grad); box-shadow: 0 20px 60px -10px rgba(236,72,153,.8); animation: ql-pop .8s cubic-bezier(.2,.9,.3,1.4) both; }
.ql-welcome h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.08; }
.ql-timeline { text-align: left; display: grid; gap: .9rem; }
.ql-timeline > div { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 16px; background: var(--ql-surface); border: 1px solid var(--ql-stroke); }
.ql-timeline .n { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-family: var(--ql-font-display); background: var(--ql-grad); }
.ql-timeline p { margin: 0; color: #d1d1e8; }
.ql-timeline p b { color: #fff; }
.ql-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; border: 1px solid var(--ql-stroke); background: var(--ql-surface); }
.ql-pill--ok { color: #7cf0a8; border-color: rgba(37,211,102,.4); background: rgba(37,211,102,.1); }
.ql-copy { display: flex; gap: .5rem; align-items: center; padding: .4rem .4rem .4rem 1rem; border-radius: 14px; border: 1px dashed rgba(255,255,255,.25); background: rgba(255,255,255,.03); }
.ql-copy code { flex: 1; color: #cfcfe8; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.ql-confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; opacity: .95; animation: ql-fall linear forwards; }
@keyframes ql-fall { to { transform: translate3d(var(--x, 0), 108vh, 0) rotate(var(--r, 540deg)); opacity: .9; } }

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

/* Evita que contenido largo (p. ej. el enlace de invitación) ensanche la página en móvil */
.ql-welcome > .container { min-width: 0; width: 100%; }
.ql-copy code { min-width: 0; }