/* ============================================================
   Reciclarte Florida — landing
   Diseño 2a: retícula de mosaico con juntas gruesas sobre negro,
   paleta del logo (rojo #d8402a / azul #1f7fc9), tipografía blanca.
   --p = avance de scroll de toda la página (0→1)
   --h = avance sobre el hero, primer viewport (0→1). No vive en :root:
        el JS la escribe solo en los elementos que la usan (.scrim, .glow,
        .dust, .logo-frame, .logo-mosaic, .scroll-cue); en :root cada
        cuadro invalidaba el estilo del documento entero.
   ============================================================ */

:root{
  --p:0;
  --s:56px;                  /* lado de cada tesela del logo; lo fija el JS */
  --f:0px;                   /* sin cenefa alrededor de la obra del hero */
  --fm:0px;                  /* sin margen: la cenefa queda encuadrada */
  --fb:0px;                  /* sin cenefa: las fotos van al filo */
  --fmb:0px;
  /* Dónde vive la obra en el hero: a la derecha, centrada en el alto que
     queda bajo la cabecera (en móvil se recalcula desde el borde superior). */
  --logo-x:65%;
  --logo-y:calc(var(--head-h) + (100vh - var(--head-h)) / 2);
  --logo-h:calc(var(--s) * 10 + 9px + var(--f) * 2);   /* alto del marco: 10 filas, 9 juntas, cenefa */
  --main-pt:92px;            /* padding superior del main (bajo la cabecera) */
  /* Paleta "Inspiración mosaico", tomada de la obra */
  --azul-noche:#0B3C5D;      /* fondo oscuro del mosaico   */
  --azul-turquesa:#008094;   /* sombras intermedias        */
  --celeste:#62B6CB;         /* destellos e iluminaciones  */
  --terracota:#C85A17;       /* plumas y tonos cálidos     */
  --marron:#6E3219;          /* sombras de plumaje/cabello */
  --beige-dorado:#D4A359;    /* luces en la piel           */
  --beige-suave:#E8C39E;     /* base clara de las venecitas*/

  --naranja:#E86F2E;         /* acento de texto: 6.7:1 sobre negro */

  --bg:#000000;              /* negro puro                 */
  --panel:#061A2A;           /* azul noche casi negro: fondo de los bloques */
  --line:rgba(232,195,158,.26);   /* reglas finas entre secciones */
  --fg:var(--beige-suave);
  --muted:rgba(232,195,158,.88);  /* ≈9:1 sobre negro */
  --faint:rgba(232,195,158,.76);  /* ≈7:1 sobre negro; nunca menos de 4.5:1 */
  --focus:var(--beige-suave);
  --gap:10px;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{overflow-x:clip;scrollbar-gutter:stable}   /* la barra no aparece de golpe y corre todo */
/* Lenis toma el control del scroll: la página se desplaza con inercia. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
body.is-loading,body.is-locked{overflow:hidden}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  /* Nada de overflow-x aquí: en el body, un overflow-x:hidden convierte el
     eje vertical en `auto` (regla de CSS) y el body pasa a ser un contenedor
     de scroll propio. Safari de iPhone le manda el primer gesto a ese
     contenedor —que no tiene nada que scrollear— y recién el segundo llega a
     la página. Lo horizontal ya lo recorta html con overflow-x:clip. */
}

a{color:inherit;text-decoration:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

/* Salto al contenido: fuera de pantalla hasta que recibe el foco */
.skip-link{
  position:fixed;top:12px;left:12px;z-index:100;
  padding:10px 14px;
  background:var(--beige-suave);color:var(--bg);
  font:500 14px var(--mono);letter-spacing:.06em;
  transform:translateY(-200%);
  transition:transform .2s ease;
}
.skip-link:focus-visible{transform:none;outline-color:var(--naranja)}

/* ---------------------------------------------------- fondo -- */

/* Avance de la ruptura: valor inicial en cada elemento que lo usa (main.js
   lo actualiza ahí, uno por uno, nunca en :root). */
.scrim,.glow,.dust,.logo-frame,.logo-mosaic,.scroll-cue{--h:0}

.backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:layout paint;          /* el fondo no invalida el resto de la página */
}

/* Las placas se hunden en el negro: velo parejo sobre todas. */
.tiles{
  opacity:.5;
  display:grid;
  grid-auto-flow:dense;
  gap:var(--gap);
  padding:var(--gap);
}
/* Cerca de la obra las placas son menos y más grandes: algunas ocupan
   2×2 celdas (con la venecita al doble) y otras faltan, y queda el negro. */
.tiles i.is-big{grid-column:span 2;grid-row:span 2}
.tiles i.is-off{visibility:hidden}

.tiles i{
  display:block;
  position:relative;
  filter:brightness(var(--lum,1));
  box-shadow:
    0 18px 44px rgba(0,0,0,.85),
    0 3px 8px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.7);
}
/* Luz rasante: brilla arriba-izquierda, se apaga abajo-derecha. */
.tiles i::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.015) 35%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.5) 100%);
}

/* Velo: negro a la izquierda para el texto, viñeta en las esquinas,
   y la zona de la obra despejada. */
.scrim{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 100% at 56% 54%, rgba(0,0,0,0) 42%, rgba(0,0,0,.82) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.08) 24%,
      rgba(0,0,0,.08) 52%,
      rgba(0,0,0,.96) 100%);
}

/* Pasado el hero ya no hay logo a la derecha: el velo se empareja para
   que las teselas no compitan con el contenido. */
.scrim::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  opacity:var(--h);
  will-change:opacity;
}

/* Luz de taller: un halo de azul noche detrás de la obra (como una lámpara
   sobre la mesa) y un rescoldo cálido abajo a la izquierda, bajo el texto.
   Se apaga con la obra al hacer scroll. */
.glow{
  position:absolute;inset:0;
  background:
    radial-gradient(44vw 60vh at var(--logo-x) var(--logo-y),
      rgba(11,60,93,.62) 0%, rgba(11,60,93,.26) 38%, rgba(8,40,62,.08) 60%, rgba(0,0,0,0) 74%),
    radial-gradient(40vw 34vh at 10% 100%,
      rgba(200,90,23,.13) 0%, rgba(200,90,23,.04) 45%, rgba(0,0,0,0) 72%);
  opacity:calc(1 - var(--h) * 2.5);
  will-change:opacity;
}

