/* Aegyptus Incognita · estilos
   Papiro, tinta marrón de escriba y un único acento, el lapislázuli, para lo que se descubre (como el bermellón de
   Iaponia y el cian de Mare). Misma familia que Terra, Iaponia y Mare: Instrument Serif para títulos, IBM Plex Mono para
   los instrumentos, y además los jeroglíficos (Noto Sans Egyptian Hieroglyphs, recortada a los signos que se usan). */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fuentes/InstrumentSerif-normal-400.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fuentes/InstrumentSerif-italic-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fuentes/IBMPlexMono-normal-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fuentes/IBMPlexMono-normal-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fuentes/IBMPlexMono-normal-600.woff2) format("woff2"); }
@font-face { font-family: "Jeroglificos"; font-style: normal; font-weight: 400; font-display: block; src: url(../fuentes/Jeroglificos-recorte.woff2) format("woff2"); }

:root {
  --papiro: #f7e2b8;
  --panel: rgba(249, 234, 202, 0.96);
  --tinta: #3a2614;
  --tinta-2: rgba(58, 38, 20, 0.74);
  --tinta-3: rgba(58, 38, 20, 0.5);    /* (rayas y bordes) */
  --texto-3: rgba(58, 38, 20, 0.7);    /* (texto pequeño y apagado: al 50 % no llegaba al contraste mínimo, 2,9:1; al 70 %, unos 5:1) */
  --tinta-4: rgba(58, 38, 20, 0.17);
  --linea: rgba(58, 38, 20, 0.17);
  --acento: #2f4fa6;
  --acento-2: rgba(47, 79, 166, 0.5);
  --oro: #f6b733;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", "Jeroglificos", ui-monospace, Menlo, Consolas, monospace;   /* (los jeroglíficos sueltos de los pies y del subtítulo, con la fuente recortada) */
  --jero: "Jeroglificos", "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic", sans-serif;
  --margen: 28px;
  --curva: cubic-bezier(0.2, 0.7, 0.1, 1);
  /* las cartelas de abajo: papiro liso, filete de lapislázuli con un hilo de oro por dentro, y una sombra corta */
  --luz-papiro: 249, 234, 202;   /* (el papiro de la interfaz, teñido por la luz al amanecer y al atardecer: lo pone nilo.js) */
  --cartela: rgb(var(--luz-papiro));
  --filete-cartela: inset 0 0 0 2px #2f4fa6, inset 0 0 0 3px #dca23a;
  --sombra-cartela: 0 2px 6px -1px rgba(58, 38, 20, 0.3);
  /* la geometría del friso la pone interfaz.js cada vez que el motor mide (con sus mismas cuentas, en px): --u (el alto
     del friso), --y0 (dónde empieza), --alto (el de la ventana), --motivos (la línea de los ojos de Horus y escarabajos de
     abajo, medida desde el borde de abajo) y --rio1 (el borde de abajo del Nilo, también desde abajo). Hasta que mide,
     los de un friso a toda altura.
     --franja: dónde se centran las cartelas de abajo (en la línea de los motivos, sin que se salgan por abajo).
     --alto-cartela: el de las cartelas de abajo, el mismo para todas y algo más que los motivos (0,064 u) */
  --u: 100vh; --y0: 0px; --alto: 100vh; --motivos: 6.4vh; --rio1: 16vh;
  --alto-cartela: max(66px, calc(0.069 * var(--u)));
  --franja: max(calc(var(--alto-cartela) / 2 + 4px + env(safe-area-inset-bottom, 0px)), var(--motivos));   /* (con 13 px, en pantallas bajas la cartela se subía de la línea y asomaban los motivos por debajo) */
  --alto-mapa: var(--alto-cartela);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--papiro); color: var(--tinta);
  font: 400 13px/1.45 var(--mono);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* el anillo de foco: 2 px de lapislázuli (con 1 px no se veía sobre el cielo de noche); de noche, azul claro */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.noche :focus-visible { outline-color: #9fb6ff; }
.cuaderno :focus-visible, .intro :focus-visible, .creditos :focus-visible { outline-color: var(--acento); }
.jero { font-family: var(--jero); font-style: normal; letter-spacing: 0; text-transform: none; }

#lienzo { position: fixed; inset: 0; display: block; cursor: crosshair; touch-action: none; }
.en-escena #lienzo { cursor: default; }
/* las capas que mueve la GPU (ver el motor): el papiro, el cielo, los monumentos, lo de delante y el brillo */
.capa { position: fixed; left: 0; top: 0; pointer-events: none; }
canvas.capa { width: 100%; height: 100%; display: block; }   /* (como el lienzo: el alto de la ventana; en iOS, 100vh es más que eso) */
div.capa { width: 100%; height: 100%; will-change: transform; }
.capa .tesela { position: absolute; top: 0; display: block; }
/* la luz de la hora: un color que multiplica (al atardecer, naranja; de noche, el azul de los techos de las tumbas) */
.tinte { position: fixed; inset: 0; pointer-events: none; mix-blend-mode: multiply; display: none; }

.grano { position: fixed; inset: 0; pointer-events: none; opacity: 0.05; background-size: 180px 180px; mix-blend-mode: multiply; }
.vineta { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 64% 64% at 50% 50%, rgba(120, 80, 30, 0) 70%, rgba(110, 70, 26, 0.24) 100%); }

