/* SD — maquetación del sitio de Denisse Sotomayor (tema Carbón, imagen a sangre).
   Carga después de tokens.css y sd.css. Todo valor de marca sale de un token (var(--…));
   aquí viven la retícula, las composiciones y el movimiento permitido.

   Excepciones de movimiento, a la vista: la foto de portada se asienta del 103 % al 100 %
   en 7 s y el trazo del contador se llena en lineal durante esos 7 s (ritmo del pase de fotos);
   en Estudio, la obra se descubre de abajo arriba con el desplazamiento mientras el titular sale de detrás
   del edificio, el marcador activo emite un anillo lento (2,8 s) y, al caer la noche, el edificio se enciende planta por
   planta; en el Manifiesto, tres fotos de una misma
   casa se funden entre sí con el desplazamiento y la cámara avanza un 8 %; en Servicios, la fila de tarjetas se
   desliza al pulsar las flechas. Todas se apagan con prefers-reduced-motion.

   Fondos: además de Carbón y Cal, una banda casi negra (--noche, Estudio) y otra clara y cálida (--hueso, Manifiesto
   y cabecera de Servicios), con esquinas redondeadas en fotos y tarjetas. Se salen del DS a petición del cliente (sus
   referencias); cada banda lleva data-tone y el menú toma su fondo al pasar sobre ella (site.js). */

/* ——— Base ——— */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --page-margin: var(--space-12);
  --gap: var(--space-8);
  --nav-h: calc(88px + var(--border-hairline));
  /* Margen hasta la retícula, medido sobre el ancho útil (sin barra de desplazamiento). */
  --side-cq: max(var(--page-margin), (100cqw - var(--layout-max)) / 2 + var(--page-margin));
}
@media (max-width: 760px) {
  :root { --nav-h: calc(72px + var(--border-hairline)); }
}

/* Fondos de banda: casi negro y hueso. El menú lleva el mismo data-tone que la banda que tiene debajo. */
:root { --noche: #161616; --hueso: #f4f2ee; }
[data-tone="noche"] { --surface: var(--noche); --surface-alt: #1f1f1f; --line: #333333; }
[data-tone="hueso"] { --surface: var(--hueso); --surface-alt: #e8e5df; --line: #dcd8d0; }
@media (max-width: 899px) {
  :root { --page-margin: var(--space-6); --gap: var(--space-6); }
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100vh; container-type: inline-size; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }

/* Color del texto por rol (README · Tipografía · Color del texto). */
:where(.numeral, .display-xl, .display, .h1, .h2, .h3, .h4) { color: var(--ink); }
:where(.caption, .eyebrow) { color: var(--ink-muted); }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Un <button> que abre una ficha se ve como el enlace de la marca (TextLink con flecha). */
button.sd-link { margin: 0; padding-top: 0; padding-inline: 0; background: none; border: 0; border-bottom: var(--border-hairline) solid var(--line-strong); border-radius: var(--radius-none); -webkit-appearance: none; appearance: none; font-family: var(--font-sans); text-align: start; white-space: nowrap; cursor: pointer; }
button.sd-link:focus-visible { outline: var(--border-strong) solid var(--focus); outline-offset: var(--focus-offset); }

/* ——— Saltar al contenido ——— */
.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--page-margin);
  z-index: 50;
  padding: var(--space-3) var(--space-6);
  background: var(--action);
  color: var(--on-action);
  text-decoration: none;
}
.skip-link:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus-visible { outline: var(--border-strong) solid var(--focus); outline-offset: var(--focus-offset); }

/* ——— Cabecera ——— */
/* El menú flota sobre la portada, transparente y sin botón (referencia); al pasar la portada, o con el menú
   móvil abierto, vuelve a su fondo. Sin JavaScript, o si site.js falla, siempre lleva su fondo. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-bottom: calc(-1 * var(--nav-h));
  transition: background-color var(--duration-base) var(--easing-standard), border-color var(--duration-base) var(--easing-standard);
}
html.js:not(.js-fallo) .site-nav:not(.is-solid):not(.is-open) { background-color: transparent; border-bottom-color: transparent; }
html.js:not(.js-fallo) .site-nav:not(.is-solid):not(.is-open) .sd-nav__link { color: var(--ink); }
.site-nav .sd-nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100svh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-bottom: var(--border-hairline) solid var(--line);
}

/* ——— Retícula: 12 columnas centradas a layout-max, con pistas exteriores para salir a sangre ———
   Líneas: full-start · content-start (col 1) … content-end · full-end. La columna n empieza en la línea n + 1. */
.wrap {
  --side: max(var(--page-margin), (100% - var(--layout-max)) / 2 + var(--page-margin));
  display: grid;
  grid-template-columns:
    [full-start] max(0px, var(--side) - var(--gap))
    [content-start] repeat(var(--layout-columns), minmax(0, 1fr))
    [content-end] max(0px, var(--side) - var(--gap))
    [full-end];
  column-gap: var(--gap);
}
.wrap > * { grid-column: content-start / content-end; }
@media (max-width: 899px) {
  .wrap {
    grid-template-columns:
      [full-start] max(0px, var(--side) - var(--gap))
      [content-start] repeat(4, minmax(0, 1fr))
      [content-end] max(0px, var(--side) - var(--gap))
      [full-end];
  }
}

.section { padding-block: var(--space-24); }
.section--alt { background: var(--surface-alt); }
@media (max-width: 760px) { .section { padding-block: var(--space-16); } }

/* ——— Imagen ———
   Una ranura de foto. Sin foto: el hueco de plano de la marca (aspa de `line` sobre `surface-alt`).
   Con foto: <img> a sangre en la ranura; el encuadre se ajusta con --pos (object-position). */
.media { position: relative; overflow: hidden; background: var(--surface-alt); }
.media--fill { position: absolute; inset: 0; }
.media--portrait { aspect-ratio: var(--aspect-portrait); }
.media--landscape { aspect-ratio: var(--aspect-landscape); }
.media--panorama { aspect-ratio: var(--aspect-panorama); }
.media > img, .media > picture, .media > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
@media (max-width: 899px) {
  .media > img, .media > picture, .media > picture > img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
}
.media:has(> .media__void) { outline: var(--border-hairline) solid var(--line); outline-offset: calc(-1 * var(--border-hairline)); }
.media__void { position: absolute; inset: 0; width: 100%; height: 100%; }
.media__void path { fill: none; stroke: var(--line); stroke-width: var(--border-hairline); }
/* Notas de dirección de arte: ayudan a saber qué foto va en cada hueco. Solo se ven con ?guia en la URL (dsarq.com/?guia). */
.media__hint { display: none; }
.hints .media__hint { display: block; }
.media__hint {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  max-width: 40ch;
  color: var(--ink-muted);
}
.media--fill > .media__hint { top: var(--space-6); bottom: auto; left: auto; right: var(--page-margin); text-align: right; }
.media__caption { margin-top: var(--space-3); }
.media__caption:empty { display: none; }

/* ——— Portada ———
   Foto clara a sangre bajo el menú transparente, con el texto en Carbón directamente sobre el cielo de la foto (tema Cal:
   data-theme="light" en index.html; el menú lo adopta mientras la foto está bajo él, ver [data-nav-over] en site.js). Sin
   velos ni capas translúcidas: la foto ocupa toda la pantalla. Como la casa ocupa la mitad baja, el texto se escala con la
   altura de la ventana (--hero-h1) para que quepa sobre el cielo: el titular a la izquierda y, a la derecha, un párrafo
   breve con dos enlaces finos. Los contadores, discretos, van bajo el titular. Todo sin cajas. La foto se recorta
   según la pantalla (recortes en el <picture>, ver tools/encajar.py). En pantallas < 1100 px la foto va arriba y el
   texto, en un bloque sólido debajo. Con fotos oscuras habría que quitar data-theme="light" de la sección. */
.hero {
  --hero-h1: clamp(56px, 12.4vh, var(--type-display-xl-size));
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
  background: var(--surface-alt);
}
.hero__slides { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__slide { position: absolute; inset: 0; }
.hero__slide .media > picture > img { animation: hero-settle 7s var(--easing-standard) both; }   /* la foto se asienta del 103 % al 100 % al cargar */
@keyframes hero-settle { from { transform: scale(1.03); } }

.hero__inner { grid-template-rows: 1fr; padding-top: var(--nav-h); padding-bottom: var(--space-12); }
.hero__inner > .hero__copy { grid-column: content-start / span 6; align-self: start; padding-top: clamp(var(--space-6), 5.6vh, var(--space-16)); }
.hero__lead { margin-top: var(--space-6); max-width: 34em; color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); margin-top: var(--space-6); }

/* Los contadores, discretos: cifra fina y etiqueta pequeña en una línea, directamente sobre el cielo, sin cajas ni filetes.
   Cuentan de 0 a su valor al cargar (site.js) y cada uno enlaza con su sección. */
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin-top: var(--space-8); }
.hero__stat { display: inline-flex; align-items: baseline; gap: var(--space-2); color: var(--ink); text-decoration: none; }
.hero__stat-n { font-size: var(--type-h3-size); line-height: 1; font-weight: var(--type-display-weight); font-variant-numeric: tabular-nums; }
.hero__stat-l { color: var(--ink-soft); transition: color var(--duration-fast) var(--easing-standard); }
.hero__stat:hover .hero__stat-l { color: var(--ink); }
.hero__stat:focus-visible { outline: var(--border-strong) solid var(--focus); outline-offset: var(--focus-offset); }

