/* El recorrido de la portada (11-12 oct 2026): las dos puertas, la escalera blanca y las plantas del
   edificio de los planos, repartidas en espiral (js/recorrido/espiral.js), en una sola escena; y el texto del
   arco, por capítulos.

   Composición (boceto de Ernesto, 12 oct): cada capítulo es una pantalla entera que se queda mientras se lee.
   El título va arriba a la izquierda; el texto debajo, de corrido, con el borde derecho en diagonal: rodea la
   planta del capítulo, que está grande y entera abajo a la derecha. La forma del rodeo la calcula
   js/recorrido/recorrido.js con el contorno de la planta en pantalla (shape-outside). Entre capítulos, el
   hueco: la cámara baja por la escalera, que queda a la derecha. La escena está detrás del texto; sin
   ventanas ni tarjetas: el texto va sobre el papel limpio que deja la planta.
   En una pantalla vertical, el texto va de corrido arriba y la escena en una banda abajo, por encima del texto.
   Versiones anteriores: _superado/2026-10-12-recorrido-columna/ (columna y escena a la derecha, descartada:
   «la pantalla dividida en dos es lo contrario de una presentación cara»), _superado/2026-10-12-recorrido-bloques/
   y _superado/2026-10-11-portada-paso1/. */

/* el recorrido es la portada; en el paisaje (?escena, o al desplegarlo desde la barra) no está. Lo de
   antes no se ve: ni el espaciador del paisaje fuera de él, ni la frase, ni el nombre grande, ni el
   vestíbulo de papel (html.con-escena lo pone index.html antes de pintar) */
#recorrido { position: relative; }
html.con-escena #recorrido, body.desplegando #recorrido, body.escena #recorrido { display: none; }
#mundo, #tesis, #cabecera { display: none; }
html.con-escena #mundo, body.desplegando #mundo, body.escena #mundo { display: block; }
body.portada #umbral { visibility: hidden; }

/* ---------- la escena, pegada a la pantalla ---------- */
.recorrido__escena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: 1; }
#recorrido-lienzo { position: absolute; inset: 0; opacity: 0; }                     /* (13 oct) aparece de golpe, sin fundido */
#recorrido.lista #recorrido-lienzo { opacity: 1; }
/* la foto fija de arriba del todo: debajo del lienzo, que la tapa entera cuando llega (su fondo es el papel) */
.recorrido__cartel { position: absolute; left: 0; top: 0; max-width: none; visibility: hidden; pointer-events: none; }
.recorrido__cartel.colocada { visibility: visible; }
#recorrido.lista .recorrido__cartel { visibility: hidden; }
/* (13 oct, Ernesto) mientras carga: la página quieta arriba y una raya fina abajo que avanza (recorrido.js pone --carga) */
html.cargando, html.cargando body { overflow: hidden; overscroll-behavior: none; }
html.cargando body { touch-action: none; }
.recorrido__escena::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--azul-hondo, #1f3a63);
  transform-origin: left; transform: scaleX(calc(0.06 + var(--carga, 0) * 0.94)); transition: transform 2.5s cubic-bezier(.2,.7,.3,1); opacity: 0.55; z-index: 4; pointer-events: none; }
#recorrido.lista .recorrido__escena::after, #recorrido.sin-3d .recorrido__escena::after { display: none; }

/* las dos puertas, para el teclado y los lectores de pantalla: con el foco, el rótulo sale bajo su puerta */
.recorrido__portal { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.recorrido__enso { display: none; }
.recorrido__puerta {
  position: absolute; left: var(--x, 50%); top: var(--y, 70%); transform: translateX(-50%);
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: auto;
  font: 600 var(--t-menor, 15px)/1.2 var(--fuente-texto); color: var(--tinta); text-decoration: underline; text-underline-offset: 5px;
}
.recorrido__puerta:focus-visible { width: auto; height: auto; overflow: visible; clip-path: none; outline: 2px solid var(--tinta); outline-offset: 6px; border-radius: 2px; }

/* ---------- el texto, por capítulos ---------- */
/* por encima de la escena; solo el texto recibe el ratón (el resto deja pasar a la escena: las puertas) */
.recorrido__texto { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.recorrido__puertas { height: 100vh; height: 100svh; }                 /* arriba del todo, solo las puertas */
.recorrido__entera { height: 0; }                                       /* en vertical: la oficina entera, antes del nombre */
.recorrido__capitulo { height: 185vh; height: 185svh; }                 /* la pantalla del capítulo se queda 85 pantallas de scroll */
.recorrido__hueco { height: 38vh; height: 38svh; }                      /* la escalera que baja a la planta siguiente: un paso fugaz (12 oct) */
.recorrido__cola { height: 30vh; height: 30svh; }
/* el texto de paso (13 oct): entre dos plantas, el texto que se lee mientras la cámara baja por la escalera, que va a la
   derecha. El hueco crece con él (el margen de arriba y de abajo es el giro de la cámara de la planta a la escalera y de
   la escalera a la planta siguiente); recorrido.js ajusta el largo de la escalera al del texto */
.recorrido__hueco:has(.recorrido__tramo) { height: auto; padding: 45vh 0 40vh; padding: 45svh 0 40svh; }
.recorrido__tramo { padding: 0 var(--margen-ancho); max-width: min(30em, 56vw); }
.recorrido__tramo p {
  margin: 0 0 1em; font-family: var(--fuente-titulo); font-weight: 360; font-size: clamp(18px, 0.5vw + 0.7vh + 5px, 25px); line-height: 1.5;
  font-variation-settings: "opsz" 24; color: var(--tinta); text-wrap: pretty; pointer-events: auto;
}
.recorrido__pagina {
  position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box;
  padding: calc(var(--barra) + clamp(20px, 5.5vh, 64px)) var(--margen-ancho) 3vh;
  font-size: var(--letra, 1rem);
}
.recorrido__pagina > * { pointer-events: auto; }
/* el bloque del texto ocupa todo el ancho (rodea la planta): solo sus párrafos reciben el ratón, el resto deja pasar
   a la escena (coger a la gente, las puertas) */
.recorrido__pagina > .recorrido__corrido { pointer-events: none; }
.recorrido__corrido > p { pointer-events: auto; }
.recorrido__titulo {
  margin: 0; max-width: 17em; font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(30px, 0.7rem + 2.3vw, 58px); line-height: 1.06;
  letter-spacing: -0.022em; font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0; color: var(--azul-hondo); text-wrap: balance;
}
.recorrido__nombre {
  margin: 0; font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(46px, 0.6rem + 4.4vw, 104px); line-height: 0.95;
  letter-spacing: -0.035em; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; color: var(--azul-hondo);
}
.recorrido__cargo { margin: clamp(12px, 1.8vh, 18px) 0 0; font: 600 11.5px/1.2 var(--fuente-texto); letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinta-suave); }
/* el texto de corrido: rodea la planta (el rodeo flota a la derecha con la forma que le da recorrido.js) */
.recorrido__corrido { margin-top: clamp(18px, 3.2vh, 38px); }
.recorrido__corrido p {
  margin: 0 0 0.8em; font-family: var(--fuente-titulo); font-weight: 360; font-size: calc(clamp(16.5px, 0.42vw + 0.62vh + 4px, 22px) * var(--escala-texto, 1)); line-height: 1.55;
  font-variation-settings: "opsz" 14; color: var(--tinta); text-wrap: pretty;
}
.recorrido__corrido .recorrido__entrada {
  font-weight: 400; font-size: calc(clamp(20px, 0.6vw + 0.9vh + 4px, 30px) * var(--escala-texto, 1)); line-height: 1.25; letter-spacing: -0.01em;
  font-variation-settings: "opsz" 48; color: var(--azul-hondo);
}
.recorrido__rodeo { float: right; width: 0; height: 0; }               /* sin forma (sin 3D, o en vertical), no ocupa nada */
.recorrido__rodeo-izq { float: left; width: 0; height: 0; }            /* las escaleras que cruzan por la izquierda: el texto, a su derecha */
/* la entrada del texto (12 oct): recorrido.js pone --e (0 cuando el capítulo asoma, 1 cuando llega) y --s (al irse);
   cada pieza (--i: su orden) aparece un poco después que la anterior, subiendo. Sin esas variables, todo quieto y visible */
.recorrido__pagina > :not(.recorrido__corrido), .recorrido__corrido > p {
  --v: clamp(0, calc((var(--e, 1) - var(--i, 0) * 0.06) * 2.4), 1);
  opacity: calc(var(--v) * (1 - var(--s, 0)));
  transform: translate3d(0, calc((1 - var(--v)) * 38px - var(--s, 0) * 26px), 0);
}

/* en vertical (o muy estrecho): el texto de corrido arriba; la escena, en una banda abajo y por encima del texto
   (recorrido.js le pone una máscara: transparente donde se lee, opaca en la banda); el texto entra por debajo de ella */
@media (orientation: portrait), (max-width: 699px) {
  .recorrido__escena { z-index: 2; pointer-events: none; }
  #recorrido-lienzo { pointer-events: auto; }
  .recorrido__texto { z-index: 1; pointer-events: auto; }
  .recorrido__capitulo { height: auto; padding: 4vh 0 0; }
  .recorrido__hueco { height: 62vh; }
  .recorrido__hueco:has(.recorrido__tramo) { height: auto; padding: 30vh 0 55vh; }
  .recorrido__tramo { max-width: none; }
  .recorrido__tramo p { font-size: clamp(17px, 0.7vw + 0.9rem, 20px); }
  .recorrido__entera { height: 130vh; height: 130svh; }
  .recorrido__cola { height: 70vh; }
  .recorrido__pagina { position: static; height: auto; padding: 0 var(--margen-ancho); }
  .recorrido__nombre { font-size: clamp(40px, 5vw + 1.4rem, 64px); }
  .recorrido__titulo { font-size: clamp(25px, 2.4vw + 1rem, 34px); }
  .recorrido__corrido p { font-size: clamp(16.5px, 0.7vw + 0.85rem, 19px); }
  .recorrido__corrido .recorrido__entrada { font-size: clamp(21px, 1.6vw + 0.95rem, 27px); }
  .recorrido__rodeo, .recorrido__rodeo-izq { display: none; }
}

/* ---------- sin 3D: el logotipo pintado, los dos enlaces y el texto seguido ---------- */
#recorrido.sin-3d .recorrido__escena { position: relative; height: auto; overflow: visible; }
#recorrido.sin-3d .recorrido__cartel, #recorrido.sin-3d #recorrido-lienzo { display: none; }
#recorrido.sin-3d .recorrido__portal { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; align-content: center; gap: 28px; pointer-events: auto; }
#recorrido.sin-3d .recorrido__enso { display: block; width: min(40vw, 280px); height: auto; }
#recorrido.sin-3d .recorrido__puerta { position: static; width: auto; height: auto; overflow: visible; clip-path: none; transform: none; }
#recorrido.sin-3d .recorrido__texto { margin-top: 0; padding-bottom: 12vh; pointer-events: auto; }
#recorrido.sin-3d .recorrido__puertas, #recorrido.sin-3d .recorrido__entera { display: none; }
#recorrido.sin-3d .recorrido__capitulo { height: auto; }
#recorrido.sin-3d .recorrido__pagina { position: static; height: auto; padding-bottom: 6vh; }
#recorrido.sin-3d .recorrido__hueco { height: 6vh; }
#recorrido.sin-3d .recorrido__hueco:has(.recorrido__tramo) { height: auto; padding: 0 0 4vh; }
#recorrido.sin-3d .recorrido__cola { height: 0; }
#recorrido.sin-3d .recorrido__corrido { max-width: 38em; }

/* (15 oct, Ernesto) las secciones entre plantas (obra, charlas y encargos, registro): en el papel, a la izquierda, con la
   escalera bajando a la derecha; reciben el ratón (enlaces, imágenes). Cada bloque aparece desvaneciéndose al entrar por
   abajo (animación ligada al scroll; donde el navegador no la tiene, se ve y ya). Las estaciones duran lo que pide su texto y
   los huecos lo que pide el despegue: lo pone recorrido.js en línea, sobre estos valores */
.recorrido__seccion { pointer-events: auto; }
.recorrido__seccion .objetos { display: block; }
.recorrido__seccion .objeto { margin: 0 0 clamp(36px, 6.5vh, 64px); }
.recorrido__seccion .objeto__imagen { height: clamp(150px, 22vh, 230px); justify-content: flex-start; margin-bottom: 18px; }
.recorrido__seccion .objeto__imagen--marcapaginas { gap: 24px; }
.recorrido__seccion .objeto__imagen--marcapaginas img { max-width: 34%; }
.recorrido__seccion .objeto__nombre { font-size: clamp(24px, 1.9vw, 32px); }
.recorrido__seccion .objeto__linea { max-width: 30em; font-family: var(--fuente-titulo); font-weight: 360; font-size: clamp(17px, 0.45vw + 0.65vh + 5px, 22px); line-height: 1.5; font-variation-settings: "opsz" 24; }
.recorrido__seccion .objeto__estado { padding-top: 10px; }
.recorrido__seccion .registro { max-width: none; }
.recorrido__seccion .registro li { padding: 0.55em 0; font-size: clamp(17px, 0.45vw + 0.65vh + 5px, 22px); line-height: 1.5; }
.recorrido__seccion a { color: var(--azul-hondo); text-decoration: none; border-bottom: 1px solid rgba(15, 42, 87, 0.35); }
.recorrido__seccion a:hover { border-bottom-color: var(--azul-hondo); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .recorrido__seccion > *, .recorrido__seccion .objeto, .recorrido__seccion .registro li { animation: recorrido-aparece linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .recorrido__seccion .objetos, .recorrido__seccion .registro { animation: none; }
  }
}
@keyframes recorrido-aparece { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }

/* (15 oct, Ernesto) en apaisado la página de cada estación sube invisible y, una vez pegada arriba, el texto se enciende en su
   sitio, pieza a pieza (recorrido.js pone la clase --llega al llegar); así el texto nunca cruza la planta mientras sube. Con
   «menos movimiento» o sin 3D, todo se ve siempre */
@media (orientation: landscape) and (min-width: 700px) and (prefers-reduced-motion: no-preference) {
  #recorrido:not(.sin-3d) .recorrido__pagina > :not(.recorrido__corrido), #recorrido:not(.sin-3d) .recorrido__corrido > p {
    transition: opacity .55s cubic-bezier(.2, .7, .3, 1) calc(var(--i, 0) * 70ms), transform .75s cubic-bezier(.2, .7, .3, 1) calc(var(--i, 0) * 70ms);
  }
  #recorrido:not(.sin-3d) .recorrido__capitulo:not(.recorrido__capitulo--llega) .recorrido__pagina > :not(.recorrido__corrido),
  #recorrido:not(.sin-3d) .recorrido__capitulo:not(.recorrido__capitulo--llega) .recorrido__corrido > p { opacity: 0; transform: translate3d(0, 30px, 0); transition-duration: .25s, .25s; transition-delay: 0s, 0s; }
}

