/* Portada */
.hero{position:relative;height:100svh;min-height:620px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:0 var(--gut)}
.hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* grano de video analógico sobre el reel: una baldosa de ruido (img/grano.png) que salta a otro lugar ~12 veces por segundo; más grande que la portada para que al saltar no se vean bordes */
.hero-grano{position:absolute;inset:-160px;pointer-events:none;background:url(../img/grano.png) 0 0/140px 140px;opacity:.2;animation:grano .8s steps(1) infinite}
.hero-sombra{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,28,28,.35) 0%,rgba(26,28,28,0) 22%,rgba(26,28,28,0) 45%,rgba(26,28,28,.88) 100%)}
.hero-in{position:relative;display:grid;grid-template-columns:1fr minmax(260px,330px);gap:40px;align-items:end;padding-bottom:56px}
.hero-in .kick{margin-bottom:22px}
.hero h1{max-width:15ch}
.hero-p{font-size:clamp(17px,1.35vw,20px);line-height:1.2}
.hero .pie{position:relative}

/* Mi equipo de agentes: la oficina en 3D, a lo ancho */
.equipo{padding-top:clamp(110px,18vh,200px)}
.eq-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:40px;align-items:end;padding-bottom:28px;border-bottom:1px solid var(--line)}
.eq-cab p{font-size:clamp(17px,1.35vw,20px);line-height:1.2}
.ofi{position:relative;height:clamp(440px,86vh,880px);overflow:hidden;touch-action:none;cursor:grab}
.ofi:active{cursor:grabbing}
.ofi > canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
/* el ascensor de la oficina: sin puertas y con lo mínimo. Un solo botón para subir; al apretarlo se convierte en un indicador de puntos (como el de arriba de la puerta de un ascensor)
   que cuenta los pisos hasta el 10 con el avance real de la descarga. Al llegar parpadea, la pantalla negra se desvanece sobre la cabina y recién ahí se abre su puerta, en 3D */
