@font-face{font-family:"Wallop";src:url("../assets/fonts/WallopVF-TRIAL.woff2") format("woff2-variations"),url("../assets/fonts/WallopVF-TRIAL.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Matter XH mono";src:url("../assets/fonts/MatterXHMono-TRIAL-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Matter XH mono";src:url("../assets/fonts/MatterXHMono-TRIAL-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Matter XH mono";src:url("../assets/fonts/MatterXHMono-TRIAL-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
/* Layout: minimal en blanco. El trabajo siempre visible (rejilla de 2 col), archivo con miniaturas,
   about y contacto sobrios. El motion vive en la carga, el scroll y los hovers como capa extra, nunca como requisito. */
:root{
  color-scheme: light;
  --blanco:#FFFFFF;
  --negro:#000000;
  --azul-285:#0078FF;
  --azul-2728:#0050FF;
  --azul-072:#0000FF;
  --gris:#6E7385;
  --gris-2:#A3A7B5;
  --hueso:#F3F4F7;
  --linea:rgba(0,0,0,.1);
  /* Wallop y Matter XH mono: versiones TRIAL del paquete de Sin Tesis. Cambiar por las de licencia web antes de publicar. */
  --f-display:"Wallop","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Matter XH mono",ui-monospace,"SFMono-Regular","Courier New",monospace;
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --sec:clamp(112px,13vw,200px);
  --t-xl:clamp(38px,5.8vw,100px);   /* una sola escala para las frases de marca */
  --gap-head:clamp(40px,5vw,72px);
}
*{box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html:not(.lenis){scroll-behavior:smooth}
body{margin:0;background:var(--blanco);color:var(--negro);font-family:var(--f-display);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
/* Wallop trae alternos para P R W w m n en ss01: se activan solo en titulares. */
h1,.lead,.contact .big,.card h3,.arow .t{font-feature-settings:"ss01" 1,"kern" 1}
img,video{max-width:100%;display:block}
::selection{background:var(--azul-072);color:var(--blanco)}
a{color:inherit;text-decoration:none}
button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:1.5px solid var(--azul-2728);outline-offset:4px;border-radius:1px}
.wrap{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));max-width:1680px;margin-inline:auto}
.m{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;color:var(--gris);font-variant-numeric:tabular-nums;font-weight:400}
/* Subrayado que entra por la izquierda y sale por la derecha */
.ul{background:linear-gradient(currentColor,currentColor) right bottom/0 1px no-repeat;transition:background-size .5s var(--ease)}
.ul:hover,.ul[aria-current="true"]{background-position:left bottom;background-size:100% 1px}
.media{position:relative;overflow:hidden;background:var(--hueso);isolation:isolate}
.media>canvas,.media>video,.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media>img,.media>video{opacity:0;transition:opacity .8s var(--ease)}
.media>img.ok,.media>video.ok{opacity:1}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
section{scroll-margin-top:72px}
.idx{font-family:var(--f-mono);font-size:11.5px;color:var(--gris-2);margin-right:14px;font-variant-numeric:tabular-nums}

/* Motion de scroll: parte de un estado visible y solo se acomoda. */
.rv{transition:transform 1.2s var(--ease),opacity 1.2s var(--ease)}
.js .rv:not(.in){transform:translateY(24px);opacity:.4}
.js .media.rv{transition:clip-path 1.4s var(--ease-io)}
.js .media.rv:not(.in){clip-path:inset(0 0 16% 0)}
.media.rv>*{transition:transform 1.8s var(--ease),opacity .8s var(--ease)}
.js .media.rv:not(.in)>*{transform:scale(1.1)}

/* ───────── POINTER: matatena chica ───────── */
.cursor{position:fixed;left:0;top:0;z-index:400;pointer-events:none;opacity:0;transition:opacity .3s;color:var(--negro)}
.cursor.on{opacity:1}
.cursor.inv{color:var(--blanco)}
.cur-ico{position:absolute;left:0;top:0;width:15px;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1);transition:transform .35s var(--ease)}
.cur-ico svg{display:block;width:100%;height:auto}
.cursor.link .cur-ico{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1.55)}
.cursor.view .cur-ico{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1.3)}
.cur-lbl{position:absolute;left:14px;top:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.02em;white-space:nowrap;padding:3px 6px;background:var(--negro);color:var(--blanco);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .35s var(--ease)}
.cursor.inv .cur-lbl{background:var(--blanco);color:var(--negro)}
.cursor .cur-lbl{display:none}
.cursor.view{color:var(--azul-072)}
.cursor.view.inv{color:var(--blanco)}
.has-cursor,.has-cursor a,.has-cursor button{cursor:none}

/* ───────── SCAN del logotipo (Logotipo_Scan del toolkit) ───────── */
.scan{position:absolute;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s}
.scan.on{opacity:1}
.scan-grid{position:absolute;inset:0;border:1px solid rgba(0,0,0,.35);background-image:linear-gradient(rgba(0,0,0,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.2) 1px,transparent 1px);background-size:var(--cell) var(--cell)}
.scan-bar{position:absolute;top:0;bottom:0;left:0;width:0;background:rgba(0,80,255,.08);border-inline:1px solid var(--azul-2728);transition:transform .14s var(--ease),width .14s var(--ease)}
.scan-read{position:absolute;left:0;bottom:calc(100% + 8px);font-family:var(--f-mono);font-size:var(--rs,9px);line-height:1.3;white-space:pre;color:var(--negro);transition:transform .14s var(--ease)}
.scan-alt{font-family:var(--f-display);font-weight:100;text-anchor:middle;fill:#8a8a8a}
.gd{overflow:visible}
/* ───────── PILA DE TRABAJOS (slide 1) ───────── */
.st{position:relative;height:clamp(260px,36vw,520px);display:flex;align-items:center;justify-content:center;margin:0 0 var(--gap-head);overflow:hidden}
.st-text{position:relative;z-index:1;font-family:var(--f-mono);font-size:clamp(20px,2.8vw,48px);letter-spacing:-.01em;white-space:pre}
.st-caret{position:relative;z-index:1;display:inline-block;width:2px;height:clamp(22px,3vw,52px);margin-left:3px;background:var(--azul-2728);animation:caret 1s steps(1) infinite}
.st-stack{position:absolute;left:50%;top:50%;width:0;height:clamp(150px,20vw,300px);transform:translate(0,-50%);z-index:2}
.st-img{position:absolute;left:0;top:50%;overflow:hidden;background:var(--hueso);animation:stPop .28s var(--ease) both}
.st-img img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes stPop{from{opacity:0;scale:.86}}

/* ───────── ÍCONO POR PIEZAS (slide 5) ───────── */
.ib{display:block;width:100%;height:auto;overflow:visible}
.ib-parts line{stroke-linecap:butt}

/* ───────── GLIFOS DE LA "O" (slide 11) ───────── */
.oglyph{display:inline-block;width:.6em;height:.6em;vertical-align:-.01em;margin-inline:.03em}
.oglyph svg{display:block;width:100%;height:100%}

/* ───────── NAV ───────── */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--blanco) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);transition:transform .6s var(--ease),box-shadow .4s,background-color .4s,color .4s}
.nav.hide{transform:translateY(-100%)}
.nav.lined{box-shadow:0 1px 0 var(--linea)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--blanco)}
.nav .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:center;padding-block:18px}
.navlogo{grid-column:1;justify-self:start;display:block;width:46px;color:var(--negro);align-self:center}
.navlogo svg{display:block;width:100%;height:auto}
.nav ul{grid-column:2;justify-content:center;display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{position:relative;font-size:14.5px}
.nav ul a sup{font-family:var(--f-mono);font-size:9px;color:var(--gris-2);margin-right:3px;vertical-align:.5em}
.nav .meta{grid-column:10/-1;display:flex;justify-content:flex-end;gap:18px}
.progress{position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--azul-2728);transform-origin:left;transform:scaleX(var(--sp,0))}

