/* =========================================================================
   Holy WINS · sitio «Asís» — un día de piedra y luz
   Móvil primero. Tipografía: Fraunces (SOFT 50, WONK 0) para display y texto,
   Alegreya SC para las inscripciones talladas, Gloock solo en el logotipo.
   ========================================================================= */

:root {
  --negro: #0d0d0c;
  --tinta: #1d1813;
  --tinta-2: #51473c;
  --marfil: #f1e8d6;
  --marfil-claro: #f7f1e6;
  --marfil-sombra: #e6dac4;
  --piedra: #ead8c8;
  --junta: #a89c8c;
  --oro: #c9a35c;
  --oro-claro: #e2c58c;
  --oro-oscuro: #7a5a22;
  --sinopia: #94573a;
  --carmesi: #9b1c24;
  --ocaso: #b76d46;
  --ocaso-noche: #1c1411;
  --marino: #1e2a45;
  --marino-hondo: #141d33;

  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-sc: "Alegreya SC", "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-logo: "Gloock", "Fraunces", Georgia, serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --dintel: 52px;
  --margen: 12px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --sombra-cartela: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -1px 0 rgba(122, 90, 34, .12) inset, 0 0 0 1px rgba(122, 90, 34, .2), 0 2px 4px -2px rgba(46, 28, 14, .25), 0 28px 54px -30px rgba(46, 28, 14, .65);
  --tallado: 1px 1px 0 rgba(255, 251, 242, .95), -.6px -.6px 0 rgba(70, 44, 22, .28);
  color-scheme: light;
}