/* Polvo de teselas: piezas de 3–5 px, beige y terracota, que caen despacio
   por todo el alto. Solo transform y opacity; se apagan con la obra. */
.dust{position:absolute;inset:0;opacity:calc(1 - var(--h) * 2.5);will-change:opacity}
.dust i{
  position:absolute;left:var(--x,50%);top:-2vh;
  width:var(--sz,4px);height:var(--sz,4px);
  background:var(--c,var(--beige-suave));
  opacity:0;
  animation:dust-fall var(--d,22s) linear var(--dl,0s) infinite;
}
@keyframes dust-fall{
  0%  {transform:translate(0,0) rotate(0deg);opacity:0}
  10% {opacity:var(--o,.3)}
  82% {opacity:var(--o,.3)}
  100%{transform:translate(var(--dx,20px),106vh) rotate(var(--r,220deg));opacity:0}
}

/* Lienzo del anillo del marco (misma pila que el DOM: bajo el logo) */
.ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* El logo se arma al cargar y se fragmenta al bajar */
.logo-mosaic{
  position:absolute;
  left:var(--logo-x);top:var(--logo-y);
  transform:translate(-50%,-50%) rotate(-2deg);
  display:grid;
  grid-template-columns:repeat(7,var(--s));
  gap:1px;                        /* junta fina: la retícula no se lee como reja (LOGO_GAP en main.js) */
}

/* Marco de venecitas alrededor de la obra. Mide lo que mide la retícula
   más el grosor; el hueco interior lo tapa un negro con filo dorado, y la
   obra armada se apoya encima. Aparece al final del armado y se va antes
   que las piezas al hacer scroll, para que la ruptura sea de piezas sueltas. */
.logo-frame{
  display:none;                   /* sin cenefa alrededor de la obra */
  position:absolute;
  left:var(--logo-x);top:var(--logo-y);
  width:calc(var(--s) * 7 + 6px + var(--f) * 2);     /* 6 juntas de 1px */
  height:calc(var(--s) * 10 + 9px + var(--f) * 2);   /* 9 juntas de 1px */
  transform:translate(-50%,-50%) rotate(-2deg) scale(1.03);
  opacity:0;
  isolation:isolate;              /* la sombra (::before, z -1) queda dentro del marco */
  transition:opacity 1s ease .85s,transform 1.2s cubic-bezier(.2,.8,.2,1) .85s;
  will-change:opacity;
  pointer-events:none;
}
.logo-frame::before{
  content:'';position:absolute;inset:0;z-index:-1;
  box-shadow:
    0 46px 110px rgba(0,0,0,.95),
    0 10px 30px rgba(0,0,0,.8),
    0 0 140px rgba(232,195,158,.07);
}
/* La cenefa vive en una capa que desborda el marco: las piezas del borde
   asoman y la silueta queda irregular, no recortada a regla. */
.logo-ring{
  position:absolute;inset:calc(-1 * var(--fm));
  background-repeat:no-repeat;
  pointer-events:none;
}
.logo-frame-inner{
  position:absolute;
  inset:var(--f);
  background:#000;
  box-shadow:
    inset 0 0 0 1px rgba(212,163,89,.55),
    inset 0 0 26px rgba(0,0,0,.9);
}
.is-assembled .logo-frame{
  opacity:1;
  transform:translate(-50%,-50%) rotate(-2deg) scale(1);
}
/* Al romperse, el anillo se dibuja en canvas (main.js); aquí solo se
   apagan el interior, la placa y la sombra. */
.is-assembled .logo-frame-inner,
.is-assembled .logo-frame::before{opacity:calc(1 - var(--h) * 12)}
/* se desvanecen en su propia capa: no repintan la sombra de 110 px en cada frame */
.logo-frame-inner,.logo-frame::before{will-change:opacity}   /* se apagan apenas empieza la caída */


/* i = posición (dispersa → armada → rota por scroll); b = la imagen,
   que además flota mientras carga. */
.logo-mosaic i{
  display:block;
  width:var(--s);height:var(--s);
  opacity:.85;
  will-change:transform,opacity;
  transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.55);
  transition:transform var(--dur) cubic-bezier(.2,.8,.2,1) var(--delay),
             opacity calc(var(--dur) * .66) ease var(--delay);
}
.logo-mosaic b{
  display:block;width:100%;height:100%;
  background-image:url('assets/logo.webp');
  background-repeat:no-repeat;
  background-size:calc(var(--s) * 7) calc(var(--s) * 10);
  background-position:calc(var(--s) * -1 * var(--c)) calc(var(--s) * -1 * var(--r));
}
/* Mientras carga, cada pieza deriva despacio por un recorrido propio
   de tres puntos, sin volver nunca exactamente al mismo lugar. */
.is-loading .logo-mosaic b{
  animation:float var(--fd,9s) ease-in-out var(--fdl,0s) infinite;
}
@keyframes float{
  0%  {transform:translate(0,0) rotate(0deg) scale(1)}
  33% {transform:translate(var(--fx,40px),var(--fy,-50px)) rotate(var(--fr,12deg)) scale(1.06)}
  66% {transform:translate(var(--gx,-45px),var(--gy,30px)) rotate(var(--gr,-10deg)) scale(.96)}
  100%{transform:translate(0,0) rotate(0deg) scale(1)}
}

/* Ya disuelto: la capa se retira del todo, no queda nada quieto detrás. */
.logo-mosaic.is-gone,.logo-frame.is-gone{visibility:hidden}

/* Estado armado: en su sitio; al hacer scroll se desarman en proporción
   directa, cada pieza hacia el lugar del que vino. Solo transform y
   opacity: ambas se componen en GPU sin repintar. */
.is-assembled .logo-mosaic i{
  opacity:calc(1 - var(--h) * 2.5);    /* llega a 0 al 40 % del hero */
  /* al romperse caen por la línea del camino, no en cualquier dirección */
  transform:translate(calc(var(--h) * 2 * var(--bx,var(--dx))),calc(var(--h) * 2 * var(--by,var(--dy))))
            rotate(calc(var(--h) * 2 * var(--brot,var(--rot))));
}


/* ------------------------------------------------- retícula -- */

/* Doce columnas a todo el ancho. Sin separación vertical entre filas:
   el ritmo lo pone cada bloque con su margen superior (múltiplos de 8;
   entre secciones, 18–22 vh). Lenguaje: tipografía sobre negro, reglas
   finas (--line) y fotos enmarcadas. */
