/* ===================================================
   ÁLVARO RGZ — Hub (alvarorgz.com)
   Un pequeño templo: frontispicio octástilo arriba,
   tres edículas abajo. Piedra caliza sobre crema.
   =================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

:root {
  --bg: #FAF8F4;
  --bg-2: #F5F1EA;
  --panel: #FFFFFF;
  --line: rgba(28, 18, 8, .07);
  --line-2: rgba(28, 18, 8, .13);
  --fg: #1C1814;
  --fg-2: #3D3830;
  --fg-3: #7A7068;
  --fg-4: #B5ADA4;
  --gold: #8C6020;
  --gold-2: #B07830;

  /* Piedra */
  --stone-1: #F2ECE1;
  --stone-2: #E7DFD0;
  --stone-3: #D9CFBB;
  --stone-ln: rgba(28, 18, 8, .17);

  --pad: clamp(20px, 5vw, 72px);
  --max: 1240px;
  --nav-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.32, .72, 0, 1);
}

/* La cabecera es pegajosa: los destinos del índice se paran por debajo
   de ella y no detrás. */
[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* La cantera no se ve: sólo guarda los símbolos */
.quarry { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Paleta de la piedra tallada */
.st1 { fill: var(--stone-1); }
.st2 { fill: var(--stone-2); }
.st3 { fill: var(--stone-3); }
.ln  { stroke: var(--stone-ln); stroke-width: 1; }
.flute path { stroke: var(--stone-3); stroke-width: 1; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
}

/* Foco de sala que sigue al cursor */
.spot {
  position: fixed;
  top: 0; left: 0;
  width: 620px; height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 252, 245, .95) 0%, rgba(255, 250, 240, .4) 38%, transparent 68%);
  mix-blend-mode: soft-light;
  transition: opacity .8s var(--ease);
  will-change: transform;
}
.spot.is-on { opacity: 1; }

/* ===========================
   NAV
=========================== */
.nav { position: sticky; top: 0; z-index: 100; }

/* Arriba del todo no hay fondo ni línea: el polvo y la luz se ven
   también detrás de la cabecera, de modo que no corta el lienzo. En
   cuanto la página se mueve, la piedra empieza a pasar por debajo del
   nav y hace falta un suelo — vela de crema y una moldura de un pelo,
   lo justo para que firma y botón no se peleen con las columnas. */
.nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 24px;
  min-height: var(--nav-h);
  padding: 12px var(--pad);
  background: rgba(250, 248, 244, 0);
  border-bottom: 1px solid transparent;
  transition: background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease);
}

.nav.is-stuck .nav__inner {
  background: rgba(250, 248, 244, .82);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

.brand { display: flex; align-items: center; }

/* ─── Índice de la casa ─── */
.nav__links {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 34px);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.nav__links a {
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color .35s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-soft);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a:hover::after { transform: scaleX(1); }

/* La firma del telón de entrada, ya asentada en su sitio */
.brand__mark {
  display: block;
  width: 76px;
  height: auto;
  overflow: visible;
}

.brand__mark path {
  fill: none;
  stroke: var(--fg);
  /* Más grueso que en el telón: a este tamaño el trazo necesita
     compensación óptica para no quedarse en un pelo. */
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .4s var(--ease);
}

.brand:hover .brand__mark path { stroke: var(--fg-3); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 30px -12px rgba(28, 18, 8, .55);
  transition: transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
  white-space: nowrap;
}
.nav__cta svg { width: 13px; height: 13px; transition: transform .4s var(--ease); }
.nav__cta:hover {
  background: var(--fg-2);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 16px 40px -14px rgba(28, 18, 8, .65);
}
.nav__cta:hover svg { transform: translate(2px, -2px); }

/* ─── Botón de mano ─── */
.nav__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--fg);
  transition: transform .4s var(--ease-soft), opacity .3s var(--ease);
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── El cajón: el mismo índice cuando no cabe arriba ─── */
.drawer {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  z-index: 99;
  display: none;
  overflow: hidden;
  max-height: 0;
  /* Cerrado, se queda en opacity:0 y no sólo en max-height:0: el
     content interior (flex + texto) se resiste a colapsar del todo por
     debajo de 1px, y ese hilo de fondo casi opaco con blur, fijo a la
     altura del nav, se leía como una línea fantasma flotando encima de
     toda la página durante el scroll — no se movía porque el elemento
     nunca dejó de estar ahí, sólo aplastado. La opacidad lo tapa del
     todo pase lo que pase con esa fuga de un píxel. */
  opacity: 0;
  background: rgba(250, 248, 244, .97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: max-height .45s var(--ease-soft), opacity .3s var(--ease), border-color .45s var(--ease);
}
.drawer.is-open { max-height: 420px; opacity: 1; border-bottom-color: var(--line-2); }

.drawer__inner {
  display: flex;
  flex-direction: column;
  padding: 10px var(--pad) 26px;
}

.drawer__link {
  padding: 15px 2px;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-2);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  translate: 0 -8px;
  transition: opacity .4s var(--ease), translate .4s var(--ease-soft), color .3s var(--ease);
}
.drawer__link:hover { color: var(--gold); }
.drawer.is-open .drawer__link { opacity: 1; translate: 0 0; }
.drawer.is-open .drawer__link:nth-child(1) { transition-delay: .06s; }
.drawer.is-open .drawer__link:nth-child(2) { transition-delay: .11s; }
.drawer.is-open .drawer__link:nth-child(3) { transition-delay: .16s; }
.drawer.is-open .drawer__link:nth-child(4) { transition-delay: .21s; }

.drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  padding: 15px 22px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  translate: 0 -8px;
  transition: opacity .4s var(--ease) .26s, translate .4s var(--ease-soft) .26s;
}
.drawer__cta svg { width: 13px; height: 13px; }
.drawer.is-open .drawer__cta { opacity: 1; translate: 0 0; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .drawer { display: block; }
  /* Con el cajón abierto el índice ya hace de llamada: el botón del nav
     sobra y dejaría la cabecera apretada. */
  .nav__cta { display: none; }
  /* Sin índice ni CTA sólo quedan dos piezas: firma y hamburguesa. La
     rejilla de tres columnas del escritorio las colocaba en orden en
     las dos primeras casillas —la hamburguesa quedaba pegada a la
     firma— y dejaba la tercera columna vacía con todo el hueco libre
     sin usar a la derecha. Con flex y space-between, la hamburguesa va
     directa al extremo aunque falten piezas de en medio. */
  .nav__inner { display: flex; justify-content: space-between; }
}

/* ===========================
   BOTONES
=========================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn svg { width: 13px; height: 13px; transition: transform .4s var(--ease); }

.btn--solid {
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 14px 40px -16px rgba(28, 18, 8, .6);
  transition: transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.btn--solid:hover {
  background: var(--fg-2);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 22px 54px -18px rgba(28, 18, 8, .7);
}
.btn--solid:hover svg { transform: translate(3px, -3px); }

/* El secundario no compite: es una palabra subrayada por una regla que
   se completa al pasar por encima. */