/* ---------- marca ---------- */
.marca { position: fixed; top: var(--margen); left: calc(var(--margen) + 18px); pointer-events: none; transition: opacity 0.8s var(--curva); }
.titulo { margin: 0; font: 400 34px/1 var(--serif); letter-spacing: -0.01em; }
.titulo em { font-style: italic; }
/* al encontrar los diez, el «in» de incognita se tacha en lapislázuli y desaparece: Aegyptus cognita (como sus hermanas) */
.titulo .pre { display: inline-block; position: relative; transition: max-width 1.2s var(--curva) 0.9s, opacity 0.8s ease 0.9s; max-width: 1em; vertical-align: bottom; overflow: hidden; }
.titulo .pre::after { content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 2px; background: var(--acento); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--curva); }
.completo .titulo .pre::after { transform: scaleX(1); }
.completo .titulo .pre { max-width: 0; opacity: 0; }
.sub { margin: 8px 0 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-3); }
.sub .jero { font-size: 15px; color: var(--tinta-2); vertical-align: -1px; }
.en-escena .marca { opacity: 0.35; }
.final-activo .marca { opacity: 1; }
/* la cabecera y los botones de arriba van sobre la cenefa: un parche de papiro difuminado detrás */
.marca::before { content: ""; position: absolute; z-index: -1; inset: -30px -60px -24px -44px; background: radial-gradient(closest-side, rgba(var(--luz-papiro), 0.92), rgba(var(--luz-papiro), 0.7) 55%, rgba(var(--luz-papiro), 0)); }

