/* ════════════════════════════════════════════════════════════════════
   MI·ARQ — home v2 · estilos
   Identidad de E-LAB (branding/marca.json manda sobre estos valores).
   Serif: Cormorant Garamond (títulos y texto). Funcional: Work Sans
   (rótulos, botones, datos). Hueso y carbón; tierra con cuentagotas.
   Una grilla de 12 columnas para todo: el texto arranca en la 1 o en la 7.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --hueso: #F1F1EF;
  --calido: #E5E3D7;
  --gris-calido: #D1CCC8;
  --carbon: #191A1C;
  --negro: #0F0F0F;
  --taupe: #8A7666;

  /* tema: cambia entero en la sección de desarrolladoras */
  --fondo: var(--hueso);
  --tinta: var(--carbon);
  --suave: #625E57;            /* 5,7:1 sobre hueso */
  --linea: rgba(25, 26, 28, .16);
  --linea-fuerte: rgba(25, 26, 28, .45);
  --logo: #000000;             /* versión del kit para fondo claro */
  --boton-hover: var(--negro);

  --serif: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
  --sans: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  --pad: clamp(20px, 4.4vw, 76px);
  --gap: clamp(16px, 1.8vw, 30px);
  --sec: clamp(88px, 13vh, 168px);   /* el único espacio entre secciones */
  --max: 1520px;
  --cab: 76px;
  --curva: cubic-bezier(.2, .7, .1, 1);

  --blob: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M28.03 3.24C2.86 12.97 1.07 41.08 0.02 68.46C-1.02 95.43 41.72 103.96 64.24 96.87C93.48 87.65 109.77 44.97 93.64 32.25C73.10 16.05 54.20 -6.88 28.03 3.24Z%22/%3E%3C/svg%3E");
}

body.tema-oscuro {
  --fondo: var(--carbon);
  --tinta: var(--hueso);
  --suave: #A9A49C;            /* 7:1 sobre carbón */
  --linea: rgba(241, 241, 239, .18);
  --linea-fuerte: rgba(241, 241, 239, .5);
  --logo: #EFEFEE;             /* versión del kit para fondo oscuro */
  --boton-hover: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums;
  overflow-x: clip;
  transition: background-color .9s ease, color .9s ease;
}

/* textura de papel sin estucar, apenas visible (E-LAB: papel, hormigón, relieve) */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
body.tema-oscuro::after { mix-blend-mode: screen; opacity: .04; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em, i { font-style: italic; }
::selection { background: var(--carbon); color: var(--hueso); }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; border-radius: 2px; }

.oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: fixed; left: 16px; top: -60px; z-index: 400;
  background: var(--carbon); color: var(--hueso);
  font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 18px; border-radius: 999px; transition: top .3s var(--curva);
}
.saltar:focus { top: 16px; }

.envoltura { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* ─── Tipografía ─────────────────────────────────────────────────── */
.rotulo {
  font: 500 11px/1.3 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--suave);
}
.seccion-rotulo {
  display: flex; align-items: baseline; gap: 18px;
  font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--suave);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.seccion-rotulo .num { flex: none; font-variant-numeric: lining-nums tabular-nums; }
.seccion-rotulo .num::after {
  content: ""; display: inline-block; width: 38px; height: 1px; margin-left: 18px;
  background: currentColor; opacity: .5; vertical-align: middle; transform: translateY(-3px);
}
/* el sistema MI· del kit: MI en itálica, punto medio, nombre en mayúsculas */
.mi-sistema {
  font-family: var(--serif); font-weight: 400; font-size: 21px;
  letter-spacing: .05em; color: var(--tinta); text-transform: uppercase;
}
.mi-sistema i { letter-spacing: -.02em; margin-right: .06em; }

.titulo-seccion {
  font-weight: 300;
  font-size: clamp(40px, 4.4vw + 8px, 88px);
  line-height: 1.02;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.titulo-seccion em, .hero-titulo em, .caso-nombre em { font-weight: 300; }
.titulo-chico {
  font-weight: 400;
  font-size: clamp(28px, 1.8vw + 8px, 40px);
  line-height: 1.08;
}
.lead {
  font-weight: 400;
  font-size: clamp(21px, .7vw + 15px, 26px);
  line-height: 1.38;
  max-width: 27em;
  text-wrap: pretty;
}
.texto, .intro {
  font-weight: 400;
  font-size: clamp(18px, .3vw + 15px, 20.5px);
  line-height: 1.55;
  color: var(--suave);
  max-width: 31em;
  text-wrap: pretty;
}
.intro { font-size: clamp(19px, .5vw + 14px, 22px); line-height: 1.5; }
.texto + .texto { margin-top: .9em; }
.nw { white-space: nowrap; }
.linea { padding-bottom: .12em; margin-bottom: -.12em; } /* que la máscara no corte las descendentes de Cormorant */

/* ─── Botones y enlaces ──────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 17px 26px 17px 28px;
  border-radius: 999px;
  background: var(--tinta); color: var(--fondo);
  font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-color .5s ease, color .5s ease;
}
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--boton-hover);
  transform: translateY(101%); border-radius: inherit;
  transition: transform .6s var(--curva);
}
.boton:hover::before { transform: none; }
.boton i { font-style: normal; font-family: var(--serif); font-size: 18px; transition: transform .6s var(--curva); }
.boton:hover i { transform: translateX(5px); }
.boton-chico { padding: 12px 18px; font-size: 11px; }
.boton-grande { padding: 22px 30px 22px 34px; font-size: 13px; }

.enlace {
  font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 4px; white-space: nowrap;
  transition: background-size .6s var(--curva);
}
.enlace:hover { background-size: 0 1px; background-position: 100% 100%; }
p .enlace, dd .enlace { font: inherit; letter-spacing: 0; text-transform: none; padding-bottom: 1px; white-space: normal; }

/* ─── Telón de entrada ───────────────────────────────────────────── */
.telon { display: none; }
.js .telon {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: var(--hueso); color: #000;
  clip-path: inset(0% 0% 0% 0%);
  animation: telonSeguro .01s linear 6s forwards;  /* si algo falla, igual se va */
}
@keyframes telonSeguro { to { visibility: hidden; opacity: 0; } }
.telon-sello { width: clamp(120px, 12vw, 160px); }
.telon-sello svg { width: 100%; height: auto; overflow: visible; }
/* estado inicial en CSS, para que el sello no aparezca entero antes del JS */
.js .telon-sello path[stroke] { stroke-dasharray: 4000; stroke-dashoffset: 4000; }
.js .telon-sello path:not([stroke]) { opacity: 0; }

/* ─── Encabezado ─────────────────────────────────────────────────── */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--cab);
  display: flex; align-items: center; gap: clamp(18px, 3vw, 44px);
  padding: 0 var(--pad);
  color: var(--tinta);
  transition: transform .7s var(--curva), color .6s ease;
}
.cabecera::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--fondo) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--linea);
  opacity: 0; transition: opacity .6s ease;
}
.cabecera.con-fondo::before { opacity: 1; }
.cabecera.oculta { transform: translateY(-100%); }
.cabecera > * { transition: opacity .45s ease; }
.cabecera.en-transicion > * { opacity: 0; pointer-events: none; }
.cabecera.sobre-foto { color: var(--hueso); --logo: #EFEFEE; --boton-hover: #FFFFFF; }
.cabecera-marca { color: var(--logo); margin-right: auto; display: block; }
.cabecera-marca .simbolo { width: 84px; height: auto; }   /* mínimo del kit: 80 px */
.cabecera-nav { display: flex; gap: clamp(18px, 2.2vw, 36px); }
.cabecera-nav a {
  font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  position: relative; padding: 6px 0;
}
.cabecera-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--curva);
}
.cabecera-nav a:hover::after, .cabecera-nav a.activo::after { transform: scaleX(1); transform-origin: left; }
.cabecera.sobre-foto .boton { background: var(--hueso); color: var(--carbon); }
.cabecera-menu {
  display: none; align-items: center; gap: 12px;
  font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  padding: 10px 0;
}
.menu-ico { width: 22px; height: 10px; position: relative; }
.menu-ico i { position: absolute; left: 0; right: 0; height: 1.2px; background: currentColor; transition: transform .5s var(--curva), top .5s var(--curva); }
.menu-ico i:first-child { top: 1px; }
.menu-ico i:last-child { top: 8px; }
.menu-abierto .menu-ico i:first-child { top: 4.5px; transform: rotate(45deg); }
.menu-abierto .menu-ico i:last-child { top: 4.5px; transform: rotate(-45deg); }