/* ---------- el paseo (15 oct, noche): el texto, en bloques fijos sobre la escena ---------- */
/* el documento solo lleva espaciadores: las paradas (recorrido.js pone su altura según el texto) y los huecos de escalera */
.recorrido__capitulo { height: 100vh; height: 100svh; }
.recorrido__hueco { height: 160vh; height: 160svh; }
.recorrido__hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hud {
  position: absolute; left: var(--margen-ancho); top: calc(var(--barra) + 4vh); max-width: min(40em, 46vw);
  opacity: var(--o, 0); transform: translate3d(0, calc((1 - var(--o, 0)) * 18px), 0); pointer-events: none;
}
.hud.hud--visible { pointer-events: auto; }
.hud.hud--der { left: auto; right: var(--margen-ancho); }
.hud p {
  margin: 0 0 0.7em; font-family: var(--fuente-titulo); font-weight: 360; font-size: calc(clamp(18px, 0.5vw + 0.7vh + 5px, 26px) * var(--escala-texto, 1));
  line-height: 1.45; color: var(--tinta); text-wrap: pretty; font-variation-settings: "opsz" 24;
}
.hud p:last-child { margin-bottom: 0; }
.hud .hud__frase {
  font-weight: 400; font-size: calc(clamp(22px, 0.75vw + 1vh + 6px, 36px) * var(--escala-texto, 1)); line-height: 1.2; letter-spacing: -0.012em;
  color: var(--azul-hondo); font-variation-settings: "opsz" 48; text-wrap: balance;
}
.hud__nombre {
  margin: 0; font-family: var(--fuente-titulo); font-weight: 400; font-size: calc(clamp(46px, 0.6rem + 4.4vw, 104px) * var(--escala-texto, 1)); line-height: 0.95;
  letter-spacing: -0.035em; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; color: var(--azul-hondo);
}
.hud__cargo { margin: clamp(12px, 1.8vh, 18px) 0 0; font: 600 11.5px/1.2 var(--fuente-texto); letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinta-suave); }
.hud a { color: var(--azul-hondo); text-decoration: none; border-bottom: 1px solid rgba(15, 42, 87, 0.35); }
@media (orientation: portrait), (max-width: 699px) {
  .hud { left: var(--margen-ancho); right: var(--margen-ancho); max-width: none; top: calc(var(--barra) + 3vh); }
  .hud__nombre { font-size: clamp(40px, 5vw + 1.4rem, 64px); }
  .hud p { font-size: clamp(16.5px, 0.7vw + 0.85rem, 19px); }
  .hud .hud__frase { font-size: clamp(21px, 1.6vw + 0.95rem, 27px); }
  .recorrido__capitulo { padding: 0; }
}
/* sin 3D: los bloques, seguidos, en el papel */
#recorrido.sin-3d .recorrido__hud { position: static; }
#recorrido.sin-3d .hud { position: static; max-width: 38em; margin: 5vh var(--margen-ancho) 0; opacity: 1; transform: none; pointer-events: auto; }
#recorrido.sin-3d .recorrido__texto { display: none; }

