/* ==========================================================================
   EMECUBO V3 — "Ficha técnica"
   Papel cálido, tinta, rojo solo como punto (■) y exponente.
   Una retícula de 12 columnas en una caja de 1600 px. Columna 1–3 = etiqueta,
   4–12 = contenido. El cuadrado (m³) es el módulo de imagen y de puntuación.

   1. Tokens          5. Hero              9. Estudio
   2. Base            6. Trayectoria      10. Contacto
   3. Tipografía      7. Servicios        11. Footer
   4. Header          8. Proyectos        12. Archivo · Single
                                           13. Responsive · movimiento
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --paper: #F6F5F1;
  --paper-2: #EFEDE7;
  --ink: #220202;
  --grey: #4B4343;
  --mute: #6F6464;
  --soft: #887E7E;            /* texto grande secundario (≥ 3:1 sobre papel) */
  --line: rgba(34, 2, 2, .14);
  --line-strong: rgba(34, 2, 2, .32);
  --red: #FE0100;
  --blush: #F4EAEA;

  --box: 1600px;
  --gutter: clamp(20px, 3.4vw, 48px);
  --gap: clamp(16px, 1.75vw, 28px);
  --hd: 76px;
  --sec: clamp(112px, 12.5vw, 216px);

  --f-sans: 'Host Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'Fragment Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap { width: min(var(--box), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sec { padding-top: var(--sec); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper); transform: translateY(-160%); transition: transform .2s; }
.skip:focus { transform: none; }

.logo { display: block; width: 100%; height: auto; fill: var(--red); }

/* ---------- 3. Tipografía ---------- */
.t-display {
  font-size: clamp(54px, 8.4vw, 160px);
  line-height: .92;
  letter-spacing: -.052em;
  font-weight: 330;
}
.t-h2 {
  font-size: clamp(34px, 4.1vw, 76px);
  line-height: 1.02;
  letter-spacing: -.042em;
  font-weight: 330;
  text-wrap: balance;
}
.t-h3 {
  font-size: clamp(24px, 2vw, 36px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 400;
}
.t-lead {
  font-size: clamp(27px, 2.95vw, 54px);
  line-height: 1.14;
  letter-spacing: -.034em;
  font-weight: 300;
}
.t-body { font-size: clamp(16px, 1.06vw, 18px); line-height: 1.6; color: var(--grey); }
.mono {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 400;
}

/* Etiqueta de sección (columna 1–3) con el cuadrado rojo */
.label { color: var(--ink); }
.label::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 12px;
  background: var(--red); vertical-align: 1px;
}

/* El punto final de marca: un cuadrado rojo */
.sq {
  display: inline-block; width: .14em; height: .14em; margin-left: .06em;
  background: var(--red); vertical-align: baseline;
}

/* Enlace con flecha */
.arrow-link { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.arrow-link svg { width: 24px; height: 10px; flex: none; transition: transform .45s var(--ease); }
.arrow-link > span, .arrow-link { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; }
.arrow-link:hover svg { transform: translateX(6px); }
.arrow-link:not(.mono) { font-size: 17px; }

/* Cabecera de sección: etiqueta + titular */
.sec__head { row-gap: 24px; margin-bottom: clamp(56px, 6.4vw, 120px); align-items: start; }
.sec__head > .label { grid-column: 1 / span 3; padding-top: .9em; }
.sec__head > h2 { grid-column: 4 / span 8; }

/* ---------- 4. Header ---------- */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--hd);
  background: var(--paper);
  transition: box-shadow .3s;
}
.hd.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.hd__in { height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.hd__logo { grid-column: 1 / span 2; width: 128px; }
.hd__nav { grid-column: 7 / span 6; display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); font-size: 15px; }
.hd__nav > a { position: relative; padding-block: 6px; }
.hd__nav > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.hd__nav > a:hover::after, .hd__nav > a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.hd__lang { margin-left: auto; color: var(--mute); }
.hd__lang a[aria-current="true"] { color: var(--ink); }
.hd__toggle { display: none; }