/* ─── Menú del celular ───────────────────────────────────────────── */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--hueso); color: var(--carbon);
  padding: calc(var(--cab) + 4vh) var(--pad) 32px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(40px, 11vw, 64px); line-height: 1.12;
  border-bottom: 1px solid var(--linea); padding: 6px 0 10px;
  overflow: hidden;
}
.menu nav a span { font: 500 11px/1 var(--sans); letter-spacing: .16em; color: var(--suave); min-width: 22px; }
.menu nav a b { font-weight: 300; display: inline-block; }
.menu-pie { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font: 400 14px/1.4 var(--sans); }
.menu-pie a:not(.boton) { color: var(--suave); }
.menu-pie .boton { margin-bottom: 10px; }

/* ═══ PORTADA ═════════════════════════════════════════════════════ */
.hero { position: relative; height: 240vh; }
.hero-fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-ventana { position: absolute; inset: 0; background: var(--calido); }
/* la ventana con forma de sello necesita el JS; sin JS la portada queda en texto, como la v1 */
html:not(.js) .hero-ventana { display: none; }
.js .hero-ventana {
  -webkit-mask-image: var(--blob); mask-image: var(--blob);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--ms, 0px) var(--ms, 0px); mask-size: var(--ms, 0px) var(--ms, 0px);
  -webkit-mask-position: var(--mx, 50%) var(--my, 50%); mask-position: var(--mx, 50%) var(--my, 50%);
}
.js .hero-ventana.libre { -webkit-mask-image: none; mask-image: none; }
.hero-foto {
  position: absolute; left: 50%; top: 50%;
  width: var(--hw, 100%); height: var(--hh, 100%); max-width: none;
  object-fit: cover; object-position: 50% 50%;
  transform: translate(-50%, -50%) translate3d(var(--htx, 0px), var(--hty, 0px), 0) scale(var(--hs, 1.2));
  transform-origin: 50% 50%;
  will-change: transform;
}
.hero-velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,15,15,.55) 0%, rgba(15,15,15,.12) 18%, rgba(15,15,15,0) 30%, rgba(15,15,15,0) 62%, rgba(15,15,15,.5) 100%);
  opacity: var(--velo, 0);
}
.hero-tapa { position: absolute; inset: 0; color: #EFEFEE; opacity: calc(var(--tapa, 0) * (1 - var(--salida, 0))); pointer-events: none; }
.hero-tapa-firma { position: absolute; left: var(--pad); top: calc(var(--cab) + 8vh); width: clamp(150px, 15vw, 230px); }
.hero-tapa-firma svg { width: 100%; height: auto; }
.hero-tapa-obra {
  position: absolute; right: var(--pad); bottom: clamp(26px, 5vh, 48px);
  font: 400 italic 20px/1 var(--serif); letter-spacing: .02em;
}
.hero-texto {
  position: absolute; z-index: 2;
  left: var(--pad); top: 50%;
  width: min(44vw, 700px);
  transform: translateY(-50%);
}
.hero-rotulo { margin-bottom: clamp(22px, 3.4vh, 36px); }
.hero-titulo {
  font-weight: 300;
  font-size: min(5.6vw + 6px, 11.5vh, 120px);
  line-height: .98;
  letter-spacing: -.018em;
}
.hero-bajada { margin-top: clamp(20px, 3.4vh, 36px); max-width: 26em; }
.hero-acciones { margin-top: clamp(26px, 4.4vh, 46px); display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.hero-pie {
  position: absolute; z-index: 2;
  left: var(--pad); right: var(--pad); bottom: clamp(22px, 4vh, 40px);
  font-size: 16.5px; line-height: 1.22; color: var(--tinta);
  border-top: 1px solid var(--linea); padding-top: 18px; align-items: end;
}
.hero-pie > div:nth-child(1) { grid-column: 1 / 4; }
.hero-pie > div:nth-child(2) { grid-column: 5 / 6; font-size: 20px; }
.hero-pie > div:nth-child(3) { grid-column: 7 / 10; }
.hero-pie > div:nth-child(4) { grid-column: 10 / 13; }
.hero-scroll { display: none; }

/* ═══ 01 · MANIFIESTO ═════════════════════════════════════════════ */
.manifiesto { position: relative; padding: var(--sec) 0; overflow: clip; }
.manifiesto .envoltura { position: relative; z-index: 1; }
.manifiesto-texto {
  font-weight: 300;
  font-size: clamp(31px, 3.7vw + 8px, 74px);
  line-height: 1.1;
  letter-spacing: -.012em;
  max-width: 1240px;
  text-wrap: pretty;
}
.manifiesto-pie { margin-top: clamp(56px, 9vh, 110px); align-items: start; }
.manifiesto-firma { grid-column: 1 / 5; width: clamp(170px, 17vw, 260px); color: #000; padding-top: 6px; }
.manifiesto-firma svg { width: 100%; height: auto; }
.manifiesto-cols { grid-column: 7 / 13; }
.manifiesto-cols .lead + .lead { margin-top: .8em; }
.forma { position: absolute; pointer-events: none; color: var(--calido); }
.forma svg { width: 100%; height: auto; }
.forma-manifiesto { width: clamp(340px, 40vw, 640px); right: -12vw; top: 8%; opacity: .9; }

/* ═══ 02 · PROYECTOS ══════════════════════════════════════════════ */
.proyectos { padding: var(--sec) 0; }
.seccion-cabeza { align-items: end; }
.seccion-cabeza .seccion-rotulo { grid-column: 1 / -1; }
.seccion-cabeza .titulo-seccion { grid-column: 1 / 7; }
.seccion-cabeza .intro { grid-column: 7 / 12; padding-bottom: 8px; }

.caso { margin-top: var(--sec); }
.caso-texto { grid-column: 1 / 5; }
.caso-fotos { grid-column: 6 / 13; }
.caso-invertido .caso-texto { grid-column: 9 / 13; grid-row: 1; }
.caso-invertido .caso-fotos { grid-column: 1 / 8; grid-row: 1; }
.caso-fijo { position: sticky; top: calc(var(--cab) + 28px); }
.caso-num { font: 500 11px/1 var(--sans); letter-spacing: .2em; color: var(--suave); }
.caso-nombre {
  font-weight: 300;
  font-size: clamp(66px, 7.6vw + 10px, 168px);
  line-height: .9; letter-spacing: -.025em;
  margin: 14px 0 clamp(26px, 4vh, 40px);
}
.caso .lead { margin-top: clamp(26px, 4vh, 38px); }
.caso .texto { margin-top: 18px; }

/* cajetín: el rótulo de un plano, dibujado con líneas (E-LAB) */
.cajetin {
  position: relative;
  display: grid; grid-template-columns: .9fr 1.3fr 1fr;
  font-variant-numeric: lining-nums;
}
.cajetin::before, .cajetin::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--tinta);
  transform: scaleX(var(--trazo, 1)); transform-origin: left;
}
.cajetin::before { top: 0; }
.cajetin::after { bottom: 0; }
.cajetin > div { position: relative; padding: 14px 14px 15px; }
.cajetin > div:first-child { padding-left: 0; }
.cajetin > div + div::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--linea-fuerte);
  transform: scaleY(var(--trazo, 1)); transform-origin: top;
}
.cajetin dt { font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--suave); margin-bottom: 9px; }
.cajetin dd { font-size: 17px; line-height: 1.25; }

