/* (19 oct 2026, encargo de Ernesto «La letra de la web: Osuna Serif 6 y Osuna Sans en toda la página, como en la maqueta»)
   las dos letras del estudio, como en wearecollins.com: Osuna Serif 6 para los nombres y Osuna Sans para todo lo demás.
   Los pesos caen en el mismo archivo que en la maqueta (materiales/tipografia-ernesto-osuna/maqueta-web/); licencias en
   fuentes/osuna-serif-6/OFL.txt y fuentes/osuna-sans/Inter-OFL.txt.
   (21 oct, Ernesto: «the font does not fit the collins reference, we made fonts exactly for this») la serifa, ya la 7.000:
   la 6 corregida letra a letra contra la de wearecollins.com (materiales/tipografia-ernesto-osuna/fuentes-serif-v7/) */
@font-face { font-family: 'Osuna Serif 7'; src: url('../fuentes/osuna-serif-7/OsunaSerif-Regular.woff2') format('woff2'); font-weight: 300 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Osuna Serif 7'; src: url('../fuentes/osuna-serif-7/OsunaSerif-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Osuna Serif 7'; src: url('../fuentes/osuna-serif-7/OsunaSerif-Italic.woff2') format('woff2'); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Osuna Sans'; src: url('../fuentes/osuna-sans/OsunaSans-Regular.woff2') format('woff2'); font-weight: 300 550; font-style: normal; font-display: swap; }
@font-face { font-family: 'Osuna Sans'; src: url('../fuentes/osuna-sans/OsunaSans-Medium.woff2') format('woff2'); font-weight: 551 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Osuna Sans'; src: url('../fuentes/osuna-sans/OsunaSans-Italic.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }

/* ernestoosuna.com · Dos puertas — la página. Las puertas tienen su hoja: css/puertas.css */

:root {
  --papel: #FAF8F4;
  --papel-alt: #F1EBE0;
  --blanco: #FFFFFF;
  --tinta: #1C1F2B;
  --tinta-suave: #5E6472;
  --borde: #E5DFD3;
  --enase: #3865AE;
  --enase-oscuro: #2B4F8A;
  --enase-palido: #EAF0F9;
  --tarasca: #E07A3A;
  --tarasca-oscuro: #C56A2F;
  --tarasca-palido: #FBEFE4;
  --noche-tinta: #F3F0EA;
  --humus: #16120E;
  --fuente-titulo: 'Osuna Serif 7', Georgia, serif;
  --fuente-texto: 'Osuna Sans', system-ui, sans-serif;
  --manuscrita: 'La Belle Aurore', 'Segoe Script', cursive;
  --t-menor: 0.92rem;
  --t-etiqueta: 0.78rem;
  --margen: clamp(20px, 4vw, 40px);
  --sombra-puerta: 0 30px 70px -30px rgba(28, 31, 43, 0.42);
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; overflow: hidden; }
body.escena, body.portada { overflow: visible; }   /* en la portada también se baja: puertas, tablero, trayectoria */
/* el espaciador que da al documento la altura del mundo: el scroll de siempre lo recorre */
#mundo { position: relative; width: 100%; height: 100vh; pointer-events: none; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
  transition: background-color 1.8s ease;
}
body.escena { background: var(--humus); }

/* ---------- el lienzo: el mundo ---------- */
#lienzo { position: fixed; inset: 0; display: block; touch-action: pan-y; visibility: hidden; }
body.escena #lienzo, body.desplegando #lienzo { visibility: visible; }

/* grano de papel / impresión, estático, por encima de todo */
#grano {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; opacity: 0.06; mix-blend-mode: multiply; z-index: 5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
}
body.escena #grano { opacity: 0.045; }

/* ---------- la cabecera: el nombre ---------- */
#cabecera {
  position: fixed; top: clamp(18px, 4vh, 44px); left: 0; right: 0; text-align: center; pointer-events: none; z-index: 6;
  transition: top 1.6s var(--curva), left 1.6s var(--curva), right 1.6s var(--curva);
}
#cabecera h1 {
  margin: 0; font-family: var(--fuente-titulo); font-weight: 480; font-size: clamp(2.05rem, 1rem + 4.85vw, 5rem); line-height: 1.02; letter-spacing: -0.022em; color: var(--tinta);
  transition: font-size 1.6s var(--curva), color 1.6s ease, letter-spacing 1.6s ease;
}
#cabecera h1 span { font-weight: 300; color: var(--tinta-suave); transition: color 1.6s ease; }
body.escena #cabecera { text-align: left; left: clamp(18px, 2.4vw, 40px); right: auto; top: clamp(14px, 2.2vh, 28px); }
body.escena #cabecera h1 { font-size: clamp(15px, 1.25vw, 19px); letter-spacing: 0.02em; color: rgba(250, 248, 244, 0.94); text-shadow: 0 1px 2px rgba(20, 30, 50, 0.45), 0 0 14px rgba(20, 30, 50, 0.25); }
body.escena #cabecera h1 span { color: rgba(250, 248, 244, 0.6); }