/* ---------- arriba a la derecha: el sonido y el papiro, en una fila y a la misma altura; debajo, en táctil, el modo ---------- */
.botones { position: fixed; top: calc(var(--margen) - 4px); right: calc(var(--margen) + 8px); display: grid; grid-template-columns: auto auto; gap: 10px; justify-items: end; pointer-events: none; transition: opacity 0.6s; }
.botones > * { pointer-events: auto; }
.b-cuaderno {
  grid-column: 2; grid-row: 1; position: relative;
  display: flex; flex-direction: column; gap: 9px; padding: 11px 14px 12px;
  border: 1px solid var(--linea); background: rgba(var(--luz-papiro), 0.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
  transition: border-color 0.3s, background-color 0.8s, color 0.8s, opacity 0.6s, transform 0.6s var(--curva);
}
.b-cuaderno:hover { border-color: var(--tinta-3); }
.b-etq .jero { font-size: 14px; vertical-align: -1px; margin-right: 2px; }
.b-fila { display: flex; justify-content: space-between; gap: 22px; width: 100%; }
.b-cont { color: var(--acento); font-weight: 500; }
.segmentos { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; width: 100%; min-width: 150px; }   /* WebKit no estira los hijos de un <button> */
.segmentos i { height: 3px; background: var(--tinta-4); transition: background 0.6s; }
.segmentos i.si { background: var(--acento); }
.b-cuaderno.pulso { animation: pulso 1.4s var(--curva) 3; }
@keyframes pulso { 0%, 100% { border-color: var(--linea); } 40% { border-color: var(--acento); box-shadow: 0 0 0 4px rgba(47, 79, 166, 0.14); } }
.en-escena .b-cuaderno, .cuaderno-abierto .b-cuaderno { opacity: 0; pointer-events: none; transform: translateY(-8px); visibility: hidden; transition: opacity 0.6s, transform 0.6s var(--curva), visibility 0s linear 0.6s; }

/* el botón del sonido, a la izquierda del papiro y de su misma altura (la fila los estira); encendido, la nota en
   lapislázuli. Durante las escenas y con el papiro abierto se va, como el papiro (con el teclado, vuelve al enfocarlo) */
.b-sonido { grid-column: 1; grid-row: 1; position: relative; width: 50px; border: 1px solid var(--linea); background: rgba(var(--luz-papiro), 0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--texto-3); font-size: 17px; transition: border-color 0.3s, color 0.3s, background-color 0.8s, opacity 0.6s; }
.b-sonido:hover { border-color: var(--tinta-3); color: var(--tinta); }
.b-sonido.activo { color: var(--acento); border-color: var(--acento); }
.b-sonido:not(.activo)::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 1px; background: currentColor; transform: rotate(-35deg); }
.en-escena .b-sonido, .cuaderno-abierto .b-sonido { opacity: 0; pointer-events: none; }
.en-escena .b-sonido:focus-visible { opacity: 1; pointer-events: auto; }
/* de noche, los dos botones de arriba pasan, como las cartelas, al azul de los techos de las tumbas con letra crema */
.noche .b-cuaderno, .noche .b-sonido { background: rgba(22, 32, 72, 0.86); border-color: rgba(246, 231, 198, 0.2); color: rgba(246, 231, 198, 0.9); }
.noche .b-cuaderno:hover, .noche .b-sonido:hover { border-color: rgba(246, 231, 198, 0.5); }
.noche .b-cont { color: #9fb6ff; }
.noche .segmentos i { background: rgba(246, 231, 198, 0.22); }
.noche .segmentos i.si { background: #9fb6ff; }
.noche .b-sonido { color: rgba(246, 231, 198, 0.62); }
.noche .b-sonido:hover { color: #fffaf0; }
.noche .b-sonido.activo { color: #9fb6ff; border-color: #9fb6ff; }

/* ---------- el modo del dedo (en táctil): «Mover | Escribir», la activa en lapislázuli, y debajo lo que hace el dedo ---------- */
.modo { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; transition: opacity 0.6s; }
.modo[hidden] { display: none; }
.modo-botones { display: flex; gap: 3px; padding: 4px; background: var(--cartela); box-shadow: var(--filete-cartela), var(--sombra-cartela); transition: background-color 0.8s, box-shadow 0.8s; }
.m-boton { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 12px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-3); transition: background-color 0.25s, color 0.25s; }
.m-boton svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.m-boton[aria-pressed="true"] { background: var(--acento); color: #f7e2b8; cursor: default; }
.m-boton.late { animation: late 1.1s var(--curva) 3; }
@keyframes late { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 79, 166, 0); } 45% { box-shadow: 0 0 0 4px rgba(47, 79, 166, 0.3); background: rgba(47, 79, 166, 0.14); color: var(--acento); } }
.modo-ayuda { margin: 0; padding: 5px 9px; font-size: 10px; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); background: var(--cartela); box-shadow: var(--sombra-cartela); transition: background-color 0.8s, color 0.8s; }
.modo-ayuda:empty { display: none; }
.noche .m-boton { color: rgba(246, 231, 198, 0.62); }
.noche .m-boton[aria-pressed="true"] { background: #3b5bbd; color: #fffaf0; }
.noche .modo-ayuda { color: rgba(246, 231, 198, 0.82); }
.en-escena .modo { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.6s, visibility 0s linear 0.6s; }

/* ---------- instrumentos ---------- */
.hud { position: fixed; pointer-events: none; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; transition: opacity 0.6s; }
.hud-izq { left: calc(var(--margen) + 8px); display: grid; align-content: center; gap: 3px; line-height: 1.3; }
.hud-izq div { display: grid; grid-template-columns: 64px 13.2em; align-items: center; }   /* (13,2 em: cabe «Valle de los Reyes», el sitio más largo; así la cartela no cambia de tamaño) */
.hud-izq span { color: var(--texto-3); }
.hud-izq span .jero { font-size: 13px; color: var(--tinta-2); }
.hud-izq b { font-weight: 500; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barras { display: inline-flex; align-items: flex-end; gap: 3px; height: 12px; }
.barras i { width: 4px; background: var(--tinta-4); transition: background 0.25s; }
.barras i:nth-child(1) { height: 4px; } .barras i:nth-child(2) { height: 6px; } .barras i:nth-child(3) { height: 8px; } .barras i:nth-child(4) { height: 10px; } .barras i:nth-child(5) { height: 12px; }
.barras i.si { background: var(--acento); }
/* la ayuda: dos frases que no se parten; en una pantalla estrecha, una debajo de otra (sin el punto) */
.hud-der { right: calc(var(--margen) + 8px); display: flex; align-items: center; color: var(--texto-3); }
.hud-der span { white-space: nowrap; }
.hud-der span + span::before { content: "·"; margin: 0 0.75em; }
.en-escena .hud, .en-escena .mapa { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.6s, visibility 0s linear 0.6s; }
.tactil .hud-der { display: none; }   /* (en táctil, la ayuda va con el modo del dedo, que es lo que explica) */
/* abajo pasa la franja de ojos de Horus y escarabajos, que se mueve con el friso: cada bloque es una cartela de papiro liso,
   opaca y de tamaño fijo, con un filete de lapislázuli y oro, como los registros de la referencia 1. Tapa motivos enteros
   con un borde limpio, y va centrada en la línea de los motivos (--franja) */
.hud-izq, .hud-der { bottom: var(--franja); transform: translateY(50%); height: var(--alto-cartela); padding: 0 1.1em; background: var(--cartela); box-shadow: var(--filete-cartela), var(--sombra-cartela); transition: opacity 0.6s, background-color 0.8s, box-shadow 0.8s, color 0.8s; }
.hud-izq span, .hud-izq b { transition: color 0.8s; }

.teclas { position: fixed; left: 50%; bottom: calc(var(--franja) + var(--alto-cartela) / 2 + 8px); transform: translateX(-50%); display: flex; gap: 6px; pointer-events: none; }
.teclas kbd, .saltar kbd {
  font: 500 11px/1 var(--mono); padding: 5px 7px; min-width: 24px; text-align: center;
  border: 1px solid var(--linea); color: var(--tinta-2); background: rgba(var(--luz-papiro), 0.86);
}
.teclas kbd { animation: tecla 2.2s ease forwards; }
@keyframes tecla { 0% { opacity: 0; transform: translateY(6px); } 10%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* el mapa del Nilo: una línea con la ventana de lo que se ve, en su cartela (la dibuja ::after, por fuera de la caja: la
   ventana y las marcas se miden con el ancho del mapa). Se toca en toda la cartela y algo más (.mapa-area, al menos 44 px
   de alto); el dedo no lo coge el navegador (touch-action) */
.mapa { position: fixed; left: 50%; bottom: var(--franja); width: min(260px, 40vw); height: 20px; transform: translate(-50%, 50%); cursor: pointer; touch-action: none; transition: opacity 0.6s, background-color 0.8s, box-shadow 0.8s; }
.mapa::after { content: ""; position: absolute; z-index: -1; inset: calc((20px - var(--alto-mapa)) / 2) -16px; background: var(--cartela); box-shadow: var(--filete-cartela), var(--sombra-cartela); transition: inherit; }   /* (hereda la del mapa: las capturas quitan las transiciones con «*», que no llega a ::after) */
.mapa::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--tinta-3); }
.mapa i { position: absolute; top: 1px; height: 17px; border: 1px solid var(--tinta-2); background: rgba(249, 234, 202, 0.6); }
.mapa b { position: absolute; top: 6px; width: 1px; height: 7px; background: var(--tinta-3); }
.mapa-area { position: absolute; left: -16px; right: -16px; top: calc((20px - max(44px, var(--alto-mapa))) / 2); bottom: calc((20px - max(44px, var(--alto-mapa))) / 2); }
/* mientras se arrastra, el nombre del sitio, encima de la ventana (lo coloca interfaz.js, sin salirse de la pantalla) */
.mapa-nombre { position: absolute; left: 0; bottom: calc((var(--alto-mapa) + 20px) / 2 + 6px); transform: translateX(-50%); padding: 6px 10px; white-space: nowrap; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta); background: var(--cartela); box-shadow: var(--filete-cartela), var(--sombra-cartela); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.mapa.arrastrando .mapa-nombre { opacity: 1; }
/* de noche, las cartelas son del azul de los techos de las tumbas, con el mismo filete, y el texto pasa a crema */
:root.noche { --cartela: rgb(22, 32, 72); --filete-cartela: inset 0 0 0 2px #3b5bbd, inset 0 0 0 3px rgba(236, 184, 76, 0.85); --sombra-cartela: 0 2px 6px -1px rgba(4, 8, 26, 0.5); }
.noche .hud-izq span, .noche .hud-der { color: rgba(246, 231, 198, 0.62); }
.noche .hud-izq b, .noche .hud-izq span .jero { color: rgba(246, 231, 198, 0.9); }
.noche .barras i { background: rgba(246, 231, 198, 0.22); }
.noche .barras i.si { background: #9fb6ff; }
.noche .mapa::before { background: rgba(246, 231, 198, 0.5); }
.noche .mapa i { border-color: rgba(246, 231, 198, 0.8); background: rgba(22, 32, 72, 0.6); }
.noche .mapa b { background: rgba(246, 231, 198, 0.5); }
.noche .mapa-nombre { color: rgba(246, 231, 198, 0.92); }

/* ---------- el papiro de los secretos ---------- */
.cuaderno {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%;
  display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--linea);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateX(102%); transition: transform 0.6s var(--curva);
  -webkit-user-select: text; user-select: text;
  box-shadow: -12px 0 40px rgba(90, 60, 20, 0.1);
}
.cuaderno.abierto { transform: none; }
.c-cabeza { display: flex; justify-content: space-between; align-items: flex-start; padding: 30px 28px 0; }
.c-etq { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento); }
.c-etq .jero { font-size: 15px; }
.cuaderno h2 { margin: 0; font: italic 400 34px/1 var(--serif); }
.c-cerrar { width: 34px; height: 34px; border: 1px solid var(--linea); color: var(--tinta-2); font-size: 13px; }
.c-cerrar:hover { border-color: var(--tinta-3); color: var(--tinta); }
.c-intro { margin: 14px 28px 18px; font: 400 17px/1.35 var(--serif); color: var(--tinta-2); }
/* todo menos la cabecera se desplaza (en una pantalla baja, la nota de las fuentes, fija abajo, dejaba sitio para una
   entrada o menos); abajo se funde mientras queda más por leer */
.c-desliza { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000 calc(100% - 36px), transparent); }
.c-desliza.al-final { -webkit-mask-image: none; mask-image: none; }
.c-desliza:focus-visible { outline-offset: -3px; }
.lista { list-style: none; margin: 0; padding: 0 28px; border-top: 1px solid var(--linea); }
.entrada { display: grid; grid-template-columns: 44px 1fr; gap: 4px; padding: 16px 0 17px; border-bottom: 1px solid var(--linea); }
/* el número, en cifras egipcias (rayitas para las unidades y el ∩ del diez) */
.e-num { font: 400 22px/1 var(--jero); color: var(--texto-3); padding-top: 3px; }
.e-tipo { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-3); }
.e-nombre { margin: 3px 0 5px; font: 400 25px/1.05 var(--serif); min-height: 26px; }
.e-nombre small { font: 400 17px/1 var(--jero); color: var(--texto-3); margin-left: 9px; }
/* sin descubrir: un trozo de papiro raspado */
.e-censura { display: inline-block; height: 0.62em; vertical-align: 0.06em; background: repeating-linear-gradient(90deg, rgba(58, 38, 20, 0.55) 0 5px, rgba(58, 38, 20, 0.35) 5px 7px); border-radius: 2px 6px 3px 5px; }
.e-pista { margin: 0; font: italic 400 16px/1.35 var(--serif); color: var(--tinta-2); }
.e-meta { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.e-ver { color: var(--acento); letter-spacing: 0.12em; text-transform: uppercase; font-size: 10.5px; border-bottom: 1px solid transparent; }
.e-ver:hover { border-bottom-color: var(--acento); }
/* «Leer»: el texto de la tarjeta, desplegable */
.e-leer { margin-top: 8px; }
.e-leer summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento); }
.e-leer summary::-webkit-details-marker { display: none; }
.e-leer summary::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.25s; }
.e-leer[open] summary::before { transform: rotate(90deg); }
.e-leer summary:hover { color: var(--tinta); }
.e-leer-txt { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--acento-2); -webkit-user-select: text; user-select: text; }
.e-leer-txt p { margin: 0; font: 400 16px/1.42 var(--serif); color: var(--tinta-2); }
.e-leer-pie { margin-top: 8px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-3); }
.entrada.hallada .e-num { color: var(--acento); }
.entrada.hallada .e-nombre { font-style: italic; }
.entrada.hallada .e-pista { color: var(--texto-3); }
.entrada.nueva .e-nombre { animation: revela 1.6s var(--curva); }
@keyframes revela { from { opacity: 0; letter-spacing: 0.08em; filter: blur(6px); } to { opacity: 1; letter-spacing: 0; filter: none; } }
.c-fuentes { margin: 0; padding: 10px 28px 0; font-size: 10px; letter-spacing: 0.08em; color: var(--texto-3); }
.c-credito { margin: 0; padding: 12px 28px 0; font: italic 400 16px/1.3 var(--serif); color: var(--texto-3); }
.c-credito a { color: var(--tinta); text-decoration: none; cursor: pointer; }
.c-credito a:hover b { color: var(--acento); }
.c-credito b { font-weight: 400; transition: color 0.2s; }
.c-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 16px 28px 26px; border-top: 1px solid var(--linea); margin-top: 12px; }
.c-boton { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento); }
.c-boton-tenue { color: var(--texto-3); margin-left: auto; }
.c-boton:hover { color: var(--tinta); }