@media (min-width: 1100px) {
  .hero__inner > .hero__copy {
    grid-column: content-start / content-end;
    display: grid;
    grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .hero__title { grid-column: 1 / span 7; grid-row: 1 / span 2; font-size: var(--hero-h1); line-height: 1; }
  .hero__lead { grid-column: 9 / -1; grid-row: 1; align-self: end; margin-top: 0; max-width: none; }
  .hero__actions { grid-column: 9 / -1; grid-row: 2; align-self: end; margin-top: var(--space-6); }
  .hero__stats { grid-column: 1 / span 7; grid-row: 3; margin-top: clamp(var(--space-6), 4vh, var(--space-12)); }
}
@media (max-width: 1099px) {
  /* La foto arriba y, debajo, el texto en un bloque sólido; site.js le pone el tema Carbón. */
  .hero { min-height: 0; }
  .hero__slides { bottom: auto; height: 62vh; height: 62svh; }
  .hero__inner { margin-top: 62vh; margin-top: 62svh; padding-top: 0; padding-bottom: var(--space-12); background: var(--surface); }
  .hero__inner > .hero__copy { grid-column: content-start / content-end; padding-top: var(--space-12); }
}
@media (max-width: 599px) {                               /* en el móvil, los tres contadores en tres columnas: cifra arriba, etiqueta debajo */
  .hero__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .hero__stat { display: grid; gap: var(--space-1); }
}
@media (max-width: 379px) { .hero__stat-l { letter-spacing: .06em; } }   /* en móviles estrechos las tres etiquetas no caben con el espaciado normal */
@media (max-width: 388px) {                               /* «Espacios que» no cabe a 64 px: baja un escalón, dos líneas */
  .hero__title { font-size: var(--type-h1-size); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-tracking); }
}

/* ——— Estudio ———
   Escena anclada (≥ 1100 px de ancho y ≥ 640 px de alto, sin movimiento reducido; site.js pone .is-pinned):
   un edificio se construye con el desplazamiento —del plano a la obra terminada— y el titular sale de detrás
   de él. En el resto de pantallas es una composición estática: titular, texto, render completo y los tres ámbitos.
   --ratio es la proporción de las imágenes del edificio (assets/escena/, ver tools/edificio.py). */
.scene { --ratio: .648; padding-bottom: var(--space-8); background: var(--surface); }   /* el Manifiesto sube sobre estos 32 px */

