/* Layout: una columna estrecha de 1040px, interfaz casi monocroma, una sola familia. El color vive en el trabajo y en un acento que cambia con cada slide del reel. */
:root{
  --paper:#FAFAF8; --surface:#FFFFFF; --sunk:#EFEFEB; --ink:#141414; --ink-2:#4A4A48; --muted:#8A8A86; --line:#E6E6E1;
  --accent:#D3271C; --accent-ink:#FFFFFF; --accent-soft:#F6E3E0;
  --wall:#D9D3C7; --wall-2:#C9C1B2; --floor:#8C7F6D; --tv:#121214;
  --chat-bg:#ECE9E2; --bubble-out:#0F1013; --bubble-out-ink:#F1F1ED; --bubble-in:#FFFFFF;
  --note:#E8462B;
  --f-display:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --r-lg:22px; --r-md:14px; --r-sm:8px;
  --max:1040px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#111111; --surface:#161616; --sunk:#1C1C1C; --ink:#EDEDEA; --ink-2:#B9B9B5; --muted:#7D7D79; --line:#262626;
  --accent:#F0473A; --accent-ink:#111111; --accent-soft:#2E1714;
  --wall:#2A2723; --wall-2:#221F1C; --floor:#191715; --tv:#050506;
  --chat-bg:#1B1C20; --bubble-out:#EDEDE8; --bubble-out-ink:#0E0F12; --bubble-in:#26272D;
  --note:#FF7A5C; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#111111; --surface:#161616; --sunk:#1C1C1C; --ink:#EDEDEA; --ink-2:#B9B9B5; --muted:#7D7D79; --line:#262626;
  --accent:#F0473A; --accent-ink:#111111; --accent-soft:#2E1714;
  --wall:#2A2723; --wall-2:#221F1C; --floor:#191715; --tv:#050506;
  --chat-bg:#1B1C20; --bubble-out:#EDEDE8; --bubble-out-ink:#0E0F12; --bubble-in:#26272D;
  --note:#FF7A5C; color-scheme:dark }

@view-transition{navigation:auto}
/* Transición entre páginas: fundido suave de la página que sale a la que entra */
::view-transition-group(root){animation-duration:.9s}
::view-transition-old(root){animation:pageOut .45s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:pageIn .8s .2s cubic-bezier(.4,0,.2,1) both}
@keyframes pageOut{to{opacity:0}}
@keyframes pageIn{from{opacity:0}}
/* Navegadores sin transición entre documentos: la página entra con el mismo fundido */
html:not(.vt) body{animation:pageIn .8s cubic-bezier(.4,0,.2,1) both}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:500 15px/1 var(--f-body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease-out),background-color .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.btn svg{transition:transform .3s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}

/* progreso de scroll */
.progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:61}
@supports (animation-timeline: scroll()){.progress{animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}

/* cabecera */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));
  background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.top-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:12px 28px;justify-content:space-between;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 15px/1 var(--f-body);letter-spacing:-.01em}
.mono-mark{width:28px;height:28px;border-radius:8px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:800 12px/1 var(--f-display);letter-spacing:-.02em;transition:transform .5s var(--ease-out),background-color .2s}
.brand:hover .mono-mark{transform:rotate(-8deg) scale(1.06);background:var(--accent)}
.nav{display:flex;gap:4px 22px;font-size:14px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--ink-2);padding:10px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.tools{display:flex;align-items:center;gap:6px}
.icon-btn{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{border-color:var(--ink)}

/* hero */
.hero{padding-block:clamp(48px,8vw,104px) 0;position:relative}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-bottom:28px}
.live{display:inline-flex;align-items:center;gap:8px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent);animation:pulse 2.4s var(--ease-out) infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{font-size:clamp(44px,8.4vw,124px);font-weight:800;letter-spacing:-.055em;line-height:.94;max-width:14ch}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line>span{display:inline-block;animation:lineUp .9s var(--ease-out) both}
.hero h1 .line:nth-child(2)>span{animation-delay:.08s}
.hero h1 .line:nth-child(3)>span{animation-delay:.16s}
@keyframes lineUp{from{transform:translateY(105%)}}
.hero h1 .soft{color:var(--muted);font-weight:500;font-size:.46em;letter-spacing:-.035em;line-height:1.1;display:inline-block;margin-top:.35em}
.inline-reel{display:inline-block;vertical-align:middle;width:1.7em;height:.82em;border-radius:999px;overflow:hidden;margin:0 .06em .1em;position:relative;background:var(--sunk);transform:translateY(-.04em)}
.inline-reel canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity 1.1s var(--ease-in-out)}
.hero-row{display:flex;flex-wrap:wrap;gap:28px 64px;align-items:flex-end;justify-content:space-between;margin-top:36px}
.lead{max-width:56ch;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);line-height:1.55;min-width:0;flex:1 1 420px}
.lead strong{color:var(--ink);font-weight:600}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.fade-in{animation:fadeIn .8s .35s var(--ease-out) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}}