.caso-fotos {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: clamp(46px, 7vw, 120px);
}
.foto-ancha { grid-column: 1 / -1; }
.foto-ancha .foto-marco { aspect-ratio: 3 / 2; }
.foto-alta { grid-column: 1 / span 5; }
.foto-alta .foto-marco { aspect-ratio: 4 / 5; }
.foto-media { grid-column: 7 / -1; align-self: end; }
.foto-media .foto-marco { aspect-ratio: 3 / 2; }
.foto-alta.foto-corrida { grid-column: 9 / -1; grid-row: 3; margin-top: 18%; }
.foto-alta.foto-corrida ~ .foto-media { grid-column: 1 / span 7; grid-row: 3; align-self: start; }
.foto-marco { position: relative; overflow: hidden; background: var(--calido); }
.foto-marco img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); will-change: transform; }
.foto figcaption, .estudio-foto figcaption, .devs-foto figcaption {
  margin-top: 14px;
  font: 400 12.5px/1.4 var(--sans); color: var(--suave);
}

/* ═══ 03 · DEL BOCETO A LA REALIDAD ═══════════════════════════════ */
.boceto { position: relative; padding: var(--sec) 0 calc(var(--sec) + 4vh); }
.boceto-grilla { align-items: center; }
.boceto-texto { grid-column: 1 / 5; }
.boceto-texto .lead { margin-top: clamp(22px, 3.4vh, 34px); }
.boceto-texto .texto { margin-top: 16px; }
.boceto-escena { grid-column: 6 / 13; position: relative; width: 100%; }
.boceto-obra { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--calido); }
.boceto-obra img { width: 100%; height: 100%; object-fit: cover; }
.boceto-notas { position: absolute; inset: 0; width: 100%; height: 100%; color: #EFEFEE; }
.boceto-notas path { fill: none; stroke: currentColor; stroke-width: 2.6; }
.boceto-notas circle { fill: currentColor; }
.boceto-notas text { fill: currentColor; font: italic 400 38px var(--serif); letter-spacing: .01em; }
.boceto-dibujo {
  position: absolute; left: -9%; bottom: -14%;
  width: 31%; aspect-ratio: 4 / 5;
  outline: 8px solid var(--hueso);
  background: var(--calido);
  transform-origin: 50% 50%;
  z-index: 2;
}
.boceto-dibujo img { width: 100%; height: 100%; object-fit: cover; }
.etiqueta-foto {
  position: absolute; right: 16px; bottom: 14px;
  font: italic 400 15px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase;
  color: #EFEFEE;
}

/* blanco y negro = proceso; color = resultado (regla de E-LAB) */
.bn img, .boceto-dibujo img {
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  transition: filter 1.4s ease;
}

/* ═══ MÁS PROYECTOS ═══════════════════════════════════════════════ */
.indice { padding: var(--sec) 0; }
.indice-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: clamp(26px, 4vh, 44px); }
.indice-lista { list-style: none; border-top: 1px solid var(--linea); }
.fila a {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: baseline;
  padding: clamp(24px, 3.6vh, 38px) 0;
  border-bottom: 1px solid var(--linea);
  transition: opacity .5s ease;
}
.indice-lista:hover .fila a { opacity: .32; }
.indice-lista .fila a:hover { opacity: 1; }
.fila-num { grid-column: 1 / 2; grid-row: 1; font: 500 11px/1 var(--sans); letter-spacing: .2em; color: var(--suave); }
.fila-nombre {
  grid-column: 2 / 7; grid-row: 1;
  font-weight: 300; font-size: clamp(34px, 3.6vw + 6px, 70px); line-height: 1; letter-spacing: -.015em;
  transition: transform .7s var(--curva);
}
.fila a:hover .fila-nombre { transform: translateX(14px); }
.fila-tipo { grid-column: 2 / 7; grid-row: 2; margin-top: 14px; font: 500 11px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }
.fila-desc { grid-column: 7 / 12; grid-row: 1 / span 2; align-self: center; font-size: 18.5px; line-height: 1.45; color: var(--suave); }
.fila-mini { display: none; }
.espia {
  position: fixed; left: 0; top: 0; z-index: 80;
  width: clamp(260px, 22vw, 360px); aspect-ratio: 4 / 3;
  pointer-events: none;
  opacity: 0; visibility: hidden;
}
.espia-marco { width: 100%; height: 100%; overflow: hidden; background: var(--calido); }
.espia-marco img { width: 100%; height: 100%; object-fit: cover; }
.espia-txt {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: var(--carbon); background: var(--hueso); padding: 10px 14px; border-radius: 999px;
}