.btn--ghost {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  /* Misma altura que el sólido para que ambos compartan eje: el
     fantasma no tiene caja propia y si no queda flotando alto. */
  min-height: 46px;
  padding: 0 4px;
  color: var(--fg-2);
  transition: color .4s var(--ease);
}
.btn__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line-2);
  overflow: hidden;
}
.btn__rule::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease-soft);
}
.btn--ghost:hover { color: var(--fg); }
.btn--ghost:hover .btn__rule::after { transform: scaleX(1); }

/* ===========================
   CINTILLO Y CABECERA DE CAPÍTULO
   El mismo par en las tres secciones: una raya de oro con el número
   del capítulo, el titular y —si hace falta— una entradilla. Es lo
   único que ordena la página de arriba abajo, así que se define una
   vez y se reutiliza tal cual.
=========================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.eyebrow__bar {
  flex: 0 0 auto;
  width: 26px;
  height: 1px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(140, 96, 32, .35);
}

.eyebrow--center { display: flex; justify-content: center; }

.chapter {
  width: min(100%, 640px);
  margin: 0 auto clamp(44px, 5.4vw, 68px);
  text-align: center;
}
.chapter .eyebrow { margin-bottom: 20px; }

.chapter__title {
  font-size: clamp(25px, 3.2vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

.chapter__lead {
  margin: 16px auto 0;
  max-width: 52ch;
  font-size: clamp(14.5px, 1.3vw, 16px);
  line-height: 1.65;
  color: var(--fg-3);
}

/* Contenedor común de sección: mismo ancho y mismo aire para todas */
.chapter-block {
  position: relative;
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--pad);
}

/* ===========================
   FRONTISPICIO
=========================== */
/* Sin fondo, sin recorte y sin contexto de apilado propio: el hero es
   sólo texto sobre la atmósfera común. */
/* El hero es una sala, no un bloque de texto: reserva alto suficiente
   para que el propileo se lea como arquitectura y centra la copia en
   el vano. El relleno lateral se abre con la ventana para que el texto
   nunca se meta debajo de las columnas. */
.masthead {
  position: relative;
  overflow: hidden;                       /* la puerta crece: que no desborde */
  /* El suelo del propileo tiene que ser el borde de tu campo de visión:
     si flota a media pantalla y por debajo se ve seguir la página, dejas
     de estar dentro de la puerta y pasas a mirar un dibujo de una puerta.

     svh y no dvh a propósito. Con dvh la altura cambia cuando el
     navegador móvil esconde su barra al hacer scroll, y como --p se
     divide por esta altura, el atravesar daría un tirón en mitad del
     gesto. svh es estable; el precio es una tira que asoma bajo el suelo
     cuando la barra se retrae, que es mucho más barato que el tirón.

     Y max() en vez de clamp(): en pantallas bajas —portátil de 700px,
     móvil en horizontal— el hero CRECE más allá de la ventana en vez de
     aplastar la copia. Ahí vas a hacer scroll igual. */
     Se le descuenta el alto del nav: la cabecera ocupa sus 68px de flujo
     por encima del hero, así que un 100svh pelado empujaría el suelo
     justo esos 68px por debajo del pliegue. */
  min-height: max(560px, calc(100vh - var(--nav-h)));
  min-height: max(560px, calc(100svh - var(--nav-h)));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(72px, 10vh, 116px) clamp(24px, 14vw, 190px) clamp(96px, 11vh, 118px);
  text-align: center;
}

/* ===========================
   EL PROPILEO
   --floor: alto del estilóbato; las columnas apoyan en su grada
   superior, no en el suelo de la caja.
   --p: 0 arriba del todo → 1 cuando el hero ya se ha ido.
   --px / --py: puntero normalizado (-.5 a .5) para la profundidad.
=========================== */
.propylon {
  --floor: clamp(26px, 3.4vw, 46px);
  --p: 0;
  --px: 0;
  --py: 0;

  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Atravesarla: crece desde el centro y se disuelve. El 1.34 está
     medido para que las columnas salgan de cuadro justo cuando la
     opacidad llega a cero — no antes, o se vería el corte. */
  transform: scale(calc(1 + var(--p) * .34));
  transform-origin: 50% 62%;
  opacity: calc(.94 - var(--p) * 1.06);
  will-change: transform, opacity;
}

/* Las jambas: no son piedra, son penumbra. En un fondo crema un rayo
   de luz no se ve por más blanco que se ponga — lo que se ve es lo que
   queda a oscuras a los lados. Así que la luz del centro se dibuja
   sobre todo oscureciendo los bordes, y sólo un poco aclarando el
   medio. Al revés no funciona: sale una cartulina pegada al fondo. */
.propylon__jamb {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44%;
  background: linear-gradient(90deg,
    rgba(92, 70, 38, .22) 0%,
    rgba(92, 70, 38, .12) 34%,
    rgba(92, 70, 38, .04) 66%,
    transparent 100%);
  mix-blend-mode: multiply;
  /* El hero está recortado (overflow:hidden): sin este desvanecido, la
     penumbra arrancaría de golpe justo bajo el nav y se cortaría en seco
     contra la sección siguiente, dejando sendas rayas horizontales de
     lado a lado. Se apaga por los dos extremos. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 88%, transparent 100%);
}
.propylon__jamb--l { left: 0; }
.propylon__jamb--r { right: 0; transform: scaleX(-1); }

/* Y encima, el rayo: una elipse que entra por arriba y se derrama
   hacia el suelo. Sin clip-path — un borde recto delata el truco al
   instante; el degradado radial no tiene borde que delatar. Se
   desplaza con el puntero, como si la fuente estuviera fuera. */
.propylon__beam {
  position: absolute;
  left: 50%;
  top: -20%;
  width: min(940px, 78%);
  height: 128%;
  translate: calc(-50% + var(--px) * 46px) 0;
  background:
    /* la entrada del rayo, arriba, por el hueco del dintel */
    radial-gradient(ellipse 42% 64% at 50% 4%,
      rgba(255, 254, 250, 1) 0%,
      rgba(255, 251, 240, .62) 38%,
      rgba(255, 248, 232, 0) 72%),
    /* el charco donde aterriza, sobre el estilóbato */
    radial-gradient(ellipse 68% 30% at 50% 96%,
      rgba(255, 252, 243, .72) 0%,
      rgba(255, 248, 232, 0) 72%);
  filter: blur(24px);
  /* Abajo se apaga sólo en el último tramo: el charco de luz sobre el
     estilóbato tiene que sobrevivir, es donde aterriza el rayo. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 95%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 95%, transparent 100%);
}

/* ─── Las dos columnas ───
   Recias a propósito: una jónica de verdad ronda las nueve veces su
   diámetro, y con el fuste más fino salían tuberías. */
.pcol {
  position: absolute;
  top: clamp(96px, 17vh, 186px);
  bottom: calc(var(--floor) * .62);
  width: clamp(58px, 8.6vw, 124px);
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 4px 14px rgba(28, 18, 8, .14));
}

/* El muñón del dintel descansa sobre el capitel y vuela hacia el
   centro, donde se rompe. Sale de la columna hacia arriba (bottom:100%)
   para que su peso quede donde debe: encima. */
.pcol__lintel {
  position: absolute;
  bottom: 100%;
  width: 250%;
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(28, 18, 8, .16));
}
/* Se sale de cuadro por el lado de fuera: la ruina sigue más allá del
   encuadre, no empieza justo en el borde de la ventana. */