/* ---------- tarjeta de cada secreto: los jeroglíficos en columna + el texto ----------
   Acaba encima del Nilo (--rio1, el borde de abajo del río: la cenefa de zigzag queda libre), a la izquierda o, si la escena
   lo pide (tarjeta.lado = 'derecha'), a la derecha. Su tema se decide al salir (.oscura si es de noche) y no cambia mientras
   está puesta, aunque la escena cambie la hora. Con el puntero o el dedo encima, la escena espera (.retenida, «En pausa»).
   Si no cabe, el texto se desplaza dentro (.desborda) */
.tarjeta {
  position: fixed; left: 6vw; bottom: calc(var(--rio1) + 14px); max-width: min(640px, 88vw); pointer-events: none;
  display: flex; gap: 26px; align-items: flex-end;
  opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--curva), transform 1.1s var(--curva);
}
.tarjeta.derecha { left: auto; right: 6vw; }
.tarjeta.visible { opacity: 1; transform: none; }
.en-escena .tarjeta.visible { pointer-events: auto; cursor: default; }
.tarjeta::before { content: ""; position: absolute; z-index: -1; inset: -80px -120px -70px -140px; background: radial-gradient(closest-side, rgba(249, 234, 202, 0.95), rgba(249, 234, 202, 0.76) 55%, rgba(249, 234, 202, 0)); }
.tarjeta.derecha::before { inset: -80px -140px -70px -120px; }
.tarjeta.oscura::before { background: radial-gradient(closest-side, rgba(20, 30, 66, 0.9), rgba(20, 30, 66, 0.66) 55%, rgba(20, 30, 66, 0)); }
.tarjeta.oscura .t-jero, .tarjeta.oscura .t-tit { color: #f6e7c6; }
.tarjeta.oscura .t-txt { color: rgba(246, 231, 198, 0.86); }
.tarjeta.oscura .t-pie { color: rgba(246, 231, 198, 0.6); }
.t-cuerpo { position: relative; min-width: 0; }
.tarjeta.desborda .t-cuerpo { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: 6px; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
.tarjeta.desborda.al-final .t-cuerpo { -webkit-mask-image: none; mask-image: none; }
.noche .marca, .noche .saltar { color: #f6e7c6; }
.noche .marca::before { background: radial-gradient(closest-side, rgba(20, 30, 66, 0.7), rgba(20, 30, 66, 0)); }
.noche .sub, .noche .sub .jero { color: rgba(246, 231, 198, 0.66); }
/* (un signo por línea, en escritura horizontal: en vertical, dentro de la fila flexible, WebKit los partía en varias
   columnas y medían otra cosa. El tamaño lo ajusta interfaz.js: la columna no pasa del alto del texto) */
.t-jero { font-size: clamp(46px, 6vw, 78px); line-height: 1.1; text-align: center; color: var(--tinta); flex: none; }
.t-jero span { display: block; }
.t-jero:empty { display: none; }
/* un cartucho en columna: el óvalo y el nudo de abajo */
.t-jero.cartucho { position: relative; padding: 0.3em 0.14em; border: 2px solid currentColor; border-radius: 999px; }
.t-jero.cartucho::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -7px; height: 3px; background: currentColor; }
.t-etq { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acento); }
.tarjeta.oscura .t-etq { color: #9fb6ff; }
/* «En pausa»: a la derecha de la etiqueta, solo mientras la escena espera */
.t-pausa { margin-left: auto; padding-left: 14px; display: inline-flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: 0.16em; white-space: nowrap; opacity: 0; transition: opacity 0.3s; }
.t-pausa::before { content: ""; width: 7px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.tarjeta.retenida .t-pausa { opacity: 1; }
.t-etq::before { content: ""; width: 0; height: 1px; background: currentColor; transition: width 1s var(--curva) 0.3s; }
.tarjeta.visible .t-etq::before { width: 44px; }
.t-tit { margin: 12px 0 12px; font: italic 400 clamp(40px, 5.4vw, 68px)/0.98 var(--serif); letter-spacing: -0.015em; }
.t-txt { margin: 0; font: 400 19px/1.38 var(--serif); color: var(--tinta-2); max-width: 480px; }
.t-pie { margin-top: 14px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-3); }

/* ---------- aviso, saltar ---------- */
/* «Secreto encontrado 03/10 · El pozo de Siena»: en el papiro libre de arriba (lo coloca interfaz.js: entre el título y
   los botones si cabe; si no, entre la cabecera y el friso, o debajo de los botones). En una pantalla estrecha, el nombre
   va en su propia línea */
.aviso {
  position: fixed; top: 26px; left: 50%; transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; width: max-content; max-width: calc(100vw - 2 * var(--margen));
  border: 1px solid var(--acento-2); background: rgba(249, 234, 202, 0.96);
  font-size: 11px; line-height: 1.45; letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
  transition: opacity 0.5s, transform 0.7s var(--curva);
}
.aviso::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 2px rgba(246, 183, 51, 0.55); }
.aviso b { color: var(--acento); font-weight: 500; }
.aviso .a-nombre { font: italic 400 18px/1.15 var(--serif); letter-spacing: 0; text-transform: none; }
.aviso .a-nombre::before { content: "·"; margin: 0 0.75em 0 0.6em; font: 400 11px var(--mono); }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
/* «Saltar», durante las escenas, en la misma cartela que la ayuda (que entonces se esconde): también va sobre la franja */
.saltar {
  position: fixed; right: calc(var(--margen) + 8px); bottom: var(--franja); transform: translateY(50%); height: var(--alto-cartela); padding: 0 1.1em;
  display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-3);
  background: var(--cartela); box-shadow: var(--filete-cartela), var(--sombra-cartela);
  opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.6s, visibility 0s linear 0.6s, color 0.2s, background-color 0.8s, box-shadow 0.8s;
}
.en-escena .saltar { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 0.6s 0.8s, visibility 0s 0.8s, color 0.2s, background-color 0.8s, box-shadow 0.8s; }
.saltar:hover { color: var(--tinta); }
.noche .saltar:hover { color: #fffaf0; }
@media (pointer: coarse) { .saltar kbd { display: none; } }   /* (en el móvil no hay tecla Esc) */
.tactil .saltar kbd { display: none; }   /* (lo mismo, con lo que detecta interfaz.js) */

/* ---------- entrada y créditos ---------- */
/* centradas, pero si no caben (un móvil apaisado) se desplazan: el margen automático se queda en cero y la caja empieza
   arriba (con place-items: center, lo de arriba quedaba fuera, sin poder llegar) */
.intro, .creditos {
  position: fixed; inset: 0; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(ellipse at 50% 50%, rgba(249, 234, 202, 0.74), rgba(249, 234, 202, 0.96) 70%);
  transition: opacity 0.9s var(--curva);
}
.intro[hidden], .creditos[hidden] { display: none; }
.intro.saliendo { opacity: 0; pointer-events: none; }
.intro-caja { margin: auto; max-width: 600px; text-align: center; }
.creditos-caja { margin: auto; max-width: 980px; text-align: center; }
/* mientras la entrada está abierta, lo de debajo (título, botones, instrumentos, mapa) no se transparenta */
:root:has(#intro:not([hidden]):not(.saliendo)) :is(.marca, .botones, .hud, .mapa, .teclas, .aviso) { opacity: 0; pointer-events: none; }
/* el ankh de la entrada, en oro */
.intro-marca { display: block; width: 86px; height: 150px; margin: 0 auto 8px; filter: drop-shadow(0 6px 14px rgba(140, 80, 10, 0.25)); }
.intro h2 { margin: 6px 0 10px; font: 400 clamp(48px, 8vw, 84px)/0.92 var(--serif); letter-spacing: -0.02em; }
.intro-sub { margin: 0 0 18px; font: 400 12px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-3); }
.intro-sub .jero { font-size: 16px; color: var(--tinta-2); vertical-align: -1px; }
.intro p.intro-txt { margin: 0 auto 30px; max-width: 490px; font: 400 21px/1.38 var(--serif); color: var(--tinta-2); }
.intro button, .creditos-enlace, .creditos-cerrar {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px;
  font: 400 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.intro button, .creditos-enlace { border: 1px solid var(--acento); color: var(--acento); }
.intro button:hover, .creditos-enlace:hover { background: var(--acento); color: var(--papiro); }

.creditos { opacity: 0; transition: opacity 1.2s var(--curva); }
.creditos.visible { opacity: 1; }
.creditos.saliendo { opacity: 0; transition-duration: 0.6s; }
.creditos-etq, .creditos-txt, .creditos-botones { opacity: 0; transform: translateY(10px); }
.creditos-etq { margin: 0; font: 400 11px/1.4 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--acento); transition: opacity 0.9s 0.3s, transform 1.1s var(--curva) 0.3s; }
.creditos-nombre { margin: 20px 0 0; font: italic 400 clamp(42px, 7vw, 100px)/0.95 var(--serif); letter-spacing: 0.08em; opacity: 0; filter: blur(12px); transition: opacity 1.4s 0.7s, filter 1.8s var(--curva) 0.7s, letter-spacing 2.4s var(--curva) 0.7s; }
.creditos-linea { width: 0; height: 1px; margin: 28px auto 22px; background: var(--acento); transition: width 1.3s var(--curva) 1.7s; }
.creditos-txt { margin: 0 0 32px; font: 400 21px/1.35 var(--serif); color: var(--tinta-2); transition: opacity 1s 2s, transform 1.2s var(--curva) 2s; }
.creditos-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; transition: opacity 1s 2.4s, transform 1.2s var(--curva) 2.4s; }
.creditos.visible .creditos-etq, .creditos.visible .creditos-txt, .creditos.visible .creditos-botones { opacity: 1; transform: none; }
.creditos.visible .creditos-nombre { opacity: 1; filter: none; letter-spacing: -0.015em; }
.creditos.visible .creditos-linea { width: 72px; }
.creditos-cerrar { border: 1px solid var(--linea); color: var(--tinta-2); }
.creditos-cerrar:hover { border-color: var(--tinta-3); color: var(--tinta); }
.creditos-enlace[hidden] { display: none; }