/* reel */
.reel{margin:clamp(40px,6vw,72px) 0 0;position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--sunk);aspect-ratio:16/8.2;max-width:100%;isolation:isolate;animation:reelIn 1.1s .25s var(--ease-out) both}
@keyframes reelIn{from{clip-path:inset(14% 6% 0 6% round 22px);transform:translateY(24px)}to{clip-path:inset(0 0 0 0 round 22px)}}
.scene{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease-in-out),transform 1.2s var(--ease-out);transform:scale(1.03)}
.scene.on{opacity:1;transform:none}
.reel-ui{position:absolute;left:0;right:0;bottom:0;padding:18px clamp(14px,2.4vw,24px);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;z-index:5;background:linear-gradient(to top,rgba(0,0,0,.5),transparent);color:#fff}
.reel-cap{min-width:0}
.reel-cap b{display:block;font:700 clamp(17px,2vw,24px)/1.1 var(--f-display);letter-spacing:-.02em}
.reel-cap span{font:400 12px/1.4 var(--f-mono);opacity:.85;letter-spacing:.02em}
.reel-bars{position:absolute;top:14px;left:clamp(14px,2.4vw,24px);right:clamp(14px,2.4vw,24px);display:flex;gap:6px;z-index:5}
.reel-bars button{flex:1;height:14px;border:0;padding:5px 0;background:transparent;cursor:pointer}
.reel-bars button i{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.reel-bars button i b{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.reel-pause{flex:none;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.25);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px)}

/* escena TV (WindowSight) */
.room{position:absolute;inset:0;background:linear-gradient(180deg,var(--wall) 0 72%,var(--floor) 72%)}
.room::before{content:"";position:absolute;left:0;right:0;top:72%;height:1px;background:rgba(0,0,0,.18)}
.lamp{position:absolute;right:11%;bottom:28%;width:2px;height:34%;background:rgba(0,0,0,.45)}
.lamp::before{content:"";position:absolute;top:-6%;left:50%;width:58px;height:38px;transform:translateX(-50%);background:#E9DFC8;border-radius:50% 50% 6px 6px/80% 80% 6px 6px;box-shadow:0 30px 80px 30px rgba(255,214,150,.28)}
.console{position:absolute;left:24%;right:24%;bottom:22%;height:7%;background:var(--wall-2);border-radius:4px;box-shadow:0 10px 20px rgba(0,0,0,.12)}
.tv{position:absolute;left:50%;top:15%;width:46%;aspect-ratio:16/9;transform:translateX(-50%);background:var(--tv);border-radius:6px;padding:.7%;box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.tv-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:2px;background:#222}
.tv-screen canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity 1.4s var(--ease-in-out)}
.tv-screen .glare{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.10),transparent 40%);pointer-events:none}
.tv-tag{position:absolute;left:4%;bottom:6%;font:500 clamp(7px,.8vw,11px)/1.2 var(--f-mono);color:rgba(255,255,255,.85);background:rgba(0,0,0,.35);padding:4px 7px;border-radius:4px;backdrop-filter:blur(4px);opacity:0;transform:translateY(6px);transition:all .6s var(--ease-out)}
.tv-tag.on{opacity:1;transform:none}
.ken{animation:ken 9s linear infinite alternate}
@keyframes ken{to{transform:scale(1.06) translateX(-1%)}}

/* escena chat */
.chat-stage{position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 10%,var(--accent-soft),var(--sunk) 60%);display:grid;place-items:center}
.phone{width:min(300px,60%);height:88%;background:var(--surface);border-radius:32px;border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.35);padding:12px;display:flex;flex-direction:column}
.phone-head{display:flex;align-items:center;gap:10px;padding:6px 6px 10px;border-bottom:1px solid var(--line)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:700 12px/1 var(--f-display)}
.phone-head b{font-size:13px;display:block;line-height:1.2}
.phone-head small{font-size:11px;color:var(--muted)}
.thread{flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:10px 4px 4px;background:var(--chat-bg);border-radius:18px;margin-top:8px}
.msg{max-width:86%;padding:8px 11px;font-size:12.5px;line-height:1.45;border-radius:14px;animation:pop .45s var(--ease-out) both}
.msg.out{align-self:flex-end;background:var(--bubble-out);color:var(--bubble-out-ink);border-bottom-right-radius:4px}
.msg.in{align-self:flex-start;background:var(--bubble-in);color:var(--ink);border-bottom-left-radius:4px;margin-left:4px}
.msg .cite{margin-top:7px;padding-top:7px;border-top:1px solid var(--line);display:flex;gap:6px;align-items:center;font:500 10.5px/1.2 var(--f-mono);color:var(--accent)}
.typing{display:inline-flex;gap:4px;padding:11px 12px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dot 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}}