/* ---------- 5. Hero ---------- */
.hero { position: relative; height: 230vh; }
.hero__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  padding-top: var(--hd);
  padding-bottom: clamp(20px, 3vh, 40px);
}
.hero__stage {
  position: relative; height: 100%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  grid-template-rows: 1fr auto;
}
.hero__title { grid-column: 1 / span 8; grid-row: 1; align-self: start; padding-top: clamp(24px, 5vh, 64px); position: relative; z-index: 1; }
.hero__title .ln { display: block; }
.hero__title .ln > span { display: inline-block; }
.hero__foot { grid-column: 1 / span 5; grid-row: 2; align-self: end; position: relative; z-index: 1; }
.hero__sub { font-size: clamp(17px, 1.3vw, 22px); line-height: 1.4; letter-spacing: -.01em; color: var(--grey); max-width: 26em; text-wrap: pretty; }
.hero__links { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 28px; }

.hero__slot {
  grid-column: 9 / span 4; grid-row: 1; align-self: end;
  width: min(100%, calc(100svh - var(--hd) - 180px));
  justify-self: end;
  aspect-ratio: 1;
  margin-bottom: 20px;
}
.hero__caption {
  grid-column: 9 / span 4; grid-row: 2; align-self: end;
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: 16px;
  position: relative; z-index: 3;
}
.hero__count { color: var(--mute); }
.hero__count b { color: var(--ink); font-weight: 400; }
.hero__name { font-size: 17px; letter-spacing: -.01em; }
.hero__bars { display: flex; gap: 6px; align-self: center; }
.hero__bars i { width: 26px; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.hero__bars i::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.hero__bars i.is-on::after { animation: bar var(--hero-delay, 5.5s) linear forwards; }
.hero.is-paused .hero__bars i.is-on::after { animation-play-state: paused; }
@keyframes bar { to { transform: scaleX(1); } }
.hero__pause { width: 22px; height: 22px; display: grid; place-items: center; align-self: center; color: var(--ink); }
.hero__pause svg { width: 9px; height: 10px; }
.hero__pause .i-play, .hero.is-paused .hero__pause .i-pause { display: none; }
.hero.is-paused .hero__pause .i-play { display: block; }

/* Ventana: ocupa toda la escena; JS la recorta (clip-path) al hueco y la abre con el scroll */
.hero__aperture {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden;
  background: var(--paper-2);
  clip-path: inset(0 0 0 100%);
}
.hero__media { position: absolute; inset: 0; }
.hero__img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero__img.is-active { opacity: 1; z-index: 1; }
.hero__img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 0 0; will-change: transform; }
.hero__aperture.is-js .hero__img img { width: auto; height: auto; max-width: none; object-fit: fill; }
.hero__over {
  position: absolute; left: clamp(20px, 2.4vw, 40px); bottom: clamp(20px, 2.4vw, 40px); right: clamp(20px, 2.4vw, 40px); z-index: 2;
  display: flex; flex-direction: column; gap: 10px; color: #fff; opacity: 0; pointer-events: none;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .25);
}
.hero__over-title { font-size: clamp(28px, 3vw, 54px); line-height: 1; letter-spacing: -.035em; font-weight: 330; }
.hero__aperture::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(20, 4, 4, .45), rgba(20, 4, 4, 0) 42%);
  opacity: var(--shade, 0);
}

/* ---------- 6. Trayectoria ---------- */
.facts .label { grid-column: 1 / span 3; padding-top: 1em; }
.facts__text { grid-column: 4 / span 9; color: var(--soft); text-wrap: pretty; }
.facts__text b { color: var(--ink); font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- 7. Servicios ---------- */
.svc__line { position: relative; height: 12px; margin-bottom: 40px; }
.svc__rule { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); transform-origin: left; }
.svc__dot {
  position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px;
  left: calc(var(--x) * (100% + var(--gap)) / 3);
  background: var(--red);
}
.svc__end { position: absolute; right: -2px; top: 50%; width: 24px; height: 10px; margin-top: -5px; color: var(--ink); }
.svc__cols { row-gap: 56px; }
.svc__item { grid-column: span 4; display: flex; flex-direction: column; gap: 18px; padding-right: clamp(0px, 3vw, 56px); }
.svc__when { color: var(--mute); }
.svc__item .t-body { max-width: 30em; }
.svc__item .arrow-link { margin-top: auto; padding-top: 12px; }