/* ───────── HERO: logotipo + marco ───────── */
.hero{position:relative;height:280vh;margin-top:calc(-1 * var(--navh,73px))}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.hero-logo{width:min(88vw,1500px);color:var(--negro);position:relative;z-index:1;transform:translateX(var(--optx,0px))}
.hero-pin .scan{z-index:0}
.hero-logo svg{display:block;width:100%;height:auto;overflow:visible}
.hero-logo .gL,.hero-logo .gR{transition:none;will-change:transform}
.lg-sym{font-family:var(--f-display);font-weight:500;fill:currentColor;text-anchor:middle;dominant-baseline:alphabetic}
.marco{position:absolute;z-index:2;border:solid var(--negro);border-width:var(--bw,12px);background:var(--blanco);overflow:hidden;pointer-events:none;opacity:0;box-sizing:border-box}
.marco.on{opacity:1}
.marco .media{position:absolute;inset:0;background:var(--negro)}
.hero-hint{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--negro);letter-spacing:.08em;transition:opacity .4s}
.hint-line{display:block;width:1px;height:46px;background:rgba(0,0,0,.15);position:relative;overflow:hidden}
.hint-line::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--negro);transform:translateY(-100%);animation:hintdrop 1.8s var(--ease-io) infinite}
@keyframes hintdrop{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.hint-line::after{animation:none;transform:none}}

/* ───────── INTRO ───────── */
.intro{padding-block:var(--sec) 0}
.intro-h{grid-column:1/-1;margin:0;font-weight:300;font-size:var(--t-xl);line-height:1;letter-spacing:-.045em;max-width:15ch;text-wrap:balance}
.intro-p{grid-column:1/6;margin:var(--gap-head) 0 0;color:var(--gris);max-width:44ch;font-size:15.5px}
.ico-inline{display:inline-block;width:.86em;vertical-align:-.02em;color:var(--azul-2728)}
.ico-inline svg{display:block;width:100%;height:auto;transform:rotate(var(--g,0deg));transition:transform .2s linear}

/* Identidad verbal: imagen dentro de la frase y la o-diana */
.verbal{margin:0 0 var(--gap-head);font-weight:500;font-size:var(--t-xl);line-height:1;letter-spacing:-.04em}
.chip{display:inline-block;width:1.05em;height:.78em;vertical-align:-.02em;margin-inline:.04em;border-radius:2px}
.target{display:inline-block;width:.6em;height:.6em;border-radius:50%;vertical-align:-.02em;margin-inline:.02em;background:radial-gradient(circle,currentColor 0 18%,transparent 19% 38%,currentColor 39% 54%,transparent 55% 72%,currentColor 73% 100%)}
.chip{transition:width .9s var(--ease)}
.chip.cut{width:1.1em;height:.95em;vertical-align:-.1em;background:none!important;border-radius:0;overflow:visible}
.chip.cut img{width:100%;height:100%;object-fit:contain;transform:scale(1.12)}
.target{transition:transform 1s var(--ease)}
.dword.pre .target{transform:scale(.4) rotate(-180deg)}
.dword{white-space:nowrap}
.ch{display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ───────── ENCABEZADOS DE SECCIÓN ───────── */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;margin-bottom:var(--gap-head);position:relative}
.sec-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linea);transform-origin:left;transition:transform 1.4s var(--ease-io)}
.js .sec-head:not(.in)::after{transform:scaleX(.15)}
.sec-head h2{margin:0;font-weight:400;font-size:15px}