/* escena archivo */
.archive-stage{position:absolute;inset:0;background:var(--ink);overflow:hidden}
.arch-cols{position:absolute;inset:-10% 4%;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;transform:rotate(-6deg)}
.arch-col{display:flex;flex-direction:column;gap:12px;animation:colUp 26s linear infinite}
.arch-col:nth-child(even){animation-direction:reverse}
@keyframes colUp{to{transform:translateY(-50%)}}

/* póster (archivo) */
.poster{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;padding:clamp(12px,1.6vw,20px);display:flex;flex-direction:column;justify-content:space-between;color:var(--pf);background:var(--pb);flex:none}
.poster .shape{position:absolute;pointer-events:none}
.poster b{position:relative;font:800 clamp(15px,1.6vw,22px)/.95 var(--f-display);letter-spacing:-.04em;max-width:9ch}
.poster small{position:relative;font:500 10px/1.3 var(--f-mono);letter-spacing:.04em;opacity:.85}

/* sección logos */
.names{margin-top:clamp(56px,7vw,88px);padding-block:22px;border-block:1px solid var(--line);overflow:hidden;position:relative;display:flex;align-items:center;gap:28px}
.names .eyebrow{flex:none;white-space:nowrap}
.marquee{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{list-style:none;margin:0;padding:0;display:flex;gap:44px;width:max-content;animation:slide 38s linear infinite}
.marquee:hover ul{animation-play-state:paused}
.marquee li{font:700 22px/1 var(--f-display);letter-spacing:-.03em;color:var(--ink-2);white-space:nowrap;display:flex;align-items:center;gap:44px}
.marquee li::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--line)}
@keyframes slide{to{transform:translateX(-50%)}}

/* encabezados de sección */
.sec{padding-block:clamp(88px,11vw,152px) 0}
.sec-head{display:flex;flex-wrap:wrap;gap:18px 56px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(32px,4vw,52px)}
.sec-head h2{font-size:clamp(36px,5.2vw,72px);max-width:13ch}
.sec-head p{max-width:42ch;color:var(--ink-2);min-width:0}

