html, body, .escena { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #fff; transition: background 700ms; }
body.despierta { background: #f6f4ef; }

.escena { position: relative; perspective: 1200px; isolation: isolate; }

.vida {
  position: absolute; inset: 0;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--lat, 1));
  transition: transform 300ms cubic-bezier(.2, 1.6, .3, 1);
  transform-style: preserve-3d;
}
.escena.sacudida .vida { animation: sacudir 140ms linear; }
@keyframes sacudir { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.hoja {
  position: absolute; inset: 0;
  transform: rotateY(var(--giro, 0deg));
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 650ms cubic-bezier(.2, .7, .2, 1), inset 700ms, box-shadow 700ms;
  background: #fff;
}
body.despierta .hoja {
  inset: 10px;
  box-shadow: 0 6px 24px rgb(30 25 15 / .14), 0 1px 3px rgb(30 25 15 / .1);
}
.escena.fin .hoja { transform: rotateY(-180deg); }
.escena.fin .vida { animation: respirar 7.5s ease-in-out infinite; }
@keyframes respirar {
  50% { transform: translateY(-1px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
}

.cara {
  position: absolute; inset: 0; box-sizing: border-box;
  overflow: auto; background: #fff;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.detras { transform: rotateY(180deg); }

/* tinta calada del otro lado */
.delante::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 900ms 200ms;
  background:
    radial-gradient(38% 5% at 30% 34%, rgb(60 55 45 / .09) 0 60%, transparent 70%),
    radial-gradient(24% 4% at 62% 52%, rgb(60 55 45 / .07) 0 60%, transparent 70%),
    radial-gradient(30% 4% at 44% 68%, rgb(60 55 45 / .08) 0 55%, transparent 70%);
}
body.despierta .delante::before { opacity: 1; }

.seleccion {
  position: absolute; top: 42%; left: 0; right: 0;
  text-align: center; color: #fff;
  font: 15px/1.6 system-ui, sans-serif;
}

/* ------- la mesa de trabajo ------- */
.detras {
  font: 15px/1.55 system-ui, sans-serif; color: #1c1a17;
  padding: clamp(12px, 4vmin, 40px);
}
.detras .cabecera { text-align: center; margin: 0 0 2vmin; }
.detras .cabecera h1 { font: 700 24px/1.3 system-ui, sans-serif; margin: 0 0 4px; }
.detras .cabecera p { margin: 0; color: #555; white-space: pre-line; }

.mesa {
  position: relative; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(10px, 2.5vmin, 26px);
  max-width: 1050px; margin: 0 auto;
  transition: gap 500ms;
}
.objeto {
  background: #fffef8; border: 1px solid #e4e0d2;
  box-shadow: 0 2px 6px rgb(30 25 15 / .08);
  padding: 14px 16px;
  transform: rotate(var(--rot, 0deg));
  transition: transform 500ms;
  font-size: 14px;
}
.objeto h2 { font: 600 13px/1.3 system-ui, sans-serif; margin: 0 0 8px; text-transform: lowercase; letter-spacing: .4px; color: #444; }
.objeto ul, .objeto ol, .objeto dl { margin: 0; padding: 0 0 0 2px; list-style: none; }
.objeto li { margin: 3px 0; }
.objeto p { margin: 4px 0; }
.objeto .apunte { color: #6b675f; font-style: italic; }
.objeto a, .objeto button { color: #1c1a17; font: inherit; }
.objeto button { background: none; border: 1px solid #bbb; padding: 5px 9px; cursor: pointer; }
.o1 { --rot: -1.4deg; } .o2 { --rot: .9deg; } .o3 { --rot: -.6deg; }
.o4 { --rot: 1.6deg; } .o5 { --rot: -1deg; } .o6 { --rot: .7deg; }

.contador .n { font: 700 44px/1.1 ui-monospace, monospace; display: block; }
.contador .sub { color: #777; font-size: 12px; }

.derecho-linea { text-align: center; margin-top: 2.5vmin; }
.derecho-linea a { color: #1c1a17; font-size: 14px; }

/* ------- ensayo de lanzamiento (konami invertido) ------- */
.escena.ensayo .objeto { --rot: 0deg; }
.escena.ensayo .mesa { gap: 12px; }
.sello {
  position: absolute; left: 50%; top: 38%; z-index: 6;
  transform: translate(-50%, -50%) rotate(-14deg) scale(3);
  opacity: 0; pointer-events: none;
  font: 900 54px/1 system-ui, sans-serif; letter-spacing: 6px;
  color: #8c1f1f; border: 5px solid #8c1f1f; padding: 6px 22px;
  transition: transform 350ms cubic-bezier(.3, 1.4, .4, 1), opacity 250ms;
}
.escena.ensayo .sello { opacity: .92; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
.correccion {
  position: absolute; left: 50%; top: 52%; z-index: 6;
  transform: translateX(-50%) rotate(-2deg);
  font: italic 17px ui-monospace, monospace; color: #6b675f;
  opacity: 0; transition: opacity 400ms 500ms;
  pointer-events: none;
}
.escena.ensayo .correccion { opacity: 1; }
.cerrar-local {
  position: absolute; left: 50%; top: 60%; z-index: 6;
  transform: translateX(-50%);
  display: none; font: 14px system-ui, sans-serif;
  background: #fff; border: 1px solid #bbb; padding: 7px 11px; cursor: pointer;
}
.escena.ensayo .cerrar-local { display: block; }
.escena.ensayo .vida { animation: none; }

/* ------- margen ------- */
.margen-visual {
  position: absolute; bottom: 18px; left: 20px; z-index: 5;
  margin: 0; padding: 0; list-style: none;
  font: italic 12px/1.45 ui-monospace, monospace; color: #6b675f;
  opacity: 0; transition: opacity 500ms;
  pointer-events: none;
}
.detras .margen-visual { left: auto; right: 20px; text-align: right; }
body.margen-visible .margen-visual { opacity: 1; }
.margen-visual li { position: relative; margin: 2px 0; }
.margen-visual li.tachada::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%;
  height: 1.5px; background: rgb(80 75 65 / .75);
  transform: rotate(-1.2deg) scaleX(1); transform-origin: left center;
}
.margen-visual li.tachada.nueva::after { animation: rayar 450ms ease-out; }
@keyframes rayar { from { transform: rotate(-1.2deg) scaleX(0); } }
.margen-visual li.final { margin-top: 6px; }

/* ------- pliegue ------- */
.pliegue {
  position: absolute; z-index: 3; top: 0; right: 0;
  width: 56px; height: 56px; margin: 0; padding: 0; border: 0;
  opacity: 0; pointer-events: none; cursor: grab;
  touch-action: none; background: transparent;
  transform: translate3d(var(--pliegue-x, 0px), 0, 0);
  transition: opacity 160ms linear, transform 160ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.pliegue::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: var(--esquina, 44px); height: var(--esquina, 44px);
  background: linear-gradient(135deg, #fafafa 0 47%, #aaa 48% 50%, #dedede 51% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  filter: drop-shadow(-2px 3px 2px rgb(0 0 0 / .18));
  transition: width 300ms, height 300ms;
}
.escena.pliegue-listo .pliegue { opacity: 1; pointer-events: auto; }
.escena.esquina-alta .pliegue { --esquina: 58px; }
.escena.arrastrando .hoja { transition: none; will-change: transform; }
.escena.arrastrando .pliegue { cursor: grabbing; transition: none; }
.escena.fin .pliegue { opacity: 1; pointer-events: auto; }
.escena.fin .alternativa-pliegue { opacity: 0; pointer-events: none; }

.alternativa-pliegue {
  position: absolute; z-index: 4; top: 64px; right: 12px;
  max-width: min(19rem, calc(100vw - 24px));
  padding: 8px 10px; border: 1px solid #bbb;
  background: #fff; color: #222;
  font: 14px/1.3 system-ui, sans-serif;
  opacity: 0; pointer-events: none; transition: opacity 160ms linear;
}
.escena.escape-visible .alternativa-pliegue { opacity: 1; pointer-events: auto; }

/* ------- móvil / entrada ------- */
.nota-tactil {
  position: absolute; left: 0; right: 0; bottom: 22%;
  text-align: center; color: #6b675f;
  font: 15px/1.5 system-ui, sans-serif;
  pointer-events: none; min-height: 1.5em;
}
.boton-giro {
  position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%);
  padding: 8px 12px; border: 1px solid #bbb; background: #fff; color: #222;
  font: 14px/1.3 system-ui, sans-serif; display: none;
}
.boton-giro.visible { display: block; }
.punto {
  position: absolute; right: 14px; bottom: 14px;
  width: 48px; height: 48px; border: 0; background: transparent;
  display: none; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.punto::after {
  content: ""; position: absolute; right: 8px; bottom: 8px;
  width: 3px; height: 3px; border-radius: 50%; background: #999;
}
.punto.visible { display: block; }
.toque {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: #444; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%);
}
.toque.activo { animation: toque 900ms ease-out; }
@keyframes toque { 10% { opacity: .5; } to { opacity: 0; } }

.acceso {
  position: absolute; left: -9999px; top: 12px; z-index: 7;
  padding: 8px 12px; border: 1px solid #444; background: #fff;
  font: 14px system-ui, sans-serif;
}
.acceso:focus-visible { left: 12px; outline: 3px solid #111; outline-offset: 3px; }
.pliegue:focus-visible, .alternativa-pliegue:focus-visible, .boton-giro:focus-visible,
.objeto button:focus-visible, .cerrar-local:focus-visible {
  outline: 3px solid #111; outline-offset: 3px;
}

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

.avance-llave {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font: 12px ui-monospace, monospace; color: #999;
  letter-spacing: 4px; display: none; pointer-events: none;
}
.avance-llave.visible { display: block; }

@media (prefers-reduced-motion: reduce) {
  .vida, .hoja, .pliegue, .alternativa-pliegue, .margen-visual, body,
  .objeto, .mesa, .sello, .correccion { transition: none; }
  .escena.fin .vida, .escena.sacudida .vida { animation: none; }
  .margen-visual li.tachada.nueva::after { animation: none; }
  .escena.pliegue-listo .alternativa-pliegue { opacity: 1; pointer-events: auto; }
}
@media (forced-colors: active) {
  .pliegue::before { background: CanvasText; filter: none; }
  .alternativa-pliegue, .boton-giro, .objeto, .cerrar-local { border-color: ButtonText; }
  .sello { color: CanvasText; border-color: CanvasText; }
}