.asc{position:absolute;inset:0;z-index:7;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(ellipse 70% 60% at 50% 46%,#101212 0%,#070808 60%,#040505 100%);transition:opacity 1.6s cubic-bezier(.4,0,.2,1)}
.asc.fuera{opacity:0;pointer-events:none}
.asc-centro{display:grid;place-items:center}
.asc-centro > *{grid-area:1/1;transition:opacity .5s,transform .5s}
.asc-inicio{z-index:1}
.asc-inicio{display:flex;flex-direction:column;align-items:center;gap:16px}
.asc-btn{position:relative;width:72px;height:72px;border-radius:50%;border:1px solid rgba(249,244,235,.55);background:rgba(9,10,10,.6);cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s,box-shadow .25s}
.asc-btn::before{content:"";width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:14px solid var(--fg);margin-bottom:3px;transition:border-color .25s}
.asc-btn::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(249,244,235,.18);animation:asc-late 2.6s ease-out infinite}
@keyframes asc-late{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.asc-btn:hover,.asc-btn:focus-visible{background:var(--rojo);border-color:var(--rojo);box-shadow:0 0 28px rgba(229,50,45,.55)}
.asc-btn:hover::before,.asc-btn:focus-visible::before{border-bottom-color:#fff}
.asc-btn:focus-visible{outline:2px solid var(--fg);outline-offset:6px}
.asc-leyenda{font-size:10px;color:var(--dim)}
.asc-pisos{list-style:none;display:flex;align-items:center;margin:0;padding:0;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .5s .3s,transform .5s .3s}  /* sin clics: no tapa el botón */
.asc-pisos li{width:clamp(26px,4.4vw,46px);text-align:center;font-size:14px;line-height:1;color:rgba(249,244,235,.3);transition:font-size .25s,color .25s,text-shadow .25s}
.asc-pisos li.hecho{color:rgba(249,244,235,.85)}
.asc-pisos li.on{font-size:clamp(28px,4.6vw,42px);color:#ff4a3f;text-shadow:0 0 18px rgba(229,50,45,.8)}
.asc.subiendo .asc-inicio{opacity:0;transform:scale(.9);pointer-events:none}
.asc.subiendo .asc-pisos{opacity:1;transform:none}
.asc.llego .asc-pisos li.on{animation:asc-llega 1s steps(2,jump-none) 1}
@keyframes asc-llega{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.asc,.asc-centro > *,.asc-pisos{transition:none}.asc-pisos li{transition:none}.asc-btn::after,.asc.llego .asc-pisos li.on{animation:none}}
.ofi-carga{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);background:var(--bg)}
/* menú de la derecha: los lugares de la oficina; con la mosca, lo que se le puede hacer */
.ofi-menu{position:absolute;bottom:18px;left:var(--gut);width:164px;max-height:calc(100% - 36px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;display:flex;flex-direction:column;gap:2px;cursor:default}
.ofi-menu::-webkit-scrollbar{display:none}
.ofi-menu > p:first-child,.ofi-menu button.claro{position:sticky;z-index:2}.ofi-menu > p:first-child{top:0}.ofi-menu button.claro{top:28px}
.ofi-menu > p{flex:none;height:26px;display:flex;align-items:center;padding:0 10px;font-size:10px;background:var(--bg2);color:var(--dim)}
.ofi-menu > p.sub{height:22px;margin-top:4px;padding:0 2px;background:none;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.ofi-menu button{flex:none;display:flex;align-items:center;min-height:30px;padding:0 10px;background:rgba(17,19,19,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:left;transition:background .2s,color .2s}
.ofi-menu button b{font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.ofi-menu button small{display:none}
.ofi-menu button.dos{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:6px 10px}
.ofi-menu button.dos small{display:block;color:var(--dim);font-size:9.5px}
.ofi-menu button.mono{font-size:10px}
.ofi-menu button.claro{background:var(--fg);color:var(--bg2);min-height:32px}
.ofi-menu button.espera{opacity:.75}
.ofi-menu .grupo{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ofi-menu .grupo button{min-width:0;padding:0 8px}
.ofi-menu button:hover,.ofi-menu button:focus-visible{background:var(--fg);color:var(--bg2)}
.ofi-menu button:hover small{color:rgba(17,19,19,.6)}
.ofi-ayuda{position:absolute;right:var(--gut);bottom:18px;padding:9px 12px;background:rgba(17,19,19,.86);color:var(--fg);pointer-events:none;transition:opacity .6s}
.ofi-ayuda.fuera{opacity:0}
/* lo que ve la cámara al manejar la mosca: no tu video, sino tu silueta en blanco y negro sobre negro transparente, y los números que mide */
.ofi canvas.ofi-cam{inset:auto;top:132px;right:var(--gut);width:192px!important;height:auto!important;display:none;border:1px solid var(--line);background:rgba(8,9,9,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
.ofi-cam-info{position:absolute;top:258px;right:var(--gut);display:none;padding:5px 8px;background:rgba(17,19,19,.86);color:var(--dim);pointer-events:none}
.ofi canvas.ofi-cam.on,.ofi-cam-info.on{display:block}
/* el arcade a pantalla completa dentro de la oficina */
/* el arcade: el juego sobre la pantalla de la máquina (oficina.js lo encaja cada cuadro); el loft sigue visible atrás */
.ofi-juego{position:absolute;inset:0;z-index:5;pointer-events:none}
.ofi-juego .pantalla{position:absolute;overflow:hidden;border-radius:14px / 18px;background:#000;opacity:0;transition:opacity .5s;pointer-events:auto}
.ofi-juego.lista .pantalla{opacity:1}
.ofi-juego iframe{display:block;width:100%;height:100%;border:0}
.ofi-juego .vidrio{position:absolute;inset:0;pointer-events:none;background:linear-gradient(158deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 28%),repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 64%,rgba(0,0,0,.4) 100%)}
.ofi-juego button{position:absolute;top:14px;padding:10px 14px;background:var(--fg);color:var(--bg2);pointer-events:auto;z-index:2}
.ofi-juego .salir{left:var(--gut)}
.ofi-juego .acercar{left:calc(var(--gut) + 150px);background:var(--bg2);color:var(--fg)}
/* «Insert coin»: cartel que flota sobre el tablero cuando te acercás al arcade; al hacer clic, se juega */
.ofi-moneda{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;background:rgba(10,6,24,.82);color:#ffd21f;border:1px solid rgba(255,210,31,.55);border-radius:999px;
  text-shadow:0 0 10px rgba(255,138,0,.8);box-shadow:0 0 22px rgba(255,47,180,.35);letter-spacing:.1em;backdrop-filter:blur(4px);cursor:pointer}
.ofi-moneda[hidden]{display:none}
.ofi-moneda i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#ffb300 55%,#7a4a00);animation:moneda 1.1s steps(2,jump-none) infinite}
.ofi-moneda{animation:parpadeo 1.1s steps(2,jump-none) infinite}
@keyframes moneda{50%{transform:scaleX(.25)}}
@keyframes parpadeo{50%{opacity:.62}}
@media (prefers-reduced-motion:reduce){.ofi-moneda,.ofi-moneda i{animation:none}}
/* el panel del cerebro de la mosca: lo que respondió el modelo de FlyWire a cada estímulo */
/* la franja de la mosca, debajo de la oficina: su cuerpo y su cerebro, y lo último que decidió (se actualiza con cada reacción) */
.cerebro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,3vw,48px);padding-top:26px;padding-bottom:30px;border-bottom:1px solid var(--line);align-items:start}
.cerebro > div > p.mono:first-child{color:var(--fg);margin-bottom:10px}
.cerebro .cifras{font-size:clamp(18px,1.5vw,22px);line-height:1.25;color:var(--dim);max-width:32ch}
.cerebro .cifras b{color:var(--fg);font-weight:600}
.cerebro dl{display:grid;gap:6px;color:var(--dim)}
.cerebro dl div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:6px}
.cerebro dd{color:var(--fg);text-align:right}
.cerebro ol{list-style:none;display:grid;gap:5px}
.cerebro li{display:grid;grid-template-columns:76px 1fr 64px;gap:10px;align-items:center}
.cerebro li i{height:6px;background:linear-gradient(90deg,var(--fg) var(--w),rgba(249,244,235,.1) var(--w))}
.cerebro li span:last-child{text-align:right;color:var(--dim)}
.cerebro .fuente{color:var(--dim);font-size:10px;grid-column:1 / -1}
.cerebro .fuente.lado{grid-column:auto;font-size:11px;line-height:1.5}
.eq-tarea{padding-top:16px;padding-bottom:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--dim)}

/* Proyecto La Mosca: la mosca en rayos X (modelo 3D que se gira, con su sistema nervioso adentro) con cinco referencias, y qué decide su cerebro en cuatro casos */
.mp-cuerpo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,72px);padding-top:clamp(28px,4vh,48px);align-items:center}
.mp-lamina{position:relative;margin:0;padding-top:clamp(22px,2.4vw,36px)}
.mp-escena{position:relative;aspect-ratio:5/4;min-height:340px;max-height:80vh;width:100%;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mp-escena.arrastra{cursor:grabbing}
.mp-escena > canvas,.mp-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.mp-poster{object-fit:cover;transition:opacity .7s;pointer-events:none;mix-blend-mode:screen}  /* póster sobre negro, mezclado igual que el lienzo: así el primer segundo también lleva el grano del fondo */
.mp-escena > canvas{opacity:0;transition:opacity .7s;mix-blend-mode:screen}  /* el negro del lienzo deja ver el gris con grano de la página; la mosca, clara, se suma encima */.mp-escena.listo > canvas{opacity:1}  /* el lienzo aparece con el primer cuadro; hasta entonces se ve el póster, del mismo color que la página */
.mp-escena.listo .mp-poster{opacity:0}
.mp-pt{position:absolute;left:0;top:0;z-index:2;width:24px;height:24px;margin:-12px 0 0 -12px;padding:0;display:grid;place-items:center;border:1px solid rgba(249,244,235,.55);border-radius:50%;background:rgba(26,28,28,.6);color:var(--fg);font-size:10px;cursor:pointer;opacity:0;transition:opacity .5s,background .2s,color .2s,border-color .2s}
.mp-pt i{font-style:normal}
.mp-escena.listo .mp-pt{opacity:1}
.mp-pt:hover,.mp-pt.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.mp-pt:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.mp-ayuda{position:absolute;z-index:2;left:0;right:0;bottom:14px;text-align:center;font-size:10px;color:var(--dim);pointer-events:none;opacity:0;transition:opacity .6s 1.2s}
.mp-escena.listo .mp-ayuda{opacity:1}
.mp-escena.arrastra .mp-ayuda,.mp-escena.enfocada .mp-ayuda,.mp-escena.movida .mp-ayuda{opacity:0;transition-delay:0s}
.mp-info{position:absolute;z-index:2;left:16px;bottom:14px;max-width:min(26ch,60%);pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.mp-escena.enfocada .mp-info{opacity:1;transform:none}
.mp-info b{display:block;font-size:15px;font-weight:600}
.mp-info p{margin-top:2px;font-size:13px;line-height:1.35;color:var(--dim)}
.mp-volver{position:absolute;z-index:2;top:12px;right:12px;padding:7px 10px;border:1px solid var(--line);background:rgba(26,28,28,.7);color:var(--fg);font-size:10px;cursor:pointer}
.mp-volver[hidden]{display:none}
.mp-volver:hover{border-color:var(--fg)}
.mp-escena.sin3d .mp-pt,.mp-escena.sin3d .mp-ayuda{display:none}
@media (prefers-reduced-motion:reduce){.mp-poster,.mp-info,.mp-pt{transition:none}}
.mp-lamina figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:8px;color:var(--dim)}
.mp-lamina figcaption i{font-style:italic;text-transform:none;letter-spacing:0;color:var(--fg)}
.mp-txt{display:flex;flex-direction:column;gap:18px}
.mp-txt p{color:var(--dim);font-size:17px;line-height:1.5;max-width:46ch}
.mp-txt .mp-lead{font-size:clamp(20px,1.65vw,25px);line-height:1.25;color:var(--fg);max-width:30ch}
.mp-txt .mp-firma{font-size:10px;margin-top:2px}
.mp-partes{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin-top:clamp(24px,4vh,40px);padding-top:24px;padding-bottom:4px;border-top:1px solid var(--line)}
.mp-partes li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;cursor:pointer}
.mp-num{width:24px;height:24px;border:1px solid var(--fg);border-radius:50%;display:grid;place-items:center;font-size:10px}
.mp-partes b{font-size:15px;font-weight:600}
.mp-partes p{margin-top:4px;font-size:13px;line-height:1.4;color:var(--dim)}
.mp-flujo{margin-top:clamp(32px,5vh,52px);padding-top:24px;border-top:1px solid var(--line)}
.mp-flujo .kick{display:block;margin-bottom:20px;color:var(--dim)}
.mp-flujo ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.mp-flujo li{display:flex;flex-direction:column;align-items:flex-start}
.mp-ico{display:block;width:26px;height:26px;margin-bottom:12px;fill:none;stroke:var(--fg);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.mp-flujo b{font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.mp-n{margin-top:12px;color:var(--dim);font-size:10px}
.mp-flujo li p{margin-top:2px;font-size:14px;line-height:1.35;color:var(--dim)}
.mp-barra{display:block;align-self:stretch;height:3px;margin:6px 0 10px;background:linear-gradient(90deg,var(--fg) var(--w),rgba(249,244,235,.1) var(--w));transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .2s}
.mp-flujo.ver .mp-barra{transform:none}
.mp-fuentes{padding-top:22px;padding-bottom:56px;color:var(--dim);font-size:10px}

/* Trabajo */
.trabajo{padding-top:0}
#mosca > .grupo-h{border-top:0}  /* la línea de arriba ya la pone lo que hay antes (el cerebro de la mosca o el cartel de la oficina) */
.filtros{display:flex;gap:2px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.filtros button{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.02em;background:var(--bg2);height:26px;padding:0 9px;color:var(--dim);transition:color .2s,background .2s}
.filtros button:hover{color:var(--fg)}
.filtros button[aria-pressed="true"]{background:var(--fg);color:var(--bg2)}
.filtros button small{font-size:10px;margin-left:6px;opacity:.6}
.casos{list-style:none;border-bottom:1px solid var(--line)}
.caso a,.grupo-h{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) 70px minmax(0,2.6fr);gap:12px;padding:22px var(--gut) 24px;border-top:1px solid var(--line);min-height:170px;transition:background .3s}
.caso a:hover,.grupo-h:hover{background:rgba(249,244,235,.02)}  /* fila seleccionada: ~15 % más oscura que el gris de antes (#232626) y translúcida, para que se siga viendo el grano del fondo */
.nom{font-size:clamp(19px,1.45vw,22px);line-height:1.1}
.nom small{display:block;color:var(--dim);font-size:.78em;margin-top:6px}
.tags{display:flex;gap:2px;flex-wrap:wrap;align-content:flex-start}
.tags span{background:var(--bg2);height:22px;padding:0 8px;display:inline-flex;align-items:center}
.mas{color:var(--dim)}
.tira{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;justify-content:flex-end;overflow:hidden;height:120px}  /* la que no entra baja a otra línea y queda oculta: la carátula, primera, siempre se ve */
.tira img{width:auto;height:120px;flex:none;object-fit:contain;background:var(--bg2);filter:grayscale(.35);transition:filter .4s,transform .6s cubic-bezier(.2,.8,.2,1)}
:is(.caso a,.grupo-h):hover .tira img{filter:none}
:is(.caso a,.grupo-h):hover .tira img:nth-child(odd){transform:translateY(-6px)}
/* todos los trabajos juntos en un bloque: la fila de arriba lo abre y lo cierra; cerrado queda oculto (sin foco) */
.grupo-h{width:100%;text-align:left;border-bottom:1px solid var(--line);min-height:0;grid-template-columns:minmax(0,1.25fr) minmax(0,1.6fr) auto;align-items:center;padding-top:30px;padding-bottom:32px}
.grupo-h .nom{font-size:clamp(24px,2.1vw,32px);letter-spacing:-.015em}
.grupo-h .nom small{font-size:clamp(15px,1.1vw,17px);margin-top:8px}
/* el botón de cada fila: un círculo con una cruz que gira a «×» al abrir y se llena al pasar el mouse (toda la fila es el botón) */
.grupo-h .mas{position:relative;justify-self:end;width:52px;height:52px;border:1px solid var(--line);border-radius:50%;font-size:0;color:transparent;transition:background .3s,border-color .3s,transform .5s cubic-bezier(.2,.8,.2,1)}
.grupo-h .mas::before,.grupo-h .mas::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;background:var(--fg);transition:background .3s}
.grupo-h .mas::after{transform:rotate(90deg)}
.grupo-h:hover .mas,.grupo-h:focus-visible .mas{background:var(--fg);border-color:var(--fg)}
.grupo-h:hover .mas::before,.grupo-h:hover .mas::after,.grupo-h:focus-visible .mas::before,.grupo-h:focus-visible .mas::after{background:var(--bg2)}
.plegable.abierto .grupo-h .mas{transform:rotate(45deg);border-color:var(--fg)}
.plegable.abierto .grupo-h .mas{color:var(--fg)}
.grupo-b{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .8s cubic-bezier(.2,.8,.2,1),visibility 0s .8s}
.plegable.abierto .grupo-b{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .8s cubic-bezier(.2,.8,.2,1)}
.grupo-b > div{min-height:0;overflow:hidden}
.caso[hidden]{display:none}
/* Mis trabajos destacados: la galería con el formato de Behance (portadas 404×316 con esquinas redondeadas, el título aparece al pasar el mouse), sobre el fondo de la web */
.dest{color:var(--fg);padding:clamp(44px,8vh,88px) 0 clamp(52px,9vh,96px)}
.dest-t{font-size:clamp(30px,3.6vw,52px);font-weight:600;letter-spacing:-.025em;line-height:1}
.dest-s{margin-top:12px;color:var(--dim);font-size:11px}
.dest-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,22px);margin-top:clamp(24px,4vh,40px)}
.tj a{position:relative;display:block;color:inherit}
.tj-img{position:relative;display:block;aspect-ratio:404/316;border-radius:8px;overflow:hidden;background:var(--bg3)}
.tj-img img{display:block;width:100%;height:100%;object-fit:cover}
.tj-pie{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:44px 14px 12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.74));opacity:0;transition:opacity .22s}
.tj a:hover .tj-pie,.tj a:focus-visible .tj-pie{opacity:1}
.tj a:focus-visible{outline:1px solid var(--fg);outline-offset:3px;border-radius:9px}
.tj-n b{display:block;font-size:15px;font-weight:600;line-height:1.15}
.tj-n small{display:block;margin-top:2px;font-size:13px;line-height:1.25;opacity:.9}
.tj-v{display:flex;align-items:center;gap:5px;flex:none;font-size:11px;white-space:nowrap}
.tj-v svg{width:13px;height:13px;fill:currentColor}
.tj-v svg + span + svg{margin-left:6px}
.tj-cap{display:none}
.tj[hidden]{display:none}
.dest-mas{display:flex;justify-content:center;margin-top:clamp(28px,5vh,48px)}
.dest-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 26px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--fg);font-size:16px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.dest-btn small{font-family:var(--mono);font-size:11px;font-weight:400;opacity:.65}
.dest-btn:hover,.dest-btn:focus-visible{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.dest-btn:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
.dest-resto{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .8s cubic-bezier(.2,.8,.2,1),visibility 0s .8s}
.dest-resto.abierto{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .8s cubic-bezier(.2,.8,.2,1)}
.dest-resto > div{min-height:0;overflow:hidden}
.dest .filtros{padding:clamp(28px,5vh,44px) 0 4px}
.dest .filtros button{height:34px;padding:0 14px;border-radius:999px;background:var(--bg2);color:var(--dim);font-size:11px}
.dest .filtros button:hover{color:var(--fg);background:var(--bg3)}
.dest .filtros button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.dest .filtros button:focus-visible{outline:1px solid var(--fg);outline-offset:2px}
.dest .casos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,22px);margin-top:18px;border:0;padding-bottom:6px}
@media (max-width:1100px){.dest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dest .casos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (hover:none){.tj-pie{display:none}.tj-cap{display:block;padding:9px 2px 0}.tj-cap b{display:block;font-size:14px;font-weight:600;line-height:1.2}.tj-cap small{display:block;margin-top:1px;font-size:12.5px;color:var(--gris);line-height:1.25}.tj-cap .mono{display:block;margin-top:4px;font-size:11px;color:var(--dim)}}
@media (prefers-reduced-motion:reduce){.tj-pie,.dest-resto,.dest-resto.abierto{transition:none}}


/* Qué hago */
.qh-in{position:relative;padding-top:8px;padding-bottom:64px}
.qh-p{max-width:52%;margin-top:28px}
.qh-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:56px;padding-top:44px;border-top:1px solid var(--line)}
.qh-grid ul{list-style:none;margin-top:30px;font-size:15px;line-height:1.5}

