/* Landing de Strata — "Un día en Estudio Solana".
   Una sola línea de tiempo conduce la página: el teléfono de la dueña viaja,
   el reloj avanza, cae la noche y de la pantalla brota la Mente.
   Ley: docs/DESIGN.md (Porcelana/Obsidiana, Switzer, solo transform/opacity). */
@font-face{font-family:'Switzer';src:url('/static/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-display:block;}
@font-face{font-family:'Switzer';src:url('/static/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-display:block;}
@font-face{font-family:'Switzer';src:url('/static/fonts/switzer-600.woff2') format('woff2');font-weight:600;font-display:block;}
@font-face{font-family:'Switzer';src:url('/static/fonts/switzer-700.woff2') format('woff2');font-weight:700;font-display:block;}

:root{
  --accent:#1D6CE6; --accent-hover:#1A5FCB;
  --ease:cubic-bezier(.3,.7,.4,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --c-clientes:#57C08F; --c-oferta:#5B93FF; --c-equipo:#8AA2C8; --c-reglas:#D9A648; --c-conex:#5FA8A0;
  --world:500ms;
  --pad:clamp(20px,4vw,48px);
}
body[data-mode="dia"]{
  --bg:#F6F5F2; --surface:#FFFFFF; --surface-2:#FAF9F6;
  --ink:#17191F; --body:#444953; --muted:#71767F; --faint:#9CA0A8; --line:#E7E4DE; --line-soft:#EFEDE7;
  --live:#1D6CE6; --live-soft:rgba(29,108,230,.09);
  --good:#178A55; --warn:#C07A18;
  --shadow:0 1px 2px rgba(23,25,31,.04), 0 4px 16px rgba(23,25,31,.05);
  --shadow-lift:0 2px 4px rgba(23,25,31,.05), 0 24px 60px rgba(23,25,31,.10);
  --nav:rgba(246,245,242,.82);
}
body[data-mode="noche"]{
  --bg:#0A0C11; --surface:#12151D; --surface-2:#171B25;
  --ink:#ECEEF4; --body:#B4BAC8; --muted:#878EA1; --faint:#5A6070; --line:#20242F; --line-soft:#1A1E28;
  --live:#4A8BFF; --live-soft:rgba(74,139,255,.12);
  --good:#33B37C; --warn:#E0A23F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
  --nav:rgba(10,12,17,.78);
}

*{box-sizing:border-box;}
html{overflow-x:clip;}
html,body{margin:0;padding:0;}
body{
  font-family:'Switzer',-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color var(--world) var(--ease), color var(--world) var(--ease);
  overflow-x:clip;
}
/* grano de papel: quita lo plano de pantalla sin que se note */
body::before{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");}
body[data-mode="noche"]::before{mix-blend-mode:screen;opacity:.035;}
a{color:inherit;text-decoration:none;}
p,h1,h2,h3,h4{margin:0;}
:focus-visible{outline:2px solid var(--live);outline-offset:3px;border-radius:4px;}
.num{font-variant-numeric:tabular-nums;}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad);}

.chip,.btn.ghost,.nav,.integ-col,footer,.foot-legal,.hecho,.pr,.end-row,.times,.also li{
  transition:background-color var(--world) var(--ease), border-color var(--world) var(--ease), color var(--world) var(--ease);
}

/* ── El pulso de Nova ── */
.pulse{display:inline-block;width:.19em;height:.19em;border-radius:50%;background:var(--live);
  margin-left:.06em;position:relative;vertical-align:baseline;}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);
  animation:pulse 2.6s var(--ease-out) infinite;}
@keyframes pulse{0%{transform:scale(1);opacity:.5;}70%,100%{transform:scale(3.4);opacity:0;}}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dot,var(--live));flex:none;}

.label{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);}
.label::before{content:"";width:18px;height:1px;background:currentColor;}
.label b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;transition:color var(--world) var(--ease);}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 22px;border-radius:11px;
  border:1px solid transparent;font:600 15px 'Switzer',sans-serif;cursor:pointer;white-space:nowrap;
  transition:transform 140ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease, border-color 160ms ease;}