/* ---------- 8. Proyectos (Home): pila de fichas ---------- */
.work__head > h2 { grid-column: 4 / span 6; }
.filters { grid-column: 10 / span 3; justify-self: end; align-self: end; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 0;
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink);
  transition: background .25s, color .25s, border-color .25s;
}
.chip sup { font-size: 9px; color: var(--red); top: -.5em; position: relative; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed="true"] sup { color: inherit; }

.stack { --tab: 72px; --n: 3; position: relative; }
.ficha {
  position: sticky; top: calc(var(--hd) + var(--i, 0) * var(--tab));
  height: clamp(560px, calc(100svh - var(--hd) - (var(--n) - 1) * var(--tab) - 28px), 860px);
  display: flex; flex-direction: column;
  background: var(--paper);
  border-top: 1px solid var(--line-strong);
}
.ficha__tab {
  flex: none; height: var(--tab);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center;
}
.ficha__ref { grid-column: 1; color: var(--mute); }
.ficha__title { grid-column: 2 / span 6; font-size: clamp(22px, 1.75vw, 30px); letter-spacing: -.03em; line-height: 1; transition: color .3s; }
.ficha__place { grid-column: 8 / span 2; color: var(--mute); }
.ficha__sector { grid-column: 10 / span 2; color: var(--mute); }
.ficha__go { grid-column: 12; justify-self: end; width: 24px; height: 10px; transition: transform .45s var(--ease); }
.ficha__tab:hover .ficha__go { transform: translateX(6px); }
.ficha__tab:hover .ficha__title { color: var(--red); }
.ficha__body {
  flex: 1; min-height: 0; padding-bottom: 28px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
}
.ficha__media { grid-column: 1 / span 8; position: relative; overflow: hidden; background: var(--paper-2); }
.ficha__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.ficha__media:hover img { transform: scale(1.03); }
.ficha__info { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 32px; min-height: 0; }
.ficha__scope { font-size: clamp(18px, 1.35vw, 23px); line-height: 1.38; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.ficha__info .spec { margin-top: auto; }
.empty { padding: 48px 0; color: var(--mute); border-top: 1px solid var(--line); }
.work__more { padding-top: 40px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }

/* Ficha técnica (dl) — compartida por Home, Archivo y Single */
.spec { border-top: 1px solid var(--line); }
.spec > div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); padding-top: 2px; }
.spec dd { font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; }

/* ---------- La experiencia lo es todo: ciudades ---------- */
.places__head { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 10px; padding-top: .9em; }
.places__note { color: var(--mute); }
.places__body { grid-column: 4 / span 9; }
.places__list {
  font-size: clamp(30px, 3.5vw, 64px); line-height: 1.12; letter-spacing: -.038em; font-weight: 300;
  color: var(--ink);
}
.places__list a { display: inline-block; margin-right: .3em; white-space: nowrap; transition: color .3s; }
.places__list a:hover { color: var(--red); }
.places__list sup {
  font-family: var(--f-mono); font-size: max(11px, .2em); letter-spacing: 0; font-weight: 400;
  color: var(--red); line-height: 1; vertical-align: text-top; position: relative; top: .35em; margin-left: .22em;
}
.places__list--abroad { margin-top: .6em; color: var(--soft); }
.places__abroad { display: block; color: var(--mute); margin-bottom: 14px; letter-spacing: .04em; }