/* Marcas */
.cinta{overflow:hidden;padding:56px 0 64px}
.cinta-in{--alto-logo:clamp(26px,2.4vw,38px);display:flex;align-items:center;gap:clamp(40px,4.5vw,72px);width:max-content;animation:cinta 70s linear infinite}
.cinta-in img{width:auto;max-width:none;opacity:.72;flex:none}
@keyframes cinta{to{transform:translateX(-50%)}}

/* Sobre mí */
.sobre{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"txt foto" "carrera premios";gap:56px 40px;padding-top:clamp(70px,10vh,120px);align-items:start}
.sobre-txt{grid-area:txt;align-self:stretch;display:flex;flex-direction:column;gap:34px;padding-top:20px}
.sobre-txt .grande{margin-top:auto}  /* la etiqueta arriba; la frase y «También fui docente» abajo, terminando a la altura del pie del retrato */
.sobre-carrera{grid-area:carrera;display:flex;flex-direction:column;align-items:flex-start;gap:34px}
.sobre-carrera .carrera{align-self:stretch}
.premios{grid-area:premios;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 16px}  /* al lado de la gráfica de trayectoria */
@media (min-width:861px){  /* de borde a borde de la chaqueta del retrato, con el mismo espacio entre las columnas. La foto sale 80 px a la izquierda de su columna y --gut a la derecha; la chaqueta ocupa del 15,7 % al 84,3 % de su ancho (medido en retrato-sombra.jpg) */
  .premios{--foto:calc(100% + 80px + var(--gut));margin-left:calc(-80px + .157 * var(--foto));width:calc(.686 * var(--foto));grid-template-columns:repeat(3,minmax(0,max-content));justify-content:space-between}
}
.premios b{display:block;font-size:clamp(36px,3.4vw,54px);font-weight:700;letter-spacing:-.03em;line-height:.9;margin-bottom:8px}
.premios .mono{color:var(--dim)}
/* la trayectoria: tramos del CV que suben de escalón (de asistente a dirección general), crecen al entrar en pantalla */
.sobre-p{margin-top:22px;max-width:46ch;color:var(--dim);font-size:17px;line-height:1.5}
.carrera{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:12px}
.carrera-niveles{position:relative;font-size:9px;line-height:1.15;color:var(--dim)}
.carrera-niveles span{position:absolute;right:0;left:0;bottom:calc(18% + var(--n) * 20.5%);transform:translateY(50%);text-align:right}
.carrera-barras{position:relative;height:180px;border-bottom:1px solid var(--line)}
.carrera-barras .guia{position:absolute;left:0;bottom:calc(18% + var(--n) * 20.5%);width:calc((var(--hasta) - 2007) / 19.9 * 100%);height:1px;background:var(--line)}
.carrera-barras i{position:absolute;display:block;bottom:0;left:calc((var(--s) - 2007) / 19.9 * 100%);width:calc((var(--e) - var(--s)) / 19.9 * 100% - 2px);height:calc(18% + var(--n) * 20.5%);
  background:var(--bg3);border-top:2px solid var(--fg);transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--s) - 2007) * 60ms}