/* ═══ BANDA ═══════════════════════════════════════════════════════ */
.banda {
  position: relative; height: 118vh; overflow: hidden; background: var(--carbon);
  display: grid; color: var(--carbon);
}
.banda-foto { position: absolute; inset: -9% 0; }
.banda-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.banda-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,15,0) 70%, rgba(15,15,15,.45) 100%); }
/* la frase va como la usan ellas: arriba a la derecha, en oscuro sobre las cortinas */
.banda-frase {
  position: relative; z-index: 2;
  justify-self: end; align-self: start;
  width: min(30vw, 440px); margin: 22vh var(--pad) 0 0;
}
.banda-frase svg { width: 100%; height: auto; }
.banda-pie { position: absolute; right: var(--pad); bottom: clamp(24px, 5vh, 48px); font: italic 400 18px/1 var(--serif); color: #EFEFEE; }

/* ═══ 04 · SERVICIOS ══════════════════════════════════════════════ */
.servicios { padding: var(--sec) 0; }
.modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(50px, 8vh, 90px); }
.modo { display: flex; flex-direction: column; }
.modo-foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--calido); margin-bottom: 26px; }
.modo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--curva), filter 1.4s ease; }
.modo:hover .modo-foto img { transform: scale(1.045); }
.modo-num { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.modo-titulo { font-weight: 300; font-size: clamp(32px, 1.9vw + 14px, 50px); line-height: 1; margin: 12px 0 16px; letter-spacing: -.01em; }

.alcances { margin-top: var(--sec); }
.alcances > .titulo-chico { grid-column: 1 / 6; padding-top: 22px; }
.alcances > .acordeon { grid-column: 7 / 13; }
.acordeon { border-top: 1px solid var(--linea); }
.acordeon-item { border-bottom: 1px solid var(--linea); }
.acordeon-item h3, .acordeon-item h4 { font: inherit; }
.acordeon-item button {
  width: 100%; display: flex; align-items: baseline; gap: 18px; text-align: left;
  padding: clamp(20px, 3vh, 28px) 0;
  font-weight: 400; font-size: clamp(23px, 1.2vw + 12px, 34px); line-height: 1.15;
}
.ac-titulo { flex: 1; display: block; transition: transform .6s var(--curva); }
.preguntas .ac-titulo { text-indent: -.32em; }   /* el «¿» cuelga: las preguntas alinean en la primera letra */
.acordeon-item button:hover .ac-titulo { transform: translateX(8px); }
.ac-icono { width: 16px; height: 16px; position: relative; flex: none; align-self: center; }
.ac-icono::before, .ac-icono::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.2px; background: currentColor;
  transition: transform .6s var(--curva);
}
.ac-icono::after { transform: rotate(90deg); }
.abierto .ac-icono::after { transform: rotate(0deg); }
.abierto .ac-icono::before { transform: rotate(180deg); }
.acordeon-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--curva); }
.acordeon-panel > div { overflow: hidden; }
.abierto .acordeon-panel { grid-template-rows: 1fr; }
.acordeon-panel p { font-size: 19px; line-height: 1.5; color: var(--suave); max-width: 31em; }
.acordeon-panel > div > p:last-child { padding-bottom: 28px; }
.acordeon-panel p + p { margin-top: 12px; }
.acordeon-panel p.etiquetas { font: 500 11px/1.8 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

/* ═══ 05 · PROCESO ════════════════════════════════════════════════ */
.proceso { position: relative; }
.proceso-fijo {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(26px, 5vh, 56px);
  padding-top: calc(var(--cab) + 1vh);
}
.proceso-cabeza { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; }
.proceso-cabeza .seccion-rotulo { grid-column: 1 / -1; margin-bottom: 20px; }
.proceso-barra { width: clamp(140px, 18vw, 280px); height: 1px; background: var(--linea); margin-bottom: 18px; }
.proceso-barra i { display: block; height: 100%; background: var(--tinta); transform: scaleX(0); transform-origin: left; }
.proceso-pista { display: flex; gap: clamp(140px, 13vw, 240px); width: max-content; padding: 0 var(--pad); will-change: transform; }
.etapa {
  display: grid; grid-template-columns: auto minmax(0, 420px); gap: clamp(26px, 3vw, 50px); align-items: end;
}
.etapa-foto { height: min(56vh, 620px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--calido); }
.etapa-foto img { width: 100%; height: 100%; object-fit: cover; }
.etapa-num { font-weight: 300; font-style: italic; font-size: clamp(54px, 4vw + 10px, 92px); line-height: .9; color: var(--taupe); }
.etapa h3 { font-weight: 300; font-size: clamp(36px, 2.4vw + 14px, 62px); line-height: 1; margin: 6px 0 16px; letter-spacing: -.01em; }
.pasos { list-style: none; margin-top: 24px; border-top: 1px solid var(--linea); }
.pasos li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 18px;
  counter-increment: paso;
}
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  font: 500 10.5px/1 var(--sans); letter-spacing: .16em; color: var(--suave);
  font-variant-numeric: lining-nums tabular-nums;
}
.etapa-cierre {
  width: min(30vw, 420px); align-self: center;
  display: flex; flex-direction: column; align-items: flex-start; gap: 30px;
  padding-right: var(--pad);
}
.etapa-cierre-t { font-weight: 300; font-size: clamp(34px, 2.6vw + 10px, 64px); line-height: 1.02; letter-spacing: -.01em; }

