/* ==========================================================================
   VEGAS DEL VERDE — espacios.css  ·  v4 «Ficha orgánica»
   Sección «Espacios en alquiler» (#espacios).
   Depende de tokens.css + base.css. No declara NINGÚN valor literal de color,
   cuerpo tipográfico, radio, sombra ni duración: todo sale de los tokens.
   Prefijos propios: .espacios / .espacio

   QUÉ TRAÍA v3 Y SE CONSERVA
   · La ficha sin caja: la foto y el texto flotan directamente sobre el fondo
     de la página; lo único que separa una ficha de la siguiente es el aire.
   · La rejilla de doce columnas con cinco escalas y cinco desfases distintos,
     medida a 1440 px. No se toca ni una medida de §1: funcionaba.
   · El nombre del espacio como titular y la experiencia en una sola línea.

   QUÉ CAMBIA EN v4 Y POR QUÉ
   El encargo era literal: «se sigue viendo genérica». Medido contra la
   página, lo que quedaba genérico ya no era el tamaño —v3 lo arregló— sino
   la FORMA y la falta de un punto de fijación:

   1. CINCO RECORTES IGUALES. Las cinco figuras iban a esquina viva. Da igual
      que midan distinto: cinco rectángulos comparten silueta, y la silueta es
      lo primero que se lee de una fotografía. Ahora cada espacio tiene su
      propio contorno y ninguno repite el del vecino (§2 bis):
        Alameda   banda de extremos redondeados
        La Vega   hoja: dos vértices opuestos abiertos
        Teatrino  ARCO de medio punto, que rima con la copa de su árbol
        Taller    la hoja de La Vega girada 90°
        Cancha    esquinas blandas con un vértice vivo
      Los radios salen de --radio-xs/sm/md/lg/xl y --radio-full. Ninguno es
      un número suelto y ninguna ficha usa los cuatro iguales, que es
      exactamente el redondeo que se lee como plantilla.
   2. NO HABÍA ANCLA. La vista saltaba de foto a foto sin punto donde parar.
      El aforo, que era un renglón de caps diminutas encima del nombre, pasa
      a ser una CIFRA grande en Fraunces dentro de una pastilla en forma de
      hoja que monta sobre la esquina inferior izquierda de la foto (§3). Es
      el elemento que se sale de su caja: la única pieza de la sección que
      rompe el borde de otra.
      Sigue siendo dato de apoyo y no titular (CONTRATO-V2 §6): el nombre
      conserva el <h3>, Fraunces y la tinta plena; la cifra va en verde
      bosque y su glosa en gris, así que pesa por tamaño, no por color.
   3. EL CÁLIDO NO SE GASTA AQUÍ. La cifra podría ir en terracota —el
      contrato lo permite para .cifra sobre claro— y se decide que NO: en
      cada ficha ya hay un .enlace-flecha en terracota, y cinco cifras más
      del mismo color dejarían el coral repartido por toda la sección, que es
      justo lo contrario de la regla de escasez del §4 del contrato. El coral
      se queda para lo que se pulsa.
   4. UNA HOJA DE FONDO con desplazamiento del 8 % ligado al scroll (§0).
      Sólo fondo, sólo si el navegador lo soporta y sólo si el usuario no
      pidió menos movimiento.
   ========================================================================== */

/* ==========================================================================
   0. LA SECCIÓN Y SU HOJA DE FONDO
   ==========================================================================
   La hoja sangra por el borde derecho. El recorte se hace AQUÍ y no se deja
   caer al body: `clip` y no `hidden` a propósito —igual que en planes.css—,
   porque `hidden` convertiría la sección en un contenedor de scroll y con
   ello rompería el `scroll-margin-top` del ancla #espacios. Al ir sólo sobre
   el eje X, la animación de entrada (que desplaza 28 px en vertical) sigue
   funcionando.

   EL REVELADO BAJA DE 900 A 550 ms. No se toca ningún token global: se
   redefine --dur-reveal para esta sección con otro token ya existente
   (--dur-lenta). 900 ms es una entrada que se nota; a 550 el contenido ya
   está ahí cuando el ojo llega. Va dentro de `no-preference` para no pisar
   el 1 ms que tokens.css pone en `reduce`.
   ========================================================================== */
.espacios {
  position: relative;
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  .espacios {
    --dur-reveal: var(--dur-lenta);
  }
}