.btn:active{transform:scale(.97);}
.btn.pri{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(29,108,230,.4);}
.btn.ghost{border-color:var(--line);color:var(--ink);}
.btn svg{width:15px;height:15px;transition:transform 200ms var(--ease-out);}
.btn.sm{min-height:38px;padding:0 15px;font-size:13.5px;border-radius:9px;}
@media (hover:hover) and (pointer:fine){
  .btn.pri:hover{background:var(--accent-hover);box-shadow:0 6px 18px rgba(29,108,230,.32);}
  .btn.ghost:hover{background:var(--surface);}
  .btn:hover svg{transform:translateX(3px);}
}

/* ── Nav ── */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;background:var(--nav);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;}
.nav.scrolled{border-bottom-color:var(--line-soft);}
.nav-in{display:flex;align-items:center;gap:28px;height:64px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em;margin-right:auto;}
.mark{width:24px;height:24px;border-radius:7px;background:var(--accent);display:grid;align-content:center;justify-items:center;gap:2.5px;flex:none;}
.mark i{display:block;width:13px;height:2.5px;border-radius:2px;background:#fff;}
.mark i:nth-child(2){opacity:.72;} .mark i:nth-child(3){opacity:.5;}
.nav-links{display:flex;gap:26px;font-size:14px;font-weight:500;color:var(--muted);}
.nav-links a{transition:color 150ms ease;}
.nav-login{font-size:14px;font-weight:600;color:var(--muted);transition:color 150ms ease;}
@media (hover:hover){ .nav-links a:hover,.nav-login:hover{color:var(--ink);} }
.nav-bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--live);transform-origin:0 50%;transform:scaleX(0);}
@media (max-width:900px){ .nav-links{display:none;} }
@media (max-width:520px){ .nav-login{display:none;} .nav-in{gap:14px;height:58px;} }

/* ══════════ EL DÍA — una sola línea de tiempo ══════════ */
.story{position:relative;}
.sky,.times,.story canvas{display:none;}

/* tramos de texto */
.beat{max-width:520px;}
.beat h1{font-weight:600;font-size:min(92px,6.3vw);line-height:.96;letter-spacing:-.045em;white-space:nowrap;}
.beat h1 .ln{display:block;}
.beat h2{font-weight:600;font-size:clamp(28px,3.5vw,50px);line-height:1.03;letter-spacing:-.035em;margin-top:18px;text-wrap:balance;}
.beat>p,.beat .sub{font-size:17px;line-height:1.55;color:var(--body);margin-top:18px;text-wrap:pretty;transition:color var(--world) var(--ease);}
.beat.hero{max-width:none;}
.beat.hero .sub{max-width:430px;margin-top:26px;}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;}
.beat.hero .cta-row{margin-top:26px;}
.giros{margin-top:34px;}
.giros p{font-size:13.5px;color:var(--muted);margin-bottom:11px;}
.giro-row{display:flex;gap:7px;flex-wrap:wrap;}
.giro{height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--body);font:500 13.5px 'Switzer',sans-serif;cursor:pointer;
  transition:transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease, border-color 180ms ease;}
.giro:active{transform:scale(.96);}
.giro.on{background:var(--ink);border-color:var(--ink);color:var(--bg);}
@media (hover:hover) and (pointer:fine){ .giro:not(.on):hover{background:var(--surface);color:var(--ink);} }
.beta{margin-top:14px;font-size:13px;color:var(--muted);}
.beta a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;}

/* tarjetas de la Mente */
.hecho{margin-top:24px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);overflow:hidden;max-width:440px;}
.hecho-h{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--line-soft);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.hist{padding:4px 15px;}
.hist>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px 0;font-size:14px;}
.hist>div+div{border-top:1px solid var(--line-soft);}
.hist b{font-weight:600;font-variant-numeric:tabular-nums;}
.hist small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
.hist .old{color:var(--muted);} .hist .old b{text-decoration:line-through;text-decoration-color:var(--faint);font-weight:500;}
.hist .old .dot{--dot:var(--faint);}
.hist .now .dot{--dot:var(--c-oferta);box-shadow:0 0 0 4px rgba(91,147,255,.18);}
.qa{padding:15px;display:grid;gap:10px;}
.qa .q{font-size:13.5px;color:var(--muted);}
.qa .a{font-size:15px;line-height:1.5;}
.evid{display:flex;flex-wrap:wrap;gap:6px;}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);
  font-size:11.5px;font-weight:500;color:var(--body);}