/* ═══ 06 · ESTUDIO ════════════════════════════════════════════════ */
.estudio { padding: var(--sec) 0 0; overflow: clip; }
.estudio-grilla { align-items: start; }
.estudio-foto { grid-column: 1 / 6; position: sticky; top: calc(var(--cab) + 36px); }
.estudio-foto .foto-marco { aspect-ratio: 4 / 5; }
.estudio-foto:hover img { filter: grayscale(0) contrast(1) brightness(1); }
.estudio-texto { grid-column: 7 / 13; padding-top: clamp(10px, 4vh, 60px); }
.estudio-texto .lead { margin-top: clamp(26px, 4vh, 40px); }
.estudio-texto .texto { margin-top: 18px; }
.datos { list-style: none; margin-top: clamp(34px, 5vh, 54px); border-top: 1px solid var(--linea); max-width: 36em; }
.datos li {
  display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--linea);
  font-size: 18.5px; line-height: 1.35;
}
.datos li span { font: 500 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }

.cinta { margin-top: var(--sec); padding: 22px 0 26px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); overflow: hidden; }
.cinta-pista {
  display: flex; width: max-content;
  font-weight: 300; font-style: italic; font-size: clamp(38px, 4.6vw + 10px, 96px); line-height: 1.05;
  color: var(--taupe); white-space: nowrap; will-change: transform;
}
.cinta-grupo { display: flex; align-items: baseline; gap: .55em; padding-right: .55em; }
.cinta-pista i { color: var(--tinta); font-style: normal; opacity: .5; }

/* ═══ 07 · DESARROLLADORAS ════════════════════════════════════════ */
.devs { padding: var(--sec) 0; }
.devs-grilla { align-items: center; }
.devs-texto { grid-column: 1 / 7; }
.devs-foto { grid-column: 8 / 13; }
.devs .lead { margin-top: clamp(24px, 4vh, 38px); color: var(--suave); }
.devs-servicios { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: clamp(40px, 6vh, 64px) 0 clamp(44px, 7vh, 70px); }
.devs-servicios article { border-top: 1px solid var(--linea); padding-top: 20px; }
.devs-servicios h3 { font-weight: 400; font-size: clamp(25px, 1vw + 14px, 32px); line-height: 1.05; margin: 0 0 12px; min-height: 2.1em; }
.devs-foto .foto-marco { aspect-ratio: 10 / 7; }
.devs-acciones { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* ═══ 08 · PREGUNTAS ══════════════════════════════════════════════ */
.preguntas { padding: var(--sec) 0; }
.preguntas-grilla { align-items: start; }
.preguntas-cabeza { grid-column: 1 / 6; position: sticky; top: calc(var(--cab) + 32px); }
.preguntas-grilla > .acordeon { grid-column: 7 / 13; }

/* ═══ 09 · CONTACTO ═══════════════════════════════════════════════ */
.contacto { padding: var(--sec) 0; }
.hablemos {
  font-weight: 300; font-style: italic;
  font-size: clamp(84px, 15.5vw, 290px); line-height: .86; letter-spacing: -.035em;
  margin-left: -.04em;
}
.hablemos .linea { padding-right: .12em; }
.contacto-grilla { margin-top: clamp(50px, 8vh, 90px); align-items: start; }
.elegir { grid-column: 1 / 7; }
.contacto-datos { grid-column: 7 / 13; }
.elegir-pregunta { font-weight: 400; font-size: clamp(26px, 1.2vw + 16px, 36px); line-height: 1.1; margin-bottom: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.chips button {
  font: 400 14px/1 var(--sans); padding: 13px 18px;
  border: 1px solid var(--linea-fuerte); border-radius: 999px;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.chips button:hover { border-color: var(--tinta); }
.chips button[aria-checked="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.nota-chica { margin-top: 20px; font-size: 17px; line-height: 1.5; color: var(--suave); }
.contacto-datos { border-top: 1px solid var(--linea); }
.contacto-datos > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.contacto-datos dt { font: 500 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }
.contacto-datos dd { font-size: 19px; }

/* ═══ PIE ═════════════════════════════════════════════════════════ */
.pie { padding: 0 0 34px; }
.pie-patron { height: 12px; background-repeat: repeat-x; background-size: auto 12px; background-position: left center; opacity: .3; margin-bottom: clamp(70px, 11vh, 130px); }
.pie-arriba { align-items: end; }
.pie-logo { grid-column: 1 / 7; color: var(--logo); display: block; }
.logo-grande { width: clamp(260px, 34vw, 520px); height: auto; }  /* mínimo del kit: 190 px */
.pie-tagline { grid-column: 7 / 13; font-weight: 400; font-size: clamp(22px, .8vw + 15px, 28px); line-height: 1.25; max-width: 15em; }
.pie-columnas {
  margin-top: clamp(60px, 9vh, 100px); padding-top: 24px; border-top: 1px solid var(--linea);
  font-size: 17px; line-height: 1.3;
}
.pie-columnas > :nth-child(1) { grid-column: 1 / 4; }
.pie-columnas > :nth-child(2) { grid-column: 4 / 7; }
.pie-columnas > :nth-child(3) { grid-column: 7 / 10; }
.pie-columnas > :nth-child(4) { grid-column: 10 / 13; }
.pie-columnas nav { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pie-abajo { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(50px, 8vh, 90px); flex-wrap: wrap; }
.pie-ciudad { width: clamp(470px, 38vw, 560px); color: var(--tinta); }   /* así el sello del medio pasa los 110 px del kit */
.pie-ciudad svg { width: 100%; height: auto; }
.pie-ciudad-txt { display: none; font-size: 18px; }
.pie small { font: 400 11.5px/1.4 var(--sans); letter-spacing: .08em; color: var(--suave); }

/* ═══ WhatsApp flotante (sólo celular) ════════════════════════════ */
.wa-flotante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 95;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--carbon); color: var(--hueso);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.94);
  transition: opacity .5s ease, visibility .5s, transform .6s var(--curva);
}
.wa-flotante.visible { opacity: 1; visibility: visible; transform: none; }
.wa-flotante svg { width: 22px; height: 22px; flex: none; }
body.tema-oscuro .wa-flotante { background: var(--hueso); color: var(--carbon); }
@media (min-width: 901px) { .wa-flotante { display: none; } }

/* aviso de maqueta */
.aviso {
  position: fixed; left: 50%; bottom: 26px; z-index: 450;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--carbon); color: var(--hueso);
  font: 400 13.5px/1.4 var(--sans); padding: 14px 20px; border-radius: 12px;
  max-width: calc(100vw - 32px); text-align: center;
  transition: opacity .5s ease, transform .6s var(--curva);
}
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }

/* ═══ Responsive ══════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .devs-servicios { grid-template-columns: 1fr; }
  .devs-servicios h3 { min-height: 0; }
}

@media (max-width: 900px) {
  :root { --cab: 64px; --sec: clamp(64px, 9vh, 88px); }
  body { font-size: 18px; }
  .g12 > * { grid-column: 1 / -1 !important; }
  .cabecera-nav, .cabecera-cta { display: none; }
  .cabecera-menu { display: inline-flex; }
  .cabecera-marca .simbolo { width: 80px; }

  .hero { height: 210vh; }
  .hero-texto { top: calc(var(--cab) + 4vh); transform: none; width: auto; right: var(--pad); }
  .hero-titulo { font-size: clamp(40px, 10.6vw, 64px); }
  .hero-acciones { margin-top: 22px; gap: 22px; }
  .hero-pie { display: none; }
  .hero-tapa-firma { display: none; }
  .hero-tapa-obra { font-size: 17px; }

  .manifiesto-firma { margin-bottom: 28px; }
  .forma-manifiesto { width: 90vw; right: -40vw; top: 2%; }

  .seccion-cabeza .intro { margin-top: 20px; }
  .caso-texto, .caso-fotos, .caso-invertido .caso-texto, .caso-invertido .caso-fotos { grid-row: auto; }
  .caso-fijo { position: static; margin-bottom: 40px; }
  .caso-fotos { row-gap: 38px; }
  .foto-alta { grid-column: 1 / span 8; }
  .foto-media { grid-column: 3 / -1; }
  .foto-alta.foto-corrida { grid-column: 5 / -1; grid-row: auto; margin-top: 0; }
  .foto-alta.foto-corrida ~ .foto-media { grid-column: 1 / span 10; grid-row: auto; }

  .boceto-escena { margin-top: 30px; padding-bottom: 30%; }
  .boceto-dibujo { left: auto; right: 0; bottom: 0; width: 46%; outline-width: 6px; }
  .boceto-notas text { font-size: 78px; }
  .boceto-notas path { stroke-width: 5; }
  .boceto-notas circle { r: 10; }

  .fila a { row-gap: 8px; }
  .fila-num { grid-column: 1 / -1 !important; }
  .fila-nombre, .fila-tipo, .fila-desc { grid-column: 1 / -1; grid-row: auto; }
  .fila-tipo { margin-top: 2px; }
  .fila-mini { display: block; grid-column: 1 / -1; margin-top: 12px; aspect-ratio: 16 / 10; overflow: hidden; }
  .fila-mini img { width: 100%; height: 100%; object-fit: cover; }
  .indice-lista:hover .fila a { opacity: 1; }
  .espia { display: none; }

  .estudio-foto { position: relative; top: auto; }
  .estudio-texto { padding-top: 46px; }
  .datos li { grid-template-columns: 1fr; gap: 6px; }

  .banda { height: 92vh; color: #EFEFEE; }
  .banda-frase { justify-self: start; align-self: end; width: calc(100vw - 2 * var(--pad)); margin: 0 var(--pad) 14vh; }
  .banda-velo { background: linear-gradient(180deg, rgba(15,15,15,.1) 40%, rgba(15,15,15,.5) 100%); }

  .modos { grid-template-columns: 1fr; gap: 56px; }
  .modo-titulo { font-weight: 400; }
  .alcances > .titulo-chico { padding-top: 0; margin-bottom: 20px; }

  .proceso-fijo { position: static; height: auto; overflow: visible; padding: var(--sec) 0 20px; }
  .proceso-cabeza { grid-template-columns: 1fr; }
  .proceso-barra { display: none; }
  .proceso-pista { flex-direction: column; width: auto; gap: 64px; }
  .etapa { grid-template-columns: 1fr; }
  .etapa-foto { height: auto; width: 100%; aspect-ratio: 4 / 3; }
  .etapa-cierre { width: 100%; padding-right: 0; }

  .devs-foto { margin-top: 50px; max-width: 560px; }
  .preguntas-cabeza { position: static; margin-bottom: 28px; }
  .contacto-datos { margin-top: 50px; }

  .pie-patron { margin-bottom: 64px; }
  .pie-tagline { margin-top: 28px; }
  .pie-columnas > * { grid-column: auto !important; }
  .pie-columnas { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .pie-ciudad { display: none; }
  .pie-ciudad-txt { display: block; }
}

@media (max-width: 560px) {
  .seccion-rotulo { gap: 12px; }
  .seccion-rotulo .num::after { width: 22px; margin-left: 12px; }
  .mi-sistema { font-size: 19px; }
  .cajetin { grid-template-columns: 1fr 1fr; }
  .cajetin > div:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-top: 1px solid var(--linea); }
  .cajetin > div:nth-child(3)::before { display: none; }
  .foto-alta, .foto-media, .foto-alta.foto-corrida, .foto-alta.foto-corrida ~ .foto-media { grid-column: 1 / -1; }
  .chips button { font-size: 13.5px; padding: 12px 15px; }
  .contacto-datos > div { grid-template-columns: 1fr; gap: 4px; }
  .pie-columnas { grid-template-columns: 1fr; }
}

/* ═══ Movimiento reducido: todo visible, sin recorridos fijados ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero { height: auto; }
  .hero-fijo, .proceso-fijo { position: relative; }
  .hero-fijo { height: 100svh; }
  .proceso-fijo { height: auto; overflow: visible; padding-bottom: 60px; }
  .proceso-pista { flex-wrap: wrap; width: auto; row-gap: 70px; }
  .js .telon-sello path[stroke] { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .telon-sello path:not([stroke]) { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   CATÁLOGO DE PROYECTOS (/proyectos/) Y PÁGINA DE CADA PROYECTO
   Misma grilla de 12 columnas, mismos rótulos y el mismo cajetín de la home.
   ════════════════════════════════════════════════════════════════════ */

/* la home: el enlace al proyecto completo, debajo de cada caso */
.caso-ver { display: inline-block; margin-top: clamp(26px, 4vh, 38px); }