/* El contenido va por delante de la hoja. --z-base y no un número suelto. */
.espacios__contenedor {
  position: relative;
  z-index: var(--z-base);
}

/* La hoja: decorativa, sin eventos y a una opacidad en la que se lee como
   textura del papel y no como ilustración. El color se resuelve con
   `currentColor` dentro del SVG, así que el trazo y el relleno comparten
   este único valor y no hay ni un literal en el marcado.                   */
.espacios__hoja {
  position: absolute;
  z-index: var(--z-fondo);
  top: calc(var(--esp-2xl) * -1);
  inset-inline-end: calc(var(--esp-3xl) * -1);
  width: clamp(13rem, 32vw, 28rem);
  height: auto;
  color: rgb(var(--verde-oliva-rgb) / 0.11);
  pointer-events: none;
  transform: rotate(-14deg);
}

/* Parallax de fondo: la hoja recorre un 8 % de su alto mientras la sección
   cruza la ventana. Sin una línea de JS —`animation-timeline` lo resuelve el
   navegador— y sin tocar el motor de .reveal, que es de base.css.
   El 8 % está dentro del 5–15 % que admite el sistema, y se aplica SÓLO a
   este adorno: ni un texto de lectura se mueve con el scroll.              */
@keyframes espacios-hoja-flotar {
  from {
    transform: rotate(-14deg) translate3d(0, 8%, 0);
  }
  to {
    transform: rotate(-14deg) translate3d(0, -8%, 0);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .espacios__hoja {
      animation: espacios-hoja-flotar linear;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* ==========================================================================
   1. REJILLA — de catálogo a página de revista   (v3, intacta)
   ==========================================================================
   EL PROBLEMA QUE SE ARREGLÓ AQUÍ
   La rejilla anterior era `repeat(3, 1fr)` con la Alameda a doble columna:
   una fila 2+1 y otra 1+1+1, sin un solo hueco. Medida en pantalla, daba
   cuatro fichas de 376×552 px EXACTAMENTE iguales, empezando las tres de
   abajo en la misma línea. Esa igualdad métrica es lo que delata una página
   armada por una máquina: nadie que maqueta a mano le da el mismo tamaño a
   cinco cosas de tamaños distintos.

   CÓMO SE ROMPE
   La rejilla es de 12 columnas y cada ficha declara TRES cosas propias:
     · cuántas columnas ocupa      → grid-column
     · con qué proporción recorta  → --espacio-ratio
     · cuánto baja respecto de su vecina → --espacio-desfase
   Con 12 columnas, un tramo de 3 y uno de 8 conviven en la misma fila y
   sobra una columna de aire entre ellos: el hueco es parte de la
   composición, no un fallo de reparto.

   Tres escalas y no una: la Alameda ocupa 8 columnas (788 px medidos a
   1440), el Teatrino 5 (479 px) y las otras tres 3 (273 px). Entre la mayor
   y las menores hay factor 2,9 de ancho y factor 2 de proporción.

   EL DESFASE
   `margin-block-start` sobre el ítem de rejilla. Se declara SÓLO dentro de
   los @media: en móvil, a una columna, un desfase sería un hueco tonto.
   Los valores son escalones de la escala de espaciado, no números sueltos, y
   van en progresión (0 · --esp-lg · --esp-2xl) para que la segunda fila baje
   en diagonal de izquierda a derecha en vez de saltar al azar.
   ========================================================================== */
.espacios__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg) var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Móvil: una columna, pero NO cinco cajas iguales ----------------------
   A una sola columna el ancho ya no puede variar, así que la variación la
   llevan la proporción de la foto y su silueta: panorámica, arco y tres
   verticales de tres alturas distintas. El pulgar recorre alturas y contornos
   distintos, que es lo único que se puede escalonar sin ancho.             */
.espacio--destacado { --espacio-ratio: 3 / 2; }
.espacio--alto      { --espacio-ratio: 4 / 5; }
.espacio--medio     { --espacio-ratio: 1; }
.espacio--esbelto   { --espacio-ratio: 4 / 5; }
.espacio--breve     { --espacio-ratio: 3 / 4; }

/* ---- Tableta (768–1087) ---------------------------------------------------
   Dos tramos por fila, alternando el peso: ancho a la izquierda y estrecho a
   la derecha en la primera, y al revés en la segunda. Así ninguna de las dos
   filas repite el gesto de la otra.                                         */
@media (min-width: 48em) {
  .espacios__rejilla {
    grid-template-columns: repeat(12, 1fr);
  }

  /* La Alameda abre a todo el ancho con su banda panorámica. */
  .espacio--destacado {
    grid-column: 1 / -1;
    --espacio-ratio: 2 / 1;
  }

  .espacio--alto {
    grid-column: 1 / span 7;
    --espacio-ratio: 1;
  }

  .espacio--medio {
    grid-column: 8 / span 5;
    --espacio-ratio: 4 / 5;
    --espacio-desfase: var(--esp-xl);
  }

  .espacio--esbelto {
    grid-column: 1 / span 5;
    --espacio-ratio: 3 / 4;
  }

  .espacio--breve {
    grid-column: 6 / span 7;
    --espacio-ratio: 1;
    --espacio-desfase: var(--esp-lg);
  }
}

/* ---- Escritorio (≥1088) ---------------------------------------------------
   La composición definitiva, medida a 1440 px sobre un contenedor de 1200:

     fila 1   Alameda  col  1–8   788 px   banda 2:1        desfase 0
              La Vega  col 10–12  273 px   vertical 3:4     desfase 64
     fila 2   Teatrino col  1–5   479 px   cuadrado         desfase 0
              Taller   col  7–9   273 px   vertical 3:4     desfase 32
              Cancha   col 10–12  273 px   cuadrado         desfase 64

   La columna 9 queda vacía en la primera fila y la 6 en la segunda: son las
   dos calles de aire que impiden que las fichas se lean como una tira.
   La Vega y Cancha comparten las columnas 10–12: hay una columna real de
   fichas pequeñas a la derecha, y no cinco piezas flotando.                 */
@media (min-width: 68em) {
  .espacio--destacado {
    grid-column: 1 / span 8;
    grid-row: 1;
    --espacio-ratio: 2 / 1;
  }

  .espacio--alto {
    grid-column: 10 / span 3;
    grid-row: 1;
    --espacio-ratio: 3 / 4;
    --espacio-desfase: var(--esp-2xl);
  }

  .espacio--medio {
    grid-column: 1 / span 5;
    grid-row: 2;
    --espacio-ratio: 1;
    --espacio-desfase: 0px;
  }

  .espacio--esbelto {
    grid-column: 7 / span 3;
    grid-row: 2;
    --espacio-ratio: 3 / 4;
    --espacio-desfase: var(--esp-lg);
  }

  .espacio--breve {
    grid-column: 10 / span 3;
    grid-row: 2;
    --espacio-ratio: 1;
    --espacio-desfase: var(--esp-2xl);
  }
}

/* ==========================================================================
   2. LA FICHA
   No hereda .tarjeta: no hay superficie, no hay borde. Es una columna de
   foto + pastilla de aforo + texto.
   ========================================================================== */
.espacio {
  display: flex;
  flex-direction: column;
  /* El escalonado. Cero por defecto: sólo los @media lo levantan. */
  margin-block-start: var(--espacio-desfase, 0px);
  /* SIN estirar: cada ficha mide lo que mide y el borde inferior de la fila
     queda dentado a propósito. Si se estirasen, el desfase abriría un vacío
     entre el texto y el enlace en vez de mover la ficha entera. */
  align-self: start;
}

/* ---- Figura --------------------------------------------------------------
   La proporción la pone la ficha con --espacio-ratio (§1) y la silueta el
   modificador (§2 bis). El 1 de reserva es la red de seguridad: si algún día
   se añade un sexto espacio y se olvida su modificador, cae en cuadrado y no
   en un alto de cero.
   El `overflow: hidden` es el que recorta la foto contra el contorno, así que
   el zoom del hover se queda dentro de la hoja o del arco y no reaparece por
   las esquinas.                                                             */
.espacio__figura {
  position: relative;
  margin: 0;
  aspect-ratio: var(--espacio-ratio, 1);
  overflow: hidden;
  border-radius: var(--espacio-silueta, var(--radio-lg));
  background-color: var(--color-fondo-alt);
}

.espacio__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-lenta) var(--ease-suave);
}

