/* Quién soy, tercera vuelta (quien-soy-z, 11/11/2026): la página Studio de Exo Ape, medida en vivo a 1536 × 695 y 390 × 844.
   Medidas de Exo Ape que se copian (a 1536): margen 128 px = 8,33vw; columna de texto a 457 px = 29,75vw; título 10vw (aquí 8,6vw
   para que no pise la cara); intro y párrafos 25,6 px = 1,67vw; títulos de bloque 15 px; la cita como su «Partners», 55 px = 3,6vw.
   A 390: margen 31 px = 8vw; título 62 px = 16vw; párrafos 18,7 px (aquí 19); etiquetas 14,6 px (aquí 15, por legibilidad).
   Movimiento: líneas que suben tras una máscara, imágenes que se destapan de abajo arriba con zoom que se asienta, parallax suave
   de la foto. 1000 ms, curva expo (cubic-bezier(.19,1,.22,1)). Con «reducir movimiento», todo quieto. */
@font-face{font-family:"Inter Tight";font-weight:300 500;font-display:swap;src:url(../fonts/inter-tight-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-display:swap;src:url(../fonts/instrument-serif-italic-latin.woff2) format("woff2")}

:root{--fondo:#0d0e13;--papel:#f4f0ec;--suave:rgba(244,240,236,.74);--raya:rgba(244,240,236,.16);
  --m:8.33vw;--col:21.42vw;--curva:cubic-bezier(.19,1,.22,1);--dur:1000ms}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--fondo);-webkit-text-size-adjust:100%}
body{color:var(--papel);font-family:"Inter Tight",system-ui,sans-serif;font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- 1. Arriba ---------- */
.hero{position:relative;min-height:max(118svh,760px);overflow:hidden;isolation:isolate}
.hero-foto{position:absolute;inset:0;z-index:-1}
.hero-foto .par{position:absolute;inset:-6% 0 -14%;will-change:transform}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:100% 22%}
/* abajo, la foto se funde con el fondo de la página */
.hero-foto::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(180deg,rgba(13,14,19,0),var(--fondo) 92%)}
.hero-tx{position:relative;padding:calc(48svh - 5vw) var(--m) 0}
.titulo{font-weight:300;font-size:8.6vw;line-height:1;letter-spacing:-.035em;max-width:7.2em}
.sub{margin-top:2.4vw;font-size:1.67vw;line-height:1.33;max-width:23em;color:var(--papel)}

/* ---------- bloques: título pequeño a la izquierda, párrafo a la derecha ---------- */
.bloque{position:relative;display:grid;grid-template-columns:var(--col) minmax(0,1fr);padding:clamp(120px,15vw,240px) var(--m) 0;align-items:start}
.bloque > .etq{grid-column:1;padding-left:0;margin-top:.5em}
.bloque > .texto,.bloque > .cita{grid-column:2}
.etq{font-size:15px;font-weight:400;line-height:1.5;letter-spacing:.005em;color:var(--papel);display:flex;align-items:center;gap:12px}
/* la crucecita de Exo Ape, aquí una luz pequeña */
.etq i{position:relative;width:9px;height:9px;flex:none}
.etq i::before,.etq i::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%)}
.etq i::before{width:9px;height:1px}.etq i::after{width:1px;height:9px}
.texto{font-size:max(19px,1.67vw);line-height:1.33;max-width:22.5em;color:var(--papel)}
.cita{font-size:max(30px,3.6vw);line-height:1.12;letter-spacing:-.03em;max-width:14em}
.dicen{padding-top:clamp(140px,17vw,280px)}

