/* ============================================================================
   CASA AZAHAR — EL PATIO
   La home, y sólo la home. UNA idea contada con el scroll: UN DÍA DE VERANO.

   El visitante baja y las horas avanzan —09:15 → 22:10—. La calle arde, la
   casa se cierra a la siesta persiana a persiana, y cuando no queda nadie en
   la balie entra una reserva por la única puerta que no duerme: la web. Al
   caer la tarde el patio revive, y la habitación de octubre ya está guardada.

   ── POR QUÉ ES EL ESPEJO DE LA NOCHE, Y NO OTRA NOCHE ──────────────────────
   El primer proyecto de Mansio (Hotel Voorbeeld) cuenta la MISMA idea con una
   casa de canal a las 03:14: ventanas apagándose, una encendida. Aquí todo
   está invertido a propósito, porque el argumento no es la noche — es el
   mostrador vacío: sur contra norte, mediodía contra madrugada, persianas que
   se CIERRAN contra el sol donde allí se apagaban luces contra la oscuridad,
   una fuente donde allí un canal, y la hora muerta es la siesta. Dos sitios
   del mismo molde que no comparten ni la hora del día.

   ── LA ESCENA, EN MATERIALES ───────────────────────────────────────────────
   Cal (el muro, dos gradientes), teja (la línea del tejado), añil (azulejo,
   macetas, puerta), albero (el zócalo y el suelo), geranio (los puntos rojos
   que Córdoba exige), y una franja de cielo que hace TODO el trabajo de la
   hora: cuatro cielos que se relevan por opacidad, como los tres de la noche.

   ── CÓMO ESTÁ HECHO ────────────────────────────────────────────────────────
   Una sola línea de tiempo (`view-timeline`) y capas que animan SOLO opacity
   y transform. Los materiales son degradados quietos que se rasterizan una
   vez. La luz que recorre el muro (mañana desde la izquierda, mediodía a
   plomo, tarde desde la derecha) son TRES capas estáticas relevándose — el
   mismo truco que nachtlicht/ochtendlicht en la noche, con un acto más.
   Sin scroll-driven animations: seis fases por IntersectionObserver (patio.js).
   Sin JS o con reduced-motion: el póster se queda en LA TARDE (19:45), que es
   la hora más bonita del patio y donde el argumento ya está hecho.

   ── LA GEOMETRÍA (heredada de la noche, que ya se rompió una vez) ──────────
   El lienzo pegajoso NO aporta altura: margin-bottom -100svh; la altura la
   ponen los seis actos (6 × 100svh) más el remate. El tramo `contain` mide
   600svh y cada acto cae en un sexto exacto: 0 · 16,7 · 33,3 · 50 · 66,7 ·
   83,3 %. Todo cuelga de esos seis números.
   ========================================================================= */

/* --- el lienzo ----------------------------------------------------------- */
.patio {
  position: relative;
  padding-bottom: 100svh;      /* el remate: la noche del patio, quieta */
  background: #10233c;
  view-timeline-name: --sol;
  view-timeline-axis: block;

  /* ── LA ESCENA, EN SEIS NÚMEROS ─────────────────────────────────────────
     Todo lo que se apoya en el muro o en el suelo cuelga de estas medidas. */
  --tejalijn: 24%;                          /* la línea del tejado, desde arriba */
  --suelo: 16%;                             /* el suelo, desde abajo             */
  /* ── EL REPARTO DEL CUADRO, EN DOS MEDIDAS QUE SE PERSIGUEN ─────────────
     El ancho del acto no es «26ch» a ojo: es un número que la casa tiene que
     RESPETAR. Medido el 2026-08-14, la columna de texto daba 289 px iguales a
     1280, 1440 y 1920 (la caja del acto cuelga de --breed, que no cambia), y
     la casa de 46vw se comía 49 px de ella por cada lado. De ahí salen los
     doce rojos de meet-scene-contrast: tinta clara sobre cal.
     Ahora la casa se calcula: lo que queda entre las dos columnas de texto,
     menos un pasillo de 26 px, con techo en 500. Si el texto crece, la casa
     se estrecha sola — nunca al revés. */
  --akte-breed: clamp(200px, 26vw, 290px);
  /* la columna de fuera no es sólo el texto: enfrente vive la TARJETA, y es
     más ancha que el acto (340 contra 290). Con la casa calculada sólo contra
     el texto, la tarjeta le pisaba 13 px a 1280 y 20 a 1920 — lo cazó la
     puerta con ojos. Manda la más ancha de las dos. */
  --kolom: max(var(--akte-breed), clamp(300px, 26vw, 340px));
  --casa-breed: max(150px, min(500px,
                   calc(100vw - 2 * (max(var(--marge), (100vw - var(--breed)) / 2)
                                     + var(--kolom) + 26px))));
  /* la arcada: tres arcos; el central es LA PUERTA y es el logotipo a tamaño
     de casa. Su ancho manda sobre el resto — pero NUNCA sobre la casa: tres
     arcos más sus dos huecos miden 3,68 anchos, y a 1920 la cota alta de 210px
     desbordaba el muro y el navegador encogía los arcos por su cuenta (con el
     azulejo, que se mide en --arco-breed, quedándose ancho). El techo real es
     el que cabe. */
  --arco-breed: min(clamp(110px, min(13vw, 20svh), 210px), calc(var(--casa-breed) * .26));
  --arco-hoog: calc(var(--arco-breed) * 1.5);

  /* materiales */
  --cal-hoog:   #f4eede;                    /* el muro donde le da el cielo   */
  --cal-laag:   #ddd2ba;                    /* el muro en sombra              */
  --teja:       #9d4f28;
  --albero:     #cf9c4b;
  --azulejo:    #1f4d7a;
  --geranio:    #c23a2e;
  --blad:       #3e6b45;
  --naranja:    #e8912e;
  --reja:       #23262b;
  --luik:       #46628a;                    /* la persiana, añil desteñido    */
  --gloed-deur: #f7dfae;                    /* la luz que sale de la puerta   */
}

.patio-doek {
  position: sticky; top: 0;
  height: 100svh;
  margin-bottom: -100svh;      /* no aporta flujo: la altura la dan los actos */
  overflow: hidden;
  isolation: isolate;
}

/* --- los cielos: cuatro capas que se relevan ----------------------------- */
/* El cielo es la HORA. De día es cobalto de verdad —un mediodía de Córdoba no
   es celeste— y el texto de los actos es SIEMPRE claro: tinta clara sobre
   cielo hondo, como en la noche del canal. Medido con meet-scene-contrast,
   no estimado.

   ── POR QUÉ LA MAÑANA TAMBIÉN ES HONDA ─────────────────────────────────────
   La primera versión pintaba las 09:15 en celeste pálido y le ponía al acto 1
   tinta oscura, que sobre ese cielo mide 6:1. Pero el texto SE MUEVE: sube con
   el scroll y pasa por debajo de la cabecera, que sobre el patio es una barra
   añil translúcida de 104 px. Ahí la tinta oscura caía a 2,28:1 —dos tercios
   de la vida en pantalla del acto 1 en un móvil—. Dos tintas obligan a dos
   fondos buenos, y uno de los dos siempre se mueve. Así que una sola tinta,
   clara, y un cielo hondo a todas las horas: las 09:15 se cuentan con la luz
   rasante del muro, la sombra larga del suelo y el sello de la hora, no con
   un cielo pálido. Un cielo de verano a las nueve y cuarto en Córdoba tampoco
   es pálido. */
/* Los cielos aguantan HONDOS hasta el 74 %: ahí vive el texto de los actos, y
   la tinta clara necesita cielo oscuro debajo — la misma aritmética que salvó
   el amanecer de la noche del canal. El 74 no es redondo: la tapia empieza en
   el 71 % (100 − suelo 16 − tapia 13) y el claro del horizonte tiene que caer
   DETRÁS de ella, donde no hay nada que leer. Con el horizonte al 52 % el
   párrafo del acto 3 medía 3,75:1 sobre el celeste; medido, no supuesto. */