/* La foto respira dentro de su contorno. Junto con el medio píxel que sube la
   pastilla (§3) son los dos únicos movimientos de la ficha: no hay elevación
   ni sombra que crezca, porque no hay caja que elevar. */
.espacio:hover .espacio__img,
.espacio:focus-within .espacio__img {
  transform: scale(var(--escala-hover));
}

/* ==========================================================================
   2 bis. LAS CINCO SILUETAS
   Una variable por ficha, --espacio-silueta, que consume .espacio__figura.
   Reglas que se cumplen en las cinco:
     · ninguna usa los cuatro radios iguales (eso es el redondeo de plantilla);
     · ninguna repite el patrón de la que tiene al lado en la rejilla;
     · todos los valores salen de la escala de radios de tokens.css.
   ========================================================================== */

/* ALAMEDA — banda: los dos extremos redondeados y el eje horizontal limpio.
   Es una panorámica de 8 columnas; cualquier asimetría fuerte a ese ancho se
   lee como un error de recorte, así que su gesto es la curva de los cantos. */
.espacio--destacado {
  --espacio-silueta: var(--radio-xl) var(--radio-lg) var(--radio-xl) var(--radio-lg);
}

/* LA VEGA — hoja clásica: dos vértices opuestos abiertos y dos cerrados.
   La punta cae arriba a la derecha, apuntando al margen de la página. */
