/* ==========================================================================
   LaXON — páginas de producto + maquetas (réplicas de UI)
   Cada página de producto define --c (color de marca) y --cg (brillo sobre oscuro).
   ========================================================================== */

/* ---------- Hero de producto ---------- */
.pp-hero { position: relative; overflow: hidden; padding: calc(var(--hdr) + clamp(40px, 6vw, 84px)) 0 clamp(60px, 8vw, 110px); isolation: isolate; }
.pp-hero::before { content: ''; position: absolute; z-index: -2; inset: 0; opacity: .5; 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; mask-image: radial-gradient(ellipse 70% 80% at 75% 40%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 75% 40%, #000 10%, transparent 75%); }
.pp-hero::after { content: ''; position: absolute; z-index: -1; right: -12%; top: -10%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cg) 22%, transparent), transparent 62%); pointer-events: none; }
.pp-hero .bgc { position: absolute; z-index: -1; inset: 0; opacity: .4; pointer-events: none; }
.pp-hero .bgc canvas { width: 100%; height: 100%; }
.pp-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.2fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.pp-mock { margin-right: clamp(-60px, -3vw, 0px); }
.pp-grid .tx { display: grid; gap: 1.4rem; justify-items: start; }
.pp-kicker { display: inline-flex; align-items: center; gap: 12px; }
.pp-kicker .star { position: relative; width: 34px; height: 34px; display: grid; place-items: center; }
.pp-kicker .star::before, .pp-kicker .star::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--cg); opacity: .6; animation: ring 3.4s var(--ease) infinite; }
.pp-kicker .star::after { animation-delay: 1.7s; }
.pp-kicker .star i { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cg) 35%, transparent), 0 0 18px var(--cg); }
.pp-kicker span { font-family: 'Geist Mono', monospace; font-size: .78rem; letter-spacing: .1em; color: var(--cg); }
.pp-hero h1 { font-size: clamp(2.1rem, 3.5vw, 3.4rem); letter-spacing: -.04em; line-height: 1.03; color: #fff; }
.pp-hero h1 em { font-style: normal; color: var(--cg); }
.pp-hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pp-facts { display: flex; gap: 14px 28px; flex-wrap: wrap; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--bd); width: 100%; }
.pp-facts div { display: grid; }
.pp-facts b { font-family: 'Geist Mono', monospace; font-size: 1.2rem; font-weight: 500; color: #fff; letter-spacing: -.04em; }
.pp-facts span { font-size: .78rem; color: var(--mut-d); }
.pp-mock { position: relative; perspective: 1600px; }
.pp-mock::before { content: ''; position: absolute; inset: 8% 4% -6%; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--cg) 32%, transparent), transparent 68%); filter: blur(34px); z-index: -1; opacity: .8; }
@media (max-width: 980px) { .pp-grid { grid-template-columns: minmax(0, 1fr); } .pp-mock { margin-right: 0; } }
.pp-grid > *, .hero .container > *, .story-grid > *, .plat > *, .contact > *, .about-grid > * { min-width: 0; }
.mock-host { max-width: 100%; overflow: hidden; border-radius: 14px; }
.mock-host .tilt { max-width: 100%; }