.pcol--l .pcol__lintel { left: -64%; }
.pcol--r .pcol__lintel { right: -64%; transform: scaleX(-1); }

/* Sombra arrojada: ancla la columna al estilóbato y se alarga hacia
   el centro, en contra de la luz. */
.pcol::after {
  content: "";
  position: absolute;
  bottom: -2%;
  width: 190%;
  height: 3.4%;
  background: radial-gradient(ellipse at center, rgba(28, 18, 8, .3) 0%, rgba(28, 18, 8, .09) 46%, transparent 74%);
  filter: blur(3px);
}
.pcol--l::after { left: -14%; }
.pcol--r::after { right: -14%; }
/* Profundidad: las columnas están más cerca que el fondo, así que se
   mueven en contra del puntero. Va en `translate` y no en `transform`
   a propósito — el alzado de la obra usa `transform` y las dos
   propiedades se componen sin pisarse. */
.pcol--l {
  left: clamp(-18px, 4.5vw, 88px);
  translate: calc(var(--px) * -16px) calc(var(--py) * -7px);
}
.pcol--r {
  right: clamp(-18px, 4.5vw, 88px);
  translate: calc(var(--px) * 16px) calc(var(--py) * -7px);
}

.pcol__cap, .pcol__base {
  display: block;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
}

/* Fuste acanalado, con más luz que el de las salas: aquí la columna es
   grande y las estrías tienen que leerse de una en una. */
.pcol__shaft {
  flex: 1 1 auto;
  width: 66%;
  margin: 0 auto;
  background:
    linear-gradient(90deg,
      rgba(28,18,8,.2) 0%,
      rgba(28,18,8,0) 22%,
      rgba(255,255,255,.72) 46%,
      rgba(28,18,8,0) 72%,
      rgba(28,18,8,.24) 100%),
    repeating-linear-gradient(90deg,
      var(--stone-1) 0 6px,
      var(--stone-3) 6px 7.3px);
  box-shadow: 0 0 0 1px var(--stone-ln) inset;
}

/* El acanto brota por fuera, hacia el borde: por dentro estorbaría al
   rayo de luz y a la lectura. Va por detrás de la basa (z-index) para
   que parezca nacer del suelo y no estar apoyado en la piedra. */
.acanthus {
  position: absolute;
  z-index: -1;
  bottom: 1%;
  width: 118%;
  height: auto;
  opacity: .8;
}
.pcol--l .acanthus { left: -62%; }
.pcol--r .acanthus { right: -62%; transform: scaleX(-1); }

/* ─── El estilóbato ─── */
.propylon__floor {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0;
  width: 104%;
  height: var(--floor);
}

/* ─── El alzado: se levanta de abajo arriba, como todo lo demás ───
   .reveal es sólo el disparador; el fundido de bloque se neutraliza
   para que la puerta se monte pieza a pieza. */
.propylon.reveal,
.propylon.reveal.is-in {
  opacity: calc(.94 - var(--p) * 1.06);
  transform: scale(calc(1 + var(--p) * .34));
  /* Imprescindible: .reveal transiciona opacity y transform durante un
     segundo, y aquí las dos cuelgan de --p, que se reescribe en cada
     fotograma del scroll. Con transición, la puerta llegaba un segundo
     tarde a todas partes. Aquí el valor tiene que ser instantáneo. */
  transition: none;
}

.propylon__floor,
.pcol,
.acanthus,
.propylon__beam,
.propylon__jamb { opacity: 0; }

.propylon.is-in .propylon__floor,
.propylon.is-in .pcol,
.propylon.is-in .acanthus,
.propylon.is-in .propylon__beam,
.propylon.is-in .propylon__jamb {
  animation-name: riseGate;
  animation-duration: 1.15s;
  animation-timing-function: var(--ease-soft);
  animation-fill-mode: forwards;
  animation-delay: var(--t, 0s);
}

.propylon.is-in .propylon__floor { --t: 0s; }
.propylon.is-in .pcol--l         { --t: .14s; }
.propylon.is-in .pcol--r         { --t: .22s; }
.propylon.is-in .acanthus        { --t: .5s; }
/* La luz es lo último en entrar: primero se levanta la puerta, después
   amanece. Sin desplazamiento — la luz no sube, aparece. */
.propylon.is-in .propylon__jamb  { --t: .62s; animation-name: dawn; }
.propylon.is-in .propylon__beam  { --t: .72s; animation-name: dawn; animation-duration: 1.6s; }