/* proyectos */
.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.card{grid-column:span 6;position:relative;display:flex;flex-direction:column;gap:18px;text-decoration:none;color:inherit;cursor:pointer;border:0;background:none;padding:0;text-align:left;font:inherit}
.card.feature{grid-column:span 12}
.card.wide{grid-column:span 7}.card.narrow{grid-column:span 5}
.media{position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;background:var(--sunk);max-width:100%;transition:border-radius .5s var(--ease-out)}
.feature .media{aspect-ratio:16/7.4}
.media>*{transition:transform 1s var(--ease-out)}
.card:hover .media>.scene-box{transform:scale(1.025)}
.scene-box{position:absolute;inset:0}
.card-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:baseline}
.card h3{font-size:clamp(26px,2.6vw,36px);font-weight:700}
.card .yr{font:500 12px/1 var(--f-mono);color:var(--muted);white-space:nowrap}
.card .result{grid-column:1/-1;color:var(--ink-2);max-width:60ch}
.card .result strong{color:var(--ink);font-weight:600}
.card .role{grid-column:1/-1;font:500 12px/1.4 var(--f-mono);color:var(--muted);letter-spacing:.02em}
.status{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--f-mono);padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;position:absolute;top:14px;left:14px;z-index:3;backdrop-filter:blur(6px)}
.status i{width:6px;height:6px;border-radius:50%;background:#7CF29A}
.view-pill{position:absolute;z-index:4;left:0;top:0;pointer-events:none;padding:10px 16px;border-radius:999px;background:var(--surface);color:var(--ink);font:500 13px/1 var(--f-body);box-shadow:0 10px 30px rgba(0,0,0,.18);opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .25s,transform .35s var(--ease-out);white-space:nowrap}
.card:hover .view-pill{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){.view-pill{display:none}}
.quote{grid-column:1/-1;margin:4px 0 0;padding-left:14px;border-left:2px solid var(--accent);font-size:14px;color:var(--ink-2)}
.quote cite{display:block;font:500 11px/1.4 var(--f-mono);color:var(--muted);font-style:normal;margin-top:4px}

/* acta (Vecinfy) */
.doc-stage{position:absolute;inset:0;background:linear-gradient(160deg,var(--sunk),var(--paper));display:grid;place-items:center}
.doc{width:58%;max-width:340px;aspect-ratio:3/4;background:var(--surface);border-radius:6px;box-shadow:0 30px 60px -28px rgba(0,0,0,.35);padding:7%;display:flex;flex-direction:column;gap:7px;transform:rotate(-2deg)}
.doc h4{margin:0 0 6px;font:700 clamp(11px,1.2vw,15px)/1.1 var(--f-display);letter-spacing:-.02em}
.doc .ln{height:5px;border-radius:3px;background:var(--line);transform-origin:0 50%}
.doc .ln.hl{background:var(--accent)}
.wave{display:flex;gap:2px;align-items:center;height:22px;margin-bottom:6px}
.wave i{width:3px;border-radius:2px;background:var(--accent);animation:wv 1.1s ease-in-out infinite}
@keyframes wv{0%,100%{height:20%}50%{height:100%}}

/* calendario (Apogeo) */
.cal-stage{position:absolute;inset:0;background:var(--ink);display:grid;place-items:center}
.cal{width:72%;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal i{aspect-ratio:1;border-radius:6px;background:rgba(255,255,255,.07);transition:background-color .5s,transform .5s var(--ease-out)}
.cal i.f{background:var(--accent);transform:scale(.92)}
.cal i.g{background:#F1F1ED;transform:scale(.92)}

/* índice compacto */
.index{margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--ink)}
.index-row{display:grid;grid-template-columns:110px minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1.2fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;align-items:baseline;transition:padding .35s var(--ease-out),background-color .3s}
.index-row:hover{padding-left:12px;background:var(--surface)}
.index-row .y{font:500 12px/1 var(--f-mono);color:var(--muted)}
.index-row b{font-weight:600}
.index-row span{color:var(--ink-2)}
.index-head{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.index-head:hover{padding-left:0;background:none}

/* demo copiloto */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center;background:var(--surface);border-radius:28px;padding:clamp(24px,4vw,56px);border:1px solid var(--line)}
.demo h2{font-size:clamp(32px,4vw,56px);margin:14px 0 18px}
.demo p{color:var(--ink-2);max-width:46ch}
.chips{display:flex;flex-direction:column;gap:8px;margin-top:28px}
.chip{text-align:left;font:500 14px/1.35 var(--f-body);padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;transition:border-color .2s,transform .3s var(--ease-out),background-color .2s}
.chip:hover{border-color:var(--accent);transform:translateX(4px)}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
.chip:disabled{opacity:.5;cursor:default;transform:none}
.demo-note{margin-top:16px;font:400 12px/1.4 var(--f-mono);color:var(--muted)}
.demo-phone{justify-self:center;width:100%;max-width:360px;height:560px;max-height:72vh;min-height:440px}
.demo-phone .phone{width:100%;height:100%}
.demo-phone .thread{justify-content:flex-start;overflow-y:auto;scrollbar-width:none}
.demo-phone .msg{font-size:13.5px}

/* archivo */
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;cursor:grab;scrollbar-width:thin;overscroll-behavior-x:contain}
.strip.drag{cursor:grabbing;scroll-snap-type:none}
.strip .poster{width:clamp(200px,22vw,280px);scroll-snap-align:start;transition:transform .5s var(--ease-out),box-shadow .5s}
.strip .poster:hover{transform:translateY(-8px) rotate(-1.2deg);box-shadow:0 24px 40px -20px rgba(0,0,0,.4)}
.strip-hint{display:flex;justify-content:space-between;gap:16px;margin-top:6px;font:400 12px/1.4 var(--f-mono);color:var(--muted)}

/* sobre mí */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.portrait{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--sunk);max-width:100%}
.portrait .ph{position:absolute;inset:0;display:grid;place-items:center;background:
  radial-gradient(80% 60% at 50% 35%,color-mix(in srgb,var(--accent) 18%,var(--sunk)),var(--sunk));}
.portrait .ph b{font:800 clamp(80px,14vw,180px)/1 var(--f-display);letter-spacing:-.06em;color:color-mix(in srgb,var(--ink) 12%,transparent)}
.portrait figcaption{position:absolute;left:14px;bottom:14px;right:14px;display:flex;justify-content:space-between;gap:8px;font:500 11px/1.3 var(--f-mono);color:var(--muted)}
.about h2{font-size:clamp(34px,4.4vw,60px);margin:14px 0 24px}
.about-text{display:grid;gap:16px;font-size:18px;color:var(--ink-2);max-width:60ch}
.about-text p:first-child{font-size:clamp(20px,2vw,24px);color:var(--ink);line-height:1.45}
.facts{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:24px;border-top:1px solid var(--line)}
.facts h3{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.facts p{font-size:15px}
.facts small{display:block;color:var(--muted);font-size:13px}

/* trayectoria */
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.3fr);gap:8px 24px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline;position:relative}
.timeline .y{font:500 12px/1.3 var(--f-mono);color:var(--muted)}
.timeline b{font:700 clamp(20px,2vw,26px)/1.1 var(--f-display);letter-spacing:-.025em}
.timeline span{color:var(--ink-2)}
.timeline li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-out)}
.timeline li:hover::before{transform:scaleX(1)}