/* Composición estática */
.scene__stage { padding-block: var(--space-24); row-gap: var(--space-12); align-items: start; }
.scene__stage > * { grid-column: content-start / content-end; }
.scene__title { margin-top: var(--space-4); }
.scene__line { display: inline; }
.scene__lead { max-width: var(--layout-measure); color: var(--ink-soft); }
.scene__link { margin-top: var(--space-6); }
.scene__cards { border-bottom: var(--border-hairline) solid var(--line); }
.scene__card { padding-block: var(--space-4); border-top: var(--border-hairline) solid var(--line); }
.scene__card-title { display: flex; align-items: baseline; gap: var(--space-4); }
.scene__card-n { color: var(--ink); font-variant-numeric: tabular-nums; }
.scene__card-body p { max-width: var(--layout-measure); padding-top: var(--space-2); padding-left: calc(2ch + var(--space-4)); color: var(--ink-soft); }
.scene__building { position: relative; justify-self: center; width: min(100%, 420px); }
.scene__art { position: relative; aspect-ratio: var(--ratio); }
.scene__art > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; -webkit-user-select: none; user-select: none; }
.scene__plano, .scene__cut, .scene__rule { display: none; }
.scene__pins { position: absolute; inset: 0; }
.scene__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  margin: calc(var(--space-8) / -2) 0 0 calc(var(--space-8) / -2);
  border: var(--border-hairline) solid var(--ink);
  border-radius: var(--radius-round);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--type-caption-size);
  line-height: 1;
  font-weight: var(--type-label-weight);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard);
}
.scene__pin.is-active { background: var(--ink); color: var(--surface); }
@media (max-width: 899px) {
  .scene__building { order: 2; }
  .scene__foot { order: 3; }
  .scene__cards { order: 4; }
}
@media (min-width: 900px) {
  .scene__stage { grid-template-rows: auto auto 1fr; }
  .scene__copy { grid-column: content-start / span 5; grid-row: 1; }
  .scene__foot { grid-column: content-start / span 5; grid-row: 2; }
  .scene__cards { grid-column: content-start / span 5; grid-row: 3; align-self: start; }
  .scene__building { grid-column: 8 / content-end; grid-row: 1 / span 3; align-self: center; width: min(100%, 460px); }
}
@media (max-width: 760px) { .scene__stage { padding-block: var(--space-16); } }

/* Anclada. El recorrido dura --runway de desplazamiento; al llegar desde un enlace (#estudio) se cae un 16 % dentro
   para que el titular ya se vea. Las medidas del escenario salen de su propio tamaño (unidades de contenedor).
   El edificio va centrado en la pantalla. Al entrar, la escena llega más abajo (--drop: más aire bajo la portada) y sube
   a su sitio mientras aparecen el plano y empieza la obra (--lift, de 0 a 1, lo calcula site.js). */
.scene.is-pinned { --runway: 440vh; scroll-margin-top: calc(var(--runway) * -.1); }
.scene.is-pinned .scene__track { height: calc(100vh - var(--nav-h) + var(--runway)); height: calc(100svh - var(--nav-h) + var(--runway)); }
.scene.is-pinned .scene__stage {
  position: sticky;
  top: var(--nav-h);
  display: block;
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  padding: 0;
  overflow: hidden;
  container-type: size;
  --bh: min(80cqh, calc(34cqw / var(--ratio)));            /* alto del edificio */
  --top: calc((100cqh - var(--bh)) / 2);                   /* el edificio, centrado en la pantalla */
  --drop: calc((1 - var(--lift, 1)) * 16cqh);              /* al entrar, la escena baja: aire bajo la portada */
  --bw: calc(var(--bh) * var(--ratio));                    /* ancho del edificio */
  --hug: clamp(var(--space-16), 6cqw, var(--space-24));    /* aire entre el edificio y el texto */
  --bandw: calc(50cqw - var(--bw) / 2 - var(--hug) - var(--side-cq));   /* ancho útil a cada lado del edificio */
  --fs: min(var(--type-display-size), 4.3cqw, 7.4cqh, calc((50cqw - var(--bw) / 2 - var(--hug) - var(--page-margin)) / 5.05));   /* titular: el tamaño «display» del DS; baja si falta sitio */
}

/* Capa 1: el titular, detrás del edificio. Cinco líneas en escalera a ambos lados que salen de detrás de él. */
.scene.is-pinned .scene__copy { position: absolute; inset: 0; z-index: 1; translate: 0 var(--drop); }
.scene.is-pinned .scene__eyebrow { position: absolute; top: var(--space-8); left: var(--side-cq); margin: 0; }
.scene.is-pinned .scene__title { position: absolute; inset: 0; margin: 0; }
.scene.is-pinned .scene__line {
  --dx: calc(var(--bw) / 2 + var(--hug));
  position: absolute;
  display: block;
  top: calc(var(--top) + 2cqh + var(--n) * 1.1em);         /* la primera línea, a la altura del tejado */
  font-size: var(--fs);
  line-height: 1.0625;                                     /* 68 / 64, la relación del tamaño «display» */
  letter-spacing: var(--type-display-tracking);
  white-space: nowrap;
  opacity: calc(var(--t, 0) * var(--day, 1));               /* de noche, el titular del día se retira */
  transform: translateX(calc((1 - var(--t, 0)) * var(--dx)));
}
.scene.is-pinned .scene__line--1, .scene.is-pinned .scene__line--3, .scene.is-pinned .scene__line--5 { right: calc(50% + var(--bw) / 2 + var(--hug)); text-align: right; }
.scene.is-pinned .scene__line--2, .scene.is-pinned .scene__line--4 { --dx: calc(-1 * (var(--bw) / 2 + var(--hug))); left: calc(50% + var(--bw) / 2 + var(--hug)); }
.scene.is-pinned .scene__line--1 { --n: 0; --t: var(--t1, 0); }
.scene.is-pinned .scene__line--2 { --n: 1; --t: var(--t2, 0); }
.scene.is-pinned .scene__line--3 { --n: 2; --t: var(--t3, 0); }
.scene.is-pinned .scene__line--4 { --n: 3; --t: var(--t4, 0); }
.scene.is-pinned .scene__line--5 { --n: 4; --t: var(--t5, 0); }