/* ---------- la carga: un disco solar que late (CSS: sigue vivo aunque el JavaScript esté ocupado) ---------- */
.cargando { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--papiro); color: var(--texto-3); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; transition: opacity 0.7s; }
.cargando.fuera { opacity: 0; pointer-events: none; }
.cargando-sol { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #ff9a6a 0, #e2502a 46%, #a8361a 100%); box-shadow: 0 0 0 4px #f6b733, 0 0 0 5px rgba(138, 74, 12, 0.5), 0 0 26px 6px rgba(246, 183, 51, 0.45); animation: sol 1.8s ease-in-out infinite; }
@keyframes sol { 0%, 100% { transform: scale(0.82); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } }

/* ---------- pantallas estrechas ---------- */
/* la ayuda, en dos filas cuando no cabe junto al mapa */
@media (max-width: 1000px) { .hud-der { flex-direction: column; justify-content: center; align-items: flex-end; } .hud-der span + span::before { content: none; } }
/* entre 700 y 900 px: la letra de los instrumentos, de 10 px, y el mapa más corto para que quepan las tres cartelas */
@media (max-width: 900px) { .hud { font-size: 10px; } .mapa { width: min(260px, calc(100vw - 560px)); } }
@media (max-width: 700px) {
  :root { --margen: 18px; }
  .titulo { font-size: 26px; }
  .marca { left: var(--margen); }
  .sub { font-size: 10px; margin-top: 6px; }
  .botones { right: var(--margen); }
  .b-cuaderno { padding: 9px 11px 10px; font-size: 10px; }
  .b-fila { gap: 12px; }
  .segmentos { min-width: 110px; }
  .hud-der { display: none; }
  .aviso .a-nombre { display: block; margin-top: 3px; }
  .aviso .a-nombre::before { content: none; }
}
/* el móvil de pie: abajo, en dos filas. Abajo del todo, el sonido y el mapa (al alcance del pulgar); encima, los
   instrumentos y, a su derecha, el modo del dedo (Mover encima de Escribir) con su ayuda encima */
@media (max-width: 700px) and (min-height: 501px) {
  :root { --alto-cartela: 60px; --alto-mapa: 40px; }
  .b-sonido { position: fixed; left: var(--margen); bottom: var(--margen); width: 40px; height: 40px; border: 0; background: var(--cartela); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--filete-cartela), var(--sombra-cartela); }
  .noche .b-sonido { background: var(--cartela); }
  .mapa { left: calc(var(--margen) + 40px + 10px + 16px); right: calc(var(--margen) + 16px); width: auto; bottom: calc(var(--margen) + 10px); transform: none; }
  .hud-izq { left: var(--margen); bottom: calc(var(--margen) + 48px); transform: none; padding: 0 0.9em; }
  .hud-izq div { grid-template-columns: 52px 13.2em; }
  .modo { position: fixed; right: var(--margen); bottom: calc(var(--margen) + 48px); flex-direction: column-reverse; }
  .modo-botones { flex-direction: column; height: 60px; padding: 3px; gap: 2px; }
  .m-boton { flex: 1; min-height: 0; justify-content: flex-start; padding: 0 10px 0 8px; font-size: 10px; }
  .m-boton svg { width: 15px; height: 15px; }
  .teclas { bottom: calc(var(--margen) + 48px + 60px + 8px); }
  .saltar { right: var(--margen); bottom: var(--margen); transform: none; height: 44px; }
  .cuaderno { top: auto; left: 0; width: 100%; height: 82vh; border-left: 0; border-top: 1px solid var(--linea); transform: translateY(102%); }
  .c-cabeza { padding: 22px 18px 0; }
  .c-intro { margin: 10px 18px 14px; font-size: 16px; }
  .lista { padding: 0 18px; }
  .c-pie { padding: 14px 18px 22px; }
  .c-cabeza { padding-bottom: 12px; }
  .c-fuentes, .c-credito { padding-left: 18px; padding-right: 18px; }
  .tarjeta { left: 18px; right: 18px; gap: 14px; }
  .t-jero { font-size: 40px; }
  .t-tit { font-size: 38px; }
  .t-txt { font-size: 16px; }
  .intro-marca { width: 64px; height: 112px; }
  .creditos-txt { font-size: 18px; }
}
@media (max-width: 480px) { .sub { display: none; } }