/* ---------- los nueve pasos (16 oct, Ernesto) ---------- */
.hud { transform: translate3d(0, calc((1 - var(--o, 0)) * 18px + var(--desliza, 0px)), 0); }
.hud .hud__lema { margin-top: clamp(14px, 2.2vh, 24px); font-weight: 400; font-size: calc(clamp(20px, 0.6vw + 0.9vh + 6px, 32px) * var(--escala-texto, 1)); line-height: 1.25; color: var(--azul-hondo); text-wrap: balance; }
.hud__retrato { margin: 0 0 1.1em; width: clamp(96px, 9vw, 150px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; box-shadow: 0 10px 28px -14px rgba(28, 31, 43, 0.45); }
.hud__retrato img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hud__titulo { font-family: var(--fuente-texto) !important; font-weight: 600 !important; font-size: 11.5px !important; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinta-suave) !important; margin-bottom: 1.1em !important; }
.hud__actividades { list-style: none; margin: 0.4em 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25em; }
.hud__actividades button {
  font: 400 calc(clamp(20px, 0.6vw + 0.9vh + 6px, 32px) * var(--escala-texto, 1))/1.2 var(--fuente-titulo); color: var(--c); background: none; border: 0; padding: 0.05em 0; cursor: pointer;
  text-align: left; border-bottom: 1.5px solid transparent; transition: border-color .2s;
}
.hud__actividades button:hover, .hud__actividades button:focus-visible, .hud__actividades button.es-actual { border-bottom-color: currentColor; outline: none; }
.hud__lineas { list-style: none; margin: 0; padding: 0; }
.hud__lineas li { font-family: var(--fuente-titulo); font-weight: 360; font-size: calc(clamp(15px, 0.35vw + 0.6vh + 5px, 20px) * var(--escala-texto, 1)); line-height: 1.4; color: var(--tinta); padding: 0.55em 0; border-top: 1px solid rgba(28, 31, 43, 0.12); }
.hud__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.hud a.hud__boton { display: inline-block; font: 600 15px/1 var(--fuente-texto); padding: 13px 20px; border-radius: 999px; background: var(--azul-hondo); color: #fff; border: 0; }
.hud a.hud__boton--suave { background: transparent; color: var(--azul-hondo); box-shadow: inset 0 0 0 1.5px var(--azul-hondo); }
.hud .hud__correo { font-family: var(--fuente-texto); font-size: 15px; }
/* la ficha de una actividad del colegio, al acercarse la cámara */
.recorrido__ficha {
  position: absolute; z-index: 4; left: var(--margen-ancho); bottom: 6vh; max-width: min(30em, 40vw); padding: 0;
  opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .35s, transform .35s;
}
.recorrido__ficha.es-visible { opacity: 1; transform: none; }
.ficha__tipo { margin: 0 0 0.6em; font: 600 11.5px/1.2 var(--fuente-texto); letter-spacing: 0.22em; text-transform: uppercase; color: var(--c, var(--tinta-suave)); }
.ficha__titulo { margin: 0 0 0.35em; font: 400 clamp(26px, 1vw + 1.2vh + 8px, 42px)/1.1 var(--fuente-titulo); color: var(--azul-hondo); }
.ficha__texto { margin: 0 0 1.2em; font: 360 clamp(16px, 0.4vw + 0.7vh + 6px, 21px)/1.45 var(--fuente-titulo); color: var(--tinta); }
.ficha__alejar { font: 600 15px/1 var(--fuente-texto); padding: 13px 22px; border-radius: 999px; border: 0; background: var(--azul-hondo); color: #fff; cursor: pointer; }
@media (orientation: portrait), (max-width: 699px) {
  .hud__retrato { width: 84px; float: left; margin: 0 14px 6px 0; }
  .hud__actividades button { font-size: 19px; }
  .hud__lineas li { font-size: 14.5px; }
  .recorrido__ficha { left: var(--margen-ancho); right: var(--margen-ancho); max-width: none; top: calc(var(--barra) + 2vh); bottom: auto; }
}
#recorrido.sin-3d .recorrido__ficha { display: none; }
.hud.hud--abajo { top: auto; bottom: 7vh; }
/* el círculo de color alrededor de una actividad del colegio */
.recorrido__circulo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .25s; overflow: visible; }
.recorrido__circulo.es-visible { opacity: 1; }
.recorrido__circulo ellipse { fill: none; stroke: var(--c, #0f2a57); stroke-width: 3; stroke-linecap: round; }
/* cerca de una actividad: el bloque del colegio se aparta y queda la ficha */
#recorrido.esta-cerca .hud { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s; }
.ficha__texto a { color: var(--azul-hondo); text-decoration: none; border-bottom: 1px solid rgba(15, 42, 87, 0.35); }
/* en vertical, un bloque más largo que la mitad de arriba: se recorta y su texto pasa por dentro mientras dura el paso */
.hud.hud--recorta { overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent); mask-image: linear-gradient(#000 calc(100% - 30px), transparent); }
.hud.hud--recorta > * { transform: translate3d(0, var(--dentro, 0px), 0); }

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════
   La tipografía de los nueve pasos (16 oct 2026). Los porqués, paso a paso: informes/tipografia-de-los-pasos-16oct.md.
   Va al final y manda sobre lo de arriba. Un solo sistema para los nueve pasos:
   · lectura: Fraunces de texto (tamaño óptico 18, peso 370), medida de unas 31 em (unos 65 caracteres), interlineado 1,52;
   · frase: Fraunces de titular (tamaño óptico 36 a 72), para el lema del nombre, la frase de la consultoría y el índice
     de las actividades; el lema y la frase, en el azul;
   · etiqueta: Inter en mayúsculas espaciadas con un filete detrás, como en el dossier (Trayectoria, Prensa, el tipo de
     cada ficha); las fechas de la trayectoria, en Inter de cifras tabulares, en una columna propia;
   · la cursiva, solo para títulos de obras y el término acuñado. Nada de fondos ni cajas: el texto va sobre el papel.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════ */
#recorrido {
  --hud-lectura: clamp(17px, 0.5vw + 0.55vh + 6px, 23px);
  --hud-lema: clamp(21px, 0.7vw + 0.75vh + 7px, 32px);
  --hud-frase: clamp(22px, 0.8vw + 0.9vh + 8px, 36px);
  --hud-indice: clamp(20px, 0.55vw + 0.7vh + 8px, 30px);
  --hud-nombre: clamp(50px, 1rem + 4.75vw, 118px);
  --hud-cronologia: clamp(15.5px, 0.4vw + 0.5vh + 6px, 20px);
  --hud-etiqueta: 12px;
  --hud-medida: 31em;
  --hud-retrato: clamp(124px, 9.4vw, 196px);
  --hud-hueco-retrato: clamp(22px, 2.2vw, 40px);
}
/* la lectura: el tamaño del bloque es el de su texto (así las medidas en em siguen a la letra, también cuando
   recorrido.js la baja con --escala-texto para que el bloque no toque la escena) */
.recorrido__hud .hud { font-size: calc(var(--hud-lectura) * var(--escala-texto, 1)); color: var(--tinta); font-kerning: normal; }
.recorrido__hud .hud p {
  margin: 0 0 0.8em; font-family: var(--fuente-titulo); font-weight: 370; font-size: 1em; line-height: 1.52; letter-spacing: 0;
  font-variation-settings: "opsz" 18; color: var(--tinta); text-wrap: pretty;
}
.recorrido__hud .hud p:last-child { margin-bottom: 0; }

/* paso 2, el nombre: el nombre grande, el oficio en etiqueta y el lema en el azul, los tres en una misma columna */
.recorrido__hud .hud__nombre {
  margin: 0 0 0 -0.055em; font-family: var(--fuente-titulo); font-weight: 400; font-size: calc(var(--hud-nombre) * var(--escala-texto, 1));
  line-height: 0.92; letter-spacing: -0.038em; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; color: var(--azul-hondo);
}
.recorrido__hud .hud p.hud__cargo {
  margin: clamp(14px, 2vh, 22px) 0 0; max-width: 42em; font: 500 13px/1.4 var(--fuente-texto); letter-spacing: 0.16em;
  text-transform: uppercase; font-variation-settings: normal; color: var(--tinta-suave);
}
.recorrido__hud .hud p.hud__lema {
  margin: clamp(16px, 2.6vh, 30px) 0 0; max-width: none; font-weight: 400; font-size: calc(var(--hud-lema) * var(--escala-texto, 1));
  line-height: 1.2; letter-spacing: -0.008em; font-variation-settings: "opsz" 60, "SOFT" 0, "WONK" 0; color: var(--azul-hondo); text-wrap: balance;
}

/* el lema y la frase de la consultoría, cortados por donde se dicen (un verso por línea), no por donde se acaba el ancho */
.recorrido__hud .hud__verso { display: block; }

/* paso 3, el perfil: el retrato, plano, sin sombra ni esquinas redondas (como en el dossier) */
.recorrido__hud .hud__retrato { width: var(--hud-retrato); margin: 0 0 1.1em; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0; box-shadow: none; }
.recorrido__hud .hud__retrato img { object-position: 50% 30%; }

/* paso 4, el colegio: un índice de las cinco actividades; cada una con un aro de su color (el mismo que se dibuja
   alrededor de su sala), que se llena al señalarla */
.recorrido__hud .hud__actividades { list-style: none; margin: 0.85em 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.recorrido__hud .hud__actividades li { margin: 0; padding: 0; }
.recorrido__hud .hud__actividades button {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 1.7em; margin: 0; padding: 0; border: 0; border-radius: 2px;
  background: none; cursor: pointer; text-align: left; color: var(--c);
  font-family: var(--fuente-titulo); font-weight: 400; font-size: calc(var(--hud-indice) * var(--escala-texto, 1)); line-height: 1.15;
  letter-spacing: -0.006em; font-variation-settings: "opsz" 36;
  text-decoration: underline transparent; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em;
  transition: text-decoration-color .2s ease;
}
@supports (color: color-mix(in oklab, red 50%, blue)) {
  /* el nombre, un punto más hondo que su color, para que se lea bien sobre el papel: con esta mezcla todos pasan de 4,5 a 1
     de contraste (el mostaza del gallinero, solo, se queda en 2,9) */
  .recorrido__hud .hud__actividades button { color: color-mix(in oklab, var(--c) 72%, var(--tinta)); }
}
.recorrido__hud .hud__actividades button::before {
  content: ''; flex: none; width: 0.42em; height: 0.42em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c); transition: background-color .2s ease;
}
.recorrido__hud .hud__actividades button:hover, .recorrido__hud .hud__actividades button:focus-visible,
.recorrido__hud .hud__actividades button.es-actual { text-decoration-color: currentColor; border: 0; }
.recorrido__hud .hud__actividades button:hover::before, .recorrido__hud .hud__actividades button:focus-visible::before,
.recorrido__hud .hud__actividades button.es-actual::before { background-color: var(--c); }
.recorrido__hud .hud__actividades button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

/* paso 5, la consultoría: la última frase, en el azul y más grande, separada un poco más */
.recorrido__hud .hud p.hud__frase {
  margin: 0.85em 0 0; max-width: none; font-weight: 400; font-size: calc(var(--hud-frase) * var(--escala-texto, 1)); line-height: 1.14;
  letter-spacing: -0.014em; font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; color: var(--azul-hondo); text-wrap: balance;
}

/* las etiquetas (Trayectoria, Prensa): como los títulos del dossier, con su filete hasta el final del bloque */
.recorrido__hud .hud p.hud__titulo {
  display: flex; align-items: center; gap: 14px; margin: 0 0 14px !important; font-family: var(--fuente-texto) !important;
  font-weight: 600 !important; font-size: var(--hud-etiqueta) !important; line-height: 1.2 !important; letter-spacing: 0.2em;
  text-transform: uppercase; font-variation-settings: normal; color: var(--azul-hondo) !important;
}
.recorrido__hud .hud p.hud__titulo::after { content: ''; flex: 1 1 auto; min-width: 3em; height: 1px; background: var(--filete); }

/* paso 7, la trayectoria: una cronología; la fecha en Inter de cifras tabulares, en el azul */
.recorrido__hud .hud__lineas { list-style: none; margin: 0; padding: 0; }
.recorrido__hud .hud__lineas li {
  margin: 0; padding: 0.55em 0; border-top: 1px solid var(--filete); font-family: var(--fuente-titulo); font-weight: 370;
  font-size: calc(var(--hud-cronologia) * var(--escala-texto, 1)); line-height: 1.42; font-variation-settings: "opsz" 16; color: var(--tinta); text-wrap: pretty;
}
.recorrido__hud .hud__lineas li:first-child { border-top: 0; padding-top: 0.1em; }
.recorrido__hud .hud__fecha { font: 600 12.5px/1 var(--fuente-texto); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.02em; color: var(--azul-hondo); white-space: nowrap; }
.recorrido__hud .hud__sep { color: var(--tinta-suave); }

/* paso 8, la prensa: la línea un poco mayor que la lectura, los dos botones y el correo */
.recorrido__hud .hud p.hud__entradilla { max-width: 34em; font-size: 1.08em; line-height: 1.42; text-wrap: balance; }
.recorrido__hud .hud p.hud__botones { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 1.15em 0 0; }
.recorrido__hud .hud a.hud__boton {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--azul-hondo); color: #fff; font: 600 14.5px/1 var(--fuente-texto); letter-spacing: 0.01em; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .25s var(--curva);
}
.recorrido__hud .hud a.hud__boton:hover { background: var(--azul-hondo-2); transform: translateY(-1px); }
.recorrido__hud .hud a.hud__boton--suave { background: transparent; color: var(--azul-hondo); box-shadow: inset 0 0 0 1.5px var(--azul-hondo); }
.recorrido__hud .hud a.hud__boton--suave:hover { background: var(--azul-hondo); color: #fff; }
.recorrido__hud .hud a.hud__boton:focus-visible { outline: 2px solid var(--azul-hondo); outline-offset: 3px; }
.recorrido__hud .hud p.hud__correo { margin: 1em 0 0; font: 500 15px/1.4 var(--fuente-texto); font-variation-settings: normal; }
.recorrido__hud .hud p.hud__correo a { padding-bottom: 2px; }

/* la ficha de una actividad: como la cartela de una sala de museo, junto a la sala */
.recorrido__ficha { font-size: var(--hud-lectura); }
.recorrido__ficha .ficha__tipo { margin: 0 0 0.95rem; font: 600 var(--hud-etiqueta)/1.35 var(--fuente-texto); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c, var(--tinta-suave)); }
@supports (color: color-mix(in oklab, red 50%, blue)) {
  .recorrido__ficha .ficha__tipo { color: color-mix(in oklab, var(--c, #5E6472) 66%, var(--tinta)); }
}
.recorrido__ficha .ficha__titulo {
  margin: 0 0 0.42em; font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(28px, 1vw + 1.4vh + 9px, 46px); line-height: 1.04;
  letter-spacing: -0.012em; font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0; color: var(--azul-hondo); text-wrap: balance;
}
.recorrido__ficha .ficha__texto {
  margin: 0 0 1.35em; font-family: var(--fuente-titulo); font-weight: 370; font-size: 1em; line-height: 1.52; font-variation-settings: "opsz" 18;
  color: var(--tinta); text-wrap: pretty;
}
.recorrido__ficha .ficha__alejar {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--azul-hondo);
  color: #fff; font: 600 14.5px/1 var(--fuente-texto); letter-spacing: 0.01em; cursor: pointer; transition: background-color .2s ease, transform .25s var(--curva);
}
.recorrido__ficha .ficha__alejar:hover { background: var(--azul-hondo-2); transform: translateY(-1px); }
.recorrido__ficha .ficha__alejar:focus-visible { outline: 2px solid var(--azul-hondo); outline-offset: 3px; }
/* el círculo alrededor de una sala: un trazo algo más fino */
.recorrido__circulo ellipse { stroke-width: 2.25; }

/* en apaisado: la medida de cada bloque y su sitio respecto a la escena (recorrido.js decide el lado; aquí, el ancho) */
@media (orientation: landscape) and (min-width: 700px) {
  /* el colegio: arriba a la derecha, sobre su planta; el índice, en una o dos filas, como la leyenda de un plano */
  #recorrido:not(.sin-3d) .hud[data-hud="primera"] { width: 34em; }
  .recorrido__hud .hud__actividades { flex-direction: row; flex-wrap: wrap; column-gap: 1.2em; row-gap: 0.1em; }
  #recorrido:not(.sin-3d) .hud[data-hud="baja"] { width: var(--hud-medida); }
  #recorrido:not(.sin-3d) .hud[data-hud="consultoria"] { max-width: min(var(--hud-medida), 46vw) !important; }
  #recorrido:not(.sin-3d) .hud[data-hud="trayectoria"] { max-width: min(37em, 56vw) !important; }
  /* el perfil: el retrato a la izquierda de los dos párrafos, con su borde de arriba a la altura de la primera línea */
  #recorrido:not(.sin-3d) .hud--perfil {
    display: grid; grid-template-columns: var(--hud-retrato) minmax(0, var(--hud-medida)); column-gap: var(--hud-hueco-retrato); align-items: start;
    max-width: min(calc(var(--hud-retrato) + var(--hud-hueco-retrato) + var(--hud-medida)), 64vw) !important;
  }
  #recorrido:not(.sin-3d) .hud--perfil > .hud__retrato { grid-column: 1; grid-row: 1 / span 2; width: auto; margin: 0.42em 0 0; }
  #recorrido:not(.sin-3d) .hud--perfil > p { grid-column: 2; }
  #recorrido:not(.sin-3d) .hud.hud--abajo { bottom: clamp(36px, 7vh, 80px); }
  /* la trayectoria: la fecha en su columna; el punto medio se queda para quien copia el texto o lo oye */
  .recorrido__hud .hud__lineas li > span { display: grid; grid-template-columns: 5.7rem minmax(0, 1fr); column-gap: 1.1em; align-items: baseline; }
  .recorrido__hud .hud__sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* la ficha, a media altura junto a la sala que la cámara deja sola a la derecha */
  #recorrido:not(.sin-3d) .recorrido__ficha { top: calc(50% + var(--barra) / 2); bottom: auto; translate: 0 -50%; max-width: min(25em, 36vw); }
}

/* en vertical, el bloque que no cabe y pasa por dentro: además del fundido de abajo, uno arriba en cuanto empieza a
   pasar (recorrido.js pone --dentro), para que la línea que sale por arriba no quede cortada en seco */
.recorrido__hud .hud.hud--recorta {
  -webkit-mask-image: linear-gradient(transparent, #000 min(calc(-1 * var(--dentro, 0px)), 26px), #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(transparent, #000 min(calc(-1 * var(--dentro, 0px)), 26px), #000 calc(100% - 30px), transparent);
}

/* en vertical: la misma jerarquía, a la medida del teléfono */
@media (orientation: portrait), (max-width: 699px) {
  #recorrido {
    --hud-lectura: clamp(16.5px, 1.1vw + 12.5px, 19px);
    --hud-lema: clamp(19px, 1.6vw + 13px, 24px);
    --hud-frase: clamp(20px, 2vw + 12.5px, 26px);
    --hud-indice: clamp(19px, 1.2vw + 14px, 22px);
    --hud-nombre: clamp(40px, 9vw + 10px, 64px);
    --hud-cronologia: clamp(15px, 0.8vw + 12px, 17px);
    --hud-etiqueta: 11px;
  }
  .recorrido__hud .hud p { line-height: 1.5; }
  .recorrido__hud .hud p.hud__cargo { font-size: 11.5px; letter-spacing: 0.14em; }
  .recorrido__hud .hud__retrato { float: left; width: 88px; margin: 0.32em 15px 6px 0; }
  .recorrido__hud .hud__actividades button { min-height: 44px; }
  .recorrido__hud .hud__lineas li { padding: 0.45em 0; }
}
@media (prefers-reduced-motion: reduce) {
  .recorrido__hud .hud__actividades button, .recorrido__hud .hud__actividades button::before, .recorrido__hud .hud a.hud__boton, .recorrido__ficha .ficha__alejar { transition: none; }
  .recorrido__hud .hud a.hud__boton:hover, .recorrido__ficha .ficha__alejar:hover { transform: none; }
}
/* (16 oct, Ernesto) el círculo de cada actividad, a cera: gordo, granulado, sin girar */
.recorrido__circulo .cera { fill: none; stroke: var(--c, #0f2a57); stroke-linecap: round; stroke-linejoin: round; }
.recorrido__circulo .cera--gorda { stroke-width: 8; opacity: 0.9; }
.recorrido__circulo .cera--fina { stroke-width: 3.5; opacity: 0.6; }
/* (16 oct) el bloque del colegio, en su franja de arriba, de lado a lado (el diseñador lo afina) */
@media (min-width: 700px) and (orientation: landscape) { .hud.hud--arriba { left: var(--margen-ancho); right: var(--margen-ancho); } }

/* ═══ SEGUNDA PASADA (16 oct 2026, tarde): inicio ═══
   La letra y el movimiento de los nueve pasos, rehechos. Los porqués, en palabras: informes/tipografia-de-los-pasos-16oct.md,
   sección «Segunda pasada». Va al final y manda sobre todo lo de arriba (lo de antes se deja como estaba, por si se vuelve).
   Tres voces, cada una con su trabajo:
   · los nombres (el suyo y los de sus obras y exposiciones): Fraunces de titular, fina y apretada;
   · lo que se dice: Inter, que en tamaño grande usa su propio dibujo de titular (eje de tamaño óptico);
   · los datos (oficio, etiquetas, fechas, tipo de ficha, correo): DM Mono, pequeña y en mayúsculas.
   Cinco tamaños y nada entre medias: nombre, frase, entrada, lectura y dato. El movimiento lo pone js/recorrido/texto-vivo.js
   (clases tv…); sin ese archivo, con «menos movimiento» o sin la escena en 3D, todo se ve quieto. */

#recorrido {
  --f-nombre: 'Osuna Serif 7', Georgia, serif;
  --f-voz: 'Osuna Sans', system-ui, sans-serif;
  --f-dato: 'Osuna Sans', system-ui, sans-serif;
  --tv-nombre: clamp(46px, min(8vw, 17vh), 150px);
  --tv-frase: clamp(30px, 2.2vw + 2vh, 60px);
  --tv-entrada: clamp(20px, 1.15vw + 1.25vh, 34px);
  --tv-lectura: clamp(16px, 0.32vw + 0.75vh + 5px, 18.5px);
  --tv-dato: 12px;
  --tv-gut: clamp(16px, 1.4vw, 28px);
  --tv-curva: cubic-bezier(0.16, 1, 0.3, 1);
  --tv-filete: rgba(28, 31, 43, 0.16);
}
/* la rejilla: doce columnas entre los dos márgenes de la pantalla (las medidas de columna valen dentro de los bloques) */
.recorrido__hud { container-type: inline-size; }
.recorrido__hud .hud { --tv-col: calc((100cqw - 2 * var(--margen-ancho) - 11 * var(--tv-gut)) / 12); }

/* ---------- la voz: la lectura de todos los bloques ---------- */
#recorrido .recorrido__hud .hud {
  font-family: var(--f-voz); font-size: calc(var(--tv-lectura) * var(--escala-texto, 1)); font-weight: 400; color: var(--tinta);
  font-optical-sizing: auto; font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
#recorrido .recorrido__hud .hud p {
  margin: 0 0 0.9em; max-width: 34em; font-family: var(--f-voz); font-weight: 400; font-size: 1em; line-height: 1.52; letter-spacing: -0.008em;
  font-variation-settings: normal; color: var(--tinta); text-wrap: pretty;
}
#recorrido .recorrido__hud .hud p:last-child { margin-bottom: 0; }
/* los nombres dentro de una frase (el término acuñado, las exposiciones): la letra de los nombres, en cursiva, a la altura de la x de Inter */
#recorrido .recorrido__hud .hud em, #recorrido .recorrido__ficha em {
  font-family: var(--f-nombre); font-style: italic; font-weight: 380; font-size: 1.14em; line-height: 1; letter-spacing: -0.006em;
  font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0;
}
/* la entrada: la línea que abre la prensa, en grande. El perfil y los museos van a medida de lectura: en los pasos de
   escalera el sitio libre es una franja baja, y un bloque alto se cruza con la escalera que baja */
#recorrido .recorrido__hud .hud p.hud__entradilla {
  max-width: 17em; font-size: calc(var(--tv-entrada) * var(--escala-texto, 1)); font-weight: 400; line-height: 1.16; letter-spacing: -0.021em; text-wrap: balance;
}

/* ---------- los datos: la letra de máquina ---------- */
#recorrido .recorrido__hud .hud p.hud__cargo, #recorrido .recorrido__hud .hud p.hud__titulo, #recorrido .recorrido__ficha .ficha__tipo {
  font-family: var(--f-dato) !important; font-weight: 400 !important; font-size: var(--tv-dato) !important; line-height: 1.45 !important;
  letter-spacing: 0.045em; text-transform: uppercase; font-variation-settings: normal; font-feature-settings: normal; color: var(--azul-hondo) !important;
}
#recorrido .recorrido__hud .hud p.hud__titulo { gap: 0.9em; max-width: none; margin: 0 0 1.35em !important; }
#recorrido .recorrido__hud .hud p.hud__titulo::after { height: 1px; min-width: 2em; background: var(--tv-filete); transform-origin: 0 50%; }
#recorrido .recorrido__hud .hud p.hud__correo { margin: 1.5em 0 0; font: 400 var(--tv-dato)/1.4 var(--f-dato); letter-spacing: 0.01em; }
#recorrido .recorrido__hud .hud p.hud__correo a { color: var(--azul-hondo); padding-bottom: 3px; border-bottom: 1px solid rgba(15, 42, 87, 0.3); transition: border-color .25s ease; }
#recorrido .recorrido__hud .hud p.hud__correo a:hover, #recorrido .recorrido__hud .hud p.hud__correo a:focus-visible { border-bottom-color: var(--azul-hondo); }