/* transición entre páginas: la foto de la tarjeta se convierte en la portada del proyecto */
@view-transition { navigation: auto; }
.cabecera { view-transition-name: cabecera; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
::view-transition-group(*.foto) { animation-duration: .85s; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
::view-transition-image-pair(*.foto) { overflow: clip; }
::view-transition-old(*.foto), ::view-transition-new(*.foto) { height: 100%; object-fit: cover; }

.pagina-sub { padding-top: var(--cab); }
.migas { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: clamp(34px, 6vh, 64px); }
.migas .rotulo { font-variant-numeric: lining-nums tabular-nums; }

/* etiqueta sobre una imagen: «Render», «Antes», «Obra» */
.etiqueta {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--carbon); background: color-mix(in srgb, var(--hueso) 90%, transparent);
  padding: 8px 11px 7px; border-radius: 999px; pointer-events: none;
}

/* ─── Catálogo ───────────────────────────────────────────────────── */
.catalogo-cabeza { padding-top: clamp(46px, 9vh, 120px); align-items: end; }
.catalogo-cabeza .migas { grid-column: 1 / -1; }
.catalogo-cabeza .titulo-seccion { grid-column: 1 / 8; }
.catalogo-cabeza .intro { grid-column: 8 / 13; padding-bottom: 8px; }
/* Filtros: palabras sueltas; la elegida queda rodeada a mano con la forma orgánica del sello.
   Ilan eligió este estilo («Trazo») entre tres el 28/10: las cápsulas le parecieron las de siempre. */
.filtros { grid-column: 1 / -1; margin-top: clamp(44px, 7vh, 84px); }
.filtro {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px clamp(30px, 3.2vw, 58px);
  padding: 18px 0 16px;
}
.filtro + .filtro { border-top: 1px solid var(--linea); }
.filtro-nombre { width: 120px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.filtro button {
  position: relative; padding: 6px 4px;
  font: 300 clamp(26px, 1.4vw + 14px, 42px)/1.15 var(--serif); color: var(--suave);
  font-variant-numeric: lining-nums; transition: color .5s ease;
}
.filtro button:hover, .filtro button[aria-pressed="true"] { color: var(--tinta); }
.filtro .cuenta { font: 500 10.5px/1 var(--sans); letter-spacing: .06em; vertical-align: super; margin-left: 4px; opacity: .85; }
.trazo {
  position: absolute; inset: -14% -16% -8% -14%; pointer-events: none;
  clip-path: inset(0 100% 0 0); transition: clip-path .85s cubic-bezier(.65, 0, .35, 1);
}
.filtro button:nth-of-type(2n) .trazo { transform: rotate(-4deg); }
.filtro button:nth-of-type(3n) .trazo { transform: rotate(3deg) scaleY(1.08); }
.trazo svg { width: 100%; height: 100%; overflow: visible; }
.trazo path { fill: none; stroke: currentColor; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.filtro button[aria-pressed="true"] .trazo { clip-path: inset(-30% -30% -30% -30%); }

/* Lámina: todos los proyectos del mismo tamaño, cada uno en una celda de líneas finas.
   Ilan la eligió entre cinco vistas el 28/10: la primera versión, con fotos de tamaños y lugares
   distintos, no le gustó. */
.catalogo-envoltura { padding-top: clamp(48px, 8vh, 96px); padding-bottom: var(--sec); }
.catalogo {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--linea); border-left: 1px solid var(--linea);
}
.tarjeta { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.tarjeta[hidden] { display: none; }
.tarjeta a {
  display: block; height: 100%;
  padding: clamp(14px, 1.3vw, 22px) clamp(14px, 1.3vw, 22px) clamp(26px, 2.3vw, 36px);
  transition: background-color .7s ease;
}
.tarjeta a:hover { background: color-mix(in srgb, var(--calido) 60%, transparent); }
.tarjeta-foto { position: relative; overflow: hidden; background: var(--calido); aspect-ratio: 5 / 4; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--curva), filter 1.2s ease; }
.tarjeta a:hover .tarjeta-foto img { transform: scale(1.045); }
.tarjeta-foto.bn img { filter: grayscale(1) contrast(1.06) brightness(1.02); }
.tarjeta a:hover .tarjeta-foto.bn img { filter: grayscale(0); }
.tarjeta-pie {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline;
  margin-top: 18px;
}
.tarjeta-num { font: 500 11px/1 var(--sans); letter-spacing: .2em; color: var(--suave); font-variant-numeric: lining-nums tabular-nums; }
.tarjeta-nombre { font-weight: 300; font-size: clamp(25px, 1.15vw + 12px, 36px); line-height: 1.05; letter-spacing: -.01em; }
.tarjeta-nombre::after {
  content: "→"; display: inline-block; margin-left: .3em; font-style: normal;
  opacity: 0; transform: translateX(-8px); transition: opacity .5s ease, transform .7s var(--curva);
}
.tarjeta a:hover .tarjeta-nombre::after, .tarjeta a:focus-visible .tarjeta-nombre::after { opacity: 1; transform: none; }
.tarjeta-estado { font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--suave); white-space: nowrap; }
.tarjeta-meta {
  grid-column: 2 / -1; margin-top: 10px;
  font: 500 11px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--suave);
}
@media (max-width: 1100px) { .catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .catalogo { grid-template-columns: 1fr; } }
.catalogo-vacio { padding-bottom: var(--sec); display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.catalogo-vacio[hidden] { display: none; }
.catalogo-vacio p { font-size: clamp(24px, 1.2vw + 14px, 32px); }

/* cierre del catálogo y de cada proyecto: la invitación a escribir */
.cierre { padding: var(--sec) 0; border-top: 1px solid var(--linea); }
.cierre .g12 { align-items: end; }
.cierre-t { grid-column: 1 / 8; }
.cierre-acciones { grid-column: 8 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-bottom: 10px; }

/* ─── Página de un proyecto ──────────────────────────────────────── */
.proyecto-cabeza { padding-top: clamp(40px, 8vh, 110px); }
.proyecto-nombre {
  font-weight: 300;
  font-size: clamp(64px, 9vw + 8px, 196px);
  line-height: .9; letter-spacing: -.028em;
  margin: 0 0 clamp(32px, 5vh, 56px) -.04em;
  text-wrap: balance;
}
.proyecto-nombre em { font-weight: 300; }
.proyecto-datos { align-items: end; }
.proyecto-datos .cajetin { grid-column: 1 / 9; grid-template-columns: repeat(var(--celdas, 4), minmax(0, 1fr)); }
.proyecto-datos .proyecto-resumen { grid-column: 9 / 13; font-size: 18.5px; line-height: 1.45; color: var(--suave); padding-bottom: 6px; }

.proyecto-portada {
  position: relative; overflow: hidden; background: var(--calido);
  margin-top: clamp(44px, 7vh, 84px);
  height: min(90vh, 60vw); min-height: 340px;
  view-transition-class: foto;
}
.proyecto-portada img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

.proyecto-intro { padding-top: var(--sec); align-items: start; }
.proyecto-intro .lead { grid-column: 1 / 7; }
.proyecto-texto { grid-column: 8 / 13; }

.galeria { padding-top: var(--sec); }
.gfila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.gfila + .gfila { margin-top: clamp(46px, 7vw, 120px); }
.gfila .foto-marco { aspect-ratio: var(--ar, 3 / 2); }
.gfila-ancha > .foto { grid-column: 1 / -1; }
.gfila-media > .foto { grid-column: 1 / 9; }
.gfila-media.der > .foto { grid-column: 5 / 13; }
.gfila-par > .foto:first-child { grid-column: 1 / 6; }
.gfila-par > .foto:last-child { grid-column: 7 / 13; margin-top: 22%; }
.gfila-par.der > .foto:first-child { grid-column: 2 / 7; margin-top: 18%; }
.gfila-par.der > .foto:last-child { grid-column: 8 / 13; margin-top: 0; }
.gfila-sola > .foto { grid-column: 4 / 10; }
.gfila-mixta > .foto:first-child { grid-column: 1 / 6; }
.gfila-mixta > .foto:last-child { grid-column: 7 / 13; align-self: end; }
.gfila-mixta.der > .foto:first-child { grid-column: 8 / 13; grid-row: 1; }
.gfila-mixta.der > .foto:last-child { grid-column: 1 / 7; grid-row: 1; align-self: end; }
.galeria-grupo {
  display: flex; align-items: baseline; gap: 18px;
  border-top: 1px solid var(--linea); padding-top: 22px;
  margin: clamp(70px, 10vw, 150px) 0 clamp(34px, 5vh, 54px);
}
.galeria-grupo:first-child { margin-top: 0; }
.galeria-grupo h2 { font-weight: 400; font-size: clamp(28px, 1.8vw + 8px, 40px); line-height: 1.08; }
.galeria-grupo p { margin-left: auto; max-width: 30em; font-size: 18px; color: var(--suave); }

.proyecto-proceso { padding-top: var(--sec); }
.proyecto-proceso-cabeza { align-items: end; margin-bottom: clamp(30px, 5vh, 50px); }
.proyecto-proceso-cabeza .titulo-chico { grid-column: 1 / 6; }
.proyecto-proceso-cabeza .texto { grid-column: 7 / 12; }
.tira { display: flex; gap: var(--gap); align-items: flex-start; }
.tira .foto { flex: var(--r, 1) 1 0%; min-width: 0; }
.tira .foto-marco { aspect-ratio: var(--ar, 4 / 5); }
.tira .foto-marco img { transform: none; }
.tira .foto:only-child { flex: 0 1 auto; width: min(100%, 440px); }
.proyecto-portada.bn img, .siguiente-foto.bn img { filter: grayscale(1) contrast(1.06) brightness(1.02); }

.siguiente { display: block; border-top: 1px solid var(--linea); padding: var(--sec) 0; overflow: clip; }
.siguiente .g12 { align-items: end; }
.siguiente-texto { grid-column: 1 / 8; }
.siguiente-nombre {
  display: block; margin-top: 18px;
  font-weight: 300; font-size: clamp(56px, 7vw + 10px, 150px); line-height: .92; letter-spacing: -.025em;
  transition: transform .9s var(--curva);
}
.siguiente-meta { display: block; margin-top: 22px; font: 500 11px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.siguiente-foto { grid-column: 9 / 13; aspect-ratio: 4 / 3; overflow: hidden; background: var(--calido); view-transition-class: foto; }
.siguiente-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--curva); }
.siguiente:hover .siguiente-nombre { transform: translateX(16px); }
.siguiente:hover .siguiente-foto img { transform: scale(1.05); }