@view-transition { navigation: auto; }
::view-transition-group(cartela-entrada) { animation-duration: .6s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
.llegada-ruta .cartela--portico { view-transition-name: cartela-entrada; }
.llegada-ruta .entra { animation: none !important; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #ead2c4;
  scroll-padding-top: calc(var(--safe-t) + var(--dintel) + 8px);
}
html.lenis, html.lenis body { height: auto; }
html.modo-movil { scrollbar-width: none; }
html.modo-movil::-webkit-scrollbar { display: none; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
html.indice-abierto { overflow: hidden; }

body {
  margin: 0;
  min-height: 100svh;
  font: 400 1.0625rem/1.58 var(--f-display);
  font-optical-sizing: auto;
  color: var(--tinta);
  background: #ead2c4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

img, svg, canvas, picture { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 .7em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { font-weight: 400; margin: 0; }
i, em { font-style: italic; }
button { font: inherit; color: inherit; }

.sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

:focus-visible { outline: 2px solid #5c1016; outline-offset: 3px; border-radius: 4px; }
.cartela--oscura :focus-visible, .cartela--noche :focus-visible,
body[data-hora="noche"] .dintel :focus-visible { outline-color: var(--oro-claro); }

.saltar {
  position: fixed; z-index: 60; left: 12px; top: calc(var(--safe-t) + 8px);
  padding: 14px 18px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; background: var(--tinta); color: var(--marfil);
  font: 500 15px/1 var(--f-sc); letter-spacing: .06em; border-radius: 999px;
  transform: translateY(calc(-100% - var(--safe-t) - 16px)); transition: transform .3s var(--ease);
}
.saltar:focus { transform: none; }

/* ---------- Fondo fijo: el color de la hora (solo cambia al cruzar de estación) ---------- */
.fondo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: #ead2c4;
  transition: background-color 1.4s var(--ease-io);
}
body[data-hora="manana"] .fondo, body[data-hora="mediodia"] .fondo, body[data-hora="pleno"] .fondo, body[data-hora="manana2"] .fondo { background-color: #efe5d8; }
body[data-hora="tarde"] .fondo { background-color: #e6c39c; }
body[data-hora="ocaso"] .fondo { background-color: #b76d46; }
body[data-hora="noche"] .fondo { background-color: #1e2a45; }
body[data-hora="alba2"] .fondo { background-color: #ead2c4; }
body[data-hora="noche"] { background: #1e2a45; }
body[data-hora="ocaso"] { background: #b76d46; }

/* ---------- Tallado: las letras reciben la luz rasante de la hora ---------- */
.tallado { text-shadow: var(--tallado); transition: text-shadow 1.4s var(--ease-io); }
body[data-hora="alba"] .tallado, body[data-hora="alba2"] .tallado { --tallado: 1.4px .5px 0 rgba(255, 246, 236, .95), -1px -.3px 0 rgba(96, 52, 30, .30); }
body[data-hora="manana"] .tallado, body[data-hora="manana2"] .tallado { --tallado: .8px 1px 0 rgba(255, 252, 244, .95), -.5px -.8px 0 rgba(70, 48, 26, .26); }
body[data-hora="mediodia"] .tallado, body[data-hora="pleno"] .tallado { --tallado: 0 1.2px 0 rgba(255, 253, 246, .98), 0 -.8px 0 rgba(70, 48, 26, .26); }
body[data-hora="tarde"] .tallado { --tallado: -1.2px .8px 0 rgba(255, 244, 226, .95), .8px -.6px 0 rgba(96, 58, 24, .32); }
body[data-hora="ocaso"] .tallado { --tallado: -1.8px .4px 0 rgba(255, 232, 206, .9), 1.1px -.2px 0 rgba(110, 40, 20, .34); }

/* ---------- Dintel (cabecera) ---------- */
.dintel {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  height: calc(var(--safe-t) + var(--dintel));
  padding: var(--safe-t) max(var(--margen), var(--safe-r)) 0 max(var(--margen), var(--safe-l));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--marfil);
  color: var(--tinta);
  box-shadow: 0 1px 0 rgba(122, 90, 34, .28), 0 3px 0 -1px rgba(255, 255, 255, .5), 0 4px 0 -1px rgba(122, 90, 34, .14);
  transition: transform .5s var(--ease), background-color .9s var(--ease-io), color .9s var(--ease-io);
  will-change: transform;
}
.dintel.oculto { transform: translateY(calc(-100% - 6px)); }
.dintel__titulo {
  margin: 0; flex: 1; text-align: center;
  font: 500 14px/1 var(--f-sc); letter-spacing: .14em; color: var(--oro-oscuro);
  opacity: 0; transition: opacity .6s var(--ease);
  display: none;
}
body[data-hora="noche"] .dintel { background: var(--marino); color: var(--marfil); box-shadow: 0 1px 0 rgba(226, 197, 140, .25); }
body[data-hora="noche"] .dintel .hora { border-color: rgba(226, 197, 140, .4); }
body[data-hora="ocaso"] .dintel { background: #f3e2cf; }

.marca {
  display: inline-flex; align-items: baseline; gap: .18em;
  font-family: var(--f-logo); text-decoration: none; line-height: 1;
  min-height: 44px; align-items: center; padding: 0 2px;
  color: inherit; white-space: nowrap;
}
.marca__holy { font-size: 17px; letter-spacing: .01em; }
.marca__wins { font-size: 22px; letter-spacing: .03em; }

.hora {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px 0 10px;
  border: 1px solid rgba(122, 90, 34, .38); border-radius: 999px;
  text-decoration: none; color: inherit;
  font: 500 14px/1 var(--f-sc); letter-spacing: .06em;
  transition: background-color .3s var(--ease), border-color .3s;
  -webkit-tap-highlight-color: transparent;
}
.hora:hover { background: rgba(122, 90, 34, .08); }
.hora:active { transform: scale(.97); }
.hora__nombre { min-width: 4.6em; }
.hora__indice { padding-left: 10px; border-left: 1px solid rgba(122, 90, 34, .35); color: var(--oro-oscuro); }
body[data-hora="noche"] .hora__indice { color: var(--oro-claro); border-color: rgba(226, 197, 140, .35); }

.reloj { width: 30px; height: 30px; overflow: visible; }
.reloj__arco { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 1.5 2.4; opacity: .55; }
.reloj__suelo { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.reloj__sol { transform-origin: 16px 22px; transform: rotate(var(--ang, -70deg)); transition: transform 1.4s var(--ease-io), opacity .8s; }
.reloj__sol circle { fill: var(--oro); stroke: var(--oro-oscuro); stroke-width: .8; }
.reloj__luna { fill: var(--oro-claro); opacity: 0; transition: opacity .8s; }
body[data-hora="alba"] .reloj__sol, body[data-hora="alba2"] .reloj__sol { --ang: -72deg; }
body[data-hora="manana"] .reloj__sol, body[data-hora="manana2"] .reloj__sol { --ang: -38deg; }
body[data-hora="mediodia"] .reloj__sol, body[data-hora="pleno"] .reloj__sol { --ang: 0deg; }
body[data-hora="tarde"] .reloj__sol { --ang: 40deg; }
body[data-hora="ocaso"] .reloj__sol { --ang: 76deg; }
body[data-hora="noche"] .reloj__sol { --ang: 110deg; opacity: 0; }
body[data-hora="noche"] .reloj__luna { opacity: 1; }

/* ---------- Escenario fijo (sticky): póster, estampas y lienzo ---------- */
.recorrido { position: relative; }
.escenario {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden;
  contain: layout paint;
}
/* anclaje del hero (manifest.hero.movil): la luneta mide --fw de ancho y su clave queda a --ft del borde de arriba.
   Lo comparten la página, el paseo (su vídeo y su póster final) y la cubierta de llegada: así coinciden siempre. */
.escenario, .paseo, html.paseo-llegada--poster::after {
  --ft: calc(var(--safe-t) + var(--dintel) + 40px);
  --reserva: 268px;
  --fw: max(60vw, min(72vw, calc((100vh - var(--ft) - var(--reserva)) / 1.3852)));
}
@supports (height: 100svh) {
  .escenario, .paseo, html.paseo-llegada--poster::after {
    --fw: max(60vw, min(72vw, calc((100svh - var(--ft) - var(--reserva)) / 1.3852)));
  }
}
.poster {
  position: absolute;
  width: calc(var(--fw) / .6);
  aspect-ratio: 1 / 2;
  left: calc(50% - var(--fw) / 1.2);
  top: calc(var(--ft) - .25 * var(--fw));
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.poster picture, .poster__img { width: 100%; height: 100%; }
.poster__img { object-fit: cover; }
.lienzo {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  opacity: 0; transition: opacity .5s var(--ease);
  touch-action: pan-y;
}
.poster { z-index: 2; }
.escena-lista .lienzo { opacity: 1; }
.escena-lista .poster picture { opacity: 0; transition: opacity .6s var(--ease); }
.escena-lista .poster { visibility: hidden; }

.cortinilla {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0; transition: opacity .42s var(--ease-io);
}
.cortinilla.on { opacity: 1; transition-duration: .28s; }

.velo {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to top, rgba(42, 26, 14, .16), transparent 34%);
}

/* Modo estampas (tier 0, reduced-motion, pausa, contexto perdido) */
.estampas { position: absolute; inset: 0; z-index: 3; display: none; }
.estampas-on .estampas { display: block; }
.estampas-on .lienzo { display: none; }
.estampas img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  opacity: 0; transition: opacity .2s linear;
}
.estampas img.activa { opacity: 1; }
@media (max-aspect-ratio: 682/1000) {
  .estampas img {
    bottom: auto; height: auto; aspect-ratio: 750 / 1100;
    -webkit-mask-image: linear-gradient(#000 80%, transparent);
    mask-image: linear-gradient(#000 80%, transparent);
  }
}
.estampas-on .escenario[data-estampa="s0_poster_movil"] .estampas img { opacity: 0; }
.estampas-on .escenario:not([data-estampa="s0_poster_movil"]) .poster { opacity: 0; visibility: hidden; }
.estampa-llama {
  position: absolute; width: 18px; height: 30px; margin: -30px 0 0 -9px;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, #fff8e0 0 18%, #ffd27a 38%, rgba(255, 150, 50, .55) 62%, transparent 72%);
  filter: blur(.3px); opacity: 0; transform: scale(.2); transform-origin: 50% 100%;
  transition: opacity .6s, transform .9s var(--ease);
  pointer-events: none;
}
.estampa-llama::after {
  content: ""; position: absolute; left: 50%; top: 55%; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 120, .35), transparent 65%);
}
.vela-encendida .estampa-llama { opacity: 1; transform: scale(1); animation: titila 2.6s ease-in-out infinite alternate; }
@keyframes titila { 0% { transform: scale(1) skewX(0); } 40% { transform: scale(.94, 1.05) skewX(2deg); } 100% { transform: scale(1.03, .97) skewX(-1.5deg); } }

/* ---------- Secciones sobre el escenario ---------- */
.recorrido > section, .recorrido > .aire { position: relative; z-index: 1; }
.aire { height: 56vh; height: 56svh; pointer-events: none; }
.aire--corto { height: 42vh; height: 42svh; }
.aire--final { height: 52vh; height: 52svh; }

.portico {
  margin-top: -100vh; margin-top: -100lvh;
  height: 100vh; height: 100svh;
  pointer-events: none;
}
.portico .cartela { pointer-events: auto; }

/* ---------- Cartela: piedra marfil sólida, arco rebajado ---------- */
.cartela {
  position: relative;
  isolation: isolate;
  /* marfil con luz cenital, una estrella de oro de ocho puntas como clave (la de la bóveda) y grano de piedra */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-9 1.6-3.9 6.4-6.4 3.9-1.6 9 0 3.9 1.6 6.4 6.4 1.6 3.9 0 9-1.6 3.9-6.4 6.4-3.9 1.6-9 0-3.9-1.6-6.4-6.4-1.6-3.9Z' fill='%23b8923f' stroke='%237a5a22' stroke-width='.6'/%3E%3Ccircle r='1.4' fill='%23f4e2b0'/%3E%3C/svg%3E") 50% 0 / 15px 15px no-repeat,
    radial-gradient(120% 60% at 50% 0%, rgba(255, 252, 244, .7), transparent 62%),
    linear-gradient(180deg, #f6efe2 0%, var(--marfil) 48%, #ebdec6 100%);
  color: var(--tinta);
  padding: 22px 20px 20px;
  border-radius: 28px 28px 6px 6px / 14px 14px 6px 6px;
  box-shadow: var(--sombra-cartela);
}
/* doble filete: oro y, dentro, un hilo de luz (como una moldura dorada de retablo) */
.cartela::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(166, 124, 52, .45);
  box-shadow: inset 0 0 0 2px rgba(255, 250, 236, .55), inset 0 0 0 3px rgba(166, 124, 52, .16);
  border-radius: 24px 24px 3px 3px / 11px 11px 3px 3px;
}
/* grano de piedra pulida, muy tenue */
.cartela::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: .16; mix-blend-mode: multiply;
}
.cartela > * { position: relative; }
.cartela p:not(.inscripcion):not(.nota) { max-width: 38em; }

.inscripcion {
  display: flex; align-items: baseline; gap: 10px; text-wrap: balance;
  margin: 0 0 10px;
  font: 500 13.5px/1.25 var(--f-sc);
  letter-spacing: .1em;
  color: var(--oro-oscuro);
}
.inscripcion .num {
  font: 400 15px/1 var(--f-display);
  letter-spacing: .08em; color: var(--sinopia);
  display: inline-flex; align-items: center; gap: 10px;
}
.inscripcion .num::after { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .55; }
.inscripcion .num--claro { color: inherit; }

.titulo {
  font: 400 clamp(32px, 8.6vw, 44px)/1.02 var(--f-display);
  letter-spacing: -.012em;
  margin: 0 0 12px;
  text-wrap: balance;
  color: var(--tinta);
}
.subtitulo {
  font: 400 23px/1.16 var(--f-display);
  letter-spacing: -.005em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.subtitulo span { display: block; margin-top: 4px; font: 500 13.5px/1.2 var(--f-sc); letter-spacing: .08em; color: var(--oro-oscuro); }
.nota { font: italic 400 15px/1.45 var(--f-display); color: var(--tinta-2); }
.cartela .nota { margin-top: 10px; }

.cartela--oscura, .cartela--noche { background-repeat: no-repeat; }
.cartela--oscura::after, .cartela--noche::after { mix-blend-mode: screen; opacity: .07; }
.cartela--oscura { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-9 1.6-3.9 6.4-6.4 3.9-1.6 9 0 3.9 1.6 6.4 6.4 1.6 3.9 0 9-1.6 3.9-6.4 6.4-3.9 1.6-9 0-3.9-1.6-6.4-6.4-1.6-3.9Z' fill='%23d8b26a'/%3E%3C/svg%3E") 50% 0 / 15px 15px no-repeat, linear-gradient(180deg, #2a1e18, var(--ocaso-noche)); color: var(--marfil); box-shadow: 0 0 0 1px rgba(226, 197, 140, .14), 0 26px 50px -30px rgba(0, 0, 0, .7); }
.cartela--oscura::before { border-color: rgba(226, 197, 140, .3); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2), inset 0 0 0 3px rgba(226, 197, 140, .1); }
.cartela--oscura .inscripcion, .cartela--noche .inscripcion { color: var(--oro-claro); }
.cartela--oscura .inscripcion .num, .cartela--noche .inscripcion .num { color: #e9b9a0; }
.cartela--oscura .titulo, .cartela--noche .titulo { color: var(--marfil); }
.cartela--oscura .nota, .cartela--noche .nota { color: #d8ccb6; }
.cartela--noche { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-9 1.6-3.9 6.4-6.4 3.9-1.6 9 0 3.9 1.6 6.4 6.4 1.6 3.9 0 9-1.6 3.9-6.4 6.4-3.9 1.6-9 0-3.9-1.6-6.4-6.4-1.6-3.9Z' fill='%23e2c58c'/%3E%3C/svg%3E") 50% 0 / 15px 15px no-repeat, linear-gradient(180deg, #24335a, var(--marino)); color: var(--marfil); box-shadow: 0 0 0 1px rgba(226, 197, 140, .16), 0 26px 50px -30px rgba(0, 0, 0, .7); }
.cartela--noche::before { border-color: rgba(226, 197, 140, .32); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15), inset 0 0 0 3px rgba(226, 197, 140, .1); }
.cartela--noche .inscripcion .num { color: var(--oro-claro); }

.cartela--cita blockquote { margin: 0; }
.cartela--cita blockquote p { font: italic 400 25px/1.24 var(--f-display); letter-spacing: -.005em; text-wrap: balance; }
.cartela--cita figcaption, .frase figcaption { margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--tinta-2); }
.autor { display: block; margin-bottom: 2px; font: 500 14px/1.2 var(--f-sc); letter-spacing: .1em; color: var(--oro-oscuro); }

.cartela--milagro { background: var(--marfil-claro); }

/* Botón principal y enlaces */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 0 22px 0 24px;
  background: var(--tinta); color: var(--marfil);
  border-radius: 999px; text-decoration: none;
  font: 500 16px/1 var(--f-sc); letter-spacing: .08em;
  transition: background-color .35s var(--ease), transform .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.boton:hover { background: #3a2a1d; }
.boton:hover svg { transform: translateY(3px); }
.boton:active { transform: scale(.98); }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: 500 15px/1 var(--f-sc); letter-spacing: .08em; color: var(--oro-oscuro);
  text-decoration: none; border-bottom: 1px solid rgba(122, 90, 34, .35);
}
.enlace-flecha::after { content: "→"; font-family: var(--f-display); transition: transform .35s var(--ease); }
.enlace-flecha:hover::after { transform: translateX(4px); }
.enlace-flecha--atras::after { content: none; }
.enlace-flecha--atras::before { content: "←"; font-family: var(--f-display); transition: transform .35s var(--ease); }
.enlace-flecha--atras:hover::before { transform: translateX(-4px); }

/* «Leer más» (aria-expanded) */
.mas { display: none; }
.js .mas.mas-lista {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin: 6px 0 0; padding: 0 2px;
  background: none; border: 0; cursor: pointer;
  font: 500 14.5px/1 var(--f-sc); letter-spacing: .08em; color: var(--oro-oscuro);
  -webkit-tap-highlight-color: transparent;
}
.mas__icono { position: relative; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; }
.mas__icono::before, .mas__icono::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.2px; background: currentColor; transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.mas__icono::after { transform: translate(-50%, -50%) rotate(90deg); }
.mas[aria-expanded="true"] .mas__icono::after { transform: translate(-50%, -50%) rotate(0deg); }
.js .mas.mas-lista + .mas__cuerpo { display: grid; grid-template-rows: 0fr; visibility: hidden; }
.js .mas.mas-lista + .mas__cuerpo > div { overflow: hidden; min-height: 0; }
.js .mas.mas-lista + .mas__cuerpo > div > :first-child { padding-top: 8px; }
.js .mas.mas-lista[aria-expanded="true"] + .mas__cuerpo { grid-template-rows: 1fr; visibility: visible; }

/* ---------- Hero / pórtico ---------- */
.cartela--portico {
  position: absolute;
  left: var(--margen); right: var(--margen);
  bottom: calc(var(--margen) + var(--safe-b));
  padding: 18px 20px 18px;
  text-align: left;
}
.portico .inscripcion { margin-bottom: 6px; }
.portico__titulo {
  font: 400 clamp(34px, 9.6vw, 46px)/.98 var(--f-display);
  letter-spacing: -.02em;
  margin: 0;
}
.portico__san { font-style: italic; }
.portico__anos {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 12px;
  font: 400 21px/1 var(--f-display); letter-spacing: .02em;
  color: var(--oro-oscuro);
  font-variant-numeric: lining-nums;
}
.raya { width: 34px; height: 1px; background: currentColor; opacity: .7; }
.portico__cita { margin: 0 0 14px; }
.portico__cita blockquote { margin: 0; }
.portico__cita blockquote p { font: italic 400 19.5px/1.24 var(--f-display); margin: 0; text-wrap: balance; }
.portico__cita figcaption { margin-top: 4px; font: 500 13px/1.2 var(--f-sc); letter-spacing: .1em; color: var(--tinta-2); }
.portico__pista { display: none; }
.cartela--portico .boton { width: 100%; }

/* Entrada del hero (el texto es visible sin JS: solo se anima con JS y movimiento) */
@media (prefers-reduced-motion: no-preference) {
  .js .entra { animation: entra 1s var(--ease) both; animation-delay: calc(.15s + var(--i, 0) * .08s); }
  /* el orden de entrada va en data-i (no en style="--i:N": la CSP no admite estilos en línea) */
  .entra[data-i="1"] { --i: 1; } .entra[data-i="2"] { --i: 2; } .entra[data-i="3"] { --i: 3; }
  .entra[data-i="4"] { --i: 4; } .entra[data-i="5"] { --i: 5; }
}
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-height: 700px) and (max-aspect-ratio: 1/1) {
  .escenario, .paseo, html.paseo-llegada--poster::after { --reserva: 214px; --ft: calc(var(--safe-t) + var(--dintel) + 30px); }
  .cartela--portico { padding: 14px 16px 14px; }
  .portico__titulo { font-size: 31px; }
  .portico__anos { margin: 6px 0 8px; font-size: 18px; }
  .portico__cita blockquote p { font-size: 17px; }
  .portico__cita { margin-bottom: 10px; }
  .portico .inscripcion { display: none; }
  .cartela--portico .boton { min-height: 46px; }
}

/* ---------- Estación (A): cartela anclada abajo, zona del pulgar ---------- */
.estacion {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--margen) calc(var(--margen) + var(--safe-b));
}
.estacion > .cartela { position: sticky; bottom: calc(var(--margen) + var(--safe-b)); }
.estacion.lectura-abierta > .cartela,
.estacion.lectura-larga > .cartela { position: relative; bottom: auto; }
@media (max-aspect-ratio: 999/1000) {
  /* Una tarjeta alta se lee en el flujo; antes queda una vista del objeto. */
  .estacion.lectura-larga { padding-top: 42svh; }
}
/* La pausa vertical deja salir la cartela anterior antes de cambiar de objeto.
   En apaisado se conserva el ritmo de 115svh definido más abajo. */
.estacion--capilla { min-height: 120vh; min-height: 120svh; }

/* ---------- Relato (B): cartelas que pasan sobre la escena aparcada ---------- */
.relato {
  display: flex; flex-direction: column; gap: 20vh; gap: 20svh;
  padding: 0 var(--margen) 16svh;
}
.cartela--breve { padding-top: 18px; }
.relato--datos { padding-top: 16vh; padding-top: 16svh; }
/* Un relato breve mantiene su escena durante una pantalla completa de lectura. */
.relato--pausa { min-height: 100vh; min-height: 100svh; }
/* Al llegar a una escena narrativa, primero se ve el objeto sobre su introducción. */
@media (max-aspect-ratio: 999/1000) {
  .relato--escena { padding-top: 50vh; padding-top: 50svh; }
}
.dias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12vh; gap: 12svh; }
.dia {
  display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 10px; align-items: baseline;
  padding: 16px 18px 16px 16px;
  background: var(--ocaso-noche); color: var(--marfil);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(226, 197, 140, .14), 0 20px 40px -26px rgba(0, 0, 0, .8);
}
.dia p { margin: 0; font-size: 16.5px; line-height: 1.45; }
.dia__fecha { flex: 0 0 auto; max-width: 100%; font: 400 27px/1.1 var(--f-display); letter-spacing: -.01em; color: var(--oro-claro); overflow-wrap: anywhere; }
.dia > :not(.dia__fecha) { flex: 1 1 12rem; min-width: 0; }
.dia__fecha abbr { text-decoration: none; font: 500 15px/1 var(--f-sc); letter-spacing: .08em; }
.dia__fecha span { display: block; margin-top: 6px; font: 500 13px/1 var(--f-sc); letter-spacing: .1em; color: #cdbf9f; }
.dia--ultimo { background: var(--carmesi); box-shadow: 0 0 0 1px rgba(255, 220, 200, .2), 0 24px 50px -24px rgba(60, 0, 0, .8); }
.dia--ultimo .dia__fecha { color: #fff1e0; }
.dia--ultimo p { font-size: 19px; }
.dias--vida { gap: 9vh; gap: 9svh; }
.dias--vida .dia { background: var(--marfil); color: var(--tinta); box-shadow: var(--sombra-cartela); }
.dias--vida .dia__fecha { color: var(--oro-oscuro); font-size: 30px; font-variant-numeric: lining-nums; }
.dias--vida ul { list-style: none; margin: 0; padding: 0; }
.dias--vida li { font-size: 16px; line-height: 1.45; }
.dias--vida li + li { margin-top: 6px; }
.dias--noche .dia { background: var(--marino); box-shadow: 0 0 0 1px rgba(226, 197, 140, .16), 0 20px 40px -26px rgba(0, 0, 0, .8); }
.dias--noche .dia__fecha { font-size: 24px; }

.hitos { list-style: none; padding: 0; margin: 0 0 6px; }
.hitos li { padding: 8px 0; border-top: 1px solid rgba(122, 90, 34, .2); }
.hitos li:first-child { border-top: 0; padding-top: 0; }
.hitos b, .dias--vida b { font: 500 .9em/1 var(--f-sc); letter-spacing: .04em; color: var(--sinopia); }

/* ---------- Bloque (C): piedra marfil a lo ancho, con arco rebajado ---------- */
.bloque { padding: 0; }
.placa {
  position: relative;
  background: var(--marfil);
  padding: 58px 20px 64px;
  border-radius: 50% 50% 0 0 / 34px 34px 0 0;
  box-shadow: 0 -1px 0 rgba(122, 90, 34, .25), 0 -30px 60px -40px rgba(40, 24, 12, .55);
}
.placa::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 60px; pointer-events: none;
  border: 1px solid rgba(122, 90, 34, .22); border-bottom: 0;
  border-radius: 50% 50% 0 0 / 28px 28px 0 0;
}
.placa::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(rgba(122, 90, 34, .25), rgba(122, 90, 34, .25)) 0 0 / 100% 1px no-repeat, linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) 0 1px / 100% 1px no-repeat;
}
.placa__intro { font-style: italic; color: var(--tinta-2); font-size: 17px; }

.claves {
  margin: 16px 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
}
.claves > div { padding: 11px 0 12px; border-top: 1px solid rgba(122, 90, 34, .26); box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset; }
.claves dt { font: 500 12.5px/1.2 var(--f-sc); letter-spacing: .1em; color: var(--sinopia); margin: 0 0 4px; }
.claves dd { margin: 0; font-size: 16.5px; line-height: 1.3; }
.claves dd span { display: block; margin-top: 3px; font: italic 400 14px/1.3 var(--f-display); color: var(--tinta-2); }
.cartela--datos .mas { margin-top: 2px; }
.datos { margin: 6px 0 0; display: grid; }
.datos > div {
  padding: 14px 0 15px;
  border-top: 1px solid rgba(122, 90, 34, .28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}
.datos dt { font: 500 13.5px/1.2 var(--f-sc); letter-spacing: .1em; color: var(--sinopia); margin: 0 0 5px; }
.datos dd { margin: 0; font-size: 17px; line-height: 1.45; }

/* Frases bajo arcos */
.relato--frases { gap: 14vh; gap: 14svh; }
.frase figure {
  margin: 0; position: relative; text-align: center;
  padding: 60px 20px 22px;
  border-radius: 50% 50% 6px 6px / 100px 100px 6px 6px;
  background: linear-gradient(180deg, #f8f2e7, #efe3cd);
  box-shadow: 0 0 0 1px rgba(122, 90, 34, .22) inset, 0 1px 0 rgba(255, 255, 255, .7), 0 26px 50px -30px rgba(46, 28, 14, .6);
}
.frase figure::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid rgba(122, 90, 34, .18);
  border-radius: 50% 50% 3px 3px / 102px 102px 3px 3px;
}
.frase figure::after {
  content: ""; position: absolute; left: 50%; top: 24px; width: 30px; height: 30px; margin-left: -15px;
  border-radius: 50%; border: 1.2px solid var(--oro); opacity: .9;
}
.frase blockquote { margin: 0; }
.frase blockquote p { font: italic 400 23.5px/1.22 var(--f-display); letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.frase--breve blockquote p { font-size: 34px; }
.frase figcaption { max-width: 30em; margin-left: auto; margin-right: auto; }

/* Mitos: cartelas sobre la aureola */
.mito p { margin: 0; }
.mito span { display: block; margin-bottom: 6px; font: 500 13px/1.2 var(--f-sc); letter-spacing: .1em; }
.mito__se-dice { font: italic 400 22px/1.25 var(--f-display); color: var(--tinta-2); margin-bottom: 14px !important; }
.mito__se-dice span { color: var(--tinta-2); font-style: normal; }
.mito__es span { color: var(--sinopia); }
.mito__es { font-size: 17px; line-height: 1.5; }

/* Clímax */
.estacion--climax { min-height: 132vh; min-height: 132svh; }
.cartela--climax { text-align: left; padding: 22px 22px 22px; }
.climax {
  font: 400 clamp(34px, 9.4vw, 52px)/1.02 var(--f-display);
  letter-spacing: -.02em; margin: 0 0 10px; text-wrap: balance;
}
.climax em { color: var(--oro-oscuro); }

/* Vela */
.cartela--vela { padding-bottom: 18px; }
.vela__ayuda { font-size: 15.5px; color: var(--tinta-2); }
.vela__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 12px; }
.vela {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 22px 0 14px;
  border: 1px solid rgba(122, 90, 34, .45); border-radius: 999px;
  background: var(--marfil-claro); cursor: pointer;
  font: 500 15.5px/1 var(--f-sc); letter-spacing: .06em;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .5s var(--ease), border-color .5s, color .5s;
}
.vela__llama {
  position: relative; width: 26px; height: 36px; display: grid; place-items: end center;
}
.vela__llama::after { content: ""; width: 10px; height: 14px; border-radius: 3px 3px 2px 2px; background: #efe6d4; box-shadow: 0 0 0 1px rgba(122, 90, 34, .35) inset; }
.vela__llama span {
  position: absolute; left: 50%; bottom: 13px; width: 12px; height: 20px; margin-left: -6px;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 74%, #fffbe8 0 20%, #ffcf6e 44%, #f08a2c 70%, transparent 74%);
  transform-origin: 50% 100%;
  transform: scale(calc(.15 + var(--carga, 0) * .85));
  opacity: calc(.2 + var(--carga, 0) * .8);
  transition: transform .25s linear, opacity .25s linear;
}
.vela[aria-checked="true"] { background: var(--tinta); color: var(--marfil); border-color: var(--tinta); }
.vela[aria-checked="true"] .vela__llama span { --carga: 1; animation: titila 2.4s ease-in-out infinite alternate; }

/* ---------- Fuentes, índice al pie y pie ---------- */
.fuentes {
  position: relative; z-index: 2;
  background: var(--marfil);
  padding: 64px 20px 40px;
  border-radius: 50% 50% 0 0 / 34px 34px 0 0;
  box-shadow: 0 -30px 60px -40px rgba(40, 24, 12, .5);
}
.fuentes__interior, .indice-pie, .pie__interior { max-width: 980px; margin: 0 auto; }
.fuentes__intro { color: var(--tinta-2); font-style: italic; }
.fuentes__lista { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: f; }
.fuentes__lista li { counter-increment: f; border-top: 1px solid rgba(122, 90, 34, .25); }
.fuentes__lista a {
  display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: baseline;
  min-height: 52px; padding: 13px 0; text-decoration: none; font-size: 16px; line-height: 1.4;
}
.fuentes__lista a::before { content: counter(f, upper-roman); grid-row: span 2; font: 400 14px/1.4 var(--f-display); color: var(--sinopia); }
.fuentes__lista a > span:not(.fuente__t) { font: 500 13.5px/1.3 var(--f-sc); letter-spacing: .08em; color: var(--oro-oscuro); }
.fuentes__lista a:hover { background: rgba(122, 90, 34, .06); }

.indice-pie { position: relative; z-index: 2; background: var(--marfil); padding: 10px 20px 40px; }
.indice-pie { max-width: none; }
.indice-pie > * { max-width: 980px; margin-left: auto; margin-right: auto; }
.capitulos { list-style: none; margin: 0; padding: 0; }
.capitulos a {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px;
  min-height: 52px; padding: 6px 4px; text-decoration: none;
  border-top: 1px solid rgba(122, 90, 34, .2);
  transition: background-color .3s;
}
.capitulos a:hover { background: rgba(122, 90, 34, .07); }
.cap__num { font: 400 15px/1 var(--f-display); color: var(--sinopia); letter-spacing: .06em; }
.cap__nombre { font-size: 17.5px; }
.cap__hora { font: 500 12.5px/1 var(--f-sc); letter-spacing: .08em; color: var(--oro-oscuro); }
.capitulos a[aria-current="true"] { background: rgba(201, 163, 92, .16); }
.capitulos a[aria-current="true"] .cap__nombre { font-style: italic; }

.pie { position: relative; z-index: 2; background: #e7dcc7; padding: 48px 20px calc(36px + var(--safe-b)); border-top: 1px solid rgba(122, 90, 34, .3); }
.pie__interior { display: grid; gap: 14px; }
.pie__marca .marca__holy { font-size: 26px; }
.pie__marca .marca__wins { font-size: 36px; }
.pie__lema { font: italic 400 22px/1.2 var(--f-display); margin: 0; }
.pie__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding-top: 16px; border-top: 1px solid rgba(122, 90, 34, .25); }
.pie__siguiente { margin: 0; display: flex; align-items: baseline; gap: 10px; color: var(--tinta-2); }
.pie__siguiente .inscripcion { margin: 0; }
.pie__nota { font-size: 14px; color: var(--tinta-2); margin: 6px 0 0; }

/* ---------- Índice (hoja inferior en móvil, panel en escritorio) ---------- */
.indice {
  width: 100%; max-width: 100%; max-height: 100%;
  margin: auto 0 0; padding: 0; border: 0;
  background: transparent; color: var(--tinta);
  overflow: visible;
}
.indice::backdrop { background: rgba(13, 13, 12, .5); }
.indice__hoja {
  max-height: 88svh; overflow: auto; overscroll-behavior: contain;
  background: var(--marfil);
  border-radius: 26px 26px 0 0 / 18px 18px 0 0;
  padding: 10px 18px calc(18px + var(--safe-b));
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .5);
}
.indice[open] .indice__hoja { animation: subir .5s var(--ease); }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.indice__cabeza { position: sticky; top: -10px; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 10px 0 8px; background: var(--marfil); }
.indice__cabeza .inscripcion { margin: 0; }
.indice__cerrar { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(122, 90, 34, .35); border-radius: 50%; background: transparent; cursor: pointer; }
.indice__cerrar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.indice__ajustes { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(122, 90, 34, .3); }

.interruptor {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 56px; padding: 6px 4px; text-align: left;
  background: none; border: 0; cursor: pointer;
}
.interruptor__pista { flex: none; position: relative; width: 48px; height: 28px; border-radius: 999px; background: #d9ccb4; box-shadow: 0 0 0 1px rgba(122, 90, 34, .35) inset; transition: background-color .3s; }
.interruptor__pista span { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .35s var(--ease); }
.interruptor[aria-checked="true"] .interruptor__pista { background: var(--tinta); }
.interruptor[aria-checked="true"] .interruptor__pista span { transform: translateX(20px); }
.interruptor__txt { font-size: 17px; line-height: 1.25; }
.interruptor__txt small { display: block; margin-top: 3px; font-size: 14px; color: var(--tinta-2); }

/* ---------- Lectura visible; entrada breve opcional ----------
   El contenido se ve incluso antes de cargar app.js o si falla IntersectionObserver.
   No se ocultan tarjetas al salir: volver atrás o saltar un capítulo es inmediato. */
.revela, .tarjeta { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.pausa) .entrada-suave { animation: lectura-entra .32s var(--ease); }
}
@keyframes lectura-entra {
  from { opacity: .75; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}

/* =========================================================================
   APAISADO: escritorio, portátil y móvil en horizontal (3D a la derecha)
   ========================================================================= */
@media (min-aspect-ratio: 1/1) {
  :root { --dintel: 58px; --margen: 16px; }
  .dintel { padding-left: max(28px, var(--safe-l)); padding-right: max(20px, var(--safe-r)); }
  .dintel__titulo { display: block; }
  .dintel.scrolled .dintel__titulo, .pag-santo .dintel__titulo { opacity: 1; }
  .marca__holy { font-size: 19px; }
  .marca__wins { font-size: 25px; }

  .escenario {
    --top: calc(var(--safe-t) + var(--dintel));
    --fh: max(min(560px, 70vh), calc(37.5vw + 2px), calc((100vh - var(--top)) / 1.5));
    --ft: calc(var(--top) + (100vh - var(--top) - var(--fh)) / 2);
  }
  @supports (height: 100svh) {
    .escenario {
      --fh: max(min(560px, 70svh), calc(37.5vw + 2px), calc((100svh - var(--top)) / 1.5));
      --ft: calc(var(--top) + (100svh - var(--top) - var(--fh)) / 2);
    }
  }
  .poster {
    aspect-ratio: 16 / 10;
    width: calc(var(--fh) / .6 * 1.6);
    left: auto; right: 0;
    top: calc(var(--ft) - .25 * var(--fh));
  }
  .velo { background: linear-gradient(90deg, rgba(42, 26, 14, .2), transparent 46%); }

  .recorrido > section:not(.portico) {
    width: min(40vw, 560px);
    margin-left: max(5vw, calc(28px + var(--safe-l)));
  }
  .portico { width: auto; }
  .cartela--portico {
    left: max(5vw, calc(28px + var(--safe-l))); right: auto; bottom: auto;
    top: calc(var(--safe-t) + var(--dintel) + (100svh - var(--safe-t) - var(--dintel)) / 2);
    transform: translateY(-50%);
    width: min(36vw, 500px);
    padding: 30px 32px 28px;
  }
  .portico__titulo { font-size: clamp(40px, 4.4vw, 72px); }
  .portico__anos { font-size: clamp(20px, 1.7vw, 26px); margin: 14px 0 18px; }
  .portico__cita blockquote p { font-size: clamp(21px, 2vw, 32px); }
  .portico__cita { margin-bottom: 22px; }
  .portico__pista { display: block; margin: 14px 0 0; font: italic 400 14px/1.3 var(--f-display); color: var(--tinta-2); }
  .cartela--portico .boton { width: auto; }

  .estacion { min-height: 115svh; padding: 0 0 12svh; justify-content: flex-end; }
  .estacion > .cartela { bottom: 12svh; }
  .relato { padding: 0 0 20svh; gap: 30svh; }
  .cartela { padding: 26px 28px 24px; }
  .titulo { font-size: clamp(36px, 3.4vw, 56px); }
  .placa { border-radius: 50% 50% 4px 4px / 40px 40px 4px 4px; padding: 64px 32px 56px; }
  .placa::before { border-radius: 50% 50% 0 0 / 34px 34px 0 0; }

  .estacion--climax { min-height: 140svh; }
  .climax { font-size: clamp(40px, 3.8vw, 64px); }

  .estampas { left: auto; right: 4vw; top: calc(var(--dintel) + 4vh); bottom: 4vh; width: min(52vw, calc((96vh - var(--dintel)) * .682)); }
  .estampas img { object-fit: contain; object-position: 50% 50%; filter: drop-shadow(0 20px 40px rgba(40, 24, 12, .35)); }

  .fuentes { padding: 80px 40px 40px; border-radius: 50% 50% 0 0 / 50px 50px 0 0; }
  .fuentes__lista { columns: 2; column-gap: 40px; }
  .fuentes__lista li { break-inside: avoid; }
  .indice-pie { padding: 10px 40px 60px; }
  .indice-pie .capitulos { columns: 2; column-gap: 40px; }
  .indice-pie .capitulos li { break-inside: avoid; }
  .pie { padding: 56px 40px 48px; }

  .indice { margin: 0 0 0 auto; width: min(440px, 100%); height: 100%; max-height: 100%; }
  .indice__hoja {
    height: 100%; max-height: 100%; border-radius: 0;
    padding: calc(10px + var(--safe-t)) max(24px, var(--safe-r)) max(24px, var(--safe-b)) max(24px, var(--safe-l));
  }
  .indice[open] .indice__hoja { animation: lateral .5s var(--ease); }
}
@keyframes lateral { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Móvil en horizontal (poca altura): cartelas compactas */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  :root { --dintel: 48px; }
  .cartela--portico { padding: 16px 20px; width: min(44vw, 440px); }
  .portico__titulo { font-size: 30px; }
  .portico__anos { margin: 6px 0 8px; font-size: 18px; }
  .portico__cita blockquote p { font-size: 17px; }
  .portico__cita { margin-bottom: 10px; }
  .portico .inscripcion, .portico__pista { display: none; }
  .recorrido > section:not(.portico) { width: min(46vw, 520px); }
  /* La invitación final larga empieza al entrar en la estación, sin un hueco
     que deje su párrafo por debajo de la pantalla horizontal. */
  .estacion--climax.lectura-larga { justify-content: flex-start; }
  .titulo { font-size: 30px; }
  .cartela { padding: 16px 20px; }
}

@media (min-width: 1100px) and (min-aspect-ratio: 1/1) {
  body { font-size: 1.125rem; }
  .datos dd, .dias--vida li, .mito__es { font-size: 18px; }
  .frase blockquote p { font-size: 30px; }
  .frase--breve blockquote p { font-size: 42px; }
}

/* =========================================================================
   PORTADA · el retablo de los trece
   ========================================================================= */
.pag-portada { background: #efe5d8; }
.pag-portada .fondo { background-color: #efe5d8; }
.portada-cabeza {
  padding: calc(var(--safe-t) + 26px) 20px 18px;
  text-align: center;
}
.marca--grande { flex-direction: column; align-items: center; gap: 0; min-height: 0; }
.marca--grande .marca__holy { font-size: clamp(30px, 9vw, 44px); line-height: .9; }
.marca--grande .marca__wins { font-size: clamp(64px, 21vw, 112px); line-height: .86; letter-spacing: .02em; }
.portada-lema { margin: 12px 0 0; font: italic 400 clamp(19px, 5vw, 24px)/1.2 var(--f-display); color: var(--tinta); }
.portada-lema span { display: block; margin-top: 8px; font: 500 12.5px/1 var(--f-sc); font-style: normal; letter-spacing: .16em; color: var(--oro-oscuro); }

.retablo-sec { padding: 0 var(--margen) 30px; }

/* ---------- PORTADA · la ruta por el claustro ---------- */
.ruta { position: relative; height: 340vh; height: 340svh; }
.ruta__poster { position: absolute; inset: 0; z-index: 2; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.ruta__poster img { width: 100%; height: 100%; object-fit: cover; }
.escena-lista .ruta__poster, .casa-lista .ruta__poster { opacity: 0; visibility: hidden; }
/* el lienzo aparece debajo del cartel y el cartel se va cuando el lienzo ya es opaco: sin destello del fondo */
.casa-lista .ruta__poster { transition-delay: .5s, 1.1s; }
.casa-lista .ruta__escenario .lienzo { opacity: 1; }
.poster--ref { visibility: hidden !important; pointer-events: none; }
.captura :is(.ruta__portada, .ruta__pista, .ruta__llegada, .velo, .saltar) { display: none !important; }
.velo--ruta {
  background: radial-gradient(130% 55% at 50% 0%, rgba(10, 14, 32, .5), transparent 62%), linear-gradient(to top, rgba(42, 26, 14, .26), transparent 30%);
  opacity: calc(1 - var(--p, 0) * 2.4);
}
.ruta__portada {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  padding: calc(var(--safe-t) + 34px) 20px 0;
  text-align: center; pointer-events: none;
}
.ruta__portada .marca { pointer-events: auto; color: var(--marfil); text-shadow: 0 2px 26px rgba(8, 12, 28, .55); }
.ruta__portada .portada-lema { color: var(--marfil); text-shadow: 0 1px 16px rgba(8, 12, 28, .7); }
.ruta__portada .portada-lema span { color: var(--oro-claro); }
.ruta__pista {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100vh - 116px); top: calc(100svh - 116px - var(--safe-b));
  display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0;
  font: 500 14px/1 var(--f-sc); letter-spacing: .14em; color: var(--marfil);
  text-shadow: 0 1px 14px rgba(8, 12, 28, .75); pointer-events: none;
  filter: opacity(clamp(0, 1 - var(--p, 0) * 9, 1));
}
.ruta__pista svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: pista 1.9s var(--ease-io) infinite; }
@keyframes pista { 0%, 100% { transform: translateY(-3px); opacity: .55; } 50% { transform: translateY(6px); opacity: 1; } }
.ruta__llegada {
  position: absolute; z-index: 5;
  left: var(--margen); right: var(--margen); bottom: calc(var(--margen) + var(--safe-b));
  padding: 18px 20px 16px;
}
.ruta__llegada.vt { view-transition-name: cartela-entrada; }
.ruta__llegada .inscripcion { margin-bottom: 6px; }
/* cabecera de la llegada: el número del portal y las flechas para pasar de un portal abierto a otro */
.ruta__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ruta__cabecera .inscripcion { margin: 0; }
.portales { display: flex; gap: 8px; flex: none; }
.portales[hidden] { display: none; }
.portales__flecha {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(122, 90, 34, .55); border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fffaf0, #efe2c6); color: var(--oro-oscuro);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.portales__flecha::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }   /* 48 px de toque */
.portales__flecha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portales__flecha:hover { color: var(--tinta); }
.portales__flecha:active { transform: scale(.94); }
.portales__flecha:disabled { opacity: .32; cursor: default; }
.portales__flecha:focus-visible { outline: 2px solid var(--oro-oscuro); outline-offset: 3px; }
/* hasta que se usa, la flecha del siguiente portal llama la atención con un halo de oro que respira */
.portales--nuevo .portales__flecha[data-paso="1"]:not(:disabled) { animation: portal-halo 2.2s var(--ease-io) infinite; }
@keyframes portal-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 163, 92, 0); }
  50% { box-shadow: 0 0 0 6px rgba(201, 163, 92, .38); }
}
.ruta__santo { transition: opacity .32s var(--ease), transform .32s var(--ease); }
/* nombres largos («Francisco de Asís»): en una sola línea, para que la cartela no tape más la luneta */
.ruta__nombre.ruta__nombre--largo { font-size: clamp(27px, 7.5vw, 40px); text-wrap: balance; }
@media (max-height: 700px) and (max-aspect-ratio: 1/1) { .ruta__nombre.ruta__nombre--largo { font-size: 26px; } }
@media (min-aspect-ratio: 1/1) { .ruta__nombre.ruta__nombre--largo { font-size: clamp(34px, 3.3vw, 54px); white-space: normal; } }
.ruta__santo.sale { opacity: 0; transform: translateX(calc(var(--dir, 1) * -18px)); }
.ruta__santo.entra-portal { opacity: 0; transform: translateX(calc(var(--dir, 1) * 18px)); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ruta__santo, .ruta__santo.sale { transition: none; transform: none; }
  .portales--nuevo .portales__flecha[data-paso="1"] { animation: none; }
}
.ruta__nombre { margin: 0; font: 400 clamp(34px, 9.6vw, 46px)/.98 var(--f-display); letter-spacing: -.02em; }
.ruta__nombre i { font-style: italic; }
.ruta__llegada .portico__anos { margin: 8px 0 12px; }
.ruta__llegada .boton { width: 100%; display: flex; flex-direction: row; flex: none; color: var(--marfil); }
.ruta__llegada .boton svg { transform: none; }
.ruta__llegada .boton:hover svg { transform: translateX(3px); }
.ruta__llegada .reloj-solar { width: 100%; margin: 10px 0 0; }
@media (max-height: 700px) and (max-aspect-ratio: 1/1) {
  .ruta__llegada { padding: 14px 16px 12px; }
  .ruta__nombre { font-size: 31px; }
  .ruta__llegada .portico__anos { margin: 6px 0 8px; font-size: 18px; }
  .ruta__llegada .reloj-solar__marcas { display: none; }
}
/* Sin recorrido 3D (sin JS, sin WebGL2, «Pausar movimiento»): una pantalla con el claustro y la llegada */
html:not(.js) .ruta, .sin-ruta .ruta {
  height: auto; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: calc(var(--margen) + var(--safe-b));
}
html:not(.js) .ruta__escenario, .sin-ruta .ruta__escenario { position: absolute; inset: 0; height: 100%; }
html:not(.js) .ruta__pista, .sin-ruta .ruta__pista { display: none; }
html:not(.js) .ruta__llegada, .sin-ruta .ruta__llegada { position: relative; inset: auto; top: auto; transform: none; margin: 46vh var(--margen) 0; margin-top: 46svh; }
html:not(.js) .reloj-solar, .sin-ruta .ruta .reloj-solar { display: none; }
@media (max-height: 760px) and (max-aspect-ratio: 1/1) {
  .portada-cabeza { padding-top: calc(var(--safe-t) + 16px); padding-bottom: 12px; }
  .marca--grande .marca__holy { font-size: 26px; }
  .marca--grande .marca__wins { font-size: 58px; }
  .portada-lema { margin-top: 8px; font-size: 18px; }
  .portada-lema span { margin-top: 6px; }
  .destacado__nombre { font-size: 25px; }
}
.retablo {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  max-width: 520px;
}
.nicho { position: relative; margin: 0; }
.nicho__img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 3px; background: #ddd0bd; box-shadow: 0 0 0 1px rgba(122, 90, 34, .14); }
.nicho__pie { display: block; margin-top: 7px; text-align: center; font: 500 12px/1.2 var(--f-sc); letter-spacing: .08em; color: var(--tinta-2); }
.nicho__pie b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nicho__fechas { display: block; margin-top: 5px; font-size: .88em; letter-spacing: .02em; color: var(--tinta-2); }
/* portal ya abierto (II, san Francisco): enlace con su filete de oro y el nombre en tinta */
.nicho__enlace { display: block; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.nicho--abierto .nicho__img { box-shadow: 0 0 0 1px rgba(166, 124, 52, .55), 0 0 0 4px rgba(226, 197, 140, .25); transition: transform .5s var(--ease); }
.nicho--abierto .nicho__pie { color: var(--tinta); }
.nicho__enlace:hover .nicho__img, .nicho__enlace:focus-visible .nicho__img { transform: translateY(-2px); }
a.pie__siguiente { text-decoration: none; color: var(--tinta); }
a.pie__siguiente:hover { color: var(--oro-oscuro); }

.nicho--destacado { grid-column: 1 / -1; margin-bottom: 18px; }
.destacado { display: block; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.destacado__marco {
  position: relative; overflow: hidden;
  width: min(100%, calc((100svh - 250px) * .8));
  min-width: min(100%, 290px);
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% 6px 6px / 22% 22% 6px 6px;
  background: #e2d3c0;
  box-shadow: 0 0 0 1px rgba(122, 90, 34, .25), 0 30px 60px -36px rgba(46, 28, 14, .65);
  isolation: isolate;
}
.destacado__marco picture, .destacado__marco img { width: 100%; height: 100%; object-fit: cover; }
.destacado__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s var(--ease); touch-action: pan-y; }
.escena-lista .destacado__lienzo { opacity: 1; }
.destacado__rotulo {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px;
  width: min(100%, max(calc((100svh - 270px) * .8), 290px));
  margin: 14px auto 0;
}
.destacado__nombre { font: 400 clamp(26px, 7vw, 34px)/1 var(--f-display); letter-spacing: -.015em; }
.destacado__nombre i { font-style: italic; }
.destacado__meta { grid-column: 1; display: flex; gap: 10px; align-items: center; font: 500 13px/1 var(--f-sc); letter-spacing: .1em; color: var(--oro-oscuro); }
.destacado__meta b { font: 400 15px/1 var(--f-display); color: var(--sinopia); letter-spacing: .06em; }
.destacado__entrar { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.destacado:hover .boton { background: #3a2a1d; }
.destacado:hover .boton svg { transform: translateX(3px); }
.destacado .boton svg { transform: rotate(-90deg); }
.destacado:hover .boton svg { transform: rotate(-90deg) translateY(3px); }

.reloj-solar {
  width: min(100%, max(calc((100svh - 270px) * .8), 290px));
  margin: 18px auto 0; display: grid; gap: 6px;
}
.reloj-solar label { display: flex; justify-content: space-between; align-items: baseline; font: 500 13px/1 var(--f-sc); letter-spacing: .1em; color: var(--oro-oscuro); }
.reloj-solar output { font: italic 400 15px/1 var(--f-display); letter-spacing: 0; color: var(--tinta); }
.reloj-solar input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
}
.reloj-solar input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #f6b892, var(--oro-claro) 30%, var(--oro) 55%, var(--ocaso) 78%, var(--marino)); border-radius: 2px; }
.reloj-solar input[type="range"]::-moz-range-track { height: 2px; background: linear-gradient(90deg, #f6b892, var(--oro-claro) 30%, var(--oro) 55%, var(--ocaso) 78%, var(--marino)); border-radius: 2px; }
.reloj-solar input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -12px; border-radius: 50%; background: radial-gradient(circle, #fffaf0 0 26%, var(--oro) 60%); box-shadow: 0 0 0 1px var(--oro-oscuro), 0 0 16px 4px rgba(201, 163, 92, .45); }
.reloj-solar input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: radial-gradient(circle, #fffaf0 0 26%, var(--oro) 60%); box-shadow: 0 0 0 1px var(--oro-oscuro), 0 0 16px 4px rgba(201, 163, 92, .45); }
.reloj-solar__marcas { display: flex; justify-content: space-between; font: 500 11.5px/1 var(--f-sc); letter-spacing: .08em; color: var(--tinta-2); }
.reloj-solar[hidden] { display: none; }

.retablo__titulo { max-width: 520px; margin: 34px auto 14px; display: flex; align-items: center; gap: 12px; }
.retablo__titulo::before, .retablo__titulo::after { content: ""; flex: 1; height: 1px; background: rgba(122, 90, 34, .35); }
.retablo__titulo .inscripcion { margin: 0; }

.presentacion { padding: 46px 20px 56px; }
.presentacion__interior { max-width: 620px; margin: 0 auto; }
.presentacion p { font-size: 18px; line-height: 1.6; }
.presentacion .titulo { font-size: clamp(30px, 8vw, 46px); }
.presentacion .lista-principios { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 0; }
.lista-principios li { display: grid; grid-template-columns: 38px 1fr; gap: 8px; padding: 14px 0; border-top: 1px solid rgba(122, 90, 34, .25); font-size: 16.5px; }
.lista-principios b { font: 400 15px/1.5 var(--f-display); color: var(--sinopia); letter-spacing: .06em; }

@media (min-aspect-ratio: 1/1) {
  .ruta__portada { text-align: left; padding: calc(var(--safe-t) + 40px) 5vw 0; }
  .ruta__portada .marca--grande { flex-direction: row; align-items: baseline; gap: .2em; }
  .ruta__portada .marca--grande .marca__holy { font-size: clamp(30px, 3vw, 44px); }
  .ruta__portada .marca--grande .marca__wins { font-size: clamp(54px, 5.4vw, 84px); }
  .ruta__portada .portada-lema { text-align: left; margin-top: 10px; font-size: clamp(19px, 1.7vw, 26px); }
  .velo--ruta { background: linear-gradient(100deg, rgba(10, 14, 32, .5), transparent 46%), linear-gradient(to top, rgba(42, 26, 14, .22), transparent 30%); }
  .ruta__pista { align-items: flex-start; left: 5vw; right: auto; }
  .ruta__llegada {
    left: max(5vw, calc(28px + var(--safe-l))); right: auto; width: min(36vw, 500px);
    bottom: auto; top: calc(100% - 50vh); top: calc(100% - 50svh); transform: translateY(-50%);
    padding: 30px 32px 28px;
  }
  .ruta__nombre { font-size: clamp(40px, 4.4vw, 72px); }
  .ruta__llegada .boton { width: auto; display: inline-flex; }
}
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .portada-cabeza { display: flex; align-items: flex-end; justify-content: space-between; text-align: left; padding: calc(var(--safe-t) + 34px) 5vw 26px; }
  .marca--grande { flex-direction: row; align-items: baseline; gap: .2em; }
  .marca--grande .marca__holy { font-size: 40px; }
  .marca--grande .marca__wins { font-size: 64px; }
  .portada-lema { margin: 0 0 8px; text-align: right; font-size: 24px; }
  .retablo-sec { padding: 0 5vw 20px; }
  .retablo {
    max-width: 1500px;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-flow: dense; column-gap: 14px; row-gap: 16px;
  }
  .nicho--destacado { grid-column: 4 / span 2; grid-row: 1 / span 2; margin: 0; }
  .retablo > li:nth-child(2) { grid-column: 1; grid-row: 1; }
  .retablo > li:nth-child(3) { grid-column: 2; grid-row: 1; }
  .retablo > li:nth-child(4) { grid-column: 3; grid-row: 1; }
  .retablo > li:nth-child(5) { grid-column: 1; grid-row: 2; }
  .retablo > li:nth-child(6) { grid-column: 2; grid-row: 2; }
  .retablo > li:nth-child(7) { grid-column: 3; grid-row: 2; }
  .retablo > li:nth-child(8) { grid-column: 6; grid-row: 1; }
  .retablo > li:nth-child(9) { grid-column: 7; grid-row: 1; }
  .retablo > li:nth-child(10) { grid-column: 8; grid-row: 1; }
  .retablo > li:nth-child(11) { grid-column: 6; grid-row: 2; }
  .retablo > li:nth-child(12) { grid-column: 7; grid-row: 2; }
  .retablo > li:nth-child(13) { grid-column: 8; grid-row: 2; }
  .retablo { align-items: stretch; }
  .nicho--destacado { position: relative; display: flex; flex-direction: column; }
  .destacado { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .destacado__marco { flex: 1; width: 100%; min-width: 0; min-height: 0; aspect-ratio: auto; }
  .destacado__rotulo { position: absolute; left: 0; right: 0; width: 100%; margin: 0; }
  .destacado__rotulo { top: calc(100% + 16px); grid-template-columns: 1fr auto; row-gap: 10px; }
  .destacado__nombre { grid-column: 1 / -1; font-size: clamp(24px, 2.1vw, 34px); white-space: nowrap; }
  .destacado__meta { grid-column: 1; grid-row: 2; align-self: center; }
  .destacado__entrar { grid-column: 2; grid-row: 2; min-height: 44px; padding: 0 18px; }
  .retablo-sec { padding-bottom: 140px; }
  .presentacion { padding: 60px 5vw 80px; }
  .presentacion__interior { max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 6vw; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .indice[open] .indice__hoja { animation: none; }
  .vela[aria-checked="true"] .vela__llama span,
  .vela-encendida .estampa-llama { animation: none; }
}

.pausa .indice[open] .indice__hoja { animation: none; }
.pausa .vela[aria-checked="true"] .vela__llama span,
.pausa.vela-encendida .estampa-llama { animation: none; }

/* Sin JS: fuera los controles que no pueden funcionar (el contenido sigue completo) */
html:not(.js) .cartela--vela .subtitulo, html:not(.js) .vela__ayuda, html:not(.js) .vela,
html:not(.js) .reloj-solar { display: none; }

/* Seis historias: las personas tienen el mismo espacio para elegir un recorrido. */
.retablo.retablo--seis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
  column-gap: clamp(16px, 4vw, 32px);
  row-gap: 28px;
}
.retablo.retablo--seis > li { grid-column: auto; grid-row: auto; }
.retablo--seis .nicho__pie { font-size: clamp(13px, 1.8vw, 17px); line-height: 1.35; }
.retablo--seis .nicho__img { border-radius: 50% 50% 4px 4px / 18% 18% 4px 4px; }
@media (min-width: 900px) {
  .retablo.retablo--seis { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; row-gap: 32px; }
}

/* =========================================================================
   EL PLANO DE LA CASA · maqueta 3D (img/plano-casa-*.webp) con sus puertas
   ========================================================================= */
.mini-plano { width: 20px; height: 20px; flex: none; overflow: visible; }
.mini-plano__casa { fill: rgba(201, 163, 92, .14); stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.mini-plano__ala { fill: none; stroke: currentColor; stroke-width: 1.05; opacity: .82; }
.mini-plano__ala.es-actual { fill: var(--oro); stroke: var(--oro-oscuro); opacity: 1; }
.mini-plano__fuente { fill: currentColor; opacity: .45; }
.mini-plano__entrada { fill: currentColor; }
body[data-hora="noche"] .mini-plano__ala.es-actual { fill: var(--oro-claro); stroke: var(--oro-claro); }

/* en la cabecera, «Plano» ocupa el sitio de «Índice» (la hoja reúne el plano y los capítulos) */
.hora__indice { display: inline-flex; align-items: center; gap: 6px; }
.hora { padding-right: 12px; }
.hora__nombre { min-width: 0; }

/* un plano chiquitito siempre a mano mientras la cabecera se esconde al bajar */
.plano-flotante {
  position: fixed; z-index: 31; top: calc(var(--safe-t) + 10px); right: max(10px, var(--safe-r));
  width: 46px; height: 46px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(122, 90, 34, .45); border-radius: 50%;
  background: rgba(247, 241, 230, .9); color: var(--tinta);
  box-shadow: 0 6px 18px -8px rgba(46, 28, 14, .55), inset 0 0 0 2px rgba(255, 252, 244, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: translateY(-10px) scale(.9); pointer-events: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.plano-flotante .mini-plano { width: 24px; height: 24px; }
html.dintel-oculto .plano-flotante { opacity: 1; transform: none; pointer-events: auto; }
html.indice-abierto .plano-flotante { opacity: 0; pointer-events: none; }
.plano-flotante:active { transform: scale(.94); }

/* portada: el botón del plano, fijo arriba a la derecha */
.boton-plano {
  position: fixed; z-index: 30; top: calc(var(--safe-t) + 10px); right: max(10px, var(--safe-r));
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 15px 0 11px;
  border: 1px solid rgba(226, 197, 140, .55); border-radius: 999px;
  background: rgba(247, 241, 230, .9); color: var(--tinta);
  font: 500 14px/1 var(--f-sc); letter-spacing: .08em;
  box-shadow: 0 8px 22px -10px rgba(8, 12, 28, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease), background-color .3s;
}
.boton-plano:active { transform: scale(.96); }
.captura .boton-plano { display: none; }

/* el plano: la imagen y, encima, las zonas y los medallones (u, v en % de la imagen) */
.plano { position: relative; }
.plano__lienzo {
  position: relative; isolation: isolate; aspect-ratio: 1.061; transform-origin: 50% 50%;
  transition: transform .62s cubic-bezier(.55, 0, .7, .2), opacity .4s .22s var(--ease-io), filter .4s;
}
.plano__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(46, 28, 14, .22)); }
/* la hora: la maqueta del ocaso o de la noche se funde sobre la de día; detrás, el cielo de esa hora */
.plano__img--hora { opacity: 0; transition: opacity 1.1s var(--ease-io); }
.plano__img--hora.es-visible { opacity: 1; }
.plano__lienzo::before, .plano__lienzo::after {
  content: ""; position: absolute; z-index: -1; inset: 0 1% 1.5%; border-radius: 26px;
  opacity: 0; transition: opacity 1.1s var(--ease-io); pointer-events: none;
}
.plano__lienzo::before { background: radial-gradient(120% 75% at 30% 0%, rgba(246, 184, 146, .5), rgba(231, 163, 174, .28) 55%, transparent 80%); }
.plano__lienzo::after {
  background:
    radial-gradient(1.2px 1.2px at 8% 7%, #fff 60%, transparent 62%), radial-gradient(1px 1px at 23% 3%, #f6e7c8 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 41% 9%, #fff 60%, transparent 62%), radial-gradient(1px 1px at 63% 4%, #fff 60%, transparent 62%),
    radial-gradient(1.3px 1.3px at 79% 8%, #f6e7c8 60%, transparent 62%), radial-gradient(1px 1px at 92% 3%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 3% 46%, #fff 60%, transparent 62%), radial-gradient(1.2px 1.2px at 97% 58%, #fff 60%, transparent 62%),
    radial-gradient(130% 90% at 50% 0%, #2b3a63, #18213a 62%, #121a2e);
  box-shadow: 0 18px 40px -24px rgba(8, 12, 28, .8);
}
.plano[data-hora="ocaso"] .plano__lienzo::before { opacity: 1; }
.plano[data-hora="noche"] .plano__lienzo::after { opacity: 1; }
.plano[data-hora="noche"] .plano__sitio--capilla .plano__rotulo { box-shadow: 0 0 0 1px var(--oro), 0 3px 10px -4px rgba(0, 0, 0, .6); }
.plano[data-hora="noche"] .plano__aureola { box-shadow: 0 0 20px 6px rgba(255, 214, 140, .85), inset 0 0 10px rgba(255, 220, 150, .8); }
.plano__zonas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.plano__zona { fill: transparent; stroke: transparent; stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: fill .3s, stroke .3s; }
.plano__zona.es-actual { fill: rgba(201, 163, 92, .16); stroke: rgba(201, 163, 92, .9); stroke-dasharray: 4 3; }
.plano__zona.es-resaltada { fill: rgba(255, 236, 190, .26); stroke: var(--oro); stroke-dasharray: none; }

.plano__sitio {
  position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  transform: translate(-50%, -50%); text-decoration: none; color: var(--tinta);
  -webkit-tap-highlight-color: transparent; outline-offset: 2px;
}
.plano__sitio::before { content: ""; position: absolute; inset: -6px -10px; }          /* área de toque amplia */
.plano__medalla {
  position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none;
  background: #e2d3c0; box-shadow: 0 0 0 2px var(--oro), 0 0 0 3px rgba(122, 90, 34, .55), 0 6px 14px -4px rgba(30, 18, 8, .6);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.plano__medalla img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.plano__rotulo {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 7px 3px; white-space: nowrap;
  font: 500 10.5px/1.1 var(--f-sc); letter-spacing: .06em; color: var(--tinta);
  background: rgba(247, 241, 230, .94); border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(122, 90, 34, .3), 0 3px 8px -4px rgba(30, 18, 8, .5);
}
.plano__rotulo b { font: 400 10.5px/1 var(--f-display); color: var(--sinopia); }
.plano__sitio:hover .plano__medalla, .plano__sitio:focus-visible .plano__medalla { transform: scale(1.1); }
.plano__sitio.es-actual .plano__medalla { box-shadow: 0 0 0 2px #fff4dc, 0 0 0 4px var(--carmesi), 0 6px 14px -4px rgba(30, 18, 8, .6); }
.plano__aqui {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--carmesi); color: #fff4e6; font: 500 10px/1 var(--f-sc); letter-spacing: .08em;
  box-shadow: 0 3px 8px -3px rgba(60, 0, 0, .6);
}
.plano__aqui::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--carmesi); }
/* en los pasadizos, la etiqueta va al costado del medallón, hacia el claustro (las filas están muy juntas) */
.plano__sitio--pasadizo { z-index: 1; }
.plano__sitio--pasadizo.es-actual { z-index: 2; }
.plano__sitio--pasadizo .plano__aqui { bottom: auto; top: 9px; transform: none; }
.plano__sitio--oeste .plano__aqui { left: calc(50% + 22px); }
.plano__sitio--este .plano__aqui { left: auto; right: calc(50% + 22px); }
.plano__sitio--oeste .plano__aqui::after { left: auto; right: 100%; top: 50%; margin: -4px 0 0; border-top-color: transparent; border-right-color: var(--carmesi); }
.plano__sitio--este .plano__aqui::after { left: 100%; top: 50%; margin: -4px 0 0; border-top-color: transparent; border-left-color: var(--carmesi); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.pausa) .plano__sitio.es-actual .plano__medalla { animation: aqui-late 2.4s var(--ease-io) infinite; }
}
@keyframes aqui-late {
  0%, 100% { box-shadow: 0 0 0 2px #fff4dc, 0 0 0 4px var(--carmesi), 0 0 0 4px rgba(155, 28, 36, .4); }
  50% { box-shadow: 0 0 0 2px #fff4dc, 0 0 0 4px var(--carmesi), 0 0 0 11px rgba(155, 28, 36, 0); }
}
/* la capilla «Tu camino» (sobre la aureola) y la entrada */
.plano__sitio--pasadizo { transform: translate(-50%, -17px); }
.plano__sitio--capilla { transform: translate(-50%, -13px); }
.plano__aureola {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--oro); box-shadow: 0 0 14px 3px rgba(255, 214, 140, .75), inset 0 0 8px rgba(255, 220, 150, .7);
}
.plano__sitio--capilla .plano__rotulo { background: var(--tinta); color: var(--marfil); box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .6); }
.plano__sitio--atrio .plano__rotulo { background: rgba(247, 241, 230, .94); }
.plano__sitio--atrio.es-actual .plano__rotulo { box-shadow: 0 0 0 2px var(--carmesi); }
.plano__sitio--atrio .plano__aqui { bottom: calc(100% + 6px); }
.plano--sin-puertas .plano__lienzo { opacity: 1; }

/* entrar desde el plano: la maqueta se acerca a la puerta elegida y se funde */
.plano__sitio.es-elegido .plano__medalla { transform: scale(1.25); box-shadow: 0 0 0 2px #fff4dc, 0 0 0 5px var(--oro), 0 0 24px 6px rgba(255, 214, 140, .8); }
.plano--entrando .plano__lienzo { transform: scale(2.8); opacity: 0; }
.plano--entrando .plano__sitio:not(.es-elegido) { opacity: 0; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .plano__lienzo { transition: none; } }

/* la hoja: el plano arriba, los pasadizos vecinos y, en cada recorrido, sus capítulos */
.hoja-plano { margin: 2px -8px 0; }
.hoja-plano .plano { margin: 0 0 4px; }
.hoja-plano__sub { margin: 18px 0 6px; }
.vecinos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 8px 6px; }
.vecino {
  display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 8px 10px;
  border: 1px solid rgba(122, 90, 34, .32); border-radius: 16px; text-decoration: none; color: var(--tinta);
  background: rgba(255, 252, 244, .55); -webkit-tap-highlight-color: transparent;
  transition: background-color .3s;
}
.vecino:hover { background: rgba(201, 163, 92, .12); }
.vecino--adelante { flex-direction: row-reverse; text-align: right; }
.vecino .plano__medalla { width: 36px; height: 36px; }
.vecino__txt { min-width: 0; font-size: 15px; line-height: 1.2; }
.vecino__txt small { display: block; margin-bottom: 3px; font: 500 11.5px/1.1 var(--f-sc); letter-spacing: .08em; color: var(--oro-oscuro); }
.vecino--atras .vecino__txt small::before { content: "← "; font-family: var(--f-display); }
.vecino--adelante .vecino__txt small::after { content: " →"; font-family: var(--f-display); }
.plano__lista { list-style: none; margin: 10px 8px 0; padding: 0; }
.plano__lista a {
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; min-height: 60px; padding: 8px 2px;
  border-top: 1px solid rgba(122, 90, 34, .2); text-decoration: none; color: var(--tinta);
}
.plano__lista .plano__medalla { width: 40px; height: 40px; }
.plano__lista-txt { font-size: 17px; line-height: 1.25; }
.plano__lista-txt b { margin-right: 8px; font: 400 15px/1 var(--f-display); color: var(--sinopia); }
.plano__lista-txt small { display: block; margin-top: 2px; font: italic 400 14.5px/1.3 var(--f-display); color: var(--tinta-2); }

/* al final de cada pasadizo: la siguiente puerta */
.cartela--seguir .inscripcion { margin-bottom: 4px; }
.seguir__siguiente {
  display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 12px;
  margin: 10px 0 4px; padding: 12px 0; text-decoration: none; color: var(--tinta);
  border-top: 1px solid rgba(122, 90, 34, .28); border-bottom: 1px solid rgba(122, 90, 34, .28);
}
.seguir__siguiente::after { content: "→"; font: 400 24px/1 var(--f-display); color: var(--oro-oscuro); transition: transform .35s var(--ease); }
.seguir__siguiente:hover::after { transform: translateX(4px); }
.seguir__siguiente .plano__medalla { width: 54px; height: 54px; }
.seguir__aureola { width: 44px; height: 44px; margin: 5px; border-radius: 50%; border: 2px solid var(--oro); box-shadow: 0 0 14px 3px rgba(255, 214, 140, .6), inset 0 0 8px rgba(255, 220, 150, .6); }
.seguir__txt small { display: block; font: 500 12.5px/1.2 var(--f-sc); letter-spacing: .08em; color: var(--oro-oscuro); }
.seguir__nombre { display: block; margin-top: 3px; font: 400 20px/1.15 var(--f-display); }
.seguir__idea { display: block; margin-top: 3px; font: italic 400 15px/1.3 var(--f-display); color: var(--tinta-2); }
.seguir__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: 6px; }
button.enlace-flecha { padding: 0; background: none; border: 0; border-bottom: 1px solid rgba(122, 90, 34, .35); border-radius: 0; cursor: pointer; }

/* ---------- PORTADA · la casa (el plano grande) ---------- */
.casa { padding: 52px var(--margen) 20px; }
.casa__interior { max-width: 720px; margin: 0 auto; }
.casa__texto { padding: 0 8px; }
.casa__texto p:not(.inscripcion) { font-size: 18px; line-height: 1.6; }
.casa .titulo { font-size: clamp(30px, 8vw, 46px); }
.plano-hueco { margin: 14px -6px 0; }
.plano-hueco > .plano__img { position: static; width: 100%; height: auto; }
.casa__pista { margin: 10px 8px 0; text-align: center; font: italic 400 15px/1.45 var(--f-display); color: var(--tinta-2); }
.plano--en-linea .plano__medalla { width: 38px; height: 38px; }
.plano--en-linea .plano__sitio--pasadizo { transform: translate(-50%, -19px); }

/* ---------- PORTADA · Tu camino (la capilla del fondo) ---------- */
.tu-camino {
  position: relative; margin-top: 30px; padding: 92px 20px 58px;
  background: radial-gradient(90% 40% at 50% 0%, rgba(255, 246, 222, .9), transparent 70%), linear-gradient(180deg, #f6efe2, var(--marfil));
  border-radius: 50% 50% 0 0 / 40px 40px 0 0;
  box-shadow: 0 -1px 0 rgba(122, 90, 34, .25), 0 -30px 60px -40px rgba(40, 24, 12, .5);
}
/* el resplandor que corona la capilla */
.tu-camino::before {
  content: ""; position: absolute; left: 50%; top: 26px; width: 50px; height: 50px; margin-left: -25px;
  border-radius: 50%; border: 2px solid var(--oro);
  box-shadow: 0 0 18px 4px rgba(255, 214, 140, .55), inset 0 0 10px rgba(255, 220, 150, .6);
}
.tu-camino__interior { max-width: 680px; margin: 0 auto; }
.tu-camino .inscripcion { justify-content: center; }
.tu-camino .titulo { text-align: center; font-size: clamp(32px, 8.6vw, 50px); }
.tu-camino__intro { font-size: 18px; line-height: 1.6; }
/* la capilla construida (el mismo encuadre con el que termina el paseo hasta ella) */
.tu-camino__capilla { margin: 6px auto 24px; max-width: 400px; }
.tu-camino__capilla img {
  display: block; width: 100%; height: auto; aspect-ratio: 1125 / 1406; object-fit: cover;
  border-radius: 50% 50% 16px 16px / 26% 26% 16px 16px; background: var(--marino-hondo);
  box-shadow: 0 0 0 1px rgba(166, 124, 52, .55), 0 0 0 6px rgba(255, 252, 244, .75), 0 0 0 7px rgba(201, 163, 92, .45),
    0 26px 50px -24px rgba(40, 24, 12, .55);
}
.tu-camino__cita { margin: 22px 0 30px; padding: 20px 22px; border-left: 2px solid var(--oro); background: rgba(255, 252, 244, .6); border-radius: 0 14px 14px 0; }
.tu-camino__cita blockquote { margin: 0; }
.tu-camino__cita blockquote p { font: italic 400 21px/1.32 var(--f-display); text-wrap: pretty; }
.tu-camino__cita figcaption { margin-top: 10px; font-size: 15px; color: var(--tinta-2); }
.pasos { list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 10px; }
.pasos a {
  display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 2px;
  padding: 12px 14px 12px 12px; text-decoration: none; color: var(--tinta);
  background: rgba(255, 252, 244, .7); border-radius: 16px; box-shadow: 0 0 0 1px rgba(122, 90, 34, .2);
  transition: background-color .3s, transform .3s var(--ease);
}
.pasos a:hover { background: #fffaf0; }
.pasos a:active { transform: scale(.99); }
.pasos img { grid-row: 1 / span 2; width: 52px; height: 65px; object-fit: cover; border-radius: 50% 50% 4px 4px / 22% 22% 4px 4px; box-shadow: 0 0 0 1px rgba(166, 124, 52, .5); }
.pasos__quien { font: 500 13px/1.2 var(--f-sc); letter-spacing: .08em; color: var(--oro-oscuro); }
.pasos__quien b { margin-right: 6px; font: 400 14px/1 var(--f-display); color: var(--sinopia); }
.pasos__que { font-size: 17px; line-height: 1.4; }
.tu-camino .nota a { color: inherit; }

@media (min-width: 760px) {
  .pasos { grid-template-columns: 1fr 1fr; }
  .plano__medalla { width: 40px; height: 40px; }
  .plano__sitio--pasadizo { transform: translate(-50%, -20px); }
  .plano__rotulo { font-size: 12px; padding: 4px 9px; }
  .plano__rotulo b { font-size: 12px; }
  .plano--en-linea .plano__medalla { width: 46px; height: 46px; }
  .plano--en-linea .plano__sitio--pasadizo { transform: translate(-50%, -23px); }
}
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .casa { padding: 70px 5vw 30px; }
  .casa__interior { max-width: 1180px; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 0 4vw; align-items: center; }
  .casa__texto { grid-column: 1; grid-row: 1; }
  .plano-hueco { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .casa__pista { grid-column: 1; grid-row: 2; align-self: start; text-align: left; }
  .tu-camino { padding: 110px 5vw 80px; border-radius: 50% 50% 0 0 / 60px 60px 0 0; }
  .tu-camino__interior { max-width: 1000px; }
  .pasos { grid-template-columns: repeat(3, 1fr); }
}

/* Ventana de lectura (móvil en vertical): la tarjeta se desvanece al subir a la franja del objeto (app.js · iniciarVentana) */
@media (max-aspect-ratio: 999/1000) {
  .js .ventana {
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--corte-a, -9999px), #000 var(--corte-b, -9999px));
    mask-image: linear-gradient(to bottom, transparent var(--corte-a, -9999px), #000 var(--corte-b, -9999px));
  }
}

/* ---------- El paseo por la casa ----------
   Entre pasadizos se camina por la casa (vídeos de Blender, app.js · pasear). En el móvil vertical ocupa la pantalla;
   en el ordenador, un ventanal en arco sobre la página velada. Al llegar, la página nueva aparece a través del último
   fotograma (html.paseo-llegada, marcado en la cabecera de cada página). */
html.paseando, html.paseando body { overflow: hidden; }
.paseo {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(13, 13, 12, .92);
  opacity: 0; transition: opacity .38s ease;
}
.paseo.es-visible { opacity: 1; }
.paseo__marco {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; height: 100%;
  background: var(--negro);
}
/* el vídeo va en una caja 9:16 que app.js coloca (pasear: la luneta final donde la pone la página) */
.paseo__lienzo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.paseo__copia { position: absolute; }
.paseo__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
}
.paseo__video.es-visible { opacity: 1; }
.paseo__pie {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 44px 24px calc(22px + var(--safe-b, 0px));
  background: linear-gradient(to top, rgba(13, 13, 12, .74), rgba(13, 13, 12, .38) 55%, rgba(13, 13, 12, 0));
  color: var(--marfil); text-align: center; pointer-events: none;
}
.paseo__ins {
  margin: 0 0 4px;
  font: 500 12.5px/1.2 var(--f-sc); letter-spacing: .14em; color: var(--oro-claro);
}
.paseo__destino {
  margin: 0 0 12px; text-wrap: balance;
  font: italic 400 20px/1.15 var(--f-display); color: var(--marfil-claro);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.paseo__barra {
  display: block; width: min(220px, 60%); height: 2px; margin: 0 auto;
  background: var(--oro); opacity: .9; border-radius: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
}
.paseo__saltar {
  position: absolute; z-index: 3; top: calc(var(--safe-t, 0px) + 12px); right: max(12px, var(--safe-r, 0px));
  min-height: 44px; padding: 0 18px;
  border: 1px solid rgba(226, 197, 140, .5); border-radius: 999px;
  background: rgba(13, 13, 12, .42); color: var(--marfil-claro);
  font: 500 14px/1 var(--f-sc); letter-spacing: .1em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.paseo__saltar::after { content: " →"; font-family: var(--f-display); }
.paseo__saltar, .paseo__pie { transition: opacity .3s ease; }
.paseo.es-final .paseo__saltar, .paseo.es-final .paseo__pie { opacity: 0; }
.paseo__sonda { position: absolute; left: 0; top: 0; width: var(--fw); height: var(--ft); visibility: hidden; pointer-events: none; }
.paseo__sonda--alto { width: 1px; height: 100vh; height: 100lvh; }
.paseo__saltar:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; }
@media (min-aspect-ratio: 1/1) {
  .paseo { background: rgba(13, 13, 12, .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .paseo__marco {
    width: auto; height: min(92vh, 980px); height: min(92svh, 980px); aspect-ratio: 9 / 16;
    border-radius: 50% 50% 18px 18px / 26% 26% 18px 18px;
    box-shadow: 0 0 0 1px rgba(226, 197, 140, .55), 0 0 0 7px rgba(13, 13, 12, .6), 0 0 0 8px rgba(201, 163, 92, .35),
      0 30px 80px -20px rgba(0, 0, 0, .8);
    transform: scale(.985); transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  }
  .paseo.es-visible .paseo__marco { transform: none; }
  .paseo__saltar { top: 24px; right: 28px; }
}
/* en un móvil, desenfocar lo que hay detrás de un vídeo se recalcula en cada fotograma */
@media (pointer: coarse) {
  .paseo, .paseo__saltar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .paseo__saltar { background: rgba(13, 13, 12, .62); }
}
/* La cubierta de llegada: el último estado del paseo, pintado en la página nueva desde su cabecera (html.paseo-llegada
   y --paseo-fin); app.js la retira cuando la página ha pintado lo mismo, y si app.js no llegara, se va sola. */
html.paseo-llegada::after {
  content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none;
  background: var(--negro) var(--paseo-fin) center / cover no-repeat;
  transition: opacity .8s ease;
  animation: llegada-sola .8s ease 4s forwards;
}
html.paseo-llegada.paseo-llegada--fuera::after { opacity: 0; }
@keyframes llegada-sola { to { opacity: 0; } }
/* a la portada: la fachada como en su lienzo (100lvh desde arriba, cover) */
html.paseo-llegada--portada::after { bottom: auto; height: 100vh; height: 100lvh; }
/* a un pasadizo: su póster colocado como .poster, sobre el último fotograma colocado como en el paseo */
html.paseo-llegada--poster::after {
  --paseo-w: calc(var(--fw) / .59147);
  background-color: var(--negro);
  background-image: var(--paseo-fin), var(--paseo-fondo, none);
  background-repeat: no-repeat;
  background-size: calc(var(--fw) / .6) auto, var(--paseo-w) auto;
  background-position: 50% calc(var(--ft) - .25 * var(--fw)), 50% calc(var(--ft) - .109 * var(--paseo-w) * 16 / 9);
}
/* el póster de la página con el que termina el paseo, colocado como .poster */
.paseo__final {
  position: absolute; z-index: 1;
  width: calc(var(--fw) / .6); max-width: none; aspect-ratio: 1 / 2;
  left: calc(50% - var(--fw) / 1.2); top: calc(var(--ft) - .25 * var(--fw));
  opacity: 0; transition: opacity .6s ease;
}
.paseo__final img { display: block; width: 100%; height: 100%; object-fit: cover; }
.paseo__final.es-visible { opacity: 1; }
/* en apaisado: el ventanal en arco del paseo sobre la página velada */
@media (min-aspect-ratio: 1/1) {
  html.paseo-llegada--ventana::before {
    content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none;
    background: rgba(13, 13, 12, .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: opacity .8s ease;
    animation: llegada-sola .8s ease 4s forwards;
  }
  html.paseo-llegada--ventana.paseo-llegada--fuera::before { opacity: 0; }
  html.paseo-llegada--ventana::after {
    inset: auto; left: 50%; top: 50%; height: min(92vh, 980px); height: min(92svh, 980px); aspect-ratio: 9 / 16;
    transform: translate(-50%, -50%);
    border-radius: 50% 50% 18px 18px / 26% 26% 18px 18px;
    box-shadow: 0 0 0 1px rgba(226, 197, 140, .55), 0 0 0 7px rgba(13, 13, 12, .6), 0 0 0 8px rgba(201, 163, 92, .35),
      0 30px 80px -20px rgba(0, 0, 0, .8);
  }
}

/* La portada: la tarjeta de la fuente con el medallón de la puerta elegida y el reloj de sol bajo el plano */
.ruta__medalla {
  float: right; width: 74px; height: 92px; margin: 2px 0 6px 14px; object-fit: cover;
  border-radius: 50% 50% 8px 8px / 32% 32% 8px 8px;
  box-shadow: 0 0 0 1px rgba(166, 124, 52, .6), 0 0 0 4px rgba(255, 252, 244, .8), 0 0 0 5px rgba(201, 163, 92, .5),
    0 10px 22px -12px rgba(40, 24, 12, .6);
}
@media (max-height: 700px) and (max-aspect-ratio: 1/1) { .ruta__medalla { width: 60px; height: 75px; } }
@media (min-aspect-ratio: 1/1) { .ruta__medalla { width: 96px; height: 120px; } }
.casa__reloj { max-width: 520px; margin: 14px auto 6px; }


/* ---------- 404 · la hornacina vacía ---------- */
.vacio { min-height: 100svh; display: grid; place-items: center; padding: 32px var(--margen); }
.vacio .cartela { max-width: 420px; text-align: center; padding: 34px 26px 30px; }
.vacio__arco { width: 96px; height: 120px; margin: 0 auto 22px; border: 3px solid var(--oro-oscuro); border-bottom: 0; border-radius: 48px 48px 0 0; }
.vacio .titulo { margin-bottom: 10px; }
.vacio p { color: var(--tinta-2); }
.vacio .boton { margin-top: 22px; }
.vacio .inscripcion { justify-content: center; }