/* Escalas de niveles a cada lado, como una regla de obra (0–21 m). */
.scene.is-pinned .scene__rule {
  --tick: calc(var(--bh) / 21);
  display: block;
  position: absolute;
  z-index: 2;
  top: var(--top);
  width: var(--space-3);
  height: var(--bh);
  opacity: var(--g, 0);
  translate: 0 var(--drop);
}
.scene.is-pinned .scene__rule--l {
  right: calc(50% + var(--bw) / 2 + var(--space-6));
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) right top / var(--border-hairline) 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--line-strong) 0 var(--border-hairline), transparent var(--border-hairline) var(--tick)) right top / var(--space-2) calc(100% + 1px) no-repeat,
    repeating-linear-gradient(to bottom, var(--ink-muted) 0 var(--border-hairline), transparent var(--border-hairline) calc(var(--tick) * 3)) right top / var(--space-3) calc(100% + 1px) no-repeat;
}
.scene.is-pinned .scene__rule--r {
  left: calc(50% + var(--bw) / 2 + var(--space-6));
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left top / var(--border-hairline) 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--line-strong) 0 var(--border-hairline), transparent var(--border-hairline) var(--tick)) left top / var(--space-2) calc(100% + 1px) no-repeat,
    repeating-linear-gradient(to bottom, var(--ink-muted) 0 var(--border-hairline), transparent var(--border-hairline) calc(var(--tick) * 3)) left top / var(--space-3) calc(100% + 1px) no-repeat;
}
.scene.is-pinned .scene__rule--l span {
  position: absolute;
  right: calc(100% + var(--space-1));
  top: calc(100% - var(--i) / 7 * 100%);
  translate: 0 -50%;
  color: var(--ink-muted);
  font-size: var(--type-caption-size);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Capa 2: el edificio. El plano (líneas) siempre debajo; la obra terminada se descubre de abajo arriba. */
.scene.is-pinned .scene__building {
  position: absolute;
  z-index: 3;
  top: var(--top);
  left: 50%;
  width: var(--bw);
  height: var(--bh);
  margin: 0;
  translate: -50% var(--drop);
}
.scene.is-pinned .scene__art { height: 100%; aspect-ratio: auto; }
.scene.is-pinned .scene__plano { display: block; opacity: calc(var(--g, 0) * .8); }
.scene.is-pinned .scene__obra {
  clip-path: inset(calc((1 - var(--bo, 0)) * 100%) 0 0 0);
  -webkit-mask-image: linear-gradient(#000 94%, transparent);   /* la base se funde con el suelo */
  mask-image: linear-gradient(#000 94%, transparent);
}

/* La línea de nivel marca hasta dónde llega la obra (dos tonos: se lee sobre el plano y sobre el render). */
.scene.is-pinned .scene__cut {
  display: block;
  position: absolute;
  left: calc(-1 * var(--hug) + var(--space-3));
  right: calc(-1 * var(--hug) + var(--space-3));
  top: calc((1 - var(--b, 0)) * 100%);
  height: var(--border-strong);
  margin-top: calc(var(--border-hairline) * -1);
  background: linear-gradient(var(--ink) 50%, var(--surface) 50%);
  opacity: clamp(0, (.985 - var(--b, 0)) * 40, 1);
  pointer-events: none;
}
.scene.is-pinned .scene__cota {
  position: absolute;
  left: 50%;
  bottom: 100%;
  translate: -50% 0;
  margin-bottom: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--type-caption-size);
  line-height: 1;
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-caption-tracking);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Marcadores sobre el edificio: aparecen cuando la obra está terminada; el activo emite un anillo lento. */
.scene.is-pinned .scene__pin { opacity: calc(var(--k, 0) * var(--day, 1)); scale: calc(.7 + .3 * var(--k, 0)); }
.scene.is-pinned.is-night .scene__pin { pointer-events: none; }
.scene.is-pinned .scene__pin.is-active::after {
  content: "";
  position: absolute;
  inset: calc(var(--border-hairline) * -1);
  border: var(--border-hairline) solid var(--ink);
  border-radius: var(--radius-round);
  animation: scene-pulse 2.8s var(--easing-standard) infinite;
}
@keyframes scene-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2); opacity: 0; } }

/* Capa 3: lectura. Texto de apoyo a la izquierda y los tres ámbitos a la derecha (uno abierto a la vez). */
.scene.is-pinned .scene__foot,
.scene.is-pinned .scene__cards {
  position: absolute;
  z-index: 4;
  bottom: 5cqh;
  opacity: var(--k, 0);
  transform: translateY(calc((1 - var(--k, 0)) * var(--space-4)));
}
.scene.is-pinned .scene__foot { left: var(--side-cq); width: var(--bandw); }
.scene.is-pinned .scene__cards { right: var(--side-cq); width: var(--bandw); }
.scene.is-pinned .scene__card-body p { padding-left: 0; max-width: none; }
.scene.is-pinned .scene__capas { padding-left: 0; }
.scene.is-pinned .scene__link { margin-top: var(--space-4); }
.scene.is-pinned .scene__card { padding-block: var(--space-3); }
.scene.is-pinned .scene__card-title { color: var(--ink-muted); transition: color var(--duration-base) var(--easing-standard); }
.scene.is-pinned .scene__card.is-active .scene__card-title { color: var(--ink); }
.scene.is-pinned .scene__card-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-base) var(--easing-standard); }
.scene.is-pinned .scene__card.is-active .scene__card-body { grid-template-rows: 1fr; }
.scene.is-pinned .scene__card-body > div { min-height: 0; overflow: hidden; }
@media (max-height: 720px) { .scene.is-pinned .scene__card { padding-block: var(--space-2); } }

/* La noche. Cuando termina la obra cae la hora azul (--n) y el edificio se enciende planta por planta, de abajo arriba
   (cada planta, una copia de la capa interior recortada a su banda; --o); luego las lamas (--l1) y las jardineras (--l2).
   Las capas de luz son imágenes que se SUMAN a la base nocturna (mix-blend-mode: plus-lighter), como se compone la luz en
   un render; las genera tools/edificio-noche.py. El titular del día se retira (--day) y sale «La luz es nuestra
   especialidad» en la misma escalera. Sin anclar, nada de esto se ve: queda el edificio de día. */