.espacio--alto {
  --espacio-silueta: var(--radio-xl) var(--radio-xs) var(--radio-xl) var(--radio-xs);
}

/* TEATRINO — ARCO. Un medio punto exacto: la misma curva que la copa del árbol
   de su fotografía, que es lo único que esa foto tiene que contar. Es la
   silueta más rara de las cinco y por eso va en la ficha que abre la segunda
   fila.

   POR QUÉ 50 % Y NO --radio-full EN LAS DOS DE ARRIBA
   Porque no darían el mismo resultado. Cuando los radios de un lado suman más
   que ese lado, la norma (CSS Backgrounds §5.5) reduce TODOS los radios de la
   caja por el mismo factor, no sólo los que se pasan: con --radio-full arriba,
   el factor sale del orden de 0,01 y el --radio-md de abajo se desploma a
   0,2 px. Con 50 % la suma del lado de arriba da exactamente el 100 % del
   ancho, el factor es 1 y las dos esquinas de abajo conservan su radio.
   Los porcentajes están permitidos para geometría; los colores, cuerpos,
   sombras y duraciones siguen saliendo todos de tokens.                     */
.espacio--medio {
  --espacio-silueta: 50% 50% var(--radio-md) var(--radio-md);
}

/* TALLER — la hoja de La Vega girada: la punta cae arriba a la izquierda.
   Las dos verticales estrechas de la sección no comparten contorno. */
.espacio--esbelto {
  --espacio-silueta: var(--radio-xs) var(--radio-xl) var(--radio-xs) var(--radio-xl);
}

/* CANCHA — tres esquinas blandas y una viva abajo a la derecha: el remate
   duro con el que cierra la composición por el pie. */
.espacio--breve {
  --espacio-silueta: var(--radio-lg) var(--radio-lg) var(--radio-xs) var(--radio-lg);
}

/* ==========================================================================
   3. LA PASTILLA DE AFORO — el ancla
   ==========================================================================
   Va entre la figura y el cuerpo, con un tirón hacia arriba que la sube sobre
   la esquina inferior izquierda de la foto. Está en flujo normal (no es
   `position: absolute`), así que no pelea con el `overflow: hidden` de la
   figura y el texto de debajo se recoloca solo cuando la glosa parte en dos
   líneas.
   Es opaca —superficie sólida, no un velo— justamente porque monta sobre
   fotografía: sobre un velo semitransparente el contraste dependería del
   píxel que hubiera detrás, y aquí no puede depender de nada.
   Contrastes sobre --color-superficie-solida (más clara que la crema, así que
   los dos mejoran respecto de sus valores de contrato):
     verde bosque sobre crema  10.7:1   ·  gris de texto sobre crema  6.1:1
   ========================================================================== */