/* ───────── TRABAJO ───────── */
.work{padding-top:var(--sec)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 16px}
.card{display:flex;flex-direction:column;gap:14px;min-width:0}
.card .media{aspect-ratio:4/3;max-width:100%}
.card .media>*{will-change:transform}
.card:hover .media>*{transform:scale(1.04);transition:transform 1.4s var(--ease)}
/* Marco de marca: el borde de la O cuadrada abraza la pieza al pasar */
.card .media::after{content:"";position:absolute;inset:0;border:0 solid var(--blanco);transition:border-width .6s var(--ease);z-index:2;pointer-events:none}
.card:hover .media::after{border-width:clamp(10px,1.4vw,18px)}
.card-info{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;align-items:baseline}
.card h3{margin:0;font-weight:400;font-size:clamp(18px,1.55vw,23px);letter-spacing:-.018em;display:flex;align-items:baseline;gap:8px}
.card h3 .arr{display:inline-block;color:var(--azul-2728);font-size:.85em;opacity:0;transform:translate(-6px,4px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.card:hover h3 .arr{opacity:1;transform:none}
.card .m.r{text-align:right}

/* ───────── ARCHIVO ───────── */

.filters{position:relative;display:flex;flex-wrap:wrap;gap:10px 22px;margin:-6px 0 14px;padding-bottom:8px}
.subfilters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;max-height:0;opacity:0;overflow:hidden;transform:translateY(-6px);transition:max-height .5s var(--ease),opacity .4s var(--ease),transform .5s var(--ease),margin .5s var(--ease)}
.subfilters:not(.on){margin-bottom:14px}
.subfilters.on{max-height:200px;opacity:1;transform:none}
.subfilters button{background:none;border:1px solid var(--linea);border-radius:999px;padding:6px 12px 5px;font:inherit;font-size:13.5px;color:var(--gris);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.subfilters button sup{font-family:var(--f-mono);font-size:9px;margin-left:3px;vertical-align:.5em}
.subfilters button:hover{color:var(--negro);border-color:var(--negro)}
.subfilters button[aria-pressed="true"]{background:var(--negro);border-color:var(--negro);color:var(--blanco)}
.cmp{position:fixed;left:50%;bottom:16px;z-index:60;display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;background:var(--negro);color:var(--blanco);border-radius:999px;transform:translate(-50%,140%);transition:transform .5s var(--ease);max-width:calc(100vw - 24px)}
.cmp.on{transform:translate(-50%,0)}
.cmp .m{color:rgba(255,255,255,.75);font-size:11px;white-space:nowrap}
@media (max-width:620px){.cmp .m{font-size:10px}.cmp{gap:6px;padding:6px 8px 6px 12px}}
.cmp button{background:none;border:1px solid rgba(255,255,255,.4);color:var(--blanco);border-radius:999px;font:inherit;font-size:12.5px;padding:4px 12px;cursor:pointer}
.cmp button[aria-pressed="true"]{background:var(--blanco);color:var(--negro);border-color:var(--blanco)}
.filters button{background:none;border:0;padding:0;font:inherit;font-size:15px;color:var(--gris-2);cursor:pointer;transition:color .35s}
.filters button sup{font-family:var(--f-mono);font-size:9.5px;margin-left:3px;vertical-align:.55em}
.filters button[aria-pressed="true"],.filters button:hover{color:var(--negro)}
.filters .bar{position:absolute;bottom:0;height:1px;background:var(--negro);left:var(--bl,0);width:var(--bw,0);transition:left .55s var(--ease),width .55s var(--ease),top .55s var(--ease)}
.alist{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.arow{position:relative;display:grid;grid-template-columns:76px minmax(0,4fr) minmax(0,3fr) minmax(0,3fr) minmax(0,1fr);gap:16px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--linea)}
/* resalte gris translúcido del ancho exacto de las líneas; el contenido lleva margen interno para no pegarse al borde */
.arow::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-1px;background:rgba(10,10,30,.06);opacity:0;transition:opacity .18s linear;z-index:-1}
.arow:hover::before{opacity:1}
.alist{position:relative;z-index:0}
.arow .media{aspect-ratio:16/10;width:76px;max-width:100%}
.arow .t{font-size:17px;letter-spacing:-.012em;min-width:0}
.arow span{min-width:0}
.arow .y{text-align:right}
.arow.out{display:none}
.arow.flash{animation:fade .6s var(--ease) both}

/* ───────── ESTUDIO: sección en azul Componente (072 C) ───────── */
.archive{padding-top:var(--sec)}
.about{margin-top:var(--sec);padding-block:clamp(72px,9vw,140px) clamp(64px,7vw,110px);background:var(--azul-072);color:var(--blanco)}
.about ::selection{background:var(--blanco);color:var(--azul-072)}
.nav.ondark{background:#000;color:var(--blanco)}
.nav.ondark .navlogo{color:var(--blanco)}
.nav.ondark.lined{box-shadow:0 1px 0 rgba(255,255,255,.2)}
.about .m{color:rgba(255,255,255,.72)}
.about .sec-head::after{background:rgba(255,255,255,.3)}
.about .ico-inline{color:var(--blanco)}
.about .node p,.about .node h3{color:var(--blanco)}
.about .map-ico{color:var(--blanco)}
.about .map.hov .map-ico{color:var(--blanco)}
.about .map-lines line{stroke:rgba(255,255,255,.9)}
.about .map-lines line.hot{stroke:var(--blanco);stroke-width:2.5}
.about .map-axis{background:var(--azul-072);color:var(--blanco)}
.about .node .media{background:rgba(255,255,255,.12)}
.about .process,.about .people{border-top-color:rgba(255,255,255,.3)}
.about .steps p{color:rgba(255,255,255,.78)}
.about .clist i{color:rgba(255,255,255,.45)}
.about .lead-sub{color:rgba(255,255,255,.8)}
.nav.onblue{background:var(--azul-072);color:var(--blanco)}
.nav.onblue .navlogo{color:var(--blanco)}
.nav.onblue.lined{box-shadow:0 1px 0 rgba(255,255,255,.25)}
.about .lead{margin:0;font-weight:300;font-size:var(--t-xl);line-height:1;letter-spacing:-.045em;max-width:15ch;text-wrap:balance}
.lead-sub{margin:28px 0 0;max-width:46ch;color:var(--gris);font-size:15.5px}

/* Mapa de servicios: la matatena al centro, una disciplina por diagonal */
.map{position:relative;aspect-ratio:16/11;max-width:100%;margin:clamp(56px,7vw,112px) 0 0}
.map-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}
.map-lines line{stroke:var(--negro);stroke-width:1.2}
.map-lines line.hot{stroke:var(--azul-2728);stroke-width:1.5}
.map-ico{position:absolute;left:50%;top:50%;width:25%;aspect-ratio:4/5;z-index:2;transform:translate(-50%,-50%) rotate(var(--vr,0deg));background:#1d1b1c;box-shadow:0 30px 80px -30px rgba(0,0,40,.55);transition:transform .2s linear}
.map-ico video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(var(--vs,1.04));transition:transform 1.2s var(--ease)}
.map.hov .map-ico video{--vs:1.12}
.map-ico-tag{position:absolute;left:0;top:calc(100% + 10px);white-space:nowrap;opacity:.8}
.map.hov .map-ico{color:var(--azul-2728)}
.map-axis{position:absolute;left:50%;transform:translateX(-50%);z-index:2;background:var(--blanco);padding-inline:8px;color:var(--negro)}
.map-axis.top{top:0}.map-axis.bot{bottom:0}
.node{position:absolute;width:27%;z-index:1;display:flex;flex-direction:column;gap:12px;transition:opacity .4s var(--ease)}
.node .media{aspect-ratio:16/10;width:100%;max-width:100%}
.node .media>*{transition:transform 1.2s var(--ease)}
.node:hover .media>*{transform:scale(1.05)}
.node-tx{display:flex;flex-direction:column;gap:6px}
.node h3{margin:0;font-weight:500;font-size:clamp(17px,1.45vw,22px);letter-spacing:-.015em}
.node p{margin:0;font-size:14px;line-height:1.5;color:var(--negro);max-width:34ch}
.n1{left:0;top:0}.n2{right:0;top:0}.n3{left:0;bottom:0}.n4{right:0;bottom:0}
.n2,.n4{align-items:flex-end;text-align:right}.n2 .node-tx,.n4 .node-tx{align-items:flex-end}
.n1,.n2{flex-direction:column-reverse}.n3,.n4{flex-direction:column}
.map.hov .node:not(.on){opacity:.35}

/* Proceso */
.process{margin-top:clamp(96px,11vw,176px);padding-top:16px;border-top:1px solid var(--linea)}
.process-k{display:block;margin-bottom:clamp(28px,3vw,44px)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steps li{display:flex;flex-direction:column;gap:14px;min-width:0}
.steps b{display:block;font-weight:500;font-size:clamp(34px,4.6vw,80px);letter-spacing:-.045em;line-height:1}
.steps p{margin:0;max-width:34ch;color:var(--gris);line-height:1.5}
.steps.stag li>*{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.steps.stag li:not(.on)>*{opacity:0;transform:translateY(18px)}
.steps.stag li.on>.m{transition-delay:0s}.steps.stag li.on>b{transition-delay:.08s}.steps.stag li.on>p{transition-delay:.45s}

/* Clientes: cinta horizontal infinita */
.clients{margin-top:clamp(80px,9vw,140px);border-top:1px solid rgba(255,255,255,.3);padding-top:16px;overflow:hidden}
.clients-h{display:block;padding-inline:16px;margin-bottom:clamp(20px,2.4vw,36px)}
.clients,.marquee,.marquee *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.marquee{display:flex;width:max-content;will-change:transform;cursor:grab;touch-action:pan-y}
.marquee.grab{cursor:grabbing}
.mq-set{display:flex;align-items:center;flex-shrink:0;font-size:clamp(34px,4.6vw,84px)}
.mq-set span{font-weight:400;letter-spacing:-.035em;line-height:1.1;white-space:nowrap;padding-inline:.32em;transition:font-weight .3s}
.mq-set span:hover{font-weight:600}
.mq-set i{display:inline-block;width:.42em;flex-shrink:0;color:#fff;opacity:.9}
.mq-set i svg{display:block;width:100%;height:auto}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee{animation:none;flex-wrap:wrap;width:auto}}

/* ───────── CIERRE + CONTACTO: lockup sobre las seis cuñas del ícono ───────── */
.finale{position:relative;height:360vh;margin-top:0;background:var(--negro)}
.finale-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--negro);color:var(--blanco)}
.wedges{position:absolute;inset:0}
.wedge{position:absolute;inset:0;overflow:hidden;background:var(--negro)}
.wedge>*{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(calc(1.15 - var(--wp,0)*.15))}
/* cada video vive en la zona de su cuña para que el vertical no se recorte de más */
.wedge:nth-child(1)>*{left:46%;top:0;width:54%;height:54%}
.wedge:nth-child(2){background:#e2e2e2}
.wedge:nth-child(2)>*{left:56%;top:0;width:44%;height:100%;-webkit-mask-image:linear-gradient(to right,transparent,#000 10%);mask-image:linear-gradient(to right,transparent,#000 10%)}
.wedge:nth-child(3)>*{left:46%;top:46%;width:54%;height:54%}
.wedge:nth-child(4)>*{left:0;top:46%;width:54%;height:54%}
.wedge:nth-child(5){background:#d3d3d4}
.wedge:nth-child(5)>*{left:0;top:0;width:44%;height:100%;-webkit-mask-image:linear-gradient(to left,transparent,#000 10%);mask-image:linear-gradient(to left,transparent,#000 10%)}
.wedge:nth-child(6)>*{left:0;top:0;width:54%;height:54%}
.rays{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.rays{display:none}
.lockup{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% - var(--lift,0px)));z-index:2;padding-inline:max(16px,3vw);display:flex;flex-direction:column;align-items:center;gap:clamp(22px,4.2vh,56px)}
.finale-pin::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(70% 55% at 50% 50%,rgba(0,0,0,.38),rgba(0,0,0,.08));pointer-events:none;opacity:var(--shade,0)}
.lock-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(18px,2.6vw,52px)}
.lock-row .lock-logo{justify-self:end}
.lock-row .lock-tx{justify-self:start}
.lock-logo{display:block;width:clamp(120px,19vw,440px);color:var(--blanco)}
.lock-logo svg{display:block;width:100%;height:auto}
.lock-ico{display:block;width:clamp(56px,10.5vw,240px);color:var(--blanco);transition:transform .8s var(--ease)}

.lock-ico svg{display:block;width:100%;height:auto;overflow:visible}
.lock-tx{font-weight:500;font-size:clamp(20px,2.9vw,66px);letter-spacing:-.03em;white-space:nowrap;line-height:1}
.lock-url{color:var(--blanco)!important;font-size:clamp(11px,.95vw,18px);letter-spacing:.02em;opacity:.92;text-align:center}
.lock-sub{width:max-content;max-width:100%;white-space:nowrap;text-align:center;line-height:1.8;color:var(--blanco)!important;font-size:clamp(11px,.92vw,17px);letter-spacing:.02em;margin:0;opacity:calc(1 - var(--cb,0))}
.cbar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 16px;align-items:end;padding:18px max(16px, env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));opacity:var(--cb,0);transform:translateY(calc((1 - var(--cb,0))*24px));pointer-events:none}
.cbar.on{pointer-events:auto}
.cbar .m{color:rgba(255,255,255,.72)}
.cb{display:flex;flex-direction:column;gap:8px;min-width:0}
.cb1{grid-column:1/6}.cb2{grid-column:6/9}.cb3{grid-column:9/-1;align-items:flex-end;text-align:right}
.cmail{font-size:clamp(20px,2.2vw,34px);font-weight:300;letter-spacing:-.03em;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) right bottom/0 1px no-repeat;transition:background-size .6s var(--ease)}
.cmail:hover{background-position:left bottom;background-size:100% 1px}
.cbar .copy{color:var(--blanco);border-color:rgba(255,255,255,.4)}
.cbar .copy:not(.cta){background:var(--blanco);color:var(--negro);border-color:var(--blanco)}
.cbar .copy:not(.cta):hover{background:transparent;color:var(--blanco)}
#socials{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
#socials a{font-size:17px;background:linear-gradient(currentColor,currentColor) right bottom/0 1px no-repeat;transition:background-size .5s var(--ease)}
#socials a:hover{background-position:left bottom;background-size:100% 1px}
footer{overflow:clip visible}
.top{background:none;border:0;padding:0;font:inherit;font-family:var(--f-mono);font-size:11.5px;color:var(--blanco);cursor:pointer}

/* Letras que se arman como el logotipo */
.scr .ch{display:inline-block;text-align:center}
.copy{align-self:flex-start;background:none;border:1px solid var(--linea);font:inherit;font-family:var(--f-mono);font-size:11px;padding:6px 10px;cursor:pointer;color:var(--negro);transition:background .3s,color .3s,border-color .3s}

/* ───────── TOAST ───────── */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:90;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--negro);color:var(--blanco);font-family:var(--f-mono);font-size:11.5px;padding:9px 14px;transition:transform .5s var(--ease),opacity .4s}
.toast.on{transform:translate(-50%,0);opacity:1}