/* ---------- paso 2, el nombre ---------- */
#recorrido .recorrido__hud .hud__nombre {
  margin: 0 0 0 -0.062em; font-family: var(--f-nombre); font-weight: 300; font-size: calc(var(--tv-nombre) * var(--escala-texto, 1)); line-height: 0.9;
  letter-spacing: -0.046em; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; color: var(--azul-hondo); white-space: nowrap;
}
#recorrido .recorrido__hud .hud p.hud__cargo { margin: 0; max-width: none; text-wrap: balance; }
#recorrido .recorrido__hud .hud p.hud__lema {
  margin: 0; max-width: none; font-family: var(--f-voz); font-weight: 420; font-size: calc(var(--tv-entrada) * var(--escala-texto, 1)); line-height: 1.12;
  letter-spacing: -0.026em; font-variation-settings: normal; color: var(--azul-hondo); text-wrap: balance;
}

/* ---------- paso 4, el colegio: la frase de entrada y, debajo, las cinco obras como la leyenda de un plano ---------- */
/* un filete fino de lado a lado y, sobre él, encima de cada nombre, una pestaña corta de su color (el del círculo que se dibuja
   en su sala); al señalar el nombre, o su sala en la maqueta, la pestaña se alarga hasta cubrir el nombre entero */
#recorrido .recorrido__hud .hud[data-hud="primera"] > p { max-width: none; margin: 0; font-weight: 400; line-height: 1.2; letter-spacing: -0.017em; color: var(--tinta); }
#recorrido .recorrido__hud .hud__actividades {
  --tv-pt: clamp(12px, 1.8vh, 18px);
  position: relative; list-style: none; margin: clamp(14px, 2.3vh, 22px) 0 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0;
}
#recorrido .recorrido__hud .hud__actividades li { position: relative; margin: 0; padding: var(--tv-pt) 0 0; }
#recorrido .recorrido__hud .hud__actividades li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--tv-filete); transform-origin: 0 50%; }
#recorrido .recorrido__hud .hud__actividades button {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 0 0.16em; border: 0; border-radius: 0;
  background: none; cursor: pointer; text-align: left; white-space: nowrap; color: var(--c);
  font-family: var(--f-nombre); font-weight: 340; font-size: calc(var(--tv-obra, 24px) * var(--escala-texto, 1)); line-height: 1.04; letter-spacing: -0.022em;
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; text-decoration: none; transition: none;
}
@supports (color: color-mix(in oklab, red 50%, blue)) {
  #recorrido .recorrido__hud .hud__actividades button { color: color-mix(in oklab, var(--c) 76%, var(--tinta)); }
}
#recorrido .recorrido__hud .hud__actividades button::before {
  content: ''; position: absolute; left: 0; top: calc(-1 * var(--tv-pt) - 1px); width: 100%; height: 3px; margin: 0; border-radius: 0; box-shadow: none;
  background: var(--c); --tv-pestana: calc(100% - 1.15em); clip-path: inset(0 var(--tv-pestana) 0 0); transition: clip-path .42s var(--tv-curva);
}
#recorrido .recorrido__hud .hud__actividades button::after { content: none; }
#recorrido .recorrido__hud .hud__actividades button:hover::before, #recorrido .recorrido__hud .hud__actividades button:focus-visible::before,
#recorrido .recorrido__hud .hud__actividades button.es-actual::before { --tv-pestana: 0%; }
#recorrido .recorrido__hud .hud__actividades button:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; text-decoration: none; }

/* ---------- paso 5, la consultoría: la frase final, a tamaño de frase ---------- */
#recorrido .recorrido__hud .hud p.hud__frase {
  margin: 1.15em 0 0; max-width: none; font-family: var(--f-voz); font-weight: 420; font-size: calc(var(--tv-frase) * var(--escala-texto, 1)); line-height: 0.99;
  letter-spacing: -0.038em; font-variation-settings: normal; color: var(--azul-hondo); text-wrap: balance;
}

/* ---------- paso 7, la trayectoria: una tabla de años y hechos, con filetes ---------- */
#recorrido .recorrido__hud .hud__lineas li {
  position: relative; padding: 0.62em 0; border-top: 0; font-family: var(--f-voz); font-weight: 400; font-size: calc(var(--tv-lectura) * 0.94 * var(--escala-texto, 1));
  line-height: 1.42; letter-spacing: -0.006em; font-variation-settings: normal; color: var(--tinta); text-wrap: balance;
}
#recorrido .recorrido__hud .hud__lineas li:first-child { padding-top: 0.15em; }
#recorrido .recorrido__hud .hud__lineas li + li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--tv-filete); transform-origin: 0 50%; }
#recorrido .recorrido__hud .hud__fecha { font: 400 var(--tv-dato)/1 var(--f-dato); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--azul-hondo); }

/* ---------- paso 8, la prensa: dos botones que se llenan y el correo ---------- */
#recorrido .recorrido__hud .hud p.hud__botones { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 1.6em 0 0; max-width: none; }
#recorrido .recorrido__hud .hud a.hud__boton, #recorrido .recorrido__ficha .ficha__alejar {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.62em; min-height: 48px; padding: 0 21px 0 23px;
  border: 0; border-radius: 999px; background: none; box-shadow: none; color: #fff; cursor: pointer;
  font: 500 14.5px/1 var(--f-voz); letter-spacing: -0.004em; text-decoration: none; transform: none; transition: color .25s ease;
}
#recorrido .recorrido__hud .hud a.hud__boton::before, #recorrido .recorrido__ficha .ficha__alejar::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--azul-hondo); transition: background-color .25s ease;
}
#recorrido .recorrido__hud .hud a.hud__boton:hover, #recorrido .recorrido__ficha .ficha__alejar:hover { background: none; transform: none; }
#recorrido .recorrido__hud .hud a.hud__boton:hover::before, #recorrido .recorrido__ficha .ficha__alejar:hover::before { background: var(--azul-hondo-2); }
#recorrido .recorrido__hud .hud a.hud__boton--suave { color: var(--azul-hondo); box-shadow: none; }
#recorrido .recorrido__hud .hud a.hud__boton--suave::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--azul-hondo); }
#recorrido .recorrido__hud .hud a.hud__boton--suave:hover { color: #fff; }
#recorrido .recorrido__hud .hud a.hud__boton--suave:hover::before { background: var(--azul-hondo); }
/* la flecha de cada botón: hacia abajo (el dossier está más abajo) o la de descargar; al señalar, baja un poco */
#recorrido .recorrido__hud .hud a.hud__boton::after {
  content: ''; flex: none; width: 15px; height: 15px; background: currentColor; transition: transform .3s var(--tv-curva);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.2v10.6M3.6 8.6 8 13l4.4-4.4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.2v10.6M3.6 8.6 8 13l4.4-4.4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#recorrido .recorrido__hud .hud a.hud__boton[download]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8v8.6M4.2 6.8 8 10.6l3.8-3.8M2.8 14.2h10.4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8v8.6M4.2 6.8 8 10.6l3.8-3.8M2.8 14.2h10.4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#recorrido .recorrido__hud .hud a.hud__boton:hover::after, #recorrido .recorrido__hud .hud a.hud__boton:focus-visible::after { transform: translateY(2px); }
/* (22 oct) el dossier ya no está debajo, sino en su página (prensa.html): su botón lleva la flecha hacia la derecha */
#recorrido .recorrido__hud .hud a.hud__boton[href^="prensa.html"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.2 8h10.6M8.6 3.6 13 8l-4.4 4.4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.2 8h10.6M8.6 3.6 13 8l-4.4 4.4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#recorrido .recorrido__hud .hud a.hud__boton[href^="prensa.html"]:hover::after, #recorrido .recorrido__hud .hud a.hud__boton[href^="prensa.html"]:focus-visible::after { transform: translateX(2px); }
#recorrido .recorrido__hud .hud a.hud__boton:focus-visible, #recorrido .recorrido__ficha .ficha__alejar:focus-visible { outline: 2px solid var(--azul-hondo); outline-offset: 3px; }

/* ---------- la ficha de una actividad: la cartela de la sala ---------- */
#recorrido .recorrido__ficha { font-family: var(--f-voz); font-size: var(--tv-lectura); font-optical-sizing: auto; color: var(--tinta); -webkit-font-smoothing: antialiased; }
#recorrido .recorrido__ficha .ficha__tipo { margin: 0 0 1.1rem; color: var(--azul-hondo) !important; }
#recorrido .recorrido__ficha .ficha__titulo {
  margin: 0 0 0.3em -0.05em; font-family: var(--f-nombre); font-weight: 300; font-size: calc(var(--tv-frase) * 1.14); line-height: 0.94; letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; color: var(--c, var(--azul-hondo)); text-wrap: balance;
}
@supports (color: color-mix(in oklab, red 50%, blue)) {
  #recorrido .recorrido__ficha .ficha__titulo { color: color-mix(in oklab, var(--c, #0F2A57) 74%, var(--tinta)); }
}
#recorrido .recorrido__ficha .ficha__texto {
  margin: 0 0 1.6em; font-family: var(--f-voz); font-weight: 400; font-size: 1em; line-height: 1.52; letter-spacing: -0.008em; font-variation-settings: normal;
  color: var(--tinta); text-wrap: pretty;
}
#recorrido .recorrido__ficha .ficha__texto a { color: var(--azul-hondo); border-bottom: 1px solid rgba(15, 42, 87, 0.3); text-decoration: none; transition: border-color .25s ease; }
#recorrido .recorrido__ficha .ficha__texto a:hover { border-bottom-color: var(--azul-hondo); }

/* ---------- en apaisado: la composición de cada bloque sobre la rejilla ---------- */
@media (orientation: landscape) and (min-width: 700px) {
  /* el nombre: a lo ancho; debajo, la fila se parte donde se parte el nombre: el oficio bajo «Ernesto» y el lema bajo «Osuna»
     (la columna mide lo que mide «Ernesto » en la letra del nombre), los dos en la misma línea de base */
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="nombre"] {
    display: grid; grid-template-columns: calc(var(--tv-nombre) * var(--escala-texto, 1) * 2.62 - var(--tv-gut)) auto; column-gap: var(--tv-gut);
    row-gap: clamp(20px, 3.6vh, 40px); align-items: baseline;
    max-width: none !important;               /* la caja del bloque llega hasta el final del lema: recorrido.js la mide entera */
  }
  #recorrido:not(.sin-3d) .hud[data-hud="nombre"] .hud__nombre { grid-column: 1 / -1; }
  #recorrido:not(.sin-3d) .hud[data-hud="nombre"] .hud__cargo { grid-column: 1; grid-row: 2; }
  #recorrido:not(.sin-3d) .hud[data-hud="nombre"] .hud__lema { grid-column: 2; grid-row: 2; }
  #recorrido:not(.sin-3d) .hud[data-hud="nombre"] .hud__lema .hud__verso { white-space: nowrap; }

  /* el perfil: el retrato en las dos primeras columnas y el texto al lado; el borde de arriba del retrato, a la altura de las mayúsculas */
  #recorrido:not(.sin-3d) .recorrido__hud .hud--perfil {
    display: grid; grid-template-columns: calc(1.5 * var(--tv-col) + 0.5 * var(--tv-gut)) minmax(0, 33em); column-gap: var(--tv-gut); align-items: start;
    max-width: min(calc(1.5 * var(--tv-col) + 1.5 * var(--tv-gut) + 33em), 60vw) !important;
  }
  #recorrido:not(.sin-3d) .recorrido__hud .hud--perfil > .hud__retrato { grid-column: 1; grid-row: 1 / span 2; width: auto; aspect-ratio: 4 / 5; margin: 0.36em 0 0; }
  #recorrido:not(.sin-3d) .recorrido__hud .hud--perfil > p { grid-column: 2; max-width: none; }

  /* el colegio: una franja arriba, de margen a margen. La frase, en una línea; las cinco obras, en una fila de lado a lado */
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="primera"] { width: auto; max-width: none !important; --tv-obra: min(calc(var(--tv-entrada) * 1.3), calc((100cqw - 2 * var(--margen-ancho)) / 46)); }
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="primera"] > p { font-size: max(16px, min(var(--tv-entrada), calc((100cqw - 2 * var(--margen-ancho)) / 63))); }
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="primera"] .hud__actividades { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; column-gap: 1.2em; }
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="primera"] .hud__actividades::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--tv-filete); transform-origin: 0 50%; }
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="primera"] .hud__actividades li::before { content: none; }
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="primera"] .hud__actividades button { min-height: 1.5em; }

  /* la consultoría: tres párrafos a medida de lectura y la frase, más ancha, debajo */
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="consultoria"] { max-width: min(46vw, 760px) !important; }
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="consultoria"] > p:not(.hud__frase) { max-width: 33em; }
  /* la trayectoria: la fecha en su columna, en la letra de los datos */
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="trayectoria"] { max-width: min(40em, 44vw) !important; }
  #recorrido .recorrido__hud .hud__lineas li > span { grid-template-columns: 6.4rem minmax(0, 1fr); column-gap: 1em; }
  /* la ficha, a media altura junto a la sala */
  #recorrido:not(.sin-3d) .recorrido__ficha { max-width: min(26em, 34vw); }
}