:root{
  --gutter:80px;             /* margen lateral: lo comparte la cabecera fija (la cenefa asoma 20px más) */
  --rg:112px;                /* respiro entre bloques de una misma sección */
  --sg:24vh;                 /* respiro entre secciones */
}
.mosaic{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:24px;
  row-gap:0;
  padding:var(--main-pt) var(--gutter) 0;
  max-width:1600px;
  margin:0 auto;
}
/* todo el contenido va por encima del fondo fijo */
.mosaic > *{position:relative;z-index:1}

/* Escala tipográfica (los nombres quedan por compatibilidad; los valores
   subieron un escalón): mono 13 / 14 / 15 · texto 19 / 24 / 34 / 48 / 72.
   El mono nunca baja de 13px, salvo la cenefa del logo. */
:root{
  --t-12:13px;--t-14:14px;--t-17:19px;--t-22:24px;
  --t-32:clamp(30px,2.8vw,34px);   /* títulos de sección, en peso 400 */
  --t-48:clamp(30px,4vw,48px);
  --t-72:clamp(38px,5vw,72px);
}

/* -------------------------------------------- pantalla de carga */

/* -------------------------------------------- pantalla de carga */

.loading{
  position:fixed;inset:0;z-index:60;
  background:rgba(0,0,0,.66);
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:9vh;
  transition:opacity .9s ease;
}
.is-loaded .loading{opacity:0;pointer-events:none}

.loader{display:flex;flex-direction:column;align-items:center;gap:16px}
.loader-tiles{display:grid;grid-template-columns:repeat(8,9px);gap:2px}
.loader-tiles i{
  display:block;width:9px;height:9px;
  opacity:0;
  animation:piece-in 2.6s ease-in-out infinite;
}
@keyframes piece-in{
  0%  {opacity:0;transform:translate(-12px,14px) rotate(40deg) scale(.3)}
  28% {opacity:1;transform:none}
  70% {opacity:1;transform:none}
  100%{opacity:0;transform:translate(8px,-10px) rotate(-25deg) scale(.4)}
}
.loader-text{font:400 11px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}

/* Mientras carga, el contenido espera (la cabecera también: queda debajo
   del velo y aparece con .is-loaded). */
.mosaic,.site-head{transition:opacity .8s ease}
.is-loading .mosaic,.is-loading .site-head{opacity:0}

/* ------------------------------------------- cabecera ------- */

/* Barra fija: negro con algo de transparencia y desenfoque; la regla
   inferior solo aparece cuando hay scroll (.is-scrolled, la pone el JS). */