.espacio__aforo {
  position: relative;
  z-index: var(--z-base);
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-xs);
  /* El tirón hacia arriba deja alrededor del 60 % de la pastilla sobre la
     foto y el 40 % fuera. Está calibrado contra su alto real: --esp-lg (32 px)
     sobre una pastilla de unos 53, y --esp-xl (48) en la Alameda, cuya cifra
     sube dos escalones y la engorda hasta unos 80. */
  margin: calc(var(--esp-lg) * -1) 0 0 var(--esp-sm);
  padding: var(--esp-xs) var(--esp-md);
  /* Contorno de hoja, el mismo lenguaje que las figuras y distinto de todas
     ellas: aquí la punta va abajo a la izquierda y arriba a la derecha. */
  border-radius: var(--radio-lg) var(--radio-xs) var(--radio-lg) var(--radio-xs);
  background-color: var(--color-superficie-solida);
  box-shadow: var(--sombra-md);
  transition: transform var(--transicion);
}

/* Acompaña al zoom de la foto con un gesto mínimo. No es una elevación: la
   sombra no cambia, sólo sube dos pelos para que la pastilla se lea pegada a
   la ficha y no a la página. */
.espacio:hover .espacio__aforo,
.espacio:focus-within .espacio__aforo {
  transform: translateY(calc(var(--esp-3xs) * -1));
}

/* La cifra. Fraunces por familia y --peso-fuerte por peso, igual que .cifra
   de base.css: es el mismo objeto tipográfico, pero no puede heredar de
   .cifra porque aquella es `display: block` a --fs-cifra (--paso-5) y aquí va
   en línea y a tres tamaños distintos según el peso de la ficha. */
.espacio__cifra {
  font-family: var(--fuente-display);
  font-size: var(--paso-2);
  font-weight: var(--peso-fuerte);
  font-optical-sizing: auto;
  font-variation-settings: var(--ejes-display);
  line-height: var(--alto-linea-apretado);
  letter-spacing: var(--tracking-display);
  color: var(--verde-bosque);
}

/* La glosa: micro-etiqueta en caps, de las permitidas por el §3 del contrato.
   El `max-width` en ch la parte en dos renglones cortos a propósito: una
   glosa de una sola línea larga volvería a leerse como el renglón de datos de
   v3, y lo que se busca es un bloque compacto al lado de la cifra.          */
.espacio__glosa {
  display: block;
  max-width: 12ch;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-eyebrow);
  font-weight: var(--peso-medio);
  line-height: var(--alto-linea-titulo);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  color: var(--color-texto-suave);
}

/* CANCHA — el único aforo de dos datos (30 jugadores · 20 espectadores).
   Los dos se apilan cifra sobre glosa y se ponen a la par: así la pastilla
   crece a lo ancho y no a lo alto, y de paso es la única de las cinco con
   dos cifras, que es otra manera de que no todas se lean igual.            */
.espacio__aforo--doble {
  gap: var(--esp-md);
  /* Relleno lateral más corto que el de las otras cuatro: la Cancha vive en
     una columna de 3 de 12 (273 px medidos a 1440) y con dos datos dentro es
     la pastilla más ancha de la sección. Con --esp-md a los lados se quedaba
     a un pelo de salirse de su columna. */
  padding-inline: var(--esp-sm);
}

.espacio__dato {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3xs);
}

.espacio--breve .espacio__cifra {
  font-size: var(--paso-1);
}

.espacio--breve .espacio__glosa {
  max-width: none;
}

/* ==========================================================================
   4. CUERPO DE LA FICHA
   Sin padding lateral: el texto arranca a plomo con el borde izquierdo de la
   fotografía. Esa alineación es lo que hace que foto y texto se lean como una
   sola pieza sin necesidad de encerrarlos en nada.
   ========================================================================== */
.espacio__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-2xs);
  padding: var(--esp-sm) 0 0;
  flex: 1 1 auto;
}

/* El titular hereda Fraunces, su peso fino y su caja de frase de
   .titulo-seccion--sm (base.css): aquí sólo se le pone tinta plena y una
   medida corta. Ni familia, ni peso, ni tracking se tocan. */
.espacio__nombre {
  color: var(--carbon);
  max-width: var(--medida-corta);
}

/* Una línea, no un párrafo. --paso--2 es el suelo declarado para el texto de
   apoyo del sitio; no baja de ahí. */
.espacio__texto {
  font-size: var(--paso--2);
  line-height: var(--alto-linea-base);
  color: var(--carbon-suave);
  max-width: var(--medida-corta);
  margin: 0;
}

.espacio__enlace {
  padding-top: var(--esp-2xs);
}