/* ---------- en vertical: lo mismo, a la medida del teléfono ---------- */
@media (orientation: portrait), (max-width: 699px) {
  #recorrido {
    --tv-nombre: clamp(44px, 13.4vw, 64px);
    --tv-frase: clamp(28px, 7.6vw, 40px);
    --tv-entrada: clamp(20px, 5.5vw, 26px);
    --tv-lectura: clamp(16px, 1.1vw + 12px, 17.5px);
    --tv-dato: 11px;
  }
  #recorrido .recorrido__hud .hud p.hud__cargo { margin: clamp(10px, 1.6vh, 16px) 0 0; }
  #recorrido .recorrido__hud .hud p.hud__lema { margin: clamp(14px, 2.2vh, 22px) 0 0; }
  #recorrido .recorrido__hud .hud__actividades { --tv-obra: 24px; gap: 0; }
  #recorrido .recorrido__hud .hud__retrato { float: left; width: 92px; margin: 0.3em 16px 6px 0; }
  #recorrido .recorrido__hud .hud p.hud__frase { margin-top: 1.2em; }
  #recorrido .recorrido__hud .hud__lineas li { padding: 0.5em 0; }
  #recorrido .recorrido__ficha .ficha__titulo { font-size: calc(var(--tv-frase) * 1.1); }
}

/* ---------- el movimiento (con js/recorrido/texto-vivo.js) ---------- */
/* el bloque entero ya no se desliza al encenderse: se enciende antes y son sus líneas las que entran (las animaciones las pone
   texto-vivo.js con element.animate); --desliza sigue (lo que no cabe en la pantalla sube mientras dura el paso) */
#recorrido:not(.sin-3d) .recorrido__hud .hud.tv { opacity: clamp(0, calc(var(--o, 0) * 3), 1); transform: translate3d(0, var(--desliza, 0px), 0); }
/* --o y --desliza los pone recorrido.js en cada bloque, en cada fotograma de un fundido, y solo los usa el propio bloque: como
   no se heredan, cambiarlos ya no obliga al navegador a recalcular cada palabra que lleva dentro */
@property --o { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --desliza { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* cada palabra, en su máscara: la máscara deja sitio a los acentos, a las cursivas y a lo que baja de la línea. Las piezas no
   llevan variables: así, cuando recorrido.js cambia --o en cada fotograma de un fundido, el navegador no recalcula cada palabra */
#recorrido .tv .tv-m { display: inline-block; clip-path: inset(-0.3em -0.5em -0.34em -0.5em); }
#recorrido .tv .tv-i { display: inline-block; transform-origin: 0 100%; }
#recorrido .tv .hud__retrato img { transform-origin: 50% 70%; }

/* sin la escena en 3D (los bloques seguidos en el papel): todo en su sitio, quieto */
#recorrido.sin-3d .tv .tv-i, #recorrido.sin-3d .tv .hud__retrato img { transform: none !important; }
#recorrido.sin-3d .tv .hud__retrato, #recorrido.sin-3d .tv a.hud__boton::before { clip-path: none !important; }
#recorrido.sin-3d .tv li::before, #recorrido.sin-3d .tv .hud__titulo::after, #recorrido.sin-3d .tv .hud__actividades::before { transform: none !important; }
#recorrido.sin-3d .tv .hud__actividades button::before { opacity: 1 !important; clip-path: inset(0 var(--tv-pestana) 0 0) !important; }
#recorrido.sin-3d .tv a.hud__boton::after { opacity: 1 !important; transform: none !important; }
#recorrido.sin-3d .tv .hud__correo a { border-bottom-color: rgba(15, 42, 87, 0.3) !important; }

@media (prefers-reduced-motion: reduce) {
  #recorrido .recorrido__hud .hud__actividades button::before, #recorrido .recorrido__hud .hud__actividades button::after,
  #recorrido .recorrido__hud .hud a.hud__boton::after, #recorrido .recorrido__hud .hud a.hud__boton::before { transition: none; }
}
/* ═══ SEGUNDA PASADA: fin ═══ */

/* (19 oct, Ernesto: «use the new font we just made for the Ernesto Osuna name, in black and in big») el nombre, en la letra
   propia (Osuna Serif 5.000, materiales/tipografia-ernesto-osuna/fuentes-serif-v5/), en negro y grande */
@font-face { font-family: 'Osuna Serif'; src: url('../fuentes/osuna-serif/OsunaSerif-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Osuna Serif'; src: url('../fuentes/osuna-serif/OsunaSerif-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
#recorrido { --tv-nombre: clamp(60px, min(11vw, 23vh), 210px); }
#recorrido .recorrido__hud .hud__nombre, .hud__nombre {
  font-family: 'Osuna Serif 7', Georgia, serif;   /* (19 oct, encargo de la letra) antes, Osuna Serif 5.000 */ font-weight: 400; font-variation-settings: normal;
  letter-spacing: -0.015em; color: #111;
}
@media (orientation: portrait), (max-width: 699px) { #recorrido { --tv-nombre: clamp(52px, 15.5vw, 84px); } }

/* (19 oct, tarde, Ernesto: «quita el subtexto y pon una sola línea escrita en la fuente secundaria que usan en Collins»)
   bajo el nombre, una sola línea en Osuna Sans (la palo seco del estudio, medida sobre Graphik, la de wearecollins.com;
   materiales/tipografia-ernesto-osuna/fuentes-sans/), en minúsculas y en negro, del ancho del nombre */
#recorrido .recorrido__hud .hud[data-hud="nombre"] p.hud__cargo {
  grid-column: 1 / -1; margin: clamp(10px, 1.8vh, 20px) 0 0; max-width: none; white-space: nowrap;
  font-family: 'Osuna Sans', system-ui, sans-serif !important; font-weight: 400 !important; line-height: 1.2 !important;
  font-size: calc(clamp(17px, 0.55vw + 0.8vh + 6px, 26px) * var(--escala-texto, 1)) !important;
  letter-spacing: -0.005em; text-transform: none; color: #111 !important;   /* (la regla de los datos lo fuerza con !important) */
}
@media (orientation: portrait), (max-width: 699px) { #recorrido .recorrido__hud .hud[data-hud="nombre"] p.hud__cargo { white-space: normal; } }

/* (19 oct, tarde, Ernesto: «write the text block using our high tier design style composition and enmaquetación on the top
   right like I drew») el colegio, arriba a la derecha, sobre la retícula de doce columnas: ocupa las cinco de la derecha. La
   frase de entrada, en la serifa, a tamaño de entradilla; debajo, las cinco obras como la leyenda de un plano, en dos
   columnas, cada una con su filete y la pestaña de su color */
@media (min-width: 700px) and (orientation: landscape) {
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der {
    left: auto; right: var(--margen-ancho); width: calc(5 * var(--tv-col) + 4 * var(--tv-gut)); max-width: none !important;
    --tv-obra: clamp(17px, 0.62vw + 0.75vh + 4px, 26px);
  }
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der > p {
    font-family: var(--f-nombre); font-weight: 400; font-size: calc(clamp(20px, 0.9vw + 0.8vh + 5px, 34px) * var(--escala-texto, 1));
    line-height: 1.16; letter-spacing: -0.016em; text-wrap: pretty; color: var(--tinta);
  }
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der .hud__actividades {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--tv-gut); row-gap: 0; margin-top: clamp(20px, 3.2vh, 36px);
  }
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der .hud__actividades::before { content: none; }
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der .hud__actividades li { padding: var(--tv-pt) 0 clamp(8px, 1.2vh, 14px); }
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der .hud__actividades li::before { content: ''; }
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der .hud__actividades button { min-height: 1.4em; white-space: normal; }
}

/* ---------- (21 oct) las siete secciones: exposiciones, la foto de las charlas, las filas de la trayectoria y la despedida ---------- */
#recorrido .recorrido__hud .hud p.hud__expo { margin: 1.15em 0 0.3em; max-width: none; font: 400 var(--tv-dato)/1.45 var(--f-dato); letter-spacing: 0.02em; color: var(--tinta-suave); }
#recorrido .recorrido__hud .hud p.hud__expo em { font-size: 1.85em; font-weight: 400; color: var(--tinta); letter-spacing: -0.01em; }
#recorrido .recorrido__hud .hud__que { font-weight: 560; }
#recorrido .recorrido__hud .hud__foto { margin: 0 0 1.1em; width: min(100%, 21em); aspect-ratio: 980 / 747; overflow: hidden; }
#recorrido .recorrido__hud .hud__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
#recorrido .recorrido__hud .hud--despedida { top: calc(var(--barra) + 7vh); }
#recorrido .recorrido__hud .hud--despedida p.hud__frase { margin: 0; max-width: 20em; font-size: calc(var(--tv-frase) * 0.7 * var(--escala-texto, 1)); }
@media (orientation: portrait), (max-width: 699px) {
  #recorrido .recorrido__hud .hud__foto { width: min(100%, 18em); }
}
/* (21 oct) en apaisado, la lista de la trayectoria y la biografía, si no caben, pasan por dentro de su ventana como en el teléfono */
#recorrido:not(.sin-3d) .recorrido__hud .hud.hud--recorta { overflow: hidden; }

/* ═══ (21 oct 2026, Ernesto) LA LETRA DE COLLINS, CON LAS NUESTRAS, A LA MEDIDA C ═══
   «the font does not fit the collins reference, we made fonts exactly for this» y «do 40%» (la C de la hoja de tamaños):
   el reparto de wearecollins.com con nuestras dos letras. Todo lo que se dice (frases y párrafos), en Osuna Serif 7; las
   etiquetas, las listas y los botones, en Osuna Sans; un solo grosor (400), la jerarquía por el tamaño y el gris (nunca la
   negrita) y todo en el color de la tinta. Las medidas, las de la maqueta en la pantalla de 1890 px de Ernesto, en vw para que
   crezcan con la pantalla: lectura 25,9 px, entrada 36,4, lista 23,8 con su nota a 16,2, etiqueta 15 y despedida 47,6.
   La maqueta y sus porqués: _maqueta-siete-secciones-20oct/sistema/. Va al final y manda sobre todo lo de arriba (lo de
   antes se deja como estaba, por si se vuelve). En vertical (el teléfono) no cambia nada: Ernesto lo define después */
@media (orientation: landscape) and (min-width: 700px) {
  #recorrido {
    --f-dicho: 'Osuna Serif 7', Georgia, serif;
    --f-nombre: 'Osuna Serif 7', Georgia, serif;
    --f-voz: 'Osuna Sans', system-ui, sans-serif;
    --f-dato: 'Osuna Sans', system-ui, sans-serif;
    --c-lectura: clamp(17px, 1.37vw, 30px);
    --c-entrada: clamp(22px, 1.93vw, 42px);
    --c-lista: clamp(16px, 1.26vw, 27px);
    --c-nota: clamp(13px, 0.86vw, 18.5px);
    --c-etiqueta: clamp(13px, 0.8vw, 17px);
    --c-frase: clamp(28px, 2.52vw, 54px);
    --c-gris: rgba(28, 31, 43, 0.56);
    --papel-escena: rgb(244, 242, 238);
  }
  /* lo que se dice: la serifa, lectura 1,3 y −0,01; unas 50 letras por línea */
  #recorrido .recorrido__hud .hud { font-family: var(--f-dicho); font-size: calc(var(--c-lectura) * var(--escala-texto, 1)); }
  #recorrido .recorrido__hud .hud p { font-family: var(--f-dicho); font-weight: 400; font-size: 1em; line-height: 1.3; letter-spacing: -0.01em; max-width: 21.5em; color: var(--tinta); }
  #recorrido .recorrido__hud .hud em, #recorrido .recorrido__ficha em { font-family: var(--f-dicho); font-style: italic; font-weight: 400; font-size: 1em; line-height: inherit; letter-spacing: inherit; font-variation-settings: normal; }
  /* la primera frase de cada sección, más grande: frase 1,08 y −0,02 */
  #recorrido .recorrido__hud .hud p.hud__lema {
    margin: 0 0 0.6em; max-width: 15.5em; font-family: var(--f-dicho); font-weight: 400; font-size: calc(var(--c-entrada) * var(--escala-texto, 1));
    line-height: 1.08; letter-spacing: -0.02em; color: var(--tinta); text-wrap: pretty;
  }
  /* la etiqueta de cada sección: la palo seco pequeña, en minúscula, como «Programs» de Collins; sin filete */
  #recorrido .recorrido__hud .hud p.hud__titulo, #recorrido .recorrido__ficha .ficha__tipo {
    display: block; margin: 0 0 1.4em !important; font-family: var(--f-voz) !important; font-weight: 400 !important; font-size: var(--c-etiqueta) !important;
    line-height: 1.2 !important; letter-spacing: -0.01em; text-transform: none; color: var(--tinta) !important;
  }
  #recorrido .recorrido__hud .hud p.hud__titulo::after { content: none; }
  /* la obra (arriba a la derecha): su frase, a tamaño de entrada */
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der > p:not(.hud__titulo) {
    font-family: var(--f-dicho); font-weight: 400; font-size: calc(var(--c-entrada) * var(--escala-texto, 1)); line-height: 1.08; letter-spacing: -0.02em; max-width: none;
  }
  /* la trayectoria: una fila por entrada, como la lista de Collins; el año y la explicación en gris y más pequeños */
  #recorrido .recorrido__hud .hud__lineas li {
    padding: 0 0 0.62em; font-family: var(--f-voz); font-weight: 400; font-size: calc(var(--c-lista) * var(--escala-texto, 1)); line-height: 1.2;
    letter-spacing: -0.005em; color: var(--tinta); text-wrap: pretty;
  }
  #recorrido .recorrido__hud .hud__lineas li:first-child { padding-top: 0; }
  #recorrido .recorrido__hud .hud__lineas li + li::before { content: none; }
  #recorrido .recorrido__hud .hud__lineas li > span { display: grid; grid-template-columns: 6.8em 15.5em minmax(0, 1fr); column-gap: 1em; align-items: baseline; }
  #recorrido .recorrido__hud .hud__fecha, #recorrido .recorrido__hud .hud__como {
    font: 400 calc(var(--c-nota) * var(--escala-texto, 1))/1.45 var(--f-voz); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--c-gris);
  }
  #recorrido .recorrido__hud .hud__que { font-weight: 400; }
  #recorrido .recorrido__hud .hud .pendiente { color: var(--c-gris); }
  /* la despedida */
  #recorrido .recorrido__hud .hud--despedida p.hud__frase {
    max-width: 13em; font-family: var(--f-dicho); font-weight: 400; font-size: calc(var(--c-frase) * var(--escala-texto, 1)); line-height: 1.08;
    letter-spacing: -0.02em; color: var(--tinta); text-wrap: pretty;
  }
  /* la ficha (las actividades del colegio y las dos exposiciones): el nombre y su explicación en la serifa */
  #recorrido .recorrido__ficha { font-family: var(--f-dicho); font-size: var(--c-lectura); max-width: min(22em, 34vw); }
  #recorrido .recorrido__ficha .ficha__titulo { font-family: var(--f-dicho); font-weight: 400; font-size: var(--c-frase); line-height: 1.02; letter-spacing: -0.02em; }
  #recorrido .recorrido__ficha .ficha__texto { font-family: var(--f-dicho); font-size: 1em; line-height: 1.3; letter-spacing: -0.01em; }
  #recorrido .recorrido__ficha .ficha__tipo:empty { display: none; }
  #recorrido .recorrido__hud .hud a.hud__boton, #recorrido .recorrido__ficha .ficha__alejar { font-weight: 400; }
}