/* ───────── PÁGINA DE PROYECTO (inspirada en Sin Tesis) ───────── */
.p-head{position:relative;display:block;height:calc(100svh - var(--navh,73px));min-height:460px;overflow:hidden;color:var(--negro);background:var(--gris-0,#f2f3f7)}
.p-head.dark{color:var(--blanco);background:#000}
.p-head .media{position:absolute;inset:0}
#pHero .media>*{transform:scale(calc(1 + var(--hp,0)*.08))}
.next .media>*{transform:scale(calc(1.12 - var(--np,0)*.12))}
.ph-shade{position:absolute;inset:0;pointer-events:none}
.p-head.dark .ph-shade{background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55))}
.ph-meta{position:absolute;left:0;right:0;top:0;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px;padding:22px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.ph-meta div{border-top:1px solid currentColor;padding-top:12px;min-width:0;display:flex;flex-direction:column;gap:6px;font-family:var(--f-mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;line-height:1.45}
.ph-meta span{opacity:.75}
.ph-meta b{font-weight:400;overflow-wrap:anywhere}
.ph-foot{position:absolute;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:clamp(20px,3vw,40px);z-index:1}
.ph-k{display:block;margin-bottom:10px;opacity:.85;color:inherit}
.ph-title{margin:0;font-weight:500;font-size:clamp(48px,9vw,168px);letter-spacing:-.055em;line-height:.88;text-wrap:balance;max-width:14ch}
#pH1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
#pH1 .w>span{display:inline-block;animation:up 1.1s var(--ease) both}
.p-back{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:clamp(20px,3vw,40px);z-index:1;color:inherit}
.carried .ph-meta,.carried .ph-k{animation:none}
.next{margin-top:var(--sec)}
.next .ph-meta,.next .ph-k{opacity:calc(.25 + var(--np,0)*.75)}
.next .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--azul-2728);transform-origin:left;transform:scaleX(var(--np,0));z-index:2}
.p-intro{padding-block:clamp(80px,10vw,160px) 0}
.p-statement{margin:0 0 clamp(56px,7vw,100px);max-width:22ch;font-weight:400;font-size:clamp(32px,5vw,84px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.p-cols{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr) minmax(0,1.4fr);gap:32px clamp(24px,4vw,64px);border-top:1px solid var(--negro);padding-top:22px}
.p-cols div{display:flex;flex-direction:column;gap:12px;min-width:0}
.p-cols .m{color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
.p-cols p{margin:0;max-width:60ch;font-size:16px;line-height:1.6}
.p-cols ul,.p-cols dl{list-style:none;margin:0;padding:0;font-family:var(--f-mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;line-height:1.6}
.p-cols dt{color:var(--gris);margin-top:10px}.p-cols dt:first-child{margin-top:0}
.p-cols dd{margin:0}
.gallery{padding-top:clamp(96px,12vw,180px);display:flex;flex-direction:column;gap:clamp(48px,6vw,96px)}
.g-row{display:grid;gap:0;overflow:hidden}
.g-row.c1{grid-template-columns:minmax(0,1fr)}
.g-row.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-row.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-row .media{aspect-ratio:16/9;max-width:100%}
.g-row.c2 .media{aspect-ratio:4/5}
.g-row.c3 .media{aspect-ratio:3/4}
/* filas alternadas: una entra por la derecha, la siguiente por la izquierda */
.g-item{transform:translateX(calc((1 - var(--gp,1)) * (36% + var(--i,0) * 18%) * var(--dir,1)))}
#project:not([hidden]) ~ footer{display:none}
@media (max-width:900px){
  .ph-meta{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .p-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pc-about{grid-column:1/-1}
}
@media (max-width:620px){
  .g-row.c3{grid-template-columns:minmax(0,1fr)}
  .g-row.c2 .media,.g-row.c3 .media{aspect-ratio:4/5}
  .ph-meta div{font-size:11px}
  .p-back{display:none}
}

/* Cortina entre vistas */
.curtain{position:fixed;inset:0;z-index:95;background:var(--blanco);pointer-events:none;transform:translateY(100%)}
.curtain.in{transition:transform .6s var(--ease-io);transform:translateY(0)}
.curtain.out{transition:transform .7s var(--ease-io);transform:translateY(-100%)}

/* Fila del archivo clicable completa */
.arow .cover{position:absolute;inset:0;z-index:1}

@media (max-width:900px){
  .p-statement{grid-column:1/-1}
  .p-meta{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .p-text{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .g-row.c3{grid-template-columns:minmax(0,1fr)}
  .g-row.c2 .media,.g-row.c3 .media{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){ .g-item{transform:none} .curtain{display:none} }

@media (max-width:900px){
  .lock-sub{white-space:normal;width:auto;text-wrap:balance}

  .map{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px;padding-top:min(56vw,360px)}
  .map-lines,.map-axis{display:none}
  .map-ico{top:0;width:min(56vw,320px);transform:translate(-50%,0) rotate(var(--vr,0deg))}
  .node{position:relative;inset:auto;width:auto}
  .n1,.n2,.n3,.n4{flex-direction:column}.n2,.n4{align-items:flex-start;text-align:left}.n2 .node-tx,.n4 .node-tx{align-items:flex-start}
  .steps{grid-template-columns:minmax(0,1fr);gap:40px}
  .pcol,.pcol.wide{grid-column:1/-1}
  .cb1{grid-column:1/-1}.cb2{grid-column:1/7}.cb3{grid-column:7/-1}
  .arow{grid-template-columns:64px minmax(0,1fr) minmax(0,1fr) auto}
  .arow .d{display:none}
  .arow .media{width:64px}
}
@media (max-width:620px){
  .map{grid-template-columns:minmax(0,1fr)}
  .lock-row{grid-template-columns:minmax(0,1fr);row-gap:18px;justify-items:center}
  .lock-row .lock-logo,.lock-row .lock-tx{justify-self:center}
  .lock-tx{white-space:normal;text-align:center}
  .cb2,.cb3{grid-column:1/-1;align-items:flex-start;text-align:left}
  .cards{grid-template-columns:minmax(0,1fr);gap:48px}
  .arow{grid-template-columns:56px minmax(0,1fr) auto}
  .arow .c{display:none}
  .arow .media{width:56px}
  .nav .meta{display:none}
  .nav .wrap{grid-template-columns:auto minmax(0,1fr);padding-block:14px}
  .navlogo{width:38px}
  .nav ul{gap:16px;grid-column:2;justify-content:flex-end}
  .nav ul a{font-size:14px}
  .nav ul a sup{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv:not(.in),.js .media.rv:not(.in)>*{transform:none;opacity:1}
  .js .media.rv:not(.in){clip-path:none}
  .hero{height:auto}.hero-pin{position:relative;height:auto;padding-block:120px 80px}
  .finale{height:auto}.finale-pin{position:relative}
}

/* ───────── Lenguaje de movimiento del carrusel ───────── */
.wch{display:inline-block;transition:none}
.caret{display:inline-block;width:.55em;height:1.05em;vertical-align:-.15em;margin-left:2px;background:currentColor;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.dw{display:inline-block;transform:translateX(var(--from,0));opacity:0}
.dw.in{animation:dwIn 1s var(--ease) calc(var(--i)*90ms) forwards, dwFloat 5s ease-in-out calc(1s + var(--i)*90ms) infinite}
@keyframes dwIn{to{transform:none;opacity:1}}
@keyframes dwFloat{0%,100%{transform:translateX(0)}50%{transform:translateX(calc(var(--i)*1.5px - 3px)) translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.dw{opacity:1;transform:none}}


/* ── Estudio: simulación 3D + servicios ── */
.studio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,96px);align-items:start;margin-top:clamp(56px,7vw,112px)}
.pop{position:sticky;top:12vh;margin:0;aspect-ratio:4/5;overflow:hidden;background:#2263c9}
.pop video{display:block;width:100%;height:100%;object-fit:cover}
.pop-logo{position:absolute;left:8%;right:8%;bottom:9%;color:var(--blanco)}
.pop-logo svg{display:block;width:100%;height:auto}
.pop figcaption{position:absolute;left:14px;top:12px;color:var(--blanco);opacity:.85}
.svcs{list-style:none;margin:0;padding:0;display:grid}
.svc{display:grid;grid-template-columns:7.5em minmax(0,1fr);column-gap:24px;row-gap:8px;padding:clamp(22px,3vw,40px) 0;border-top:1px solid rgba(255,255,255,.4)}
.svc:last-child{border-bottom:1px solid rgba(255,255,255,.4)}
.svc>.m:first-child{grid-row:span 3;padding-top:.5em}
.svc h3{margin:0;font-weight:500;font-size:clamp(24px,2.4vw,40px);letter-spacing:-.025em;line-height:1.05;transition:font-weight .3s}
.svc p{margin:0;max-width:40ch;font-size:15px;line-height:1.55}
.svc .tools{opacity:.75}
.svc:not(.core){padding:clamp(14px,1.6vw,22px) 0;row-gap:4px}
.svc:not(.core) h3{font-size:clamp(20px,1.7vw,28px)}
.svc:not(.core) p{font-size:14px;opacity:.85}
.svc.core h3{font-size:clamp(30px,3.2vw,54px)}
.svc.core>.m:first-child{grid-row:span 4}
.svc.core p{font-size:16px;max-width:44ch}
.pipe{grid-column:2;list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pipe li{border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:5px 12px 4px;font-size:12px;line-height:1}
.svc:hover h3{font-weight:600}
.lockup.pre .lock-logo,.lockup.pre .lock-tx,.lockup.pre .lock-url,.lockup.pre .lock-sub{opacity:0!important}
@media (max-width:900px){.studio{grid-template-columns:minmax(0,1fr)}.pop{position:relative;top:0}.svc{grid-template-columns:minmax(0,1fr)}.svc>.m:first-child,.svc.core>.m:first-child{grid-row:auto;padding:0}.pipe{grid-column:1}}
.scan-rd text{font-family:var(--f-mono);fill:var(--negro)}
.scan-g{transition:opacity .3s}
.scan-rd{transition:opacity .25s}
.studio-col{display:grid;gap:clamp(36px,4vw,64px)}
.about-tx{display:grid;gap:1em;font-size:clamp(17px,1.35vw,21px);line-height:1.5;letter-spacing:-.01em;max-width:46ch}
.about-tx p{margin:0;color:rgba(255,255,255,.86)}
.about-tx p:first-child{color:#fff;font-size:1.18em;line-height:1.35;letter-spacing:-.02em}
.about .pop{background:#0a0a0a}
.lock-ico{position:relative}
.lock-ico svg{transition:opacity .25s}
.curve-vid{position:absolute;max-width:none;pointer-events:none;opacity:0;transition:opacity .2s}
.lock-tx .sg-w{display:inline-block}
.lock-tx .sg-o{display:inline-grid;vertical-align:baseline}
.lock-tx .sg-o .oglyph{grid-area:1/1;display:inline-block;width:.56em;height:.56em;margin:0 .015em -.01em;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.lock-tx .sg-o .oglyph svg{display:block;width:100%;height:100%;animation:ospin 7s linear infinite}
@keyframes ospin{to{transform:rotate(360deg)}}
.lock-tx .sg-o .oglyph.sg-in{opacity:0;transform:scale(.5) rotate(-40deg)}
.lock-tx .sg-o .oglyph.sg-out{opacity:0;transform:scale(1.25) rotate(40deg)}
.lock-logo .gd{color:var(--blanco)}

/* Contacto: formulario */
.cbtns{display:flex;gap:8px;flex-wrap:wrap}
.cbar .copy.cta{background:var(--azul-072);color:var(--blanco);border-color:var(--azul-072)}
.cbar .copy.cta:hover{background:var(--azul-285);color:var(--blanco);border-color:var(--azul-285)}
.cform{width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;background:var(--blanco);color:var(--negro);overflow:auto;opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease),display .45s allow-discrete,overlay .45s allow-discrete}
.cform[open]{opacity:1;transform:none}
@starting-style{.cform[open]{opacity:0;transform:translateY(16px)}}
.cform::backdrop{background:rgba(0,0,255,.0);backdrop-filter:blur(0);transition:background .45s,backdrop-filter .45s,display .45s allow-discrete,overlay .45s allow-discrete}
.cform[open]::backdrop{background:rgba(0,0,40,.55);backdrop-filter:blur(6px)}
@starting-style{.cform[open]::backdrop{background:rgba(0,0,40,0);backdrop-filter:blur(0)}}
.cform form{display:flex;flex-direction:column;gap:18px;padding:clamp(20px,4vw,40px)}
.cf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.cf-head h2{margin:0;font-weight:400;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.035em;line-height:1}
.cf-x{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:inherit;padding:0 4px}
.cf-sub{margin:-8px 0 0;color:var(--gris);font-size:14.5px}
.cf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cf-f{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.cf-f .m{color:var(--gris)}
.cf-f input,.cf-f textarea{font:inherit;font-size:16px;color:inherit;background:none;border:0;border-bottom:1px solid var(--linea);padding:8px 0;border-radius:0;outline:none;transition:border-color .3s;width:100%}
.cf-f textarea{resize:vertical;min-height:110px;border:1px solid var(--linea);padding:10px}
.cf-f input:focus,.cf-f textarea:focus{border-color:var(--azul-072)}
.cf-f .bad{border-color:#e0002a}
.cf-chips{flex-direction:row;flex-wrap:wrap;gap:8px}
.cf-chips legend{margin-bottom:8px;padding:0}
.cf-chips label{cursor:pointer}
.cf-chips input{position:absolute;opacity:0;pointer-events:none}
.cf-chips span{display:inline-block;border:1px solid var(--linea);border-radius:999px;padding:7px 13px 6px;font-size:13.5px;transition:background .25s,color .25s,border-color .25s}
.cf-chips input:checked+span{background:var(--azul-072);border-color:var(--azul-072);color:var(--blanco)}
.cf-chips input:focus-visible+span{outline:1.5px solid var(--azul-2728);outline-offset:2px}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px}
.cf-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.cf-msg{color:var(--gris);min-height:1em}
.cf-send{font:inherit;font-size:15px;background:var(--negro);color:var(--blanco);border:0;padding:12px 22px;cursor:pointer;transition:background .3s}
.cf-send:hover{background:var(--azul-072)}
.cf-send[disabled]{opacity:.5;cursor:wait}
@media (max-width:620px){.cf-grid{grid-template-columns:minmax(0,1fr)}.cform{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0}}


/* video en partes: dos videos apilados que se turnan */
.seq{position:absolute;inset:0}
.seq video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:none}
.seq video.ok.on{opacity:1}
/* cuñas en celular: la pantalla es alta, así que los cuadros de video se ajustan a la forma real de cada cuña */
@media (max-width:620px){
  .wedge:nth-child(2)>*{left:50%;top:26%;width:50%;height:46%}
  .wedge:nth-child(5)>*{left:0;top:26%;width:50%;height:46%}
  .wedge:nth-child(3)>*{top:38%;height:62%}
  .wedge:nth-child(4)>*{top:38%;height:62%}
}

/* fila de videos verticales (BTS, breakdown…): dos columnas angostas centradas */
.g-row.tall{grid-template-columns:repeat(2,minmax(0,min(34vw,520px)));justify-content:center;gap:clamp(12px,2vw,28px)}
.g-row.sq.c2{grid-template-columns:repeat(2,minmax(0,min(38vw,600px)));justify-content:center;gap:clamp(12px,2vw,28px)}
.g-row.tall.c1{grid-template-columns:minmax(0,min(40vw,560px))}
.g-row.tall.c3{grid-template-columns:repeat(3,minmax(0,min(26vw,400px)))}
.g-lbl{position:absolute;left:12px;bottom:12px;z-index:2;padding:4px 8px;background:var(--blanco);color:var(--negro);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:620px){.g-row.sq.c2{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.g-row.tall{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.g-row.tall.c1{grid-template-columns:minmax(0,72vw)}.g-row.tall.c3{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.g-lbl{left:6px;bottom:6px;font-size:8.5px;padding:3px 5px}}

/* portada con video vertical: completo al centro y fondo desenfocado */
.vfit{position:absolute;inset:0}
.media .vfit>.vbg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(38px) saturate(1.15) brightness(.7)}
.media .vfit>.vfg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ═════════ TEST · referencias (Pacôme / Orionix / Warm & Fuzzy) ═════════ */
/* Servicios en rueda: arco a la izquierda que gira con el scroll, servicio activo al centro */
.svcs{display:none}
.sw{--n:8;position:relative;height:calc(var(--n) * 95vh + 100vh);margin-top:clamp(60px,8vw,120px)}
.sw-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,30vw) minmax(0,1fr);align-items:center}
.sw-k{position:absolute;top:clamp(18px,3.4vh,34px);left:0;z-index:2}
.sw-wheel{--R:min(44vh,440px);position:absolute;top:50%;left:calc(20vw - var(--R)*2 - 60px);width:calc(var(--R)*2);height:calc(var(--R)*2);margin-top:calc(var(--R)*-1);border-radius:50%;border:1px solid rgba(255,255,255,.35);will-change:transform}
.sw-wheel li{position:absolute;left:50%;top:50%;list-style:none;font-family:var(--f-mono);font-size:clamp(18px,1.7vw,28px);opacity:.35;transition:opacity .35s,font-size .35s;white-space:nowrap;transform-origin:0 0;transform:rotate(var(--a)) translateX(calc(var(--R) + 18px)) translateY(-50%)}
.sw-wheel li.on{opacity:1;font-size:clamp(26px,2.6vw,42px)}
.sw-wheel li::before{content:"";position:absolute;left:-24px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .35s}
.sw-wheel li.on::before{transform:scale(1)}
.sw-main{grid-column:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,2.4vh,30px);padding-inline:16px}
.sw-media{position:relative;z-index:1;width:min(42vw,720px,62svh);aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:0 30px 80px rgba(0,0,40,.35);will-change:transform}
.sw-media .media{position:absolute;inset:0;opacity:0;clip-path:inset(0 0 0 0);transform:scale(.94);transition:opacity .35s,transform .6s cubic-bezier(.2,.7,.2,1)}
.sw-media .media.on{opacity:1;transform:none;z-index:1;animation:swReveal .85s cubic-bezier(.7,0,.2,1) both}
@keyframes swReveal{from{clip-path:inset(100% 0 0 0);transform:scale(1.18)}to{clip-path:inset(0 0 0 0);transform:none}}
.sw-media .media.fit{background:#fff}.sw-media .media.fit video{object-fit:contain;padding:8%}
.sw-media video,.sw-media img{width:100%;height:100%;object-fit:cover;display:block}
.sw-text h3{margin:0;font-weight:500;font-size:clamp(36px,5vw,88px);line-height:1;letter-spacing:-.04em}
.sw-text h3 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.sw-text h3 .w>span{display:inline-block}
.sw-text.in h3 .w>span{animation:swUp .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*70ms)}
@keyframes swUp{from{transform:translateY(105%) rotate(4deg)}to{transform:none}}
.sw-text p{margin:12px auto 0;max-width:46ch;font-size:15px;line-height:1.5;opacity:.9}
.sw-text.in>p,.sw-text.in>ul{animation:swIn .7s cubic-bezier(.2,.7,.2,1) both}
.sw-text.in>p{animation-delay:.18s}.sw-text.in>ul{animation-delay:.28s}
.sw-text.in .sw-main{position:relative;isolation:isolate}
.sw-main .sw-big{position:absolute;left:auto;right:-2vw;top:-4vh;z-index:-1;font-size:clamp(200px,24vw,420px);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35);pointer-events:none;white-space:nowrap}
.sw-big.in{animation:swBig .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes swBig{from{opacity:0;transform:translateY(12%)}to{opacity:1;transform:none}}
.sw-text{position:relative;z-index:1}
@keyframes swIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sw-dots{display:none}
@media (max-width:760px){
  .sw{height:calc(var(--n) * 80vh + 100vh)}
  .sw-stage{grid-template-columns:minmax(0,1fr);align-content:center}
  .sw-wheel{display:none}
  .sw-main{grid-column:1}
  .sw-media{width:min(100%,calc(44svh * 4 / 3));aspect-ratio:4/3}
  .sw-main .sw-big{font-size:38vw;top:auto;bottom:34%;right:-4vw}
  .sw-k{top:18px}
  .sw-dots{display:flex;gap:14px;justify-content:center;font-family:var(--f-mono);font-size:13px;margin-bottom:6px}
  .sw-dots span{opacity:.4;transition:opacity .3s}.sw-dots span.on{opacity:1;text-decoration:underline;text-underline-offset:4px}
  .sw-k{top:76px;left:0}
  .sw-text h3{font-size:clamp(28px,8vw,40px)}
}

/* Clientes en tres filas a distinto ritmo con orillas difuminadas */
.mq-rows{display:grid;gap:clamp(4px,1vw,14px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-rows .mq-set{font-size:clamp(26px,3.4vw,58px)}
.mq-rows .marquee:nth-child(2) .mq-set{opacity:.75}
.mq-rows .marquee:nth-child(3) .mq-set{opacity:.55}

/* Botón del reel en la esquina: tarjeta inclinada con un loop y el texto girando alrededor */
.reelbtn{position:fixed;left:clamp(10px,1.6vw,26px);bottom:clamp(10px,1.6vw,26px);z-index:60;width:150px;height:150px;padding:0;border:0;background:none;color:#fff;cursor:pointer;mix-blend-mode:normal;transition:opacity .5s,transform .7s cubic-bezier(.2,1.4,.4,1)}
.reelbtn.off{opacity:0;pointer-events:none;transform:translateY(24px) scale(.7) rotate(-20deg)}
.rb-card{position:absolute;inset:34px;border-radius:12px;overflow:hidden;transform:rotate(-8deg);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .5s cubic-bezier(.2,.8,.2,1);background:#000}
.rb-card video{width:100%;height:100%;object-fit:cover;display:block}
.rb-ring{position:absolute;inset:0;width:100%;height:100%;animation:rbSpin 14s linear infinite;fill:currentColor;font-family:var(--f-mono);font-size:15px;letter-spacing:.06em;text-transform:lowercase;filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
.reelbtn:hover .rb-card{transform:rotate(4deg) scale(1.08)}
.reelbtn:hover .rb-ring{animation-duration:5s}
@keyframes rbSpin{to{transform:rotate(360deg)}}
@media (max-width:900px){.reelbtn{width:112px;height:112px}.rb-card{inset:26px}.rb-ring{font-size:16px}}

/* Reproductor del reel a pantalla completa */
.rp{position:fixed;inset:0;z-index:200;background:#000;color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .45s}
.rp.open{opacity:1}
.rp[hidden]{display:none}
.rp video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.rp-gate{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;transition:opacity .4s}
.rp-gate::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.rp.playing .rp-gate{opacity:0;pointer-events:none}
.rp-in{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;background:#fff;color:#000;padding:13px 22px 12px;font:inherit;font-size:16px;cursor:pointer;transition:transform .3s}
.rp-in svg{width:10px;height:10px}
.rp-in:hover{transform:scale(1.05)}
.rp-mute{border:0;background:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:12px;margin-top:6vh}
.rp-mute:hover{color:#fff}
.rp-bar{position:absolute;z-index:3;left:50%;bottom:clamp(14px,3vh,30px);transform:translate(-50%,20px);display:flex;align-items:center;gap:8px;padding:6px;border-radius:14px;background:#fff;color:#000;opacity:0;transition:opacity .4s,transform .4s;width:min(520px,calc(100vw - 32px))}
.rp.playing .rp-bar{opacity:1;transform:translate(-50%,0)}
.rp.idle .rp-bar{opacity:0;transform:translate(-50%,10px)}
.rp-bar button{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:0;background:#000;color:#fff;display:grid;place-items:center;cursor:pointer}
.rp-bar button svg{width:12px;height:12px}
.rp .i-play,.rp.paused .i-pause{display:none}.rp.paused .i-play{display:block}
.rp .i-off,.rp.muted .i-on{display:none}.rp.muted .i-off{display:block}
.rp-strip{position:relative;flex:1;height:38px;border-radius:8px;overflow:hidden;background:#000 url("../assets/media/reel-strip.jpg") 0 0/100% 100% no-repeat;cursor:pointer}
.rp-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent var(--p,0%),rgba(255,255,255,.55) var(--p,0%))}
.rp-head{position:absolute;top:0;bottom:0;left:var(--p,0%);width:2px;margin-left:-1px;background:var(--azul-072);z-index:1}
.rp-x{position:absolute;z-index:3;top:clamp(14px,3vh,28px);right:clamp(14px,3vw,32px);border:0;background:none;color:#fff;cursor:pointer;font-size:12px;opacity:.8}
.rp-x:hover{opacity:1}
.rp.idle{cursor:none}

/* cursor: contraste en cualquier fondo y cursor nativo dentro del formulario (el diálogo va en la capa superior) */
.cursor .cur-ico{filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 2px rgba(255,255,255,.6))}
.cursor.inv .cur-ico{filter:drop-shadow(0 0 1px rgba(0,0,0,.7)) drop-shadow(0 0 2px rgba(0,0,0,.4))}
.has-cursor .cform,.has-cursor .cform *{cursor:auto}
.has-cursor .cform a,.has-cursor .cform button,.has-cursor .cform label{cursor:pointer}
.has-cursor .cform input,.has-cursor .cform textarea{cursor:text}

.sw-pin .reelbtn{opacity:0;pointer-events:none;transform:translateY(24px) scale(.7) rotate(-20deg)}

/* formulario: proyecto / unirse al estudio */
.cf-tabs{display:flex;gap:6px;margin-top:-4px}
.cf-tabs button{font:inherit;font-size:12px;background:none;border:1px solid var(--linea);border-radius:999px;padding:6px 12px 5px;color:var(--gris);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.cf-tabs button[aria-pressed="true"]{background:var(--negro);border-color:var(--negro);color:var(--blanco)}
.cform:not(.join) .cf-jn,.cform.join .cf-pj{display:none}

/* TEST: About más lleno — datos del estudio y el índice de servicios */
.about-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,96px);align-items:end}
.facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:clamp(22px,2.6vw,40px) clamp(36px,4vw,72px);padding-bottom:6px}
.facts div{display:flex;flex-direction:column;gap:6px;min-width:9ch}
.facts dt{order:2;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;color:rgba(255,255,255,.75)}
.facts dd{margin:0;font-weight:300;font-size:clamp(48px,6vw,104px);line-height:.85;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.facts dd sup{font-size:.4em;vertical-align:top;margin-left:2px;letter-spacing:0}
@media (max-width:900px){.about-top{grid-template-columns:minmax(0,1fr)}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.beliefs{border-top:1px solid rgba(255,255,255,.35);padding-top:16px;display:grid;gap:10px}
.beliefs ol{list-style:none;margin:0;padding:0}
.beliefs li{display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18);overflow:hidden}
.beliefs li .m{font-size:11px;opacity:.6;flex:0 0 auto}
.beliefs b{font-weight:400;font-size:clamp(22px,2.1vw,34px);line-height:1.1;letter-spacing:-.03em;transition:font-weight .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.beliefs li:hover b{font-weight:600;transform:translateX(6px)}
.beliefs.in li b{animation:swUp .8s cubic-bezier(.2,.8,.2,1) both}
.beliefs.in li:nth-child(2) b{animation-delay:.08s}.beliefs.in li:nth-child(3) b{animation-delay:.16s}.beliefs.in li:nth-child(4) b{animation-delay:.24s}
.toolbox{display:grid;gap:12px}
.toolbox ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.toolbox li{border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:6px 13px 5px;font-family:var(--f-mono);font-size:12px;line-height:1;transition:background .25s,color .25s}
.toolbox li:hover{background:#fff;color:var(--azul-072)}
.clock{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;color:rgba(255,255,255,.85)}
.clock .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* TEST: rueda de servicios con retícula técnica */
.sw-grid{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/56px 56px,
  linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 35% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 70% at 35% 50%,#000 30%,transparent 80%)}
.sw-wheel{border-color:rgba(255,255,255,.5)}
.sw-dial{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none}
.sw-dial line{stroke:#fff;vector-effect:non-scaling-stroke}
.sw-dial .mn{stroke-opacity:.28;stroke-width:1}
.sw-dial .md{stroke-opacity:.5;stroke-width:1}
.sw-dial .mj{stroke-opacity:.95;stroke-width:1.5}
.sw-dial circle{fill:none;stroke:#fff;vector-effect:non-scaling-stroke}
.sw-dial .g1{stroke-opacity:.35;stroke-dasharray:2 6}
.sw-dial .g2{stroke-opacity:.12}
.sw-hud{position:absolute;left:0;bottom:clamp(18px,3.4vh,34px);z-index:2;display:flex;gap:18px;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.75)}
.sw-hud b{font-weight:400}
.sw-wheel li.on::after{content:"";position:absolute;left:-24px;top:50%;width:calc(var(--R) * .5);height:1px;background:linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.6));transform:translateX(-100%)}
.sw-mw{position:relative;z-index:1}
.sw-mw .cr{position:absolute;width:16px;height:16px;border:0 solid #fff;pointer-events:none}
.sw-mw .tl{left:-10px;top:-10px;border-left-width:1.5px;border-top-width:1.5px}
.sw-mw .tr{right:-10px;top:-10px;border-right-width:1.5px;border-top-width:1.5px}
.sw-mw .bl{left:-10px;bottom:-10px;border-left-width:1.5px;border-bottom-width:1.5px}
.sw-mw .br{right:-10px;bottom:-10px;border-right-width:1.5px;border-bottom-width:1.5px}
@keyframes blink{50%{opacity:.2}}
@media (max-width:760px){.sw-hud{display:none}.sw-mw{width:100%;display:flex;justify-content:center}.sw-mw .cr{display:none}}

/* radar / brújula: barrido continuo, aguja fija alineada con el servicio activo, blips por servicio */
.sw-radar{--R:min(44vh,440px);position:absolute;top:50%;left:calc(20vw - var(--R)*2 - 60px);width:calc(var(--R)*2);height:calc(var(--R)*2);margin-top:calc(var(--R)*-1);border-radius:50%;pointer-events:none;z-index:0}
.sw-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,.22) 0deg,rgba(255,255,255,.06) 28deg,transparent 60deg,transparent 360deg);-webkit-mask-image:radial-gradient(circle,#000 0 70%,transparent 99.5%);mask-image:radial-gradient(circle,#000 0 70%,transparent 99.5%);animation:sweep 5s linear infinite}
@keyframes sweep{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
.sw-sweep::after{content:"";position:absolute;left:50%;top:50%;width:50%;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.75));transform-origin:0 50%}
.sw-needle{position:absolute;top:50%;right:-2px;width:0;height:0;margin-top:-7px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:11px solid #fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
.sw-card{position:absolute;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.sw-card.c-n{left:50%;top:-22px;transform:translateX(-50%)}
.sw-card.c-s{left:50%;bottom:-22px;transform:translateX(-50%)}
.sw-card.c-e{right:-26px;top:calc(50% + 14px)}
.sw-dial .blip .bd{fill:#fff;fill-opacity:.55;stroke:none}
.sw-dial .blip .bp{fill:none;stroke:#fff;stroke-opacity:0}
.sw-dial .blip.on .bd{fill-opacity:1}
.sw-dial .blip.on .bp{animation:ping 1.6s ease-out infinite}
@keyframes ping{0%{r:1.6;stroke-opacity:.9}100%{r:9;stroke-opacity:0}}
.sw-wheel li::before{display:none}
@media (max-width:760px){.sw-radar{display:none}}
.sw-tags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sw-tags li{border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:6px 13px 5px;font-size:12px;line-height:1}
.sw-card{display:none}

/* ── Navegación entre proyectos: barra fija abajo (back · prev · n/total · next) ── */
.p-back{display:none}
.p-pager{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom,0px));transform:translate(-50%,0);z-index:70;display:flex;align-items:center;gap:6px;
  padding:6px;border-radius:999px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 6px 24px rgba(0,0,40,.14),0 0 0 1px rgba(0,0,0,.06);font-size:12px;letter-spacing:.02em;white-space:nowrap;
  animation:pgIn .6s var(--ease) .5s both}
.p-pager a{color:var(--negro);text-decoration:none;padding:8px 12px;border-radius:999px;transition:background .2s,color .2s}
.p-pager a:hover{background:var(--azul-072);color:var(--blanco)}
.p-pager .pg-arrows{display:flex;align-items:center;gap:2px;border-left:1px solid var(--linea);padding-left:6px}
.p-pager .pg-n{color:var(--gris);padding:0 6px;font-variant-numeric:tabular-nums}
@keyframes pgIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
html.has-cursor .p-pager a{cursor:none}
@media (max-width:560px){ .p-pager{font-size:11px} .p-pager a{padding:9px 10px} }

/* Flecha de regreso arriba de la portada (sustituye los metadatos) */
.p-up{position:absolute;top:22px;left:max(16px,env(safe-area-inset-left,0px));z-index:2;display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:12px;letter-spacing:.04em;text-transform:lowercase;
  animation:pgFade .7s var(--ease) .35s both}
.p-up b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid currentColor;font-weight:400;font-size:16px;transition:background .25s,color .25s,transform .35s var(--ease)}
.p-up:hover b{background:currentColor;transform:translateX(-4px)}
.p-head.dark .p-up:hover b{color:var(--negro)}
.p-head:not(.dark) .p-up:hover b{color:var(--blanco)}
.p-up:hover span{text-decoration:underline;text-underline-offset:3px}
@keyframes pgFade{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* Indicador de "sigue subiendo para el proyecto anterior" */
.p-pull{position:fixed;left:50%;top:calc(var(--navh,64px) + 14px);z-index:70;transform:translate(-50%,-12px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--negro);font-size:12px;letter-spacing:.02em;white-space:nowrap;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 6px 24px rgba(0,0,40,.14);transition:opacity .25s,transform .35s var(--ease)}
.p-pull.on{opacity:1;transform:translate(-50%,0)}
.p-pull i{width:46px;height:3px;border-radius:3px;background:var(--linea);overflow:hidden;position:relative}
.p-pull i::after{content:"";position:absolute;inset:0;background:var(--azul-072);transform-origin:0 50%;transform:scaleX(var(--pp,0))}

/* Botón de idioma EN / ES */
.nav .lang{grid-column:3;justify-self:end;display:flex;align-items:center;gap:2px;font-size:12px;letter-spacing:.04em}
.nav .lang i{font-style:normal;color:var(--gris-2)}
.nav .lang button{all:unset;color:inherit;cursor:pointer;padding:6px 6px;border-radius:999px;color:var(--gris-2);transition:color .2s,background .2s}
.nav .lang button[aria-pressed="true"]{color:currentColor;color:inherit}
.nav .lang button:not([aria-pressed="true"]):hover{color:var(--azul-072)}
.nav .lang button:focus-visible{outline:2px solid var(--azul-072);outline-offset:2px}
html.has-cursor .nav .lang button{cursor:none}
@media (max-width:900px){
  .nav .wrap{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .nav .lang i,.nav .lang button[aria-pressed="true"]{display:none}
  .nav .lang button{padding:6px 2px 6px 6px;color:inherit;border-left:1px solid var(--linea);border-radius:0;padding-left:10px}
}
@media (max-width:400px){ .nav ul{gap:11px} .nav ul a{font-size:13px} }
.nav .lang.m{color:inherit}
.nav .lang button[aria-pressed="true"]{color:inherit;font-weight:500}
.nav .lang button:not([aria-pressed="true"]){color:color-mix(in srgb,currentColor 45%,transparent)}
.nav .lang button:not([aria-pressed="true"]):hover{color:inherit}
@media (max-width:900px){ .nav .lang button:not([aria-pressed="true"]){color:inherit} }
/* La rueda/radar sangra hasta la orilla de la pantalla (antes la cortaba el margen del contenedor) */
.sw{margin-inline:calc(50% - 50vw);width:100vw;max-width:none}
.sw-stage{padding-inline:max(16px,env(safe-area-inset-left,0px))}
.sw-k,.sw-hud{left:max(16px,env(safe-area-inset-left,0px))!important}

.p-cols .role{display:block;color:var(--gris);font-size:11px}
.pc-cred li+li{margin-top:8px}
@media (max-width:900px){ .p-cols .pc-year{grid-column:auto} }
/* Flecha de regreso: círculo translúcido; al pasar el cursor se llena de azul, sin volverse sólido */
.p-up b{background:rgba(110,115,133,.28);border-color:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-up:hover b,.p-head.dark .p-up:hover b,.p-head:not(.dark) .p-up:hover b{background:color-mix(in srgb,var(--azul-072) 72%,transparent);border-color:transparent;color:var(--blanco)}

/* Botón de audio en piezas de galería */
.g-snd{all:unset;position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.88);color:var(--negro);font-size:11px;letter-spacing:.04em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,color .2s}
.g-snd i{width:14px;height:12px;display:inline-block;background:
  linear-gradient(currentColor,currentColor) 0 50%/2px 4px no-repeat,linear-gradient(currentColor,currentColor) 4px 50%/2px 8px no-repeat,
  linear-gradient(currentColor,currentColor) 8px 50%/2px 12px no-repeat,linear-gradient(currentColor,currentColor) 12px 50%/2px 6px no-repeat;opacity:.5}
.g-snd[aria-pressed="true"]{background:var(--azul-072);color:var(--blanco)}
.g-snd[aria-pressed="true"] i{opacity:1;animation:sndb .8s steps(2) infinite}
@keyframes sndb{50%{transform:scaleY(.6)}}
html.has-cursor .g-snd{cursor:none}
@media (max-width:620px){.g-snd{right:6px;bottom:6px;padding:6px 9px;font-size:9px}}

/* Botón ver en grande + lightbox */
.g-exp{all:unset;position:absolute;right:12px;top:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.88);color:var(--negro);font-size:11px;letter-spacing:.04em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,color .2s}
.g-exp i{width:11px;height:11px;display:inline-block;border:1.5px solid currentColor;border-radius:2px;
  clip-path:polygon(0 0,40% 0,40% 15%,15% 15%,15% 40%,0 40%,0 60%,15% 60%,15% 85%,40% 85%,40% 100%,0 100%,0 0,100% 0,100% 40%,85% 40%,85% 15%,60% 15%,60% 0,100% 0,100% 100%,60% 100%,60% 85%,85% 85%,85% 60%,100% 60%,100% 100%)}
.g-exp:hover{background:var(--azul-072);color:var(--blanco)}
.has-cursor .g-exp{cursor:none}
@media (max-width:620px){.g-exp{right:6px;top:6px;padding:6px 9px;font-size:9px}}

.g-open{cursor:zoom-in}.has-cursor .g-open{cursor:none}
/* Botón de audio como bocina (sin animación) */
.g-snd{width:38px;height:38px;padding:0;gap:0;justify-content:center;border-radius:50%;background:#000;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.g-snd span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.g-snd i{display:none}
.g-snd svg{width:14px;height:12px}
.g-snd .i-on{display:none}.g-snd[aria-pressed="true"] .i-on{display:block}.g-snd[aria-pressed="true"] .i-off{display:none}
.g-snd[aria-pressed="true"]{background:var(--azul-072);color:#fff}
.g-snd:hover{transform:scale(1.06)}.g-snd{transition:transform .25s,background .2s}
@media (max-width:620px){.g-snd{width:30px;height:30px;padding:0}.g-snd svg{width:11px;height:10px}}
.g-play{position:absolute;left:50%;top:50%;z-index:2;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;transition:transform .3s,background .2s;pointer-events:none}
.g-play svg{width:20px;height:20px;margin-left:3px}
.g-open:hover .g-play{transform:scale(1.08);background:var(--azul-072)}
@media (max-width:620px){.g-play{width:52px;height:52px;margin:-26px 0 0 -26px}.g-play svg{width:14px;height:14px}}
.g-row.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-row.tall.c4{grid-template-columns:repeat(4,minmax(0,min(21vw,330px)))}
.g-row.sq.c4{grid-template-columns:repeat(4,minmax(0,min(24vw,400px)));justify-content:center;gap:clamp(10px,1.6vw,24px)}
@media (max-width:620px){.g-row.c4,.g-row.tall.c4,.g-row.sq.c4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.g-row.sq.c3{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center;gap:clamp(10px,1.6vw,24px)}
@media (max-width:620px){.g-row.sq.c3{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}