/* ---------- Qué hago: tres imágenes escalonadas ---------- */
.hago{grid-template-rows:auto auto}
.collage{grid-column:1 / -1;position:relative;height:39vw;margin:0 0 clamp(80px,9vw,140px)}
.collage figure{position:absolute}
.c-1{left:0;top:0;width:26.3vw}                      /* 404 × 572 en Exo */
.c-1 .rv{aspect-ratio:404/530}
.c-2{left:34.5vw;top:6vw;width:36.8vw}               /* 565 × 378 */
.c-2 .rv{aspect-ratio:3/2}
.c-3{right:0;top:16vw;width:14vw}                    /* 185 × 260, algo más grande para que se lea */
.c-3 .rv{aspect-ratio:912/900}
.collage .rv img{width:100%;height:100%;object-fit:cover}
.c-1 .rv img{object-position:50% 30%}
.hago > .etq{grid-row:2}
.hago > .texto{grid-row:2}
figcaption{font-size:15px;color:var(--suave);margin-top:12px}

/* la pieza de Trabajos: foto del local desenfocada, la web en el ordenador y en el móvil */
.pieza{position:relative;overflow:hidden;background:#15161b}
.pz-fondo{position:absolute;inset:-6%;background-size:cover;background-position:50% 50%;filter:blur(4px) saturate(1.15) brightness(.8)}
.pieza .par{position:absolute;inset:-8% 0;will-change:transform}
.pz-centro{position:absolute;left:9%;top:50%;width:70%;aspect-ratio:1500/938;transform:translateY(-50%);border-radius:6px;overflow:hidden;box-shadow:0 30px 60px -18px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.pz-centro img{width:100%;height:100%;object-fit:cover}
.pz-tel{position:absolute;right:9%;bottom:10%;width:17%;aspect-ratio:600/1298;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -18px rgba(0,0,0,.75),0 0 0 3px #15161b,0 0 0 4px rgba(255,255,255,.14)}
.pz-tel img{width:100%;height:100%;object-fit:cover}
.pz-tel.solo{left:50%;right:auto;top:50%;bottom:auto;width:30%;transform:translate(-50%,-50%);border-radius:18px}

/* ---------- imagen a sangre ---------- */
.ancha{margin-top:clamp(120px,15vw,240px)}
.ancha .rv{height:55.5vw;max-height:92svh}            /* 1536 × 853 en Exo */
.ancha .pz-centro{left:50%;width:min(58%,calc(92svh * 1.15));transform:translate(-50%,-50%);border-radius:8px}
.ancha .pz-tel{right:calc(21% - 4vw);width:min(11.5%,calc(92svh * .22));bottom:8%;border-radius:18px}
.ancha figcaption{padding:0 var(--m)}

/* ---------- Trabajos (como «Recognition») ---------- */
.trabajos{grid-template-columns:var(--col) minmax(0,1fr) 26vw;column-gap:4vw;padding-bottom:clamp(120px,14vw,220px)}
.lista{grid-column:2;list-style:none;border-top:1px solid var(--raya)}
.lista a{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--raya);text-decoration:none;transition:color .4s}
.lista .mini{display:none}
.lista .n{font-size:max(21px,1.67vw);line-height:1.3;letter-spacing:-.01em}
.lista .l{font-size:max(16px,1.11vw);color:var(--suave)}
.lista .fl{font-size:18px;transform:translateX(-6px);opacity:0;transition:transform .6s var(--curva),opacity .4s}
.lista a:hover .fl,.lista a:focus-visible .fl,.lista a.activo .fl{opacity:1;transform:none}
.lista a:focus-visible{outline:2px solid var(--papel);outline-offset:4px}
.previa{grid-column:3;grid-row:1 / span 2;position:sticky;top:120px}
.previa .rv{aspect-ratio:4/5}
.previa .pz-fondo{transition:opacity .5s}

/* ---------- movimiento (solo con html.anima) ---------- */
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.li{display:block}
.anima [data-rev] .li{transform:translate3d(0,110%,0);transition:transform var(--dur) var(--curva);transition-delay:calc(var(--d,0ms) + var(--i,0) * 90ms)}
.anima [data-rev].ve .li{transform:none}
.anima .etq[data-rev]{opacity:0;transform:translate3d(0,14px,0);transition:opacity 800ms ease,transform var(--dur) var(--curva)}
.anima .etq[data-rev].ve{opacity:1;transform:none}
.anima .revela[data-rev] .rv{clip-path:inset(100% 0 0 0);transition:clip-path 1200ms var(--curva);transition-delay:var(--d,0ms)}
.anima .revela[data-rev] .rv > img,.anima .revela[data-rev] .pz-centro,.anima .revela[data-rev] .pz-tel{transition:transform 1400ms var(--curva),translate 1400ms var(--curva);transition-delay:var(--d,0ms)}
.anima .revela[data-rev] .rv > img{transform:scale(1.18)}
.anima .revela[data-rev] .pz-tel{translate:0 40px}
.anima .revela[data-rev].ve .rv{clip-path:inset(0 0 0 0)}
.anima .revela[data-rev].ve .rv > img{transform:none}
.anima .revela[data-rev].ve .pz-tel{translate:0 0}
.anima .lista[data-rev] li{opacity:0;transform:translate3d(0,18px,0);transition:opacity 800ms ease,transform var(--dur) var(--curva);transition-delay:calc(var(--i,0) * 80ms)}
.anima .lista[data-rev].ve li{opacity:1;transform:none}
.anima .hero-foto{opacity:0;transition:opacity 1600ms ease}
.anima .hero-foto.ve{opacity:1}
.anima .hero-foto img{transform:scale(1.08);transition:transform 2200ms var(--curva)}
.anima .hero-foto.ve img{transform:none}

/* ---------- móvil: título arriba, foto debajo, bloques uno debajo de otro ---------- */
@media (max-width:820px){
  :root{--m:max(16px,8vw)}
  .hero{min-height:0;display:flex;flex-direction:column-reverse}
  .hero-foto{position:relative;inset:auto;height:auto;aspect-ratio:4/5;overflow:hidden;margin-top:28px;z-index:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);mask-image:linear-gradient(180deg,transparent 0,#000 18%)}
  .hero-foto .par{inset:-5% 0}
  .hero-foto img{object-position:50% 30%}
  .hero-foto::after{height:24%}
  .hero-tx{padding:150px var(--m) 0}
  .titulo{font-size:16vw;line-height:1;letter-spacing:-.04em}
  .sub{font-size:19px;line-height:1.33;margin-top:22px;max-width:19em}
  .bloque,.trabajos{display:block;padding:96px var(--m) 0}
  .etq{margin:0 0 18px}
  .texto{font-size:19px;line-height:1.36}
  .cita{font-size:30px;line-height:1.17}
  .dicen{padding-top:110px}
  .collage{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 56px}
  .collage figure{position:relative;left:auto;right:auto;top:auto;width:auto}
  .c-1{grid-column:1;grid-row:1 / span 2}
  .c-2{grid-column:1 / -1;grid-row:3}
  .c-3{grid-column:2;grid-row:1;margin-top:64px}
  .c-2 .rv{aspect-ratio:4/3}
  .collage .pz-centro{left:7%;width:72%}
  .collage .pz-tel{right:6%;width:20%;border-radius:10px}
  .ancha{margin-top:96px}
  .ancha .rv{height:auto;aspect-ratio:4/5;max-height:none}
  .ancha .pz-centro{width:84%;top:38%}
  .ancha .pz-tel{right:12%;width:30%;bottom:6%;border-radius:16px}
  .lista a{grid-template-columns:88px 1fr auto;gap:4px 14px;padding:14px 0;align-items:center}
  .lista .mini{display:block;grid-row:1 / span 2;width:88px;aspect-ratio:1500/938;height:auto;object-fit:cover;border-radius:4px}
  .lista .n{grid-column:2;font-size:20px}
  .lista .l{grid-column:2;font-size:15px}
  .lista .fl{grid-column:3;grid-row:1 / span 2;opacity:1;transform:none}
  .previa{display:none}
  .trabajos{padding-bottom:110px}
}
/* pie común: en esta página, nada por debajo de 15 px */
.pc-pie,.pc-pie *{font-size:15px!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}