@keyframes riseGate {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dawn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* En pantallas estrechas las columnas se van al filo y asoman a medias:
   sigues entre ellas, pero ya no le comen sitio al titular. */
/* ─── El propileo en vertical ───
   Una pantalla de móvil ya tiene la forma de un vano, así que no se
   recorta la composición ancha: se le hace la suya. Las columnas
   engordan y se meten en cuadro casi enteras —antes eran dos astillas
   descoloridas pegadas al filo— y el acanto se pasa a la cara interior,
   que es la única donde queda sitio. Estás entre las dos, no mirándolas. */
@media (max-width: 760px) {
  .propylon { --floor: 32px; }

  /* El arranque tiene que dejar sitio al muñón del dintel, que cuelga
     por encima de la columna: si sube más, se le mete debajo del nav. */
  .pcol { width: 56px; top: clamp(72px, 11vh, 112px); }
  .pcol--l { left: -12px; }
  .pcol--r { right: -12px; }

  /* Fuste más estrecho en proporción y estrías más juntas: a este tamaño
     las del canon de escritorio salían tres rayas gordas. */
  .pcol__shaft {
    width: 60%;
    background:
      linear-gradient(90deg,
        rgba(28,18,8,.22) 0%,
        rgba(28,18,8,0) 20%,
        rgba(255,255,255,.78) 46%,
        rgba(28,18,8,0) 74%,
        rgba(28,18,8,.26) 100%),
      repeating-linear-gradient(90deg,
        var(--stone-1) 0 4px,
        var(--stone-3) 4px 4.9px);
  }

  /* Brota hacia dentro: por fuera sólo quedan doce píxeles de borde.
     Vive a la altura del estilóbato, donde lo único que hay es la
     señal de scroll, que va centrada y no llega hasta ahí. */
  /* Levantado sobre la basa: el estilóbato se pinta por encima de la
     columna y a ras de suelo se comía la mata entera. */
  .acanthus { width: 88%; bottom: 11px; opacity: .7; }
  .pcol--l .acanthus { left: 64%; right: auto; }
  .pcol--r .acanthus { right: 64%; left: auto; }

  /* El vano es estrecho: la penumbra se recoge para no comerse el
     centro, y el rayo se estrecha con él. Sube de intensidad porque en
     vertical el tercio de arriba queda vacío — ahí no hay piedra que
     mirar, y el sitio se sostiene con luz o no se sostiene. */
  .propylon__jamb { width: 34%; }
  .propylon__beam {
    top: -14%;
    width: 88%;
    filter: blur(18px);
    background:
      radial-gradient(ellipse 48% 58% at 50% 2%,
        rgba(255, 254, 250, 1) 0%,
        rgba(255, 250, 238, .78) 34%,
        rgba(255, 247, 230, 0) 74%),
      radial-gradient(ellipse 74% 26% at 50% 97%,
        rgba(255, 252, 243, .8) 0%,
        rgba(255, 248, 232, 0) 74%);
  }
}

/* Piezas guardadas en el almacén: fuera del escaparate, pero no del código.
   Para volver a exponer una pieza, basta con quitarle esta clase.
   !important a propósito: es una bandera de utilidad y debe ganar siempre,
   sin importar dónde se defina display en la regla propia del elemento. */
.in-storage { display: none !important; }

/* ===========================
   ATMÓSFERA DE PÁGINA
   Un único lienzo detrás de todo: nav, hero y salas comparten fondo,
   sin cortes de tono. Fijas al viewport, así el polvo y la luz
   acompañan el scroll en vez de pertenecer a una sección.
=========================== */
.page-dust {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

.page-wash {
  position: fixed;
  left: 50%; top: 26%;
  width: min(1100px, 130vw);
  height: min(1100px, 130vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(circle, rgba(140, 96, 32, .15) 0%, rgba(140, 96, 32, .04) 34%, transparent 64%);
  filter: blur(90px);
  animation: breathe 22s ease-in-out infinite alternate;
}

@keyframes breathe {
  0%   { transform: translate(-52%, -48%) scale(1); opacity: .9; }
  100% { transform: translate(-48%, -53%) scale(1.14); opacity: 1; }
}

/* ===========================
   TELÓN DE ENTRADA
   La firma se traza antes de abrir el sitio. El telón es opaco y del
   color de la página; el polvo y la luz suben por delante de él para
   que el trazo no ocurra sobre un vacío liso.
=========================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 149;
  background: var(--bg);
  pointer-events: none;
  transition: opacity .8s var(--ease-soft);
}

.intro__mark {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 152;
  width: min(340px, 58vw);
  height: auto;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}

.intro__mark path {
  fill: none;
  stroke: var(--fg);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Estado previo a que el script mida el trazo: la firma nace oculta,
     así no asoma entera en el primer fotograma. El script sustituye
     estos valores por la longitud real del recorrido. */
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}

/* Telón echado: sin scroll, y la atmósfera por delante de él */
html.is-intro:not(.is-intro-out),
html.is-intro:not(.is-intro-out) body { overflow: hidden; }
html.is-intro .page-wash { z-index: 150; }
html.is-intro .page-dust { z-index: 151; }

/* Telón levantándose */
html.is-intro-out .intro { opacity: 0; }
html.is-intro-out .intro__mark {
  opacity: 0;
  transform: translate(-50%, calc(-50% - 10px));
}

/* ─── El templo que sostiene la tesis ───
   Se levanta por gradas, columnas y, lo último de todo, el frontón:
   exactamente lo que dice el titular que tiene debajo. Vive dentro de
   .story, así que se mide para acompañar al texto — no para competir
   con las tres salas, que son lo que hay que pulsar. */
.temple {
  display: block;
  width: min(100%, 560px);
  height: auto;
  margin: 0 auto clamp(30px, 4vw, 48px);
  filter: drop-shadow(0 16px 24px rgba(28, 18, 8, .07));
}

/* Lleva .reveal sólo para que el observador le ponga .is-in encima: el
   templo no se revela como bloque, se revela piedra a piedra. De ahí que
   se le neutralicen el desplazamiento y el fundido propios de .reveal
   (el segundo selector gana a .reveal.is-in por especificidad). */
.temple.reveal,
.temple.reveal.is-in { opacity: .8; transform: none; }

/* Sólo se levantan las piedras. Los grupos .cols y .tg quedan fuera: si
   se les animara la opacidad, taparían a sus propias piezas y la
   columnata no aparecería hasta que el grupo entero se hubiera fundido. */
.temple > *:not(.cols):not(.tg),
.temple .cols > *,
.temple .tg > * { opacity: 0; }

/* La obra no arranca al cargar la página: espera a entrar en pantalla,
   para que el frontón aterrice mientras se lee la frase. Cada pieza trae
   su propio momento en --t (ver index.html), así el calendario de la obra
   vive junto al dibujo y no depende de contar hijos desde aquí. */
.temple.is-in > *:not(.cols):not(.tg),
.temple.is-in .cols > *,
.temple.is-in .tg > * {
  animation-name: raise;
  animation-duration: 1.1s;
  animation-timing-function: var(--ease-soft);
  animation-fill-mode: forwards;
  animation-delay: var(--t, 0s);
}

/* Sube la piedra a su sitio.
   Usa la propiedad independiente `translate` en vez de `transform` a
   propósito: las piezas de las tres salas llevan translateZ() para la
   profundidad del tilt, y animar `transform` se la llevaría por delante.
   `translate` se compone antes que `transform`, así que el eje Z sobrevive. */
@keyframes raise {
  0%   { opacity: 0; translate: 0 14px; }
  100% { opacity: 1; translate: 0 0; }
}

.masthead__copy {
  position: relative;
  z-index: 2;
  width: min(100%, 720px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.masthead__copy > .eyebrow { margin-bottom: clamp(20px, 2.6vw, 30px); }

/* El salto de 7.4vw hace que en móvil el titular arranque en 32px en vez
   de en los 28 del mínimo anterior: a 28 se quedaba en nota al pie
   dentro de una pantalla entera, y el hero se veía vacío por arriba. */
.masthead__title {
  font-size: clamp(32px, 7.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: 400;
  margin: 0 0 18px;
  max-width: 20ch;
  /* Reparte las líneas en vez de dejar huérfano el "en" del final */
  text-wrap: balance;
}

.masthead__sub {
  font-size: clamp(14.5px, 1.3vw, 16.5px);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 52ch;
  margin: 0;
}

/* Las dos salidas del frontispicio: hablar, o bajar a ver las casas.
   Alineadas por su línea de base, no por la caja — el fantasma no
   lleva relleno vertical propio y si no se centrarían mal. */
.masthead__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(28px, 3.4vw, 40px);
}

/* La señal de que hay página por debajo. Va anclada al pie del vano y
   no al final de la copia: si fluyera con el texto, empujaría el
   titular fuera del centro del propileo. Decorativa: quien navega con
   teclado ya tiene "Ver las tres casas" ahí arriba. */
.cue {
  position: absolute;
  left: 50%;
  bottom: clamp(46px, 6vh, 74px);
  z-index: 2;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.cue svg {
  width: 10px;
  height: 20px;
  color: var(--fg-4);
  animation: cueDrift 2.6s var(--ease-soft) infinite;
}

@keyframes cueDrift {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(5px); opacity: 1; }
}

@media (max-width: 520px) {
  .masthead__cta { flex-direction: column; gap: 10px; }
  .btn--solid { width: 100%; justify-content: center; }
  .btn--ghost { align-items: center; }
}

/* Ventanas bajas: móvil en horizontal, portátiles pequeños. El hero ya
   crece por encima de la ventana gracias al mínimo, que es lo correcto
   —ahí se hace scroll igual—, pero un titular de 52px en 420px de alto
   no es un frontispicio, es un atasco. Aquí se aprieta todo y se retira
   la señal de scroll, que en esta franja sólo estorba. */
@media (max-height: 620px) {
  .masthead {
    min-height: 480px;
    padding-top: clamp(54px, 12vh, 78px);
    padding-bottom: clamp(54px, 12vh, 78px);
  }
  .masthead__copy > .eyebrow { margin-bottom: 14px; }
  .masthead__title { font-size: clamp(28px, 3.6vw, 38px); margin-bottom: 12px; }
  .masthead__cta { margin-top: 22px; }
  .pcol { top: clamp(56px, 13vh, 84px); }
  .cue { display: none; }
}

/* ===========================
   LAS TRES SALAS
=========================== */
/* La rejilla ya no lleva ancho ni relleno propios: vive dentro de
   .chapter-block, que es quien fija el ancho y el aire de todas las
   secciones por igual. */
.bays {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3vw, 46px);
  /* Los tres templos pisan el mismo suelo; las cartelas cuelgan libres */
  align-items: start;
}

.piece { position: relative; }

/* ─── La obra de las tres salas ───
   Se levantan igual que el templo de la nota: de abajo arriba y sólo al
   entrar en pantalla. .reveal aquí es únicamente el disparador — la sala
   no se funde en bloque, se levanta pieza a pieza — de ahí que se le
   neutralicen el fundido y el desplazamiento propios de .reveal. */
.piece.reveal,
.piece.reveal.is-in { opacity: 1; transform: none; }

/* Las tres no arrancan a la vez: una detrás de otra, como una cuadrilla
   que va de sala en sala. */
.piece:nth-child(1) { --d: 0s; }
.piece:nth-child(2) { --d: .16s; }
.piece:nth-child(3) { --d: .32s; }

.piece .bay__steps,
.piece .col,
.piece .pedestal,
.piece .bay__art,
.piece .relic,
.piece .bay__crown,
.piece .plaque { opacity: 0; }

.piece.is-in .bay__steps,
.piece.is-in .col,
.piece.is-in .pedestal,
.piece.is-in .bay__art,
.piece.is-in .relic,
.piece.is-in .bay__crown,
.piece.is-in .plaque {
  animation-name: raise;
  animation-duration: 1s;
  animation-timing-function: var(--ease-soft);
  animation-fill-mode: forwards;
  /* --d escalona las salas entre sí; --t, las piezas dentro de cada una */
  animation-delay: calc(var(--d, 0s) + var(--t, 0s));
}

/* El orden: primero el suelo, luego las columnas que lo pisan, después el
   pedestal, encima la pieza expuesta, la cubierta que todo lo remata y,
   cuando la sala ya está montada, la cartela. */
.piece .bay__steps { --t: 0s; }
.piece .col--l     { --t: .12s; }
.piece .col--r     { --t: .18s; }
.piece .pedestal   { --t: .34s; }
.piece .bay__art,
.piece .relic      { --t: .48s; }
.piece .bay__crown { --t: .62s; }
.piece .plaque     { --t: .78s; }

/* ─── La edícula ─── */
.bay {
  position: relative;
  display: block;
  perspective: 1400px;
}

.bay__depth {
  display: block;
  transform-style: preserve-3d;
  transition: transform .9s var(--ease-soft);
  will-change: transform;
}

/* Coronación: descansa sobre los capiteles.
   Las tres reservan el mismo canon vertical (el del frontón, que es
   el más alto) y se apoyan en el borde inferior de su caja, de modo
   que los tres edificios pisan el mismo suelo pese a tener cubiertas
   distintas. */
.bay__crown {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 92;
  height: auto;
  transform: translateZ(7px);
}

/* Cuerpo: el vano. Interior vacío — entre las columnas se ve el fondo
   de la página, y dentro reposa la pieza sobre su pedestal. */
.bay__body {
  position: relative;
  display: flex;
  align-items: flex-end;   /* el pedestal pisa el suelo del edificio */
  justify-content: center;
  padding-top: 7%;         /* aire entre el entablamento y la pieza */
}

/* La vitrina: panel enmarcado + pedestal, como una ofrenda expuesta */
.exhibit {
  position: relative;
  z-index: 1;
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* MÓDULO DEL EDIFICIO
   Los símbolos están tallados sobre una retícula de 400 en la que el
   arquitrabe y la grada superior abarcan siempre 20→380, es decir el
   5%–95% del ancho. Las columnas apoyan en ese módulo desde el 6,5%.

   La pieza ocupa el 60% del vano y va centrada, así que queda holgada
   dentro del intercolumnio: ya no roza las columnas por ningún lado. */

/* El panel: tabla votiva enmarcada en piedra */
.bay__art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-2);
  border: clamp(4px, .5vw, 7px) solid var(--stone-2);
  box-shadow:
    0 0 0 1px var(--stone-ln),
    0 14px 22px -14px rgba(28, 18, 8, .5);
}

/* El pedestal sobre el que reposa */
.pedestal {
  display: block;
  width: 76%;
  height: auto;
  filter: drop-shadow(0 7px 9px rgba(28, 18, 8, .14));
}

/* ─── Columnas exentas: cargan el entablamento y pisan el basamento ─── */
.col {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  /* Proporcional al vano: así el canon se mantiene a cualquier tamaño */
  width: 9.5%;
  display: flex;
  flex-direction: column;
  transform: translateZ(5px);
  filter: drop-shadow(-3px 0 6px rgba(28, 18, 8, .18));
}
/* Apoyan dentro del módulo del basamento, con holgura por fuera. */
.col--l { left: 6.5%; }
.col--r { right: 6.5%; filter: drop-shadow(3px 0 6px rgba(28, 18, 8, .18)); }

/* El dórico es el orden más recio; el corintio, el más esbelto */
.bay--stoa .col    { width: 11.5%; }
.bay--arch .col    { width: 8.5%; }

.col__cap, .col__base {
  display: block;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
}

/* Fuste acanalado: escala a cualquier altura sin deformar el capitel */
.col__shaft {
  flex: 1 1 auto;
  width: 60%;
  margin: 0 auto;
  background:
    linear-gradient(90deg,
      rgba(28,18,8,.16) 0%,
      rgba(28,18,8,0) 24%,
      rgba(255,255,255,.62) 46%,
      rgba(28,18,8,0) 70%,
      rgba(28,18,8,.2) 100%),
    repeating-linear-gradient(90deg,
      var(--stone-1) 0 3px,
      var(--stone-3) 3px 3.8px);
  box-shadow: 0 0 0 1px var(--stone-ln) inset;
}

/* La stoa es dórica: el fuste baja sin basa hasta la grada */
.bay--stoa .col__shaft { margin-bottom: 0; }

/* Archivolta: abre el vano de medio punto en todo el hueco del arco.
   Va al fondo — la pieza y las columnas quedan por delante. */
.archivolt {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ═══ LA COLECCIÓN EXPUESTA ═══
   Dos capas que se relevan: una entra mientras la otra se va, así la
   pieza cambia sin parpadeo. El z-index es explícito a propósito — el
   script añade las capas al final del contenedor y no quiero que el
   orden del DOM decida qué queda delante. */
.relic__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.1s var(--ease-soft);
}
.relic__img.is-on { opacity: 1; }

/* ─── 01 · Tablilla enmarcada: la maqueta llena el vano ─── */
.bay__art .relic__img {
  object-fit: cover;
  object-position: top center;
  transition: opacity 1.1s var(--ease-soft), scale 1.4s var(--ease-soft);
}
.bay:hover .bay__art .relic__img { scale: 1.04; }

/* ─── 02 y 03 · La pieza exenta ───
   Mismo canon que la tablilla (16/10) para que las tres salas sigan
   pisando el mismo suelo, pero sin marco: sólo el objeto en el aire. */
.relic {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.relic .relic__img {
  /* Se asoma por encima del canon para ganar presencia: la caja sigue
     midiendo 16/10 —el suelo de las tres salas no se mueve— pero la
     pieza puede crecer hacia arriba, que es aire libre. */
  /* Altura explícita, no `auto`: en un elemento reemplazado `auto` toma la
     altura intrínseca en vez de estirarse entre top y bottom, y la pieza
     acabaría plantada por debajo del pedestal. 111% = el 11% que asoma. */
  inset: -11% 0 auto 0;
  height: 111%;
  object-fit: contain;
  object-position: center bottom;
  padding: 2% 6% 4%;
  /* Sombra que sigue la silueta recortada, no una caja */
  filter: drop-shadow(0 8px 11px rgba(28, 18, 8, .3));
  transition: opacity 1.1s var(--ease-soft), translate .7s var(--ease-soft);
}
.bay:hover .relic .relic__img { translate: 0 -5px; }

/* El brillo del suelo: un charco de luz cálida teñido del color de la
   sala (--accent, que cada pieza declara en su style). */
.relic__glow {
  position: absolute;
  left: 50%;
  /* Rebosa por debajo de la caja: la luz encharca la tapa del pedestal,
     y de paso lo dibuja en vez de borrarlo. */
  bottom: -4%;
  z-index: 0;
  width: 78%;
  height: 30%;
  translate: -50% 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 252, 244, .95) 0%, rgba(255, 249, 238, .38) 36%, transparent 66%),
    radial-gradient(ellipse at 50% 100%, rgba(var(--accent), .32) 0%, rgba(var(--accent), .11) 44%, transparent 74%);
  transition: opacity .7s var(--ease), scale .7s var(--ease);
}
/* Sombra de contacto: ancla la pieza al pedestal para que no flote suelta */
.relic__glow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 24%;
  width: 44%;
  height: 20%;
  translate: -50% 0;
  background: radial-gradient(ellipse at center, rgba(28, 18, 8, .3) 0%, rgba(28, 18, 8, .1) 46%, transparent 72%);
}
.bay:hover .relic__glow { scale: 1.07; }