.scene__art > .scene__noche, .scene__luces, .scene__night { display: none; }   /* más específico que «.scene__art > img» */
.scene.is-pinned .scene__art > .scene__noche {
  display: block;
  opacity: var(--n, 0);
  -webkit-mask-image: linear-gradient(#000 94%, transparent);
  mask-image: linear-gradient(#000 94%, transparent);
}
.scene.is-pinned .scene__luces { display: block; position: absolute; inset: 0; pointer-events: none; }
.scene__luz { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--o, 0); mix-blend-mode: plus-lighter; }
@supports not (mix-blend-mode: plus-lighter) { .scene__luz { mix-blend-mode: screen; } }
.scene__luz--planta { clip-path: inset(calc(var(--y0) * 100%) 0 calc((1 - var(--y1)) * 100%) 0); }
.scene__luz--lamas { --o: var(--l1, 0); }
.scene__luz--jardineras { --o: var(--l2, 0); }
.scene.is-pinned .scene__night { --day: 1; display: block; position: absolute; inset: 0; margin: 0; color: var(--ink); }

/* Cuarto ámbito: aparece al caer la noche (de día se ven los tres de siempre); en pantallas bajas queda solo él.
   Sus capas de luz se marcan a medida que se encienden; sin anclar, todas encendidas. */
.scene.is-pinned:not(.is-night) .scene__card:nth-child(4) { display: none; }
@media (max-height: 700px) { .scene.is-pinned.is-night .scene__card:not(:nth-child(4)) { display: none; } }
.scene__capas { display: grid; gap: var(--space-1); margin-top: var(--space-3); padding-left: calc(2ch + var(--space-4)); font-size: var(--type-body-sm-size); }
.scene__capa { display: grid; grid-template-columns: 6px 1fr auto; align-items: center; column-gap: var(--space-3); color: var(--ink-muted); font-size: var(--type-caption-size); line-height: var(--type-caption-line); transition: color var(--duration-base) var(--easing-standard); }
.scene__capa-dot { width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--line-strong); transition: background-color var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard); }
.scene__capa-k { font-variant-numeric: tabular-nums; }
.scene__capa.is-on { color: var(--ink); }
.scene__capa.is-on .scene__capa-dot { background: #ffd39b; box-shadow: 0 0 var(--space-2) 1px #ffc77f; }   /* el color de una luz cálida encendida */

/* ——— Manifiesto ———
   Fondo claro (hueso), como una lámina que sube sobre el Estudio con las esquinas de arriba redondeadas. Arriba, la frase;
   debajo, la casa enmarcada con esquinas redondeadas y, flotando sobre ella, una tarjeta blanca con los tres momentos del
   día. En pantallas grandes (≥ 1100 × 640, con movimiento; site.js pone .is-pinned) la foto se queda fija mientras se
   desplaza y la luz pasa del mediodía al atardecer y a la hora azul (tres fotos alineadas que se funden); pulsar un momento
   lleva a él. En las demás, pulsar un momento cambia la foto (también sin JavaScript: son botones de opción). */
.luz {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--space-8));
  padding-bottom: var(--space-12);
  border-radius: var(--space-8) var(--space-8) 0 0;
  background: var(--surface);
}
.luz__head { padding-top: var(--space-24); padding-bottom: var(--space-12); }
.luz__head > .luz__quote { grid-column: content-start / span 10; }
.luz__label { margin-bottom: var(--space-4); }
.luz__text { color: var(--ink); }

.luz__stage { position: relative; margin-inline: var(--page-margin); }
.luz__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: max(360px, 100svh - var(--nav-h) - var(--space-12)); overflow: hidden; border-radius: 24px; background: var(--surface-alt); isolation: isolate; }
.luz__photos { position: absolute; inset: 0; }
.luz__photo { position: absolute; inset: 0; transition: opacity var(--duration-slow) var(--easing-standard); }
.luz__photo--2, .luz__photo--3 { opacity: 0; }
.luz:not(.is-pinned):has(input[value="2"]:checked) .luz__photo--2,
.luz:not(.is-pinned):has(input[value="3"]:checked) .luz__photo--2,
.luz:not(.is-pinned):has(input[value="3"]:checked) .luz__photo--3 { opacity: 1; }

