@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/motion.css");
@import url("tokens/base.css");

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--q-navy-deep)}
body{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--text-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
button{font:inherit;cursor:pointer}
a.btn{text-decoration:none}
#hero,#pantallas,#demo{background:var(--q-navy-deep)}
input::placeholder{color:#7F8DA2}
svg{display:inline-block;flex:none}
svg.lucide{stroke-width:1.5}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.wrap{max-width:var(--container-max);margin:0 auto;padding:0 24px;width:100%}
.section{padding:96px 0;background:var(--surface-page);color:var(--text-body)}
.section.soft{background:var(--surface-soft)}
.q-dark.section{background:var(--q-navy-deep)}
.h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.05;font-size:clamp(32px,4.5vw,56px);text-wrap:pretty}
.lead{font-size:clamp(16px,1.4vw,20px);line-height:1.5;color:var(--text-secondary);max-width:560px;text-wrap:pretty}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);display:flex;align-items:center;gap:8px}
.stack{display:flex;flex-direction:column;gap:24px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.card{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:24px}
.cap{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:500;display:flex;align-items:center;gap:6px}
.tabnum{font-variant-numeric:tabular-nums}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-base) var(--ease-enter),transform var(--dur-slow) var(--ease-enter)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{transform:none}}

/* ---------- components ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--radius-pill);border:1px solid transparent;background:var(--brand);color:var(--brand-on);font-weight:500;font-size:15px;line-height:1;white-space:nowrap;transition:background var(--dur-fast) var(--ease-enter),transform var(--dur-fast) var(--ease-enter),color var(--dur-fast)}
.btn:hover{background:var(--brand-hover)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sec{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn.sec:hover{background:var(--brand-soft)}
.btn.ghost{background:transparent;color:var(--text-body)}
.btn.ghost:hover{background:var(--surface-soft)}
.btn.sm{height:36px;padding:0 16px;font-size:14px}
.btn.lg{height:56px;padding:0 28px;font-size:17px}
.btn.xl{height:72px;padding:0 36px;font-size:22px}
.btn.block{display:flex;width:100%}
.btn.state{color:#fff}
.btn.state:hover{filter:brightness(.85)}
.btn.served{background:var(--state-served)}.btn.derived{background:var(--state-derived)}.btn.lost{background:var(--state-lost)}.btn.warning{background:var(--state-warning);color:var(--q-ink)}
.q-dark .btn.hero{background:#6FA3E3;color:#0F1C2E}
.q-dark .btn.hero:hover{background:#518BCD}
.q-dark .btn.sec{border-color:rgba(243,245,248,.3);color:#F3F5F8}
.q-dark .screen .btn.sec{border-color:var(--brand);color:var(--brand)}

.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--border);background:transparent;color:var(--text-body);font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;transition:background var(--dur-base) var(--ease-enter),color var(--dur-base),border-color var(--dur-base)}
.chip.md{height:44px;padding:0 16px;font-size:22px;gap:8px}
.chip.xl{height:96px;padding:0 32px;font-size:56px;gap:16px}
.chip.calling{background:var(--state-calling);border-color:var(--state-calling);color:var(--brand-on)}
.chip.served{background:var(--state-served);border-color:var(--state-served);color:#fff}
.chip.derived{background:var(--state-derived);border-color:var(--state-derived);color:#fff}
.chip.lost{background:var(--state-lost);border-color:var(--state-lost);color:#fff;text-decoration:line-through}

.call path{transform-origin:6px 12px}
.call.on path{animation:q-call-wave 1.6s var(--ease-enter) infinite}
.call.on path:nth-of-type(2){animation-delay:.35s}
.call.on path:nth-of-type(3){animation-delay:.7s}

.ticket{background:#fff;color:#1C1C1C;padding:20px 20px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;font-family:var(--font-body);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),100% 100%,91.67% calc(100% - 10px),83.33% 100%,75% calc(100% - 10px),66.67% 100%,58.33% calc(100% - 10px),50% 100%,41.67% calc(100% - 10px),33.33% 100%,25% calc(100% - 10px),16.67% 100%,8.33% calc(100% - 10px),0 100%)}
.ticket .br{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand,#518BCD)}
.ticket .sec{font-size:12px;color:#656565}
.ticket .code{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;margin:10px 0 4px;font-size:calc(var(--w,240px)*.38)}
.ticket .leg{font-size:12px;line-height:1.4;margin-top:6px}
.ticket .qr{margin-top:12px;display:grid;grid-template-columns:repeat(13,1fr);grid-template-rows:repeat(13,1fr);width:calc(var(--w,240px)*.36);aspect-ratio:1;gap:0}
.ticket .qr i{background:#1C1C1C}
.ticket .tm{font-size:11px;color:#9AA7B8;margin-top:8px}

.kpi{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:var(--radius-card);border:1px solid var(--border);background:var(--surface-card)}
.kpi .l{font-size:13px;font-weight:500;color:var(--text-secondary)}
.kpi .v{display:flex;align-items:baseline;gap:6px}
.kpi .n{font-family:var(--font-display);font-weight:700;font-size:48px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.kpi .u{font-size:16px;color:var(--text-secondary)}
.kpi .d{font-size:13px;font-weight:500;color:var(--state-served)}
.kpi .d.bad{color:var(--state-lost)}
.kpi .d span{color:var(--text-muted);font-weight:400}
.kpi svg{width:100%;height:28px;margin-top:4px}

.dot{position:relative;width:12px;height:12px;border-radius:999px;background:var(--branch-online);display:inline-block;flex:none;transition:background var(--dur-base) var(--ease-enter)}
.dot::after{content:"";position:absolute;inset:0;border-radius:999px;border:1.5px solid var(--branch-online);animation:q-call-wave 1.8s var(--ease-enter) infinite}
.dot.off{background:var(--branch-offline)}.dot.off::after{display:none}
.dot.s8{width:8px;height:8px}.dot.s8::after{display:none}

.toggle{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;height:56px;padding:4px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface-soft);min-width:200px}
.toggle i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--brand);transition:transform var(--dur-base) var(--ease-spring)}
.toggle.plus i{transform:translateX(100%)}
.toggle button{position:relative;z-index:1;border:0;background:transparent;border-radius:999px;padding:0 24px;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--text-secondary);transition:color var(--dur-fast)}
.toggle button[aria-checked=true]{color:var(--brand-on)}
.toggle.sm{height:44px;min-width:0;width:100%}.toggle.sm button{font-size:14px;padding:0}

.swatches{display:flex;gap:10px}
.swatches button{width:40px;height:40px;border-radius:999px;border:1px solid var(--border);padding:0;transition:box-shadow var(--dur-fast) var(--ease-enter),transform var(--dur-fast) var(--ease-enter)}
.swatches button[aria-checked=true]{box-shadow:0 0 0 2px var(--surface-page),0 0 0 4px currentColor;transform:scale(1.05)}
.pill-opt{padding:10px 18px;border-radius:999px;border:1px solid var(--border);color:var(--text-secondary);background:transparent;font-size:14px;font-weight:500;transition:all var(--dur-base) var(--ease-enter)}
.pill-opt[aria-checked=true]{border-color:var(--brand);color:var(--brand);background:color-mix(in oklab,var(--brand) 10%,transparent)}

/* ---------- nav ---------- */
.nav{position:fixed;top:16px;left:0;right:0;z-index:var(--z-header);display:flex;justify-content:center;pointer-events:none}
.nav>div{pointer-events:auto;display:flex;align-items:center;gap:24px;padding:8px 8px 8px 20px;border-radius:999px;border:1px solid rgba(243,245,248,.14);color:#F3F5F8;transition:background var(--dur-base) var(--ease-enter)}
.nav.scrolled>div{background:rgba(15,28,46,.85);backdrop-filter:blur(12px)}
.nav .logo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:#F3F5F8;text-decoration:none}
.nav .links a{font-size:14px;font-weight:500;color:#B7C2D1;text-decoration:none;margin-right:24px}
.nav .links a:hover{color:#F3F5F8}

/* ---------- hero ---------- */
#hero{position:relative;min-height:100vh;color:#F3F5F8;overflow:hidden;display:flex;align-items:center}
#hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-top:96px;padding-bottom:96px}
#hero h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.05;font-size:clamp(48px,5.5vw,88px)}
#hero .eyebrow,#hero .lead{color:#B7C2D1}#hero .eyebrow{color:#6FA3E3}
#hero .cta{display:flex;gap:12px;flex-wrap:wrap}
#hero .turn{display:flex;flex-direction:column;align-items:center;gap:8px}
#hero .turn .l{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#7F8DA2;font-weight:500}
#hero .turn .n{font-size:clamp(160px,18vw,320px);line-height:.9}
#hero .turn .h{font-size:14px;color:#7F8DA2}
.fall{position:absolute;top:-120px;opacity:.9;pointer-events:none;will-change:transform}
.fall .ticket{--w:150px;width:150px;padding:12px 12px 20px}
#cursor{position:fixed;left:0;top:0;transform:translate(-50%,-50%);pointer-events:none;z-index:2;color:#6FA3E3;transition:left var(--dur-base) var(--ease-enter),top var(--dur-base) var(--ease-enter)}

/* ---------- journey ---------- */
#viaje{position:relative;height:400vh}
#viaje .sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center}
#viaje .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:center}
#viaje .steps{display:flex;flex-direction:column;gap:12px}
#viaje .steps li{display:grid;grid-template-columns:32px 1fr;gap:12px;opacity:.4;transition:opacity var(--dur-base) var(--ease-enter)}
#viaje .steps li.on{opacity:1}
#viaje .steps i{width:32px;height:32px;border-radius:999px;border:1px solid var(--border);color:var(--brand);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:13px;font-style:normal;transition:all var(--dur-base) var(--ease-enter)}
#viaje .steps li.on i,#viaje .steps li.done i{border-color:var(--brand)}
#viaje .steps li.done i{background:var(--brand);color:var(--brand-on)}
#viaje .steps b{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em}
#viaje .steps span span{font-size:14px;color:var(--text-secondary)}
.stage{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:240px 240px;gap:16px}
.frame{position:relative;border-radius:24px;border:1px solid var(--border);background:var(--surface-card);padding:16px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:hidden;opacity:.55;transition:opacity var(--dur-base)}
.frame.on,.frame.all{opacity:1}
.frame.dark{background:#0F1C2E;border-color:rgba(243,245,248,.14);color:#F3F5F8}
.frame.dark .cap{color:#7F8DA2}
.slot{display:inline-block;width:72px;height:32px;border-radius:999px;border:1px dashed var(--border)}
.frame .opt{height:34px;border-radius:999px;background:var(--surface-sunken);color:var(--text-secondary);font-size:13px;font-weight:500;display:flex;align-items:center;padding:0 14px}
.frame .opt.on{background:var(--brand);color:var(--brand-on)}
.frame .row{display:grid;grid-template-columns:64px 1fr 44px;gap:8px;align-items:center;font-size:12px;color:var(--text-secondary)}
.frame .row .chip{height:28px;font-size:14px}
.frame .fin{height:40px;border-radius:999px;background:var(--state-served);color:#fff;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:6px}
.frame .bars{display:flex;align-items:flex-end;gap:6px;flex:1;min-height:80px}
.frame .bars div{flex:1;position:relative;background:var(--brand);border-radius:6px;min-height:3px;transition:height var(--dur-slow) var(--ease-enter)}
.frame .bars div.new{background:var(--state-served);height:0}
.frame.on .bars div.new,.frame.all .bars div.new{height:95%}
.flip{position:absolute;left:0;top:0;transition:transform var(--dur-slow) var(--ease-spring);z-index:2;will-change:transform}
.frame .static-chip{display:none}

/* ---------- screens ---------- */
#pantallas{position:relative;height:400vh;color:#F3F5F8}
#pantallas .sticky{position:sticky;top:0;height:100vh;overflow:hidden}
#pantallas .track{display:flex;height:100%;transition:transform 200ms linear;will-change:transform}
#pantallas article{width:100vw;flex:none;display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center;padding:0 96px;height:100vh}
#pantallas .eyebrow{color:#6FA3E3}#pantallas .h2{color:#F3F5F8}#pantallas .lead{color:#B7C2D1}
#pantallas .dots{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
#pantallas .dots i{width:8px;height:8px;border-radius:999px;background:rgba(243,245,248,.25);transition:all var(--dur-base) var(--ease-enter)}
#pantallas .dots i.on{width:28px;background:#6FA3E3}
.device{overflow:hidden;flex:none;position:relative;box-sizing:content-box}
.device>.screen{transform-origin:top left;position:absolute;left:0;top:0}
.device.totem{border-radius:24px;border:6px solid #1C1C1C;background:#1C1C1C;aspect-ratio:720/1280}
.device.tv{border-radius:16px;border:6px solid #1C1C1C;background:#0F1C2E;aspect-ratio:16/9}
.device.web{border-radius:16px;border:1px solid var(--border);aspect-ratio:1280/800}
.dev-center{display:flex;justify-content:center}

/* product screens (fixed design size, scaled with transform) */
.screen{font-family:var(--font-body);color:var(--q-ink);overflow:hidden;--text-body:var(--q-ink);--text-secondary:var(--q-gray-600);--text-muted:var(--q-gray-400);--border:var(--q-gray-300);--surface-card:#fff;--surface-soft:var(--q-gray-100);--surface-sunken:var(--q-gray-200);--state-calling:var(--brand);--brand-hover:color-mix(in oklab,var(--brand) 80%,black);--brand-on:#fff;--brand-soft:color-mix(in oklab,var(--brand) 12%,#fff)}
.s-totem{width:720px;height:1280px;background:#fff;display:flex;flex-direction:column;position:relative}
.s-totem .top{height:160px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 48px;transition:background var(--dur-base) var(--ease-enter)}
.s-totem .org{display:flex;align-items:center;gap:16px;font-family:var(--font-display);font-weight:700;font-size:36px;letter-spacing:-.02em}
.s-totem .clock{font-size:22px;opacity:.9}
.s-totem .body{flex:1;padding:48px;display:flex;flex-direction:column;gap:24px;position:relative}
.s-totem h1{font-family:var(--font-display);font-weight:700;font-size:48px;letter-spacing:-.02em;line-height:1.05;margin:8px 0 16px}
.s-totem .btn.xl{height:120px;font-size:28px;font-family:var(--font-display)}
.s-totem .ripple{position:absolute;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:999px;background:var(--brand);opacity:.25;animation:q-call-wave 500ms var(--ease-enter) forwards;pointer-events:none}
.s-totem .tk{display:flex;flex-direction:column;align-items:center;gap:24px;flex:1;justify-content:center}
.s-totem .tk .msg{display:flex;align-items:center;gap:12px;font-size:24px;color:var(--q-gray-600)}
.s-totem .tk .paper{background:var(--q-gray-200);border-radius:24px;padding:32px}
.s-totem .tk .ticket{--w:280px;width:280px}
.s-totem .ad{height:200px;margin:0 48px 48px;border-radius:24px;background:var(--q-gray-100);border:1px solid var(--q-gray-300);position:relative;overflow:hidden}
.s-totem .ad span{position:absolute;inset:32px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-display);font-weight:500;font-size:26px;color:var(--q-navy);opacity:0;transform:translateY(12px);transition:opacity var(--dur-base) var(--ease-enter),transform var(--dur-base) var(--ease-enter)}
.s-totem .ad span.on{opacity:1;transform:none}
.s-totem .ad .pg{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.s-totem .ad .pg i{width:6px;height:6px;border-radius:999px;background:var(--q-gray-300);transition:all var(--dur-base) var(--ease-enter)}
.s-totem .ad .pg i.on{width:20px;background:var(--brand)}

.s-display{width:1280px;height:720px;background:var(--q-navy-deep);color:#F3F5F8;display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto 1fr}
.s-display header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:20px 40px;border-bottom:1px solid rgba(243,245,248,.14)}
.s-display .org{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em}
.s-display .org .call{color:var(--brand)}
.s-display .meta{display:flex;align-items:center;gap:24px;font-size:20px;color:#B7C2D1}
.s-display .meta b{font-family:var(--font-display);font-weight:500;font-size:24px;color:#F3F5F8}
.s-display section{display:flex;flex-direction:column;padding:40px;gap:24px;border-right:1px solid rgba(243,245,248,.14)}
.s-display .lbl{display:flex;align-items:center;gap:12px;font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:#B7C2D1;font-weight:500}
.s-display .lbl .call{color:var(--brand)}
.s-display .now{display:flex;align-items:center;gap:32px;flex:1}
.s-display .big{font-family:var(--font-display);font-weight:700;font-size:200px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:color var(--dur-base) var(--ease-enter)}
.s-display .big.flash{color:var(--brand);animation:q-rise var(--dur-base) var(--ease-enter)}
.s-display .st{display:flex;flex-direction:column;gap:4px}
.s-display .st small{font-size:20px;color:#B7C2D1}
.s-display .st b{font-family:var(--font-display);font-weight:700;font-size:112px;line-height:1;letter-spacing:-.02em;padding:0 32px;border-radius:999px;border:1px solid var(--brand)}
.s-display .last{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#7F8DA2;font-weight:500}
.s-display .lst{display:flex;gap:12px}
.s-display .lst span{display:flex;align-items:center;gap:10px;white-space:nowrap;padding:10px 18px 10px 10px;border-radius:999px;border:1px solid rgba(243,245,248,.14);animation:q-rise var(--dur-base) var(--ease-enter);color:#B7C2D1;font-size:16px}
.s-display .lst b{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.02em;color:#F3F5F8;padding:0 8px}
.s-display section,.s-display aside{min-width:0}
.s-display aside{display:flex;flex-direction:column}
.s-display .vid{flex:1;margin:40px 40px 0;border-radius:24px;background:rgba(27,61,107,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#7F8DA2;font-size:14px}
.s-display .tts{margin:24px 40px 40px;border-radius:999px;background:rgba(27,61,107,.4);padding:14px 24px;font-size:16px;color:#B7C2D1;white-space:nowrap;overflow:hidden}

.s-op{width:1280px;height:800px;background:var(--q-gray-100);padding:24px;display:flex;flex-direction:column;gap:24px}
.s-op header{height:72px;border-radius:999px;border:1px solid var(--q-gray-300);background:#fff;display:flex;align-items:center;padding:0 12px 0 28px;gap:24px}
.s-op .org{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--q-navy)}
.s-op .org .call{color:var(--brand)}
.s-op .who{color:var(--q-gray-600);font-size:14px}
.s-op .sp{flex:1}
.s-op .seg{display:inline-flex;border:1px solid var(--q-gray-300);border-radius:999px;padding:3px;font-size:13px;font-weight:500}
.s-op .seg span{border-radius:999px;padding:7px 14px;color:var(--q-gray-600)}
.s-op .seg span.on{background:var(--brand);color:#fff}
.s-op .grid{display:grid;grid-template-columns:1fr 400px;gap:24px;flex:1;min-height:0}
.s-op .panel{background:#fff;border:1px solid var(--q-gray-300);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:16px}
.s-op .tabs{display:flex;align-items:center;gap:16px}
.s-op .tabs span{border-radius:999px;padding:8px 16px;font-weight:500;font-size:14px;color:var(--q-gray-600)}
.s-op .tabs span.on{background:var(--q-gray-200);color:var(--q-ink)}
.s-op .filt{display:inline-flex;gap:6px;margin-left:auto}
.s-op .filt span{border:1px solid var(--q-gray-300);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;color:var(--q-gray-600);background:#fff}
.s-op .filt span.on{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.s-op .th,.s-op .tr{display:grid;grid-template-columns:96px 1.2fr 1fr .8fr 88px 110px;gap:16px;align-items:center;padding:0 20px}
.s-op .th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--q-gray-400);font-weight:500}
.s-op .th span:last-child,.s-op .tr span:last-child{text-align:right}
.s-op .rows{display:flex;flex-direction:column;gap:8px}
.s-op .tr{padding:12px 20px;border-radius:16px;border:1px solid var(--q-gray-300);background:#fff;font-size:14px}
.s-op .tr .m{color:var(--q-gray-600)}
.s-op .tr .w{font-weight:500}
.s-op .tr .s{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--q-gray-400)}
.s-op .empty{padding:40px;text-align:center;color:var(--q-gray-400)}
.s-op aside{display:flex;flex-direction:column;gap:16px}
.s-op .cur{display:flex;align-items:center;gap:16px}
.s-op .cur .i{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--q-gray-600)}
.s-op .cur b{color:var(--q-ink);font-size:16px}
.s-op .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.s-op .none{flex:1;min-height:140px;border-radius:24px;border:1px dashed var(--q-gray-300);display:flex;align-items:center;justify-content:center;color:var(--q-gray-400);font-size:14px}
.s-op .bysec{display:flex;gap:8px;flex-wrap:wrap}

.s-admin{width:1280px;height:800px;background:var(--q-gray-100);display:grid;grid-template-columns:240px 1fr}
.s-admin nav{padding:24px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--q-gray-300);background:#fff}
.s-admin .logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--q-navy);padding:8px 12px 24px}
.s-admin .logo .call{color:var(--brand)}
.s-admin nav a{display:flex;align-items:center;gap:12px;border-radius:999px;padding:10px 16px;color:var(--q-gray-600);font-size:14px;font-weight:500}
.s-admin nav a.on{background:var(--brand);color:#fff}
.s-admin nav .sp{flex:1}
.s-admin nav .cap{padding:0 16px 4px}
.s-admin main{padding:32px;display:flex;flex-direction:column;gap:24px;min-width:0}
.s-admin header{display:flex;align-items:center;gap:16px}
.s-admin h1{font-family:var(--font-display);font-weight:700;font-size:32px;letter-spacing:-.02em}
.s-admin header small{color:var(--q-gray-600);font-size:14px}
.s-admin header .sp{flex:1}
.s-admin .tour{display:flex;align-items:center;gap:16px;padding:12px 12px 12px 20px;border-radius:999px;background:var(--q-navy);color:#F3F5F8;font-size:14px}
.s-admin .tour span{flex:1}
.s-admin .tour .btn{border-color:#6FA3E3;color:#F3F5F8}
.s-admin .k4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.s-admin .k4 .kpi{padding:20px;gap:6px}.s-admin .k4 .n{font-size:40px}
.s-admin .cards{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.s-admin .card{background:#fff;border-color:var(--q-gray-300)}
.s-admin .bars{display:flex;align-items:flex-end;gap:12px;height:160px}
.s-admin .bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.s-admin .bars small{font-size:12px;font-weight:500}
.s-admin .bars i{width:100%;background:var(--brand);border-radius:8px;min-height:4px;transition:height var(--dur-slow) var(--ease-enter)}
.s-admin .bars em{font-size:11px;color:var(--q-gray-600);font-style:normal}
.s-admin .op{display:grid;grid-template-columns:1fr 60px 70px;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--q-gray-200);font-size:14px}
.s-admin .op span:not(:first-child){text-align:right}
.s-admin .op small{color:var(--q-gray-400);font-size:12px}

.station{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:24px;border:1px solid var(--q-gray-300);background:#fff}
.station .h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.station .h b{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em}
.station .h small{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--q-gray-600)}
.station .h i{width:8px;height:8px;border-radius:999px;background:var(--state-served)}
.station.busy .h i{background:var(--brand)}.station.paused .h i{background:var(--state-warning)}
.station .who{font-size:14px;color:var(--q-gray-600)}
.station .slot{width:100%;height:44px;margin-top:4px;border-color:var(--q-gray-300)}
.station .cur{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:13px;color:var(--q-gray-600)}
.st4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* ---------- brand ---------- */
#marca .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center}
#marca .demo{display:flex;gap:24px;align-items:flex-start;justify-content:center;overflow:hidden}
#marca .demo .device.totem{width:245px;border-radius:20px;border-width:5px}
#marca .demo .col{display:flex;flex-direction:column;gap:16px;flex:1;min-width:0}
#marca .demo .device.tv{width:100%;border-radius:12px;border-width:5px}
#marca .demo .opbtn{height:48px;border-radius:999px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:500;transition:background var(--dur-base) var(--ease-enter)}
#marca .demo .opbtn{font-family:var(--font-display);font-weight:500}
#marca .ctl{display:flex;flex-direction:column;gap:28px}
#marca .ctl .grp{display:flex;flex-direction:column;gap:10px}
#marca .ctl .grp>span{font-size:13px;font-weight:500;color:var(--text-secondary)}
#marca .ctl .opts{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- branches ---------- */
#sucursales{color:#F3F5F8}
#sucursales .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
#sucursales .eyebrow{color:#6FA3E3}#sucursales .h2{color:#F3F5F8}#sucursales .lead{color:#B7C2D1}
#sucursales .k2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#sucursales .k2 .kpi{padding:20px}
.map{position:relative;aspect-ratio:4/3;border-radius:24px;border:1px solid rgba(243,245,248,.14);background:rgba(27,61,107,.25);overflow:hidden}
.map>svg{position:absolute;inset:0;width:100%;height:100%;opacity:.25}
.map .b{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;font-size:12px;color:#F3F5F8;transition:color var(--dur-base)}
.map .b b{font-family:var(--font-display);font-variant-numeric:tabular-nums;color:#6FA3E3;margin-left:6px;transition:color var(--dur-base)}
.map .b.off,.map .b.off b{color:#7F8DA2}

/* ---------- stats ---------- */
#numeros .head{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end}
#numeros .k3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#numeros .chart{display:flex;flex-direction:column;gap:16px;padding:32px}
#numeros .chart .t{display:flex;justify-content:space-between;font-size:13px;color:var(--text-secondary)}
#numeros .chart .t span:first-child{font-weight:500}
#numeros .chart svg{width:100%;height:200px;overflow:visible}
#numeros .chart path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1600ms var(--ease-enter)}
#numeros .chart circle{opacity:0;transition:opacity var(--dur-base) 1400ms}
#numeros .chart.in path{stroke-dashoffset:0}
#numeros .chart.in circle{opacity:1}
#numeros .chart .m{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}
@media(prefers-reduced-motion:reduce){#numeros .chart path{transition-duration:200ms}}

/* ---------- qr ---------- */
#qr .hint{font-size:13px;color:var(--text-muted);display:flex;align-items:center;gap:8px}
#qr .scene{display:flex;align-items:center;justify-content:center;gap:32px;min-height:420px;position:relative}
#qr .scene .tkw{transition:transform var(--dur-base) var(--ease-enter)}
#qr .scene .ticket{--w:220px;width:220px}
#qr .scene.on .tkw{transform:translateX(-24px) rotate(-4deg)}
.phone{width:200px;height:400px;border-radius:36px;border:6px solid #1C1C1C;background:#1C1C1C;flex:none;opacity:0;transform:translateX(24px) scale(.96);transition:opacity var(--dur-base) var(--ease-enter),transform var(--dur-base) var(--ease-enter);overflow:hidden}
#qr .scene.on .phone{opacity:1;transform:none}
.phone.shake{animation:q-shake var(--dur-base) var(--ease-enter)}
.phone>div{width:100%;height:100%;border-radius:30px;background:#fff;color:var(--q-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;transition:background var(--dur-base) var(--ease-enter),color var(--dur-base)}
.phone .call{color:var(--brand)}
.phone.done>div{background:var(--state-served);color:#fff}
.phone.done .call{color:#fff}
.phone .t{font-size:13px;opacity:.8}
.phone .n{font-family:var(--font-display);font-weight:700;font-size:56px;letter-spacing:-.02em;line-height:1}
.phone .s{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.01em;min-height:48px}
.phone .e{font-size:12px;opacity:.7}

/* ---------- plans ---------- */
#planes .head{display:flex;align-items:end;justify-content:space-between;gap:24px}
#planes .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.plan{padding:32px;display:flex;flex-direction:column;gap:20px;opacity:.8;transition:border-color var(--dur-base) var(--ease-enter),opacity var(--dur-base)}
.plan.on{border-color:var(--brand);opacity:1}
.plan .h{display:flex;align-items:baseline;justify-content:space-between}
.plan .h b{font-family:var(--font-display);font-weight:700;font-size:32px;letter-spacing:-.02em;transition:color var(--dur-base)}
.plan.on .h b{color:var(--brand)}
.plan .h small{font-size:13px;color:var(--text-muted)}
.plan ul{display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4;transition:color var(--dur-base) var(--ease-enter)}
.plan li svg{margin-top:2px;color:var(--state-served)}
.plan li.no{color:var(--text-muted);text-decoration:line-through}
.plan li.no svg{color:var(--text-muted)}
.plan.on li.plus{color:var(--brand);font-weight:500}
.plan.on li.plus svg{color:var(--brand)}
.plan .btn{margin-top:auto}

/* ---------- closing ---------- */
#demo{padding:128px 0 48px;color:#F3F5F8}
#demo .close{display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px}
#demo .big{font-size:200px;line-height:.9;transition:color var(--dur-slow) var(--ease-enter) 400ms}
#demo.in .big{color:#6FA3E3}
#demo .h2{color:#F3F5F8;max-width:720px}#demo .lead{color:#B7C2D1;text-align:center}
#demo form{display:flex;gap:8px;width:100%;max-width:520px}
#demo input{flex:1;height:56px;border-radius:999px;border:1px solid rgba(243,245,248,.3);background:transparent;color:#F3F5F8;padding:0 24px;font-size:16px;font-family:var(--font-body);outline:none;min-width:0}
#demo input:focus{border-color:#6FA3E3}
#demo .ok{padding:16px 28px;border-radius:999px;border:1px solid var(--state-served);font-size:15px}
#demo .err{color:var(--state-lost);font-size:14px}
#demo footer{margin-top:128px;padding-top:24px;border-top:1px solid rgba(243,245,248,.14);display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#7F8DA2}
#demo footer span{display:flex;align-items:center;gap:8px}
#demo footer .meta{gap:40px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}

/* ---------- whatsapp flotante ---------- */
.wa{position:fixed;right:24px;bottom:24px;z-index:var(--z-header);width:56px;height:56px;border-radius:999px;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease-enter),transform var(--dur-fast) var(--ease-enter)}
.wa:hover{background:#1DA851}
.wa:active{transform:scale(.98)}

/* ---------- mobile / reduced motion: scrollytelling se vuelve vertical ---------- */
@media(max-width:759px){
  .section{padding:64px 0}
  .two,#hero .wrap,#viaje .wrap,#marca .wrap,#sucursales .wrap,#numeros .head,#numeros .k3,#planes .cols{grid-template-columns:1fr}
  .nav .links{display:none}
  .nav>div{gap:8px}
  #hero .wrap{padding-top:120px;padding-bottom:64px}
  #hero h1{font-size:clamp(36px,10vw,56px)}
  #hero .turn{align-items:flex-start}
  #hero .turn .n{font-size:clamp(120px,40vw,200px)}
  .fall,#cursor{display:none}
  #pantallas article{grid-template-columns:1fr;gap:32px;padding:64px 24px}
  #pantallas .dev-center{justify-content:flex-start;overflow:auto}
  #marca .demo{flex-wrap:wrap}
  #numeros .chart{padding:20px}#numeros .chart svg{height:140px}
  #planes .head{flex-direction:column;align-items:flex-start}
  .plan{padding:24px}
  #demo .big{font-size:clamp(96px,30vw,160px)}
  #demo form,#demo footer{flex-direction:column}
  #qr .hint{display:none}
  #qr .scene{flex-direction:column}
  .wa{right:16px;bottom:16px}
}
@media(max-width:759px),(prefers-reduced-motion:reduce){
  #viaje,#pantallas{height:auto;padding:96px 0}
  #viaje .sticky,#pantallas .sticky{position:static;height:auto;display:block;overflow:visible}
  #viaje .wrap{display:flex;flex-direction:column;gap:40px}
  #viaje .steps li{opacity:1}
  #viaje .stage{grid-template-columns:1fr;grid-template-rows:auto}
  #viaje .frame{opacity:1;min-height:220px}
  #viaje .frame .bars div.new{height:95%}
  #viaje .flip{display:none}
  .frame .static-chip{display:inline-flex;position:absolute;right:16px;top:12px}
  #pantallas{padding:32px 0}
  #pantallas .track{display:block;transform:none!important}
  #pantallas article{width:100%;height:auto;padding:64px 24px}
  #pantallas .dots{display:none}
}
@media(max-width:1100px) and (min-width:760px){
  #pantallas article{padding:0 48px;gap:32px}
}