/* notas */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.post{padding:24px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:28px;justify-content:space-between;min-height:220px;transition:transform .4s var(--ease-out),border-color .3s}
.post:hover{transform:translateY(-4px);border-color:var(--ink)}
.post h3{font-size:22px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.post small{font:500 11px/1 var(--f-mono);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}

/* contacto */
.contact{padding-block:clamp(120px,14vw,200px) clamp(80px,9vw,120px)}
.contact h2{font-size:clamp(48px,9vw,140px);font-weight:800;letter-spacing:-.06em;line-height:.92;max-width:11ch}
.contact h2 em{font-style:normal;color:var(--accent)}
.contact-row{margin-top:48px;display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:28px}
.links{display:flex;flex-wrap:wrap;gap:8px 28px}
.links a{display:inline-flex;gap:6px;align-items:center;min-height:44px;text-decoration:none;font-weight:500}
.links a:hover{color:var(--accent)}
.mail{display:inline-flex;align-items:center;gap:12px;font:500 15px/1 var(--f-mono)}
.mail code{padding:10px 12px;border-radius:10px;background:var(--surface);border:1px dashed var(--line);user-select:all}
footer.foot{max-width:var(--max);margin:0 auto;padding-block:24px 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:13px;color:var(--muted)}

/* revelado al hacer scroll (sin dejar nada invisible en reposo) */
@supports (animation-timeline: view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
}
@keyframes rise{from{opacity:.8;transform:translateY(24px)}}

/* responsive */
@media (max-width:900px){
  .card,.card.wide,.card.narrow{grid-column:span 12}
  .feature .media{aspect-ratio:16/10}
  .demo,.about{grid-template-columns:minmax(0,1fr)}
  .posts{grid-template-columns:minmax(0,1fr)}
  .index-row{grid-template-columns:80px minmax(0,1fr)}
  .index-row span:nth-of-type(n){grid-column:2}
  .index-head{display:none}
  .timeline li{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .reel{aspect-ratio:4/5}
  .tv{width:80%;top:20%}
  .console{left:12%;right:12%}
  .phone{width:min(280px,78%)}
  .arch-cols{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .nav{display:none}
  .names{flex-direction:column;align-items:flex-start;gap:14px}
  .marquee{width:100%}
}


/* ===== Capa mínima ===== */
:root{--scene:var(--accent);--r-lg:10px;--r-md:8px}
body{font-size:16px;line-height:1.65}
h1,h2,h3{font-family:var(--f-display);font-weight:500;letter-spacing:-.025em;line-height:1.12}
.eyebrow{font-size:11px;letter-spacing:.06em}
.progress{height:1px;background:var(--scene);transition:background-color .9s}
.top{background:color-mix(in srgb,var(--paper) 90%,transparent)}
.top-in{min-height:72px}
.mono-mark{width:10px;height:10px;border-radius:50%;background:var(--scene);font-size:0;transition:background-color .9s,transform .5s var(--ease-out)}
.brand:hover .mono-mark{background:var(--scene);transform:scale(1.6)}
.brand{font-weight:500}
.nav a{color:var(--muted)}
.icon-btn{border:0}
.btn{min-height:auto;padding:0;border:0;border-radius:0;background:none!important;color:var(--ink)!important;font-weight:500;position:relative}
.btn::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(.25);transform-origin:0 50%;transition:transform .45s var(--ease-out)}
.btn:hover::after{transform:scaleX(1)}
.btn-ghost{color:var(--muted)!important}
.ctas{gap:28px}
.live i{width:6px;height:6px;background:var(--scene);transition:background-color .9s}

.hero{padding-block:clamp(72px,12vw,160px) 0}
.hero h1{font-size:clamp(32px,4.6vw,56px);font-weight:500;letter-spacing:-.035em;line-height:1.08;max-width:none}
.hero h1 .soft{color:var(--muted);font-weight:400}
.inline-reel{width:1.5em;height:.78em;border-radius:6px}
.hero-row{margin-top:28px}
.lead{font-size:17px;color:var(--ink-2);max-width:52ch}
.lead strong{font-weight:500;color:var(--ink)}
.reel{border-radius:10px;margin-top:clamp(56px,7vw,96px)}
.reel-ui{background:linear-gradient(to top,rgba(0,0,0,.35),transparent)}
.reel-cap b{font-weight:500}
.reel-bars button i{height:2px}
.reel-pause{border:0;background:rgba(0,0,0,.2)}

.names{border:0;padding-block:8px;margin-top:40px}
.marquee li{font:400 15px/1 var(--f-body);letter-spacing:0;color:var(--muted);gap:28px}
.marquee ul{gap:28px;animation-duration:60s}
.marquee li::after{width:3px;height:3px;background:var(--scene);transition:background-color .9s}

.sec{padding-block:clamp(112px,14vw,184px) 0}
.sec-head{margin-bottom:36px}
.sec-head h2{font-size:clamp(22px,2.2vw,28px);max-width:none}
.sec-head p{color:var(--muted);font-size:15px;max-width:44ch}
.card,.card.wide,.card.narrow{grid-column:span 6}
.card.feature{grid-column:span 12}
.work{row-gap:64px}
.media{border-radius:10px}
.feature .media{aspect-ratio:16/8}
.card h3{font-size:20px;font-weight:500;letter-spacing:-.015em}
.card-meta{gap:4px 16px}
.card .result{font-size:15px;color:var(--muted)}
.card .result strong{font-weight:500;color:var(--ink-2)}
.card .role{display:none}
.status{background:rgba(255,255,255,.85);color:#141414;font-size:10px}
.status i{background:var(--scene);transition:background-color .9s}
.view-pill{padding:8px 12px;font-size:12px;box-shadow:none}
.quote{border-left:1px solid var(--scene);font-size:14px;color:var(--muted)}
.index{border-top:1px solid var(--line)}
.index-row{font-size:14px;padding:13px 0}
.index-row:hover{background:none;padding-left:8px}
.index-row b{font-weight:500}
.index-row span{color:var(--muted)}

.demo{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:56px 0 0}
.demo h2{font-size:clamp(22px,2.2vw,28px);margin:10px 0 12px}
.demo p{font-size:15px;color:var(--muted)}
.chip{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0;font-weight:400;color:var(--ink-2)}
.chip:hover{transform:translateX(6px);border-color:var(--scene);color:var(--ink)}
.chip[aria-pressed="true"]{background:none;color:var(--ink);border-color:var(--ink)}
.chips{gap:0}
.phone{border-radius:28px;box-shadow:0 30px 60px -40px rgba(0,0,0,.4)}

.strip .poster{width:clamp(180px,18vw,220px);border-radius:6px}
.strip .poster:hover{transform:translateY(-6px);box-shadow:none}

.about{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.portrait{border-radius:10px}
.portrait .ph{background:var(--sunk)}
.portrait .ph b{font-size:clamp(48px,7vw,88px);font-weight:500;color:color-mix(in srgb,var(--ink) 14%,transparent)}
.about h2{font-size:clamp(24px,2.6vw,32px);margin:10px 0 20px}
.about-text{font-size:16px;color:var(--ink-2)}
.about-text p:first-child{font-size:19px}
.facts{border-top:1px solid var(--line)}

.timeline{border-top:1px solid var(--line)}
.timeline li{padding:14px 0;grid-template-columns:130px minmax(0,1fr) minmax(0,1.3fr)}
.timeline b{font:500 16px/1.4 var(--f-body);letter-spacing:0}
.timeline span{color:var(--muted);font-size:15px}
.timeline li::before{background:var(--scene)}

.posts{gap:0;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.post{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;min-height:0;padding:18px 0;flex-direction:row-reverse;align-items:baseline;gap:24px}
.post:hover{transform:translateX(6px)}
.post h3{font-size:17px;font-weight:400}

.contact h2{font-size:clamp(32px,4.6vw,56px);font-weight:500;letter-spacing:-.035em;max-width:16ch}
.contact h2 em{color:var(--scene);transition:color .9s}
.contact-row{border-top:1px solid var(--line)}
.mail code{background:none;border:0;padding:0}


@media (max-width:900px){
  .card,.card.wide,.card.narrow{grid-column:span 12}
  .about{grid-template-columns:minmax(0,1fr)}
  .portrait{max-width:280px}
  .timeline li{grid-template-columns:minmax(0,1fr)}
}

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

/* ===== utilidades ===== */
.rel{position:relative}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px}
.skip:focus{left:max(16px,env(safe-area-inset-left,0px))}
.strip-hint a{color:inherit;text-decoration:none}
.strip-hint a:hover{color:var(--ink)}

/* ===== páginas de caso ===== */
.case-page{padding-block:clamp(40px,6vw,72px) 0}
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);text-decoration:none;margin-bottom:clamp(40px,6vw,72px)}
.back:hover{color:var(--ink)}
.back svg{transition:transform .35s var(--ease-out)}
.back:hover svg{transform:translateX(-3px)}
.case-head h1{font-size:clamp(40px,6vw,72px);font-weight:500;letter-spacing:-.04em;margin:14px 0 0;width:fit-content}
.case-lede{margin-top:18px;font-size:clamp(20px,2.2vw,26px);line-height:1.35;color:var(--ink-2);max-width:30ch;text-wrap:balance}
.case-intro{margin-top:20px;max-width:60ch;color:var(--muted)}
.facts-row{margin:40px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;border-top:1px solid var(--line);padding-top:20px}
.facts-row dt{font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.facts-row dd{margin:0;font-size:15px}
.case-hero{margin-top:clamp(40px,6vw,64px);aspect-ratio:16/8}
.cap{margin-top:12px;font:400 12px/1.5 var(--f-mono);color:var(--muted)}
.cs{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:16px 48px;padding-block:clamp(72px,9vw,120px) 0}
.cs-label{font:500 12px/1.4 var(--f-mono);letter-spacing:.04em;color:var(--muted);position:sticky;top:96px;align-self:start}
.cs-body{display:grid;gap:18px;min-width:0}
.cs-body h2{font-size:clamp(24px,2.8vw,34px);font-weight:500;letter-spacing:-.03em;max-width:24ch}
.cs-body>p{max-width:62ch;color:var(--ink-2)}
.big-stat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;align-items:baseline;padding:24px 0;border-block:1px solid var(--line);margin-top:8px}
.big-stat b{font:500 clamp(48px,7vw,88px)/1 var(--f-display);letter-spacing:-.05em;color:var(--scene)}
.big-stat p{color:var(--ink-2);max-width:40ch}
.big-stat small{grid-column:1/-1;font:400 12px/1.4 var(--f-mono);color:var(--muted)}
.actors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:8px}
.actors div{border-top:1px solid var(--line);padding-top:14px}
.actors b{display:block;font-weight:500;margin-bottom:4px}
.actors p{font-size:15px;color:var(--muted)}
.decisions{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line);counter-reset:d}
.decisions li{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr);gap:8px 24px;padding:22px 0;border-bottom:1px solid var(--line);counter-increment:d;transition:padding .35s var(--ease-out)}
.decisions li:hover{padding-left:8px}
.decisions li::before{content:counter(d,decimal-leading-zero);font:500 12px/1.9 var(--f-mono);color:var(--muted)}
.decisions h3{font-size:18px;font-weight:500;letter-spacing:-.015em;line-height:1.35}
.decisions p{font-size:15px;color:var(--ink-2)}
.decisions .cost{grid-column:3;font-size:14px;color:var(--muted)}
.decisions .cost em{display:block;font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;margin-bottom:6px;color:var(--scene)}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:8px}
.roles div{border-top:1px solid var(--line);padding-top:14px}
.roles b{display:block;font-weight:500;margin-bottom:4px}
.roles p{font-size:15px;color:var(--muted)}
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:8px}
.results div{border-top:1px solid var(--ink);padding-top:14px}
.results b{display:block;font:500 clamp(28px,3vw,40px)/1 var(--f-display);letter-spacing:-.04em;margin-bottom:10px}
.results p{font-size:14px;color:var(--muted)}
.learn{margin-top:16px;padding:28px 0 0;border-top:1px solid var(--line);font-size:clamp(20px,2.2vw,26px);line-height:1.4;color:var(--ink);max-width:34ch;text-wrap:balance}
.learn small{display:block;font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pull{margin:8px 0 0;padding-left:18px;border-left:2px solid var(--scene);font-size:clamp(20px,2.2vw,26px);line-height:1.4;max-width:34ch}
.pull cite{display:block;margin-top:10px;font:500 12px/1.4 var(--f-mono);color:var(--muted);font-style:normal}
.fig{margin:8px 0 0;border-radius:10px;background:var(--sunk);overflow:hidden;position:relative}
.sources{font:400 12px/1.6 var(--f-mono);color:var(--muted)}
.sources a{color:inherit}
.next{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:clamp(96px,12vw,160px);padding-top:28px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.next span{font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.next b{display:block;margin-top:10px;font:500 clamp(36px,6vw,72px)/1 var(--f-display);letter-spacing:-.045em;transition:color .3s}
.next:hover b{color:var(--scene)}
.next svg{transition:transform .45s var(--ease-out)}
.next:hover svg{transform:translateX(8px)}
.case-cta{display:flex;flex-wrap:wrap;gap:28px;margin-top:8px}

/* artefacto: OT + copiloto (Fluxput) */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:clamp(20px,4vw,48px);background:radial-gradient(120% 100% at 0% 0%,var(--accent-soft),var(--sunk) 65%)}
.pane{background:var(--surface);border-radius:20px;border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0;box-shadow:0 30px 60px -40px rgba(0,0,0,.35)}
.pane-top{display:flex;justify-content:space-between;align-items:center;font:500 11px/1 var(--f-mono);color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:var(--accent-soft);color:var(--ink);font:500 11px/1 var(--f-mono)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--scene)}
.pane h4{margin:4px 0 0;font:500 18px/1.25 var(--f-display);letter-spacing:-.02em}
.task{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.task i{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);flex:none}
.task.done i{background:var(--ink);border-color:var(--ink)}
.task.done{color:var(--muted);text-decoration:line-through}
.pane .sign{margin-top:auto;padding:12px;border-radius:12px;background:var(--ink);color:var(--paper);text-align:center;font-size:13.5px;font-weight:500}
.pane .msg{animation:none}
.nosrc{margin-top:7px;padding-top:7px;border-top:1px solid var(--line);font:500 10.5px/1.2 var(--f-mono);color:var(--accent)}

/* artefacto: rejilla 10-foot (WindowSight) */
.tvgrid{padding:clamp(20px,4vw,48px);background:#151517}
.tvgrid-in{aspect-ratio:16/9;max-width:820px;margin:0 auto;background:#0B0B0C;border-radius:6px;padding:4% 4% 3%;display:grid;grid-template-rows:auto 1fr;gap:4%;color:#EDEDEA;position:relative}
.tvgrid-head{display:flex;justify-content:space-between;align-items:baseline;font:500 clamp(9px,1.2vw,13px)/1 var(--f-body);color:rgba(237,237,234,.7)}
.tvgrid-head b{font:500 clamp(13px,1.8vw,20px)/1 var(--f-display);color:#EDEDEA;letter-spacing:-.02em}
.tvrows{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3%;align-content:start}
.tvrows canvas{width:100%;aspect-ratio:16/10;border-radius:3px;display:block;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),opacity .4s}
.tvrows canvas.dim{opacity:.55}
.tvrows canvas.focus{transform:scale(1.12);box-shadow:0 0 0 2px #EDEDEA,0 12px 24px rgba(0,0,0,.6);opacity:1;position:relative;z-index:2}
.tvlabel{position:absolute;left:4%;bottom:4%;font:500 clamp(8px,1vw,11px)/1.3 var(--f-mono);color:rgba(237,237,234,.7)}
.remote{position:absolute;right:4%;bottom:4%;display:grid;grid-template-columns:repeat(3,10px);grid-template-rows:repeat(3,10px);gap:2px}
.remote i{border-radius:2px;background:rgba(237,237,234,.12);transition:background-color .2s}
.remote i.on{background:#EDEDEA}

/* artefacto: flujo (Vecinfy) */
.flow{list-style:none;margin:0;padding:clamp(20px,4vw,40px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:f}
.flow li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0;position:relative;counter-increment:f;opacity:.45;transform:translateY(6px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),border-color .5s}
.flow li.on{opacity:1;transform:none;border-color:var(--scene)}
.flow li::before{content:counter(f,decimal-leading-zero);font:500 11px/1 var(--f-mono);color:var(--muted)}
.flow b{font-weight:500;font-size:15px;line-height:1.3}
.flow p{font-size:13px;color:var(--muted);line-height:1.45}
.flow .viz{height:38px;display:flex;align-items:center;gap:3px}
.flow .viz i{display:block;border-radius:2px;background:var(--line)}
.flow li.on .viz i{background:var(--scene)}

@media (max-width:900px){
  .facts-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs{grid-template-columns:minmax(0,1fr)}
  .cs-label{position:static}
  .actors,.results{grid-template-columns:minmax(0,1fr)}
  .roles{grid-template-columns:minmax(0,1fr)}
  .decisions li{grid-template-columns:32px minmax(0,1fr)}
  .decisions .cost{grid-column:2}
  .duo{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-hero{aspect-ratio:4/5}
}
@media (prefers-reduced-motion: reduce){.flow li{opacity:1;transform:none}}
.case-page{--accent-soft:color-mix(in srgb,var(--scene) 14%,var(--paper))}
.reel{cursor:pointer}
.reel-cap{text-decoration:none;color:inherit;display:block}
.reel-go{display:inline-block;transition:transform .35s var(--ease-out)}
.reel:hover .reel-go,.reel-cap:focus-visible .reel-go{transform:translateX(6px)}
.reel .doc-stage .doc{max-width:300px}

/* ===== Logotipo MV «Flujo» ===== */
.mv-logo{flex:none;display:block;overflow:visible}
.mv-logo .mv-fin{transition:stroke .9s}
.mv-logo .mv-inicio,.mv-logo .mv-fin{transform-box:fill-box;transform-origin:center}
.mv-play .mv-logo .mv-linea{stroke-dasharray:1;animation:mvLinea 1.6s cubic-bezier(.65,0,.35,1) .35s both}
.mv-play .mv-logo .mv-inicio{animation:mvNodo .35s ease-out both}
.mv-play .mv-logo .mv-fin{animation:mvNodo .35s ease-out 1.9s both}
@keyframes mvLinea{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mvNodo{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.brand:hover .mv-logo .mv-fin{transform:scale(1.25);transition:transform .4s var(--ease-out),stroke .9s}
@media (prefers-reduced-motion: reduce){.mv-play .mv-logo *{animation:none!important}}