/* ============ CAPÍTULO III — álbum de recortes rojo ============
   Mismos tokens de base que el resto del libro (--paper, --ink, Quicksand/Caveat,
   la sombra dura 4px-offset de los botones de capítulo 2), con el acento
   principal movido de --burgundy a un rojo más vivo. El lenguaje visual es
   físico: papel de estraza, cinta washi, polaroids pegados a mano, esquinas
   que se despegan. El elemento firma es el .polaroid — cada foto es un
   objeto real pegado a la página, no una imagen suelta. */

:root{
  --paper:#f3e9d2;
  --paper-dark:#e9dcbd;
  --ink:#2b211c;
  --ink-soft:#5a4c3f;

  --red:#c2242c;
  --red-deep:#7a151c;
  --red-bright:#e13b3b;
  --rose:#e75480;
  --gold:#d6a419;
  --teal:#1f6f78;

  --photo-white:#fffdf7;
  --shadow: rgba(43,33,28,.28);
  --shadow-soft: rgba(43,33,28,.16);

  /* ---- atmósfera cálida (mismo espíritu que portada, llevada a rojo) ---- */
  --amber-hi:#f7e6bd;
  --amber:#eecd92;
  --amber-deep:#c96a42;

  --font-heading:'Bungee', cursive;
  --font-body:'Quicksand', sans-serif;
  --font-letter:'Caveat', cursive;
  --font-mono:'Space Mono', monospace;
  --font-pixel:'Press Start 2P', monospace;
}

/* si "Invertir colores inteligente" (Accesibilidad de iOS) está activado, Safari
   invierte el tono conservando el matiz: el crema/rojo de la paleta se ve
   café oscuro/rosa pastel en vez de los colores reales. Se re-invierte toda la
   página para que se vea igual sin importar ese ajuste del sistema. */
@media (inverted-colors: inverted){
  html{ filter:invert(1) hue-rotate(180deg); }
}

*{ box-sizing:border-box; }

/* fondo de papel de estraza: veta cruzada visible + viñeta roja en las
   esquinas + manchas de tinta grandes, para que se lea como un fondo físico
   y no como un color plano detrás del contenido */
body{
  margin:0;
  background-color:var(--amber-deep);
  background-image:
    radial-gradient(circle at 12% 6%, #fff8e6aa, transparent 38%),
    radial-gradient(ellipse 60% 40% at 88% 4%, #c2242c2e, transparent 60%),
    radial-gradient(ellipse 70% 50% at 6% 96%, #7a151c2e, transparent 62%),
    radial-gradient(ellipse 80% 60% at 100% 100%, #00000022, transparent 55%),
    repeating-linear-gradient(45deg, transparent 0 5px, #6b4f2614 5px 6px),
    repeating-linear-gradient(-45deg, transparent 0 9px, #ffffff12 9px 10px),
    repeating-linear-gradient(0deg, transparent 0 2px, #00000012 2px 3px),
    linear-gradient(165deg, var(--amber-hi) 0%, var(--amber) 45%, var(--amber-deep) 100%);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.55;
  overflow-x:hidden;
  cursor: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22><text y=%2218%22 font-size=%2218%22>%E2%9D%A4%EF%B8%8F</text></svg>") 12 12, auto;
}

/* ============ ATMÓSFERA: viñeta cálida + luz que respira + luciérnagas (mismo espíritu que portada, en rojo) ============ */
#ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 130% 110% at 50% 45%,
      transparent 52%, rgba(122,21,28,.16) 78%, rgba(122,21,28,.28) 100%),
    repeating-linear-gradient(0deg, transparent 0 2px, #4a0a0810 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 2px, #4a0a080a 2px 3px);
}

#candle-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 72% 54% at 50% 22%,
      rgba(230,180,90,.5), rgba(230,160,80,.2) 46%, transparent 70%),
    radial-gradient(ellipse 42% 32% at 10% 88%, rgba(225,59,59,.2), transparent 70%),
    radial-gradient(ellipse 42% 32% at 90% 84%, rgba(225,59,59,.18), transparent 70%);
  animation:candle-breathe 5.5s ease-in-out infinite;
}
@keyframes candle-breathe{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

#fireflies{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.firefly{
  position:absolute; width:var(--s,4px); height:var(--s,4px); border-radius:50%;
  background:radial-gradient(circle, #fff6d8 0%, var(--gold) 45%, transparent 75%);
  box-shadow:0 0 8px 2px rgba(214,164,25,.55);
  animation:
    ff-drift var(--dur,16s) ease-in-out infinite alternate,
    ff-blink var(--blink,3.4s) ease-in-out infinite;
  animation-delay:var(--d1,0s), var(--d2,0s);
}
@keyframes ff-drift{
  from{ transform:translate(0,0); }
  to  { transform:translate(var(--dx,40px), var(--dy,-60px)); }
}
@keyframes ff-blink{
  0%,100%{ opacity:.12; }
  12%{ opacity:1; } 30%{ opacity:.65; } 55%{ opacity:.95; } 80%{ opacity:.25; }
}

img{ max-width:100%; display:block; }

a{ color:var(--red-deep); }

button{ font:inherit; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

:focus-visible{ outline:3px dashed var(--teal); outline-offset:3px; }

/* ============ estructura general de "páginas" ============ */
.page{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding:64px 24px 72px;
}

/* borde rasgado entre secciones — zigzag de papel */
.torn{
  position:relative;
  height:34px;
  width:100%;
  background:var(--paper-dark);
  clip-path:polygon(
    0% 100%, 3% 20%, 6% 90%, 9% 10%, 12% 80%, 15% 15%, 18% 95%, 21% 25%,
    24% 85%, 27% 5%, 30% 75%, 33% 20%, 36% 90%, 39% 10%, 42% 80%, 45% 30%,
    48% 95%, 51% 15%, 54% 85%, 57% 5%, 60% 75%, 63% 25%, 66% 90%, 69% 10%,
    72% 80%, 75% 20%, 78% 95%, 81% 10%, 84% 85%, 87% 15%, 90% 90%, 93% 20%,
    96% 80%, 100% 30%, 100% 100%
  );
}
.torn.torn-flip{ transform:scaleY(-1); }

/* ============ botón firma del libro: sombra dura, no píldora ============ */
.retro-btn{
  display:inline-block;
  font-family:var(--font-heading);
  font-size:.8rem;
  letter-spacing:.02em;
  color:var(--photo-white);
  background:var(--red);
  padding:13px 26px;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.retro-btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.retro-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

/* ============ HERO ============ */
.hero{
  position:relative;
  padding-top:56px;
  text-align:center;
  overflow:hidden;
}

/* ---- decoración flotante: estrellitas/corazones + notitas sueltas, como en capítulo 2 ---- */
.floating-deco{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero-deco{
  position:absolute; font-size:1.8rem; color:var(--gold); opacity:.8;
  animation:float 6s ease-in-out infinite;
}
.hero-deco.hd1{ top:10%; left:8%; color:var(--red); --r:-6deg; }
.hero-deco.hd2{ top:18%; right:10%; color:var(--red-deep); font-size:2.2rem; --r:8deg; animation-delay:.8s; }
.hero-deco.hd3{ bottom:30%; left:5%; --r:4deg; animation-delay:1.6s; }
.hero-deco.hd4{ top:55%; right:6%; color:var(--teal); font-size:1.5rem; --r:-8deg; animation-delay:2.4s; }
.hero-deco.hd5{ bottom:16%; right:20%; font-size:1.6rem; --r:6deg; animation-delay:1.2s; }
.hero-deco.hd6{ top:6%; right:32%; font-size:1.4rem; --r:-4deg; animation-delay:2s; }
.hero-deco.hd7{ bottom:10%; left:22%; color:var(--rose); font-size:1.6rem; --r:5deg; animation-delay:.4s; }

.hero-phrase{
  position:absolute; font-family:var(--font-letter); font-weight:600;
  opacity:.5; white-space:nowrap; animation:float 8s ease-in-out infinite;
}
.hero-phrase.hp1{ top:30%; left:4%; font-size:1.1rem; color:var(--red-deep); --r:-6deg; animation-delay:.6s; }
.hero-phrase.hp2{ top:14%; right:5%; font-size:.95rem; color:var(--teal); --r:4deg; animation-delay:1.4s; }
.hero-phrase.hp3{ bottom:22%; left:7%; font-size:1.2rem; color:var(--gold); --r:-3deg; animation-delay:2.2s; }
.hero-phrase.hp4{ bottom:34%; right:8%; font-size:1rem; color:var(--red-deep); --r:5deg; animation-delay:.2s; }

.hero-enter{ display:inline-block; margin-top:30px; }

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-heading);
  font-size:.62rem;
  letter-spacing:.14em;
  color:var(--photo-white);
  background:var(--red);
  padding:8px 14px;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-2deg);
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.hero-eyebrow:hover{ transform:rotate(-2deg) translateY(-2px); box-shadow:4px 4px 0 var(--ink); }
.hero-eyebrow:active{ transform:rotate(-2deg) translateY(1px); box-shadow:1px 1px 0 var(--ink); }

.hero-title{
  font-family:var(--font-letter);
  font-weight:700;
  font-size:clamp(3.4rem, 15vw, 6.4rem);
  line-height:.92;
  color:var(--red-deep);
  margin:22px 0 6px;
  text-shadow:3px 3px 0 var(--gold);
}

.hero-sub{
  font-family:var(--font-letter);
  font-size:1.5rem;
  color:var(--ink-soft);
  margin:0 0 28px;
}

.hero-secret-msg{
  position:relative;
  z-index:2;
  font-family:var(--font-letter);
  font-size:1.3rem;
  color:var(--teal);
  max-width:360px;
  margin:24px auto 26px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .5s ease, opacity .5s ease, margin .5s ease;
}
.hero-secret-msg.revealed{ max-height:80px; opacity:1; }

.hero-date{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.05em;
  color:var(--red-deep);
  border:1.5px dashed var(--red);
  border-radius:999px;
  padding:6px 16px;
  background:#fffaf0;
}

.hero-stage{
  position:relative;
  margin:36px auto 0;
  width:min(320px, 78vw);
}

.hero-photo-frame{
  position:relative;
  transform:rotate(-4deg);
}

.hero-cinnamo{
  position:absolute;
  width:76px;
  bottom:-18px;
  right:-30px;
  transform:rotate(8deg);
  filter:drop-shadow(2px 4px 3px var(--shadow-soft));
  animation:sway 3.4s ease-in-out infinite;
}
@keyframes sway{
  0%,100%{ transform:rotate(8deg) translateY(0); }
  50%{ transform:rotate(2deg) translateY(-5px); }
}

/* ---- secreto: la esquina de la foto del héroe se despega ---- */
.peel-tab{
  position:absolute;
  top:-6px; left:-6px;
  width:34px; height:34px;
  background:linear-gradient(135deg, var(--photo-white) 50%, #d8cba9 52%);
  clip-path:polygon(0 0, 100% 0, 0 100%);
  box-shadow:1px 1px 3px var(--shadow-soft);
  cursor:pointer;
  z-index:4;
  transition:transform .3s ease;
  border:0;
  padding:0;
}
.peel-tab:hover{ transform:scale(1.15) rotate(-6deg); }
.peel-note{
  position:absolute;
  inset:-10px auto auto -10px;
  width:190px;
  background:var(--photo-white);
  border:1px solid #0002;
  box-shadow:2px 3px 8px var(--shadow-soft);
  padding:12px 14px;
  font-family:var(--font-letter);
  font-size:1.05rem;
  color:var(--ink-soft);
  transform:rotate(-8deg) scale(.85);
  transform-origin:top left;
  opacity:0;
  pointer-events:none;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  z-index:1;
}
.hero-photo-frame.peeled .peel-note{
  opacity:1;
  transform:rotate(-8deg) scale(1) translate(-14px,-34px);
}
.hero-photo-frame.peeled .peel-tab{ transform:rotate(-25deg) scale(1.05); }

.stickers{
  position:relative;
  height:0;
}
.sticker{
  position:absolute;
  width:46px; height:46px;
  filter:drop-shadow(1px 2px 1px var(--shadow-soft));
  opacity:.9;
  animation:float 6s ease-in-out infinite;
}
.sticker.tappable{ cursor:pointer; pointer-events:auto; background:none; border:0; padding:0; }
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); }
  50%{ transform:translateY(-8px) rotate(calc(var(--r,0deg) + 3deg)); }
}

/* ============ WASHI TAPE (reutilizable) ============ */
.tape{
  position:absolute;
  width:64px; height:24px;
  background:repeating-linear-gradient(45deg, #c2242c55 0 8px, #f3e9d2cc 8px 16px);
  border:1px solid #0002;
  box-shadow:0 2px 4px var(--shadow-soft);
  opacity:.94;
  z-index:3;
}
.tape.gold{
  background:repeating-linear-gradient(45deg, #d6a41966 0 8px, #f3e9d2cc 8px 16px);
}
.tape.rose{
  background:repeating-linear-gradient(45deg, #e7548055 0 8px, #f3e9d2cc 8px 16px);
}
.tape.teal{
  background:repeating-linear-gradient(45deg, #1f6f7855 0 8px, #f3e9d2cc 8px 16px);
}

/* ============ CARTA REAL: sobre que se abre (como en capítulo 2) ============ */
.letter-wrap{ max-width:620px; margin:0 auto; position:relative; perspective:1100px; }

.envelope{
  position:absolute; top:0; left:0; width:100%; height:220px; cursor:pointer; perspective:900px;
  background:linear-gradient(160deg,#fff3d6,#e9d4a3);
  border:2px solid var(--ink); box-shadow:6px 6px 0 var(--shadow);
  overflow:hidden; z-index:5; transform-origin:center;
  transition:transform .55s cubic-bezier(.5,-.2,.9,.4), opacity .5s ease .05s;
}
.envelope::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(135deg, transparent 49.4%, rgba(43,33,28,.1) 50%, transparent 50.6%),
    linear-gradient(45deg, transparent 49.4%, rgba(43,33,28,.1) 50%, transparent 50.6%);
}
.envelope-letter-peek{
  position:absolute; left:9%; right:9%; bottom:10px; height:72%;
  background:#fffdf6; border:2px solid var(--ink); border-radius:2px 2px 0 0;
  display:flex; align-items:flex-start; justify-content:center; padding-top:16px;
  transform:translateY(88%); z-index:2;
  transition:transform .6s cubic-bezier(.34,1.3,.4,1) .12s;
}
.envelope-letter-peek-text{ font-family:var(--font-letter); font-size:1.15rem; color:var(--red-deep); opacity:.8; }
.envelope-flap{
  position:absolute; top:0; left:0; width:100%; height:64%;
  background:linear-gradient(160deg,#f3e0ab,#e2c988);
  clip-path:polygon(0 0, 100% 0, 50% 90%);
  border-bottom:2px solid var(--ink);
  transform-origin:top center; transition:transform .7s cubic-bezier(.6,.05,.4,1);
  z-index:3;
}
.envelope-seal{
  position:absolute; top:36%; left:50%; z-index:4;
  transform:translate(-50%,-50%) rotate(-6deg); font-size:2.3rem;
  filter:drop-shadow(2px 3px 0 rgba(43,33,28,.3));
  transition:opacity .35s ease, transform .35s ease;
}
.envelope-hint{
  position:absolute; left:0; right:0; bottom:-28px; z-index:2; margin:0;
  text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--teal);
  animation:envelope-bounce 1.6s ease-in-out infinite;
}
@keyframes envelope-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

.envelope.opening .envelope-flap{ transform:rotateX(-180deg); }
.envelope.opening .envelope-seal{ opacity:0; transform:translate(-50%,-85%) rotate(12deg) scale(.6); }
.envelope.opening .envelope-letter-peek{ transform:translateY(-22%); }
.envelope.tossed{ transform:translate(-135%, 55px) rotate(-38deg); opacity:0; }
.envelope.opened{ visibility:hidden; pointer-events:none; }

.letter{
  max-width:620px; margin:0 auto; background:#fffdf6; border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--shadow); padding:38px 32px; position:relative; overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.98) rotateX(-10deg); transform-origin:top center; pointer-events:none;
  max-height:220px;
  transition:opacity .5s ease .05s, transform .6s cubic-bezier(.34,1.2,.4,1) .05s, max-height .6s cubic-bezier(.34,1.2,.4,1) .05s;
}
.letter.is-open{ opacity:1; transform:translateY(0) scale(1) rotateX(0deg); pointer-events:auto; max-height:3600px; }

.letter-fold{
  position:absolute; left:4%; right:4%; height:10px; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(43,33,28,.16), rgba(43,33,28,.04) 60%, transparent);
  opacity:1; transition:opacity 1s ease .6s;
}
.letter.is-open .letter-fold{ opacity:0; }
.letter-stamp{ position:absolute; top:-22px; right:26px; font-size:2.4rem; transform:rotate(12deg); z-index:2; }
.letter-ribbon{
  position:absolute; top:-2px; left:36px; background:var(--red); color:#fff;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.04em;
  padding:6px 12px 10px; clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  box-shadow:2px 2px 0 var(--shadow); z-index:2;
}
.letter-to{ font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--teal); margin:0 0 18px; position:relative; z-index:1; }
.letter-body{ font-family:var(--font-letter); font-size:1.5rem; line-height:1.5; color:var(--ink); position:relative; z-index:1; }
.letter-para{
  display:block; margin:0 0 1em; opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.letter-para:last-child{ margin-bottom:0; }
.letter-para.visible{ opacity:1; transform:translateY(0); }
.letter-sign{ text-align:right; font-family:var(--font-letter); font-size:1.6rem; color:var(--red-deep); margin-top:10px; position:relative; z-index:1; }
.sign-text{ position:relative; display:inline-block; }
.sign-text::after{
  content:''; position:absolute; left:0; bottom:-5px; width:0; height:2px;
  background:var(--red-deep); transition:width 1.1s ease .9s;
}
.letter.is-open .sign-text::after{ width:100%; }

.letter-stain{ position:absolute; z-index:0; pointer-events:none; }
.letter-stain.ring{
  border-radius:50%;
  background:radial-gradient(circle, transparent 53%, rgba(107,79,38,.24) 57%, rgba(107,79,38,.13) 64%, transparent 68%);
}
.letter-stain.blob{
  border-radius:44% 56% 62% 38% / 50% 44% 56% 50%;
  background:radial-gradient(circle at 38% 36%, rgba(107,79,38,.13), transparent 70%);
}
.letter-stain.drop{
  width:24px; height:30px; border-radius:50% 50% 50% 4px; transform:rotate(-30deg);
  background:radial-gradient(circle at 35% 30%, rgba(90,110,120,.24), rgba(90,110,120,.09) 60%, transparent 76%);
}
.letter-stain.drop-sm{ width:15px; height:19px; }

.margin-note{
  font-family:var(--font-letter);
  font-size:1.15rem;
  color:var(--ink-soft);
  max-width:280px;
  margin:18px auto 0;
  text-align:center;
  opacity:.85;
}
.margin-note-l{ transform:rotate(-2deg); }
.margin-note-r{ transform:rotate(2deg); }

@media (max-width:600px){
  .letter{ padding:30px 22px; }
  .letter-body{ font-size:1.3rem; }
}

/* ============ NOTAS SUELTAS (cartas cortas, apiladas como un diario) ============ */
.letters{
  display:flex;
  flex-direction:column;
  gap:34px;
}

.letter-note{
  position:relative;
  background:var(--photo-white);
  border:1px solid #0001;
  padding:32px 26px 26px;
  margin:0 auto;
  max-width:480px;
  width:100%;
  box-shadow:5px 6px 0 var(--shadow-soft);
}
.letter-note:nth-child(1){ transform:rotate(-1.2deg); }
.letter-note:nth-child(2){ transform:rotate(.9deg); margin-left:auto; margin-right:6%; }

.letter-note .tape{ top:-12px; left:calc(50% - 32px); transform:rotate(-5deg); }
.letter-note:nth-child(2) .tape{ left:auto; right:14%; transform:rotate(6deg); }

.letter-kicker{
  display:block;
  font-family:var(--font-heading);
  font-size:.55rem;
  letter-spacing:.16em;
  color:var(--gold);
  margin-bottom:10px;
}

.letter-note p{
  font-family:var(--font-letter);
  font-size:1.22rem;
  line-height:1.5;
  color:var(--ink);
  margin:0 0 14px;
}

.letter-note .letter-sign{
  text-align:right;
  font-family:var(--font-letter);
  font-size:1.4rem;
  color:var(--red);
  margin-top:4px;
}

.note-clip{
  position:absolute; top:-15px; width:32px; height:32px; color:var(--ink-soft);
  --clip-r:-9deg; transform:rotate(var(--clip-r));
  filter:drop-shadow(1px 2px 0 rgba(43,33,28,.2));
}
.letter-note:nth-child(1) .note-clip{ left:16%; }
.letter-note:nth-child(2) .note-clip{ right:14%; --clip-r:11deg; }
.letter-note:hover .note-clip,
.note-clip.wobble{ animation:clip-wobble .5s ease; }
@keyframes clip-wobble{
  0%,100%{ transform:rotate(var(--clip-r)); }
  20%{ transform:rotate(calc(var(--clip-r) + 14deg)); }
  40%{ transform:rotate(calc(var(--clip-r) - 16deg)); }
  60%{ transform:rotate(calc(var(--clip-r) + 9deg)); }
  80%{ transform:rotate(calc(var(--clip-r) - 6deg)); }
}

/* ============ SECCIÓN título de página ============ */
.section-title{
  text-align:center;
  font-family:var(--font-letter);
  font-weight:700;
  font-size:2.4rem;
  color:var(--red-deep);
  margin:0 0 6px;
}
.section-kicker{
  display:block;
  text-align:center;
  font-family:var(--font-heading);
  font-size:.6rem;
  letter-spacing:.18em;
  color:var(--gold);
  margin-bottom:10px;
}
.section-note{
  text-align:center;
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--ink-soft);
  max-width:440px;
  margin:0 auto 40px;
}

/* ============ GALERÍA / POLAROIDS ============ */
.gallery{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:38px 22px;
  padding-top:8px;
}

.polaroid{
  position:relative;
  background:var(--photo-white);
  padding:10px 10px 40px;
  box-shadow:0 8px 18px var(--shadow-soft), 0 2px 0 #0001;
  opacity:0;
  transform:translateY(18px) rotate(var(--rot, -3deg));
  transition:opacity .6s ease, transform .6s ease;
}
.polaroid.in-view{
  opacity:1;
  transform:translateY(0) rotate(var(--rot, -3deg));
}
.polaroid:nth-child(6n+1){ --rot:-5deg; }
.polaroid:nth-child(6n+2){ --rot:3deg; }
.polaroid:nth-child(6n+3){ --rot:-2deg; }
.polaroid:nth-child(6n+4){ --rot:6deg; }
.polaroid:nth-child(6n+5){ --rot:-4deg; }
.polaroid:nth-child(6n+6){ --rot:2deg; }

.polaroid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:var(--paper-dark);
}

.polaroid figcaption{
  position:absolute;
  bottom:8px; left:0; right:0;
  text-align:center;
  font-family:var(--font-letter);
  font-size:1.15rem;
  color:var(--ink-soft);
  padding:0 10px;
}

.polaroid .tape{ top:-12px; left:50%; margin-left:-32px; transform:rotate(-6deg); }
.polaroid:nth-child(3n) .tape{ transform:rotate(5deg); }
.polaroid:nth-child(4n) .tape{ left:12%; margin-left:0; transform:rotate(-8deg); }
.polaroid:nth-child(5n) .tape{ left:auto; right:12%; margin-left:0; transform:rotate(7deg); }

.polaroid.wide{ grid-column:span 2; }
.polaroid.wide img{ aspect-ratio:16/10; }

/* ---- secreto: una polaroid concreta guarda una nota detrás ---- */
.polaroid.has-secret{ cursor:pointer; }
.polaroid-secret{
  position:absolute;
  inset:auto 8px 40px 8px;
  background:var(--paper);
  border:1px dashed var(--red);
  padding:10px 12px;
  font-family:var(--font-letter);
  font-size:1.05rem;
  color:var(--red-deep);
  text-align:center;
  opacity:0;
  transform:scale(.9);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.polaroid.has-secret.open .polaroid-secret{ opacity:1; transform:scale(1); pointer-events:auto; }
.polaroid.has-secret.open img{ opacity:0; }
.polaroid-hint{
  position:absolute; bottom:8px; right:8px;
  font-size:.85rem; opacity:.55;
}

@media (max-width:560px){
  .gallery{ grid-template-columns:1fr; gap:34px; }
  .polaroid.wide{ grid-column:span 1; }
}

/* ============ CIERRE ============ */
.closing{
  text-align:center;
  padding-bottom:40px;
}
.closing-gif{
  width:120px;
  margin:0 auto 18px;
}
.closing-msg{
  font-family:var(--font-letter);
  font-size:1.7rem;
  color:var(--red-deep);
  max-width:460px;
  margin:0 auto 26px;
  line-height:1.35;
}

.seal-stamp{
  position:relative; width:112px; height:112px; margin:0 auto 24px; color:var(--red-deep);
  transform:scale(2.3) rotate(-16deg); opacity:0;
}
.seal-stamp svg{ display:block; width:100%; height:100%; filter:drop-shadow(1px 2px 0 rgba(122,21,28,.22)); }
.seal-word{ font-family:var(--font-heading); font-size:13px; letter-spacing:.02em; fill:currentColor; }
.seal-stamp::before, .seal-stamp::after{
  content:''; position:absolute; border-radius:50%; background:var(--red-deep); opacity:0; transform:scale(0);
}
.seal-stamp::before{ top:6%; right:8%; width:5px; height:5px; }
.seal-stamp::after{ bottom:12%; left:4%; width:4px; height:4px; }
.seal-stamp.stamped{ animation:stamp-hit .55s cubic-bezier(.24,.9,.32,1.2) forwards; }
.seal-stamp.stamped::before{ animation:ink-fleck .5s ease .32s forwards; }
.seal-stamp.stamped::after{ animation:ink-fleck .5s ease .4s forwards; }
@keyframes stamp-hit{
  0%{ transform:scale(2.3) rotate(-16deg); opacity:0; }
  50%{ opacity:1; }
  58%{ transform:scale(.86) rotate(-4deg); opacity:1; }
  78%{ transform:scale(1.07) rotate(-7deg); }
  100%{ transform:scale(1) rotate(-6deg); opacity:1; }
}
@keyframes ink-fleck{
  0%{ opacity:0; transform:scale(0); }
  40%{ opacity:.6; transform:scale(1); }
  100%{ opacity:0; transform:scale(.6); }
}

.footer-note{
  text-align:center;
  font-family:var(--font-body);
  font-size:.72rem;
  color:var(--ink-soft);
  opacity:.7;
  padding:18px 0 30px;
}

/* ============ confeti mini (secretos) ============ */
#confetti-layer{ position:fixed; inset:0; pointer-events:none; z-index:9999; }
.confetti-heart{
  position:fixed; top:-24px; font-size:14px; will-change:transform,opacity;
  animation:confetti-fall linear forwards;
}
@keyframes confetti-fall{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  100%{ transform:translate(var(--cx,0px), 70vh) rotate(var(--cr,360deg)); opacity:0; }
}

/* ============ REVEAL: entrada al hacer scroll, reutilizable en toda la página ============ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ============ notitas musicales ambientales que suelta el disco ============ */
#ambient-layer{ position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.ambient-note{
  position:absolute; opacity:0; color:var(--rose); pointer-events:none;
  animation:ambient-note-float ease-out forwards;
  will-change:transform, opacity;
}
@keyframes ambient-note-float{
  0%{ transform:translate(0,0) rotate(0deg) scale(.7); opacity:0; }
  15%{ opacity:.9; }
  100%{ transform:translate(var(--nx,20px), -90px) rotate(var(--nr,25deg)) scale(1); opacity:0; }
}

/* ============ CANCIÓN / VINILO ============ */
.vinyl-player{ display:flex; flex-direction:column; align-items:center; gap:28px; width:100%; max-width:620px; margin:0 auto; text-align:center; }
.vinyl-row{ display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap; width:100%; }
.vinyl-disc-wrap{ transition:transform .22s cubic-bezier(.3,.7,.4,1), filter .22s ease; cursor:pointer; }
.vinyl-disc-bounce.jump{ animation:disc-jump .38s cubic-bezier(.3,.6,.3,1); }
@keyframes disc-jump{
  0%{ transform:scale(1,1) translateY(0); }
  15%{ transform:scale(1.07,0.9) translateY(3px); }
  35%{ transform:scale(0.93,1.09) translateY(-7px); }
  55%{ transform:scale(1.04,0.97) translateY(2px); }
  75%{ transform:scale(0.98,1.02) translateY(-2px); }
  100%{ transform:scale(1,1) translateY(0); }
}
.vinyl-disc{
  width:200px; height:200px; border-radius:50%;
  background: repeating-radial-gradient(circle at center, #161616 0 3px, #262626 3px 6px);
  box-shadow:0 12px 26px #00000055, inset 0 0 0 6px #000;
  display:flex; align-items:center; justify-content:center;
  animation: spin-vinyl 6s linear infinite; animation-play-state:paused;
}
.vinyl-disc.spinning{ animation-play-state:running; }
@keyframes spin-vinyl{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.vinyl-label{
  width:84px; height:84px; border-radius:50%;
  background:var(--paper); border:2px solid var(--ink); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 3px #000;
}
.vinyl-label img{ width:100%; height:100%; object-fit:cover; display:block; }
.vinyl-caption{ font-family:var(--font-mono); font-size:13px; color:var(--ink); text-align:center; letter-spacing:.03em; }

.lyrics-widget{
  position:relative; width:64px; height:60px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:width .55s cubic-bezier(.4,0,.2,1), height .55s cubic-bezier(.4,0,.2,1);
}
.lyrics-widget.open{ width:260px; height:220px; }
.lyrics-hint{
  position:absolute; top:-40px; left:-30px; width:118px; z-index:1;
  font-family:var(--font-letter); font-size:.95rem; color:var(--teal);
  text-align:left; line-height:1.15; transform:rotate(-3deg); pointer-events:none;
  transition:opacity .3s ease;
}
.lyrics-hint-arrow{
  position:absolute; top:16px; left:10px; width:40px; height:30px; z-index:1;
  pointer-events:none; transform:rotate(10deg); transition:opacity .3s ease;
}
.paper-crumple{
  position:relative; width:60px; height:56px; cursor:pointer; padding:0;
  border:none; border-radius:44% 56% 61% 39% / 53% 44% 56% 47%;
  background:
    radial-gradient(circle at 28% 26%, #ffffff77, transparent 42%),
    radial-gradient(circle at 72% 66%, #00000024, transparent 46%),
    radial-gradient(circle at 22% 74%, #0000001c, transparent 38%),
    linear-gradient(135deg, #fff8ea, #e7d9ac);
  box-shadow:0 5px 10px #00000033, inset 0 0 8px #00000018;
  transition:transform .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.paper-crumple:hover{ transform:scale(1.08) rotate(-3deg); box-shadow:0 6px 12px #00000040, inset 0 0 8px #00000018; }
.paper-crumple:active{ transform:scale(.95) rotate(2deg); }
.crumple-crease{ position:absolute; background:#00000014; pointer-events:none; }
.crease-1{ top:20%; left:10%; width:80%; height:1.5px; transform:rotate(18deg); }
.crease-2{ top:55%; left:4%; width:70%; height:1.5px; transform:rotate(-12deg); }
.crease-3{ top:70%; left:30%; width:60%; height:1.5px; transform:rotate(24deg); }
.paper-crumple.tossing{ animation:crumple-toss .45s ease-in forwards; pointer-events:none; }
@keyframes crumple-toss{
  to{ transform:scale(.3) rotate(35deg) translateY(-14px); opacity:0; }
}
.lyrics-panel.open{ animation:paper-unfold .5s cubic-bezier(.34,1.3,.4,1) forwards; }
@keyframes paper-unfold{
  0%{ transform:scale(.6) rotate(-6deg); opacity:0; }
  60%{ transform:scale(1.03) rotate(1deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}

.lyrics-panel{
  position:absolute; inset:0; background:#fff8ea; border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--shadow); overflow:hidden;
}
.lyrics-panel::before, .lyrics-panel::after{
  content:''; position:absolute; left:0; right:0; height:26px; z-index:2; pointer-events:none;
}
.lyrics-panel::before{ top:0; background:linear-gradient(#fff8ea, transparent); }
.lyrics-panel::after{ bottom:0; background:linear-gradient(transparent, #fff8ea); }
.lyrics-scroll{
  height:100%; overflow-y:auto; scrollbar-width:none; padding:100px 16px;
}
.lyrics-scroll::-webkit-scrollbar{ display:none; }
.lyrics-line{ padding:8px 2px; opacity:.35; transition:opacity .3s ease, transform .3s ease; text-align:center; }
.lyrics-line.active{ opacity:1; transform:scale(1.04); }
.lyrics-line p{ margin:0; font-family:var(--font-letter); font-size:1.1rem; color:var(--ink); }
.lyric-word{ transition:font-weight .15s ease, color .15s ease; }
.lyric-word.active-word{ font-weight:800; color:var(--red-deep); }
.lyrics-empty{ margin:0; font-family:var(--font-letter); font-size:1.1rem; color:var(--teal); opacity:.75; padding:0 10px; text-align:center; }

.vinyl-controls{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.player-bar{
  display:flex; align-items:center; gap:12px; width:100%; max-width:340px;
  background:#111; border:2px solid var(--ink); border-radius:10px;
  padding:10px 14px; box-shadow:4px 4px 0 var(--shadow);
}
.player-btn{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:var(--red); color:#fff; border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; padding:0 0 0 2px;
}
.player-btn:hover{ filter:brightness(1.08); }
.player-progress{
  position:relative; flex:1; height:8px; background:#333; border-radius:999px; cursor:pointer;
}
.player-progress-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background:var(--gold); border-radius:999px; pointer-events:none; }
.player-progress-handle{
  position:absolute; top:50%; left:0%; width:13px; height:13px; border-radius:50%;
  background:#fff; border:2px solid var(--ink); transform:translate(-50%,-50%); pointer-events:none;
}
.player-time{ font-family:var(--font-mono); font-size:11px; color:#7cff8e; white-space:nowrap; flex-shrink:0; }

.volume-row{ display:flex; align-items:center; gap:10px; width:100%; max-width:280px; justify-content:center; }
.volume-row span{ font-size:16px; }
.volume-row input[type="range"]{
  flex:1; height:6px; appearance:none; -webkit-appearance:none;
  background:var(--ink); border-radius:999px; outline:none; cursor:pointer;
}
.volume-row input[type="range"]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--red); border:2px solid var(--ink); cursor:pointer;
}
.volume-row input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--red); border:2px solid var(--ink); cursor:pointer;
}

@media (max-width:640px){
  .lyrics-widget{ width:56px; height:52px; }
  .lyrics-widget.open{ width:220px; height:190px; }
  .vinyl-disc{ width:160px; height:160px; }
  .vinyl-label{ width:68px; height:68px; }
}

/* ============ ÍNDICE: nuestro libro (mismo patrón que capítulo 2) ============ */
.deco-host{ position:relative; overflow:hidden; }
.deco{ position:absolute; color:var(--gold); opacity:.5; font-size:1.6rem; animation:deco-float 7s ease-in-out infinite; pointer-events:none; will-change:transform; }
.deco-1{ top:10%; left:6%; }
.deco-2{ bottom:14%; right:8%; animation-delay:1.2s; }
@keyframes deco-float{
  0%,100%{ transform:translateY(var(--py,0px)) rotate(0deg); }
  50%{ transform:translateY(calc(var(--py,0px) - 22px)) rotate(12deg); }
}

.icon-svg{ width:1em; height:1em; display:inline-block; vertical-align:-0.15em; }

.chapters-row{ display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.chapter-card{
  position:relative; width:230px; text-align:center; background:var(--photo-white);
  border:2px solid var(--ink); box-shadow:4px 4px 0 var(--shadow); padding:26px 22px 22px;
  font-family:var(--font-body); color:var(--ink);
}
.chapter-current{ border-color:var(--rose); background:linear-gradient(120deg,#fff2f0,var(--photo-white)); }
.chapter-locked{
  cursor:pointer; border-style:dashed; opacity:.92;
  transition:transform .15s, box-shadow .15s;
}
.chapter-locked:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--shadow); }
.chapter-locked:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--shadow); }
.chapter-locked.is-unlocked{
  border-style:solid; border-color:var(--gold); background:linear-gradient(120deg,#fffaf0,#fff3d6);
  animation:chapter-glow 2.4s ease-in-out infinite;
}
@keyframes chapter-glow{
  0%,100%{ box-shadow:4px 4px 0 var(--shadow); }
  50%{ box-shadow:4px 4px 0 var(--shadow), 0 0 20px 3px #d6a41966; }
}
.chapter-lock-icon{ position:absolute; top:12px; right:14px; font-size:1.05rem; color:var(--ink); }
.chapter-locked.is-unlocked .chapter-lock-icon{ display:none; }
.chapter-unlocked-tag{ display:none; position:absolute; top:12px; right:14px; font-size:1.1rem; color:var(--gold); }
.chapter-locked.is-unlocked .chapter-unlocked-tag{ display:inline; animation:cu-pulse 1.4s ease-in-out infinite; }
@keyframes cu-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.25); } }
.chapter-roman{
  display:block; font-family:var(--font-heading); font-size:2rem; color:var(--red-deep);
  text-shadow:2px 2px 0 var(--gold); margin-bottom:2px;
}
.chapter-label{
  display:block; font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--teal); margin:2px 0 10px;
}
.chapter-card h3{ font-family:var(--font-heading); font-size:.92rem; margin:0 0 8px; color:var(--red-deep); }
.chapter-card p{ margin:0; font-size:.85rem; line-height:1.35; }

.chapter-book{ text-decoration:none; display:block; padding-left:34px; border-color:var(--teal); }
.chapter-book-spine{
  position:absolute; left:0; top:-2px; bottom:-2px; width:14px;
  background:repeating-linear-gradient(180deg, var(--red-deep) 0 7px, var(--red) 7px 9px);
  border:2px solid var(--ink); border-right:none;
}
.chapter-book .chapter-label{ color:var(--red-deep); }

/* ---- easter egg: la tarjeta del capítulo actual esconde una posdata ---- */
.tl-flippable{ cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.tl-flippable:hover{ transform:translateY(-3px); box-shadow:6px 6px 0 var(--shadow); }
.tl-flippable:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.tl-flippable.tl-flip{ animation:tl-card-flip .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes tl-card-flip{
  0%{ transform:rotateX(0deg); }
  45%{ transform:rotateX(-10deg) scale(.99,1.02); }
  100%{ transform:rotateX(0deg); }
}
.tl-secret{
  max-height:0; opacity:0; overflow:hidden; margin:0; padding-top:0;
  font-family:var(--font-letter); font-size:1.1rem; line-height:1.3;
  color:var(--rose); transition:max-height .45s ease, opacity .4s ease .05s, padding-top .45s ease;
}
.tl-flippable.tl-open .tl-secret{ max-height:80px; opacity:1; padding-top:10px; }

/* ---- amigo escondido: Cinnamoroll ---- */
.cinnamo-egg{
  position:absolute; right:4%; bottom:2%; width:52px; height:52px; padding:0;
  border:none; background:none; cursor:pointer; opacity:.5; z-index:2;
  animation:deco-float 7s ease-in-out infinite; transition:opacity .2s, transform .2s;
}
.cinnamo-egg:hover{ opacity:1; transform:scale(1.12) rotate(-4deg) !important; }
.cinnamo-egg img{ width:100%; height:100%; object-fit:contain; display:block; }
.cinnamo-egg.boop img{ animation:otter-boop .6s ease; }
@keyframes otter-boop{
  0%{ transform:scale(1) rotate(0deg); }
  30%{ transform:scale(1.35) rotate(-10deg); }
  60%{ transform:scale(.92) rotate(8deg); }
  100%{ transform:scale(1) rotate(0deg); }
}

/* ---- modal del próximo capítulo ---- */
.chapter-modal{
  position:fixed; inset:0; background:#000000cc; display:none;
  align-items:center; justify-content:center; z-index:2100; padding:20px;
}
.chapter-modal.open{ display:flex; }
.chapter-modal-card{
  position:relative; background:var(--paper); border:2px solid var(--ink);
  box-shadow:8px 8px 0 var(--shadow); max-width:420px; width:100%;
  overflow:hidden;
  animation:chapter-modal-in .4s cubic-bezier(.34,1.3,.4,1);
}
@keyframes chapter-modal-in{
  from{ transform:scale(.7) rotate(-4deg); opacity:0; }
  to{ transform:scale(1) rotate(0deg); opacity:1; }
}
.chapter-modal-paper{
  position:absolute; inset:0; opacity:.5; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, #00000006 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 2px, #00000004 2px 3px);
}
.chapter-modal-deco{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.chapter-modal-deco span{
  position:absolute; color:var(--gold); opacity:.55; font-size:1.4rem;
  animation:deco-float 6s ease-in-out infinite;
}
.chapter-modal-deco .cmd-1{ top:10%; left:8%; color:var(--rose); }
.chapter-modal-deco .cmd-2{ bottom:14%; right:10%; animation-delay:1s; }
.chapter-modal-deco .cmd-3{ top:14%; right:14%; color:var(--teal); animation-delay:2s; font-size:1.1rem; }
.chapter-modal-tape{
  position:absolute; width:60px; height:20px; background:#f3e9d2cc; border:1px solid #0002;
  box-shadow:0 2px 4px #0002; z-index:3;
}
.chapter-modal-tape-tl{ top:-8px; left:26px; transform:rotate(-8deg); }
.chapter-modal-tape-br{ bottom:-8px; right:26px; transform:rotate(6deg); }
.chapter-modal-body{ position:relative; z-index:2; padding:36px 28px 30px; text-align:center; }
.chapter-modal-locked{ position:relative; }
.chapter-modal-face-sleepy{
  position:absolute; top:-14px; left:-6px; width:62px; height:auto;
  transform:rotate(-6deg); filter:drop-shadow(2px 3px 0 var(--shadow));
  animation:sway 3.8s ease-in-out infinite;
}
.chapter-modal-face-party{
  display:block; width:100px; height:auto; margin:0 auto 4px;
  animation:chapter-burst 1s ease-in-out;
}
.chapter-modal-close{
  position:absolute; top:8px; right:10px; background:none; border:none;
  font-size:20px; cursor:pointer; color:var(--ink); line-height:1; padding:6px; z-index:4;
}
.chapter-modal h3{ font-family:var(--font-heading); font-size:1.1rem; color:var(--red-deep); margin:8px 0; }
.chapter-modal-lock{ font-size:2.6rem; display:inline-block; color:var(--red-deep); animation:chapter-lock-shake 1.4s ease-in-out infinite; }
@keyframes chapter-lock-shake{
  0%,100%{ transform:rotate(0deg); } 20%{ transform:rotate(-10deg); }
  40%{ transform:rotate(9deg); } 60%{ transform:rotate(-6deg); } 80%{ transform:rotate(5deg); }
}
.chapter-countdown{ display:flex; gap:10px; justify-content:center; margin:18px 0 14px; }
.cc-block{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.cc-block span{
  font-family:var(--font-mono); font-weight:700; font-size:1.5rem; min-width:44px;
  background:var(--ink); color:var(--gold); padding:6px 4px; border-radius:4px;
}
.cc-block span.cc-pulse{ animation:cc-pulse .35s ease; }
@keyframes cc-pulse{ 0%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
.cc-block label{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--teal); }
.chapter-modal-hint{ font-family:var(--font-letter); font-size:1.1rem; color:var(--teal); margin-top:4px; }
.chapter-modal-burst{ font-size:2rem; animation:chapter-burst 1s ease-in-out; }
@keyframes chapter-burst{
  0%{ transform:scale(.4) rotate(-12deg); opacity:0; }
  55%{ transform:scale(1.25) rotate(6deg); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}

/* ============ OVERLAY DE LOGRO: mascota a pantalla completa (mismo patrón cap. 2) ============ */
.typewriter-cursor{ animation:blink 1s steps(1) infinite; }
@keyframes blink{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }
html.ach-lock-scroll{ overflow:hidden; }
.achievement-overlay{
  position:fixed; inset:0; z-index:20000; pointer-events:auto;
  display:flex; align-items:center; justify-content:center;
}
.achievement-overlay[hidden]{ display:none; }
.ach-scrim{
  position:absolute; inset:0; background:rgba(10,8,6,.8); opacity:0;
  transition:opacity .35s ease;
}
.achievement-overlay.active .ach-scrim{ opacity:1; }
.ach-stage{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:0 20px; max-width:min(90vw, 420px); width:100%;
  opacity:1; transform:scale(1);
  transition:opacity .4s ease, transform .4s ease;
}
.ach-stage.ach-closing{ opacity:0; transform:scale(.82) translateY(-12px); }
.ach-mascot{
  width:120px; height:120px; object-fit:contain;
  filter:drop-shadow(4px 6px 0 rgba(0,0,0,.4));
  opacity:0; transform:scale(.4) translateY(30px);
  transition:opacity .4s cubic-bezier(.34,1.56,.64,1), transform .4s cubic-bezier(.34,1.56,.64,1);
}
.achievement-overlay.active .ach-mascot{ opacity:1; transform:scale(1) translateY(0); }
.ach-speech{
  position:relative; background:var(--photo-white); border:2px solid var(--ink); border-radius:14px;
  padding:12px 16px; box-shadow:4px 4px 0 rgba(0,0,0,.4);
  opacity:0; transform:translateY(10px) scale(.9);
  transition:opacity .3s ease, transform .3s ease;
  max-width:min(80vw, 320px);
}
.ach-speech.show{ opacity:1; transform:translateY(0) scale(1); }
.ach-speech::after{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:0; height:0; border:8px solid transparent; border-top-color:var(--photo-white); border-bottom:0;
}
.ach-speech-text{ margin:0; font-family:var(--font-letter); font-size:1.2rem; line-height:1.3; color:var(--ink); text-align:center; }
/* banner tipo "logro conseguido" — colores fijos, no cambian con la paleta de la página */
.ach-banner{
  display:flex; align-items:center; gap:12px; width:100%;
  background:linear-gradient(180deg, #4a4034 0%, #241f19 100%);
  border-top:3px solid #fbe28a; border-bottom:3px solid #6b5a2e;
  box-shadow:0 6px 0 rgba(0,0,0,.35), 0 0 0 2px #000;
  padding:10px 14px; border-radius:2px;
  opacity:0; transform:translateY(18px) scale(.92);
  transition:opacity .3s cubic-bezier(.34,1.56,.64,1), transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ach-banner.show{ opacity:1; transform:translateY(0) scale(1); }
.ach-banner-icon{
  flex-shrink:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:#1c1712; border:2px solid #6b5a2e; border-radius:4px;
}
.ach-banner-copy{ flex:1; min-width:0; }
.ach-banner-kicker{
  margin:0 0 5px; font-family:var(--font-pixel); font-size:9px; letter-spacing:.03em;
  color:#ffd866; text-shadow:1px 1px 0 #000;
}
.ach-banner-title{
  margin:0; font-family:var(--font-pixel); font-size:10px; line-height:1.6;
  color:#fff; text-shadow:1px 1px 0 #000;
}
.ach-banner-count{
  flex-shrink:0; font-family:var(--font-pixel); font-size:11px; color:#ffd866;
  text-shadow:1px 1px 0 #000; padding-left:10px; border-left:2px solid #6b5a2e;
}
@media (max-width:640px){
  .ach-mascot{ width:88px; height:88px; }
  .ach-banner-title{ font-size:9px; }
  .ach-banner-kicker{ font-size:8px; }
  .chapters-row{ gap:16px; }
  .chapter-card{ width:100%; max-width:260px; }
}

/* ============ CARTA al completar los 6 secretos de este capítulo: mismo sobre/carta ============ */
/* de la sección "carta", pero flotando de la nada sobre el fondo oscuro del logro */
.completion-letter-modal{
  position:fixed; inset:0; z-index:20500;
  display:none; align-items:center; justify-content:center; padding:20px; overflow-y:auto;
}
.completion-letter-modal.open{ display:flex; }
.completion-letter-wrap{ width:min(560px, 92vw); margin:auto; }
/* la cintilla es la ÚNICA forma de cerrar esta carta — otro color para que se note distinta a la normal */
.completion-ribbon{ background:var(--gold); cursor:pointer; }
.completion-ribbon:hover, .completion-ribbon:focus-visible{ filter:brightness(1.08); }

/* ============ MARQUEE ============ */
.marquee-wrap{
  background:var(--red-deep); color:var(--photo-white); overflow:hidden; white-space:nowrap;
  padding:10px 0; font-family:var(--font-mono); font-size:14px;
  border-top:3px solid var(--gold); border-bottom:3px solid var(--gold);
}
.marquee-track{ display:inline-flex; animation:marquee 26s linear infinite; }
.marquee-track span{ padding-right:2em; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============ FOOTER ============ */
#footer{ background:var(--red-deep); color:var(--photo-white); padding:60px 20px 40px; text-align:center; position:relative; }
.stat-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-bottom:34px; }
.stat-box{ background:rgba(0,0,0,.25); border:1px solid var(--gold); padding:14px 22px; min-width:160px; }
.stat-label{ display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; opacity:.75; letter-spacing:.05em; }
.stat-value{ display:block; font-family:var(--font-mono); font-size:22px; color:var(--gold); margin-top:4px; }
.under-construction{ font-family:var(--font-mono); font-size:13px; color:var(--gold); animation:blink 1.4s infinite; margin-bottom:20px; }
.footer-otter{ display:block; width:100px; height:auto; margin:26px auto 18px; object-fit:contain; }
.footer-sign{ font-family:var(--font-letter); font-size:1.4rem; margin:0; }

/* ============ TYPEWRITER (footer) ============ */
.typewriter{
  font-family:var(--font-mono); font-size:14px; color:var(--gold);
  text-align:center; margin:10px 0 26px; min-height:1.4em;
}

/* ===== Easter egg: cinnamon roll escondido + modo canela ===== */
.cinnamon-egg{
  position:absolute; right:14px; bottom:10px; font-size:20px; opacity:.35;
  background:none; border:none; cursor:pointer; line-height:1;
  animation:cinnamon-spin 9s linear infinite; transition:opacity .3s ease, transform .3s ease;
  filter:grayscale(.3);
}
.cinnamon-egg:hover, .cinnamon-egg:focus-visible{ opacity:.9; transform:scale(1.25); filter:none; }
@keyframes cinnamon-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

#lavender-egg{ right:40px; animation-duration:11s; }
#minecraft-egg{ right:66px; animation-duration:7s; }

body.cinnamon-mode{
  filter:sepia(.4) saturate(1.05) brightness(1.02);
  transition:filter 1.4s ease;
}
body.lavender-mode{
  --red:#5a3fd6; --red-deep:#3a2596; --red-bright:#8b6ff0; --rose:#b39ce8;
  --gold:#c4a9f5; --teal:#6a4fc9;
  --amber-hi:#efe6ff; --amber:#d9c7fb; --amber-deep:#7c5cd6;
  --paper:#f2ecff; --paper-dark:#e5d9fb;
  transition:background-color .8s ease, color .8s ease;
}
body.minecraft-mode{
  --red:#4c9a2a; --red-deep:#2d5f16; --red-bright:#6abe30; --rose:#8fd14f;
  --gold:#a4c639; --teal:#2f7a3d;
  --amber-hi:#eaf5cf; --amber:#cfe8a0; --amber-deep:#5a8f34;
  --paper:#eef7dd; --paper-dark:#dcecc0;
  transition:background-color .8s ease, color .8s ease;
}
.ambient-roll{
  position:absolute; top:-40px; opacity:0;
  animation:ambient-roll-fall linear forwards, ambient-roll-spin linear infinite;
}
@keyframes ambient-roll-fall{
  0%{ transform:translateY(0); opacity:0; }
  10%{ opacity:.9; }
  90%{ opacity:.8; }
  100%{ transform:translateY(112vh); opacity:0; }
}
@keyframes ambient-roll-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .polaroid{ opacity:1; transform:none; }
  .reveal{ opacity:1; transform:none; }
}