/* ---------- leyenda manuscrita ---------- */
#leyenda {
  position: fixed; left: clamp(16px, 4vw, 64px); top: clamp(64px, 10vh, 120px); transform: translateY(6px);   /* en el cielo, a la izquierda (Ernesto, 8 oct) */
  max-width: min(62vw, 680px); margin: 0; padding: 0; text-align: left;
  font-family: var(--manuscrita); font-size: clamp(20px, 2.3vw, 31px); line-height: 1.45;
  color: rgba(250, 248, 244, 0.94); text-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 0 22px rgba(0,0,0,0.35);
  opacity: 0; transition: opacity 1.4s ease, transform 1.4s ease; pointer-events: none; z-index: 7;
}
#leyenda.visible { opacity: 1; transform: translateY(0); }
#leyenda.pregunta { font-size: clamp(23px, 2.5vw, 34px); }

#flecha {
  position: fixed; left: 50%; bottom: clamp(6px, 1.6vh, 18px); transform: translateX(-50%);
  width: 44px; height: 52px; border: 0; padding: 0; background: transparent; cursor: pointer;
  opacity: 0; transition: opacity 1.6s ease; z-index: 7; pointer-events: none;
}
#flecha.visible { opacity: 1; pointer-events: auto; animation: latir 2.6s ease-in-out infinite; }
#flecha svg { transition: transform .6s var(--curva); }
#flecha.subir svg { transform: rotate(180deg); }
#flecha svg { width: 100%; height: 100%; overflow: visible; }
#flecha path { fill: none; stroke: rgba(250,248,244,0.9); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#flecha:hover path { stroke: #fff; }
@keyframes latir { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

#volver {
  position: fixed; top: clamp(14px, 2.2vh, 28px); right: clamp(18px, 2.4vw, 40px);
  border: 0; background: transparent; color: rgba(250,248,244,0.85); font-family: var(--fuente-texto); font-weight: 600;
  font-size: var(--t-etiqueta); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; padding: 6px 0 6px 28px;
  opacity: 0; pointer-events: none; transition: opacity 1s ease, color .3s ease; z-index: 7;
}
#volver::before { content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 1px; background: currentColor; transform: translateY(-50%); }
#volver.visible { opacity: 1; pointer-events: auto; }
#volver:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  #flecha.visible { animation: none; }
}

/* el aviso de fallo: solo aparece si algo rompe la carga */
#aviso { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 50; max-width: min(90vw, 720px); padding: 10px 16px; background: #fff3e0; color: #5a2d0c; border: 1px solid #e0a060; border-radius: 8px; font: 14px/1.4 var(--fuente-texto); }
#aviso[hidden] { display: none; }

/* ---------- la trayectoria de latarasca.com: retirada el 9 oct (noche). La sección nueva vive en
   css/secciones.css; aquí solo queda que el contenido de la portada no se ve en el paisaje. ---------- */
body.escena #tablero, body.desplegando #tablero, body.escena #edificio, body.desplegando #edificio { display: none; }

/* ---------- el sistema: fijo en pantalla mientras se baja por su sección ---------- */
#tablero { position: relative; z-index: 3; height: 460vh; background: var(--papel); }
.tablero__pegado { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.tablero__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: default; touch-action: pan-y; }
/* los textos: a la izquierda en pantallas anchas (el edificio va a la derecha), abajo en las estrechas */
.tablero__textos { position: absolute; left: clamp(20px, 5vw, 72px); top: 50%; width: min(31vw, 440px); height: 1px; pointer-events: none; }
.tablero__paso { position: absolute; left: 0; top: 0; width: 100%; margin: 0; font-family: 'Osuna Serif 7', Georgia, serif; font-weight: 400; font-size: clamp(20px, 2.05vw, 30px); line-height: 1.25; color: var(--tinta); opacity: 0; transform: translateY(calc(-50% + 10px)); transition: opacity .7s ease, transform .7s ease; text-shadow: 0 0 6px var(--papel), 0 0 2px var(--papel); }
.tablero__paso.is-activo { opacity: 1; transform: translateY(-50%); }
.tablero__lema { display: block; font-size: 1.1em; font-style: italic; }
.tablero__nota { display: block; margin-top: .6em; font-family: 'Osuna Sans', system-ui, sans-serif; font-size: .55em; line-height: 1.45; color: var(--tinta-suave); }
/* la regla que se puede cambiar: dos palabras pulsables, subrayada la que manda */
.tablero__regla { display: block; margin-top: 1.1em; font-family: 'Osuna Sans', system-ui, sans-serif; font-size: clamp(12px, 0.95vw, 14px); line-height: 1.6; letter-spacing: 0.02em; color: var(--tinta-suave); }
.tablero__regla button { font: inherit; color: var(--tinta-suave); background: none; border: 0; padding: 2px 0; margin: 0 0.5em 0 0.15em; cursor: pointer; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.tablero__regla button:hover { color: var(--tinta); border-bottom-color: rgba(28,31,43,0.3); }
.tablero__regla button[aria-pressed="true"] { color: var(--tinta); font-weight: 600; border-bottom-color: var(--tinta); }
.tablero__paso.is-activo .tablero__regla button { pointer-events: auto; }
@media (max-aspect-ratio: 23/20) {
  .tablero__textos { top: auto; bottom: clamp(24px, 6vh, 64px); right: clamp(20px, 5vw, 72px); width: auto; }
  .tablero__paso { top: auto; bottom: 0; transform: translateY(10px); font-size: clamp(19px, 5vw, 26px); }
  .tablero__paso.is-activo { transform: none; }
}

/* rótulos sobre el dibujo: la ficha de quien está bajo el ratón, los globos y el reloj (letra pequeña y espaciada) */
.tablero__rotulos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tablero__ficha { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 2px; font-family: 'Osuna Sans', system-ui, sans-serif; color: var(--tinta); opacity: 0; transition: opacity .18s ease; will-change: transform; white-space: nowrap; text-shadow: 0 0 5px var(--papel), 0 0 2px var(--papel); padding-left: 10px; border-left: 1px solid rgba(28,31,43,0.45); }
.tablero__ficha b { font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.tablero__ficha span { font-size: 13px; font-weight: 400; color: var(--tinta-suave); }
.tablero__ficha.is-visible { opacity: 1; }
.tablero__globo { position: absolute; left: 0; top: 0; font-family: 'Osuna Serif 7', Georgia, serif; font-size: clamp(16px, 1.5vw, 22px); font-weight: 600; color: var(--tinta); opacity: 0; transition: opacity .15s ease; will-change: transform; text-shadow: 0 0 5px var(--papel); }
.tablero__globo.is-visible { opacity: 1; }
.tablero__reloj { position: absolute; right: clamp(20px, 5vw, 64px); top: clamp(76px, 13vh, 120px);   /* debajo del nombre, también en pantallas estrechas */ display: grid; justify-items: end; gap: 6px; font-family: 'Osuna Sans', system-ui, sans-serif; color: rgba(28,31,43,0.62); font-variant-numeric: tabular-nums; pointer-events: none; }
.tablero__hora { font-size: clamp(13px, 1.05vw, 16px); font-weight: 600; letter-spacing: 0.22em; color: var(--tinta); }
.tablero__hoy { margin-top: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; }
.tablero__cuenta { display: grid; grid-template-columns: auto 2.6em; column-gap: 12px; row-gap: 3px; font-size: 11px; letter-spacing: 0.06em; text-align: right; }
.tablero__cuenta b { font-weight: 600; color: var(--tinta); }
@media (max-width: 640px) { .tablero__hoy, .tablero__cuenta { display: none; } }

/* ---------- el edificio, bajo las puertas (9 oct, tarde) ---------- */
#edificio { position: relative; z-index: 3; background: var(--papel); }
.edificio__pegado { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; }
.edificio__lienzo { position: absolute; inset: 0; }
.edificio__relato { position: relative; z-index: 1; pointer-events: none; width: min(40vw, 560px); padding-left: clamp(20px, 5vw, 72px); }
/* mientras se pliegan las puertas y, después, el sitio de la oficina de arriba, que se extiende por encima del texto */
.edificio__hueco { height: 46vh; }
.edificio__paso { min-height: 105vh; }
.edificio__paso p { margin: 0 0 0.9em; font-family: 'Osuna Serif 7', Georgia, serif; font-weight: 400; font-size: clamp(20px, 2.05vw, 30px); line-height: 1.25; color: var(--tinta); text-shadow: 0 0 6px var(--papel), 0 0 2px var(--papel); pointer-events: auto; }
.edificio__escuela { position: relative; z-index: 1; height: 140vh; pointer-events: none; }
.edificio__lema { position: sticky; top: clamp(20px, 5vh, 48px); margin: 0; padding-left: clamp(20px, 5vw, 72px); width: min(44vw, 600px); font-family: 'Osuna Serif 7', Georgia, serif; font-size: clamp(20px, 2vw, 28px); line-height: 1.25; color: var(--tinta); text-shadow: 0 0 6px var(--papel); }
.edificio__lema span { display: block; font-style: italic; }
.edificio__lema small { display: block; margin-top: .6em; font-family: 'Osuna Sans', system-ui, sans-serif; font-size: .55em; line-height: 1.45; color: var(--tinta-suave); }
@media (max-width: 760px) {
  .edificio__pegado { height: 50vh; margin-bottom: -50vh; }
  .edificio__relato { width: auto; padding: 0 20px; }
  .edificio__hueco { height: 52vh; }
  .edificio__paso { min-height: 80vh; padding-top: 52vh; }
  .edificio__paso p { background: var(--papel); }
  .edificio__lema { width: auto; padding: 0 20px; }
}