/* ==========================================================================
   5. LA ALAMEDA — banda panorámica y pie de dos columnas
   Es el único espacio con dos fotografías propias: alameda-2 (panorámica de
   1500×844) y alameda-1 (vertical de 1125×1500). Las dos se ponen a la par
   formando una banda 2:1, con una junta finísima entre ellas. Leídas seguidas
   cuentan la anchura del prado.
   El reparto 1.6fr / 1fr no es arbitrario: deja a la panorámica cerca de su
   16:9 real y a la vertical un hueco casi cuadrado, así ninguna de las dos
   pierde su encuadre en el recorte.
   El contorno lo lleva la FIGURA y no cada foto: así la banda tiene una sola
   silueta —dos fotos, una forma— y el zoom del hover se recorta contra ella.
   ========================================================================== */
.espacio--destacado .espacio__figura--banda {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--esp-3xs);
  /* base.css pinta todo `img` con un gris de carga; la figura de la banda no
     se ve nunca entre las dos fotos salvo por la junta de 4 px, y ahí tiene
     que verse el fondo de la página, no el gris. */
  background-color: transparent;
}

/* CADA FOTO DE LA BANDA EN SU PROPIA CELDA RECORTADORA (llegó con el
   foto-focus, §8). El zoom —el del hover y el del scroll— escala el <img>, y
   un img no puede recortar su propio transform: sin celda, la foto ampliada
   invadía la junta de 4 px y montaba sobre el borde de su vecina. Con el
   overflow aquí, cada foto respira dentro de su celda y la junta se ve
   siempre. Las esquinas exteriores las sigue recortando la figura, que
   conserva su overflow y su silueta de banda. */
.espacio__celda {
  overflow: hidden;
}

.espacio--destacado .espacio__img {
  height: 100%;
}

/* En móvil, a una columna, la banda no cabe: la vertical de apoyo se retira y
   la panorámica se queda sola en el 3:2 de la rejilla. Se retira con
   display:none y no cargándola aparte porque es decorativa por duplicado —la
   principal ya cuenta el mismo prado— y su alt no aporta nada que no esté. */
@media (max-width: 47.99em) {
  .espacio--destacado .espacio__figura--banda {
    grid-template-columns: 1fr;
  }

  /* Se oculta la CELDA, no sólo la foto: una celda vacía seguiría siendo un
     ítem de la rejilla y abriría una segunda fila fantasma con su junta. La
     regla del <img> se conserva como red para el index.html ya ensamblado,
     que enlaza esta hoja con el marcado anterior (sin celdas) hasta que el
     ensamblador vuelva a correr. */
  .espacio--destacado .espacio__celda--apoyo,
  .espacio--destacado .espacio__img--apoyo {
    display: none;
  }
}

/* Desde el primer breakpoint la Alameda ocupa la fila entera y su figura pasa
   a 2:1. Aquí sube el CUERPO del texto y la CIFRA: es la ficha de entrada y
   su tipografía tiene que pesar más que la de las pequeñas, o el salto de
   escala se queda a medias en la fotografía. */
@media (min-width: 48em) {
  /* La única ficha con nombre a --paso-3: un escalón por encima del
     --fs-h3 (--paso-2) de las otras cuatro y uno por debajo del --fs-h2 del
     titular de la sección, que sigue mandando. */
  .espacio--destacado .espacio__nombre {
    font-size: var(--paso-3);
    max-width: var(--medida);
  }

  .espacio--destacado .espacio__texto {
    font-size: var(--fs-cuerpo);
    max-width: var(--medida);
  }

  /* La cifra de la ficha grande salta dos escalones, hasta --paso-4. A ese
     cuerpo, sobre una banda de 788 px, es el ancla de la sección entera: lo
     primero que se fija al entrar en #espacios. */
  .espacio--destacado .espacio__cifra {
    font-size: var(--paso-4);
  }

  .espacio--destacado .espacio__glosa {
    font-size: var(--fs-pequeno);
  }

  .espacio--destacado .espacio__aforo {
    margin-block-start: calc(var(--esp-xl) * -1);
    margin-inline-start: var(--esp-lg);
    padding: var(--esp-sm) var(--esp-lg);
  }
}

