/* relatos.davidquintero.es — la habitación, la estantería y el libro */

:root {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gutter: clamp(14px, 4vw, 48px);
  --oro: #c9a45a;
  --cuero: #4a1d28;
  --tinta: #2d2016;
  --burdeos: #6b2a2f;
  --ruido: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .17  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; margin: 0; }
html, body { background: #0c0907; }
body {
  color: #e8dcc6;
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 3px; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- La habitación ---------- */
.sala {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 56px var(--gutter) 28px;
  animation: encender 2.2s ease-out both;
}
@keyframes encender { from { filter: brightness(.2); } to { filter: brightness(1); } }

.pared {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 78% 6%, rgba(255, 170, 90, .17), transparent 70%),
    radial-gradient(ellipse 30% 40% at 6% 70%, rgba(0, 0, 0, .55), transparent 70%),
    radial-gradient(ellipse 40% 24% at 30% 96%, rgba(40, 30, 14, .5), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 52px),
    linear-gradient(180deg, #19120e, #0b0807 82%);
}
.luz {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 42% at 76% 4%, rgba(255, 186, 110, .26), transparent 72%);
  mix-blend-mode: screen;
  animation: parpadeo 9s linear infinite;
}
@keyframes parpadeo {
  0%, 100% { opacity: .95; } 6% { opacity: .8; } 7% { opacity: 1; }
  38% { opacity: .9; } 39% { opacity: .55; } 40% { opacity: .95; }
  41% { opacity: .6; } 42% { opacity: .92; } 74% { opacity: .85; }
}
.telarana {
  position: absolute; top: 0; left: 0;
  width: clamp(80px, 14vw, 170px); height: auto;
  color: rgba(214, 200, 170, .3);
  pointer-events: none;
}
.vineta {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 66% at 50% 46%, transparent 34%, rgba(0, 0, 0, .86) 100%);
}
.volver {
  position: absolute; top: 14px; left: var(--gutter); z-index: 3;
  color: #a8957a; font-size: .85rem; text-decoration: none; letter-spacing: .04em;
}
.volver:hover { color: var(--oro); }
.sin-js { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #a8957a; }

.polvo { position: absolute; inset: 0; pointer-events: none; }
.polvo i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: rgba(255, 224, 176, .7);
  opacity: 0;
  animation: flota var(--d) ease-in-out var(--r) infinite;
}
@keyframes flota {
  0% { transform: translate(0, 0); opacity: 0; }
  30% { opacity: .65; }
  100% { transform: translate(28px, -46px); opacity: 0; }
}

/* ---------- El mueble ---------- */
.mueble {
  position: relative; z-index: 2;
  width: min(1100px, 100%);
  padding: 18px clamp(10px, 2vw, 22px) 22px;
  background: linear-gradient(90deg, #1d130c, #2b1c10 5%, #1a110b 50%, #2b1c10 95%, #120b07);
  border-radius: 6px 6px 3px 3px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 220, 160, .05);
}
.placa {
  width: max-content; margin: 0 auto 14px;
  padding: 3px 22px;
  font: 600 .8rem/1.6 var(--serif);
  letter-spacing: .5em; text-indent: .5em; text-transform: uppercase;
  color: #1a1009;
  background: linear-gradient(180deg, #d8b868, #a98640);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 6px rgba(0, 0, 0, .6);
}
.estanteria {
  --u: .9px;
  background: linear-gradient(180deg, #060403, #0d0806);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(0, 0, 0, .6);
  padding-top: 4px;
}
.balda { position: relative; }
.libros {
  display: flex; align-items: flex-end; justify-content: center;
  gap: calc(1.5 * var(--u));
  min-height: calc(226 * var(--u));
  padding: calc(12 * var(--u)) 12px 0;
}
.tabla {
  height: 15px;
  background: linear-gradient(180deg, #5a402b, #35231a 55%, #1a100a);
  box-shadow: 0 8px 14px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 220, 160, .12) inset;
}
.pista {
  margin-top: 14px; min-height: 1.6em;
  text-align: center; font: italic 1rem/1.5 var(--serif); color: #b69f7f;
}

/* ---------- Lomos ---------- */
.lomo {
  --c: #3b1f1f;
  position: relative; flex: none; display: block;
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  padding: 0; border: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 24%, rgba(0, 0, 0, .42)),
    var(--c);
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 1px 0 2px rgba(0, 0, 0, .5);
}
.lomo:not(.real) { filter: brightness(.7) saturate(.75); }
.lomo::before, .lomo::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px;
  background: rgba(220, 190, 120, .32);
}
.lomo::before { top: 9%; }
.lomo::after { bottom: 7%; }
.lomo.inclinado { transform: rotate(7deg); transform-origin: bottom left; margin-right: calc(18 * var(--u)); }
.lomo.etiqueta i {
  position: absolute; left: 18%; right: 18%; top: 28%; height: 13%;
  background: rgba(230, 215, 180, .55); border-radius: 1px;
}