/* ---------- Ventana / maquetas ---------- */
.mock-host { width: 100%; }
.tilt { transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; }
.fit { position: relative; overflow: hidden; border-radius: 14px; }
.win { width: 900px; transform-origin: 0 0; background: #fff; border: 1px solid var(--bdm, #e2e8f0); border-radius: 14px; overflow: hidden; font-size: 13px; color: #0f172a; box-shadow: 0 50px 100px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04); text-align: left; line-height: 1.4; letter-spacing: 0; }
.win * { box-sizing: border-box; }
.win-bar { height: 36px; background: #f1f5f9; border-bottom: 1px solid var(--bdm, #e2e8f0); display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.win-bar i:nth-child(1) { background: #fca5a5; } .win-bar i:nth-child(2) { background: #fde68a; } .win-bar i:nth-child(3) { background: #86efac; }
.win-bar .url { margin-left: 14px; flex: 1; max-width: 360px; background: #fff; border: 1px solid var(--bdm, #e2e8f0); border-radius: 6px; font: 11px 'Geist Mono', monospace; padding: 4px 10px; color: #64748b; }
.app { display: flex; height: 520px; }
.app-sb { width: 58px; flex: none; background: #fff; border-right: 1px solid var(--bdm, #e2e8f0); padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.app-sb .lg { width: 32px; height: 32px; border-radius: 9px; background: var(--c); display: grid; place-items: center; margin-bottom: 10px; }
.app-sb .it { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #94a3b8; }
.app-sb .it svg { width: 17px; height: 17px; }
.app-sb .it.on { background: #f1f5f9; color: var(--c); }
.app-main { flex: 1; min-width: 0; background: var(--bgm, #f8fafc); display: flex; flex-direction: column; }
.app-top { height: 50px; background: #fff; border-bottom: 1px solid var(--bdm, #e2e8f0); display: flex; align-items: center; gap: 12px; padding: 0 20px; font-weight: 600; font-size: 13px; }
.app-top .sp { flex: 1; }
.mut { color: #94a3b8; font-weight: 400; }
.m-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 99px; background: #ecfdf5; color: #047857; font-size: 11px; font-weight: 600; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: pulse 2s infinite; }
.dot.warn { background: #f59e0b; animation: none; }
.m-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.app-body { padding: 18px; display: grid; gap: 14px; overflow: hidden; align-content: start; }
.m-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.m-kpi { background: #fff; border: 1px solid var(--bdm, #e2e8f0); border-radius: 12px; padding: 12px 14px; }
.m-kpi .l { font: 600 9.5px 'Geist', sans-serif; text-transform: uppercase; letter-spacing: .09em; color: #64748b; }
.m-kpi .v { font: 500 29px 'Geist Mono', monospace; letter-spacing: -.05em; margin-top: 4px; color: #0f172a; }
.m-kpi .v small { font-size: 14px; color: #94a3b8; letter-spacing: 0; }
.m-kpi .v.ok { color: #047857; } .m-kpi .v.warn { color: #b45309; } .m-kpi .v.err { color: #c12425; }
.bump { animation: bump .5s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
.m-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: start; }
.m-cols.z { grid-template-columns: 1.1fr 1fr; } .m-cols.a { grid-template-columns: 1.25fr 1fr; } .m-cols.g { grid-template-columns: 1.35fr 1fr; }
.m-stack { display: grid; gap: 12px; }
.m-card { background: #fff; border: 1px solid var(--bdm, #e2e8f0); border-radius: 12px; padding: 14px 16px; }
.m-title { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 12.5px; margin-bottom: 8px; }
.live { display: inline-flex; gap: 6px; align-items: center; font-size: 10.5px; font-weight: 500; color: #047857; }
.m-list { display: grid; }
.m-row { display: grid; grid-template-columns: 30px 1.35fr 1fr 56px 74px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #eef2f7; font-size: 12px; }
.m-row:first-child { border-top: 0; }
.m-row b { font-weight: 600; display: block; } .m-row small { color: #94a3b8; font-size: 10.5px; display: block; }
.m-row.z { grid-template-columns: 30px 1fr 80px; } .m-row.a { grid-template-columns: 30px 1fr 96px; } .m-row.g { grid-template-columns: 1fr auto; }
.m-row.new { animation: rowIn .7s var(--ease); }
@keyframes rowIn { 0% { opacity: 0; transform: translateY(-12px); background: color-mix(in srgb, var(--c) 14%, transparent); } 60% { background: color-mix(in srgb, var(--c) 9%, transparent); } 100% { opacity: 1; transform: none; background: transparent; } }
.m-av { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); display: grid; place-items: center; font-weight: 700; font-size: 10.5px; }
.mono { font-family: 'Geist Mono', monospace; }
.m-badge { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 99px; text-align: center; white-space: nowrap; }
.m-badge.ok { background: #d1fae5; color: #047857; } .m-badge.warn { background: #fef3c7; color: #b45309; } .m-badge.err { background: #fee2e2; color: #c12425; } .m-badge.info { background: #e0f2fe; color: #0369a1; }
.m-br { display: grid; grid-template-columns: 78px 1fr 34px; gap: 10px; align-items: center; font-size: 11.5px; padding: 5px 0; }
.m-br em { font-style: normal; text-align: right; color: #64748b; font-size: 11px; }
.m-bar { height: 6px; background: #e8edf4; border-radius: 99px; overflow: hidden; }
.m-bar i { display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 99px; transform-origin: left; animation: grow 1.6s var(--ease) both .3s; }
@keyframes grow { from { transform: scaleX(0); } }
.m-dev { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; font-size: 12px; padding: 6px 0; border-top: 1px solid #eef2f7; }
.m-dev:first-of-type { border-top: 0; }
.m-dev em { font-style: normal; color: #94a3b8; font-size: 10.5px; }
/* kiosko Zosma */
.kiosk { display: grid; align-content: start; }
.kz { margin-top: 6px; border-radius: 12px; padding: 28px 18px; text-align: center; display: grid; justify-items: center; gap: 8px; transition: background .4s, border-color .4s; background: #ecfdf5; border: 1px solid #a7f3d0; }
.kz.err { background: #fef2f2; border-color: #fecaca; }
.kz-ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #10b981; color: #fff; }
.kz.err .kz-ic { background: #c12425; } .kz-ic svg { width: 28px; height: 28px; stroke-width: 2.4; }
.kz-t { font: 600 11px 'Geist Mono', monospace; letter-spacing: .16em; color: #047857; } .kz.err .kz-t { color: #c12425; }
.kz-n { font-size: 20px; font-weight: 600; letter-spacing: -.02em; } .kz-s { color: #64748b; font-size: 12px; }
.kz.pop .kz-ic { animation: popIc .6s var(--ease); } @keyframes popIc { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
/* Algieba */
.seg { display: inline-flex; border: 1px solid #e9d5ff; border-radius: 8px; overflow: hidden; justify-self: end; }
.seg u { text-decoration: none; width: 30px; text-align: center; font: 600 11px 'Geist Mono', monospace; padding: 4px 0; color: #94a3b8; background: #fff; transition: background .3s, color .3s; }
.seg u.on.p { background: #d1fae5; color: #047857; } .seg u.on.f { background: #fee2e2; color: #c12425; } .seg u.on.l { background: #fef3c7; color: #b45309; }
.phone { width: 100%; background: #1a1a1a; border-radius: 22px; padding: 12px 12px 14px; color: #fff; border: 4px solid #2a2a2a; }
.ph-top { display: flex; justify-content: space-between; font-size: 10px; color: #9ca3af; padding: 0 6px 10px; }
.ph-msg { background: #fff; color: #0f172a; border-radius: 14px; padding: 11px 13px; font-size: 12px; }
.ph-msg strong { font-size: 10.5px; color: #690681; display: block; margin-bottom: 3px; } .ph-msg p { color: #334155; }
.ph-msg.pop { animation: popMsg .6s var(--ease); } @keyframes popMsg { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 100% { opacity: 1; transform: none; } }
/* Algedi */
.m-search { font-weight: 400; font-size: 11px; color: #94a3b8; background: #faf2e8; border: 1px solid #f0dcc7; padding: 4px 10px; border-radius: 8px; }
.g-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.g-it { border: 1px solid #f0dcc7; border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; background: #fffdf9; transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.g-it b { font-size: 12px; } .g-it small { color: #94a3b8; font-size: 10px; }
.g-f { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; font-weight: 600; }
.g-f em { font-style: normal; font-size: 10px; font-weight: 500; color: #047857; background: #d1fae5; padding: 2px 7px; border-radius: 99px; } .g-f em.low { color: #b45309; background: #fef3c7; }
.g-it.pick { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); transform: scale(1.02); }
.cart .m-list { min-height: 112px; align-content: start; }
.tot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed #e5cdb4; margin-top: 8px; padding-top: 10px; font-size: 12px; } .tot b { font-size: 24px; letter-spacing: -.04em; }
.pay { display: flex; gap: 6px; margin-top: 8px; } .pay span { flex: 1; text-align: center; font-size: 11px; padding: 6px 0; border: 1px solid #f0dcc7; border-radius: 8px; color: #64748b; } .pay span.on { border-color: var(--c); color: var(--c); font-weight: 600; background: #fff7f1; }
.cobrar { margin-top: 10px; text-align: center; background: var(--c); color: #fff; border-radius: 9px; padding: 10px; font-weight: 600; font-size: 12.5px; transition: background .3s; } .cobrar.ok { background: #047857; }

/* ---------- Historia (scroll storytelling de Regulus) ---------- */
.story { position: relative; height: 430vh; background: var(--bg); }
.story-pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: var(--hdr); }
.story-pin::before { content: ''; position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 60% 70% at 70% 50%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 50%, #000, transparent 75%); }
.story-grid { position: relative; display: grid; grid-template-columns: .85fr 1fr; gap: clamp(20px, 5vw, 80px); align-items: center; width: 100%; }
.story-text .eyebrow { margin-bottom: 1.2rem; }
.story-text h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); margin-bottom: 2rem; }
.sst { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--bd); opacity: .38; transition: opacity .5s, transform .5s var(--ease); }
.sst:last-child { border-bottom: 1px solid var(--bd); }
.sst .n { font-family: 'Geist Mono', monospace; font-size: .8rem; color: var(--mut-d); padding-top: 3px; transition: color .4s; }
.sst h3 { font-size: 1.1rem; margin-bottom: 4px; transition: color .4s; color: #cbd5e1; }
.sst p { color: var(--mut-d); font-size: .92rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .5s; }
.sst.on { opacity: 1; transform: translateX(6px); }
.sst.on .n { color: var(--reg-g); } .sst.on h3 { color: #fff; } .sst.on p { max-height: 120px; opacity: 1; }
.story-bar { height: 2px; background: var(--bd); margin-top: 22px; border-radius: 2px; overflow: hidden; } .story-bar i { display: block; height: 100%; width: 100%; background: var(--reg-g); transform-origin: left; transform: scaleX(var(--p, 0)); }
.story-stage { position: relative; width: 100%; max-width: 640px; margin-inline: auto; height: min(78svh, 760px); }
.story-stage svg { width: 100%; height: 100%; overflow: visible; }
.st-trace { fill: none; stroke: #2e3641; stroke-width: 2; }
.st-lit { fill: none; stroke: var(--reg-g); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(124,192,245,.7)); }
.st-card { fill: #111; stroke: #2a323d; stroke-width: 1.4; }
.st-t { font-family: 'Geist', sans-serif; fill: #e5e7eb; } .st-m { font-family: 'Geist Mono', monospace; fill: #7b8594; }
.st-hot { fill: var(--reg-g); }
@media (max-width: 900px) {
  .story { height: 380vh; }
  .story-grid { grid-template-columns: 1fr; gap: 0; align-content: center; }
  .story-text { order: 2; }
  .story-text h2, .story-text .eyebrow { display: none; }
  .sst { display: none; } .sst.on { display: grid; transform: none; border: 0; padding: 0; }
  .sst:last-child { border: 0; }
  .story-stage { height: 56svh; order: 1; }
  .story-bar { margin-top: 14px; }
}

/* ---------- Bento de funcionalidades ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bc { position: relative; border-radius: 20px; border: 1px solid var(--line); background: #fff; padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 10px; align-content: start; overflow: hidden; transition: transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease); }
.bc:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 50%, #fff); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--c) 60%, transparent); }
.bc.s2 { grid-column: span 2; } .bc.s3 { grid-column: span 3; } .bc.s4 { grid-column: span 4; } .bc.dk { background: var(--bg); border-color: var(--bd); color: #e5e7eb; } .bc.dk h3 { color: #fff; } .bc.dk p { color: var(--mut-d); }
.bc .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); }
.bc.dk .ico { background: color-mix(in srgb, var(--cg) 14%, #111); color: var(--cg); }
.bc .ico svg { width: 20px; height: 20px; }
.bc h3 { font-size: 1.2rem; letter-spacing: -.025em; } .bc p { color: var(--mut); font-size: .93rem; max-width: 46ch; }
.viz { margin-top: 12px; min-height: 120px; display: grid; align-items: end; }
/* viz: turnos */
.wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font: 500 10px 'Geist Mono', monospace; color: #94a3b8; text-align: center; }
.wk div { display: grid; gap: 5px; } .wk i { display: block; height: 10px; border-radius: 4px; background: #e8edf4; } .wk i.on { background: var(--c); transform-origin: left; animation: grow 1.2s var(--ease) both; } .wk i.on.b { background: color-mix(in srgb, var(--c) 45%, #fff); }
.wk div:nth-child(6) i, .wk div:nth-child(7) i { opacity: .55; }
/* viz: barras */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 118px; }
.bars span { flex: 1; background: color-mix(in srgb, var(--c) 18%, #fff); border-radius: 6px 6px 2px 2px; height: var(--h); transform-origin: bottom; transform: scaleY(0); transition: transform 1.1s var(--ease); transition-delay: var(--d, 0s); position: relative; }
.bars span.hi { background: var(--c); }
.reveal.in .bars span, .bc.in .bars span { transform: scaleY(1); }
.chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .chips u { text-decoration: none; font: 500 10.5px 'Geist Mono', monospace; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink2); }
/* viz: sucursales */
.net { width: 100%; height: 150px; }
.net .tr { fill: none; stroke: color-mix(in srgb, var(--c) 35%, #fff); stroke-width: 1.5; } .net .nd { fill: #fff; stroke: var(--c); stroke-width: 1.6; } .net .ct { fill: var(--c); } .net text { font: 500 10px 'Geist Mono', monospace; fill: var(--mut); }
/* viz: aprobación */
.flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flow .fs { font-size: .76rem; font-weight: 600; padding: .4rem .6rem; border-radius: 10px; border: 1px solid var(--line); background: #f8fafc; color: var(--ink2); display: inline-flex; align-items: center; gap: 6px; }
.flow .fs.ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; animation: okIn 5s infinite; } @keyframes okIn { 0%,55% { opacity: .35; transform: scale(.96); } 70%,100% { opacity: 1; transform: none; } }
.flow svg { width: 14px; height: 14px; color: #94a3b8; }
/* viz: alerta reloj */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: #1a1a1a; border: 1px solid #333; }
.alert svg { width: 20px; height: 20px; color: #f59e0b; flex: none; margin-top: 2px; } .alert b { color: #fff; font-size: .88rem; display: block; } .alert span { color: var(--mut-d); font-size: .8rem; }
/* viz: portal móvil */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 250px; }
.cal i { aspect-ratio: 1; border-radius: 6px; background: #e8edf4; display: block; }
.cal i.p { background: #86efac; } .cal i.t { background: #fcd34d; } .cal i.f { background: #fca5a5; } .cal i.x { background: transparent; }
.cal i { animation: calIn .5s var(--ease) both; animation-delay: calc(var(--i) * 28ms); } @keyframes calIn { from { opacity: 0; transform: scale(.6); } }
.chips2 { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .75rem; color: var(--mut); } .chips2 b { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
@media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; } .bc.s2, .bc.s3, .bc.s4 { grid-column: span 2; } .bc.s2 { grid-column: span 1; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bc.s2, .bc.s3, .bc.s4 { grid-column: auto; } }

/* ---------- Dos columnas (problema / solución) ---------- */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs > div { border-radius: 20px; padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: start; }
.vs .before { background: #fff; border: 1px dashed #cbd5e1; } .vs .after { background: var(--c); color: #fff; }
.vs h3 { font-size: 1.3rem; } .vs .after h3 { color: #fff; }
.vs li { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; padding: 8px 0; border-top: 1px solid rgba(100,116,139,.18); } .vs .after li { border-color: rgba(255,255,255,.22); }
.vs li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; } .vs .before svg { color: #94a3b8; } .vs .before li { color: var(--mut); }
@media (max-width: 820px) { .vs { grid-template-columns: 1fr; } }

/* ---------- Planes ---------- */
.plans { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 14px; }
.plan { border-radius: 20px; border: 1px solid var(--line); background: #fff; padding: 26px; display: grid; gap: 14px; align-content: start; position: relative; transition: transform .4s var(--ease), border-color .3s; }
.plan:hover { transform: translateY(-4px); border-color: var(--c); }
.plan.feat { border-color: var(--c); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--c) 60%, transparent); }
.plan .pill { position: absolute; top: -11px; left: 22px; background: var(--c); color: #fff; font: 600 10px 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; }
.plan h3 { font-size: 1.2rem; } .plan .cap { font-family: 'Geist Mono', monospace; font-size: 2rem; letter-spacing: -.05em; color: var(--c); line-height: 1; } .plan .cap small { font-size: .78rem; color: var(--mut); letter-spacing: 0; display: block; margin-top: 6px; font-family: 'Geist', sans-serif; }
.plan ul { display: grid; gap: 8px; } .plan li { display: flex; gap: 9px; font-size: .88rem; color: var(--ink2); } .plan li svg { width: 15px; height: 15px; color: var(--c); flex: none; margin-top: 3px; }
.plan .btn { margin-top: 6px; }
.plans-note { margin-top: 22px; text-align: center; color: var(--mut); font-size: .9rem; }
@media (max-width: 1020px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .plans { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 4px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-weight: 600; font-size: 1.08rem; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 300 1.7rem 'Geist Mono', monospace; color: var(--c); transition: transform .3s var(--ease); line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 24px; color: var(--mut); max-width: 68ch; }

/* ---------- Cinta de módulos ---------- */
.mods-l { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mods-l span { font: 500 .78rem 'Geist Mono', monospace; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink2); }

/* ---------- Seguridad (página) ---------- */
.sec-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.seccard { padding: 28px; border-radius: 18px; border: 1px solid var(--line); background: #fff; display: grid; gap: 12px; align-content: start; }
.seccard svg { width: 26px; height: 26px; color: var(--reg); }
.seccard h3 { font-size: 1.15rem; } .seccard p { color: var(--mut); font-size: .93rem; }
@media (max-width: 900px) { .sec-cards { grid-template-columns: 1fr; } }

.story.static { height: auto; } .story.static .story-pin { position: relative; height: auto; padding: 110px 0 60px; } .story.static .sst { opacity: 1; } .story.static .sst p { max-height: 120px; opacity: 1; }

/* modo de prueba (?p=0.5): solo la escena */
.t-story main > *:not(.story) { display: none; } .t-story .story { height: 100svh; } .t-story .story-pin { position: relative; }
.still .story { height: auto; } .still .story-pin { position: relative; height: 900px; }

.bc.dk .chips u { border-color: #333; color: #cbd5e1; } .bc.dk .m-bar { background: #2a2a2a; } .bc.dk .m-br { color: #e5e7eb; } .bc.dk .m-br em { color: #94a3b8; }