@media (max-width: 900px) {
  .catalogo-cabeza .intro { margin-top: 20px; }
  .filtro-nombre { width: 100%; }
  .cierre-acciones { margin-top: 28px; }

  .proyecto-datos .cajetin { grid-template-columns: 1fr 1fr; }
  .proyecto-datos .cajetin > div:nth-child(3) { padding-left: 0; }
  .proyecto-datos .cajetin > div:nth-child(3)::before { display: none; }
  .proyecto-datos .cajetin > div:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .proyecto-datos .proyecto-resumen { margin-top: 26px; }
  .proyecto-portada { height: auto; aspect-ratio: 4 / 3.4; min-height: 0; }
  .proyecto-texto { margin-top: 28px; }

  .gfila + .gfila { margin-top: 40px; }
  .gfila > .foto, .gfila.der > .foto { grid-column: 1 / -1 !important; margin-top: 0 !important; grid-row: auto !important; }
  .gfila-par { grid-template-columns: 1fr 1fr; }
  .gfila-par > .foto:first-child, .gfila-par.der > .foto:first-child { grid-column: 1 / 2 !important; }
  .gfila-par > .foto:last-child, .gfila-par.der > .foto:last-child { grid-column: 2 / 3 !important; }
  .gfila-mixta > .foto + .foto { margin-top: 40px !important; }
  .galeria-grupo { flex-direction: column; gap: 10px; }
  .galeria-grupo p { margin-left: 0; }
  .tira { flex-wrap: wrap; }
  .tira .foto { flex: 1 1 calc(50% - var(--gap)); }
  .tira .foto-marco { aspect-ratio: 4 / 5; }

  .siguiente-foto { margin-top: 34px; max-width: 520px; }
}
@media (max-width: 560px) {
  .proyecto-datos .cajetin { grid-template-columns: 1fr 1fr; }
  .proyecto-datos .cajetin > div:nth-child(3) { grid-column: auto; border-top: 1px solid var(--linea); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* el menú marca dónde estás; sin JS no hay filtros */
.cabecera-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.menu nav a[aria-current] b { font-style: italic; }
html:not(.js) .filtros { display: none; }
.catalogo-cabeza .seccion-rotulo { grid-column: 1 / -1; }
.tarjeta-foto { view-transition-class: foto; }