.carrera-barras i.par{background:rgba(249,244,235,.2)}
.carrera-barras i:last-child{background:var(--accent,#E5322D);border-top-color:var(--accent,#E5322D)}
.carrera.ver .carrera-barras i{transform:none}
.carrera-barras b{position:absolute;left:4px;bottom:6px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;font-weight:400;color:var(--dim);white-space:nowrap}
.carrera-barras i:last-child b,.carrera-barras i.par b{color:var(--fg)}
.carrera-eje{grid-column:2;position:relative;height:22px;font-size:10px;color:var(--dim)}
.carrera-eje span{position:absolute;top:6px}.carrera-eje span:nth-child(1){left:0}.carrera-eje span:nth-child(2){left:40.2%}.carrera-eje span:nth-child(3){left:65.3%}.carrera-eje span:nth-child(4){right:0}
.sobre-foto{grid-area:foto;align-self:end;background:var(--bg);aspect-ratio:3/2;position:relative;overflow:hidden;margin:0 calc(-1 * var(--gut)) 0 -80px}  /* el retrato entero, un poco más grande que la columna, con el fondo de la web y a la altura del título (no acompaña el scroll) */
.sobre-foto::after{content:'';position:absolute;inset:-160px;pointer-events:none;background:url(../img/grano.png) 0 0/140px 140px;opacity:.1;animation:grano .8s steps(1) infinite}  /* el mismo grano del fondo: el gris del retrato es de la foto y taparía el de atrás */
.sobre-txt{position:relative;z-index:1}  /* el texto queda encima de la parte vacía del retrato */
/* retrato: a oscuras; el puntero lo ilumina con una luz suave que se difumina hacia los bordes (la foto con luz aparece dentro de ese círculo) */
@property --r{syntax:'<length>';inherits:true;initial-value:0px}
.foto-noir{--r:0px;transition:--r .7s cubic-bezier(.2,.8,.2,1)}
.foto-noir:hover{--r:255px}
.foto-noir img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-noir .tinte{-webkit-mask-image:radial-gradient(circle var(--r) at var(--x,50%) var(--y,40%),#000 0%,rgba(0,0,0,.82) 28%,rgba(0,0,0,.4) 58%,transparent 100%);mask-image:radial-gradient(circle var(--r) at var(--x,50%) var(--y,40%),#000 0%,rgba(0,0,0,.82) 28%,rgba(0,0,0,.4) 58%,transparent 100%)}

/* Contacto */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:clamp(140px,24vh,280px);padding-bottom:clamp(100px,16vh,180px)}
.contacto h2{margin-bottom:56px}
.ct-der{display:flex;flex-direction:column;gap:28px;padding-top:6px}
.ct-der p{font-size:clamp(18px,1.4vw,21px);max-width:28ch}
.ct-btns{display:flex;gap:8px;flex-wrap:wrap}
body > main > .pie{margin:0 var(--gut);padding:0}

@media (max-width:860px){
  .dest-grid{grid-template-columns:1fr}.dest .casos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-cuerpo{grid-template-columns:1fr}
  .mp-lamina{padding-top:44px}
  .mp-escena{aspect-ratio:1/1.05;min-height:0}
  .mp-lamina figcaption{flex-direction:column;align-items:flex-start;gap:6px}
  .mp-partes{grid-template-columns:1fr 1fr}
  .mp-flujo ol{grid-template-columns:1fr 1fr;gap:28px 20px}
  .hero-in{grid-template-columns:1fr;gap:20px;padding-bottom:32px}
  .eq-cab{grid-template-columns:1fr;gap:20px}
  .ofi{height:clamp(420px,120vw,620px)}
  .ofi-menu{top:auto;bottom:0;left:0;right:0;width:auto;max-height:none;flex-direction:row;overflow:auto hidden;gap:2px}
  .ofi-menu > p{display:none}
  .ofi-menu > p.sub{display:flex;margin:0;padding:0 8px;height:auto;background:rgba(17,19,19,.8)}
  .ofi-menu .grupo{display:contents}
  .ofi-menu button{flex:none}
  .ofi-menu button.claro{position:static}
  .ofi-ayuda{bottom:auto;top:12px}
  .cerebro{grid-template-columns:1fr;gap:18px}
  .ofi canvas.ofi-cam{left:var(--gut);right:auto;top:12px;width:128px!important;height:auto!important}
  .ofi-cam-info{left:var(--gut);right:auto;top:100px;max-width:112px}
  .caso a,.grupo-h{grid-template-columns:1fr auto;grid-template-rows:auto auto auto;min-height:0}
  .tags{grid-column:1 / -1;grid-row:2}
  .mas{grid-column:2;grid-row:1}
  .grupo-h .mas{width:42px;height:42px}
  .tira{grid-column:1 / -1;grid-row:3;justify-content:flex-start;height:96px}
  .tira img{width:auto;height:96px}
  .qh-p{max-width:none}
  .qh-grid{grid-template-columns:1fr 1fr}
    .sobre,.contacto{grid-template-columns:1fr}
    .sobre{grid-template-areas:"txt" "foto" "carrera" "premios";gap:40px}
    .sobre-foto{margin:0 calc(-1 * var(--gut))}  /* a todo el ancho de la pantalla, con los hombros enteros */
  .premios{grid-template-columns:1fr 1fr}
}
.solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* celular: textos y controles más grandes (en compu quedan los tamaños de siempre). La trayectoria no se toca. */
@media (max-width:860px){
  .asc-txt small,.asc-estado{font-size:12.5px}
  .asc-pisos{font-size:13px}
  .asc-btn{min-height:60px}
  .ofi-menu > p,.ofi-menu button.mono{font-size:12px}
  .ofi-menu button.dos small{font-size:12px}
  .ofi-menu button{min-height:44px}
  .ofi-menu button b{font-size:14px}
  .cerebro .fuente,.cerebro .fuente.lado{font-size:12.5px}
  .mp-pt{width:34px;height:34px;margin:-17px 0 0 -17px;font-size:12px}
  .mp-ayuda,.mp-volver{font-size:12.5px}
  .mp-volver{min-height:42px;padding:0 14px}
  .mp-txt .mp-firma,.mp-num,.mp-n,.mp-fuentes{font-size:12.5px}
  .mp-num{width:28px;height:28px}
  .mp-partes{grid-template-columns:1fr}
  .mp-partes li{grid-template-columns:28px 1fr;padding:6px 0}
  .mp-partes p,.mp-flujo li p{font-size:15px}
  .mp-txt p{font-size:17px}
  .filtros button,.dest .filtros button{font-size:12.5px;min-height:42px}
  .filtros button small{font-size:11.5px}
  .dest-s,.tj-v,.dest-btn small,.tj-cap .mono{font-size:12.5px}
  .dest-btn{min-height:52px;font-size:17px}
  .tj-cap b{font-size:15px}.tj-cap small{font-size:13.5px}
  .grupo-h .tags span{font-size:12px}
}