/* Portfolio · mezcla de Lama Lama (interfaz flotante, filas de trabajos, oscuro) y Bennett & Clive
   (nombre abierto fijo, titular en esquinas, servicios sobre foto, lista centrada en el eje).
   Todo con los tokens del manual de marca. */
/* la tipografía, alojada en el sitio (Inter Tight variable, licencia OFL en fuentes-web/OFL.txt): sin pedidos a Google */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url(fuentes-web/inter-tight-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url(fuentes-web/inter-tight-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --negro:#0B0B0B; --carbon:#151515; --papel:#E7E4DD; --plata:#8C8C8C; --rojo:#E1251B;
  --rojo-foto:#DA231A;   /* el borde de la foto desenfocada: así no se ve el corte */
  --gris-foto:#1A1A1A;   /* el fondo del estudio en la foto nítida */
  --gutter:clamp(16px,2.6vw,40px);
}
*{box-sizing:border-box;margin:0}
html{background:var(--papel);scroll-behavior:smooth;scrollbar-width:none}   /* la barra del navegador se oculta: la del sitio está en barra.js */
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body{background:var(--papel);color:var(--negro);font:400 16px/1.5 "Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
p,li,figcaption,h1,h2,h3{text-wrap:pretty}   /* sin palabras sueltas al final del párrafo */
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.dato{font-weight:600;font-size:12px;line-height:1.3;text-transform:uppercase;letter-spacing:.02em}
.etiqueta{font-weight:600;font-size:12px;line-height:1.3;text-transform:uppercase;letter-spacing:.04em}
.saltar{position:fixed;left:16px;top:-60px;z-index:70;background:var(--negro);color:var(--papel);padding:12px 16px;border-radius:4px;font-weight:600;font-size:13px;transition:top .2s}
.saltar:focus{top:16px}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- pantalla de carga: el sello girando, el porcentaje y un parpadeo de verdad ---------- */
.carga{position:fixed;inset:0;z-index:50;background:var(--negro);color:var(--papel)}
.carga__barra{position:absolute;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between}
.carga__barra--arriba{top:18px;padding-bottom:12px;border-bottom:1px solid #2c2c2c}
.carga__barra--abajo{bottom:18px;padding-top:12px;border-top:1px solid #2c2c2c}
/* centrado sobre la línea de los ojos de la portada (48 % del alto): de ahí se abre después */
.carga__sello{position:absolute;left:50%;top:48%;width:min(48vmin,400px);aspect-ratio:1;transform:translate(-50%,-50%)}
.carga__sello img{position:absolute;inset:0;width:100%;height:100%}
.carga__anillo{will-change:transform}
/* lo que carga se ve en el filete de abajo, que se llena de izquierda a derecha */
.carga__barra--abajo::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:var(--avance,0%);background:var(--papel)}
html.cargando{overflow:hidden}
html:not(.js) .carga{display:none}
@media (max-width:760px){.carga__sello{width:min(72vw,320px)}}

/* ---------- transición: el parpadeo ---------- */
.parpado{position:fixed;inset:0;z-index:60;pointer-events:none}
.parpado span{position:absolute;left:0;right:0;height:50.5%;background:var(--negro);transform:scaleY(0);transition:transform .42s cubic-bezier(.7,0,.3,1)}
.parpado__arriba{top:0;transform-origin:top}
.parpado__abajo{bottom:0;transform-origin:bottom}
.parpado.cerrando span,.parpado.cerrado span{transform:scaleY(1)}
.parpado.cerrado span{transition:none}
.parpado.abriendo span{transition-duration:.52s;transition-timing-function:cubic-bezier(.2,.8,.2,1)}
.parpado.cerrando{pointer-events:auto}
/* hasta que corre transicion.js, la página que llega se pinta cerrada (sin destello) */
html.llega::after{content:"";position:fixed;inset:0;background:var(--negro);z-index:59}

/* ---------- interfaz flotante: la píldora con su menú y las fichas que se abren (Lama Lama) ---------- */
.flotante{position:fixed;inset:0 0 auto 0;z-index:20;pointer-events:none}
.pildora-caja{pointer-events:auto;position:absolute;top:16px;left:0;right:0;margin:0 auto;width:min(460px,calc(100vw - 2 * 216px))}   /* sin translate: las líneas finas quedan en píxeles enteros */
.pildora{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:48px;padding:0 54px;background:var(--carbon);box-shadow:inset 0 0 0 1px #2a2a2a;color:var(--papel);border-radius:4px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.pildora__texto{overflow:hidden;text-overflow:clip}
.pildora__ojo{position:absolute;left:7px;top:7px;width:34px;height:34px;display:grid;place-items:center;border-radius:2px;transition:background .2s}
.pildora__ojo img{width:30px;height:auto}
.pildora__ojo:hover{background:#262626}
.pildora__menu{position:absolute;right:7px;top:7px;width:34px;height:34px;border:0;border-radius:2px;background:transparent;color:inherit;cursor:pointer;transition:background .2s}
.pildora__menu:hover{background:#262626}
.pildora__menu span{position:absolute;left:9px;right:9px;height:2px;background:currentColor;transition:transform .35s cubic-bezier(.7,0,.3,1),top .35s cubic-bezier(.7,0,.3,1)}
.pildora__menu span:first-child{top:12px}
.pildora__menu span:last-child{top:20px}
.pildora__menu[aria-expanded="true"] span:first-child{top:16px;transform:rotate(45deg)}
.pildora__menu[aria-expanded="true"] span:last-child{top:16px;transform:rotate(-45deg)}

/* el panel se abre como una ventana, de arriba hacia abajo */
.menu{margin-top:6px;padding:10px 10px 10px;background:var(--carbon);box-shadow:inset 0 0 0 1px #2a2a2a;color:var(--papel);border-radius:4px;clip-path:inset(0 0 100% 0 round 4px);transition:clip-path .55s cubic-bezier(.7,0,.3,1)}
.menu.abierto{clip-path:inset(0 0 0 0 round 4px)}
.menu__item{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:1.04;font-size:clamp(30px,3vw,44px);border-radius:2px;transition:opacity .25s,transform .45s cubic-bezier(.2,.8,.2,1)}
.menu__item>span:first-child{padding-top:.08em}   /* lugar para la tilde de "Sobre mí" y "Con quiénes" */
.menu__n{font-weight:600;font-size:11px;letter-spacing:.04em;padding-top:.5em}
.menu:has(.menu__item:hover) .menu__item:not(:hover){opacity:.32}
.menu__item:hover{transform:translateX(8px)}
.menu__item{opacity:0;transform:translateY(14px)}
.menu.abierto .menu__item{opacity:1;transform:none}
.menu.abierto .menu__item:nth-child(2){transition-delay:.04s}.menu.abierto .menu__item:nth-child(3){transition-delay:.08s}
.menu.abierto .menu__item:nth-child(4){transition-delay:.12s}.menu.abierto .menu__item:nth-child(5){transition-delay:.16s}
.menu.abierto .menu__item:hover{transition-delay:0s}
.menu__fila{display:flex;justify-content:space-between;align-items:center;margin:18px 8px 12px;padding-top:12px;border-top:1px solid #2c2c2c}
.menu__chico{font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:none;border:0;color:inherit;padding:0;cursor:pointer}
.menu__chico:hover{text-decoration:underline;text-underline-offset:4px}
.menu__botones{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.menu__boton{display:flex;align-items:center;justify-content:center;height:44px;border:1px solid #3a3a3a;border-radius:2px;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.menu__boton:hover{border-color:var(--papel)}
.menu__boton--claro{background:var(--papel);color:var(--negro);border-color:var(--papel)}
.menu__boton--claro:hover{background:var(--rojo);border-color:var(--rojo);color:var(--papel)}
/* el resto de la página se desenfoca mientras el menú está abierto */
.velo{position:fixed;inset:0;z-index:19;background:rgba(11,11,11,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .45s}
.velo.visible{opacity:1;pointer-events:auto}

.fichas{pointer-events:auto;position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:6px;width:200px}
.ficha{display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 12px;border:0;background:var(--carbon);box-shadow:inset 0 0 0 1px #2a2a2a;color:var(--papel);border-radius:4px;font:inherit;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;text-align:left;cursor:pointer;transition:background .2s,color .2s}
.ficha:hover{background:#262626}
.ficha__signo{margin-left:auto;white-space:nowrap}
.ficha--clara{background:var(--papel);color:var(--negro);box-shadow:inset 0 0 0 1px rgba(11,11,11,.12)}
.ficha--clara:hover{background:#fff}
.ficha--idioma{border:0;font:inherit;font-weight:600;font-size:12px;letter-spacing:.03em;cursor:pointer;justify-content:center;gap:6px}
.ficha--idioma span,.menu__chico.ficha--idioma span{opacity:.45;transition:opacity .2s}
.ficha--idioma span.activo{opacity:1}
.ficha img{width:28px;height:28px;border-radius:2px;object-fit:cover}
/* el panel de cada ficha se despliega debajo, como el "This is us (+)" de Lama Lama */
/* se anima el alto (menu.js), así las fichas de abajo bajan y suben a la par del panel */
.ficha__panel{height:0;overflow:hidden;transition:height .55s cubic-bezier(.65,0,.35,1)}
.ficha__int{margin-top:4px;padding:10px;background:var(--carbon);color:var(--papel);border-radius:4px}
.ficha-caja--clara .ficha__int{background:var(--papel);color:var(--negro);box-shadow:inset 0 0 0 1px rgba(11,11,11,.12)}
.ficha__mail{font-weight:600;font-size:12px;letter-spacing:.02em;word-break:break-all;margin:2px 2px 12px}
.ficha__frase{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1;font-size:17px;margin:12px 2px}
.ficha__acciones{display:grid;gap:4px}
.ficha__accion{display:flex;align-items:center;justify-content:center;height:36px;width:100%;border:1px solid currentColor;border-radius:2px;background:none;color:inherit;font:inherit;font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.ficha__accion:hover{background:var(--papel);color:var(--negro)}
.ficha-caja--clara .ficha__accion:hover{background:var(--negro);color:var(--papel)}
.ficha__accion--llena{background:var(--negro);color:var(--papel);border-color:var(--negro)}
.ficha-caja--clara .ficha__accion--llena:hover{background:var(--rojo);border-color:var(--rojo)}
/* el retrato parpadea de vez en cuando */
.ficha__retrato{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px}
.ficha__retrato img{width:100%;height:100%;object-fit:cover}
.ficha__parpado::before,.ficha__parpado::after{content:"";position:absolute;left:0;right:0;height:50.5%;background:var(--negro);transform:scaleY(0);animation:parpadeo 4.6s infinite}
.ficha__parpado::before{top:0;transform-origin:top}
.ficha__parpado::after{bottom:0;transform-origin:bottom}
@keyframes parpadeo{0%,90%,100%{transform:scaleY(0)}94%{transform:scaleY(1)}}
.ficha__diapos{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--negro)}
.ficha__diapos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:0}
.ficha__diapos img.activa{opacity:1}
@media (max-width:760px){
  .pildora-caja{left:16px;right:16px;margin:0;width:auto}
  .fichas{display:none}   /* en el celular queda solo la píldora: todo está en el menú */
  .menu__item{font-size:clamp(30px,9vw,40px)}
}

/* ---------- el nombre: en la portada es la ventana; con el scroll se achica hacia los costados (Bennett & Clive) ---------- */
.marca-fija{position:fixed;inset:0;z-index:15;pointer-events:none;font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:1;opacity:var(--velo,1)}
/* las letras dejan ver la foto nítida, alineada con la cara de atrás; fuera de la foto, el gris del estudio */
.nf{position:absolute;left:0;top:0;padding:.18em .06em .12em;white-space:nowrap;will-change:transform;color:transparent;-webkit-text-fill-color:transparent;background:var(--gris-foto) url(img/mirada-nitida.webp) no-repeat;-webkit-background-clip:text;background-clip:text}
html:not(.js) .marca-fija{display:none}
/* el nombre fijo de todo el sitio, en negativo de lo que pase por debajo, con el título de la sección al medio */
.marca-negativa{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);z-index:16;display:flex;justify-content:space-between;align-items:center;padding:0 var(--gutter);pointer-events:none;
  color:#fff;mix-blend-mode:difference;font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(14px,1.45vw,22px);opacity:var(--velo,1)}
/* sobre el rojo (nombre.js): la ventana con la forma del nombre muestra lo de atrás en blanco y negro invertido y
   cortado: el rojo queda negro y lo que cruza texto negro, blanco */
.marca-roja{position:fixed;left:0;right:0;z-index:16;pointer-events:none;visibility:hidden;clip-path:url(#nombre-rojo);
  -webkit-backdrop-filter:grayscale(1) invert(1) brightness(.595) contrast(7.9);backdrop-filter:grayscale(1) invert(1) brightness(.595) contrast(7.9)}
.marca-negativa__centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;font-size:12px;letter-spacing:.04em}
.marca-negativa__centro.cambia{animation:titulo .5s cubic-bezier(.2,.8,.2,1)}
@keyframes titulo{from{clip-path:inset(-40% 0 100% 0);transform:translate(-50%,0)}to{clip-path:inset(-40% 0 -40% 0);transform:translate(-50%,-50%)}}

/* ---------- portada ---------- */
.mirada{height:175svh;position:relative;background:var(--rojo-foto)}
.escena{position:sticky;top:0;height:100svh;overflow:hidden}
.capa{position:absolute;inset:0}
.capa--roja{background:var(--rojo-foto)}
/* la cara: en pantallas verticales la foto vertical; en las horizontales la foto ancha (portfolio_fotos_ancha.py),
   con la persona en el mismo lugar y tamaño. Las dos van al alto de la pantalla y centradas.
   max-width:none: el tope del reset la estiraba en el celular */
.cara{position:absolute;top:0;left:50%;height:100%;width:auto;max-width:none;aspect-ratio:1255/1567;transform:translateX(-50%)}
@media (min-aspect-ratio:4/5){
  .cara{aspect-ratio:4258/1568}
  .nf{background-image:url(img/mirada-nitida-ancha.webp)}   /* la foto nítida de las letras, también ancha */
}
/* el lema, chico y abajo a la izquierda, sobre el filete */
.hero-lema{position:absolute;left:var(--gutter);bottom:calc(18px + 12px + 16px + 3svh);font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:1;font-size:clamp(28px,3.6vw,60px);padding:.16em 0 .1em;overflow:hidden}
.hero-lema span{display:block;transform:translateY(var(--sube,0));transition:transform 1s cubic-bezier(.2,.8,.2,1) .25s}
.pista{position:absolute;left:0;right:0;top:68%;text-align:center;transition:opacity .6s}
.pista.oculta{opacity:0}
@media (pointer:coarse){html:not(.ventana-tactil) .pista{display:none}}
@media (max-width:760px){.pista{top:76%}}
/* barra de datos de abajo, con su filete (Lama Lama) */
.hero-datos{position:absolute;left:var(--gutter);right:var(--gutter);bottom:18px;display:flex;justify-content:space-between;gap:16px;padding-top:12px;border-top:1px solid currentColor}
.hero-datos a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){
  .hero-datos span:nth-child(2),.hero-datos .reloj{display:none}
}

/* ---------- manifiesto: columna angosta en mayúscula ---------- */
.manifiesto{min-height:110svh;display:flex;align-items:center;padding:20svh var(--gutter);position:relative}
/* el sello: el anillo con el nombre gira (más rápido con el scroll y al pasar el mouse); el ojo queda quieto */
.manifiesto__sello{position:absolute;left:var(--gutter);top:50%;width:calc(50% - var(--gutter) - 2vw);transform:translateY(-50%);display:grid;place-items:center}
.sello{position:relative;width:min(30vw,440px);aspect-ratio:1}
.sello img{position:absolute;inset:0;width:100%;height:100%}
.sello__anillo{transform:rotate(var(--giro,0deg));will-change:transform}
@media (max-width:760px){.manifiesto{flex-direction:column;align-items:flex-start;gap:8svh}.manifiesto__sello{position:static;width:100%;transform:none}.sello{width:min(72vw,320px)}}
.manifiesto__col{margin-left:calc(50% + 2vw);max-width:460px}
.manifiesto__texto{font-weight:800;text-transform:uppercase;letter-spacing:-.025em;line-height:1.02;font-size:clamp(26px,2.5vw,40px)}
.boton{display:inline-block;margin-top:22px;padding:8px 18px;border:1.5px solid currentColor;border-radius:999px;font-weight:600;font-size:15px;transition:background .2s,color .2s,border-color .2s}
.boton:hover{background:var(--negro);color:var(--papel)}
@media (max-width:760px){.manifiesto__col{margin-left:0}.manifiesto .boton{margin-top:28px}}   /* en el celular el botón se despega del texto */
/* la lente: el texto está fuera de foco y la ventana del cursor lo enfoca */
.lente{position:relative;display:grid}
/* las dos copias en la misma celda: mismo ancho, mismas líneas, mismo lugar (antes la nítida iba
   superpuesta aparte y cortaba las líneas en otro lado) */
.lente>.manifiesto__texto{grid-area:1/1}
.lente__nitida{clip-path:inset(50% 50% 50% 50%)}
html.lente-viva .lente__base{filter:blur(7px);opacity:.7;transition:filter .6s,opacity .6s}
html:not(.lente-viva) .lente__base{visibility:hidden}   /* sin la ventana (menos movimiento) se lee la copia nítida, entera */
html:not(.lente-viva) .lente__nitida{clip-path:none}
.lente__pista{margin-top:14px;color:#55554f}
html:not(.lente-viva) .lente__pista{display:none}

/* ---------- trabajos: filas oscuras ---------- */
.trabajos{background:var(--carbon);color:var(--papel);padding:24svh 0 16svh;position:relative}
.trabajos__intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 var(--gutter) 10svh}
.trabajos__frase{max-width:15em;font-size:clamp(30px,3.6vw,58px);line-height:1.05;letter-spacing:-.025em;font-weight:500;text-indent:3.2em}
.filas{border-top:1px solid #2c2c2c}
.fila{border-bottom:1px solid #2c2c2c;transition:background .25s}
.fila:hover,.fila.abierta{background:#1c1c1c}
.fila__cab{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 60px minmax(0,1.6fr);align-items:start;gap:20px;width:100%;padding:22px var(--gutter);border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.fila__cab:focus-visible{outline-offset:-6px}
.fila__n{font-size:clamp(24px,2.3vw,38px);font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:1;padding-top:.06em}   /* los nombres de los proyectos, en la letra de los títulos */
/* el detalle se abre debajo, como en Lama Lama: descripción y botones */
.fila__det{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .6s cubic-bezier(.7,0,.3,1),visibility 0s .6s}
.fila.abierta .fila__det{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .6s cubic-bezier(.7,0,.3,1)}
.fila__det-int{min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2.6fr);gap:20px;padding:0 var(--gutter)}
.fila__intro{grid-column:2;max-width:24em;padding-top:6px;font-size:clamp(20px,1.8vw,28px);line-height:1.15;letter-spacing:-.015em;font-weight:500}
.fila__botones{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;padding-bottom:30px}
.fila__mas{transition:color .2s}
.fila.abierta .fila__mas{color:var(--rojo)}
.boton--lleno{background:var(--papel);color:var(--negro);border-color:var(--papel)}
.trabajos .boton:hover{background:var(--papel);color:var(--negro);border-color:var(--papel)}
.trabajos .boton--lleno:hover{background:var(--rojo);color:var(--papel);border-color:var(--rojo)}
@media (max-width:900px){.fila__det-int{grid-template-columns:1fr}.fila__intro,.fila__botones{grid-column:1}}
.fila__chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{background:var(--negro);color:var(--papel);padding:5px 8px;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;border-radius:2px}
.fila__mas{font-weight:600;font-size:12px;letter-spacing:.06em;padding-top:4px}
.fila__tira{display:flex;justify-content:flex-end;align-items:flex-start;gap:8px}
.fila__tira img{width:min(11vw,200px);height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:2px;filter:grayscale(1) contrast(1.08);transition:filter .45s,transform .45s}
/* mirar es ver en color: al pasar por la fila, las miniaturas recuperan el color */
.fila:hover .fila__tira img,.fila__cab:focus-visible .fila__tira img,.fila.abierta .fila__tira img{filter:none}
.fila:hover .fila__tira img:nth-child(2){transform:translateY(-6px)}
@media (max-width:900px){
  .trabajos__intro{flex-direction:column;align-items:flex-start}
  .fila__cab{grid-template-columns:1fr auto;gap:12px}
  .fila__chips{grid-row:2}
  .fila__mas{grid-column:2;grid-row:1}
  .fila__tira{grid-column:1 / -1;justify-content:flex-start}
  .fila__tira img{width:calc((100% - 16px)/3)}
}
@media (pointer:coarse){.fila__tira img{filter:none}}   /* sin mouse no hay "pasar por encima": van en color */

/* ---------- sobre mí: titular en esquinas, retrato que se abre desde los ojos y el recorrido ---------- */
.sobre{padding:22svh var(--gutter) 16svh}
.sobre .etiqueta{text-align:center}
/* las dos líneas pegadas, una en cada esquina (la segunda termina antes de las fichas fijas) */
.sobre__titular{display:flex;flex-direction:column;margin:6svh 0 10svh;font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:1.02;font-size:clamp(44px,8.4vw,150px)}
.sobre__titular span{white-space:nowrap}
.sobre__titular span:last-child{align-self:flex-end;margin-right:clamp(0px,14vw - 40px,190px)}
.sobre__cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.sobre__foto{position:sticky;top:90px}
.sobre__ventana{aspect-ratio:4/5;overflow:hidden;clip-path:inset(40% 6% 52% 6%);will-change:clip-path}
.sobre__ventana img{width:100%;height:100%;object-fit:cover}
.sobre__texto{padding-top:4svh;padding-right:clamp(0px,14vw - 40px,190px)}   /* deja libre la columna de las fichas fijas */
.sobre__bio{font-size:clamp(24px,2.3vw,38px);line-height:1.12;letter-spacing:-.02em;font-weight:500;text-indent:3.2em;max-width:20em}
.sobre__bio .linea:first-child>span{text-indent:3.2em}
.recorrido{list-style:none;padding:0;margin-top:12svh;border-top:1px solid var(--negro)}
.recorrido li{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:20px;row-gap:4px;padding:18px 0;border-bottom:1px solid rgba(11,11,11,.25)}
.recorrido__cuando{grid-row:span 2;padding-top:4px}
.recorrido__que{font-weight:800;text-transform:uppercase;letter-spacing:-.025em;line-height:1;font-size:clamp(20px,1.8vw,28px)}
.recorrido__det{color:#55554f;max-width:38em}
@media (max-width:900px){
  .sobre__cuerpo{grid-template-columns:1fr}
  .sobre__foto{position:relative;top:auto;max-width:520px}
  .sobre__titular span{white-space:normal}
  .sobre__titular span:last-child{text-align:right;margin-right:0}
}
@media (max-width:560px){.recorrido li{grid-template-columns:1fr}.recorrido__cuando{grid-row:auto}}
@media (prefers-reduced-motion:reduce){.sobre__ventana{clip-path:none}}
/* en el celular las secciones se acercan: los aires de la compu ahí quedan como pantallas vacías */
@media (max-width:760px){
  .trabajos{padding-top:10svh}
  .trabajos__intro{padding-bottom:6svh}
  .sobre{padding-top:9svh;padding-bottom:6svh}
  .sobre__titular{margin:3svh 0 6svh}
  .recorrido{margin-top:6svh}
}

/* ---------- servicios sobre foto: dentro de la foto la letra se vuelve roja ---------- */
.servicios{padding:22svh var(--gutter) 18svh}
.servicios .etiqueta{text-align:center;margin-bottom:8svh}
.servicios__marco{position:relative}   /* a lo ancho, para que la lista toque los mismos márgenes que JULIÁN y LEMPEL */
.servicios__foto{width:84%;margin:0 auto;aspect-ratio:4/3;object-fit:cover}
.servicios__lista{position:absolute;right:0;bottom:-6%;text-align:right;font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:1.02;font-size:clamp(40px,6.6vw,108px)}
.servicios__lista--sobre{color:var(--rojo);clip-path:inset(0 0 0 0)}
/* la copia que pasa arriba del nombre (pasar.js), alineada a la izquierda */
.servicios__lista.pasa-izq{left:0;right:0;text-align:left}
/* la copia de pasar.js va encima de la lista: solo sus ítems visibles reciben el mouse o el dedo */
ul.pasa-izq{pointer-events:none}
ul.pasa-izq li{pointer-events:auto}
@media (max-width:760px){.servicios{padding-top:7svh;padding-bottom:5svh}.servicios .etiqueta{margin-bottom:4svh}.clientes{padding-top:4svh}.servicios__foto{width:100%}.servicios__lista{position:relative;bottom:auto;margin-top:-1.2em}.servicios__lista--sobre,.servicios__lista.pasa-izq{position:absolute;left:0;right:0;bottom:0}}

/* ---------- con quiénes: dos columnas que se encuentran en el eje ---------- */
.clientes{padding:12svh var(--gutter) 22svh}
.clientes .etiqueta{text-align:center;margin-bottom:6svh}
.clientes__lista{position:relative;text-align:right;font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:1.06;font-size:clamp(36px,6vw,104px)}
.clientes{position:relative}
.clientes__lista.pasa-izq{position:absolute;left:var(--gutter);right:var(--gutter);text-align:left}

/* ---------- cierre: el contacto, sobre el rojo de la portada, con la ventana de los ojos que parpadea ---------- */
.cierre{position:relative;min-height:100svh;display:flex;flex-direction:column;gap:clamp(20px,3.6svh,40px);padding:clamp(88px,12svh,120px) var(--gutter) 18px;background:var(--rojo-foto);color:var(--negro)}
.cierre__arriba{padding-right:calc(216px - var(--gutter))}   /* deja libre la columna de las fichas fijas */
.cierre__texto{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px 40px;margin-top:clamp(14px,2.4svh,24px)}
.cierre__titulo{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:1;font-size:clamp(44px,6.6vw,112px);padding-top:.08em}
.cierre__bajada{font-size:clamp(20px,1.7vw,26px);line-height:1.2;letter-spacing:-.015em;font-weight:500;max-width:22em}
.cierre__botones{display:flex;flex-wrap:wrap;gap:8px}
.cierre__botones .boton{margin-top:0;font:inherit;font-weight:600;font-size:15px;background:none;color:inherit;cursor:pointer}
.cierre__botones .boton:hover{background:var(--negro);color:var(--papel);border-color:var(--negro)}
.cierre__botones .boton--lleno{background:var(--negro);color:var(--papel);border-color:var(--negro)}
.cierre__botones .boton--lleno:hover{background:var(--papel);color:var(--negro);border-color:var(--papel)}
/* la franja de los ojos de la foto nítida (proporción medida en el afiche Ventana: 52 % del ancho de la cara, 7,5 % del alto) */
.cierre__ojos{width:100%;max-width:720px;margin:0 auto;aspect-ratio:5.553;background:var(--gris-foto) url(img/mirada-nitida.webp) 50% 48.05%/192.3% auto no-repeat;clip-path:inset(50% 0 50% 0)}
.cierre__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;line-height:1.55;margin-top:auto}
.cierre__rotulo{margin-bottom:6px;opacity:.6}
.cierre__cols a:hover{text-decoration:underline;text-underline-offset:3px}
.cierre__pie{display:flex;justify-content:space-between;gap:16px;padding-top:12px;border-top:1px solid currentColor}
.cierre__pie a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){.cierre__cols{grid-template-columns:1fr 1fr;row-gap:28px}}
@media (max-width:760px){.cierre__titulo{font-size:13vw}.cierre__arriba{padding-right:0}}

/* ---------- scroll suave y textos que entran por línea ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.linea{display:block;overflow:hidden;padding:.16em 0 .16em;margin:-.16em 0}   /* el relleno deja lugar a las tildes de las mayúsculas y a las colas (g, p, y, comas) */
.linea>span{display:block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.visto .linea>span{transform:none}
.linea>span{text-indent:0}
.trabajos__frase .linea:first-child>span{text-indent:3.2em}   /* la sangría de la primera línea se mantiene al partir */

/* ---------- el avance del scroll (barra.js): la píldora se llena y la pestaña del costado ---------- */
/* la píldora se llena de un gris apenas más claro, detrás de la frase */
.pildora--llena{isolation:isolate;overflow:hidden}
.pildora__llenado{position:absolute;left:0;top:0;bottom:0;width:0;background:#2b2b2b;z-index:-1;pointer-events:none}
/* al costado: una pestaña oscura como las fichas, con la sección de costado; se arrastra como una barra común */
.barra{position:fixed;top:0;right:0;bottom:0;width:30px;z-index:56;transition:opacity .3s}
.barra.oculta{opacity:0;pointer-events:none}
.barra__pestana{position:absolute;top:0;right:0;width:24px;height:132px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;
  background:var(--carbon);color:var(--papel);border-radius:4px 0 0 4px;box-shadow:inset 0 0 0 1px #2a2a2a;
  font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:grab;user-select:none;transition:width .2s,background .2s}
.barra:hover .barra__pestana{width:30px}
/* con la pestaña, las fichas de arriba (y lo que les deja lugar) se corren hacia adentro */
@media (min-width:761px){
  html.con-pestana .fichas{right:40px}
  html.con-pestana .cierre__arriba{padding-right:calc(240px - var(--gutter))}
}
/* en pantallas angostas la pestaña es una tira finita, sin texto */
@media (max-width:760px){
  .barra{width:14px}
  .barra__pestana,.barra:hover .barra__pestana,.barra.arrastrando .barra__pestana{width:5px;height:64px;font-size:0;border-radius:3px 0 0 3px}
}
.barra.arrastrando .barra__pestana{width:30px;background:#262626;cursor:grabbing}

/* ---------- el cursor es una ventana ---------- */
/* una ranura (la forma de los ojos) que se agranda en los enlaces, muestra la cara nítida en la
   portada, se abre en 16:10 con el trabajo en las filas y enfoca el texto en el manifiesto */
html.cursor-propio,html.cursor-propio *{cursor:none!important}
.cursor{position:fixed;left:0;top:0;z-index:58;pointer-events:none;width:26px;height:8px;opacity:0;transition:opacity .25s}
.cursor.visible{opacity:1}
.cursor__marco{position:absolute;inset:0;overflow:hidden;background:var(--negro);border-radius:1px;transition:background-color .25s,box-shadow .25s}
.cursor--base.clara .cursor__marco{background:var(--papel)}
.cursor__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:0;transition:opacity .2s}
.cursor--ver .cursor__img{opacity:1}
.cursor--cara .cursor__marco{background-color:var(--gris-foto);background-repeat:no-repeat}
.cursor--lente .cursor__marco{background:transparent;box-shadow:inset 0 0 0 1.5px var(--negro)}
.cursor--enlace .cursor__marco{background:transparent;box-shadow:inset 0 0 0 1.5px var(--negro)}
.cursor.clara.cursor--enlace .cursor__marco,.cursor.clara.cursor--lente .cursor__marco{box-shadow:inset 0 0 0 1.5px var(--papel)}
.cursor__pie{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);background:var(--papel);color:var(--negro);padding:8px 12px;border-radius:4px;white-space:nowrap;opacity:0;transition:opacity .2s}
.cursor--ver .cursor__pie:not(:empty){opacity:1}
.cursor--ampliar .cursor__marco{opacity:0}
.cursor--ampliar .cursor__pie{opacity:1;bottom:auto;top:50%;transform:translate(-50%,-50%)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fila__tira img,.marca-fija,.marca-negativa__centro,.menu,.menu__item,.ficha__panel,.fila__det,.hero-lema span{transition:none!important}
  .ficha__parpado::before,.ficha__parpado::after{animation:none}
  /* sin movimiento los textos no se apartan del nombre fijo (pasar.js está apagado): el nombre chico no se
     muestra, así no pisa nada; el grande de la portada sigue */
  .marca-negativa,.marca-roja{display:none!important}
}

/* ---------- 404 (la política de seguridad no deja <style> en la página) ---------- */
/* 404: el ojo cerrado. Una franja vacía donde deberían estar los ojos. */
.p404{min-height:100svh;background:var(--rojo-foto);position:relative;overflow:hidden}
.p404__franja{position:absolute;left:50%;top:44%;width:min(52vh,90vw);height:7.5vh;transform:translateX(-50%);background:var(--negro)}
.p404 h1{position:absolute;left:var(--gutter);top:calc(84px + 1vh);font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:1;font-size:clamp(64px,12.5vw,230px)}
.p404__texto{position:absolute;right:var(--gutter);bottom:calc(64px + 2vh);text-align:right;max-width:26em}
.p404__texto p{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;font-size:clamp(20px,2vw,30px)}
.p404__texto .boton{margin-top:18px}
.p404 .hero-datos{color:var(--negro)}