.lomo.real {
  min-width: 34px; cursor: pointer;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 26%, rgba(0, 0, 0, .45)),
    var(--c);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, filter .35s;
  animation: late 3.6s ease-in-out infinite;
}
.lomo.real::before, .lomo.real::after { background: var(--oro); opacity: .85; height: 2px; }
.lomo.real span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 14% 0;
  writing-mode: vertical-rl;
  font: 600 clamp(11px, calc(15 * var(--u)), 17px)/1 var(--serif);
  letter-spacing: .08em; color: var(--oro);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.lomo.real:hover, .lomo.real:focus-visible {
  transform: translateY(-14px);
  filter: brightness(1.18);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 18px 22px rgba(0, 0, 0, .65), 0 0 22px rgba(255, 190, 100, .28);
  animation: none;
}
@keyframes late {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 rgba(255, 190, 100, 0); }
  50% { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 0 16px rgba(255, 190, 100, .22); }
}

/* ---------- El lector ---------- */
.lector {
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: rgba(6, 4, 3, .9);
  --pw: 400px; --ph: 533px;
}
.lector[hidden] { display: none; }
.escena { display: grid; place-items: center; perspective: 2600px; min-height: 0; }

.libro {
  position: relative;
  width: calc(var(--pw) * 2); height: var(--ph);
  transform-style: preserve-3d;
  touch-action: pan-y;
}
.una .libro { width: var(--pw); }

.tapas {
  position: absolute; inset: -1.6% -2.2%;
  background: var(--ruido), linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .3)), var(--cuero);
  border-radius: 5px 9px 9px 5px;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .6);
}