/* La tarjeta: blanca, flotando abajo a la derecha de la foto; el momento que se ve, en Carbón. */
.luz__card {
  position: absolute;
  z-index: 2;
  right: var(--space-6);
  bottom: var(--space-6);
  display: flex;
  gap: var(--space-1);
  min-inline-size: 0;
  margin: 0;
  padding: var(--space-2);
  border: 0;
  border-radius: 18px;
  background: var(--cal);
  color: var(--carbon);
  box-shadow: 0 18px 40px rgb(0 0 0 / .16), 0 2px 6px rgb(0 0 0 / .06);
}
.luz__opt {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 112px;
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard);
}
.luz__opt input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.luz__momento { font-size: var(--type-body-sm-size); line-height: 20px; font-weight: 500; }
.luz__hora { color: #6b6b6b; font-size: var(--type-caption-size); line-height: 16px; font-variant-numeric: tabular-nums; transition: color var(--duration-base) var(--easing-standard); }
.luz__opt:hover { background: #efede9; }
.luz__opt:has(input:checked) { background: var(--carbon); color: var(--cal); }
.luz__opt:has(input:checked) .luz__hora { color: #c9c9c9; }
.luz__opt:has(input:focus-visible) { outline: var(--border-strong) solid var(--carbon); outline-offset: 2px; }

@media (max-width: 899px) {
  .luz__head > .luz__quote { grid-column: content-start / content-end; }
  .luz__frame { aspect-ratio: 4 / 3; border-radius: 18px; }
  .luz__card { position: relative; right: auto; bottom: auto; margin-top: var(--space-3); }
  .luz__opt { flex: 1; min-width: 0; padding-inline: var(--space-3); }
}
@media (max-width: 760px) {
  .luz { margin-top: calc(-1 * var(--space-6)); border-radius: var(--space-6) var(--space-6) 0 0; }
  .luz__head { padding-top: var(--space-16); padding-bottom: var(--space-8); }
}

/* Anclada: la foto se queda fija bajo el menú mientras la luz cambia; la cámara avanza un 8 % hacia la casa. */
.luz.is-pinned {
  --runway: 200vh;
  --stage-h: min(100svh - var(--nav-h) - var(--space-12), (100cqw - 2 * var(--page-margin)) / 1.6);   /* en pantallas altas, como mucho 16:10 */
}
.luz.is-pinned .luz__track { height: calc(var(--stage-h) + var(--runway)); }
.luz.is-pinned .luz__stage { position: sticky; top: calc(var(--nav-h) + (100svh - var(--nav-h) - var(--stage-h)) / 2); height: var(--stage-h); }
.luz.is-pinned .luz__frame { height: 100%; max-height: none; aspect-ratio: auto; }
.luz.is-pinned .luz__photos { transform-origin: 62% 64%; transform: scale(calc(1 + .08 * var(--p, 0))); }
.luz.is-pinned .luz__photo { transition: none; }
.luz.is-pinned .luz__photo--2 { opacity: var(--o2, 0); }
.luz.is-pinned .luz__photo--3 { opacity: var(--o3, 0); }

/* ——— Servicios ———
   La cabecera sigue sobre el fondo claro del Manifiesto, sin corte, y la fila de cinco tarjetas arranca montada sobre el
   borde con el fondo Carbón (--ride: lo que se monta sobre el claro). Con movimiento, la sección se ancla y la fila se
   desliza sola al bajar (ver «Anclada», más abajo). Sin anclar (movimiento reducido, sin JavaScript o si la fila no cabe
   en la pantalla) se desliza con las flechas, el trackpad o el dedo (scroll-snap). Cada tarjeta pasa de la foto a su tinte
   (--tint, sacado de la foto; ver tools/servicios.json), con el título, el número, el texto y sus etiquetas. */
.servicios {
  --card-w: clamp(280px, 25vw, 380px);
  --card-ph: calc(var(--card-w) * .64);                    /* alto de la foto */
  --ride: calc(var(--card-ph) * .66);
}
.servicios__top { padding-top: var(--space-16); padding-bottom: calc(var(--ride) + var(--space-12)); background: var(--surface); }
.servicios__head { align-items: end; row-gap: var(--space-4); }
.servicios__head > .servicios__intro { grid-column: content-start / span 9; grid-row: 1; }
.servicios__head > .servicios__lead { grid-column: content-start / span 8; grid-row: 2; }
.servicios__head > .servicios__arrows { grid-column: 11 / content-end; grid-row: 2; justify-self: end; }
.servicios__title { margin-top: var(--space-4); }
.servicios__lead { max-width: 40em; color: var(--ink-soft); }

.servicios__arrows { display: flex; gap: var(--space-3); }
.servicios__arrow {
  display: grid;
  place-items: center;
  width: var(--space-12);
  height: var(--space-12);
  padding: 0;
  border: var(--border-hairline) solid var(--ink);
  border-radius: var(--radius-round);
  background: var(--ink);
  color: var(--surface);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard), opacity var(--duration-base) var(--easing-standard);
}
.servicios__arrow:hover { background: var(--action-hover); }
.servicios__arrow[aria-disabled="true"] { background: transparent; color: var(--ink); opacity: .3; cursor: default; }
.servicios__arrow:focus-visible { outline: var(--border-strong) solid var(--focus); outline-offset: var(--focus-offset); }
html:not(.js) .servicios__arrows, .js-fallo .servicios__arrows { display: none; }

.servicios__bottom { display: flow-root; padding-bottom: calc(var(--space-24) - 56px); background: var(--surface); }   /* flow-root: el margen negativo de la fila no arrastra el fondo */
.servicios__row {
  margin-top: calc(-1 * var(--ride) - var(--space-6));
  padding-block: var(--space-6) 56px;                      /* sitio para las sombras (abajo, toda la sombra: si no, se corta en línea) */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--side-cq);
  scrollbar-width: none;
}
.servicios__row::-webkit-scrollbar { display: none; }
.servicios__row:focus-visible { outline: var(--border-strong) solid var(--line-strong); outline-offset: calc(-1 * var(--border-strong)); }
.servicios__list { display: flex; gap: var(--space-6); width: max-content; padding-inline: var(--side-cq); }

.servicio {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  width: var(--card-w);
  overflow: hidden;
  border-radius: 20px;
  background: var(--tint);
  color: var(--cal);
  scroll-snap-align: start;
  box-shadow: 0 24px 48px -16px rgb(0 0 0 / .4);
}
.servicio__photo { position: relative; height: var(--card-ph); margin: 0; }
.servicio__photo .media { background: var(--tint); }
.servicio__photo::before,
.servicio__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.servicio__photo::before {                                 /* la parte baja de la foto se desenfoca poco a poco… */
  z-index: 1;
  top: 45%;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(transparent, #000 75%);
  mask-image: linear-gradient(transparent, #000 75%);
}
.servicio__photo::after { z-index: 2; top: 0; background: linear-gradient(to bottom, transparent 40%, var(--tint)); }   /* …y se funde con el tinte */
.servicio__body { position: relative; z-index: 3; display: flex; flex-direction: column; flex: 1; margin-top: calc(-1 * var(--space-8)); padding: 0 var(--space-6) var(--space-6); }
.servicio__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--cal); font-size: var(--type-h3-size); line-height: var(--type-h3-line); font-weight: var(--type-h3-weight); }
.servicio__n {
  flex: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-round);
  background: color-mix(in srgb, var(--tint) 62%, #000);
  font-size: var(--type-caption-size);
  line-height: 18px;
  font-weight: var(--type-label-weight);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.servicio__text { margin-top: var(--space-3); color: #d2d2d2; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); }
.servicio__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); }
.servicio__tags li { padding: 5px var(--space-3); border-radius: var(--radius-round); background: color-mix(in srgb, var(--tint) 84%, #fff); color: var(--cal); font-size: var(--type-caption-size); line-height: 16px; }
.servicio__caption { color: #c9c9c9; }

@media (max-width: 899px) {
  .servicios { --card-w: min(80vw, 340px); }
  .servicios__head > .servicios__intro, .servicios__head > .servicios__lead { grid-column: content-start / content-end; }
  .servicios__head > .servicios__arrows { grid-column: content-start / content-end; grid-row: 3; justify-self: start; }
  .servicios__arrow { width: 44px; height: 44px; }
}
@media (max-width: 760px) {
  .servicios__top { padding-top: var(--space-12); }
  .servicios__bottom { padding-bottom: calc(var(--space-16) - 56px); }
}

/* Anclada (con movimiento y si la fila cabe en la pantalla; site.js pone .is-pinned): la sección se queda fija bajo el
   menú y, al bajar, la fila se desliza sola de derecha a izquierda (site.js la mueve con un leve suavizado, para que no
   vaya a saltos de la rueda). Al llegar, las tarjetas suben escalonadas (--rise) y, mientras pasan, sus fotos se desplazan
   un poco dentro de cada tarjeta (--par, paralaje). Sin flechas: no hace falta deslizar a mano. En portátiles, título a la
   izquierda y entrada a la derecha, para que quepa todo; si aun así no cabe, al anclarse la cabecera queda bajo el menú
   (--hide) y se ve la fila. --runway (px): el desplazamiento vertical que dura el recorrido de la fila. */
.servicios.is-pinned { --stage-h: calc(100svh - var(--nav-h) + var(--hide, 0px)); }
.servicios.is-pinned .servicios__track { height: calc(var(--stage-h) + var(--runway, 0px)); }
.servicios.is-pinned .servicios__stage { position: sticky; top: calc(var(--nav-h) - var(--hide, 0px)); display: flex; flex-direction: column; height: var(--stage-h); }
.servicios.is-pinned .servicios__top { flex: 1 1 auto; padding-top: var(--space-8); padding-bottom: calc(var(--ride) + var(--space-8)); }
.servicios.is-pinned .servicios__bottom { flex: 2 1 auto; padding-bottom: 0; }   /* el aire que sobra: un tercio arriba y dos abajo */
.servicios.is-pinned .servicios__row { overflow: hidden; scroll-snap-type: none; }
.servicios.is-pinned .servicios__list { will-change: transform; }
.servicios.is-pinned .servicios__arrows { display: none; }
.servicios.is-pinned .servicio { transform: translateY(calc(var(--rise, 0) * 40px)); }
.servicios.is-pinned .servicio__photo img { transform: translate3d(calc(var(--par, 0) * -5%), 0, 0) scale(1.12); }
@media (min-width: 1100px) {
  .servicios.is-pinned { --card-w: clamp(300px, 29vw, 440px); --card-ph: calc(var(--card-w) * .56); }
  .servicios.is-pinned .servicios__head > .servicios__intro { grid-column: content-start / span 7; }
  .servicios.is-pinned .servicios__head > .servicios__lead { grid-column: 9 / content-end; grid-row: 1; }
}

/* ——— Por dónde empezar ——— */
.stages__head { margin-bottom: var(--space-12); }
.stages__title { margin-top: var(--space-4); }
.stages__lead { margin-top: var(--space-6); max-width: var(--layout-measure); color: var(--ink-soft); }
.stages__list { border-bottom: var(--border-hairline) solid var(--line); }
.stage {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-8);
  border-top: var(--border-hairline) solid var(--line);
}
.stage__index { grid-column: 1 / span 2; grid-row: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stage__title { grid-column: 3 / span 4; grid-row: 1; }
.stage__text { grid-column: 7 / span 6; grid-row: 1; max-width: var(--layout-measure); color: var(--ink-soft); }
.stage__go { grid-column: 7 / span 6; grid-row: 2; justify-self: start; }
@media (max-width: 899px) {
  .stage { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); padding-block: var(--space-6); }
  .stage > * { grid-column: 1; grid-row: auto; }
  .stage__go { margin-top: var(--space-3); }
}

/* ——— Paquetes ——— */
.packages__head { margin-bottom: var(--space-12); }
.packages__title { margin-top: var(--space-4); }
.packages__lead { margin-top: var(--space-6); max-width: var(--layout-measure); color: var(--ink-soft); }
.packages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-12); }
.package { display: flex; flex-direction: column; padding-top: var(--space-6); border-top: var(--border-hairline) solid var(--line); }
.package__kicker { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); }
.package__index { color: var(--ink); font-variant-numeric: tabular-nums; }
.package__scope { margin-top: var(--space-2); }
.package__items { margin-top: var(--space-6); border-bottom: var(--border-hairline) solid var(--line); }
.package__items li { padding-block: var(--space-2); border-top: var(--border-hairline) solid var(--line); color: var(--ink-soft); }
.package__note { margin-top: var(--space-3); }
.package__go { margin-top: auto; padding-top: var(--space-8); }
@media (max-width: 1099px) { .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .packages { grid-template-columns: minmax(0, 1fr); } }

