/* =====================================================================
   Frontispicio del Leviatán · versión 4 (para proyectar)
   Todo con el estilo de "Dos columnas": grabado grande, círculos y
   líneas sobre la imagen, texto claro al costado. Piso: 14 px en negrita.
   Las animaciones van a saltos (steps), como recortes de papel en stop
   motion.
   ===================================================================== */

:root {
  --papel: #efe3c8;
  --papel-claro: #f8f0de;
  --papel-oscuro: #dccaa4;
  --sepia: #6b4a2f;
  --tinta: #241a13;
  --noche: #120d09;
  --borravino: #8b1a1a;
  --rojo: #d24a3a;
  --rojo-claro: #ff8f80;
  --mostaza: #b8923a;
  --mostaza-claro: #e7cf8b;
  --piso: 14px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --letra-texto: clamp(20px, 1.3vw + 1.2vh, 40px);
  /* la cámara viaja a saltos: 12 cuadros en .8 s */
  --viaje: .8s steps(12, end);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; background: var(--noche); }
body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
  color: var(--tinta);
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
:focus-visible { outline: 3px solid var(--mostaza-claro); outline-offset: 2px; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 .35em;
  font: 700 max(var(--piso), .8em) / 1.5 var(--serif); text-align: center;
  border: 2px solid currentColor; border-radius: 4px; opacity: .85;
}

/* ---------- Barra ---------- */
.barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  padding: 4px 12px;
  background: var(--tinta); color: var(--papel-claro);
  border-bottom: 3px solid var(--borravino);
}
.titulo { margin: 0; font-size: 20px; line-height: 1.2; white-space: nowrap; }
.titulo em { color: var(--mostaza-claro); }
.anio { font-size: 15px; font-weight: 700; color: var(--mostaza-claro); letter-spacing: .08em; }
.botones { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.boton {
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 40px; min-width: 44px; padding: .15em .8em;
  font: 700 16px var(--serif);
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--papel-oscuro); border-radius: 3px; cursor: pointer;
}
.boton:hover { background: var(--mostaza-claro); }
.boton[aria-pressed="true"] { background: var(--mostaza); border-color: var(--mostaza-claro); }
.boton kbd { font-size: var(--piso); }

/* ---------- Visor ---------- */
.mesa { position: relative; min-height: 0; }
.visor {
  position: absolute; inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #2a1f17 0%, var(--noche) 70%);
  user-select: none; -webkit-user-select: none;
  cursor: grab; touch-action: none;
}
.arrastrando .visor { cursor: grabbing; }
.lamina {
  position: absolute; left: 0; top: 0;
  width: 1930px; height: 3078px;
  transform-origin: 0 0;
  transition: transform var(--viaje);
  box-shadow: 0 0 0 2px #000, 0 0 60px rgba(0,0,0,.7);
}
.sin-viaje .lamina { transition: none; }
.lamina img { display: block; width: 100%; height: 100%; }
#capa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* foco: oscurece todo menos la parte elegida */
#foco { fill: rgba(10, 6, 3, .74); pointer-events: none; opacity: 0; transition: opacity .3s steps(3); }
.con-foco #foco { opacity: 1; }

.zona path {
  fill: transparent; stroke: transparent;
  stroke-width: 4px; vector-effect: non-scaling-stroke;
  pointer-events: all; cursor: pointer;
}
.zona:focus { outline: none; }
.con-mouse .zona:hover path, .zona:focus-visible path {
  fill: rgba(248, 240, 222, .12);
  stroke: var(--mostaza-claro); stroke-width: 3px;
}
.arrastrando .zona path { cursor: grabbing; }

