/* ============================================================
   QRAVE — Landing page · estilos
   Usa tokens de qrave-ds.css. Secciones alternan skin-dark/skin-light.
   ============================================================ */

.lp { overflow-x: clip; }
.lp-wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; position: relative; }
.section.skin-light { background: var(--bg); }
.section.skin-dark { background: #0C0722; }
@media (max-width: 720px) { .section { padding: 64px 0; } }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.skin-dark .eyebrow { color: var(--tint-text); }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.sec-title { font-family: var(--font-display); font-size: clamp(28px, 4.2vw, 44px); font-weight: 700; letter-spacing: -.03em; margin-top: 16px; color: var(--text); }
.sec-lead { font-size: 17px; color: var(--text-2); line-height: 1.6; max-width: 56ch; margin-top: 16px; }
.center { text-align: center; }
.center .sec-lead { margin-inline: auto; }

/* ---- NAV ---- */
.lpnav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, #0C0722 72%, transparent); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid rgba(255,255,255,.08); }
.lpnav__in { max-width: 1140px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lpnav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lpnav__brand img { height: 30px; }
.lpnav__links { display: flex; gap: 6px; }
@media (max-width: 860px) { .lpnav__links { display: none; } }
.lpnav__links a { text-decoration: none; color: #C9C0E8; font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 10px; transition: all .15s ease; }
.lpnav__links a:hover { background: rgba(255,255,255,.07); color: #fff; }
.lpnav__cta { display: flex; align-items: center; gap: 10px; }

/* ---- HERO ---- */
.hero { position: relative; background: #0C0722; color: #fff; overflow: hidden; padding-top: 64px; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.hero__glow.a { width: 420px; height: 420px; background: rgba(125,211,244,.28); top: -120px; left: -100px; }
.hero__glow.b { width: 480px; height: 480px; background: rgba(212,76,240,.30); top: 40px; right: -160px; }
.hero__grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(120% 80% at 50% 20%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 80% at 50% 20%, #000 30%, transparent 75%); }
.hero__in { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-bottom: 90px; }
@media (max-width: 880px) { .hero__in { grid-template-columns: 1fr; gap: 48px; padding-bottom: 64px; } }

.hero__pill { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #E7DEFF; padding: 8px 15px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
.hero__pill .d { width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 10px var(--aqua); }
.hero h1 { font-family: var(--font-display); font-size: clamp(38px, 6vw, 66px); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; margin-top: 22px; }
.hero h1 .grad { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__sub { font-size: 18.5px; color: #C9C0E8; line-height: 1.6; max-width: 46ch; margin-top: 22px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero__stats { display: flex; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.hero__stat .n { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.hero__stat .n .grad { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__stat .l { font-size: 13px; color: #8E86B4; margin-top: 2px; }

/* store badges */
.store-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #16102E; border-radius: 14px; padding: 11px 18px; text-decoration: none; font-family: var(--font-text); transition: transform .15s ease; }
.store-badge:hover { transform: translateY(-2px); }
.store-badge svg { width: 24px; height: 24px; }
.store-badge .t { line-height: 1.1; }
.store-badge .t small { display: block; font-size: 10.5px; font-weight: 600; opacity: .7; }
.store-badge .t b { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.store-badge.ghost { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.16); }

/* ---- PHONE MOCK ---- */
.phone-mock { position: relative; justify-self: center; width: 290px; height: 590px; border-radius: 46px; background: linear-gradient(160deg, #2A2358, #14103A); padding: 11px; box-shadow: 0 50px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.phone-mock::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; background: #060414; border-radius: 14px; z-index: 5; }
.phone-mock__scr { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #1A1048, #0C0722 62%); position: relative; }
.pm-pad { padding: 52px 16px 16px; height: 100%; display: flex; flex-direction: column; }
.pm-top { display: flex; align-items: center; gap: 10px; }
.pm-top .ava { width: 38px; height: 38px; border-radius: 12px; background: var(--spectrum); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(155,77,240,.45); }
.pm-top .ava img { width: 60%; }
.pm-top .gl { font-size: 10.5px; color: #B9B1DA; font-weight: 600; }
.pm-top .gn { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #fff; line-height: 1.05; }
.pm-card { margin-top: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 15px; backdrop-filter: blur(8px); }
.pm-card__hd { display: flex; align-items: center; justify-content: space-between; }
.pm-card__hd b { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.pm-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(79,224,166,.16); color: #4FE0A6; border: 1px solid rgba(79,224,166,.3); }
.pm-pill svg { width: 11px; height: 11px; }
.pm-qr { background: #fff; border-radius: 16px; padding: 14px; margin-top: 12px; }
.pm-qr svg { width: 100%; display: block; }
.pm-sync { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #B9B1DA; margin-top: 11px; }
.pm-sync svg { width: 13px; height: 13px; color: var(--aqua); }
.pm-btn { margin-top: 12px; height: 42px; border-radius: 12px; background: var(--spectrum); color: #fff; font-family: var(--font-text); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 12px 26px rgba(155,77,240,.4); }
.pm-btn svg { width: 16px; height: 16px; }
.pm-tabs { margin-top: auto; display: flex; align-items: center; justify-content: space-around; padding: 12px 4px 4px; }
.pm-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #6E6699; font-size: 8.5px; font-weight: 600; }
.pm-tab svg { width: 19px; height: 19px; }
.pm-tab.act { color: #C7B0FB; }
.pm-tab.scan { width: 48px; height: 48px; border-radius: 16px; background: var(--spectrum); color: #fff; justify-content: center; margin-top: -22px; box-shadow: 0 10px 24px rgba(155,77,240,.45); }
.pm-tab.scan svg { width: 22px; height: 22px; }

/* floating chips around phone */
.float-chip { position: absolute; display: flex; align-items: center; gap: 9px; background: rgba(22,16,58,.9); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 10px 13px; box-shadow: 0 18px 40px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.float-chip .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.float-chip .ic svg { width: 16px; height: 16px; }
.float-chip b { display: block; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: #fff; }
.float-chip span { font-size: 10.5px; color: #B9B1DA; }
.float-chip.f1 { top: 64px; left: -28px; animation: floaty1 6s ease-in-out infinite; }
.float-chip.f2 { bottom: 120px; right: -36px; animation: floaty1 7s ease-in-out infinite 1s; }
@media (max-width: 520px) { .float-chip { display: none; } }
@keyframes floaty1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float-chip.f1 .ic { background: rgba(79,224,166,.18); color: #4FE0A6; }
.float-chip.f2 .ic { background: rgba(125,211,244,.18); color: var(--aqua); }

/* ---- TRUST STRIP ---- */
.trust { border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); background: #0A0520; }
.trust__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 28px; max-width: 1140px; margin: 0 auto; flex-wrap: wrap; }
.trust__lbl { font-size: 12.5px; color: #8E86B4; font-weight: 600; }
.trust__logos { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.trust__logos span { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: rgba(255,255,255,.5); letter-spacing: -.01em; }

/* ---- FEATURE GRID ---- */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
@media (max-width: 880px) { .fgrid { grid-template-columns: 1fr; } }
.fcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; transition: transform .2s ease, box-shadow .2s ease; }
.skin-dark .fcard { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.fcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.fcard__ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--primary-weak); color: var(--tint-text); margin-bottom: 18px; }
.skin-light .fcard__ic { color: var(--v-600); }
.fcard__ic svg { width: 25px; height: 25px; }
.fcard.spec .fcard__ic { background: var(--spectrum); color: #fff; box-shadow: var(--glow); }
.fcard h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); }
.fcard p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin-top: 10px; }

/* ---- HOW IT WORKS ---- */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; position: relative; }
@media (max-width: 880px) { .steps3 { grid-template-columns: 1fr; gap: 32px; } }
.step3 { position: relative; }
.step3__n { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--spectrum); color: #fff; font-family: var(--font-display); font-size: 22px; font-weight: 700; box-shadow: var(--glow); }
.step3 h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text); margin-top: 20px; }
.step3 p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin-top: 9px; }
.step3__line { position: absolute; top: 28px; left: calc(50% + 40px); right: calc(-50% + 40px); height: 2px; background: linear-gradient(90deg, var(--primary-weak-bd), transparent); }
@media (max-width: 880px) { .step3__line { display: none; } }

/* ---- DUAL AUDIENCE ---- */
.dual { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 52px; }
@media (max-width: 760px) { .dual { grid-template-columns: 1fr; } }
.dcard { border-radius: var(--r-xl); padding: 34px; position: relative; overflow: hidden; }
.dcard.user { background: var(--surface); border: 1px solid var(--border); }
.skin-dark .dcard.user { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.dcard.prov { background: #16102E; color: #fff; border: 1px solid rgba(255,255,255,.1); }
.dcard.prov::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 90% 0%, rgba(212,76,240,.22), transparent 55%); pointer-events: none; }
.dcard__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; }
.dcard.user .dcard__tag { background: var(--primary-weak); color: var(--tint-text); }
.skin-light .dcard.user .dcard__tag { color: var(--v-700); }
.dcard.prov .dcard__tag { background: rgba(255,255,255,.1); color: #E7DEFF; }
.dcard h3 { font-family: var(--font-display); font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin-top: 16px; }
.dcard.user h3 { color: var(--text); }
.dcard > p { font-size: 15px; line-height: 1.6; margin-top: 10px; }
.dcard.user > p { color: var(--text-2); }
.dcard.prov > p { color: #C9C0E8; }
.dcard ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 13px; position: relative; }
.dcard li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.dcard.user li { color: var(--text-2); } .dcard.prov li { color: #D9D2F0; }
.dcard li svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.dcard.user li svg { color: var(--ok-ink); } .skin-dark .dcard.user li svg { color: #4FE0A6; }
.dcard.prov li svg { color: var(--aqua); }
.dcard li b { font-weight: 700; } .dcard.user li b { color: var(--text); } .dcard.prov li b { color: #fff; }

/* ---- OFFLINE HIGHLIGHT ---- */
.offline { background: #0C0722; color: #fff; overflow: hidden; position: relative; }
.offline__glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: rgba(155,77,240,.22); filter: blur(110px); top: -120px; right: -120px; pointer-events: none; }
.offline__in { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 820px) { .offline__in { grid-template-columns: 1fr; gap: 36px; } }
.offline h2 { color: #fff; }
.offline .sec-lead { color: #C9C0E8; }
.offline__visual { display: grid; place-items: center; }
.offline-demo { width: 100%; max-width: 380px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-xl); padding: 28px; }
.offline-demo__bar { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.offline-demo__bar .wifi { width: 36px; height: 36px; border-radius: 11px; background: rgba(242,160,36,.16); color: #FBC56B; display: grid; place-items: center; }
.offline-demo__bar .wifi svg { width: 19px; height: 19px; }
.offline-demo__bar b { font-family: var(--font-display); font-size: 14px; color: #fff; }
.offline-demo__bar span { font-size: 11.5px; color: #8E86B4; }
.offline-demo__qr { background: #fff; border-radius: 18px; padding: 22px; margin-top: 18px; }
.offline-demo__qr svg { width: 100%; display: block; }
.offline-demo__note { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #C9C0E8; margin-top: 16px; }
.offline-demo__note svg { width: 16px; height: 16px; color: #4FE0A6; flex: none; }

/* ---- SECURITY ---- */
.secgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
@media (max-width: 820px) { .secgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .secgrid { grid-template-columns: 1fr; } }
.seccard { padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.skin-dark .seccard { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.seccard__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--primary-weak); color: var(--tint-text); margin-bottom: 14px; }
.skin-light .seccard__ic { color: var(--v-600); }
.seccard__ic svg { width: 22px; height: 22px; }
.seccard h4 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); }
.seccard p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin-top: 7px; }

/* ---- CTA BAND ---- */
.cta-band { position: relative; }
.cta-inner { background: var(--spectrum); border-radius: var(--r-xl); padding: 56px 48px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 30px 70px rgba(119,48,239,.35); }
@media (max-width: 600px) { .cta-inner { padding: 40px 24px; } }
.cta-inner::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 38px 38px; -webkit-mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 75%); pointer-events: none; }
.cta-inner h2 { position: relative; font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 44px); font-weight: 700; letter-spacing: -.03em; color: #fff; }
.cta-inner p { position: relative; font-size: 18px; color: rgba(255,255,255,.9); margin-top: 14px; max-width: 44ch; margin-inline: auto; line-height: 1.5; }
.cta-inner .hero__actions { position: relative; justify-content: center; margin-top: 28px; }
.cta-inner .store-badge.ghost { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }

/* ---- FOOTER ---- */
.lpfoot { background: #0A0520; color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.lpfoot__in { max-width: 1140px; margin: 0 auto; padding: 56px 28px 30px; }
.lpfoot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .lpfoot__top { grid-template-columns: 1fr 1fr; gap: 28px; } }
.lpfoot__brand img { height: 32px; }
.lpfoot__brand p { font-size: 13.5px; color: #8E86B4; line-height: 1.6; margin-top: 14px; max-width: 30ch; }
.lpfoot__col h5 { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.lpfoot__col nav { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.lpfoot__col a { font-size: 14px; color: #B9B1DA; text-decoration: none; }
.lpfoot__col a:hover { color: #fff; }
.lpfoot__bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
.lpfoot__bottom p { font-size: 12.5px; color: #6E6699; }
.lpfoot__social { display: flex; gap: 12px; }
.lpfoot__social a { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: grid; place-items: center; color: #C9C0E8; }
.lpfoot__social a:hover { background: rgba(255,255,255,.12); color: #fff; }
.lpfoot__social svg { width: 18px; height: 18px; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }