/* Un año de viaje — pergamino sobre mesa a la luz de una vela.
   Diseño fijo (oscuro alrededor, papel claro) en modo claro y oscuro:
   color-scheme evita que Chrome invierta los colores por su cuenta. */
:root {
  color-scheme: dark;
  --night: #120c08;
  --night-2: #2b1d12;
  --parch: #ecdcb4;
  --parch-light: #f6ecd2;
  --parch-dark: #cdac76;
  --ink: #3e2815;
  --ink-soft: #6e4d2c;
  --wax: #8e1b1b;
  --gold: #e8c26a;
  --gold-soft: rgba(232, 194, 106, 0.35);
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --caps: 'Cinzel', Georgia, serif;
  --deco: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --hand: 'Dancing Script', 'Segoe Script', cursive;
  --ease-roll: cubic-bezier(0.65, 0, 0.35, 1);
  --paper:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .07 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 18% 72%, rgba(150, 100, 40, 0.16), transparent 22%),
    radial-gradient(circle at 82% 30%, rgba(150, 100, 40, 0.12), transparent 18%),
    radial-gradient(ellipse at 50% 45%, #f4e7c8 0%, var(--parch) 55%, var(--parch-dark) 100%);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: radial-gradient(ellipse 80% 70% at 50% 45%, var(--night-2) 0%, var(--night) 70%) fixed, var(--night);
  color: var(--parch);
  font-family: var(--serif);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.defs { position: absolute; }

/* --- Luciérnagas --- */
.motes {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.mote {
  position: absolute;
  bottom: -10px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #ffd98a;
  box-shadow: 0 0 6px 2px rgba(255, 200, 100, 0.55);
  opacity: 0;
  animation: mote var(--d) linear var(--delay) infinite;
}

@keyframes mote {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate(var(--dx), -55vh); opacity: 0.45; }
  85%  { opacity: 0.8; }
  100% { transform: translate(calc(var(--dx) * -0.5), -110vh); opacity: 0; }
}

/* --- Escenario y pergamino --- */
.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  /* abajo deja sitio a la pista y al contador */
  padding: 60px 16px 150px;
}

.scroll {
  --w: max(240px, min(calc(100vw - 52px), calc((100vh - 220px) * 2 / 3), 600px));
  position: relative;
  width: var(--w);
  aspect-ratio: 2 / 3;
}

@supports (height: 100dvh) {
  .scroll { --w: max(240px, min(calc(100vw - 52px), calc((100dvh - 220px) * 2 / 3), 600px)); }
}

/* sombra sobre la mesa: crece a la vez que se desenrolla */
.scroll::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65), 0 0 120px rgba(232, 170, 90, 0.12);
  transform: scaleY(0.05);
  transition: transform 1.5s var(--ease-roll);
}

.scroll.open::before { transform: none; }

.parchment {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  background-color: var(--parch);
  background-image: var(--paper);
  box-shadow: inset 0 0 60px rgba(110, 70, 25, 0.5), inset 0 0 10px rgba(80, 50, 20, 0.45);
  clip-path: inset(calc(50% - 18px) 0 calc(50% - 18px) 0);
  transition: clip-path 1.5s var(--ease-roll);
}

.scroll.open .parchment { clip-path: inset(0 0 0 0); }

.roll-shade {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 18px);
  height: 36px;
  background: linear-gradient(rgba(70, 40, 12, 0.55), rgba(255, 244, 220, 0.25) 45%, rgba(70, 40, 12, 0.6));
  transition: opacity 0.4s;
}

.scroll.open .roll-shade { opacity: 0; }

.rod {
  position: absolute;
  left: -10px;
  right: -10px;
  height: 24px;
  z-index: 3;
  border-radius: 12px;
  background: linear-gradient(#8a5a2e, #5a3518 45%, #2f1b0b);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: top 1.5s var(--ease-roll);
}

.rod::before,
.rod::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 14px;
  height: 32px;
  border-radius: 6px;
  background: linear-gradient(90deg, #6b4a1d, #d9b25c 45%, #6b4a1d);
}

.rod::before { left: -6px; }
.rod::after { right: -6px; }

.rod-top { top: calc(50% - 30px); }
.rod-bottom { top: calc(50% + 6px); }
.scroll.open .rod-top { top: -12px; }
.scroll.open .rod-bottom { top: calc(100% - 12px); }

/* --- Portada: "Para Vicky" + sello --- */
.intro-title,
.intro-sub,
.intro-hint {
  position: absolute;
  left: -12px;
  right: -12px;
  z-index: 4;
  margin: 0;
  text-align: center;
  pointer-events: none; /* invisibles tras abrir: no deben tapar las fotos */
  transition: opacity 0.6s;
}

.intro-title {
  top: 24%;
  font: 700 clamp(2.1rem, 10vw, 3.4rem)/1.1 var(--deco);
  color: var(--gold);
  text-shadow: 0 0 26px rgba(232, 170, 90, 0.35);
}

.intro-sub {
  top: calc(24% + clamp(2.6rem, 12vw, 4.2rem));
  font: italic 1.1rem var(--serif);
  letter-spacing: 0.04em;
  color: var(--parch);
  opacity: 0.75;
}

.intro-hint {
  top: calc(50% + 66px);
  font: italic 1.2rem var(--serif);
  color: var(--parch);
  animation: breathe 2.4s ease-in-out infinite;
}

.scroll.breaking .intro-title,
.scroll.breaking .intro-sub,
.scroll.breaking .intro-hint { opacity: 0; animation: none; }

@keyframes breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}

.seal {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5));
  animation: pulse 2.4s ease-in-out infinite;
}

.seal:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

.half {
  position: absolute;
  inset: 0;
  transition: transform 0.9s cubic-bezier(0.55, 0, 0.8, 0.4), opacity 0.9s;
}

.half svg,
.letter-stop svg { display: block; width: 100%; height: 100%; }

.half.l { clip-path: polygon(0 0, 53% 0, 46% 28%, 56% 50%, 47% 74%, 52% 100%, 0 100%); }
.half.r { clip-path: polygon(53% 0, 100% 0, 100% 100%, 52% 100%, 47% 74%, 56% 50%, 46% 28%); }

.scroll.breaking .seal { animation: none; pointer-events: none; }
.scroll.breaking .half.l { transform: translate(-36px, 70px) rotate(-40deg); opacity: 0; }
.scroll.breaking .half.r { transform: translate(36px, 80px) rotate(35deg); opacity: 0; }
.scroll.open .seal { visibility: hidden; }

.seal-letter { font: 700 36px var(--deco); fill: rgba(60, 6, 6, 0.75); }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* --- Dibujo del mapa (unidades del viewBox 600x900) --- */
#map {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#map .line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

#map .thin { stroke-width: 0.9; }
#map .fill { fill: var(--parch); }
#map .solid { fill: var(--ink); }
#map .water { fill: #ddd6b6; }
#map .rhumb { stroke: var(--ink); stroke-width: 0.6; opacity: 0.14; }
#map .river-out { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
#map .river-in { fill: none; stroke: #e2d9b8; stroke-width: 4.2; stroke-linecap: round; }
#map .heart { fill: var(--wax); fill-opacity: 0.85; stroke: var(--ink); stroke-width: 1.4; }

#map .title { font: 700 30px var(--deco); fill: var(--ink); text-anchor: middle; }
#map .subtitle { font: 500 12.5px var(--caps); letter-spacing: 2.5px; fill: var(--ink-soft); text-anchor: middle; }
#map .n { font: 700 13px var(--caps); fill: var(--ink); text-anchor: middle; }

#map .label {
  font: italic 500 19px var(--serif);
  fill: var(--ink-soft);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--parch);
  stroke-width: 4px;
  stroke-linejoin: round;
}

#map .label.small { font-size: 14.5px; letter-spacing: 0.5px; }
#map .label.mid { font-size: 17px; }
#map .label.end { text-anchor: end; }

#map .ink {
  opacity: 0;
  transition: opacity 1s ease calc(var(--i) * 140ms);
}

#map.drawn .ink { opacity: 1; }

#map .trail {
  fill: none;
  stroke: var(--wax);
  stroke-width: 3.4;
  stroke-dasharray: 9 8;
  stroke-linecap: round;
}

#map .walker { fill: var(--wax); opacity: 0; transition: opacity 0.4s; }
#map .walker.on { opacity: 1; }

/* Año II: el camino se sale del mapa */
#map .trail.next { stroke-dasharray: 3 9; opacity: 0.85; }
#map .next-label { opacity: 0; transition: opacity 1.2s 2s; }
#map.next-on .next-label { opacity: 1; }

/* Rosa de los vientos: gira al tocarla */
#map .rose-hit { cursor: pointer; }
#map .rose { transform-box: fill-box; transform-origin: center; }
#map .rose-hit.spun .rose { animation: rose-spin 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
#map .rose-msg { opacity: 0; transition: opacity 0.5s; }
#map .rose-hit.spun .rose-msg { opacity: 1; transition-delay: 1.1s; }

@keyframes rose-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(1080deg); }
}

/* --- Paradas: fotos sobre el camino --- */
/* la capa deja pasar los toques al dibujo (rosa); solo las paradas los capturan */
.stops { position: absolute; inset: 0; pointer-events: none; }
.stop { pointer-events: auto; }

.stop {
  position: absolute;
  width: 12.6%;
  aspect-ratio: 1;
  padding: 0.6cqw;
  border: none;
  border-radius: 50%;
  background: var(--parch-light);
  box-shadow:
    0 0 0 1.5px var(--ink),
    0 0 0 4px var(--parch-light),
    0 0 0 5.2px var(--ink-soft),
    0 6px 14px rgba(60, 35, 10, 0.4);
  cursor: pointer;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s 0.55s;
}

.stop.shown {
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s;
}

.stop.shown:hover,
.stop.shown:focus-visible { transform: translate(-50%, -50%) scale(1.08); }

.stop:focus-visible { outline: 2px solid var(--wax); outline-offset: 6px; }

.stop img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  filter: sepia(0.3) saturate(0.9);
  transition: filter 0.3s;
}

.stop:hover img,
.stop:focus-visible img { filter: none; }

.chip {
  position: absolute;
  left: 50%;
  top: calc(100% + 1.6cqw);
  transform: translateX(-50%);
  padding: 0.35em 0.6em 0.3em;
  border: 1px solid var(--ink-soft);
  border-radius: 3px;
  background: var(--parch-light);
  color: var(--ink);
  font: 500 clamp(9px, 2.1cqw, 12.5px)/1 var(--caps);
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
}

.letter-stop {
  width: 15.5%;
  padding: 0;
  background: none;
  box-shadow: none;
}

.letter-stop svg { filter: drop-shadow(0 4px 5px rgba(60, 20, 10, 0.45)); }
.letter-stop.ready svg { animation: pulse 2.2s ease-in-out infinite; }

.hint {
  position: absolute;
  left: -12px;
  right: -12px;
  top: calc(100% + 22px);
  margin: 0;
  text-align: center;
  font: italic 1.05rem/1.3 var(--serif);
  color: var(--parch);
  opacity: 0;
  transition: opacity 0.8s;
}

.hint.visible { opacity: 0.8; }

/* Invitación al poema: ocupa el sitio de la pista cuando se dibuja el año II */
.ember-btn {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 170, 80, 0.45);
  border-radius: 22px;
  background: rgba(40, 20, 8, 0.75);
  color: #ffcf8a;
  font: italic 1rem var(--serif);
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity 1s, visibility 0s 1s;
}

.ember-btn.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s;
  animation: ember-glow 2.6s ease-in-out infinite;
}

.ember-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@keyframes ember-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 120, 30, 0.25); }
  50%      { box-shadow: 0 0 22px rgba(255, 140, 40, 0.6); }
}

/* --- Contador y música --- */
.counter {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 18px;
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  background: rgba(28, 18, 10, 0.82);
  color: var(--parch);
  font: 1rem/1.4 var(--serif);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.8s, transform 0.8s;
}

.counter.visible { opacity: 1; transform: translate(-50%, 0); }
.counter b { font-family: var(--caps); font-weight: 700; color: var(--gold); }

.music {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 20;
  width: 46px;
  height: 46px;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  background: rgba(28, 18, 10, 0.8);
  color: var(--gold);
  font-size: 1.15rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}

.music.visible { opacity: 1; pointer-events: auto; }
.music:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --- Ventanas: recuerdo y carta --- */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 6, 3, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* mientras se desvanece no debe tragarse toques */
  transition: opacity 0.35s, visibility 0s 0.35s;
}

.viewer.open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s;
}

.sheet {
  position: relative;
  width: min(100%, 440px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 26px 22px 20px;
  border-radius: 4px;
  color-scheme: light;
  color: var(--ink);
  background-color: var(--parch);
  background-image: var(--paper);
  box-shadow: inset 0 0 40px rgba(110, 70, 25, 0.45), 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.viewer.open .sheet { transform: none; }

.close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.2rem;
  cursor: pointer;
}

.close:hover { background: rgba(110, 77, 44, 0.12); }

.close:focus-visible,
.card-nav button:focus-visible { outline: 2px solid var(--wax); outline-offset: 2px; }

.card { text-align: center; }

.polaroid {
  width: min(100%, 290px);
  margin: 8px auto 18px;
  padding: 10px 10px 30px;
  background: #f8f2e4;
  box-shadow: 0 8px 20px rgba(60, 35, 10, 0.35);
  transform: rotate(var(--tilt, -2deg));
}

.polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #d8cfb8;
}

.polaroid img.full {
  aspect-ratio: auto;
  max-height: 52vh;
  object-fit: contain;
}

.card-date {
  margin: 0;
  font: 500 0.78rem var(--caps);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wax);
}