:root{--head-h:68px}
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:30;
  height:var(--head-h);
  background:rgba(0,0,0,.78);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:opacity .8s ease,border-color .35s ease;
}
.is-scrolled .site-head{border-bottom-color:var(--line)}
.site-head-in{
  max-width:1600px;height:100%;margin:0 auto;
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* La marca: la obra en chico, sin encuadre, y el nombre en mono */
.brand{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:14px;
  padding:4px 0;
  color:var(--fg);
}
.brand-logo{
  display:block;width:auto;height:40px;
  background:#000;
  transition:opacity .3s ease;
}
.brand:hover .brand-logo,.brand:focus-visible .brand-logo{opacity:.82}
.brand-name{
  font:500 13px/1 var(--mono);
  letter-spacing:.22em;
  white-space:nowrap;
}

/* Secciones en línea: número en naranja, texto apagado; la actual en
   blanco con una tesela debajo, como la del lomo de antes. */
.site-nav{display:flex;align-items:center;gap:30px;min-width:0}
.site-nav a{
  position:relative;
  display:inline-flex;align-items:baseline;gap:9px;
  padding:8px 0;
  font:400 14px/1 var(--mono);
  letter-spacing:.06em;
  color:var(--muted);
  white-space:nowrap;
  transition:color .3s ease;
}
.site-nav a b{font-weight:500;color:var(--naranja);letter-spacing:.1em}
.site-nav a::after{
  content:'';
  position:absolute;left:50%;bottom:-6px;
  width:7px;height:7px;margin-left:-3.5px;
  background:var(--terracota);
  transform:rotate(14deg) scale(0);
  opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease;
}
.site-nav a:hover,.site-nav a:focus-visible{color:#fff}
.site-nav a.is-active{color:#fff}
.site-nav a.is-active::after{transform:rotate(-8deg) scale(1);opacity:1}
/* «todas las obras»: sale a otra página; separado y en la sans */
.site-nav a.nav-all{
  margin-left:18px;
  font:400 15px/1 var(--sans);
  letter-spacing:0;
  color:#fff;
  text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line);
  transition:text-decoration-color .3s ease;
}
.site-nav a.nav-all::after{display:none}
.site-nav a.nav-all:hover,.site-nav a.nav-all:focus-visible{text-decoration-color:var(--naranja)}

/* Móvil: tres teselas sueltas abren el panel (se muestra en ≤900px) */
.nav-toggle{
  display:none;
  position:relative;z-index:2;
  width:44px;height:44px;margin-right:-10px;
  background:none;border:0;cursor:pointer;
}
.nav-toggle i{
  position:absolute;width:9px;height:9px;
  background:var(--beige-suave);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s,
             width .4s ease,height .4s ease,left .4s ease,top .4s ease,opacity .3s ease;
}
.nav-toggle i:nth-child(2){left:10px;top:12px;transform:rotate(12deg)}
.nav-toggle i:nth-child(3){left:24px;top:17px;transform:rotate(-7deg);background:var(--terracota)}
.nav-toggle i:nth-child(4){left:15px;top:27px;transform:rotate(20deg);background:var(--celeste)}
/* Abierto: dos teselas se estiran en una cruz de cierre; la tercera se esconde */
.nav-toggle[aria-expanded="true"] i:nth-child(2){left:10px;top:21px;width:24px;height:2px;transform:rotate(45deg);background:var(--beige-suave)}
.nav-toggle[aria-expanded="true"] i:nth-child(3){left:10px;top:21px;width:24px;height:2px;transform:rotate(-45deg);background:var(--beige-suave)}
.nav-toggle[aria-expanded="true"] i:nth-child(4){opacity:0;transform:scale(0)}

/* -------------------------------------------------- hero ----- */

/* La obra vive a la derecha, centrada bajo la cabecera; a la izquierda una
   columna de texto con cuatro escalones: rótulo, nombre, presentación y los
   tres verbos del taller. El bloque queda algo por encima del centro; la
   señal de scroll vive en el aire de abajo. */
.hero{
  grid-column:1/-1;
  position:relative;
  min-height:calc(100vh - 112px);
  padding:20px 0 clamp(100px,14vh,140px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-foot{
  display:flex;flex-direction:column;align-items:flex-start;
  max-width:640px;
}

/* Tesela suelta: viñeta del rótulo y separador de los verbos */
.tile{
  display:inline-block;flex:none;
  width:8px;height:8px;
  background:var(--naranja);
  transform:rotate(14deg);
}

/* Rótulo: mono con una tesela naranja delante */
.hero-kicker{
  display:inline-flex;align-items:center;gap:13px;
  margin:0 0 30px;
  font:400 15px/1.4 var(--mono);letter-spacing:.08em;
  color:var(--muted);
}

/* Titular partido en palabras: cada una encaja por separado, como una
   tesela. Blanco, grande, dos líneas; la A de ReciclArte en beige dorado,
   como la luz de una pieza entre las demás. */
.hero-title{
  margin:0;
  font-weight:500;
  font-size:clamp(44px,5.5vw,96px);
  line-height:.92;
  letter-spacing:-.04em;
  color:#fff;
}
.hero-title .line{display:block}
.hero-title .hl{color:var(--beige-dorado)}
.hero-title .word{
  display:inline-block;
  opacity:0;
  transform:translateY(.38em) rotate(var(--wr,0deg));
}
.is-loaded .hero-title .word{
  animation:word-in .95s cubic-bezier(.2,.8,.2,1) calc(var(--wd,0ms) + 700ms) forwards;
}
@keyframes word-in{to{opacity:1;transform:none}}

/* Entrada escalonada del resto: rótulo 760 ms, presentación 1160, verbos 1500 */
.hero-kicker,.hero-lead,.hero-verbs{opacity:0}
.is-loaded .hero-kicker{animation:fade-in .8s ease 760ms forwards}
.is-loaded .hero-lead{animation:rise-in .9s cubic-bezier(.2,.8,.2,1) 1160ms forwards}
.is-loaded .hero-verbs{animation:rise-in .9s cubic-bezier(.2,.8,.2,1) 1500ms forwards}
@keyframes fade-in{to{opacity:1}}
@keyframes rise-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.hero-lead{
  margin:34px 0 0;max-width:34ch;
  font:300 22px/1.5 var(--sans);
  color:var(--fg);
  text-wrap:pretty;
}

/* Los tres verbos del taller, separados por teselas (terracota y celeste,
   las mismas del botón del menú) */
.hero-verbs{
  display:inline-flex;align-items:center;gap:14px;
  margin:32px 0 0;
  font:400 14px/1 var(--mono);letter-spacing:.1em;
  color:var(--muted);
}
.hero-verbs .tile{width:7px;height:7px;background:var(--terracota);transform:rotate(-9deg)}
.hero-verbs .tile:nth-of-type(2){background:var(--celeste);transform:rotate(18deg)}

/* Indicador de scroll: una tesela que cae por una línea fina, alineada con
   la columna de texto, en el aire de abajo. Espera a que la obra se arme y
   se apaga en cuanto empieza la ruptura (--h la fija el JS). */
.scroll-cue{
  position:absolute;left:0;bottom:34px;
  width:1px;height:64px;background:var(--line);
  opacity:calc(1 - var(--h) * 14);
  pointer-events:none;
}
.scroll-cue i{
  position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;
  background:var(--beige-dorado);transform:rotate(14deg);
  animation:cue-drop 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
/* cae por transform (55px = 64px de línea − 9px de tesela), no por top:
   animar top forzaba layout de la página en cada cuadro */
@keyframes cue-drop{
  0%{transform:translateY(0) rotate(14deg);opacity:0}
  15%{opacity:1}
  70%{transform:translateY(55px) rotate(14deg);opacity:1}
  100%{transform:translateY(55px) rotate(14deg);opacity:0}
}
body:not(.is-assembled) .scroll-cue{opacity:0}


/* ------------------------------------------- quiénes somos --- */

/* Regla que abre una sección a todo el ancho (las cabeceras con título
   llevan la suya; esta va sola delante de «quiénes somos» y del cierre). */
.rule{
  grid-column:1/-1;
  margin:var(--sg) 0 0;
  height:0;border:0;border-top:1px solid var(--line);
}
/* La primera regla va más cerca del hero: el título de «quiénes somos»
   asoma en cuanto el logo termina de disolverse, no una pantalla después. */
.hero + .rule{margin-top:16vh}
/* Etiqueta en mono, frase de entrada grande y dos columnas de lectura.
   Sin cajas ni fondos: el ritmo lo pone el aire (≥ 8vh entre bloques). */
.about-kicker{
  grid-column:1/-1;
  margin:40px 0 0;
  font:400 var(--t-14)/1.5 var(--mono);
  letter-spacing:.16em;
  color:var(--fg);
}
.about-num,.section-num,.contact-num{font:400 var(--t-12) var(--mono);color:var(--naranja);letter-spacing:.16em}
.about-num{margin-right:.6em}
.section-num{margin-right:.5em;vertical-align:1em}

.about-lede{
  grid-column:1/10;
  margin:28px 0 0;
  font-weight:400;
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.15;
  letter-spacing:-.01em;
  color:#fff;
  text-wrap:balance;
}

/* En nuestras palabras: lo que decimos en primera persona abre con un
   guion largo naranja (hero, frase de entrada, párrafo, cierre). */
.says::before{content:'—\00a0';color:var(--naranja);font-weight:400}

/* Texto de lectura: más claro que --fg (#F1E4CF ≈ 16.7:1 sobre negro),
   peso normal; un solo párrafo, corrido a la derecha bajo la frase. */
:root{--about-ink:#F1E4CF}
.about-col{
  grid-column:6/12;
  margin:max(8vh,72px) 0 0;
  max-width:44ch;
  font:400 20px/1.6 var(--sans);color:var(--about-ink);
  text-wrap:pretty;
}

/* Cómo trabajamos: un rótulo y tres fotos con cenefa, en zigzag, cada una
   con una línea corta debajo. Sin enlace: son proceso, no obra. */
.about-how-label{
  grid-column:1/-1;
  margin:max(12vh,96px) 0 0;
  font:400 var(--t-14)/1.5 var(--mono);
  letter-spacing:.16em;
  color:var(--naranja);
}
/* (con .work--how delante: la regla genérica .work, más abajo, fija margen y --ar) */
.work--how.how--a{grid-column:2/10;margin-top:36px;--ar:16/9}
.work--z{grid-column:1/9;--ar:4/3;margin-top:56px}
.work--how figcaption{margin-top:calc(var(--fb) + 22px)}
.how-line{font:300 22px/1.3 var(--sans);letter-spacing:-.01em;color:#fff}

/* -------------------------------------------- encabezados ---- */

/* Línea editorial: número y título a la izquierda, meta a la derecha, regla abajo */
.section-head{
  grid-column:1/-1;
  margin-top:var(--sg);
  padding:0 0 20px;
  border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
}
.section-head h2{margin:0;font-weight:400;font-size:var(--t-32);line-height:1;letter-spacing:-.02em;color:#fff}
.section-meta{font:400 var(--t-14) var(--mono);color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.section-meta-link{
  color:var(--fg);
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
  text-decoration-color:var(--line);
  transition:color .25s ease,text-decoration-color .25s ease;
}
.section-meta-link:hover,.section-meta-link:focus-visible{color:var(--naranja);text-decoration-color:var(--naranja)}

/* -------------------------------------------------- obras ---- */

/* Cada obra es una foto enmarcada (.work-photo lleva la cenefa) y un pie
   que fluye debajo, en texto plano. La proporción la fija la foto
   (--ar: 4/5 verticales, 3/2 anchas), nunca la figura. */
.work{
  margin:0;
  position:relative;
  display:block;
  align-self:start;
  --ar:3/2;
}
.work--tall{--ar:4/5}
.work--wide{--ar:3/2}
.work-photo{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:var(--ar);
  box-shadow:0 0 0 1px rgba(212,163,89,.45),0 26px 60px rgba(0,0,0,.8);
}
/* placa detrás de la foto (si la foto falta, la figura muestra su textura) */
.work-photo:has(.work-img[src]:not([src=""]):not([hidden])){background:var(--azul-noche)}
.work-img{display:none}
.work-img[src]:not([src=""]):not([hidden]){
  display:block;
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
}
.work figcaption{
  display:flex;flex-direction:column;gap:6px;
  margin-top:calc(var(--fb) + 28px);
  max-width:46ch;
  color:var(--fg);
}
.work-title{font:400 24px/1.2 var(--sans);letter-spacing:-.015em;color:#fff;transition:color .25s ease}
.work-meta{font:400 var(--t-14)/1.5 var(--mono);color:var(--muted)}
.work-made{display:block;margin-top:8px;font:300 17px/1.5 var(--sans);color:var(--fg)}
.work-go{
  display:inline-block;align-self:flex-start;margin-top:14px;
  font:400 var(--t-12)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--naranja);
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;
  text-decoration-color:transparent;
  transition:text-decoration-color .25s ease;
}
/* cada obra enlaza a su página: el enlace envuelve foto y pie, sin zoom */
.mosaic figure.work > .work-link{display:block;color:inherit;text-decoration:none}
.work .work-link:hover .work-title,.work .work-link:focus-visible .work-title{color:#fff}
.work .work-link:hover .work-go,.work .work-link:focus-visible .work-go{text-decoration-color:var(--naranja)}
.work .work-link:focus-visible{outline:2px solid var(--focus);outline-offset:calc(var(--fb) + 6px)}

/* Galería a dos columnas con hueco en medio, desfasada; entre filas ≥14vh */
.work--a{grid-column:1/7;margin-top:56px}
.work--b{grid-column:8/13;margin-top:calc(56px + 18vh)}
.work--c{grid-column:2/7;margin-top:14vh}
.work--d{grid-column:8/13;margin-top:calc(14vh + 8vh)}
.work--e{grid-column:2/9;margin-top:14vh}
.work--f{grid-column:1/6;margin-top:14vh}
.work--g{grid-column:7/13;margin-top:calc(14vh + 8vh)}
.work--h{grid-column:2/7;margin-top:14vh}

.works-all{grid-column:1/-1;margin:12vh 0 0;text-align:left;font:400 17px/1.5 var(--sans)}
.works-all a{
  color:var(--fg);
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;
  text-decoration-color:var(--line);
  transition:color .25s ease,text-decoration-color .25s ease;
}
.works-all a:hover,.works-all a:focus-visible{color:#fff;text-decoration-color:var(--naranja)}

/* ---------------------------------------------- artesanas ---- */

/* Fotos de grupo: anchas y verticales alternadas, con aire entre filas */
.work--group figcaption{margin-top:calc(var(--fb) + 22px)}
.group--a{grid-column:1/8;margin-top:56px;--ar:3/2}
.group--b{grid-column:9/13;margin-top:calc(56px + 14vh);--ar:3/4}
.group--c{grid-column:3/13;margin-top:14vh;--ar:2/1}
.group--d{grid-column:1/6;margin-top:14vh;--ar:3/2}
.group--e{grid-column:7/13;margin-top:calc(14vh + 8vh);--ar:4/3}
/* La coordinadora cierra la sección: retrato centrado bajo una regla corta */
.artisans{
  grid-column:5/9;
  align-self:start;
  margin-top:18vh;
  padding:40px 0 0;
  border-top:1px solid var(--line);
  list-style:none;
  display:grid;grid-template-columns:1fr;gap:40px;
}
.artisans li{display:block;min-width:0}
.artisan{padding:0;display:block}
.artisan-frame{--ar:4/5;background:var(--azul-noche)}
.artisan-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.artisan > div{margin-top:calc(var(--fb) + 28px)}
.artisan-role{display:block;margin-bottom:14px;font:400 var(--t-12)/1.5 var(--mono);letter-spacing:.16em;color:var(--naranja)}
.artisan h3{margin:0 0 8px;font-weight:400;font-size:26px;line-height:1.15;letter-spacing:-.015em;color:#fff}
.artisan p{margin:0;font:400 var(--t-14)/1.5 var(--mono);color:var(--muted);letter-spacing:.02em}
/* Las tarjetas entran escalonadas cuando la lista se muestra */
.artisans.is-hidden li{opacity:0;transform:translateY(24px)}
.artisans.is-shown li{opacity:1;transform:none;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.artisans.is-shown li:nth-child(2){transition-delay:90ms}
.artisans.is-shown li:nth-child(3){transition-delay:180ms}
.artisans.is-shown li:nth-child(4){transition-delay:270ms}

/* ------------------------------------------------- cierre ---- */

/* Sin bloques ni botones: una invitación en voz baja, los datos como
   texto plano subrayado y mucho aire arriba y abajo. */
.closing{
  grid-column:1/10;
  margin-top:36px;
  padding:0 0 16vh;                 /* la página termina acá, con aire */
  display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:44px;
}
.closing .contact-num{display:block}
.closing-text{
  margin:0;font-weight:300;font-size:var(--t-32);
  line-height:1.3;letter-spacing:-.02em;color:#fff;
  max-width:34ch;text-wrap:pretty;
}
.closing-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;font:400 19px/1.4 var(--sans)}
.closing-links li{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.closing-link{
  color:var(--fg);
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
  text-decoration-color:rgba(232,195,158,.45);
  transition:text-decoration-color .25s ease;
}
.closing-link:hover,.closing-link:focus-visible{text-decoration-color:var(--naranja)}
/* Copiar el número: un botón de texto, en mono. El JS le pone .is-copied
   1,5 s; las dos etiquetas se apilan y se cruzan. */
button.contact-copy{
  appearance:none;-webkit-appearance:none;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  display:grid;
  font:400 var(--t-12) var(--mono);letter-spacing:.08em;color:var(--naranja);
}
.contact-copy .copy-label,.contact-copy .copy-done{grid-area:1/1;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.contact-copy .copy-label{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(232,111,46,.45)}
.contact-copy:hover .copy-label,.contact-copy:focus-visible .copy-label{text-decoration-color:var(--naranja)}
.contact-copy .copy-done{opacity:0;transform:translateY(6px);color:var(--celeste)}
.contact-copy.is-copied .copy-label{opacity:0;transform:translateY(-6px)}
.contact-copy.is-copied .copy-done{opacity:1;transform:none}
/* --------------------------------------- venecitas del fondo -- */

/* Cada bloque marcado con data-mosaic recibe una teselación irregular
   generada por JS: venecitas de cuatro lados con junta entre medio. */
[data-mosaic]{position:relative}   /* el SVG interior ya recorta lo suyo */
[data-mosaic] > *:not(.mosaic-layer){position:relative;z-index:1}

.mosaic-layer{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  pointer-events:none;
}

/* Destellos de las esquirlas de espejo: titilan despacio, cada uno a su
   tiempo. Son pocos, así que la animación sale barata. */
.mosaic-layer .glint{animation:glint 5.5s ease-in-out var(--gd,0s) infinite}
@keyframes glint{0%,100%{opacity:.55}50%{opacity:1}}

/* El marco de la obra también es data-mosaic, pero vive posicionado en
   el fondo: estas reglas van con más peso que las genéricas de arriba. */
.backdrop .logo-frame[data-mosaic]{position:absolute;overflow:visible}
.backdrop .logo-frame > .logo-frame-inner,
.backdrop .logo-frame > .logo-ring{position:absolute}

/* ----------------------------------------- marco de los bloques -- */

/* ------------------------------------- entrada de secciones -- */

[data-piece].is-hidden{will-change:transform,opacity}   /* capa solo hasta que entra */

.is-hidden{
  opacity:0;
  transform:translate(var(--px,0),var(--py,0)) rotate(var(--pr,0deg));
}
.is-shown{
  opacity:1;
  transform:none;
  transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--pd,0ms),
             opacity .6s ease var(--pd,0ms);
}
/* Las fotos aparecen en mosaico: al entrar, el JS (layTiles) apoya sobre
   la foto una capa (span.teselas) de fragmentos poligonales (<i> con
   clip-path y su trozo exacto de la imagen) que llegan desde unos píxeles
   afuera, apenas girados, y encajan en su sitio a su tiempo (--fd). Una
   línea de junta dorada (.junta, el trazado en SVG) marca antes dónde va
   cada pieza y se desvanece cuando el conjunto queda entero. La img real
   espera oculta (.is-tiling) y la capa se quita al terminar: will-change
   vive solo ahí. */
.work-photo.is-tiling img{opacity:0}
.work-photo .teselas{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
}
.work-photo .teselas i{
  position:absolute;display:block;
  background-repeat:no-repeat;
  will-change:transform,opacity;
  opacity:0;
  animation:shard-in .68s cubic-bezier(.2,.8,.2,1) var(--fd,0ms) both;
}
.work-photo .teselas .junta{
  inset:0;width:auto;height:auto;
  background-size:100% 100%;
  will-change:opacity;
  animation:joint-net 1.2s linear both;
}
@keyframes shard-in{
  from{opacity:0;transform:translate(var(--fx,0px),var(--fy,0px)) rotate(var(--fr,0deg)) scale(.96)}
  55%{opacity:1}
  to{opacity:1;transform:none}
}
@keyframes joint-net{
  0%{opacity:0}
  14%{opacity:1}
  74%{opacity:1}
  100%{opacity:0}
}


/* ---------------------------------------------- responsive --- */

/* Tablet: seis columnas */
@media (max-width:1023px){
  :root{--gutter:56px;--rg:88px;--sg:20vh;--fb:16px}
  .mosaic{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:20px}

  .about-col{grid-column:3/7}
  .work--how.how--a{grid-column:1/7;margin-top:32px}
  .work--z{grid-column:1/7;margin-top:48px}

  /* obras de a una, alternando el lado, con aire entre medio */
  .work--a{grid-column:1/5;margin-top:48px}
  .work--b{grid-column:3/7;margin-top:12vh}
  .work--c{grid-column:1/5;margin-top:12vh}
  .work--d{grid-column:2/7;margin-top:12vh}
  .work--e{grid-column:1/7;margin-top:12vh}
  .work--f{grid-column:3/7;margin-top:12vh}
  .work--g{grid-column:1/6;margin-top:12vh}
  .work--h{grid-column:2/6;margin-top:12vh}

  .group--a{grid-column:1/-1;margin-top:48px}
  .group--b{grid-column:4/7;margin-top:12vh}
  .group--c{grid-column:1/-1;margin-top:12vh}
  .group--d{grid-column:1/5;margin-top:12vh}
  .group--e{grid-column:2/7;margin-top:12vh}
  .artisans{grid-column:2/6;margin-top:14vh}

  .closing{grid-column:1/-1}
}

/* Nav en menú (botón en la cabecera): el margen lateral se achica */
@media (max-width:900px){
  :root{--gutter:40px}
  .scrim{background:linear-gradient(180deg,
    rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 22%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.97) 100%)}
  /* La obra arriba, centrada, a 40px de la cabecera; el texto va debajo */
  :root{--logo-x:50%;--logo-y:calc(var(--head-h) + 40px + var(--logo-h) / 2)}
  .logo-mosaic{transform:translate(-50%,-50%)}
  .logo-frame,.is-assembled .logo-frame{transform:translate(-50%,-50%)}
  :root{--f:0px}

  /* En pantallas angostas las piezas entran solo desde abajo: el
     desplazamiento lateral desbordaba el ancho y se veía movido. */
  [data-piece]{--px:0px !important}

  :root{--head-h:64px}
  .nav-toggle{display:block}
  .site-nav{display:none}
  /* Panel de pantalla completa: las mismas secciones, grandes. El
     backdrop-filter de la cabecera la vuelve bloque contenedor del panel:
     top:0 es el tope de la pantalla igual, y el alto se fija en dvh. */
  .site-nav.is-open{
    display:flex;
    position:fixed;top:0;left:0;width:100%;height:100dvh;z-index:1;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:26px;
    padding:calc(var(--head-h) + 40px) var(--gutter) 40px;
    background:rgba(0,0,0,.97);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    overflow:auto;
    animation:menu-in .3s ease;
  }
  @keyframes menu-in{from{opacity:0}to{opacity:1}}
  .site-nav.is-open a{
    font:500 32px/1.1 var(--sans);
    letter-spacing:-.02em;
    color:var(--fg);
    gap:16px;
    padding:6px 0;
    white-space:normal;
  }
  .site-nav.is-open a b{font:500 var(--t-12) var(--mono);letter-spacing:.2em;min-width:2ch;color:var(--naranja)}
  .site-nav.is-open a::after{left:auto;right:-18px;bottom:auto;top:50%;margin:-5px 0 0;width:10px;height:10px}
  .site-nav.is-open a.is-active{color:#fff}
  .site-nav.is-open a.nav-all{margin:22px 0 0;padding-top:28px;border-top:1px solid var(--line);font:400 22px/1.1 var(--sans);text-decoration:none;color:var(--fg)}

  .hero{min-height:calc(100vh - 100px);padding:0 0 40px;justify-content:flex-start}
  /* el bloque arranca 28px bajo el borde inferior del marco */
  .hero-foot{margin-top:calc(var(--logo-y) + var(--logo-h) / 2 + 28px - var(--main-pt));max-width:none}
  .hero-kicker{margin-bottom:20px}
  .hero-lead{margin-top:22px;font-size:20px;max-width:38ch}
  .hero-verbs{margin-top:24px}
  .scroll-cue{display:none}
}

/* Móvil: una columna */
@media (max-width:599px){
  :root{--gutter:24px;--rg:72px;--sg:18vh;--fb:0px}
  :root{--main-pt:88px;--f:0px}
  /* La obra sube: queda a 26px de la cabecera y más chica (ver sizeLogo),
     para que el rótulo, el nombre y la presentación entren en la pantalla. */
  :root{--logo-y:calc(var(--head-h) + 16px + var(--logo-h) / 2)}
  .mosaic{grid-template-columns:minmax(0,1fr)}
  .mosaic > *{grid-column:1/-1}

  /* La obra arriba (a 40px de la cabecera, ver --logo-y); el bloque de
     texto debajo, más apretado, con el rótulo en una sola línea. */
  .hero{
    min-height:calc(100dvh - 80px);
    padding:0 0 32px;
    justify-content:flex-start;
  }
  .hero-foot{margin-top:calc(var(--logo-y) + var(--logo-h) / 2 + 26px - var(--main-pt))}
  .hero-kicker{margin-bottom:14px;font-size:14px;letter-spacing:.06em;white-space:nowrap;gap:11px}
  .hero-kicker .tile{width:7px;height:7px}
  .hero-title{font-size:clamp(34px,10.5vw,44px);letter-spacing:-.035em}
  .hero-lead{margin-top:16px;font-size:16.5px;line-height:1.5;max-width:none}
  .hero-verbs{margin-top:18px;font-size:13px;letter-spacing:.08em;gap:12px}
  .brand-name{font-size:12px;letter-spacing:.18em}

  .about-kicker{margin-top:32px}
  .about-lede{margin-top:20px;font-size:clamp(28px,8vw,36px)}
  .about-col{margin-top:40px;max-width:none;font-size:19px;line-height:1.6}
  .about-how-label{margin-top:64px}
  /* (las reglas .work--how.how--x pesan más que .mosaic > *: se fija la columna aparte) */
  .mosaic > .work--how{grid-column:1/-1;margin-top:56px}
  .mosaic > .work--how.how--a{margin-top:32px}
  .how-line{font-size:20px}
  .section-head{flex-wrap:wrap;gap:12px 16px;padding-bottom:16px}
  .section-head h2{flex:1 0 100%}

  /* Fotos: la cenefa arranca en el margen de 24px y la foto queda 13px
     más adentro (24 + --fb del borde). El pie sigue alineado con el texto,
     en el margen. Entre obras, ≥88px de aire. */
  .work-photo{width:auto;margin-left:var(--fb);margin-right:var(--fb)}
  .work--a,.work--b,.work--c,.work--d,.work--e,.work--f,.work--g,.work--h,.work--group{margin-top:88px}
  .mosaic > .work--how{margin-top:72px}
  .group--a{margin-top:44px}
  .work--a{margin-top:44px}
  .work figcaption{margin-top:calc(var(--fb) + 26px);max-width:none;gap:8px}
  .work-title{font-size:24px}
  .work-meta{font-size:15px;line-height:1.55}
  .work-made{font-size:18px;margin-top:6px}
  .work-go{margin-top:16px;font-size:13px}
  .how-line{font-size:21px}
  .section-meta{font-size:15px}
  .works-all{margin-top:80px;font-size:17px}

  .artisans{margin-top:88px;padding-top:32px}
  .artisan h3{font-size:24px}
  .artisan p{font-size:15px}

  .closing{margin-top:28px;padding:0 0 14vh;gap:32px}
  .closing-text{font-size:26px;max-width:none}
}

/* --------------------------------------- movimiento reducido -- */

@media (prefers-reduced-motion:reduce){
  .scroll-cue i{animation:none;transform:translateY(55px) rotate(14deg)}
  .tiles{filter:none}
  /* Sin caída: la obra y su marco se desvanecen con el scroll (a 0 en el
     40 % del hero, donde se retira la capa), sin canvas de por medio. */
  .logo-mosaic i,
  .is-assembled .logo-mosaic i{
    opacity:calc(1 - var(--h) * 2.5);transform:none;transition:none;
  }
  .is-assembled .logo-frame{opacity:calc(1 - var(--h) * 2.5)}
  .is-hidden{opacity:1;transform:none}
  .is-shown{transition:none}
  .work-photo .teselas{display:none}
  .work-photo.is-tiling img{opacity:1}
  .artisans.is-hidden li,.artisans.is-shown li{opacity:1;transform:none;transition:none}
  .site-nav.is-open{animation:none}
  .skip-link,.closing-link,.contact-copy .copy-label,.contact-copy .copy-done,.site-nav a,.site-nav a::after,.brand-logo,.nav-toggle i,.work-title,.work-go,.works-all a,.section-meta-link{transition:none}
  .hero-title .word,.is-loaded .hero-title .word,
  .hero-kicker,.hero-lead,.hero-verbs,.is-loaded .hero-kicker,.is-loaded .hero-lead,.is-loaded .hero-verbs{animation:none;opacity:1;transform:none}
  .dust{display:none}
  .logo-mosaic b{animation:none}
  .mosaic-layer .glint{animation:none;opacity:.8}
  .logo-frame{transition:none}
  .loading{transition:none}
  .mosaic,.site-head{transition:none}
}

/* ------------------------------------------ carrusel de grupo ---- */

/* Sección 03: las fotos de grupo van en una vitrina de tres. La del medio
   al frente, a tamaño completo; la anterior y la siguiente asoman detrás,
   a los costados, más chicas y apagadas. El resto espera fuera de foco.
   Cada foto conserva su proporción (--ar inline) y el alto de la vitrina
   manda; el pie de la foto del medio va debajo, centrado. */
.section-side{display:flex;align-items:baseline;justify-content:flex-end;gap:36px;flex-wrap:wrap;min-width:0}
.carousel-nav{display:flex;align-items:baseline;gap:20px;white-space:nowrap}
.carousel-btn{
  appearance:none;background:none;border:0;padding:0;margin:0;
  font:400 var(--t-14) var(--mono);letter-spacing:.04em;color:var(--fg);
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
  text-decoration-color:var(--line);
  transition:color .25s ease,text-decoration-color .25s ease,opacity .25s ease;
}
.carousel-btn:hover,.carousel-btn:focus-visible{color:var(--naranja);text-decoration-color:var(--naranja)}
.carousel-btn:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.carousel-btn[aria-disabled="true"]{opacity:.35;pointer-events:none}
.carousel-count{font:400 var(--t-14) var(--mono);letter-spacing:.08em;color:var(--naranja);font-variant-numeric:tabular-nums}
.carousel-caption{display:none}

.carousel{
  grid-column:1/-1;
  min-width:0;
  margin:56px calc(50% - 50vw) 0;   /* la vitrina usa todo el ancho de la pantalla */
  --slide-h:58vh;
  --side-x:38vw;     /* distancia del centro a las vecinas */
  --side-s:.68;      /* cuánto se achican */
}
.carousel-stage{
  position:relative;
  height:var(--slide-h);
  perspective:1600px;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
}
.carousel-stage.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.carousel-stage:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
.carousel-stage img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

.work--slide{
  position:absolute;top:50%;left:50%;margin:0;--ar:3/2;
  width:min(calc(var(--slide-h) * var(--ar)),52vw);
  transform:translate(-50%,-50%) scale(var(--side-s));
  transform-origin:50% 50%;
  opacity:0;visibility:hidden;pointer-events:none;z-index:0;
  transition:transform .62s cubic-bezier(.2,.8,.2,1),opacity .5s ease,filter .5s ease;
  will-change:transform,opacity;
}
.work--slide .work-photo{width:100%;height:auto;aspect-ratio:var(--ar)}
/* las vecinas: detrás, giradas hacia adentro y apagadas */
.work--slide.is-prev,.work--slide.is-next{
  opacity:.42;visibility:visible;pointer-events:auto;cursor:pointer;z-index:1;
  filter:saturate(.55) brightness(.72);
}
.work--slide.is-prev{transform:translate(-50%,-50%) translateX(calc(-1 * var(--side-x))) scale(var(--side-s)) rotateY(14deg)}
.work--slide.is-next{transform:translate(-50%,-50%) translateX(var(--side-x)) scale(var(--side-s)) rotateY(-14deg)}
.work--slide.is-prev:hover,.work--slide.is-next:hover{opacity:.7;filter:saturate(.8) brightness(.88)}
.work--slide.is-active{
  opacity:1;visibility:visible;pointer-events:auto;z-index:3;
  transform:translate(-50%,-50%) scale(1);
}
/* el pie de cada cuadro queda para lectores de pantalla: el visible va debajo */
.work--slide figcaption{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.carousel-cap{
  margin:calc(var(--fb) + 26px) auto 0;padding:0 var(--gutter);
  max-width:none;text-align:center;
  font:400 var(--t-14) var(--mono);letter-spacing:.02em;line-height:1.6;color:var(--muted);
}

@media (max-width:1023px){
  .carousel{--slide-h:46vh;--side-x:40vw;--side-s:.62;margin-top:48px}
  .work--slide{width:min(calc(var(--slide-h) * var(--ar)),58vw)}
}
@media (max-width:599px){
  .carousel{--slide-h:40vh;--side-x:44vw;--side-s:.56;margin-top:40px}
  .work--slide{width:min(calc(var(--slide-h) * var(--ar)),72vw)}
  .carousel-cap{font-size:15px;margin-top:20px}
  .carousel > .carousel-nav{margin:22px 0 0;flex-wrap:wrap;justify-content:center;gap:14px 22px;white-space:normal}
  .carousel > .carousel-nav .carousel-btn,.carousel > .carousel-nav .carousel-count{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .work--slide{transition:none}
  .carousel-btn{transition:none}
}

/* todos los enlaces y botones: mano */
a,button,[role="button"],summary,label[for]{cursor:pointer}
/* entre 720 y 1120px la cabecera no entra con cinco ítems: el enlace a todas las obras queda en la sección Obras y al pie de la galería */
@media (min-width:720px) and (max-width:1120px){.site-nav .nav-all{display:none}}