/* sin movimiento (sin JS o con menos movimiento): la historia se lee de corrido */
.story-pin{padding:clamp(108px,15vh,150px) 0 40px;}
.beats .wrap{display:grid;gap:clamp(56px,8vw,96px);}
.stage-phone{display:grid;place-items:center;padding:48px 0 8px;}

/* ── El teléfono ── */
.phone{--pw:min(300px,36vh,72vw);position:relative;width:var(--pw);height:calc(var(--pw) * 2.04);font-size:calc(var(--pw) / 22);
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(5deg) rotateZ(3deg);}
.ph-layer{position:absolute;inset:0;border-radius:3.2em;background:#2B2E36;box-shadow:0 0 0 .5px #2B2E36;outline:1px solid transparent;}
.ph-front,.ph-back{position:absolute;inset:0;border-radius:3.2em;backface-visibility:hidden;-webkit-backface-visibility:hidden;outline:1px solid transparent;}
.ph-front{background:#0B0C10;padding:.6em;transform:translateZ(6px);box-shadow:0 0 0 .6px #2B2E36, inset 0 0 0 1px rgba(255,255,255,.10);}
.ph-back{transform:rotateY(180deg) translateZ(6px);background:linear-gradient(155deg,#343842 0%,#1B1D24 55%,#22252D 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);display:grid;place-items:center;}
.ph-back .mark{width:3em;height:3em;border-radius:.85em;gap:.3em;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.ph-back .mark i{width:1.6em;height:.3em;background:rgba(255,255,255,.75);}
.ph-cam{position:absolute;left:1.3em;top:1.3em;width:6.4em;height:6.6em;border-radius:1.7em;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);}
.ph-cam i{position:absolute;width:2.5em;height:2.5em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#39404F,#0A0B0E 62%);box-shadow:0 0 0 .22em #23262E;}
.ph-cam i:nth-child(1){left:.7em;top:.7em;} .ph-cam i:nth-child(2){right:.7em;bottom:.7em;}
.ph-screen{position:relative;width:100%;height:100%;border-radius:2.62em;overflow:hidden;background:#F6F5F2;color:#17191F;}
.ph-island{position:absolute;top:.72em;left:50%;width:5.8em;height:1.6em;margin-left:-2.9em;border-radius:1em;background:#0B0C10;z-index:6;}
.ph-status{position:absolute;top:0;left:0;right:0;height:3.1em;display:flex;align-items:center;justify-content:space-between;padding:.3em 1.7em 0;
  font-size:.92em;font-weight:600;z-index:5;font-variant-numeric:tabular-nums;transition:color 300ms ease;}
.ph-status svg{height:.85em;width:auto;}
.ph-status span:last-child{display:flex;gap:.4em;align-items:center;}
.ph-screen.dark .ph-status{color:#ECEEF4;}
.ph-glare{position:absolute;inset:-20% -60%;z-index:7;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 49%,rgba(255,255,255,.04) 54%,transparent 60%);}
.ph-home{position:absolute;bottom:.55em;left:50%;width:7.6em;height:.34em;margin-left:-3.8em;border-radius:1em;background:rgba(23,25,31,.32);z-index:6;transition:background-color 300ms ease;}
.ph-screen.dark .ph-home{background:rgba(236,238,244,.4);}
.ph-shadow{display:none;}

/* pantallas */
.scr{position:absolute;inset:0;padding:3.5em 0 0;display:flex;flex-direction:column;opacity:0;transform:scale(.97);
  transition:opacity 260ms ease, transform 420ms var(--ease-out);}
.scr.on{opacity:1;transform:none;}
.s-head{display:flex;align-items:center;gap:.7em;padding:.5em 1.1em .85em;border-bottom:1px solid #EFEDE7;background:#fff;}
.s-head b{font-size:1.08em;font-weight:600;display:block;line-height:1.2;}
.s-head small{font-size:.8em;color:#71767F;display:block;}
.s-head .s-ch{display:flex;align-items:center;gap:.4em;}
.s-ch svg{width:1.05em;height:1.05em;fill:currentColor;}
.s-ava{width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;font-weight:700;font-size:.9em;background:#17191F;}
.s-ava.nova{background:#1D6CE6;}
.s-body{flex:1;padding:1em 1em 0;display:flex;flex-direction:column;gap:.62em;min-height:0;}
.bb{max-width:86%;padding:.72em .95em;border-radius:1.25em;font-size:.98em;line-height:1.38;background:#fff;border:1px solid #EFEDE7;align-self:flex-start;border-bottom-left-radius:.4em;}
.bb.me{align-self:flex-end;background:#17191F;color:#F6F5F2;border-color:transparent;border-radius:1.25em;border-bottom-right-radius:.4em;}
.bb.nova{align-self:flex-end;background:#1D6CE6;color:#fff;border-color:transparent;border-radius:1.25em;border-bottom-right-radius:.4em;}
.s-note{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;font-size:.8em;font-weight:600;color:#178A55;background:#fff;border:1px solid #EFEDE7;border-radius:.7em;padding:.5em .75em;}
.s-note svg{width:1.1em;height:1.1em;}
.s-note.mind{color:#17191F;}
.s-chips{display:flex;flex-wrap:wrap;gap:.45em;}
.s-chips span{font-size:.84em;font-weight:500;border:1px solid #E7E4DE;border-radius:2em;padding:.5em .9em;background:#fff;}
.s-input{margin:auto .9em 1.6em;display:flex;align-items:center;gap:.6em;background:#fff;border:1px solid #E7E4DE;border-radius:2em;padding:.72em 1em;font-size:.9em;color:#9CA0A8;}
.s-input i{margin-left:auto;width:1.9em;height:1.9em;border-radius:50%;background:#1D6CE6;display:grid;place-items:center;flex:none;}
.s-input svg{width:1em;height:1em;color:#fff;}
/* piezas que entran en cascada cuando su pantalla se enciende */
.it{opacity:0;transform:translateY(.7em) scale(.98);}
.scr.on .it{opacity:1;transform:none;transition:opacity 340ms ease, transform 520ms var(--ease-out);transition-delay:calc(240ms + var(--d,0) * 420ms);}
.typing{display:inline-flex;gap:.28em;padding:.85em 1em;}
.typing i{width:.42em;height:.42em;border-radius:50%;background:rgba(255,255,255,.85);animation:dots 1s ease-in-out infinite;}
.typing i:nth-child(2){animation-delay:.15s;} .typing i:nth-child(3){animation-delay:.3s;}
@keyframes dots{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-.22em);opacity:1;}}
.swapbox{display:grid;align-self:flex-end;justify-items:end;max-width:86%;}
.swapbox>*{grid-area:1/1;max-width:100%;}
.scr .swapbox .typing{opacity:0;}
.scr.on .swapbox .typing{animation:showhide 1.5s ease 0.9s both;}
.scr.on .swapbox .bb:not(.typing){transition-delay:2.3s;}
@keyframes showhide{0%{opacity:0;}15%,80%{opacity:1;}100%{opacity:0;}}
/* factura */
.inv{background:#fff;border:1px solid #E7E4DE;border-radius:1.1em;padding:.95em;font-size:.9em;width:100%;font-variant-numeric:tabular-nums;}
.inv h5{margin:0 0 .7em;font-size:.82em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9CA0A8;display:flex;justify-content:space-between;}
.inv div{display:flex;justify-content:space-between;gap:1em;padding:.2em 0;color:#444953;}
.inv .tot{margin-top:.5em;padding-top:.65em;border-top:1px solid #EFEDE7;font-weight:700;font-size:1.22em;color:#17191F;}
.inv-act{position:relative;margin-top:.85em;height:2.9em;display:block !important;padding:0 !important;}
.inv-btn,.inv-ok{position:absolute;inset:0;border-radius:.85em;display:flex;align-items:center;justify-content:center;gap:.5em;font-weight:600;font-size:1em;}
.inv-btn{background:#1D6CE6;color:#fff;}
.inv-ok{background:rgba(23,138,85,.1);color:#178A55;opacity:0;}
.inv-ok svg{width:1.15em;height:1.15em;}
.scr.on .inv-btn{animation:press 3.4s var(--ease-out) 1.4s both;}
.scr.on .inv-ok{animation:appear 400ms ease 3.5s both;}
@keyframes press{0%,55%{transform:scale(1);opacity:1;}60%{transform:scale(.95);opacity:1;}66%,100%{transform:scale(1);opacity:0;}}
@keyframes appear{from{opacity:0;transform:translateY(.4em);}to{opacity:1;transform:none;}}
/* sitio */
.site-url{margin:.2em .9em .7em;background:#EFEDE7;border-radius:.8em;padding:.55em .9em;font-size:.8em;color:#71767F;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.site-hero{margin:0 .9em;border-radius:1.1em;height:8.4em;background:linear-gradient(140deg,#CDBBA3,#A98F74 55%,#7C6652);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:.9em;color:#fff;flex:none;}
.site-hero::before{content:"";position:absolute;left:14%;right:14%;top:34%;height:.5em;border-radius:.2em;background:#5B4636;box-shadow:0 .12em 0 #4A382B;}
.site-hero::after{content:"";position:absolute;left:20%;right:20%;top:38%;height:22%;border-inline:.36em solid #5B4636;}
.site-hero b{position:relative;z-index:1;font-size:1.25em;font-weight:600;letter-spacing:-.02em;}
.site-list{padding:.8em .9em 0;display:grid;gap:.5em;}
.site-item{display:flex;align-items:center;gap:.75em;background:#fff;border:1px solid #EFEDE7;border-radius:.95em;padding:.6em .7em;font-size:.9em;}
.site-item u{width:2.8em;height:2.8em;border-radius:.6em;background:#E4DACB;flex:none;text-decoration:none;}
.site-item b{font-weight:600;display:block;} .site-item small{color:#71767F;font-size:.9em;font-variant-numeric:tabular-nums;}
.site-item span{margin-left:auto;font-size:.82em;font-weight:600;color:#1D6CE6;white-space:nowrap;}
.site-pay{margin:auto .9em 1.6em;background:#17191F;color:#fff;border-radius:.95em;padding:.85em;font-weight:600;font-size:.95em;display:flex;align-items:center;justify-content:center;gap:.55em;}
.site-pay svg{width:1.25em;height:1.25em;fill:#00B1EA;flex:none;}
.bar em{font-style:normal;}
/* al cambiar de giro la pantalla parpadea un instante, como al cambiar de app */
.ph-screen.swap .scr.on{opacity:0;transform:scale(.985);transition-duration:140ms;}
/* números */
.bars{display:grid;gap:.6em;background:#fff;border:1px solid #EFEDE7;border-radius:1.1em;padding:.95em;width:100%;}
.bar{display:grid;grid-template-columns:1fr;gap:.25em;font-size:.84em;color:#444953;font-variant-numeric:tabular-nums;}
.bar span{display:flex;justify-content:space-between;}
.bar u{display:block;height:.55em;border-radius:.4em;background:#E7E4DE;transform-origin:0 50%;transform:scaleX(0);text-decoration:none;}
.bar:first-child u{background:#1D6CE6;}
.scr.on .bar u{transform:scaleX(var(--w));transition:transform 900ms var(--ease-out);transition-delay:calc(1500ms + var(--d,0) * 110ms);}
/* de noche */
.scr.night{background:radial-gradient(120% 80% at 50% 0%,#141926 0%,#0A0C11 70%);color:#ECEEF4;align-items:center;padding-top:6.2em;}
.night .big{font-size:5.2em;font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;}
.night .day{font-size:.95em;color:#878EA1;margin-top:.5em;}
.night .notif{margin:auto .8em 2.4em;background:rgba(236,238,244,.08);border:1px solid rgba(236,238,244,.08);border-radius:1.2em;padding:.9em 1em;font-size:.88em;line-height:1.4;display:flex;gap:.75em;align-items:flex-start;}
.night .notif b{display:block;font-weight:600;margin-bottom:.1em;}
.night .notif span{color:#B4BAC8;}

/* ── con movimiento: el día queda fijo y el scroll lo conduce ── */
.motion .story-track{height:900vh;}
.motion .story-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0;}
.motion .sky{display:block;position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(to top,rgba(240,150,70,.26) 0%,rgba(244,180,110,.10) 34%,transparent 62%);}
.motion .story canvas{display:block;position:absolute;inset:0;width:100%;height:100%;}
.motion .beats{position:absolute;inset:0;z-index:4;pointer-events:none;}
.motion .beats .wrap{display:block;position:relative;height:100%;}
.motion .beat{position:absolute;top:50%;width:min(460px,calc(100% - 2 * var(--pad)));opacity:0;visibility:hidden;will-change:transform,opacity;pointer-events:auto;}
.motion .beat.l{left:var(--pad);} .motion .beat.r{right:var(--pad);}
.motion .beat.hero{width:auto;}
.motion .stage-phone{display:block;padding:0;position:absolute;inset:0;z-index:3;perspective:1500px;pointer-events:none;}
.motion .phone{position:absolute;left:0;top:0;margin:calc(var(--pw) * -1.02) 0 0 calc(var(--pw) * -.5);will-change:transform,opacity;}
.motion .ph-shadow{display:block;position:absolute;left:0;top:0;--pw:min(300px,36vh,72vw);width:calc(var(--pw) * 1.1);height:calc(var(--pw) * .26);
  margin:calc(var(--pw) * -.13) 0 0 calc(var(--pw) * -.55);border-radius:50%;
  background:radial-gradient(closest-side,rgba(23,25,31,.30),rgba(23,25,31,0));will-change:transform,opacity;}
.motion .times{display:flex;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;gap:22px;align-items:center;
  font-size:12px;font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;}
.times span{transition:color 300ms ease;}
.times span.on{color:var(--ink);}
.times i{width:14px;height:1px;background:var(--line);transition:background-color var(--world) var(--ease);}
@media (max-width:900px){
  .phone,.motion .ph-shadow{--pw:min(250px,24.5vh);}
  .motion .beat,.motion .beat.l,.motion .beat.r{left:var(--pad);right:var(--pad);width:auto;top:auto;bottom:38px;}
  .motion .beat.hero{top:88px;bottom:auto;}
  .beat h1{font-size:clamp(38px,11.4vw,80px);}
  .beat h2{font-size:26px;margin-top:12px;}
  .beat>p,.beat .sub{font-size:15px;margin-top:12px;}
  .beat.hero .sub{margin-top:18px;} .beat.hero .cta-row{margin-top:20px;}
  .giros{margin-top:18px;} .giros p{display:none;} .beta{display:none;}
  .hecho{margin-top:16px;}
  .motion .times{display:none;}
}

/* aparecer al llegar */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--ease-out), transform 800ms var(--ease-out);transition-delay:calc(var(--i,0) * 70ms);}
.js .rv.in{opacity:1;transform:none;}
/* entrada: una sola vez, al cargar */
.motion .beat.hero h1 .ln{overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em;}
.motion .beat.hero h1 .ln>span{display:inline-block;transform:translateY(108%);animation:rise 1000ms var(--ease-out) forwards;}
.motion .beat.hero h1 .ln:nth-child(2)>span{animation-delay:90ms;}
.motion .beat.hero .fx{opacity:0;transform:translateY(14px);animation:fadeup 700ms var(--ease-out) forwards;animation-delay:calc(380ms + var(--i,0) * 70ms);}
@keyframes rise{to{transform:none;}}
@keyframes fadeup{to{opacity:1;transform:none;}}

/* ══════════ Encabezados de sección ══════════ */
.sec{padding:clamp(88px,12vw,168px) 0 0;}
.sec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:40px;align-items:end;margin-top:22px;}
.sec-h h2{font-weight:600;font-size:clamp(34px,5.4vw,76px);line-height:1;letter-spacing:-.04em;text-wrap:balance;}
.sec-h p{font-size:17px;line-height:1.55;color:var(--body);padding-bottom:6px;text-wrap:pretty;}
.sec-h h2 em{font-style:normal;color:var(--faint);transition:color var(--world) var(--ease);}
@media (max-width:900px){ .sec-h{grid-template-columns:1fr;gap:18px;} .sec-h p{max-width:520px;} }

/* ══════════ CONFIANZA (de noche) ══════════ */
.trust{padding:clamp(72px,9vw,128px) 0 clamp(88px,10vw,140px);}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,48px);margin-top:clamp(40px,5vw,72px);}
.pr{border-top:1px solid var(--line);padding-top:22px;}
.pr i{font-style:normal;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;font-weight:500;}
.pr h3{font-size:clamp(21px,2vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.12;margin:12px 0 10px;text-wrap:balance;}
.pr>p{font-size:15px;line-height:1.6;color:var(--body);text-wrap:pretty;}
.demo{margin-top:22px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.step{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--line);font-size:12px;font-weight:500;color:var(--muted);
  animation:step 6s ease infinite;animation-delay:calc(var(--d,0) * 1.5s);}
.arrow{color:var(--faint);font-size:12px;}
@keyframes step{0%,8%{color:var(--muted);border-color:var(--line);background-color:transparent;}
  14%,34%{color:var(--ink);border-color:var(--live);background-color:var(--live-soft);}
  44%,100%{color:var(--muted);border-color:var(--line);background-color:transparent;}}
.view{flex:1 1 100%;display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:baseline;font-size:12.5px;padding:8px 0;border-top:1px solid var(--line-soft);}
.view:first-child{border-top:none;padding-top:0;}
.view span{color:var(--faint);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
.view b{font-weight:500;color:var(--body);}
@media (max-width:900px){ .principles{grid-template-columns:1fr;gap:36px;} }

/* ══════════ TAMBIÉN + INTEGRACIONES (amanece) ══════════ */
.also{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;border-top:1px solid var(--line);}
.also li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);}
.also b{font-size:clamp(19px,2vw,25px);font-weight:600;letter-spacing:-.025em;}
.also span{font-size:15.5px;line-height:1.55;color:var(--body);}
@media (max-width:760px){ .also li{grid-template-columns:1fr;gap:6px;padding:18px 0;} }
.integ{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(40px,5vw,72px);}
.integ-col{border-top:1px solid var(--line);padding-top:18px;}
.integ-col h3{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;}
.integ-col ul{list-style:none;margin:0;padding:0;}
.integ-col li{font-size:clamp(17px,1.7vw,21px);font-weight:500;letter-spacing:-.02em;padding:7px 0;display:flex;align-items:center;gap:12px;}
.lg{width:22px;height:22px;flex:none;fill:currentColor;}
.lg-line{fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.lg-mark{width:22px;height:22px;border-radius:6px;gap:2px;}
.lg-mark i{width:11px;height:2px;}
.integ-col li .lg{transition:transform 220ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .integ-col li:hover .lg{transform:scale(1.14);} }
.integ-col small{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);}
@media (max-width:900px){ .integ{grid-template-columns:repeat(2,1fr);row-gap:36px;} }

/* ══════════ CIERRE ══════════ */
.end{padding:clamp(110px,15vw,200px) 0 clamp(88px,11vw,150px);overflow:hidden;}
.end-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,96px);align-items:center;}
.end h2{font-weight:600;font-size:clamp(44px,7.4vw,112px);line-height:.94;letter-spacing:-.045em;max-width:9ch;}
.end-row{margin-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--line);padding-top:26px;}
.end-row p{font-size:19px;line-height:1.5;color:var(--body);max-width:460px;margin-bottom:24px;}
.end-phone{perspective:1500px;padding:0 clamp(0px,3vw,48px);}
.end-phone .phone{position:relative;margin:0;left:auto;top:auto;animation:float 7s ease-in-out infinite;}
@keyframes float{0%,100%{transform:rotateY(-20deg) rotateX(6deg) rotateZ(4deg) translateY(0);}50%{transform:rotateY(-15deg) rotateX(4deg) rotateZ(3deg) translateY(-12px);}}
@media (max-width:900px){ .end-grid{grid-template-columns:1fr;} .end-phone{display:none;} }

/* ══════════ PIE ══════════ */
footer{border-top:1px solid var(--line);padding:34px 0 40px;}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.foot-links{display:flex;gap:22px;font-size:13.5px;color:var(--muted);flex-wrap:wrap;}
.foot-links a{transition:color 150ms ease;}
@media (hover:hover){ .foot-links a:hover,.foot-legal a:hover{color:var(--ink);} }
.foot-legal{margin-top:24px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--muted);line-height:1.7;}
.foot-copy{font-size:12px;color:var(--faint);margin-top:8px;}

@media (prefers-reduced-motion: reduce){
  .pulse::after,.step,.typing i,.end-phone .phone{animation:none;}
  .js .rv{opacity:1;transform:none;transition:none;}
}

/* en móvil el mapa se desvanece antes de llegar al texto */
@media (max-width:900px){
  .motion .story canvas{-webkit-mask-image:linear-gradient(to bottom,#000 48%,transparent 60%);mask-image:linear-gradient(to bottom,#000 48%,transparent 60%);}
}
@media (max-width:520px){ .giro{padding:0 11px;font-size:13px;} .giro-row{gap:6px;} }