/* un móvil de pie con poco papiro debajo del friso (con las barras de Safari, un iPhone deja 50–100 px): los instrumentos,
   centrados en la franja de motivos como en escritorio (tapan motivos enteros, no medios); el modo del dedo, arriba,
   debajo del papiro; y el sonido y el mapa, en una fila en el papiro de debajo, centrados en él (--libre lo pone interfaz.js) */
.hud-en-franja { --alto-cartela: min(60px, calc(0.122 * var(--u))); }
.hud-en-franja .hud-izq { bottom: var(--franja); transform: translateY(50%); }
.hud-en-franja .modo { position: static; flex-direction: column; }
.hud-en-franja .modo-botones { flex-direction: row; height: auto; }
.hud-en-franja .m-boton { flex: none; min-height: 32px; padding: 0 11px; justify-content: center; }
.hud-en-franja .b-sonido { bottom: max(6px, calc((var(--libre) - 40px) / 2)); }
.hud-en-franja .mapa { bottom: max(16px, calc((var(--libre) - 40px) / 2 + 10px)); }

/* con el friso centrado (un móvil de pie), la tarjeta va en el papiro libre de debajo del friso (no tapa el suelo donde
   pasa la escena): una cartela con los jeroglíficos en fila encima de la etiqueta y, si no cabe, el texto se desplaza
   dentro. Su tema es el que tenía al salir (no el de la hora). «Saltar» sube arriba a la derecha, donde estaba el papiro */