/* ---------- 9. Estudio ---------- */
.studio__intro { row-gap: 40px; }
.studio__text { grid-column: 4 / span 5; font-size: clamp(17px, 1.2vw, 20px); color: var(--grey); text-wrap: pretty; }
.studio__disc { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 14px; }
.studio__disc > .mono { color: var(--mute); }
.disc li { font-size: clamp(20px, 1.6vw, 28px); line-height: 1.25; letter-spacing: -.025em; }
.team { margin-top: clamp(72px, 8vw, 144px); row-gap: 64px; align-items: start; }
.person { grid-column: 4 / span 4; display: flex; flex-direction: column; gap: 22px; }
.person + .person { grid-column: 9 / span 4; margin-top: clamp(0px, 9vw, 168px); }
.person__img { aspect-ratio: 1; background: var(--blush); position: relative; overflow: hidden; isolation: isolate; }
.person__img img {
  position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 94%;
  object-fit: contain; object-position: 50% 100%;
  filter: grayscale(1) contrast(1.04); mix-blend-mode: multiply;
}
.person__name { font-size: clamp(24px, 2vw, 36px); line-height: 1.05; letter-spacing: -.03em; font-weight: 400; }
.person__body { display: flex; flex-direction: column; gap: 10px; }
.person__role { color: var(--mute); }
.person__bio { margin-top: 8px; }
.person__bio { max-width: 30em; }