.advice {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-6);
  align-items: baseline;
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: var(--border-hairline) solid var(--line);
}
.advice__title { grid-column: 1 / span 5; grid-row: 1; }
.advice__text { grid-column: 6 / span 7; grid-row: 1; max-width: var(--layout-measure); color: var(--ink-soft); }
.advice__cta { grid-column: 6 / span 7; grid-row: 2; justify-self: start; }
@media (max-width: 899px) {
  .advice { grid-template-columns: minmax(0, 1fr); }
  .advice > * { grid-column: 1; grid-row: auto; }
}

/* ——— Obra ———
   Mosaico asimétrico en las 12 columnas: grande y pequeña se alternan y dejan columnas vacías. */
.works__head { margin-bottom: var(--space-12); }
.works__title { margin-top: var(--space-4); }
.works {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-16);
  align-items: start;
}
.works > .work--1 { grid-column: 1 / span 7; }
.works > .work--2 { grid-column: 9 / span 4; margin-top: var(--space-24); }
.works > .work--3 { grid-column: 2 / span 4; }
.works > .work--4 { grid-column: 7 / span 6; margin-top: var(--space-16); }
.works > .work--5 { grid-column: 3 / span 8; }
.work__open {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sd-card__body .media__caption { margin-top: var(--space-2); }
@media (max-width: 899px) {
  .works { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); }
  .works > .work { grid-column: 1; margin-top: 0; }
}