/* ---------- Marcas: círculos y líneas ---------- */
#marcas { pointer-events: none; }
.marca { fill: none; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 3px #120d09) drop-shadow(0 0 3px #120d09); }
.m-papel { stroke: var(--papel-claro); }
.m-t { stroke: var(--rojo); }
.m-e { stroke: var(--mostaza-claro); }
/* el trazo se dibuja a saltos, como lápiz animado cuadro por cuadro */
.trazar { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: trazar .7s steps(7, end) forwards; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.punta { opacity: 0; animation: asomar .1s steps(1, end) forwards; }
@keyframes asomar { to { opacity: 1; } }

/* paneles de un par y vista "Dos columnas" */
.col-temporal { fill: rgba(139, 26, 26, .30); stroke: #c0392b; }
.col-eclesiastico { fill: rgba(184, 146, 58, .34); stroke: var(--mostaza-claro); }
.col-temporal, .col-eclesiastico { stroke-width: 5px; vector-effect: non-scaling-stroke; }
.col-par { stroke: var(--papel-claro); stroke-width: 4px; stroke-dasharray: 10 8; fill: none; vector-effect: non-scaling-stroke; }
.col-flecha { fill: none; stroke-width: 9px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 2px #120d09) drop-shadow(0 0 2px #120d09); }
.col-flecha.t { stroke: var(--rojo); }
.col-flecha.e { stroke: var(--mostaza-claro); }
.col-mano { fill: none; stroke-width: 8px; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px #120d09) drop-shadow(0 0 2px #120d09); }
.col-mano.t { stroke: var(--rojo); }
.col-mano.e { stroke: var(--mostaza-claro); }
/* aparecen de golpe, uno por uno, como papelitos que se apoyan */
.aparecer { opacity: 0; animation: apoyar .45s steps(1, end) forwards; }
@keyframes apoyar {
  0%   { opacity: 1; transform: translate(-6px, -14px) rotate(-1.5deg); }
  33%  { opacity: 1; transform: translate(4px, -6px) rotate(1deg); }
  66%, 100% { opacity: 1; transform: none; }
}
.aparecer, #columnas-dibujo > * { transform-box: fill-box; transform-origin: center; }
.recorte { transform-box: view-box; }

#columnas-dibujo { opacity: 0; pointer-events: none; }
.vista-columnas #columnas-dibujo { opacity: 1; }
.vista-columnas #columnas-dibujo.anima > * {
  opacity: 0; animation: apoyar .45s steps(1, end) forwards;
  animation-delay: calc(.9s + var(--orden) * .12s);
}

/* ---------- Recortes de papel (a lo Terry Gilliam) ----------
   La parte se despega del grabado (queda el hueco oscuro), se mueve a
   saltos con sombra de papel y vuelve a su lugar. */
.hueco { fill: #0b0806; opacity: 0; animation: hueco 1.4s steps(1, end) both; }
@keyframes hueco { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
.recorte { filter: drop-shadow(14px 20px 0 rgba(0, 0, 0, .55)); animation-timing-function: steps(1, end); animation-fill-mode: both; }
.gesto-levantar { animation-name: levantar; animation-duration: 1.2s; }
.gesto-levantar.contra { animation-name: levantar-contra; }
@keyframes levantar {
  0%   { transform: translate(-10px, -24px) rotate(-2deg) scale(1.04); }
  15%  { transform: translate(8px, -30px) rotate(1.5deg) scale(1.05); }
  30%  { transform: translate(-6px, -22px) rotate(-1.5deg) scale(1.04); }
  45%  { transform: translate(5px, -14px) rotate(1deg) scale(1.03); }
  60%  { transform: translate(-3px, -8px) rotate(-.5deg) scale(1.02); }
  75%  { transform: translate(0, -3px) rotate(0) scale(1.01); }
  90%, 100% { transform: none; }
}
@keyframes levantar-contra {
  0%   { transform: translate(10px, -24px) rotate(2deg) scale(1.04); }
  15%  { transform: translate(-8px, -30px) rotate(-1.5deg) scale(1.05); }
  30%  { transform: translate(6px, -22px) rotate(1.5deg) scale(1.04); }
  45%  { transform: translate(-5px, -14px) rotate(-1deg) scale(1.03); }
  60%  { transform: translate(3px, -8px) rotate(.5deg) scale(1.02); }
  75%  { transform: translate(0, -3px) rotate(0) scale(1.01); }
  90%, 100% { transform: none; }
}
.gesto-salto { animation-name: salto; animation-duration: 1.4s; }
@keyframes salto {
  0%   { transform: translateY(-20px) rotate(-1deg); }
  10%  { transform: translateY(-70px) rotate(1deg); }
  20%  { transform: translateY(-95px) rotate(-1deg); }
  30%  { transform: translateY(-40px) rotate(1deg); }
  40%  { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(-50px) rotate(-1deg); }
  60%  { transform: translateY(-65px) rotate(1deg); }
  70%  { transform: translateY(-20px) rotate(0); }
  80%, 100% { transform: none; }
}
.gesto-blandir { animation-name: blandir; animation-duration: 1.3s; }
@keyframes blandir {
  0%   { transform: rotate(0) translate(-6px, -10px); }
  12%  { transform: rotate(-8deg) translate(-6px, -10px); }
  24%  { transform: rotate(5deg) translate(-6px, -10px); }
  36%  { transform: rotate(-10deg) translate(-6px, -10px); }
  48%  { transform: rotate(4deg) translate(-4px, -8px); }
  60%  { transform: rotate(-5deg) translate(-3px, -6px); }
  72%  { transform: rotate(2deg) translate(-2px, -3px); }
  84%, 100% { transform: none; }
}

/* ---------- Texto al costado (mismo estilo que "Dos columnas") ---------- */
.velo { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.velo.izq { left: 0; width: calc(var(--ancho-texto) + 140px);
  background: linear-gradient(90deg, rgba(18,13,9,.94) 0, rgba(18,13,9,.9) calc(100% - 180px), rgba(18,13,9,0)); }
.velo.der { right: 0; width: calc(var(--ancho-texto) + 140px);
  background: linear-gradient(270deg, rgba(18,13,9,.94) 0, rgba(18,13,9,.9) calc(100% - 180px), rgba(18,13,9,0)); }
.velo.abajo { left: 0; right: 0; top: auto; height: 68%;
  background: linear-gradient(0deg, rgba(18,13,9,.95) 0, rgba(18,13,9,.9) 70%, rgba(18,13,9,0)); }

.texto, .rotulo-col {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--papel-claro); pointer-events: none;
  font-size: calc(var(--letra-texto) * var(--ajuste, 1)); line-height: 1.25;
  text-shadow: 0 1px 3px #000;
}
.texto.izq, .rotulo-izq { text-align: right; }
.texto.centro { text-align: center; padding: .6em .9em; background: rgba(18, 13, 9, .86); border-radius: 4px; }
.texto.abajo { top: auto; bottom: 5%; left: 50%; transform: translateX(-50%); width: min(86%, 1200px); text-align: center; }
.texto span, .rotulo-col span { display: block; }
.rc-lado { font-size: max(var(--piso), .55em); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.rc-titulo { font-weight: 700; font-size: 1.3em; margin: .1em 0 .25em; }
.c-t, .rotulo-izq .rc-titulo { color: var(--rojo-claro); }
.c-e, .rotulo-der .rc-titulo { color: var(--mostaza-claro); }
.rc-lista { font-style: italic; }
.rc-cierre { margin-top: 1em; font-weight: 700; white-space: pre-line; }
.rc-cita { margin-top: .6em; font-style: italic; font-size: .82em; }
.rc-fuente, .rc-ref { font-size: max(var(--piso), .6em); font-weight: 700; opacity: .85; margin-top: .3em; }
.rc-ref { margin-top: .9em; color: var(--mostaza-claro); }

/* cada renglón entra a saltos */
.texto .puesto { animation: entrar .3s steps(3, end) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  :root { --viaje: 0s linear; }
  .trazar { animation: none; stroke-dashoffset: 0; }
  .punta, .aparecer, .vista-columnas #columnas-dibujo.anima > * { animation: none; opacity: 1; }
  .texto .puesto { animation: none; }
}

/* ---------- Ayuda ---------- */
.ayuda { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0,0,0,.72); }
.ayuda-caja { width: min(760px, 92vw); max-height: 90vh; overflow: auto; padding: 22px 28px; background: var(--papel-claro); border: 4px solid var(--borravino); font-size: 20px; }
.ayuda-caja h2 { margin: 0 0 .5em; }
.ayuda-caja dl { display: grid; grid-template-columns: max-content 1fr; gap: .45em 1em; margin: 0 0 1em; }
.ayuda-caja dt { font-weight: 700; }
.ayuda-caja dd { margin: 0; }

/* ---------- Pantalla negra (el pie sigue visible) ---------- */
.cortina { position: fixed; inset: 0; z-index: 15; background: #000; }
.pie { position: relative; z-index: 16; }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: var(--papel-claro); text-align: center; border-top: 3px solid var(--borravino); }
.pie p { margin: 0; padding: 3px; font-weight: 700; font-size: 15px; letter-spacing: .04em; }

/* ---------- Pantallas angostas (por si se abre en un celular) ---------- */
@media (max-width: 760px) {
  .titulo { font-size: 18px; }
  .boton { font-size: 15px; padding: .1em .55em; }
  .boton kbd { display: none; }
  .texto, .texto.izq, .texto.der, .texto.centro, .texto.abajo {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; transform: none;
    padding: .6em 16px; text-align: left; border-radius: 0;
    background: linear-gradient(0deg, rgba(18,13,9,.96) 75%, rgba(18,13,9,0));
    font-size: 17px; max-height: 62%; overflow-y: auto; pointer-events: auto;
  }
  .rc-cita { font-size: max(var(--piso), .82em); }
  .rotulo-col { display: none !important; }
}