/* Cristal y barrido de luz */
.bay__glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: translateZ(9px);
  background: linear-gradient(122deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .05) 26%, transparent 46%);
  mix-blend-mode: screen;
}

.bay__sweep {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(11px);
}
.bay__sweep::after {
  content: "";
  position: absolute;
  top: -60%; bottom: -60%;
  left: -40%;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-260%) rotate(14deg);
  filter: blur(2px);
}
.bay:hover .bay__sweep::after { animation: glassSweep 1.15s var(--ease-soft); }

@keyframes glassSweep {
  0%   { transform: translateX(-260%) rotate(14deg); }
  100% { transform: translateX(560%) rotate(14deg); }
}

/* Basamento sobre el que apoyan las columnas.
   Mismo canon para los tres, alineado por su grada superior. */
.bay__steps {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 30;
  height: auto;
  transform: translateZ(2px);
}

.bay__depth { filter: drop-shadow(0 20px 26px rgba(28, 18, 8, .10)); transition: transform .9s var(--ease-soft), filter .9s var(--ease-soft); }
.bay:hover .bay__depth { filter: drop-shadow(0 34px 42px rgba(28, 18, 8, .17)) drop-shadow(0 0 60px rgba(var(--accent) / .22)); }

/* ─── Cartela ─── */
.plaque {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 26px;
  padding: 0 2px;
}