/* En escritorio el pie de la Alameda se abre en dos columnas: el nombre solo
   en la izquierda, a modo de cabecera, y la línea de experiencia con su
   enlace en la derecha. Es el único de los cinco que no lee en columna
   única, y es lo que acaba de distinguir a la ficha mayor de las cuatro
   pequeñas sin darle ni una caja ni un color propios.                       */
@media (min-width: 68em) {
  .espacio--destacado .espacio__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gap);
    row-gap: var(--esp-2xs);
    align-items: start;
  }

  .espacio--destacado .espacio__nombre {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .espacio--destacado .espacio__texto {
    grid-column: 2;
    grid-row: 1;
  }

  .espacio--destacado .espacio__enlace {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
}

/* ==========================================================================
   6. PIE DE SECCIÓN — el acceso a las condiciones
   Una línea de contexto y un botón secundario que lleva a
   condiciones-de-alquiler.html. Nada más: el detalle vive en su propia
   página, no en un modal y no dentro de esta sección.
   v4: era un filete de 1 px a todo lo ancho —el remate más neutro que existe—
   y pasa a ser una tablilla con contorno de hoja y un lavado de oliva muy
   bajo. Así el pie cierra la sección con la misma forma con la que la
   sección se abre, en vez de con una raya.
   El lavado está al 7 %: el gris del .nota conserva 6.0:1 y el filete del
   .btn-secundario sus 10.6:1. No lo subas sin volver a medirlos.
   ========================================================================== */
.espacios__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-sm) var(--esp-md);
  margin-top: var(--gap-lg);
  padding: var(--esp-lg) var(--esp-md);
  border-radius: var(--radio-xl) var(--radio-md) var(--radio-xl) var(--radio-md);
  background-color: rgb(var(--verde-oliva-rgb) / 0.07);
}

.espacios__pie-texto {
  max-width: var(--medida-corta);
}

@media (min-width: 48em) {
  .espacios__pie {
    padding: var(--esp-lg) var(--esp-xl);
  }
}

@media (max-width: 33.99em) {
  .espacios__pie-boton {
    display: flex;
    width: 100%;
  }
}

/* ==========================================================================
   7. FOTO-FOCUS LIGADO AL SCROLL (js/foto-focus.js)
   Las dos piezas grandes —la banda de la Alameda y el arco del Teatrino—
   llevan `data-foto-focus` en su figura y el JS las encuadra según el
   progreso de la sección: escritorio anima sólo `scale` (compositor), móvil
   viaja además el object-position hasta el data-foco del HTML.

   EL ESTADO INICIAL VIVE AQUÍ, EN CSS ESTÁTICO. scale(1) es el reposo del
   efecto y es lo que pinta el primer paint aunque el defer llegue tarde: el
   JS parte de este estado y vuelve a él, así que no puede haber parpadeo.
   La regla va con :where() a propósito: en (0,2,0) queda por debajo del zoom
   del hover (`.espacio:hover .espacio__img`, (0,3,0)), de modo que SIN el
   script —o antes de que corra— el hover de la ficha sigue funcionando.
   Con el script montado, el estilo en línea del JS manda sobre los dos.
   ========================================================================== */
:where(.espacio__figura)[data-foto-focus] .espacio__img {
  transform: scale(1);
}

/* Sólo escritorio (el mismo umbral que usa el JS para cambiar de modo) y
   sólo si hay movimiento: son dos figuras promocionadas a capa, no un sitio
   entero. En móvil el efecto repinta el recorte y will-change no ayudaría. */
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  :where(.espacio__figura)[data-foto-focus] .espacio__img {
    will-change: transform;
  }
}

/* ==========================================================================
   8. MOVIMIENTO REDUCIDO
   tokens.css ya lleva --escala-hover a 1 y las duraciones a 1 ms, y base.css
   apaga el motor de .reveal. Lo que queda por apagar aquí es lo propio de la
   sección: el zoom de la foto, el gesto de la pastilla y el parallax de la
   hoja —este último no llega ni a declararse, porque su @supports vive dentro
   de `no-preference`—. El foto-focus tampoco necesita nada aquí: su script
   no se monta bajo esta preferencia y su estado CSS ya es el reposo.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .espacio:hover .espacio__img,
  .espacio:focus-within .espacio__img,
  .espacio:hover .espacio__aforo,
  .espacio:focus-within .espacio__aforo {
    transform: none;
  }
}