/* ═══ (21 oct) EL VIAJE: en los pasos de escalera, el texto baja junto a la escalera grande ═══
   (Ernesto: «the stairs can be seamlessly lengthened to fit any text length» y «trayectoria should be parallel to the big
   stairs so it is scrolled all the way from floor to floor»). Mientras se lee, la cámara baja por la escalera grande y la
   escalera se queda en la misma línea de la pantalla: el bloque es una ventana con los lados paralelos a ella, pegada a ella,
   de arriba abajo; el texto corre por dentro a lo largo de la escalera, escalonado con su pendiente, y se deshace en el papel
   por arriba y por abajo. Puede pasar por delante de las escaleras lejanas (desvaídas en la niebla): un halo del color del
   papel las aparta de las letras. La forma, el sitio y el paso los pone recorrido.js (colocarViaje y ponerHud) */
#recorrido:not(.sin-3d) .recorrido__hud .hud.hud--viaje, #recorrido:not(.sin-3d) .recorrido__hud .hud.tv.hud--viaje {
  inset: 0; width: auto; height: auto; max-width: none !important; max-height: none; transform: none; pointer-events: none !important; overflow: visible;
}
#recorrido:not(.sin-3d) .hud--viaje > .hud__titulo { position: absolute; left: var(--etq-x, 0px); top: var(--etq-y, 0px); }
#recorrido:not(.sin-3d) .hud--viaje > .hud__retrato { position: absolute; margin: 0; width: auto; aspect-ratio: auto; box-shadow: none; filter: drop-shadow(0 12px 18px rgba(28, 31, 43, 0.16)); transition: opacity .45s ease; }
#recorrido:not(.sin-3d) .hud--viaje > .hud__retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; clip-path: var(--forma); }
#recorrido:not(.sin-3d) .hud--viaje > .hud__retrato.es-oculta { opacity: 0; }
#recorrido:not(.sin-3d) .hud--viaje .hud__ventana { position: absolute; inset: 0; clip-path: var(--ventana); -webkit-mask-image: var(--funde); mask-image: var(--funde); }
#recorrido:not(.sin-3d) .hud--viaje .hud__corre {
  position: absolute; left: var(--corre-x, 0px); top: var(--corre-y, 0px); width: var(--corre-ancho, 30em); pointer-events: auto;
  transform: translate3d(var(--vx, 0px), var(--vy, 0px), 0);
  text-shadow: 0 0 3px var(--papel-escena, #F4F2EE), 0 0 7px var(--papel-escena, #F4F2EE), 0 0 12px rgba(244, 242, 238, 0.8);
}
#recorrido:not(.sin-3d) .hud--viaje .hud__corre p { max-width: none; }
/* la segunda foto de la biografía solo existe en el viaje (sin 3D, el retrato basta) */
.hud__retrato--otra { display: none; }
#recorrido:not(.sin-3d) .hud--viaje > .hud__retrato--otra { display: block; }

/* ═══ (21 oct) CHARLAS Y EXPOSICIONES: el nombre de cada exposición, junto a su sala y en paralelo a ella ═══
   (js/recorrido/exposiciones.js los coloca en cada fotograma; al pulsar uno, la cámara se acerca a su sala y su explicación sale
   en la ficha, al lado de la sala: la de la izquierda a su izquierda y la de la derecha a su derecha) */
#recorrido:not(.sin-3d) .hud__expo-bloque { display: none; }
#recorrido.sin-3d .hud__expo-bloque { margin-top: 1.2em; }
#recorrido .hud__expo-nombre { margin-bottom: 0.3em !important; }
#recorrido .hud__expo-cuando { font: 400 var(--c-etiqueta, 13px)/1 var(--f-voz, sans-serif); color: var(--c-gris, #5E6472); }
.recorrido__expo {
  position: absolute; left: 0; top: 0; z-index: 3; margin: 0; padding: 0.06em 0.1em; border: 0; border-radius: 2px; background: none; cursor: pointer;
  font: italic 400 clamp(20px, 1.75vw, 38px)/1 'Osuna Serif 7', Georgia, serif; letter-spacing: -0.01em; color: var(--tinta, #1C1F2B); white-space: nowrap;
  transform-origin: 0 50%; opacity: 0; pointer-events: none; transition: opacity .4s ease;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.16em;
  text-shadow: 0 0 4px rgb(244, 242, 238), 0 0 9px rgb(244, 242, 238);
}
.recorrido__expo.es-visible { opacity: 1; pointer-events: auto; }
.recorrido__expo:hover, .recorrido__expo:focus-visible { text-decoration-color: currentColor; outline: none; }
#recorrido.esta-cerca .recorrido__expo { opacity: 0 !important; pointer-events: none !important; }
#recorrido.sin-3d .recorrido__expo { display: none; }
@media (orientation: landscape) and (min-width: 700px) {
  #recorrido:not(.sin-3d) .recorrido__ficha.ficha--der { left: auto; right: var(--margen-ancho); }
}

/* ═══ (21 oct) LO QUE CAMBIA CON LA LETRA C EN EL PASEO, EN APAISADO ═══
   · la obra, arriba a la derecha (Ernesto: «obra 1 must appear on the top of obra instead, top right»): un bloque más ancho y
     las cinco obras en tres columnas, para que el bloque acabe antes que las salas;
   · el colegio, sin bloque: «Charlas y encargos» no está entre los textos finales de Ernesto; las charlas van ahora con las
     exposiciones;
   · la despedida, junto al colegio entero, no cabe: su bloque del paseo se calla.
   (22 oct, Ernesto: «add this to the corner of the final school scene») la frase de la despedida va sola, arriba a la izquierda
   de la vista del instituto con su granja (el bloque del paso «escuela»): la del papel libre de su captura. Con la letra y la
   medida de la frase de la obra; recorrido.js (colocarHud) la baja de tamaño si no cabe encima de la escena. Sin 3D y en
   vertical, ese bloque sigue con las charlas y la frase cierra el paseo en su bloque de siempre */
.hud .hud__esquina { display: none; }
@media (orientation: landscape) and (min-width: 700px) {
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der { width: calc(6 * var(--tv-col) + 5 * var(--tv-gut)); }
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der .hud__actividades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="escuela"] > :not(.hud__esquina) { display: none; }
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="escuela"] > p.hud__esquina {
    display: block; margin: 0; max-width: 22em; font-family: var(--f-dicho); font-weight: 400; font-size: calc(var(--c-entrada) * var(--escala-texto, 1));
    line-height: 1.08; letter-spacing: -0.02em; color: var(--tinta); text-wrap: pretty; font-variation-settings: normal;
  }
  #recorrido:not(.sin-3d) .recorrido__hud .hud--despedida { display: none; }
}

/* ═══ (21 oct, Ernesto) LAS OBRAS, DENTRO DE LA FRASE DE LA OBRA ═══
   «"juegos serios" debe ser un playful texto de color, en la misma fuente pero animado de forma que flote e invite a ser
   clicado, y que al hacer hovering over it active el círculo alrededor del juego del marcapáginas … así con todos»: cada
   obra va en su color, en la letra de la frase, y flota palabra a palabra (cada palabra, a su ritmo: texto-vivo.js las parte);
   al señalarla, su círculo de cera en la sala y la obra más viva; al pulsarla, la cámara se acerca (actividades.js) */
#recorrido .recorrido__hud .hud button.hud__obra {
  display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit;
  line-height: inherit; text-align: inherit; color: var(--c); -webkit-tap-highlight-color: transparent;
}
@supports (color: color-mix(in oklab, red 50%, blue)) {
  /* un punto más hondo que su color, para que se lea bien sobre el papel */
  #recorrido .recorrido__hud .hud button.hud__obra { color: color-mix(in oklab, var(--c) 80%, var(--tinta)); }
}
#recorrido .recorrido__hud .hud button.hud__obra .tv-m { animation: flotar-obra 3.4s ease-in-out infinite; }
#recorrido .recorrido__hud .hud button.hud__obra .tv-m:nth-child(2n) { animation-delay: -0.9s; }
#recorrido .recorrido__hud .hud button.hud__obra .tv-m:nth-child(3n) { animation-delay: -1.8s; }
#recorrido .recorrido__hud .hud button.hud__obra:nth-of-type(2) .tv-m { animation-duration: 3.9s; }
#recorrido .recorrido__hud .hud button.hud__obra:nth-of-type(3) .tv-m { animation-duration: 3.1s; }
#recorrido .recorrido__hud .hud button.hud__obra:nth-of-type(4) .tv-m { animation-duration: 4.2s; }
#recorrido .recorrido__hud .hud button.hud__obra:nth-of-type(5) .tv-m { animation-duration: 3.6s; }
#recorrido .recorrido__hud .hud button.hud__obra:hover, #recorrido .recorrido__hud .hud button.hud__obra:focus-visible,
#recorrido .recorrido__hud .hud button.hud__obra.es-actual { color: var(--c); }
#recorrido .recorrido__hud .hud button.hud__obra:hover .tv-m, #recorrido .recorrido__hud .hud button.hud__obra:focus-visible .tv-m,
#recorrido .recorrido__hud .hud button.hud__obra.es-actual .tv-m { animation-name: flotar-obra-viva; animation-duration: 1.5s; }
#recorrido .recorrido__hud .hud button.hud__obra:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@keyframes flotar-obra {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-0.12em) rotate(-1.2deg); }
  65% { transform: translateY(-0.04em) rotate(0.9deg); }
}
@keyframes flotar-obra-viva {
  0%, 100% { transform: translateY(-0.04em) rotate(0deg); }
  50% { transform: translateY(-0.2em) rotate(-1.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  #recorrido .recorrido__hud .hud button.hud__obra .tv-m { animation: none; }
}

/* (21 oct, noche, Ernesto: «the words are too apelotonadas … the font is wrong, it should use this one» —el «Stay Relevant.
   Stay Valuable.» de wearecollins.com— y «we made a graphik osuna equivalent») la lectura, en Osuna Sans (nuestra Graphik), en
   el gris de tinta de Collins y con aire entre líneas y entre párrafos. La serifa se queda para la primera frase de cada
   sección, la frase de la obra, los nombres de las obras y exposiciones y la despedida */
@media (orientation: landscape) and (min-width: 700px) {
  #recorrido .recorrido__hud .hud p, #recorrido .recorrido__ficha .ficha__texto {
    font-family: var(--f-voz); font-weight: 400; line-height: 1.5; letter-spacing: -0.003em; color: rgba(28, 31, 43, 0.82);
  }
  #recorrido .recorrido__hud .hud p { margin: 0 0 1em; }
  #recorrido .recorrido__hud .hud p.hud__lema { margin-bottom: 0.9em; }
}

/* (22 oct, Ernesto: «it must also have a little sentence of instruction that tells you to click them») la frase que invita a
   pulsar las obras y las salas: la palo seco pequeña, en el gris de Collins, debajo de la frase de la obra y de la etiqueta de
   las exposiciones. El nombre de una exposición, al señalar su sala, se subraya como al señalarlo a él */
@media (orientation: landscape) and (min-width: 700px) {
  #recorrido .recorrido__hud .hud p.hud__instruccion {
    margin: 1.2em 0 0; max-width: none; font: 400 var(--c-etiqueta)/1.35 var(--f-voz); letter-spacing: -0.005em; color: var(--c-gris);
  }
  #recorrido .recorrido__hud .hud p.hud__titulo + p.hud__instruccion { margin-top: -0.6em; }
}
.recorrido__expo.es-actual { text-decoration-color: currentColor; }

/* (22 oct) el texto del viaje recibe el ratón solo mientras se ve: apagado, el de otra parada tapaba las salas de las obras y
   de las exposiciones y no dejaba señalarlas ni pulsarlas. Y la frase que invita a pulsar, siempre pequeña y en la palo seco
   (la frase de la obra, en la serifa grande, le ganaba) */
#recorrido:not(.sin-3d) .hud--viaje .hud__corre { pointer-events: none; }
#recorrido:not(.sin-3d) .hud--viaje.hud--visible .hud__corre { pointer-events: auto; }
@media (orientation: landscape) and (min-width: 700px) {
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der > p.hud__instruccion, #recorrido .recorrido__hud .hud p.hud__instruccion {
    margin: 1.4em 0 0; max-width: none; font: 400 var(--c-etiqueta)/1.35 var(--f-voz); letter-spacing: -0.005em; color: var(--c-gris);
  }
  #recorrido .recorrido__hud .hud p.hud__titulo + p.hud__instruccion { margin-top: -0.6em; }
}

/* ═══ (22 oct 2026, Ernesto) LA TRAYECTORIA, DE NUEVO: TRECE FILAS DE AÑO, NOMBRE Y EXPLICACIÓN ═══
   «update the trayectoria using these texts and make the visual presentation more of high design, now it looks bad». Lo que
   se veía mal: la columna de la fecha no cabía («22 de diciembre de 2025» pisaba el nombre), dos entradas eran frases enteras
   metidas en la columna del nombre, en cinco líneas, y la explicación quedaba lejos de su nombre, al otro lado de la pantalla.
   Ahora es una tabla como las listas de wearecollins.com: cada entrada, una fila entre dos filetes finos; el año pequeño y en
   gris, en su columna; el nombre en la serifa, a tamaño de entrada; la explicación en la palo seco, a medida de lectura y
   pegada al nombre; el subtítulo (Portland), una etiqueta pequeña bajo el nombre. Un solo grosor: la jerarquía, por el
   tamaño y el gris. Sin 3D, el nombre y la explicación van uno debajo del otro (la columna del papel es más estrecha). En
   vertical (el teléfono), como estaba: Ernesto lo define después */
@media (orientation: landscape) and (min-width: 700px) {
  #recorrido .recorrido__hud .hud--trayectoria {
    --tr-nombre: clamp(19px, 1.62vw, 35px);
    --tr-texto: clamp(14px, 0.98vw, 21px);
    --tr-ano: var(--c-nota, 15px);
    --tr-hueco: clamp(16px, 2vw, 44px);
    --tr-aire: clamp(12px, 1.15vw, 25px);
    --tr-filete: rgba(28, 31, 43, 0.15);
  }
  #recorrido .recorrido__hud .hud--trayectoria .hud__lineas { border-top: 1px solid var(--tr-filete); }
  /* en el viaje, la ventana llega hasta el borde de la escalera grande: la tabla (texto y filetes) se queda a un hueco de ella */
  #recorrido:not(.sin-3d) .recorrido__hud .hud--trayectoria .hud__lineas { margin-right: calc(var(--tr-hueco) * 1.2); }
  #recorrido .recorrido__hud .hud--trayectoria .hud__lineas li,
  #recorrido .recorrido__hud .hud--trayectoria .hud__lineas li:first-child {
    position: relative; margin: 0; padding: var(--tr-aire) 0 calc(var(--tr-aire) * 1.08); border: 0; border-bottom: 1px solid var(--tr-filete);
    font: 400 calc(var(--tr-texto) * var(--escala-texto, 1))/1.5 var(--f-voz); letter-spacing: 0; color: var(--tinta); text-wrap: wrap;
  }
  #recorrido .recorrido__hud .hud--trayectoria .hud__lineas li::before, #recorrido .recorrido__hud .hud--trayectoria .hud__lineas li + li::before { content: none; }
  #recorrido .recorrido__hud .hud--trayectoria .hud__lineas li > span {
    display: grid; grid-template-columns: calc(var(--tr-ano) * 7.2) calc(var(--tr-nombre) * 12.4) minmax(0, 1fr);
    column-gap: var(--tr-hueco); align-items: baseline;
  }
  #recorrido .recorrido__hud .hud--trayectoria .hud__fecha {
    font: 400 calc(var(--tr-ano) * var(--escala-texto, 1))/1.3 var(--f-voz); letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums lining-nums; color: var(--c-gris); white-space: nowrap;
  }
  #recorrido .recorrido__hud .hud--trayectoria .hud__que {
    font: 400 calc(var(--tr-nombre) * var(--escala-texto, 1))/1.1 var(--f-nombre); letter-spacing: -0.018em; color: var(--tinta); text-wrap: balance;
    font-variant-numeric: proportional-nums;   /* las cifras altas: «DIR 101» con las de texto se leía «DIR 1o1» (en Osuna Serif 7 las altas, .lf, salen con pnum) */
  }
  #recorrido .recorrido__hud .hud--trayectoria .hud__sub {
    display: block; margin-top: 0.62em; font: 400 calc(var(--tr-ano) * var(--escala-texto, 1))/1.3 var(--f-voz); letter-spacing: 0; color: var(--tinta);
  }
  #recorrido .recorrido__hud .hud--trayectoria .hud__como {
    max-width: 33em; font: 400 1em/1.5 var(--f-voz); letter-spacing: -0.002em; color: rgba(28, 31, 43, 0.68); text-wrap: pretty;
  }
  /* sin 3D: el año en su columna y, al lado, el nombre con su explicación debajo */
  #recorrido.sin-3d .recorrido__hud .hud--trayectoria .hud__lineas li > span {
    grid-template-columns: calc(var(--tr-ano) * 7.2) minmax(0, 1fr); row-gap: 0.45em;
  }
  #recorrido.sin-3d .recorrido__hud .hud--trayectoria .hud__fecha { grid-row: 1 / span 2; }
  #recorrido.sin-3d .recorrido__hud .hud--trayectoria .hud__como { grid-column: 2; }
}

/* ═══ (22 oct 2026, Ernesto) EL TELÉFONO COMO UN JUEGO ═══
   («think of it as a mobile game, where the text and images flow through the scroll seamlessly, integrated among each other …
   the stairs in the background … make it look even better than the desktop site»; maqueta: _maqueta-movil-22oct). En vertical
   la escena va en la pantalla entera y el texto en el papel que deja: en las escaleras, la columna del viaje junto a la escalera
   grande, con las fotos dentro, cortadas en paralelo a ella; en el colegio, la frase de la obra escalonada con la escalera que
   llega; en el instituto, solo la frase de la despedida. Lo coloca recorrido.js (colocarViaje, colocarHud) */
@media (orientation: portrait), (max-width: 699px) {
  /* la ficha de una obra o de una sala recibe el dedo: en vertical la escena entera lo deja pasar (solo el lienzo lo coge) y
     la ficha lo heredaba, así que «Alejar» no se podía pulsar y, con la página quieta mientras se está cerca, no había salida */
  #recorrido:not(.sin-3d) .recorrido__escena .recorrido__ficha { pointer-events: auto; }
  /* las fotos, dentro de la columna del viaje (recorrido.js las mueve ahí y les da sitio y forma) */
  #recorrido:not(.sin-3d) .hud--viaje .hud__corre > .hud__retrato {
    position: absolute; display: block; float: none; margin: 0; aspect-ratio: auto; border-radius: 0; overflow: visible; box-shadow: none;
    filter: drop-shadow(0 12px 18px rgba(28, 31, 43, 0.18)); text-shadow: none;
  }
  #recorrido:not(.sin-3d) .hud--viaje .hud__corre > .hud__retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; clip-path: var(--forma); }
  #recorrido:not(.sin-3d) .hud--viaje .hud__corre > .hud__retrato[data-foto="sesion"] img { object-position: 50% 42%; }
  #recorrido:not(.sin-3d) .hud--viaje .hud__corre > .hud__retrato--otra { display: block; }
  #recorrido:not(.sin-3d) .hud--viaje .hud__hueco-foto { display: block; }
  /* la frase de la obra, escalonada (las cuñas las pone recorrido.js después de la etiqueta) */
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--escalon { right: auto; max-width: none; }
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--escalon .hud__obra-frase { font-size: 18.5px; line-height: 1.32; }
  /* el instituto: solo la frase de la despedida, arriba, en el papel que deja la granja */
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="escuela"] > :not(.hud__esquina) { display: none; }
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="escuela"] > p.hud__esquina {
    display: block; margin: 0; font-family: var(--f-voz, 'Osuna Sans', sans-serif); font-weight: 420; font-size: calc(25px * var(--escala-texto, 1));
    line-height: 1.06; letter-spacing: -0.032em; color: var(--azul-hondo); text-wrap: pretty; font-variation-settings: normal;
  }
  #recorrido:not(.sin-3d) .recorrido__hud .hud--despedida { display: none; }
}

/* (22 oct) un teléfono tumbado (apaisado y bajo): el bloque de la obra, más arriba y más junto, para que la frase y su
   instrucción quepan en el papel de encima del colegio (recorrido.js, colocarHud, además lo ensancha y, si hace falta, baja
   la letra). En el ordenador no entra: su ventana es más alta */
@media (orientation: landscape) and (min-width: 700px) and (max-height: 599px) {
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der { top: calc(var(--barra) + 1.5vh); }
  #recorrido:not(.sin-3d) .recorrido__hud .hud.hud--colegio-der > p.hud__instruccion { margin-top: 0.7em; }
}

/* (22 oct, Ernesto, con su dibujo en rojo) la foto de la charla en Charlas y Exposiciones: sobre las salas, en paralelo a la
   escalera grande, como las fotos de la biografía (recorrido.js, colocarCharla, le da sitio y forma). Solo con el 3D en
   apaisado; sin 3D la foto sale en «Charlas y encargos» */
.hud__charla { display: none; }
@media (orientation: landscape) and (min-width: 700px) {
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="baja"] > .hud__charla:not([hidden]) {
    display: block; position: absolute; margin: 0; filter: drop-shadow(0 12px 18px rgba(28, 31, 43, 0.16));
  }
  #recorrido:not(.sin-3d) .recorrido__hud .hud[data-hud="baja"] > .hud__charla img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; clip-path: var(--forma);
  }
}

/* ═══ (22 oct 2026, noche, Ernesto: «polish it so it is high design grade and proceed to implement it») EL TELÉFONO DE LA MAQUETA v6 ═══
   La maqueta de bloques v6 (_maqueta-movil-22oct/bloques/v6) montada en la página, en un teléfono de pie (recorrido.js le pone
   a la sección la clase es-telefono; en el ordenador no está). La letra, la del sistema de Collins del ordenador a la medida del
   teléfono: la lectura en Osuna Sans 400, en el gris de tinta, interlineado 1,5 y aire entre párrafos; la serifa (Osuna Serif 7)
   para la primera frase de cada sección, la frase de la obra, los nombres de la trayectoria y la despedida; la etiqueta, pequeña,
   en minúscula, sin filete y quieta arriba a la izquierda; nunca negrita. Las columnas de las escaleras (.tel-col) y los bloques
   (.tel-bloque) los coloca recorrido.js (moverViajeTel, colocarBloqueTel), siempre en el papel que deja la madera */