.friso-centrado .tarjeta {
  left: var(--margen); right: var(--margen); top: var(--tarjeta-arriba, auto); bottom: auto; max-width: none;
  flex-direction: column; align-items: stretch; gap: 8px; padding: 13px 15px 14px;
  background: rgb(249, 234, 202); box-shadow: inset 0 0 0 2px #2f4fa6, inset 0 0 0 3px #dca23a, 0 2px 6px -1px rgba(58, 38, 20, 0.3);
}
.friso-centrado .tarjeta.oscura { background: rgb(22, 32, 72); box-shadow: inset 0 0 0 2px #3b5bbd, inset 0 0 0 3px rgba(236, 184, 76, 0.85), 0 2px 6px -1px rgba(4, 8, 26, 0.5); }
.friso-centrado .tarjeta::before { content: none; }
.friso-centrado .t-jero { align-self: flex-start; font-size: 26px; line-height: 1.25; white-space: nowrap; }
.friso-centrado .t-jero span { display: inline-block; margin: 0 0.03em; }
.friso-centrado .t-jero.cartucho { padding: 0.02em 0.34em; }
.friso-centrado .t-jero.cartucho::after { left: auto; right: -6px; top: 18%; bottom: 18%; width: 3px; height: auto; }
.friso-centrado .t-etq { font-size: 10px; }
.friso-centrado .t-tit { margin: 7px 0 8px; font-size: 32px; }
.friso-centrado .t-txt { font-size: 16px; line-height: 1.36; max-width: none; }
.friso-centrado .t-pie { margin-top: 10px; font-size: 10px; }
/* muy poco sitio (un móvil de pie con las barras del navegador): sin la fila de jeroglíficos, que es adorno, y con el
   título más pequeño, para que se lean varias líneas */
.friso-centrado .tarjeta.apretada { padding-top: 11px; }
.friso-centrado .tarjeta.apretada .t-jero { display: none; }
.friso-centrado .tarjeta.apretada .t-tit { margin: 4px 0 6px; font-size: 26px; }
.friso-centrado .saltar { top: calc(var(--margen) - 4px); bottom: auto; right: var(--margen); transform: none; height: 42px; }

/* ---------- un móvil apaisado (o una ventana muy baja): todo más compacto para que se vean el Nilo y la línea de suelo ----------
   Los instrumentos, en una fila dentro de la franja de los motivos de abajo, y el mapa a su derecha; el modo del dedo,
   arriba a la derecha, debajo del papiro; el título, más pequeño y sin subtítulo (y, en las escenas, fuera) */
@media (max-height: 500px) {
  :root { --margen: 18px; --alto-cartela: 32px; }
  .titulo { font-size: 24px; }
  .marca { left: var(--margen); }
  .sub { display: none; }
  .marca::before { inset: -22px -46px -18px -34px; }
  .en-escena .marca { opacity: 0; }
  .botones { right: var(--margen); gap: 8px; }
  .b-cuaderno { padding: 8px 11px 9px; font-size: 10px; gap: 7px; }
  .b-fila { gap: 12px; }
  .segmentos { min-width: 110px; }
  .b-sonido { width: 42px; font-size: 15px; }
  .m-boton { min-height: 30px; padding: 0 10px; font-size: 10px; }
  .m-boton svg { width: 15px; height: 15px; }
  .hud { font-size: 10px; }
  .hud-izq { left: var(--margen); grid-auto-flow: column; align-items: center; column-gap: 18px; padding: 0 12px; }
  .hud-izq div { column-gap: 8px; }
  .hud-izq div:nth-child(1) { grid-template-columns: auto 13.2em; }
  .hud-izq div:nth-child(2) { grid-template-columns: auto 11.4em; }   /* (cabe «12.ª de la noche») */
  .hud-izq div:nth-child(3) { grid-template-columns: auto auto; }
  .hud-der { display: none; }
  .mapa { left: auto; right: calc(var(--margen) + 16px); width: clamp(100px, calc(100vw - 2 * var(--margen) - var(--hud-ancho, 470px) - 44px), 260px); transform: translateY(50%); }
  .saltar { right: var(--margen); }
  .tarjeta { left: 5vw; gap: 16px; max-width: min(600px, 90vw); }
  .tarjeta.derecha { right: 5vw; }
  .t-etq { font-size: 10px; gap: 10px; }
  .t-tit { margin: 6px 0 8px; font-size: 30px; }
  .t-txt { font-size: 15px; line-height: 1.34; max-width: 520px; }
  .t-pie { margin-top: 8px; font-size: 10px; }
  .c-cabeza { padding: 18px 22px 0; }
  .cuaderno h2 { font-size: 28px; }
  .c-intro { display: none; }
  .c-cabeza { padding-bottom: 10px; }
  .lista { padding: 0 22px; }
  .entrada { padding: 11px 0 12px; }
  .c-fuentes, .c-credito { padding-left: 22px; padding-right: 22px; }
  .c-pie { padding: 10px 22px 14px; margin-top: 8px; }
}
/* sin sitio para los nombres de los instrumentos (un móvil apaisado pequeño): solo los valores, y el Ka */
@media (max-height: 500px) and (max-width: 760px) {
  .hud-izq div:nth-child(-n+2) > span { display: none; }
  .hud-izq div:nth-child(1) { grid-template-columns: 13.2em; }
  .hud-izq div:nth-child(2) { grid-template-columns: 11.4em; }
}
/* la entrada, compacta cuando la pantalla es baja (y, si aun así no cabe, se desplaza) */
@media (max-height: 520px) {
  .intro { padding: 12px 24px; }
  .intro-marca { width: 38px; height: 66px; margin-bottom: 2px; }
  .intro h2 { margin: 2px 0 6px; font-size: 46px; }
  .intro-sub { margin-bottom: 10px; font-size: 11px; }
  .intro p.intro-txt { margin-bottom: 14px; max-width: 600px; font-size: 17px; line-height: 1.3; }
  .intro button { padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tarjeta, .cuaderno, .aviso, .intro, .creditos, .creditos * { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .m-boton.late { animation: none; box-shadow: 0 0 0 3px rgba(47, 79, 166, 0.3); }
}