.plaque__no {
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--fg-4);
  padding-top: 4px;
}

.plaque__txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
  min-width: 0;
}

/* El nombre de la sala es un <h2>: cada sala es una de las tres cosas que
   hago, y el buscador tiene que poder leerlas como tales. Se le quitan los
   márgenes y el tamaño de heading para que siga viéndose como una placa. */
.plaque__name {
  position: relative;
  width: fit-content;
  margin: 0;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: inherit;
}
.plaque__name::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-soft);
}
.bay:hover .plaque__name::after { transform: scaleX(1); }

.plaque__medium {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fg-3);
}

/* Antes decía en qué estado estaba la sala; ahora invita a entrar. La
   flecha va siempre visible, no sólo al pasar el ratón: en táctil no hay
   hover, y era justo ahí donde nada delataba que la sala se abre. */
.plaque__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 12px;
  border: 1px solid rgba(140, 96, 32, .3);
  border-radius: 999px;
  white-space: nowrap;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.plaque__cta svg {
  width: 10px;
  height: 10px;
  transition: transform .4s var(--ease);
}
.bay:hover .plaque__cta {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}
.bay:hover .plaque__cta svg { transform: translate(2px, -2px); }

@media (max-width: 940px) {
  .bays { grid-template-columns: 1fr; gap: 56px; }
  .bay { perspective: none; }
}

/* En columna estrecha la cartela y su llamada no caben en la misma
   línea. La rejilla es más previsible que el envoltorio del flex: el
   número manda su columna y todo lo demás cuelga de la segunda, con la
   llamada en su propia fila y pegada al texto. */
@media (max-width: 480px) {
  .plaque {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 14px;
  }
  .plaque__cta { grid-column: 2; justify-self: start; }
}

/* ===========================
   LOS TRES ÓRDENES — nota del autor
   Reutiliza los capiteles de la cantera como numeración: la misma
   pieza que corona cada sala aquí abre su propio párrafo, así el
   visitante conecta sin esfuerzo "lo que hago" con "por qué lo hago".
=========================== */
.story {
  position: relative;
  padding: clamp(64px, 8vw, 104px) var(--pad) clamp(56px, 7vw, 88px);
  border-top: 1px solid var(--line);
}

.story > .eyebrow { margin-bottom: clamp(32px, 4vw, 48px); }

.story__head {
  width: min(100%, 640px);
  margin: 0 auto clamp(52px, 6.4vw, 78px);
  text-align: center;
}

.story__title {
  font-size: clamp(25px, 3.2vw, 36px);
  line-height: 1.22;
  letter-spacing: -0.018em;
  font-weight: 400;
  color: var(--fg);
  margin: 0 0 16px;
}

.story__deck {
  font-size: clamp(14.5px, 1.3vw, 16.5px);
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 54ch;
  margin: 0 auto;
}

/* ─── Las tres gradas: dórico, jónico, corintio ─── */
.story__registers {
  list-style: none;
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 32px);
}

.register {
  display: flex;
  gap: clamp(18px, 2.6vw, 30px);
  align-items: stretch;
}