@media all {   /* (con la clase es-telefono: el teléfono de pie y tumbado; en el ordenador no está) */
  #recorrido.es-telefono:not(.sin-3d) {
    --tel-lectura: 15.5px; --tel-entrada: 23px; --tel-etiqueta: 13px; --tel-nota: 12px; --tel-gris: rgba(28, 31, 43, 0.56);
    --tel-tinta-lectura: rgba(28, 31, 43, 0.82); --tel-filete: rgba(28, 31, 43, 0.15);
  }
  /* la etiqueta de cada sección, quieta arriba a la izquierda */
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud > p.hud__titulo {
    position: absolute; left: 4px; top: 72px; display: block; margin: 0 !important; white-space: nowrap;
    font: 400 var(--tel-etiqueta)/1.2 'Osuna Sans', system-ui, sans-serif !important; letter-spacing: -0.01em; text-transform: none;
    color: var(--tinta) !important; transition: opacity .3s ease;
  }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud > p.hud__titulo::after { content: none; }
  /* las escaleras: el bloque ocupa la pantalla; lo que se lee va en sus dos columnas */
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud:is([data-hud="perfil"], [data-hud="consultoria"], [data-hud="trayectoria"]) {
    left: 18px; right: 18px; top: 0; bottom: 0; width: auto; max-width: none; transform: none; pointer-events: none;
  }
  #recorrido.es-telefono:not(.sin-3d) .tel-col {
    position: absolute; left: -18px; top: 0; width: 100vw; height: 100%; opacity: 0; pointer-events: none;
    clip-path: var(--ventana); -webkit-mask-image: var(--funde); mask-image: var(--funde);
  }
  /* (23 oct, tarde) con el halo del papel del ordenador: el texto pasa por delante de las escaleras lejanas, desvaídas, y se lee */
  #recorrido.es-telefono:not(.sin-3d) .tel-corre { position: absolute; left: 0; top: 0; will-change: transform;
    text-shadow: 0 0 3px var(--papel-escena, #F4F2EE), 0 0 7px var(--papel-escena, #F4F2EE), 0 0 12px rgba(244, 242, 238, 0.8); }
  #recorrido.es-telefono:not(.sin-3d) .hud--visible .tel-col.se-ve .tel-corre { pointer-events: auto; }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre p {
    margin: 0 0 1em; max-width: none; font: 400 var(--tel-lectura)/1.5 'Osuna Sans', system-ui, sans-serif; letter-spacing: -0.003em;
    color: var(--tel-tinta-lectura); text-wrap: pretty; hyphens: auto;
  }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre p.hud__lema {
    margin: 0 0 0.85em; font: 400 calc(var(--tel-entrada) * var(--tel-k, 1))/1.1 'Osuna Serif 7', Georgia, serif; letter-spacing: -0.02em; color: var(--tinta); hyphens: manual;
  }
  #recorrido.es-telefono:not(.sin-3d) .tel-hueco { display: block; }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre > .hud__retrato {
    position: absolute; display: block; float: none; margin: 0; aspect-ratio: auto; border-radius: 0; overflow: visible; box-shadow: none;
    filter: drop-shadow(0 12px 18px rgba(28, 31, 43, 0.16));
  }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre > .hud__retrato img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; clip-path: var(--forma); }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre > .hud__retrato[data-foto="sesion"] img { object-position: 50% 42%; }
  /* la trayectoria: una fila por entrada, entre filetes; el año pequeño y en gris, el nombre en la serifa, la explicación en gris */
  #recorrido.es-telefono:not(.sin-3d) .tel-corre .hud__lineas { list-style: none; margin: 0; padding: 0; border: 0; }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre .hud__lineas li {
    position: relative; margin: 0; padding: 11px 0 12px; border: 0; border-top: 1px solid var(--tel-filete);
    font: 400 13.5px/1.45 'Osuna Sans', system-ui, sans-serif; color: var(--tel-tinta-lectura);
  }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre .hud__lineas li::before { content: none; }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre .hud__lineas li > span { display: block; }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre .hud__lineas .hud__sep { display: none; }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre .hud__lineas .hud__fecha { display: block; margin-bottom: 4px; font: 400 var(--tel-nota)/1.3 'Osuna Sans', system-ui, sans-serif; letter-spacing: 0.01em; color: var(--tel-gris); font-variant-numeric: tabular-nums lining-nums; }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre .hud__lineas .hud__que { display: block; font: 400 18.5px/1.12 'Osuna Serif 7', Georgia, serif; letter-spacing: -0.018em; color: var(--tinta); font-variant-numeric: proportional-nums; }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre .hud__lineas .hud__sub { display: block; margin-top: 3px; font: 400 var(--tel-nota)/1.3 'Osuna Sans', system-ui, sans-serif; color: var(--tinta); }
  #recorrido.es-telefono:not(.sin-3d) .tel-corre .hud__lineas .hud__como { display: block; margin-top: 4px; font: 400 13.5px/1.45 'Osuna Sans', system-ui, sans-serif; color: rgba(28, 31, 43, 0.68); }
  /* los bloques (la obra, las charlas, la despedida): sueltos en el papel, paralelos a su escalera */
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud.tel-bloque { right: auto; max-width: none; }
  /* (24 oct, encargo 115: «que las cinco se puedan pulsar sin fallo») el bloque solo coge el dedo en lo que se pulsa (las palabras de
     color, los botones, los enlaces): sus cuñas, de 90 px de alto cada una, lo alargaban por debajo de la frase hasta tapar las dos
     salas de arriba del colegio, y El Entre y el gallinero no se abrían al tocarlas */
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud.tel-bloque { pointer-events: none; }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud.tel-bloque :is(button, a) { pointer-events: auto; }
  /* (24 oct, noche, Ernesto en su iPhone: «the characters are somehow draggable when zooming in but only then, why») encima de la
     escena, cada letra de los textos (texto vivo, hecha para el ratón), las cuñas invisibles que escalonan los párrafos, los huecos de
     las fotos y las columnas de las escaleras se quedaban el dedo: no llegaba a la gente, y en Safari mantenerlo empezaba a seleccionar
     texto. De cerca sí, porque los textos se esconden. En el teléfono, todo lo de los textos deja pasar el dedo menos botones y enlaces */
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud, #recorrido.es-telefono:not(.sin-3d) .recorrido__hud * { pointer-events: none !important; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud :is(button, a), #recorrido.es-telefono:not(.sin-3d) .recorrido__hud :is(button, a) * { pointer-events: auto !important; }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud :is(button, a) * { pointer-events: none !important; }
  /* (y los botones de un texto que no se ve, tampoco: las palabras de las obras, transparentes, cogían el dedo en todas las paradas) */
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud:not(.hud--visible) :is(button, a), #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .recorrido__expo:not(.es-visible) { pointer-events: none !important; }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud.hud--despedida.tel-bloque { display: block; }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud.tel-bloque .hud__obra-frase,
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud.hud--despedida.tel-bloque > p.hud__frase,
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud.tel-bloque > p.hud__esquina {
    display: block; margin: 0; max-width: none; font: 400 calc(var(--tel-entrada) * var(--escala-texto, 1))/1.12 'Osuna Serif 7', Georgia, serif; letter-spacing: -0.02em; color: var(--tinta); text-wrap: balance;
  }
  /* (23 oct, tarde) cada obra de la frase, pegada a su coma (recorrido.js, prepararDomTel) */
  #recorrido.es-telefono:not(.sin-3d) .tel-sin-corte { white-space: nowrap; }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud.tel-bloque p.hud__instruccion {
    display: block; margin: 1em 0 0; max-width: none; font: 400 var(--tel-etiqueta)/1.35 'Osuna Sans', system-ui, sans-serif; letter-spacing: -0.005em; color: var(--tel-gris);
  }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud.tel-bloque[data-hud="baja"] p.hud__instruccion { margin: 0 0 14px; text-wrap: balance; }   /* (v10) sin una palabra sola en la segunda línea */
  /* (las cuñas que escalonan la despedida: la regla del teléfono de antes escondía todo lo que no fuera la frase) */
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud.tel-bloque[data-hud="escuela"] > .hud__cuna { display: block; }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud.tel-bloque > .hud__charla:not([hidden]) {
    display: block; position: absolute; margin: 0; filter: drop-shadow(0 12px 18px rgba(28, 31, 43, 0.16));
  }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud.tel-bloque > .hud__charla img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; clip-path: var(--forma); }
  /* el nombre: «Ernesto» arriba; «Osuna» debajo, a la derecha de las dos puertas; el oficio debajo de «Osuna» */
  /* (en una pantalla más baja que la de la maqueta, de 844 px, el nombre baja con ella: lo de debajo es la oficina) */
  /* (23 oct, tarde) con la altura pequeña de la pantalla (svh, la misma que la escena): en el iPhone, vh es la altura sin las barras de
     Safari y el nombre salía más grande que lo que cabe encima de la oficina */
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud[data-hud="nombre"] { left: 18px; right: 18px; top: max(58px, min(64px, 7.6vh)); top: max(58px, min(64px, 7.6svh)); max-width: none; }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud__nombre {
    margin: 0 0 0 -0.04em; font: 400 min(76px, 9vh, 13vh - 31px)/0.95 'Osuna Serif 7', Georgia, serif; font-size: min(76px, 9svh, 13svh - 31px); letter-spacing: -0.018em; color: #111; white-space: nowrap; font-variation-settings: normal;
  }
  /* (23 oct, tarde, Ernesto: «remake the arrangement of Ernesto Osuna Diseñador de juegos y entornos de Aprendizaje because now it
     looks very unprofessional») como en el ordenador: «Ernesto Osuna» en una línea, de margen a margen, y el oficio en una línea
     debajo, los dos alineados a la izquierda; las puertas ya no van entre las palabras (están en la escena, arriba a la derecha) */
  /* (25 oct, Ernesto: «make it more like what we had before, the name ernesto osuna with the two doors under "Ern" with the doors
     being a little big but this time with more separation») otra vez en dos líneas: «Ernesto» arriba, «Osuna» debajo a la derecha,
     el oficio debajo de «Osuna»; en el hueco de debajo de «Ern», las dos puertas (la cámara las encuadra ahí: encuadreHeroe) */
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud__nombre { font-size: min(78px, calc((100vw - 36px) / 4.3)); line-height: 0.98; }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud__nombre .tel-osuna { display: block; margin-left: 41%; }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud[data-hud="nombre"] p.hud__cargo {
    margin: 0.7em 0 0 41%; max-width: none; font: 400 min(16px, calc((100vw - 36px) / 23))/1.3 'Osuna Sans', system-ui, sans-serif; font-size: min(16px, calc((100vw - 36px) / 23)) !important; letter-spacing: -0.005em;
    white-space: normal; text-wrap: balance; text-transform: none; color: #111;
  }
}

/* (22 oct, noche) el teléfono tumbado: el nombre en una línea, a la izquierda, con su oficio debajo (la oficina va en medio); y
   la despedida sola, sin la etiqueta de «Charlas y encargos», que es de la página sin 3D */
#recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud[data-hud="escuela"] > p.hud__titulo { display: none; }
@media (orientation: landscape) and (max-height: 599px) {
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud__nombre { font-size: min(52px, 13vh); font-size: min(52px, 13svh); }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud__nombre .tel-osuna { display: inline; margin-left: 0.24em; }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud[data-hud="nombre"] p.hud__cargo { margin-left: 0; font-size: 15px; max-width: 11em !important; white-space: normal; text-wrap: balance; }
  #recorrido.es-telefono:not(.sin-3d) .recorrido__hud .hud[data-hud="nombre"] { top: 66px; }
}
/* (24 oct, noche) la tira de la línea de las dos escuelas, cuando la línea no se ve, no coge el dedo */
.linea-escuela:not(.se-ve) .linea-escuela__tira { pointer-events: none; }

/* (25 oct) en el teléfono, al abrir: a dónde lleva cada puerta, encima de ella, y seguir el paseo, debajo del rellano */
.tel-rotulos { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity .2s linear; }
.tel-rotulo { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; white-space: nowrap; padding: 6px 4px;
  font: 400 14px/1.2 'Osuna Sans', system-ui, sans-serif; color: #111; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; -webkit-tap-highlight-color: transparent; }
.tel-rotulo--seguir { left: auto !important; right: 18px; transform: none; }
html:not([data-idioma="en"]) .tel-rotulo [lang="en"], html[data-idioma="en"] .tel-rotulo [lang="es"] { display: none; }
.tel-rotulos__svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
/* (25 oct, Ernesto: «instead of using a different font for the door signs, use a smaller font but the same font of the rest») */
.tel-rotulo-mano { font: 400 12.5px 'Osuna Sans', system-ui, sans-serif; letter-spacing: 0.01em; fill: #111; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html:not([data-idioma="en"]) .tel-rotulo-mano [lang="en"], html[data-idioma="en"] .tel-rotulo-mano [lang="es"] { display: none; }

/* (25 oct, Ernesto: «que en el móvil no aparezca el aprender a estar quieto / aprender a estar presente, que solo aparezca la línea») */
#recorrido.es-telefono .linea-escuela--pie .linea-escuela__letrero { display: none !important; }

/* (27 oct, Ernesto: «much more reliable and soft») el viaje se enciende con su --o tal cual, sin triplicarlo: el fundido largo que le
   da recorrido.js se ve entero, en vez de saltar de nada a todo en un tercio del camino */
#recorrido:not(.sin-3d) .recorrido__hud .hud.tv.hud--viaje { opacity: var(--o, 0); }

/* (5 nov) el aviso legal, a un clic: pequeño, junto al dossier de prensa */
.recorrido__hud .hud a.hud__legal { align-self: center; margin-left: 4px; font: 400 13.5px/1 var(--fuente-texto); color: inherit; opacity: .72; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.recorrido__hud .hud a.hud__legal:hover { opacity: 1; }

/* (5 nov) la coma de cada obra: pegada a su última palabra, en el color y sin el vaivén del resto de la frase */
#recorrido .recorrido__hud .hud button.hud__obra .tel-coma { color: var(--tinta); animation: none; }

/* (5 nov) el retrato limpio llega más arriba: que quepa la cara en cualquier recorte */
#recorrido .recorrido__hud .hud__retrato[data-foto="retrato"] img,
#recorrido:not(.sin-3d) .hud--viaje > .hud__retrato[data-foto="retrato"] img,
#recorrido:not(.sin-3d) .hud--viaje .hud__corre > .hud__retrato[data-foto="retrato"] img,
#recorrido.es-telefono:not(.sin-3d) .tel-corre > .hud__retrato[data-foto="retrato"] img { object-position: 50% 5%; }

/* (5 nov, Ernesto) las letras sobre las puertas, también en el ordenador; «Continuar» lo hace allí la flecha */
#recorrido:not(.es-telefono) .tel-rotulo-mano { font-size: 17px; }
#recorrido:not(.es-telefono) .tel-rotulo--seguir { display: none; }

/* (5 nov, Ernesto: «añade dos líneas en blanco encima de ernesto aquí») la biografía, en el ordenador */
#recorrido:not(.sin-3d):not(.es-telefono) .recorrido__hud .hud--perfil p.hud__lema { margin-top: 2.24em; }

/* (5 nov, Ernesto: «en la esquina derecha, una flecha animada que se pueda clickar», para quien no sabe hacer scroll): el asa de la línea de la escuela con una flecha que baja (js/flecha-paseo.js) */
/* (por encima de la insignia «Powered by Netlify» del plan gratuito, que va abajo a la derecha y no se puede quitar en ese plan) */
.flecha-paseo { position: fixed; right: clamp(16px, 2.4vw, 36px); bottom: 76px; z-index: 40; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%;
  background: var(--papel, #FAF8F4); border: 1.5px solid var(--tinta, #1C1F2B); color: var(--tinta, #1C1F2B); box-shadow: 0 4px 14px rgba(34, 30, 28, .16); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent; }
.flecha-paseo.se-ve { opacity: 1; pointer-events: auto; }
.flecha-paseo:hover { transform: translateY(1px) scale(1.05); box-shadow: 0 6px 18px rgba(34, 30, 28, .22); }
.flecha-paseo:focus-visible { outline: 2px solid var(--tinta, #1C1F2B); outline-offset: 4px; }
.flecha-paseo svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: flecha-paseo 1.7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes flecha-paseo { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .flecha-paseo svg { animation: none; } }
@media (orientation: portrait), (max-width: 699px) { .flecha-paseo { width: 44px; height: 44px; right: 18px; bottom: calc(68px + env(safe-area-inset-bottom)); } .flecha-paseo svg { width: 21px; height: 21px; } }