/* ——— Ficha de obra (dialog a pantalla completa) ——— */
.sheet {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--ink-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet::backdrop { background: var(--surface); }
.sheet[open] { animation: sheet-in var(--duration-slow) var(--easing-standard); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(var(--space-1)); } }
.sheet__bar { position: sticky; top: 0; z-index: 1; background: var(--surface); border-bottom: var(--border-hairline) solid var(--line); }
.sheet__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 88px;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.sheet__bar form { margin: 0; }
.sheet__index { color: var(--ink); font-variant-numeric: tabular-nums; }
.sheet__body { padding-block: var(--space-16) var(--space-24); row-gap: var(--space-16); align-items: end; }
.sheet__body > .sheet__head { grid-column: content-start / span 7; }
.sheet__body > .sheet__specs { grid-column: 10 / content-end; }
.sheet__lead { margin-top: var(--space-6); max-width: var(--layout-measure); }
.sheet__body > .sheet__gallery {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-16);
  align-items: start;
}
.sheet__photo--a { grid-column: 1 / -1; }
.sheet__photo--b { grid-column: 7 / span 5; }
.sheet__photo--c { grid-column: 2 / span 9; }
@media (max-width: 899px) {
  .sheet__bar-inner { min-height: 72px; }
  .sheet__body > .sheet__head, .sheet__body > .sheet__specs { grid-column: content-start / content-end; }
  .sheet__body > .sheet__gallery { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
  .sheet__gallery > .sheet__photo { grid-column: 1; }
}

/* Fichas de paquete: ideal para, qué incluye, versiones y entregables. */
.sheet__kicker { margin-bottom: var(--space-6); }
.sheet__ideal { grid-column: 10 / content-end; }
.sheet__ideal .body { margin-top: var(--space-3); color: var(--ink-soft); }
.sheet__label { margin-bottom: var(--space-6); }
.included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-bottom: var(--border-hairline) solid var(--line); }
.included li { display: flex; align-items: baseline; gap: var(--space-6); padding-block: var(--space-4); border-top: var(--border-hairline) solid var(--line); }
.included__n { min-width: 2ch; color: var(--ink); font-variant-numeric: tabular-nums; }
.versions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-12); }
.version { display: flex; flex-direction: column; padding-top: var(--space-6); border-top: var(--border-hairline) solid var(--line); }
.version__index { margin-bottom: var(--space-3); color: var(--ink); font-variant-numeric: tabular-nums; }
.version__text { margin-top: var(--space-4); color: var(--ink-soft); }
.version__items { margin-top: var(--space-6); margin-bottom: var(--space-8); }
.version__items li { padding-block: var(--space-2); border-top: var(--border-hairline) solid var(--line); color: var(--ink-soft); }
.version__cta { align-self: flex-start; margin-top: auto; }
.deliverables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-6); }
.deliverables li { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--line); }
.deliverables__n { color: var(--ink); font-variant-numeric: tabular-nums; }
.sheet__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
@media (max-width: 899px) {
  .sheet__body > .sheet__ideal { grid-column: content-start / content-end; }
  .included, .versions { grid-template-columns: minmax(0, 1fr); }
  .deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) { .deliverables { grid-template-columns: minmax(0, 1fr); } }

/* ——— Proceso ——— */
.process__head { margin-bottom: var(--space-12); }
.process__head .h1 { margin-top: var(--space-4); }
.steps { border-bottom: var(--border-hairline) solid var(--line); }
.step {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: baseline;
  padding-block: var(--space-8);
  border-top: var(--border-hairline) solid var(--line);
}
.step__index { grid-column: 1 / span 2; color: var(--ink); font-variant-numeric: tabular-nums; }
.step__title { grid-column: 3 / span 4; }
.step__text { grid-column: 7 / span 6; max-width: var(--layout-measure); color: var(--ink-soft); }
@media (max-width: 899px) {
  .step { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); padding-block: var(--space-6); }
  .step__index, .step__title, .step__text { grid-column: 1; }
}

/* ——— Cierre: foto a sangre y, debajo, la banda con el texto y el sello ——— */
.closing { background: var(--surface); }
.closing__media { position: relative; height: min(72vh, 760px); }
.closing__caption { padding: var(--space-3) var(--side-cq) 0; }
.closing__caption:empty { display: none; }
.closing__band { padding-block: var(--space-24); align-items: center; row-gap: var(--space-12); }
.closing__band > .closing__copy { grid-column: content-start / span 7; }
.closing__band > .closing__seal { grid-column: 10 / content-end; justify-self: end; width: auto; height: 160px; }   /* sello: mínimo 160 px */
.closing__title { margin-top: var(--space-6); }
.closing__lead { margin-top: var(--space-6); max-width: var(--layout-measure); color: var(--ink-soft); }
.closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); margin-top: var(--space-12); }
@media (max-width: 899px) {
  .closing__media { height: 56svh; }
  .closing__band { padding-block: var(--space-16); }
  .closing__band > .closing__copy, .closing__band > .closing__seal { grid-column: content-start / content-end; justify-self: start; }
}

/* ——— Pie ——— */
.site-footer { padding-block: var(--space-12); border-top: var(--border-hairline) solid var(--line); background: var(--surface); }
.site-footer__inner { row-gap: var(--space-8); align-items: center; }
.site-footer__inner > .site-footer__brand { grid-column: content-start / span 4; display: flex; align-items: center; gap: var(--space-4); }
.site-footer__inner > .site-footer__nav { grid-column: 6 / span 5; }   /* línea 6 = columna 5 */
.site-footer__inner > .site-footer__social { grid-column: 11 / content-end; justify-self: end; }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); }
@media (max-width: 899px) {
  .site-footer__inner > .site-footer__brand,
  .site-footer__inner > .site-footer__nav,
  .site-footer__inner > .site-footer__social { grid-column: content-start / content-end; justify-self: start; }
}

/* Si site.js no llega a cargar (.js-fallo), las fichas de paquete no se pueden abrir: se leen en línea. */
.js-fallo dialog.sheet { display: block; position: static; width: auto; height: auto; border-top: var(--border-hairline) solid var(--line); }
.js-fallo dialog.sheet .sheet__bar, .js-fallo [data-sheet] { display: none; }

/* ——— Aparición: fundido y desplazamiento de space-1 (solo con JavaScript) ——— */
.js .fx {
  opacity: 0;
  transform: translateY(var(--space-1));
  transition: opacity var(--duration-slow) var(--easing-standard), transform var(--duration-slow) var(--easing-standard);
}
.js .fx.is-in, .js-fallo .fx { opacity: 1; transform: none; }

/* ——— Movimiento reducido: solo cambios de color ——— */
@media (prefers-reduced-motion: reduce) {
  .js .fx, .js .fx.is-in { opacity: 1; transform: none; transition: none; }
  .luz__photo, .luz__opt, .luz__hora, .servicios__arrow { transition: none !important; }
  .hero__slide .media > picture > img { animation: none; }
  .scene__pin::after { animation: none !important; }
  .scene__card-body, .scene__card-title, .scene__pin { transition: none !important; }
  .scene__capa, .scene__capa-dot { transition: none !important; }
  .sheet[open] { animation: none; }
}