/* Páginas */
.pagina {
  position: absolute; top: 0; height: 100%;
  display: flex; flex-direction: column;
  padding: 9% 9% 12%;
  overflow: hidden;
  background: var(--ruido), linear-gradient(135deg, #f2e8cf, #e3d1a9);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: clamp(15px, calc(var(--pw) * .046), 25px);
  line-height: 1.5;
}
.libro > .pagina.izq { left: 0; width: 50%; }
.libro > .pagina.der { left: 50%; width: 50%; }
.una .libro > .pagina.izq { display: none; }
.una .libro > .pagina.der { left: 0; width: 100%; }
.cara > .pagina { inset: 0; width: auto; height: auto; }

.pagina::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.pagina.izq::after {
  background: linear-gradient(to left, rgba(70, 45, 15, .4), rgba(70, 45, 15, .12) 6%, transparent 17%);
}
.pagina.der::after {
  background: linear-gradient(to right, rgba(70, 45, 15, .4), rgba(70, 45, 15, .12) 6%, transparent 17%);
}
.pagina.der { border-radius: 0 3px 3px 0; box-shadow: inset -2px 0 0 rgba(120, 95, 55, .35); }
.pagina.izq { border-radius: 3px 0 0 3px; box-shadow: inset 2px 0 0 rgba(120, 95, 55, .35); }

.texto p { margin: 0 0 .85em; text-wrap: pretty; }
.pagina.inicio .texto p:first-child::first-letter {
  float: left; margin: .04em .1em 0 0;
  font-size: 3.1em; line-height: .82; font-weight: 700; color: var(--burdeos);
}
.num {
  position: absolute; left: 0; right: 0; bottom: 5%;
  text-align: center; font-size: .72em; color: #7b6a52;
}

.pagina.vacia { align-items: center; justify-content: center; }
.pagina .ornamento { font-size: 2.2em; color: rgba(107, 42, 47, .28); }

.portadilla { margin: auto 0; text-align: center; }
.portadilla h2 { font-size: 1.7em; line-height: 1.15; color: var(--burdeos); font-weight: 600; }
.portadilla .adorno { margin: .6em 0; font-size: 1.6em; color: rgba(107, 42, 47, .5); }
.portadilla .sub { font-style: italic; color: #5a4a36; }
.portadilla .autor { margin-top: 1.6em; font-size: .8em; letter-spacing: .12em; text-transform: uppercase; color: #7b6a52; }

/* Elecciones */
.opciones { margin-top: auto; display: grid; gap: .6em; }
.opcion {
  display: block; width: 100%; padding: .55em .85em;
  text-align: left; cursor: pointer;
  font: italic 1em/1.35 var(--serif); color: var(--burdeos);
  background: rgba(107, 42, 47, .06);
  border: 1.5px solid var(--burdeos); border-radius: 7px;
  transition: background .2s, transform .2s;
}
.opcion::before { content: "❧ "; opacity: .7; }
.opcion:hover { background: rgba(107, 42, 47, .16); transform: translateX(3px); }
.opcion.elegida { background: var(--burdeos); color: #f6ead0; }

.fin { margin-top: auto; text-align: center; }
.fin-txt { font: italic 1.1em var(--serif); color: var(--burdeos); }
.fin-txt::before { content: "❦"; display: block; font-size: 1.6em; margin-bottom: .2em; opacity: .55; }
.fin-acciones { margin-top: .9em; display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; }
.fin-acciones button {
  padding: .35em .85em; cursor: pointer;
  font: .8em var(--sans); color: var(--burdeos);
  background: transparent; border: 1.3px solid rgba(107, 42, 47, .6); border-radius: 999px;
}
.fin-acciones button:hover { background: rgba(107, 42, 47, .12); }

/* Portada */
.pagina.portada {
  align-items: center; justify-content: center; text-align: center;
  background:
    var(--ruido),
    radial-gradient(ellipse 90% 70% at 30% 20%, rgba(255, 255, 255, .1), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .32)),
    var(--cuero);
  color: var(--oro);
  border-radius: 3px 10px 10px 3px;
  box-shadow: inset 0 0 0 calc(var(--pw) * .03) rgba(0, 0, 0, .16), 0 20px 50px rgba(0, 0, 0, .6);
}
.pagina.portada::after { background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .15) 5%, transparent 10%); }
.portada .marco {
  position: absolute; inset: 7%;
  border: 2px solid var(--oro); border-radius: 4px; opacity: .85;
}
.portada .marco::after {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid var(--oro); border-radius: 2px; opacity: .6;
}
.portada h2 {
  font-size: 1.75em; line-height: 1.15; font-weight: 600; letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
}
.portada .adorno { margin: .7em 0; font-size: 1.5em; opacity: .8; }
.portada .sub { font-style: italic; font-size: .85em; opacity: .85; }

/* Hoja que gira */
.hoja {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  pointer-events: none; z-index: 5;
}
.una .hoja { left: 0; width: 100%; }
.cara {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.cara.dorso { transform: rotateY(180deg); }
.sombra {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 10, 0, .6), rgba(20, 10, 0, .08));
}
.cara.dorso .sombra { background: linear-gradient(270deg, rgba(20, 10, 0, .6), rgba(20, 10, 0, .08)); }

/* Barra inferior */
.barra {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
}
.btn {
  min-height: 46px; padding: 0 20px; cursor: pointer;
  font: .95rem var(--sans); color: #e6d7b8;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(201, 164, 90, .45); border-radius: 999px;
  transition: background .2s, opacity .2s;
}
.btn.redondo { width: 56px; padding: 0; font-size: 1.9rem; line-height: 1; padding-bottom: 4px; }
.btn:hover:not(:disabled) { background: rgba(201, 164, 90, .18); }
.btn:disabled { opacity: .28; cursor: default; }

@media (max-width: 779px) {
  .sala { padding-top: 48px; }
  .placa { letter-spacing: .35em; text-indent: .35em; }
}

@media (prefers-reduced-motion: reduce) {
  .sala, .luz, .polvo i, .lomo.real { animation: none; }
  .polvo { display: none; }
  .lomo.real { transition: none; }
}