.card-title { margin: 6px 0 8px; font: 700 1.45rem/1.2 var(--caps); }
.card-text { margin: 0; font: 1.18rem/1.5 var(--serif); }

.card-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
}

.card-nav button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(110, 77, 44, 0.5);
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  font: 500 0.82rem var(--caps);
  letter-spacing: 0.05em;
  cursor: pointer;
}

.card-nav button:hover { background: rgba(110, 77, 44, 0.1); }
.card-nav span { font: 0.85rem var(--caps); color: var(--ink-soft); }

.letter {
  width: min(100%, 580px);
  min-height: min(86vh, 760px);
  padding: 40px 28px 28px;
}

.letter-quote {
  margin: 0;
  text-align: center;
  font: italic 500 1.25rem var(--serif);
  color: var(--ink-soft);
}

.letter-quote-es {
  margin: 4px 0 24px;
  text-align: center;
  font: 500 0.72rem/1.5 var(--caps);
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.letter-quote-es::after {
  content: '❦';
  display: block;
  margin-top: 10px;
  font-size: 1.1rem;
  color: var(--wax);
}

.letter-text {
  font: 1.2rem/1.6 var(--serif);
  white-space: pre-line;
}

.letter-text.typing::after {
  content: '|';
  margin-left: 1px;
  color: var(--ink-soft);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.signature {
  margin: 18px 0 0;
  text-align: right;
  font: 600 2.1rem var(--hand);
  color: var(--wax);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.3s, clip-path 2s steps(26);
}

.signature.visible { opacity: 1; clip-path: inset(0 0 0 0); }

.letter-stats {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(110, 77, 44, 0.35);
  text-align: center;
  font: 500 0.82rem/1.7 var(--caps);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 1s 0.4s;
}

.letter-stats.visible { opacity: 1; }
.letter-stats b { font-size: 1.05rem; color: var(--wax); }

/* --- Poema: tinta invisible que aparece con la llama --- */
.poem {
  width: min(100%, 480px);
  padding-top: 46px; /* deja libre la ✕ */
  text-align: center;
}

.poem-intro {
  margin: 4px 0 6px;
  font: italic 0.98rem/1.45 var(--serif);
  color: var(--ink-soft);
}

.poem-title {
  margin: 0 0 18px;
  font: 700 1.5rem var(--deco);
  color: var(--wax);
}

.poem-text p { margin: 0 0 1.1em; }

.verse {
  display: block;
  font: italic 1.2rem/1.55 var(--serif);
  color: var(--ink);
  opacity: 0.05; /* casi invisible: se intuye que hay algo escrito */
}

.poem-text.lit .verse { animation: burn 2.4s ease-out var(--d) forwards; }

@keyframes burn {
  0%   { opacity: 0.05; color: var(--ink); text-shadow: none; }
  35%  { opacity: 1; color: #ffb347; text-shadow: 0 0 6px #ffcf70, 0 0 16px #ff7a1a, 0 0 28px rgba(255, 90, 0, 0.6); }
  100% { opacity: 1; color: #7a2e0e; text-shadow: 0 0 2px rgba(255, 140, 40, 0.35); }
}

.flame-btn {
  min-height: 46px;
  max-height: 60px;
  margin: 0 0 18px;
  padding: 0 20px;
  overflow: hidden;
  border: 1px solid rgba(142, 27, 27, 0.5);
  border-radius: 23px;
  background: rgba(142, 27, 27, 0.08);
  color: var(--wax);
  font: 600 0.9rem var(--caps);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 0.5s, max-height 0.8s 0.3s, min-height 0.8s 0.3s, margin 0.8s 0.3s, border-width 0.8s 0.3s;
}

.flame-btn:hover { background: rgba(142, 27, 27, 0.15); }
.flame-btn:focus-visible { outline: 2px solid var(--wax); outline-offset: 2px; }

/* tras usarla, la llama se recoge y el poema sube */
.flame-btn.used {
  opacity: 0;
  min-height: 0;
  max-height: 0;
  margin: 0;
  border-width: 0;
  pointer-events: none;
}

.credits {
  margin: 14px 0 0;
  text-align: center;
  font: italic 0.72rem/1.4 var(--serif);
  color: var(--ink-soft);
  opacity: 0.7;
}

@media (max-width: 480px) {
  .letter { padding: 36px 20px 22px; }
  .letter-text { font-size: 1.1rem; }
  .signature { font-size: 1.8rem; }
  .counter { font-size: 0.92rem; padding: 7px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  /* sin animación, el poema se revela de golpe */
  .poem-text.lit .verse { opacity: 1; color: #7a2e0e; }
}