/* ---------- 10. Contacto ---------- */
.cta { padding-bottom: var(--sec); }
.cta__title { margin-top: clamp(28px, 3vw, 48px); }
.cta__people { margin-top: clamp(56px, 6vw, 104px); row-gap: 48px; }
.contact { grid-column: 7 / span 3; display: flex; flex-direction: column; gap: 8px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.contact + .contact { grid-column: 10 / span 3; }
.contact__area { color: var(--mute); margin-bottom: 14px; }
.contact__name { font-size: 17px; }
.contact__mail { font-size: clamp(19px, 1.5vw, 26px); letter-spacing: -.02em; line-height: 1.2; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: color .3s; }
.contact__mail:hover { color: var(--red); }
.contact__tel { color: var(--grey); width: fit-content; }
.contact__tel:hover { color: var(--ink); }

/* ---------- 11. Footer ---------- */
.ft { padding-bottom: 28px; }
.ft__top { row-gap: 32px; align-items: start; padding-top: clamp(40px, 4vw, 64px); border-top: 1px solid var(--line-strong); }
.ft__logo { grid-column: 1 / span 2; width: 128px; }
.ft__claim { grid-column: 4 / span 3; color: var(--mute); }
.ft__nav { grid-column: 7 / span 3; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.ft__legal { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 6px; color: var(--mute); }
.ft__nav a:hover, .ft__legal a:hover { color: var(--red); }
.ft__bar { margin-top: clamp(56px, 6vw, 96px); padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.ft__bar > .mono { color: var(--mute); }
.eu { display: flex; align-items: center; gap: 12px; color: var(--grey); font-size: 10px; line-height: 1.2; }
.eu svg { width: 39px; height: 26px; flex: none; }
.eu b { display: block; font-weight: 600; font-size: 10.5px; }
.eu__sep { width: 1px; align-self: stretch; background: var(--line-strong); }

/* ---------- 12a. Archivo ---------- */
.page-top { padding-top: calc(var(--hd) + clamp(48px, 7vw, 120px)); }
.arch__head { row-gap: 28px; align-items: end; padding-bottom: clamp(40px, 4vw, 64px); }
.arch__head > .label { grid-column: 1 / span 12; }
.arch__title { grid-column: 1 / span 7; }
.arch__title sup { font-family: var(--f-mono); font-size: max(12px, .14em); letter-spacing: 0; font-weight: 400; color: var(--red); position: relative; top: -3.6em; margin-left: .2em; vertical-align: baseline; }
.arch__intro { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 28px; }
.arch__intro .t-body { max-width: 30em; }
.arch__intro .filters { justify-self: start; }
.arch__active { display: flex; align-items: center; gap: 10px; color: var(--mute); }
.arch__active a { color: var(--ink); border-bottom: 1px solid currentColor; }
.arch__grid { row-gap: clamp(48px, 5vw, 88px); padding-top: 28px; border-top: 1px solid var(--line-strong); }
.card { grid-column: span 4; display: flex; flex-direction: column; gap: 16px; }
.card__media { aspect-ratio: 1; position: relative; overflow: hidden; background: var(--paper-2); }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.card:hover .card__media img { transform: scale(1.035); }
.card__meta { display: flex; justify-content: space-between; gap: 12px; color: var(--mute); }
.card__title { font-size: clamp(24px, 2vw, 36px); line-height: 1.05; letter-spacing: -.03em; font-weight: 400; margin-top: -4px; transition: color .3s; }
.card:hover .card__title { color: var(--red); }
.card__place { color: var(--grey); font-size: 15px; margin-top: -8px; }
.arch__cta { margin-top: clamp(96px, 10vw, 176px); }

/* ---------- 12b. Single ---------- */
.pj__crumbs { grid-column: 1 / span 12; display: flex; gap: 10px; color: var(--mute); margin-bottom: clamp(24px, 3vw, 48px); }
.pj__crumbs a:hover { color: var(--ink); }
.pj__head { row-gap: 40px; align-items: end; padding-bottom: clamp(40px, 4vw, 72px); }
.pj__title { grid-column: 1 / span 8; }
.pj__service { color: var(--mute); margin-bottom: 18px; }
.pj__head .spec { grid-column: 9 / span 4; }
.pj__hero { position: relative; aspect-ratio: 16 / 8.4; overflow: hidden; background: var(--paper-2); }
.pj__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj__scope { padding-top: var(--sec); }
.pj__scope .label { grid-column: 1 / span 3; padding-top: .9em; }
.pj__scope .t-lead { grid-column: 4 / span 8; text-wrap: pretty; }
.pj__gallery { padding-top: clamp(64px, 7vw, 120px); }
.pj__gallery figure { grid-column: 4 / span 9; overflow: hidden; background: var(--paper-2); }
.pj__gallery figure img { width: 100%; height: auto; }
.pj__gallery figcaption { margin-top: 12px; color: var(--mute); }
.pj__nav { padding-top: var(--sec); }
.pj__nav-in { border-top: 1px solid var(--line-strong); padding-top: 24px; row-gap: 40px; }
.pj__nav .label { grid-column: 1 / span 3; }
.pj__next { grid-column: span 4; display: grid; grid-template-columns: 38% 1fr; gap: 20px; align-items: end; }
.pj__next:first-of-type { grid-column: 4 / span 4; }
.pj__next .card__media { aspect-ratio: 1; }
.pj__next span.mono { color: var(--mute); display: block; margin-bottom: 8px; }
.pj__next:hover .card__title { color: var(--red); }

/* ---------- 13. Responsive ---------- */
@media (max-width: 1100px) {
  .hd__nav { grid-column: 5 / span 8; }
  .hero__title { grid-column: 1 / span 9; }
  .hero__slot, .hero__caption { grid-column: 8 / span 5; }
  .hero__foot { grid-column: 1 / span 6; }
  .work__head > h2 { grid-column: 4 / span 9; }
  .filters { grid-column: 4 / span 9; justify-self: start; }
  .ficha__title { grid-column: 2 / span 5; }
  .ficha__place { grid-column: 7 / span 3; }
  .ficha__media { grid-column: 1 / span 7; }
  .ficha__info { grid-column: 8 / span 5; }
  .studio__text { grid-column: 4 / span 6; }
  .studio__disc { grid-column: 10 / span 3; }
  .contact { grid-column: 4 / span 4; }
  .contact + .contact { grid-column: 9 / span 4; }
  .card { grid-column: span 6; }
  .pj__next, .pj__next:first-of-type { grid-column: span 6; }
  .pj__nav .label { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --hd: 64px; }
  .hd__logo { grid-column: 1 / span 6; width: 112px; }
  .hd__toggle {
    display: grid; grid-column: 12; justify-self: end; width: 40px; height: 40px; place-content: center; gap: 7px; margin-right: -8px;
  }
  .hd__toggle span { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease); }
  .hd.is-open .hd__toggle span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .hd.is-open .hd__toggle span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .hd__nav {
    position: fixed; inset: var(--hd) 0 0; z-index: -1;
    flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 40px var(--gutter);
    background: var(--paper);
    font-size: 40px; letter-spacing: -.04em; font-weight: 330;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .hd.is-open .hd__nav { opacity: 1; visibility: visible; }
  .hd__nav > a::after { display: none; }
  .hd__lang { margin: auto 0 0; font-size: 13px; letter-spacing: .04em; }

  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sec__head > .label, .sec__head > h2, .work__head > h2, .filters,
  .facts .label, .facts__text, .places__head, .places__body,
  .studio__text, .studio__disc, .pj__scope .label, .pj__scope .t-lead { grid-column: 1 / -1; }
  .sec__head > .label, .facts .label, .places__head, .pj__scope .label { padding-top: 0; margin-bottom: 4px; }

  /* Hero en flujo normal: sin pin, ventana estática */
  .hero { height: auto; }
  .hero__sticky { position: relative; height: auto; padding-bottom: 0; }
  .hero__stage { display: flex; flex-direction: column; height: auto; }
  .hero__title { padding-top: 40px; order: 1; }
  .hero__foot { order: 2; margin-top: 28px; }
  .hero__slot { display: none; }
  .hero__aperture { position: relative; inset: auto; order: 3; aspect-ratio: 4 / 5; margin-top: 40px; clip-path: none !important; }
  .hero__aperture.is-js .hero__img img { width: 100%; height: 100%; object-fit: cover; transform: none !important; }
  .hero__over { display: none; }
  .hero__caption { order: 4; margin-top: 16px; grid-template-columns: auto 1fr auto; }
  .hero__caption .hero__pause { display: none; }

  .svc__line { display: none; }
  .svc__item { grid-column: 1 / -1; padding: 28px 0 0; border-top: 1px solid var(--line-strong); position: relative; }
  .svc__item::before { content: ''; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; background: var(--red); }

  .ficha { position: relative; top: auto; height: auto; padding-bottom: 56px; }
  .ficha__tab { height: auto; padding: 18px 0; grid-template-columns: auto 1fr auto; column-gap: 16px; }
  .ficha__ref { grid-column: auto; }
  .ficha__title { grid-column: auto; }
  .ficha__place, .ficha__sector { display: none; }
  .ficha__go { grid-column: auto; }
  .ficha__body { display: flex; flex-direction: column; gap: 24px; padding: 0; }
  .ficha__media { aspect-ratio: 4 / 3; }
  .ficha__info { gap: 24px; }

  .places__list a { margin-right: .26em; }
  .person, .person + .person { grid-column: 1 / -1; margin-top: 0; }
  .person__img { max-width: 520px; }
  .contact, .contact + .contact { grid-column: 1 / -1; }
  .cta__people { row-gap: 32px; }
  .ft__logo { grid-column: 1 / -1; }
  .ft__claim { grid-column: 1 / -1; }
  .ft__nav { grid-column: 1 / span 3; }
  .ft__legal { grid-column: 4 / span 3; }

  .arch__title, .arch__intro, .pj__title, .pj__head .spec { grid-column: 1 / -1; }
  .card { grid-column: span 3; }
  .pj__gallery figure { grid-column: 1 / -1; }
  .pj__next, .pj__next:first-of-type { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .t-display { font-size: clamp(44px, 13.4vw, 64px); }
  .hero__title { padding-top: 32px; }
  .card { grid-column: 1 / -1; }
  .spec > div { grid-template-columns: 8.5em 1fr; }
  .ft__nav, .ft__legal { grid-column: 1 / -1; }
  .eu { flex-direction: column; align-items: flex-start; gap: 10px; }
  .eu__sep { display: none; }
}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero { height: auto; }
  .hero__sticky { position: relative; height: 100svh; }
}
.v3-static .hero { height: auto; }
.v3-static .hero__sticky { position: relative; }
.v3-static *, .v3-static *::before, .v3-static *::after { transition: none !important; animation: none !important; }