.cielo { position: absolute; inset: 0; will-change: opacity; }
.cielo-manana { background: linear-gradient(178deg, #1c4874 0%, #26578a 58%, #4d80ad 75%, #e9dcbe 100%); opacity: 1; }
.cielo-dia    { background: linear-gradient(178deg, #17406e 0%, #22548b 58%, #3d76a8 74%, #b9d3e8 100%); opacity: 0; }
.cielo-tarde  { background: linear-gradient(178deg, #2b4562 0%, #43526b 58%, #8a6152 76%, #f2c27c 100%); opacity: 0; }
.cielo-noche  { background: linear-gradient(178deg, #0c1c33 0%, #16304f 56%, #27476b 100%); opacity: 0; }

/* las estrellas de la última hora — pocas: en un patio con guirnalda no se ve
   un planetario */
.estrellas { position: absolute; inset: 0 0 55% 0; width: 100%; height: 45%; opacity: 0; will-change: opacity; }

/* los vencejos: cruzan el cielo en la tarde. Dos trazos, transform y opacidad,
   y a otra cosa — un pájaro que se queda clavado es un móvil de cuna. */
.vencejos { position: absolute; top: 8%; left: 0; right: 0; height: 10%; opacity: 0; will-change: opacity, transform; }
.vencejos i {
  position: absolute; width: 14px; height: 5px;
  border: solid #1c2b3d; border-width: 1.6px 0 0 0; border-radius: 50%;
}
.vencejos i::before {
  content: ''; position: absolute; left: 55%; top: -1.6px; width: 9px; height: 5px;
  border: solid #1c2b3d; border-width: 1.6px 0 0 0; border-radius: 50%;
}
.vencejos i:nth-child(1) { left: 18%; top: 30%; }
.vencejos i:nth-child(2) { left: 34%; top: 62%; transform: scale(.7); }
.vencejos i:nth-child(3) { left: 70%; top: 18%; transform: scale(.85); }

/* ============================================================================
   EL MURO — cal de arriba abajo, con su línea de teja y su zócalo de albero
   ========================================================================= */
/* ── LA CASA NO ES UN TELÓN ──────────────────────────────────────────────
   La primera versión pintaba el muro a sangre completa, y meet-scene-contrast
   la tumbó entera: el texto de los actos caía sobre cal clara — 1:1 en seis
   de los doce puntos. La noche del canal ya había resuelto esta composición:
   el sujeto ESTRECHO en el centro, el cielo a los lados, el texto sobre el
   cielo. Aquí igual: la casa del patio es un bloque centrado, y a los lados
   quedan las tapias bajas — que son exactamente lo que cierra un patio. */
.casa {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: var(--casa-breed);
  bottom: var(--suelo);
  /* La casa se apoya en el suelo y crece hasta la línea del tejado, PERO no
     más alta que ancha por un pelo. Sin el tope, a 1920×1080 salían 408 de
     ancho por 648 de alto: seis ventanas de 48 px y 220 de alto, que no son
     una galería sino unas lamas. Una tapia de patio es más ancha que alta. */
  height: min(calc(100% - var(--suelo) - var(--tejalijn)), calc(var(--casa-breed) * 1.08));
  z-index: 2;
}
.tejado {
  position: absolute; left: -3%; right: -3%; top: -12px;
  height: 14px; z-index: 2;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #b05c30, var(--teja));
  border-bottom: 3px solid #7c3d1e;
  box-shadow: 0 4px 9px rgba(60, 30, 10, .35);
}
.muro {
  position: absolute; inset: 0;
  background:
    /* la cal no es blanco de pantalla: respira — una veladura cálida arriba,
       sombra habitada abajo, y un grano vertical apenas visible */
    radial-gradient(120% 60% at 30% 10%, rgba(255, 250, 235, .5), transparent 60%),
    repeating-linear-gradient(88deg, rgba(120, 100, 70, .025) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--cal-hoog) 0%, #ece3cf 55%, var(--cal-laag) 100%);
  box-shadow: 0 10px 30px -12px rgba(20, 30, 50, .5);
}
/* las tapias: los brazos bajos del patio, de la casa a los bordes. Llevan su
   albero y su sombra, y dejan el cielo libre donde vive el texto. */
.tapia {
  position: absolute; left: 0; right: 0; bottom: var(--suelo);
  height: 13%; z-index: 1;
  background:
    repeating-linear-gradient(88deg, rgba(120, 100, 70, .03) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #efe8d6 0%, var(--cal-laag) 100%);
  box-shadow: inset 0 3px 0 #c9b995, inset 0 -4px 0 rgba(185, 134, 52, .55);
}
/* el zócalo de albero, que es como San Basilio firma sus muros */
.muro::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7%;
  background: linear-gradient(180deg, #d8a854, #b98634);
  box-shadow: 0 -1px 0 rgba(122, 84, 30, .5);
}

/* --- LA GALERÍA ALTA: seis ventanas con reja y persiana ------------------ */
.galeria {
  position: absolute; left: 4%; right: 4%; top: 7%;
  height: 34%;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 4.5%;
}
.ventana {
  position: relative;
  background:
    linear-gradient(114deg, transparent 40%, rgba(180, 205, 230, .16) 50%, transparent 60%),
    linear-gradient(178deg, #31404e, #1d2833);
  box-shadow:
    0 0 0 2px #efe6d2,
    0 -2px 0 1px #d9cdb2,
    0 3px 0 1px #c9b995,
    inset 0 2px 4px rgba(0, 0, 0, .5);
  border-radius: 2px 2px 0 0;
}
/* la reja: hierro delante del vidrio — sin ella esto es Anywhere, no Córdoba */
.ventana::after {
  content: ''; position: absolute; inset: -2% -6% -2% -6%;
  background-image:
    linear-gradient(90deg, transparent calc(25% - .7px), var(--reja) 0 calc(25% + .7px), transparent 0 calc(50% - .7px), var(--reja) 0 calc(50% + .7px), transparent 0 calc(75% - .7px), var(--reja) 0 calc(75% + .7px), transparent 0),
    linear-gradient(180deg, transparent calc(38% - .7px), var(--reja) 0 calc(38% + .7px), transparent 0 calc(72% - .7px), var(--reja) 0 calc(72% + .7px), transparent 0);
  opacity: .75;
}
/* LA PERSIANA. Es la capa de la siesta: se CIERRA contra el sol —donde la
   noche del canal apagaba luces— y vuelve a abrirse con la tarde. Lamas de
   añil desteñido, pintadas una vez; sólo la opacidad viaja. */
.persiana {
  position: absolute; inset: 0; z-index: 1;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 7px),
    linear-gradient(178deg, #567097, var(--luik));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35);
  border-radius: 2px 2px 0 0;
  opacity: 0; will-change: opacity;
}

/* --- LAS MACETAS DE LA GALERÍA — azul añil, geranio encendido ------------ */
/* Córdoba cuelga las macetas EN el muro. Van entre ventana y ventana, dos
   filas desiguales: la regularidad perfecta es de catálogo, no de patio. */
.macetas { position: absolute; left: 4%; right: 4%; top: 46%; height: 12%; }
.macetas i {
  position: absolute; width: clamp(14px, 1.6vw, 24px); aspect-ratio: .9;
  background: linear-gradient(180deg, #2b5c8f, var(--azulejo));
  clip-path: polygon(4% 0, 96% 0, 82% 100%, 18% 100%);
  box-shadow: 0 2px 4px rgba(40, 30, 15, .35);
}
.macetas i::before {
  content: ''; position: absolute; left: 50%; top: -38%; width: 130%; aspect-ratio: 1.9;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 22% 55%, var(--geranio) 0 24%, transparent 25%),
    radial-gradient(circle at 50% 30%, var(--geranio) 0 26%, transparent 27%),
    radial-gradient(circle at 78% 58%, var(--geranio) 0 24%, transparent 25%),
    radial-gradient(circle at 38% 72%, var(--blad) 0 30%, transparent 31%),
    radial-gradient(circle at 66% 76%, var(--blad) 0 30%, transparent 31%);
}
.macetas i:nth-child(1) { left: 13.5%; top: 8% }
.macetas i:nth-child(2) { left: 30.6%; top: 22% }
.macetas i:nth-child(3) { left: 47.8%; top: 4% }
.macetas i:nth-child(4) { left: 64.9%; top: 26% }
.macetas i:nth-child(5) { left: 82.1%; top: 12% }

/* --- LA ARCADA BAJA: tres arcos, y el del centro es LA PUERTA ------------ */
.arcada {
  position: absolute; left: 0; right: 0; bottom: 7%;   /* sobre el zócalo */
  height: 46%;
  display: flex; align-items: flex-end; justify-content: center;
  gap: calc(var(--arco-breed) * .34);
}
.arco {
  position: relative;
  width: var(--arco-breed); height: 92%;
  /* radios elípticos EN PORCENTAJE: la regresión 9 de la noche (el radio
     envenenado en px gigantes) sigue siendo ley aquí */
  border-radius: 50% 50% 0 0 / 46% 46% 0 0;
  background:
    linear-gradient(180deg, rgba(20, 26, 34, .82), rgba(30, 36, 44, .92) 70%);
  box-shadow:
    0 0 0 3px #efe6d2,
    0 -3px 0 2px #ddd1b6,
    inset 0 6px 12px rgba(0, 0, 0, .55);
}
/* la sombra fresca del fondo del arco: dentro se está mejor que fuera, y se
   tiene que VER */
.arco::after {
  content: ''; position: absolute; inset: 8% 12% 0 12%;
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  background: linear-gradient(180deg, rgba(8, 12, 18, .5), transparent 70%);
}
/* LA PUERTA (el arco central): más honda, y con una luz cálida dentro que es
   la recepción — LA QUE NO CIERRA. En la noche del canal este papel lo hacía
   la ventana de arco encendida; aquí lo hace la puerta del patio. */
.arco-c { height: 100%; z-index: 1; }
.puerta-luz {
  position: absolute; inset: 6% 10% 0 10%;
  border-radius: 50% 50% 0 0 / 44% 44% 0 0;
  background:
    radial-gradient(120% 90% at 50% 8%, #fdf3d7, rgba(253, 243, 215, 0) 60%),
    linear-gradient(180deg, var(--gloed-deur), #dfb87a);
  box-shadow: 0 0 46px 8px rgba(247, 223, 174, .38);
  opacity: 0; will-change: opacity;
  transition: box-shadow .6s var(--curve);
}
/* el instante de la reserva: la puerta sube un punto de luz. Nada más — en
   mitad de la siesta tampoco debería pasar nada más. */
.patio-doek.geboekt .puerta-luz { box-shadow: 0 0 68px 14px rgba(247, 223, 174, .55); }
/* el vano de la puerta lleva su cancela de hierro, como el arco de la calle */
.arco-c::before {
  content: ''; position: absolute; inset: 6% 10% 0 10%; z-index: 1;
  border-radius: 50% 50% 0 0 / 44% 44% 0 0;
  background-image:
    repeating-conic-gradient(from 195deg at 50% 30%, rgba(30, 30, 34, .8) 0 1deg, transparent 1deg 22deg),
    linear-gradient(90deg, transparent calc(33% - .8px), rgba(30, 30, 34, .8) 0 calc(33% + .8px), transparent 0 calc(66% - .8px), rgba(30, 30, 34, .8) 0 calc(66% + .8px), transparent 0),
    linear-gradient(180deg, transparent calc(34% - .8px), rgba(30, 30, 34, .8) 0 calc(34% + .8px), transparent 0);
  background-size: 100% 34%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* --- EL AZULEJO DEL NOMBRE ------------------------------------------------
   Donde la casa de canal lleva su gevelsteen tallada, la casa de patio lleva
   su azulejo cocido: el nombre en cal sobre añil, encima de la puerta. Es la
   pieza que el móvil no puede perder — probar-ogen la vigila. */
.azulejo {
  position: absolute; left: 50%; bottom: calc(7% + 46% + 2.5%);
  transform: translateX(-50%);
  /* el azulejo mide como la puerta, pero no baja de 96 px: entre 900 y 1100
     de ancho la casa se queda pequeña —tres columnas no caben— y con el
     ancho atado al arco el nombre de la casa no cabía en su propio azulejo */
  width: clamp(96px, calc(var(--arco-breed) * .92), 180px);
  padding: .4em 0 .46em; text-align: center;
  border-radius: 3px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .12), transparent 40%),
    linear-gradient(180deg, #2b5c8f, var(--azulejo) 60%, #1a4066);
  box-shadow:
    0 0 0 2px #efe6d2,
    0 2px 6px rgba(30, 25, 12, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: clamp(9px, 1.05vw, 14px);
  line-height: 1; z-index: 2;
}
.azulejo span {
  color: #f6f1e2;
  letter-spacing: .34em; text-indent: .34em;
  text-shadow: 0 1px 2px rgba(10, 20, 35, .55);
}
/* su momento: un destello cálido cuando entra la reserva, y otro al encender
   la guirnalda. Fuera de esos dos instantes, quieto. */
.azulejo i {
  position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 232, 180, .45) 50%, transparent 80%);
  opacity: 0; will-change: opacity;
}

/* --- LA LUZ QUE RECORRE EL MURO ------------------------------------------
   Tres rasantes estáticas que se relevan: la mañana entra baja desde la
   izquierda, el mediodía cae a plomo y quema la parte alta, la tarde entra
   honda desde la derecha. Las sombras cambian de lado sin repintar nada. */
.luz { position: absolute; inset: 0; will-change: opacity; }
.luz-manana {
  background:
    linear-gradient(102deg, rgba(255, 214, 150, .42), rgba(255, 214, 150, .08) 48%, rgba(60, 60, 90, .16)),
    linear-gradient(180deg, transparent 60%, rgba(90, 70, 40, .12));
  opacity: 1;
}
.luz-mediodia {
  background:
    linear-gradient(180deg, rgba(255, 250, 230, .5) 0%, rgba(255, 250, 230, .1) 34%, transparent 60%),
    linear-gradient(180deg, transparent 82%, rgba(40, 40, 60, .22) 100%);
  opacity: 0;
}
.luz-tarde {
  background:
    linear-gradient(258deg, rgba(255, 176, 110, .5), rgba(255, 176, 110, .1) 52%, rgba(50, 55, 95, .2)),
    linear-gradient(180deg, transparent 55%, rgba(120, 70, 40, .14));
  opacity: 0;
}
/* LA NOCHE NO ES SÓLO DEL MURO. Las otras tres rasantes viven dentro de la
   casa —es luz que RECORRE UN MURO—, pero la del final tiñe el patio entero:
   el suelo de albero y las tapias no pueden quedarse a mediodía mientras el
   cielo está a las 22:10. Por eso ésta cuelga del lienzo, no del muro, y va
   por encima de todo lo pintado (casa 2, naranjo 3, fuente 4) y por debajo de
   lo que se lee (horas 8, tarjeta 9). */
.luz-noche {
  z-index: 5; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(26, 42, 66, .5), rgba(26, 42, 66, .28) 60%, rgba(16, 26, 44, .45)),
    radial-gradient(60% 40% at 50% 78%, rgba(247, 223, 174, .12), transparent 70%);
  opacity: 0;
}

/* ============================================================================
   EL NARANJO, EL SUELO Y LA FUENTE
   ========================================================================= */
/* El naranjo: tronco, copa a tres masas y sus naranjas. Delante del muro por
   la izquierda, donde la casa de canal tenía la farola — pero ARRIMADO A LA
   CASA, no suelto en el cielo: plantado al 6 % del lienzo, la copa aterrizaba
   encima del párrafo de los actos (1,59:1 sobre verde hoja, medido el
   2026-08-14). El árbol se arrima al muro y la columna de texto queda limpia:
   un patio tiene el naranjo junto a la tapia, no en mitad de la calle. */
.naranjo {
  position: absolute; bottom: calc(var(--suelo) - 2%);
  left: calc(50% - var(--casa-breed) / 2 - clamp(2px, .4vw, 8px));
  /* y no más ancho que un tercio largo de la casa: con 15vw sueltos, a 1280
     la copa llegaba hasta el azulejo y se comía la A de AZAHAR */
  width: min(clamp(96px, 11vw, 170px), calc(var(--casa-breed) * .34));
  height: clamp(180px, 42svh, 420px);
  z-index: 3;
}
.tronco {
  position: absolute; left: 46%; bottom: 0; width: 9%; height: 40%;
  background: linear-gradient(90deg, #7a5533, #563a20);
  border-radius: 3px;
}
/* La copa: tres masas de hoja DENTRO de una silueta recortada. Sin el radio,
   los tres degradados se solapan hasta llenar la caja y el naranjo sale como
   una loseta verde con naranjas — así estuvo hasta que se fotografió. El
   radio asimétrico es lo que hace que parezca un árbol y no un arbusto de
   catálogo: ningún naranjo es simétrico. */
.copa {
  position: absolute; left: 0; right: 0; top: 0; height: 72%;
  border-radius: 48% 52% 44% 56% / 56% 60% 42% 40%;
  background:
    radial-gradient(44% 46% at 30% 66%, #47784f 0 98%, transparent 100%),
    radial-gradient(46% 48% at 72% 62%, #427249 0 98%, transparent 100%),
    radial-gradient(56% 58% at 50% 34%, #3e6b45 0 98%, transparent 100%),
    linear-gradient(150deg, #4a7c52, #35603d);
  filter: none;                      /* nada de filtros: capas quietas */
}
.copa::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 26% 40%, var(--naranja) 0 4.2%, transparent 4.6%),
    radial-gradient(circle at 58% 22%, var(--naranja) 0 4.2%, transparent 4.6%),
    radial-gradient(circle at 78% 52%, var(--naranja) 0 4.2%, transparent 4.6%),
    radial-gradient(circle at 44% 68%, var(--naranja) 0 4.2%, transparent 4.6%),
    radial-gradient(circle at 12% 62%, var(--naranja) 0 4.2%, transparent 4.6%);
}

/* El suelo: chino cordobés — canto rodado en abanico. Dos tramas de puntos a
   dos escalas leen como empedrado sin dibujar mil piedras. */
.suelo {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--suelo);
  z-index: 2;
  background:
    radial-gradient(circle at 8px 6px, rgba(120, 104, 72, .5) 0 2px, transparent 3px),
    radial-gradient(circle at 22px 16px, rgba(150, 132, 96, .4) 0 2px, transparent 3px),
    linear-gradient(180deg, #e3d8bd 0%, #d3c5a4 100%);
  background-size: 30px 22px, 30px 22px, 100% 100%;
  box-shadow: inset 0 2px 5px rgba(90, 70, 40, .25);
}
/* las sombras del suelo: larga por la mañana, mínima al mediodía, larga al
   revés por la tarde — dos capas quietas relevándose */
.solombra { position: absolute; left: 0; right: 0; bottom: 0; height: var(--suelo); z-index: 2; will-change: opacity; }
.solombra-manana {
  background: linear-gradient(94deg, rgba(70, 58, 40, .3) 0 26%, transparent 42%);
  opacity: 1;
}
.solombra-tarde {
  background: linear-gradient(266deg, rgba(60, 52, 60, .32) 0 26%, transparent 42%);
  opacity: 0;
}

/* La fuente: taza baja de piedra con su chorro. A la hora de la siesta es lo
   único que se mueve en todo el cuadro — y eso es exactamente lo que dice el
   acto: la fuente lleva el compás. */
/* Y va DENTRO del patio, no en la esquina del lienzo: al 13 % del borde
   derecho se metía debajo de la tarjeta —que es opaca y va nueve capas por
   encima—, así que la única pieza que se mueve durante la siesta se veía
   justo cuando importa. Ahora se apoya en la casa, un poco a la derecha de la
   puerta, que es donde una fuente está en un patio de verdad. */
.fuente {
  position: absolute; bottom: calc(var(--suelo) * .28);
  left: calc(50% + var(--casa-breed) * .12);
  width: clamp(90px, 11vw, 170px); z-index: 4;
  aspect-ratio: 2.1;
}
.taza {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56%;
  background: linear-gradient(180deg, #b9ac91, #8f8268);
  border-radius: 50% 50% 42% 42% / 68% 68% 100% 100%;
  box-shadow: inset 0 4px 7px rgba(40, 30, 15, .35), 0 3px 6px rgba(40, 30, 15, .3);
}
.taza::before {
  content: ''; position: absolute; left: 7%; right: 7%; top: 6%;
  height: 40%; border-radius: 50%;
  background: linear-gradient(180deg, #3f6f96, #2b567c);
  box-shadow: inset 0 2px 4px rgba(10, 25, 40, .5);
}
.chorro {
  position: absolute; left: 50%; bottom: 42%; width: 3px; height: 62%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(226, 240, 250, .0), rgba(226, 240, 250, .85) 30%, rgba(198, 222, 240, .9));
  border-radius: 2px;
  animation: manar 2.6s ease-in-out infinite;
  will-change: transform;
}
@keyframes manar {
  0%, 100% { transform: translateX(-50%) scaleY(1); }
  50%      { transform: translateX(-50%) scaleY(.88); }
}
.destello {
  position: absolute; left: 30%; right: 30%; top: 34%; height: 14%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(240, 250, 255, .8), transparent 75%);
  animation: titilar 2.6s ease-in-out infinite;
  will-change: opacity;
}
@keyframes titilar {
  0%, 100% { opacity: .35; }
  50%      { opacity: .8; }
}

/* La guirnalda de la cena: una catenaria de puntos cálidos que sólo existe en
   la última hora. Bombillas pintadas; lo único que viaja es la opacidad. */
.guirnalda {
  position: absolute; left: 8%; right: 8%; top: 30%; height: 12%;
  z-index: 4; opacity: 0; will-change: opacity;
  background:
    radial-gradient(circle at 6% 30%, #ffe9b0 0 3px, rgba(255, 233, 176, .3) 5px, transparent 7px),
    radial-gradient(circle at 20% 62%, #ffe9b0 0 3px, rgba(255, 233, 176, .3) 5px, transparent 7px),
    radial-gradient(circle at 34% 82%, #ffe9b0 0 3px, rgba(255, 233, 176, .3) 5px, transparent 7px),
    radial-gradient(circle at 50% 88%, #ffe9b0 0 3px, rgba(255, 233, 176, .3) 5px, transparent 7px),
    radial-gradient(circle at 66% 82%, #ffe9b0 0 3px, rgba(255, 233, 176, .3) 5px, transparent 7px),
    radial-gradient(circle at 80% 62%, #ffe9b0 0 3px, rgba(255, 233, 176, .3) 5px, transparent 7px),
    radial-gradient(circle at 94% 30%, #ffe9b0 0 3px, rgba(255, 233, 176, .3) 5px, transparent 7px);
}

/* --- las horas ------------------------------------------------------------
   El sello de hora, arriba a la izquierda, como en la noche: deja el centro
   al muro. Las seis en tinta clara, porque las seis viven sobre cielo hondo
   (ver los cielos, arriba). El span de las 16:07 lleva data-klok: al
   entrar la reserva salta a 16:08 — el guion del gesto lo hace solo. */
.horas {
  position: absolute; top: clamp(96px, 14svh, 138px);
  display: grid;
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: clamp(1.15rem, 2.6vw, 1.65rem); line-height: 1;
  left: max(var(--marge), calc((100% - var(--breed)) / 2));
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  pointer-events: none; z-index: 8;
}
.horas span { grid-area: 1 / 1; opacity: 0; color: #f2ead9; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); will-change: opacity; }
.horas span.tikt { color: #ffd98a; }   /* el minuto de la reserva, dorado */
.horas span:nth-child(5) { opacity: 1; }   /* el póster sin animación: la tarde */
.horas::after {
  content: ''; position: absolute; left: 0; top: calc(100% + 11px);
  width: clamp(46px, 7vw, 88px); height: 1px;
  background: linear-gradient(90deg, rgba(164, 85, 44, .8), transparent);
}

/* --- los actos ------------------------------------------------------------
   Nunca centrados: el centro es del muro y de la puerta. Tinta clara en los
   seis, porque el texto se mueve y el fondo bueno tiene que serlo a todas las
   horas y también debajo de la cabecera. */
.akten { position: relative; z-index: 2; pointer-events: none; }
.akte {
  min-height: 100svh;
  display: grid; align-content: center;
  padding: 26svh var(--marge) 30svh;
}
.akte > div {
  width: 100%; max-width: 30ch;
  opacity: 0; transform: translateY(24px);
  will-change: opacity, transform;
}
.akte h2 {
  max-width: 16ch;
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  line-height: 1.05; letter-spacing: -.026em;
  color: #f6efe0; text-wrap: balance;
  text-shadow: 0 2px 36px rgba(10, 20, 40, .6);
}
.akte p {
  margin-top: .85em; max-width: 30ch;
  font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.55;
  color: #dcd2c0;
  text-shadow: 0 2px 26px rgba(10, 20, 40, .7);
}
@media (max-width: 899px) {
  /* En el teléfono no hay columnas: hay una franja de cielo arriba y todo lo
     demás debajo. El texto va A LA FRANJA, y por eso baja un punto de tamaño
     — a 360×740 la caja de 209 px se metía bajo la hoja de la tarjeta. */
  .akte { align-content: start; padding: 18svh var(--marge) 8svh }
  .akte h2 { font-size: clamp(1.5rem, 4.8vw, 2.05rem) }
  .akte p { margin-top: .7em; font-size: .95rem; line-height: 1.45 }
}
@media (min-width: 900px) {
  /* EL TEXTO VIVE EN EL CIELO, Y EL CIELO ACABA EN LA TAPIA. Con `12svh` el
     acto se centraba en la pantalla y su última línea caía sobre la tapia y
     el albero: 1,08:1. La banda útil va del sello de la hora (≈17 svh) a la
     línea de la tapia (100 − 16 − 13 = 71 %); estos dos números meten la caja
     dentro de ella con holgura en 800, 900 y 1080 de alto. */
  .akte {
    align-content: center;
    padding: 20svh max(var(--marge), calc((100% - var(--breed)) / 2)) 32svh;
  }
  .akte > div { max-width: var(--akte-breed) }
  .akte-rechts > div { margin-left: auto; text-align: right }
  .akte-rechts h2, .akte-rechts p { margin-left: auto }
}

/* ============================================================================
   EL GESTO DE RESERVA — la tarjeta, junto a la puerta que no duerme
   Cabecera con marca y estado, hilo con su ritmo, y el resguardo con cifras
   tabulares. Lo dispara la clase `geboekt` del guion común: cero JS nuevo.
   La lección del hilo (22 em medidos en las TRES lenguas, no en una) viene
   heredada de la noche con su cicatriz. La tarjeta declara TODA su paleta:
   dentro del patio no se hereda nada.
   ========================================================================= */
.patio-widget {
  position: absolute; left: 50%; top: 34%;
  --uit: -50%;
  transform: translate(var(--uit), 14px);
  width: min(340px, calc(100vw - 2 * var(--marge)));
  background: #fcfaf4;
  border-radius: clamp(16px, 2.2vw, 28px) clamp(16px, 2.2vw, 28px) 10px 10px;
  box-shadow: 0 0 80px 18px rgba(253, 243, 215, .3),
              0 30px 70px -24px rgba(10, 20, 40, .7);
  overflow: hidden; z-index: 9;
  font-size: clamp(11.5px, 1.25vw, 13px); line-height: 1.5;
  opacity: 0; will-change: opacity, transform;
}
.patio-widget .widget-kop {
  background: var(--groen); color: #fff;
  padding: 8px 12px; display: flex; align-items: center; gap: 8px;
  letter-spacing: .04em;
}
.patio-widget .merkje {
  flex: none; width: 19px; height: 19px; border-radius: 6px;
  background: rgba(255, 255, 255, .16);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 12px; line-height: 1;
}
.patio-widget .widget-staat {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-size: .84em; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.patio-widget .widget-staat i { width: 5px; height: 5px; border-radius: 50%; background: #ffd98a; flex: none }
.patio-widget .widget-draad {
  padding: 13px 12px; display: flex; flex-direction: column; gap: 7px;
  line-height: 1.45;
  /* 22 em: la cicatriz de la noche (el remate cortado en dos lenguas de tres
     por reservar a ojo) viaja con el molde. Se midió allí; aquí se re-mide
     con probar-ogen en las tres lenguas, que para eso está. */
  min-height: 22em; justify-content: flex-start;
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 20px);
          mask-image: linear-gradient(0deg, transparent 0, #000 20px);
}
.patio-widget .bel { max-width: 92%; width: fit-content; padding: 6px 10px; background: #efe8d8; color: #362f25; animation: none; }
.patio-widget .bel.gast { background: var(--groen); color: #fff; align-self: flex-end }
.patio-widget .bel.tikt { color: #6d6455 }
.patio-widget .bel.klaar { background: #e2eaf4; color: var(--groen) }

.widget-bon {
  padding: 10px 13px 12px;
  border-top: 1px solid #e6ddc9;
  font-variant-numeric: tabular-nums;
}
.bon-regel {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.2em; padding: 2px 0;
}
.bon-regel span { color: #6d6455; letter-spacing: .04em }
.bon-regel b {
  font-weight: 400; color: #362f25; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(3px);
  transition: opacity .5s var(--curve), transform .5s var(--curve);
}
.bon-regel::after {
  content: '—'; position: absolute; right: 0; bottom: 2px;
  color: #6d6455;
  transition: opacity .3s var(--curve);
}
.patio-doek.geboekt .bon-regel b { opacity: 1; transform: none }
.patio-doek.geboekt .bon-regel::after { opacity: 0 }
.bon-som { margin-top: 5px; padding-top: 7px; border-top: 1px solid #e6ddc9 }
.bon-som b { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.5em; line-height: 1 }
.bon-som::after { font-size: 1.3em }
.bon-voet {
  margin-top: 8px; font-size: .86em; letter-spacing: .03em; color: #6d6455;
  opacity: .4; transition: opacity .5s var(--curve);
}
.patio-doek.geboekt .bon-voet { opacity: 1 }

/* --- la cuenta de la casa (al caer la noche) ----------------------------- */
.oogst {
  position: absolute; top: 26%;
  left: max(var(--marge), calc((100% - var(--breed)) / 2));
  display: grid; gap: clamp(10px, 1.6svh, 18px);
  opacity: 0; z-index: 9; will-change: opacity;
}
.oogst div { display: flex; align-items: baseline; gap: .7em; color: #f4ecdc }
.oogst b {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .5);
}
.oogst span {
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase;
  color: #cfc4ad;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.oogst-noot {
  position: absolute; top: calc(26% + clamp(130px, 18svh, 176px));
  left: max(var(--marge), calc((100% - var(--breed)) / 2));
  width: min(34ch, calc(100vw - 2 * var(--marge)));
  font-size: .74rem; line-height: 1.55; color: #d2c7b1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
  opacity: 0; z-index: 9; will-change: opacity;
}

/* ============================================================================
   EL ESCRITORIO ANCHO — tres columnas, y el centro es del muro
   (el reparto heredado de la noche, que costó nueve versiones):
       IZQUIERDA        CENTRO            DERECHA
       la hora          la puerta con     el acto, arriba
       y de noche,      su azulejo        la tarjeta, abajo
       la cuenta
   ========================================================================= */
@media (min-width: 900px) {
  .patio-widget {
    --uit: 0%;
    left: auto; top: auto;
    right: max(var(--marge), calc((100% - var(--breed)) / 2));
    bottom: clamp(20px, 4svh, 52px);
    width: clamp(300px, 26vw, 340px);
    font-size: 12px;
  }
  .patio-widget .widget-draad { min-height: 21.5em }

  /* el acto 4 cruza a la columna izquierda mientras la tarjeta ocupa la
     derecha — la misma cesión que hizo la noche, por el mismo motivo */
  .akte-rechts:nth-of-type(4) > div { margin-left: 0; margin-right: auto; text-align: left }
  .akte-rechts:nth-of-type(4) h2, .akte-rechts:nth-of-type(4) p { margin-left: 0; margin-right: auto }
}

/* ============================================================================
   LA COREOGRAFÍA — una línea de tiempo, cada capa con su ventana.
   Centros de acto: 0 · 16,7 · 33,3 · 50 · 66,7 · 83,3 %.
   ========================================================================= */
@supports (animation-timeline: view()) {
  .cielo, .estrellas, .vencejos, .horas span, .akte > div,
  .persiana, .puerta-luz, .azulejo i, .luz, .luz-noche, .solombra,
  .guirnalda, .patio-widget, .oogst, .oogst-noot {
    animation-timeline: --sol;
    animation-range: contain 0% contain 100%;
    animation-fill-mode: both;
    animation-timing-function: linear;
  }

  .cielo-manana { animation-name: p-manana }
  .cielo-dia    { animation-name: p-dia }
  .cielo-tarde  { animation-name: p-tarde }
  .cielo-noche  { animation-name: p-noche }
  @keyframes p-manana { 0%,8% { opacity: 1 } 20%,100% { opacity: 0 } }
  @keyframes p-dia    { 0% { opacity: 0 } 14%,54% { opacity: 1 } 68%,100% { opacity: 0 } }
  @keyframes p-tarde  { 0%,54% { opacity: 0 } 68%,80% { opacity: 1 } 92%,100% { opacity: 0 } }
  @keyframes p-noche  { 0%,80% { opacity: 0 } 92%,100% { opacity: 1 } }

  .estrellas { animation-name: p-estrellas }
  @keyframes p-estrellas { 0%,82% { opacity: 0 } 94%,100% { opacity: .9 } }

  /* los vencejos cruzan UNA vez, en la tarde */
  .vencejos { animation-name: p-vencejos }
  @keyframes p-vencejos {
    0%,58% { opacity: 0; transform: translateX(-6vw) }
    64%,72% { opacity: 1 }
    78%,100% { opacity: 0; transform: translateX(7vw) }
  }

  /* LA SIESTA: las persianas se cierran una a una (acto 3) y se abren con la
     tarde. El corazón del espejo: donde la noche apagaba luces, el sur cierra
     contra el sol. Cada ventana tiene su rango; el fotograma es el mismo. */
  .persiana { animation-name: p-siesta }
  @keyframes p-siesta { 0% { opacity: 0 } 10%,82% { opacity: 1 } 96%,100% { opacity: 0 } }
  .galeria .ventana:nth-child(1) .persiana { animation-range: contain 27% contain 62% }
  .galeria .ventana:nth-child(2) .persiana { animation-range: contain 30% contain 63% }
  .galeria .ventana:nth-child(3) .persiana { animation-range: contain 33% contain 64% }
  .galeria .ventana:nth-child(4) .persiana { animation-range: contain 29% contain 65% }
  .galeria .ventana:nth-child(5) .persiana { animation-range: contain 35% contain 66% }
  .galeria .ventana:nth-child(6) .persiana { animation-range: contain 37% contain 67% }

  /* la puerta que no duerme: presente desde la siesta, y ya no se va */
  .puerta-luz { animation-name: p-puerta }
  @keyframes p-puerta { 0%,34% { opacity: 0 } 44%,100% { opacity: 1 } }

  /* el azulejo tiene sus dos momentos: la reserva, y la guirnalda */
  .azulejo i { animation-name: p-azulejo }
  @keyframes p-azulejo {
    0%,45% { opacity: 0 } 51%,57% { opacity: .9 } 64%,88% { opacity: 0 }
    95%,100% { opacity: .5 }
  }

  /* la luz gira: mañana → mediodía → tarde → noche */
  .luz-manana { animation-name: p-luz-manana }
  @keyframes p-luz-manana { 0%,8% { opacity: 1 } 18%,100% { opacity: 0 } }
  .luz-mediodia { animation-name: p-luz-mediodia }
  @keyframes p-luz-mediodia { 0%,10% { opacity: 0 } 20%,52% { opacity: 1 } 64%,100% { opacity: 0 } }
  .luz-tarde { animation-name: p-luz-tarde }
  @keyframes p-luz-tarde { 0%,56% { opacity: 0 } 66%,82% { opacity: 1 } 94%,100% { opacity: 0 } }
  .luz-noche { animation-name: p-luz-noche }
  @keyframes p-luz-noche { 0%,82% { opacity: 0 } 94%,100% { opacity: 1 } }
  .solombra-manana { animation-name: p-luz-manana }
  .solombra-tarde { animation-name: p-luz-tarde }

  .guirnalda { animation-name: p-guirnalda }
  @keyframes p-guirnalda { 0%,84% { opacity: 0 } 93%,100% { opacity: 1 } }

  /* las horas: cada una cubre el tramo de su acto (rejilla de la noche) */
  .horas span:nth-child(1) { animation-name: p-u1 }
  .horas span:nth-child(2) { animation-name: p-u2 }
  .horas span:nth-child(3) { animation-name: p-u3 }
  .horas span:nth-child(4) { animation-name: p-u4 }
  .horas span:nth-child(5) { animation-name: p-u5 }
  .horas span:nth-child(6) { animation-name: p-u6 }
  @keyframes p-u1 { 0%,8% { opacity: 1 } 10%,100% { opacity: 0 } }
  @keyframes p-u2 { 0%,10% { opacity: 0 } 12%,25% { opacity: 1 } 27%,100% { opacity: 0 } }
  @keyframes p-u3 { 0%,27% { opacity: 0 } 29%,42% { opacity: 1 } 44%,100% { opacity: 0 } }
  @keyframes p-u4 { 0%,44% { opacity: 0 } 46%,58% { opacity: 1 } 60%,100% { opacity: 0 } }
  @keyframes p-u5 { 0%,60% { opacity: 0 } 62%,75% { opacity: 1 } 77%,100% { opacity: 0 } }
  @keyframes p-u6 { 0%,77% { opacity: 0 } 79%,100% { opacity: 1 } }

  /* los actos, alrededor de sus centros (rejilla heredada) */
  .akte:nth-of-type(1) > div { animation-name: pa1 }
  .akte:nth-of-type(2) > div { animation-name: pa2 }
  .akte:nth-of-type(3) > div { animation-name: pa3 }
  .akte:nth-of-type(4) > div { animation-name: pa4 }
  .akte:nth-of-type(5) > div { animation-name: pa5 }
  .akte:nth-of-type(6) > div { animation-name: pa6 }
  /* El acto 1 se retira ANTES que los demás, y no por capricho: es el único
     que empieza con el lienzo recién clavado, así que su texto nace ya arriba
     del todo y a los 150 px de scroll se está metiendo debajo de la cabecera.
     Los otros cinco nacen a media pantalla y tienen 280 px de vida limpia. */
  @keyframes pa1 { 0%,3.5% { opacity: 1; transform: none } 7.5%,100% { opacity: 0; transform: translateY(-18px) } }
  @keyframes pa2 { 0%,8%  { opacity: 0; transform: translateY(24px) } 12%,21% { opacity: 1; transform: none } 25%,100% { opacity: 0; transform: translateY(-18px) } }
  @keyframes pa3 { 0%,25% { opacity: 0; transform: translateY(24px) } 29%,38% { opacity: 1; transform: none } 42%,100% { opacity: 0; transform: translateY(-18px) } }
  @keyframes pa4 { 0%,42% { opacity: 0; transform: translateY(24px) } 46%,54% { opacity: 1; transform: none } 58%,100% { opacity: 0; transform: translateY(-18px) } }
  @keyframes pa5 { 0%,58% { opacity: 0; transform: translateY(24px) } 62%,71% { opacity: 1; transform: none } 75%,100% { opacity: 0; transform: translateY(-18px) } }
  @keyframes pa6 { 0%,75% { opacity: 0; transform: translateY(24px) } 79%,88% { opacity: 1; transform: none } 92%,100% { opacity: 0; transform: translateY(-18px) } }

  .patio-widget { animation-name: p-widget }
  @keyframes p-widget {
    0%,40% { opacity: 0; transform: translate(var(--uit), 8px) scale(.86) }
    47%,70% { opacity: 1; transform: translate(var(--uit), 0) scale(1) }
    76%,100% { opacity: 0; transform: translate(var(--uit), -6px) scale(.94) }
  }

  .oogst, .oogst-noot { animation-name: p-oogst }
  @keyframes p-oogst { 0%,86% { opacity: 0 } 93%,100% { opacity: 1 } }
}

/* ============================================================================
   SIN scroll-driven animations, PERO CON JS — seis fases por observador.
   ========================================================================= */
@supports not (animation-timeline: view()) {
  .js .cielo, .js .estrellas, .js .vencejos, .js .horas span, .js .akte > div,
  .js .persiana, .js .puerta-luz, .js .azulejo i, .js .luz, .js .solombra,
  .js .guirnalda, .js .patio-widget, .js .oogst, .js .oogst-noot {
    transition: opacity .8s var(--curve), transform .8s var(--curve);
  }
  .js .patio[data-fase] .cielo-manana { opacity: 0 }
  .js .patio[data-fase="0"] .cielo-manana { opacity: 1 }
  .js .patio[data-fase] .cielo-dia { opacity: 1 }
  .js .patio[data-fase="0"] .cielo-dia,
  .js .patio[data-fase="4"] .cielo-dia,
  .js .patio[data-fase="5"] .cielo-dia { opacity: 0 }
  .js .patio[data-fase] .cielo-tarde { opacity: 0 }
  .js .patio[data-fase="4"] .cielo-tarde { opacity: 1 }
  .js .patio[data-fase] .cielo-noche { opacity: 0 }
  .js .patio[data-fase="5"] .cielo-noche { opacity: 1 }
  .js .patio[data-fase] .estrellas { opacity: 0 }
  .js .patio[data-fase="5"] .estrellas { opacity: .9 }
  .js .patio[data-fase] .vencejos { opacity: 0 }
  .js .patio[data-fase="4"] .vencejos { opacity: 1 }
  .js .patio[data-fase] .horas span { opacity: 0 }
  .js .patio[data-fase="0"] .horas span:nth-child(1),
  .js .patio[data-fase="1"] .horas span:nth-child(2),
  .js .patio[data-fase="2"] .horas span:nth-child(3),
  .js .patio[data-fase="3"] .horas span:nth-child(4),
  .js .patio[data-fase="4"] .horas span:nth-child(5),
  .js .patio[data-fase="5"] .horas span:nth-child(6) { opacity: 1 }
  /* la siesta por fases: cerradas en 2 y 3, abiertas antes y después */
  .js .patio[data-fase] .persiana { opacity: 0 }
  .js .patio[data-fase="2"] .persiana,
  .js .patio[data-fase="3"] .persiana { opacity: 1 }
  /* la puerta, desde la siesta */
  .js .patio[data-fase] .puerta-luz { opacity: 0 }
  .js .patio[data-fase="2"] .puerta-luz, .js .patio[data-fase="3"] .puerta-luz,
  .js .patio[data-fase="4"] .puerta-luz, .js .patio[data-fase="5"] .puerta-luz { opacity: 1 }
  .js .patio[data-fase="3"] .azulejo i { opacity: .9 }
  .js .patio[data-fase="5"] .azulejo i { opacity: .5 }
  /* la luz gira */
  .js .patio[data-fase] .luz-manana, .js .patio[data-fase] .solombra-manana { opacity: 0 }
  .js .patio[data-fase="0"] .luz-manana, .js .patio[data-fase="0"] .solombra-manana { opacity: 1 }
  .js .patio[data-fase] .luz-mediodia { opacity: 0 }
  .js .patio[data-fase="1"] .luz-mediodia, .js .patio[data-fase="2"] .luz-mediodia,
  .js .patio[data-fase="3"] .luz-mediodia { opacity: 1 }
  .js .patio[data-fase] .luz-tarde, .js .patio[data-fase] .solombra-tarde { opacity: 0 }
  .js .patio[data-fase="4"] .luz-tarde, .js .patio[data-fase="4"] .solombra-tarde { opacity: 1 }
  .js .patio[data-fase] .luz-noche { opacity: 0 }
  .js .patio[data-fase="5"] .luz-noche { opacity: 1 }
  .js .patio[data-fase] .guirnalda { opacity: 0 }
  .js .patio[data-fase="5"] .guirnalda { opacity: 1 }
  .js .patio[data-fase="3"] .patio-widget { opacity: 1; transform: translate(var(--uit), 0) scale(1) }
  .js .patio[data-fase="4"] .oogst, .js .patio[data-fase="4"] .oogst-noot,
  .js .patio[data-fase="5"] .oogst, .js .patio[data-fase="5"] .oogst-noot { opacity: 1 }
  .js .akte > div.in-beeld { opacity: 1; transform: none }
}

/* ============================================================================
   EL PÓSTER — reduced-motion: la escena se queda en LA TARDE (19:45), la hora
   más bonita del patio, con todo el texto legible a la vez.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .patio { padding-bottom: 0; view-timeline-name: none }
  .patio *, .akte > div { animation: none !important }
  .patio-doek { position: relative; height: 82svh; margin-bottom: 0 }
  .cielo-manana, .cielo-dia, .cielo-noche, .estrellas, .vencejos { opacity: 0 !important; animation: none !important }
  .cielo-tarde { opacity: 1 !important; animation: none !important }
  .persiana { opacity: 0 !important }
  .puerta-luz { opacity: 1 !important }
  .azulejo i { opacity: .5 !important }
  .luz-manana, .luz-mediodia, .luz-noche, .solombra-manana { opacity: 0 !important }
  .luz-tarde, .solombra-tarde { opacity: 1 !important }
  .guirnalda { opacity: 0 !important }
  .horas span { opacity: 0 !important; animation: none !important }
  .horas span:nth-child(5) { opacity: 1 !important }
  .patio-widget {
    position: relative; left: auto; top: auto; right: auto; bottom: auto;
    margin: 0 auto; opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .oogst, .oogst-noot { opacity: 1 !important; animation: none !important }
  .akte { min-height: 0; padding-block: 6svh }
  /* el naranjo, en un lienzo recortado a 82svh, se salía por arriba */
  .naranjo { height: clamp(150px, 34svh, 300px) }
  .akte > div { opacity: 1 !important; transform: none !important; animation: none !important }
  /* en el póster los actos se apilan sobre un añil de tarde: la misma tinta
     clara que llevan sobre el cielo, sobre un fondo que la aguanta */
  .akten { background: #35516f }
  .chorro, .destello { animation: none !important }
}

/* En el póster ancho la tarjeta vuelve a su columna. Centrada —que es lo que
   necesita el móvil, donde no hay columnas— se plantaba encima de la casa y
   tapaba el azulejo y la puerta: justo las dos piezas que la escena quieta
   tiene que enseñar. */
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .patio-widget {
    position: absolute; left: auto; top: auto; margin: 0;
    right: max(var(--marge), calc((100% - var(--breed)) / 2));
    bottom: clamp(20px, 4svh, 52px);
  }
}

/* SIN JS: el mismo póster de la tarde, con las animaciones APAGADAS (la
   lección de la noche: una animación gana a una declaración normal — se
   apaga, no se tapa). La tarjeta se retira: sin guion no hay conversación,
   y una tarjeta vacía es la «animación amputada» que no queremos. */
html:not(.js) .patio { padding-bottom: 0; view-timeline-name: none }
html:not(.js) .patio-doek { position: relative; height: 76svh; margin-bottom: 0 }
html:not(.js) .patio *, html:not(.js) .akte > div { animation: none !important }
html:not(.js) .akte { min-height: 0; padding-block: 7svh }
html:not(.js) .akte > div { opacity: 1; transform: none }
html:not(.js) .akten { background: #35516f }
html:not(.js) .cielo-manana, html:not(.js) .cielo-dia, html:not(.js) .cielo-noche,
html:not(.js) .estrellas, html:not(.js) .vencejos { opacity: 0 }
html:not(.js) .cielo-tarde { opacity: 1 }
html:not(.js) .persiana { opacity: 0 }
html:not(.js) .puerta-luz { opacity: 1 }
html:not(.js) .azulejo i { opacity: .5 }
html:not(.js) .luz-manana, html:not(.js) .luz-mediodia, html:not(.js) .luz-noche,
html:not(.js) .solombra-manana, html:not(.js) .guirnalda { opacity: 0 }
html:not(.js) .luz-tarde, html:not(.js) .solombra-tarde { opacity: 1 }
html:not(.js) .horas span { opacity: 0 }
html:not(.js) .horas span:nth-child(5) { opacity: 1; color: #f2ead9; text-shadow: 0 2px 18px rgba(0, 0, 0, .45) }
html:not(.js) .patio-widget { display: none }
html:not(.js) .oogst, html:not(.js) .oogst-noot { opacity: 1 }

/* ============================================================================
   LA CABECERA DENTRO DEL PATIO — sobre un cielo de mediodía, la barra de cal
   se aclara y pierde el papel: un toldo, no una tapa. Un observador (patio.js)
   pone la clase en los tres navegadores.
   ========================================================================= */
html.in-het-patio .kop {
  background: rgba(18, 38, 62, .55);
  border-bottom-color: rgba(244, 238, 222, .22);
  color: #f2ead9;
}
html.in-het-patio .kop a { color: #f2ead9 }
html.in-het-patio .kop a:hover { color: #fff }
html.in-het-patio .talen [aria-current] { color: #ffd98a }
.kop { transition: background var(--mid) var(--curve), border-color var(--mid) var(--curve), color var(--mid) var(--curve) }

/* --- la costura con la cal ----------------------------------------------- */
.patio-in, .patio-uit { height: 13svh }
.patio-in  { background: linear-gradient(180deg, var(--papier) 0%, #d9dfda 55%, #b9d4ea 100%) }
.patio-uit { background: linear-gradient(180deg, #27476b 0%, #6f7a88 45%, var(--papier) 100%) }

/* --- la apertura y la invitación a bajar --------------------------------- */
.opening { padding-bottom: clamp(48px, 9svh, 110px) }
.opening h1 { max-width: 14ch }
.uitnodiging {
  margin-top: clamp(40px, 8svh, 96px);
  display: flex; align-items: center; gap: .9em;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brons-diep);
}
.uitnodiging svg { color: var(--brons); animation: zakken 2.4s ease-in-out infinite }
@keyframes zakken { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(5px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .uitnodiging svg { animation: none }
}

.ochtend-kop { max-width: 16ch; font-size: clamp(2.2rem, 5.6vw, 3.6rem) }

/* sólo para lectores de pantalla */
.alleen-voor-lezers {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================================
   EL MÓVIL — al final de la hoja, porque estas reglas pisan posiciones de
   arriba con la misma especificidad (la lección heredada, dos veces pagada).
   La tarjeta es una HOJA INFERIOR; el invariante que probar-ogen mide no es
   «cero solape», es: el AZULEJO — el nombre de la casa — entero por encima
   de la tarjeta y dentro de la pantalla.
   ========================================================================= */
@media (max-width: 899px) {
  /* ── EL TELÉFONO NO TIENE COLUMNAS: TIENE FRANJAS ────────────────────────
     Arriba, cielo — y en el cielo vive TODO lo que se lee: la hora, el acto,
     y de noche la cuenta. Debajo, la casa entera de lado a lado. Y al fondo
     la tarjeta, que en un móvil es una hoja inferior de 409 px.
     La casa baja al 46 % por una cuenta, no por gusto: el sello de la hora
     acaba en 14 svh, el acto más largo mide 172 px con este cuerpo, y entre
     los dos ocupan hasta el 38 %. Con la línea del tejado en el 17 % —lo que
     había— el párrafo caía sobre la cal y sobre el tejado: 1,01:1 y 1,86:1,
     medidos. */
  .patio {
    --tejalijn: 46%;
    --suelo: 16%;
    /* la casa ocupa casi el ancho del teléfono: aquí no hay cielo a los lados */
    --casa-breed: min(340px, calc(100vw - 2 * var(--marge)));
    --arco-breed: min(clamp(84px, 25vw, 128px), calc(var(--casa-breed) * .26));
  }
  /* EL AZULEJO SUBE AL ALERO. Encima de la puerta —su sitio de escritorio—
     queda a media casa, y a media casa el teléfono ya está enseñando la
     tarjeta: el nombre de la casa desaparecía bajo la hoja. Arriba del muro
     es igual de cordobés y se ve en los cuatro móviles medidos. */
  .azulejo { bottom: 92%; width: min(calc(var(--casa-breed) * .52), 180px); font-size: 10px }
  .galeria { top: 16%; height: 20%; gap: 0 3% }
  .macetas { display: none }             /* a este ancho serían confeti */
  /* el naranjo no puede crecer hasta el texto: su copa acaba donde empieza
     la casa, no donde acaba el párrafo */
  .naranjo { width: clamp(96px, 26vw, 150px); height: clamp(150px, 34svh, 300px) }
  .fuente { width: clamp(70px, 18vw, 110px) }
  .patio-widget { top: auto; bottom: 0; border-radius: clamp(16px, 2.2vw, 28px) clamp(16px, 2.2vw, 28px) 0 0 }
  /* la cuenta y su nota se quedan las dos EN EL CIELO, una debajo de otra: la
     nota al pie se apoyaba en el albero del suelo —1,39:1— porque en el canal
     ese sitio era agua negra y aquí es tierra clara. */
  .oogst { top: 18%; gap: clamp(6px, 1.1svh, 11px) }
  .oogst div { flex-direction: column; align-items: flex-start; gap: .25em }
  .oogst b { min-width: 0; font-size: clamp(1.45rem, 3.6vw, 1.9rem) }
  .oogst span { font-size: .68rem }
  .oogst-noot {
    top: calc(18% + clamp(155px, 20svh, 185px));
    left: var(--marge); right: var(--marge); width: auto;
  }
}
@media (max-width: 899px) and (max-height: 780px) {
  /* el móvil corto: la tarjeta se lleva 409 de 740 y el cielo se estrecha.
     La casa sube un punto para que el alero con su azulejo siga asomando. */
  .patio { --tejalijn: 44%; --suelo: 15% }
  .oogst { top: 16% }
  .oogst-noot { top: calc(16% + clamp(145px, 21svh, 175px)) }
}