.register__rail {
  flex: 0 0 auto;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.register__order {
  display: block;
  width: 40px;
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 5px rgba(28, 18, 8, .12));
}

.register__no {
  margin-top: 10px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1;
  color: var(--gold);
  flex: 0 0 auto;
}

.register__thread {
  flex: 1 1 auto;
  width: 1px;
  min-height: 28px;
  /* Baja hasta el suelo de la tablilla y salta el hueco entre una y la
     siguiente: el hilo cose las tres gradas en una sola escalera. */
  margin: 14px 0 calc(-1 * clamp(20px, 2.6vw, 32px));
  background: linear-gradient(var(--line-2), transparent 96%);
}

.register:last-child .register__thread { display: none; }

/* ─── La tablilla ───
   Cada grada, cerrada en su propia piedra. La franja de color de arriba
   es la misma --accent que la sala correspondiente, así que la nota y
   la casa se reconocen entre sí sin decirlo. */
.register__tablet {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 34px) clamp(20px, 2.6vw, 28px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .26));
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 30px -26px rgba(28, 18, 8, .5);
}

.register__tablet::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: clamp(48px, 7vw, 74px);
  height: 2px;
  background: rgb(var(--accent, 140 96 32));
  opacity: .55;
}

.register__head { margin-bottom: 12px; }

.register__promise {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.register__title {
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}

.register__body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-2);
  max-width: 62ch;
  margin: 0;
}

/* La puerta a la casa que le toca: la nota deja de ser sólo lectura */
.register__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(16px, 2vw, 22px);
  padding-top: clamp(14px, 1.8vw, 18px);
  border-top: 1px solid var(--line);
  width: 100%;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color .4s var(--ease);
}
.register__link svg { width: 11px; height: 11px; transition: transform .4s var(--ease); }
.register__link:hover { color: var(--gold-2); }
.register__link:hover svg { transform: translate(3px, -3px); }

/* ─── Cierre: la moraleja, aparte y sin numerar ─── */
.story__coda {
  width: min(100%, 620px);
  margin: clamp(46px, 6vw, 68px) auto 0;
  padding-top: clamp(38px, 5vw, 54px);
  border-top: 1px solid var(--line);
  text-align: center;
}

.story__coda-lead {
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 14px;
}

.story__coda-tail {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-3);
  max-width: 52ch;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .register { gap: 18px; }
  .register__rail { width: 34px; }
  .register__order { width: 30px; }
}

/* ===========================
   EL FRISO
   La máxima, grabada de lado a lado entre dos molduras. No es una
   sección: es la junta entre el oficio y la prueba, y por eso ocupa
   todo el ancho en vez de quedarse dentro de una columna de texto.
=========================== */
.frieze {
  position: relative;
  margin-top: clamp(20px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(242, 236, 225, .5), rgba(242, 236, 225, .16));
}

.frieze .dentils { opacity: .5; }

.frieze__band {
  padding: clamp(28px, 3.6vw, 44px) var(--pad);
  text-align: center;
}

.frieze__maxim {
  font-size: clamp(11.5px, 1.35vw, 13.5px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fg-2);
  /* El espaciado añade aire tras la última letra: se compensa para que
     la línea quede ópticamente centrada. */
  text-indent: .3em;
  margin: 0 0 10px;
}

.frieze__attr {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--fg-4);
  margin: 0;
}

/* ===========================
   EL LIBRO DE VISITAS
   La entrada del visitante en cursiva serif, que es la letra con la
   que se firma un libro, dentro del mismo marco de piedra que enmarca
   las maquetas de la primera casa.
=========================== */
/* Dos tablillas a la par. Se estiran a la misma altura y la firma cae
   siempre al fondo (margin-top:auto en .entry__sign), así las dos
   molduras quedan a la misma cota aunque una entrada sea más larga. */
.entries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 2.6vw, 38px);
  align-items: stretch;
  width: min(100%, 1000px);
  margin: 0 auto;
}

.entry {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(30px, 3.6vw, 44px) clamp(24px, 3vw, 40px) clamp(24px, 2.8vw, 30px);
  text-align: center;
  background: var(--panel);
  border: clamp(4px, .5vw, 7px) solid var(--stone-2);
  box-shadow:
    0 0 0 1px var(--stone-ln),
    0 26px 40px -30px rgba(28, 18, 8, .55);
}

@media (max-width: 860px) {
  .entries { grid-template-columns: 1fr; width: min(100%, 660px); }
}

.entry__stars {
  font-size: 12px;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--gold);
  margin: 0 0 18px;
}

/* Las dos tablillas miden lo mismo, pero las entradas no: la corta se
   queda con un hueco debajo. Que la cita ocupe el sobrante y se
   centre en él evita que una quede pegada arriba y la otra llena. */
.entry__quote {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 clamp(24px, 3vw, 32px);
}

.entry__head {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.22;
  letter-spacing: -0.014em;
  color: var(--fg);
  margin: 0 0 14px;
  text-wrap: balance;
}

.entry__body {
  width: min(100%, 46ch);
  margin: 0 auto;
  font-size: clamp(14.5px, 1.4vw, 15.5px);
  line-height: 1.7;
  color: var(--fg-2);
}

/* La firma va bajo una moldura, apilada y a la izquierda: en dos
   columnas no cabe a lado y lado sin quedar apretujada, y el bloque
   alineado hace de pie de la tablilla. */
.entry__sign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: auto;                       /* la firma, siempre al fondo */
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid var(--line);
  text-align: left;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.entry__who {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--fg);
  font-weight: 500;
}
.entry__meta { color: var(--fg-3); font-weight: 400; }

.entry__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 3px;
  color: var(--gold);
  border-bottom: 1px solid rgba(140, 96, 32, .28);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.entry__link svg { width: 10px; height: 10px; transition: transform .4s var(--ease); }
.entry__link:hover { color: var(--gold-2); border-color: var(--gold-2); }
.entry__link:hover svg { transform: translate(2px, -2px); }

/* ===========================
   CONTACTO
=========================== */
.footer { position: relative; }

/* Moldura de dentículos */
.dentils {
  height: 10px;
  background:
    repeating-linear-gradient(90deg,
      var(--stone-3) 0 8px,
      transparent 8px 16px);
  border-top: 1px solid var(--stone-ln);
  border-bottom: 1px solid var(--stone-ln);
  opacity: .75;
}

.footer__inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}

.footer__line {
  font-size: clamp(17px, 2vw, 22px);
  color: var(--fg-2);
  margin: 0;
}
.footer__line em { color: var(--fg); }

.footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 14px 40px -16px rgba(28, 18, 8, .6);
  transition: transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
  white-space: nowrap;
}
.footer__cta svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.footer__cta:hover {
  background: var(--fg-2);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 22px 54px -18px rgba(28, 18, 8, .7);
}
.footer__cta:hover svg { transform: translate(3px, -3px); }

/* Mapa del sitio en el pie. Cuatro columnas que colapsan a dos y luego a
   una; el mismo tono apagado del resto del pie, sin robarle peso al CTA. */
.footer__cols {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 0 var(--pad) clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: clamp(20px, 2.2vw, 36px);
  border-top: 1px solid var(--line);
  padding-top: clamp(32px, 4vw, 48px);
}
@media (max-width: 1080px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px)  { .footer__cols { grid-template-columns: 1fr; } }

