/* ---------- Texto de la página ---------- */
.story {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 3.5cqh, 26px) clamp(18px, 8cqi, 44px) clamp(14px, 5cqh, 36px);
  font-size: clamp(15px, min(5.6cqi, 7.4cqh), 26px);
  /* Red de seguridad: si algún dispositivo extremo no alcanza, se desplaza en vez de recortarse. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.story::-webkit-scrollbar { display: none; }

.story__head {
  margin-bottom: 0.7em;
}

.story__kicker {
  font-family: var(--font-display);
  font-size: 0.72em;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  text-transform: uppercase;
}

.story__title {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 1.32em;
  line-height: 1.15;
  color: #4a2f0b;
  margin-top: 0.15em;
  text-wrap: balance;
}

.story__title::after {
  content: '';
  display: block;
  width: 2.6em;
  height: 1px;
  margin-top: 0.45em;
  background: linear-gradient(90deg, var(--ink-line), transparent);
}

.story__text {
  font-family: var(--font-text);
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.story-text__p + .story-text__p {
  margin-top: 0.6em;
}

/* Dedicatoria final: carta con firma (un poco más compacta, es el texto más largo) */
.book[data-scene='epilogo'] .story {
  font-size: clamp(14px, min(5.2cqi, 6.4cqh), 24px);
}

.book[data-scene='epilogo'] .story__head {
  margin-bottom: 0.5em;
}

.book[data-scene='epilogo'] .story-text__p + .story-text__p {
  margin-top: 0.4em;
}

.book[data-scene='epilogo'] .story-text__p:last-child {
  text-align: right;
  margin-top: 0.6em;
}

.w {
  white-space: nowrap;
}

/* Tinta: recién escrita brilla dorada y se asienta en un dorado oscuro legible */
.ch {
  opacity: 0;
  color: var(--ink-fresh);
  text-shadow: 0 0 10px rgba(255, 196, 90, 0.9), 0 0 2px rgba(255, 220, 140, 0.9);
  transition:
    opacity 420ms var(--ease-out),
    color 1100ms var(--ease-soft) 160ms,
    text-shadow 1300ms var(--ease-soft) 160ms;
}

.ch.is-inked {
  opacity: 1;
  color: var(--ink);
  text-shadow: 0 0 0.6px rgba(160, 110, 30, 0.45);
}

.story__text.is-fading-in {
  animation: fade-in 600ms var(--ease-out) both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Ilustraciones ---------- */
.illus {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  min-height: 0;
}

.illus-svg {
  width: min(100%, 118cqh);
  max-height: 100%;
  overflow: visible;
}

.illus .draw {
  fill: none;
  stroke: var(--ink-line);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.illus .glow-fill {
  fill: rgba(240, 180, 67, 0.35);
  opacity: 0;
}

.illus.is-drawn .draw { stroke-dashoffset: 0; }
.illus.is-drawn .glow-fill { opacity: 1; }
.illus.is-drawn [data-reveal] { opacity: 1; }

/* Portadilla del prólogo */
.frontispiece {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  text-align: center;
  font-size: clamp(15px, min(7cqi, 12cqh), 34px);
  width: 100%;
}

.frontispiece__ornament {
  width: min(78%, 320px);
}

.frontispiece__rule {
  width: min(52%, 220px);
}

.frontispiece__subtitle {
  font-family: var(--font-title);
  font-style: italic;
  color: #4a2f0b;
  font-size: 1.15em;
  line-height: 1.1;
}

.frontispiece__dedication {
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  font-size: 0.78em;
  opacity: 0;
}