.footer__eye {
  display: block;
  margin-bottom: 12px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.footer__note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-3);
  max-width: 34ch;
}
.footer__cols ul { list-style: none; margin: 0; padding: 0; }
.footer__cols li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.footer__cols a { color: var(--fg-2); transition: color .4s var(--ease); }
.footer__cols a:hover { color: var(--gold); }

.footer__base {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 0 var(--pad) 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.footer__base a { transition: color .4s var(--ease); }
.footer__base a:hover { color: var(--fg); }

/* ===========================
   REVELADO
=========================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ===========================
   EL DIAGNÓSTICO — tres casos, antes de ofrecer nada
=========================== */
.diagnosis__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: start;
}

.diagnosis__case {
  position: relative;
  padding-left: 22px;
  border-left: 1px solid var(--line-2);
}
/* La comilla de apertura, grabada en el margen: marca que lo que viene es
   algo que dice el cliente, no yo. */
.diagnosis__case::before {
  content: "";
  position: absolute;
  left: -1px; top: 0;
  width: 2px; height: 34px;
  background: var(--gold);
  opacity: .6;
}

.diagnosis__q {
  display: block;
  margin-bottom: 12px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.25;
  color: var(--fg);
}

.diagnosis__case p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--fg-3);
}
.diagnosis__case a {
  color: var(--fg-2);
  border-bottom: 1px solid rgba(140, 96, 32, .35);
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.diagnosis__case a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.diagnosis__coda {
  margin: clamp(30px, 3.4vw, 44px) auto 0;
  max-width: 60ch;
  text-align: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--fg-2);
}

@media (max-width: 860px) {
  .diagnosis__grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ===========================
   CÓMO TRABAJO — los cuatro pasos y la linde
=========================== */
.proceso {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  counter-reset: paso;
}

.proceso__paso {
  position: relative;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}

.proceso__no {
  display: block;
  margin-bottom: 10px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--gold);
}

.proceso__titulo {
  margin: 0 0 8px;
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.proceso__paso p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.66;
  color: var(--fg-3);
}

/* La linde: dos columnas enfrentadas, la de la derecha en hueco. Decir a
   quién no sirvo es lo que más confianza genera, así que se ve igual. */
.linde {
  margin-top: clamp(44px, 5vw, 68px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 36px);
}

.linde__col {
  padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
}
.linde__col--si {
  background: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .26));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
}
.linde__col--no {
  background: transparent;
  border-style: dashed;
}

.linde__eye {
  display: block;
  margin-bottom: 16px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.linde__col--si .linde__eye { color: var(--gold); }

.linde ul { margin: 0; padding-left: 18px; }
.linde li {
  margin-bottom: 11px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
}
.linde--no li { color: var(--fg-3); }
.linde a { color: var(--gold); border-bottom: 1px solid rgba(140, 96, 32, .3); }

@media (max-width: 980px) {
  .proceso { grid-template-columns: 1fr 1fr; row-gap: 30px; }
}
@media (max-width: 620px) {
  .proceso { grid-template-columns: 1fr; }
  .linde { grid-template-columns: 1fr; }
}

/* ===========================
   PREGUNTAS — plegables, sin JS
=========================== */
.faq {
  width: min(100%, 780px);
  margin: 0 auto;
  border-top: 1px solid var(--line-2);
}

.faq__item { border-bottom: 1px solid var(--line-2); }

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  position: relative;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--fg);
  transition: color .2s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold); }

/* Una cruz que se convierte en raya al abrir */
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 13px; height: 1px;
  background: var(--gold);
  transform: translateY(-50%);
}
.faq__item summary::before {
  content: "";
  position: absolute;
  right: 12px; top: 50%;
  width: 1px; height: 13px;
  background: var(--gold);
  transform: translateY(-50%);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.faq__item[open] summary::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }

.faq__item p {
  margin: 0 0 24px;
  padding-right: 40px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--fg-3);
}
.faq__item a { color: var(--fg-2); border-bottom: 1px solid rgba(140, 96, 32, .35); }
.faq__item a:hover { color: var(--gold); }

/* ===========================
   LA PLANTA — el plano que se lee
   Cuatro alas de piedra clara. Reutilizan el gesto de las tablillas del
   oficio (filete de color arriba a la izquierda, papel sobre crema) para
   que el índice no parezca pegado de otro sitio.
=========================== */
.planta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  align-items: start;
}

.ala {
  position: relative;
  padding: clamp(24px, 2.8vw, 34px) clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 28px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .26));
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
              0 18px 30px -26px rgba(28, 18, 8, .5);
}
.ala::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: clamp(48px, 7vw, 74px);
  height: 2px;
  background: rgb(var(--accent, 140 96 32));
  opacity: .55;
}

/* El ala del cuaderno cruza las tres columnas: no es una casa, es la
   estantería del fondo. */
.ala--wide { grid-column: 1 / -1; }

.ala__no {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 12px;
}

.ala__title {
  margin: 0 0 10px;
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.ala__title a {
  border-bottom: 1px solid transparent;
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.ala__title a:hover { color: var(--gold); border-bottom-color: rgba(140, 96, 32, .4); }

.ala__lead {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--fg-3);
}

.ala__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.ala__list li { border-bottom: 1px solid var(--line); }
.ala__list a {
  display: block;
  padding: 10px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg-2);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.ala__list a:hover { color: var(--gold); padding-left: 6px; }

.ala__list--row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(18px, 2vw, 30px);
}
.ala__list--row li { border-bottom: none; }

.planta__coda {
  margin: clamp(28px, 3.2vw, 40px) auto 0;
  max-width: 74ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.72;
  color: var(--fg-3);
}
.planta__coda strong { font-weight: 500; color: var(--fg-2); }

@media (max-width: 900px) {
  .planta { grid-template-columns: 1fr 1fr; }
  .ala--wide { grid-column: 1 / -1; }
  .ala__list--row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .planta { grid-template-columns: 1fr; }
  .ala__list--row { grid-template-columns: 1fr; }
  .ala__list--row li { border-bottom: 1px solid var(--line); }
}

/* ===========================
   MOVIMIENTO REDUCIDO
=========================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Sin telón: quien pide menos movimiento entra directo al sitio */
  .intro, .intro__mark { display: none; }
  .page-wash { animation: none; }
  .temple > *, .temple .cols > *, .temple .tg > * { animation: none; opacity: 1; }
  /* Las salas aparecen montadas, sin obra */
  .piece .bay__steps, .piece .col, .piece .pedestal,
  .piece .bay__art, .piece .relic, .piece .bay__crown, .piece .plaque { animation: none; opacity: 1; }
  .bay:hover .bay__sweep::after { animation: none; }
  /* El propileo se queda quieto y montado: ni se atraviesa ni amanece */
  .propylon { transform: none; opacity: .94; }
  .propylon__floor, .pcol, .acanthus,
  .propylon__beam, .propylon__jamb { animation: none; opacity: 1; }
  .acanthus { opacity: .82; }
  .cue svg { animation: none; opacity: .7; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .shot { transition: opacity .3s linear; }
  .spot { display: none; }
}