/* ============ CAPÍTULO IV — LA FERIA DE AMOR Y AMISTAD ============
   Base: los componentes probados del capítulo III (sobre, carta, vinilo, tarjetas,
   overlay de logro) con la paleta de la feria encima. Regla del capítulo: todo lo
   que se LEE es papel crema con borde de tinta y sombra dura; lo que es ESTRUCTURA
   es cartón, madera o toldo. El cielo es azul de anochecer, nunca lavanda: el
   lavanda es la marca de él y sólo lo llevan seis piezas. */

:root{
  --paper:#fff8ea;
  --paper-warm:#f6e8cd;
  --paper-kraft:#e3cda4;
  --paper-dark:#e9dcbd;
  --ink:#2b211c;
  --ink-soft:#5a4c3f;

  --carton:#c8a473;
  --carton-dark:#a8834f;
  --carton-edge:#8c6a3c;
  --madera:#6b4a2f;
  --madera-clara:#8a6440;
  --tiza:#f4efe4;
  --cuerda:#cbb389;

  --toldo-a:#d8453f;
  --toldo-b:#fff3dd;
  --toldo-c:#2f8f7d;
  --banderin-1:#e86a4f; --banderin-2:#f0c04a; --banderin-3:#6fbf73; --banderin-4:#7fc3e8; --banderin-5:#f2a0b5;

  --bombillo-ambar:#ffce5c;
  --bombillo-rosa:#f38ba8;
  --bombillo-verde:#6fbf73;
  --bombillo-cielo:#7fc3e8;
  --bombillo-off:#6d5f52;
  --halo:rgba(255,206,92,.32);

  --lavanda:#a68bd8;
  --lavanda-claro:#d9cbf5;
  --lavanda-profundo:#6a4fa3;

  --cielo-alto:#2a3560;
  --cielo:#4a5788;
  --cielo-bajo:#c98f7a;
  --tierra:#7d6141;

  /* heredados del libro (los usan los componentes copiados del cap. III) */
  --red:#d8453f;
  --red-deep:#7a151c;
  --red-bright:#e86a4f;
  --rose:#e75480;
  --gold:#d6a419;
  --teal:#1f6f78;
  --photo-white:#fffdf7;
  --shadow: rgba(43,33,28,.28);
  --shadow-soft: rgba(43,33,28,.16);
  --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;
  --font-display:'Rubik Bubbles', cursive;
}

/* 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; }

html{ overflow-x:hidden; }

body{
  margin:0;
  position:relative;
  background-color:var(--cielo);
  background-image:linear-gradient(180deg, var(--cielo-alto) 0%, var(--cielo) 46%, #7a6a7a 82%, var(--cielo-bajo) 100%);
  color:var(--tiza);
  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>%F0%9F%8E%9F%EF%B8%8F</text></svg>") 12 12, auto;
}

/* ============ ATMÓSFERA DE FERIA (todo estático salvo opacity) ============ */
#cielo-feria{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 30% at 20% 8%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(ellipse 70% 40% at 80% 12%, rgba(255,255,255,.04), transparent 70%),
    radial-gradient(ellipse 130% 110% at 50% 45%, transparent 52%, rgba(10,8,20,.22) 78%, rgba(10,8,20,.38) 100%);
}
#luz-respira{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 72% 54% at 50% 18%, rgba(255,206,92,.22), rgba(255,180,90,.08) 46%, transparent 70%),
    radial-gradient(ellipse 42% 32% at 10% 88%, rgba(232,106,79,.12), transparent 70%),
    radial-gradient(ellipse 42% 32% at 90% 84%, rgba(127,195,232,.10), transparent 70%);
  animation:candle-breathe 6s ease-in-out infinite;
}
@keyframes candle-breathe{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

#guirnaldas{ position:absolute; top:0; left:0; right:0; height:150px; z-index:1; pointer-events:none; }
#guirnaldas svg{ display:block; width:100%; height:150px; }
.gcable{ fill:none; stroke:#2a1d12; stroke-width:3; }
.bombillo{ stroke:#2b211c; stroke-width:1.4; pointer-events:auto; }
.bombillo-halo{ fill:var(--bombillo-ambar); opacity:.32; }
.bombillo.anima .bombillo-halo{ animation:bombillo-late 3.4s ease-in-out infinite; animation-delay:var(--d, 0s); }
.bombillo-halo.rosa{ fill:var(--bombillo-rosa); } .bombillo-halo.verde{ fill:var(--bombillo-verde); } .bombillo-halo.cielo{ fill:var(--bombillo-cielo); }
.bombillo.fundido .bombillo-halo{ opacity:0; animation:none; }
.bombillo.fundido .bombillo-cuerpo{ fill:var(--bombillo-off) !important; }
.bombillo.apagado .bombillo-halo{ opacity:0 !important; animation:none; }
.bombillo.apagado .bombillo-cuerpo{ fill:var(--bombillo-off) !important; }
@keyframes bombillo-late{ 0%,100%{ opacity:.32; } 50%{ opacity:.62; } }
body.luz-cierre .bombillo .bombillo-halo{ opacity:0; animation:none; }
body.luz-cierre .bombillo .bombillo-cuerpo{ fill:var(--bombillo-off) !important; transition:fill .4s; }
body.luz-cierre{ background-image:linear-gradient(180deg, #151a33 0%, #1f2646 60%, #2a2438 100%); }
body.luz-cierre #luz-respira{ opacity:0; animation:none; }

#banderines{ position:absolute; top:0; left:0; right:0; height:130px; z-index:1; pointer-events:none; overflow:hidden; }
.banderin-tira{ position:absolute; left:-2%; right:-2%; display:flex; justify-content:space-between; }
.banderin-tira.t1{ top:88px; transform:rotate(-1.5deg); }
.banderin-tira.t2{ top:108px; transform:rotate(1deg); }
.banderin-tira svg{ width:22px; height:24px; transform-origin:50% 0; animation:banderin-ondea 4.2s ease-in-out infinite; animation-delay:var(--d,0s); }
@keyframes banderin-ondea{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(5deg); } }

#polillas{ position:absolute; top:0; left:0; right:0; height:170px; z-index:8; pointer-events:none; overflow:visible; }
.polilla{ position:absolute; width:22px; height:22px; opacity:.85; will-change:transform; }

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

a{ color:var(--bombillo-ambar); }

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(--carton);
  opacity:.55;
  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;
}
/* posiciones: las genera hero-deco.js (evita el bloque de texto central, se recalcula si cambia el ancho) */

.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-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-display);
  font-weight:400;
  font-size:clamp(3rem, 13vw, 5.6rem);
  line-height:.95;
  color:var(--tiza);
  margin:18px 0 6px;
  text-shadow:4px 4px 0 var(--ink), 6px 6px 0 rgba(166,139,216,.55);
  letter-spacing:.01em;
}

.hero-sub{
  font-family:var(--font-letter);
  font-size:1.6rem;
  color:#f4efe4;
  margin:0 0 14px;
  text-shadow:1px 1px 0 rgba(43,33,28,.6);
}

.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(--ink);
  border:1.5px dashed var(--ink);
  border-radius:999px;
  padding:6px 16px;
  background:var(--paper);
}

.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(--lavanda-profundo);
  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(--tiza);
  text-shadow:2px 2px 0 rgba(43,33,28,.55);
  margin:0 0 6px;
}
.section-kicker{
  display:block;
  text-align:center;
  font-family:var(--font-heading);
  font-size:.6rem;
  letter-spacing:.18em;
  color:var(--bombillo-ambar);
  margin-bottom:10px;
}
.section-note{
  text-align:center;
  font-family:var(--font-letter);
  font-size:1.25rem;
  color:#e7dcc9;
  max-width:460px;
  margin:0 auto 34px;
}

/* ============ 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(--tiza);
  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(--lavanda-claro);
  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:#e7dcc9;
  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(--madera); color:var(--tiza); padding:60px 20px 40px; text-align:center; position:relative; background-image:repeating-linear-gradient(90deg, transparent 0 46px, rgba(0,0,0,.08) 46px 48px), repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.025) 7px 8px); border-top:4px solid var(--ink); }
.stat-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-bottom:34px; }
.stat-box{ background:var(--paper); color:var(--ink); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:14px 22px; min-width:160px; transform:rotate(var(--r,0deg)); }
.stat-box:nth-child(1){ --r:-1.5deg; } .stat-box:nth-child(3){ --r:1.2deg; }
.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(--lavanda-profundo); 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; }
#feria-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{ --cielo-alto:#2c1f5e; --cielo:#4a3a8a; --cielo-bajo:#b08bc9; background-image:linear-gradient(180deg, var(--cielo-alto) 0%, var(--cielo) 46%, #6f5a90 82%, var(--cielo-bajo) 100%); transition:background-color .8s ease; }
body.feria-noche{ --cielo-alto:#141a36; --cielo:#232c55; --cielo-bajo:#3b3550; background-image:linear-gradient(180deg, var(--cielo-alto) 0%, var(--cielo) 56%, var(--cielo-bajo) 100%); }
body.feria-noche .bombillo .bombillo-halo{ opacity:.6; }
.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); } }


/* ################################################################################
   LA FERIA — componentes propios del capítulo IV
   ################################################################################ */

/* ---- kit de materiales ---- */
.m-carton{
  background:var(--carton);
  background-image:repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.05) 6px 8px), linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.06));
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.m-madera{
  background:var(--madera);
  background-image:repeating-linear-gradient(0deg, transparent 0 9px, rgba(0,0,0,.14) 9px 11px), repeating-linear-gradient(90deg, transparent 0 120px, rgba(255,255,255,.04) 120px 122px);
  border:2px solid var(--ink);
}
.m-toldo{
  background:repeating-linear-gradient(90deg, var(--toldo-a) 0 18px, var(--toldo-b) 18px 36px);
  border:2px solid var(--ink);
}
.m-tiza{ font-family:var(--font-letter); color:var(--tiza); text-shadow:0 0 1px rgba(255,255,255,.35); }
.draggable{ touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; cursor:grab; }
.draggable.arrastrando{ cursor:grabbing; z-index:50; }

/* ---- carteles de cartón (pendientes y casetas cerradas) ---- */
.c4-cartel{
  display:inline-block; max-width:100%;
  background:var(--carton); color:var(--ink);
  background-image:repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.05) 6px 8px);
  border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  font-family:var(--font-letter); font-size:1.15rem; line-height:1.25;
  padding:8px 12px; transform:rotate(-1.5deg); text-align:left;
}
.c4-pendiente{ opacity:.95; }
.section-note .c4-cartel, .closing-msg .c4-cartel{ font-size:1.1rem; }

/* ---- burbuja de diálogo (papel) ---- */
.burbuja{
  position:absolute; background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:12px;
  padding:8px 12px; font-family:var(--font-letter); font-size:1.15rem; line-height:1.25; box-shadow:3px 3px 0 var(--ink);
  max-width:190px; z-index:6; animation:burbuja-in .25s cubic-bezier(.34,1.56,.64,1);
}
.burbuja::after{ content:''; position:absolute; bottom:-10px; left:22px; border:6px solid transparent; border-top:6px solid var(--ink); border-bottom:0; }
.burbuja[hidden]{ display:none; }
@keyframes burbuja-in{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ---- tarjeta de papel genérica ---- */
.tarjeta-papel-wrap{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:19700; display:flex; align-items:center; justify-content:center;
  background:rgba(10,8,6,.72); padding:20px; opacity:0; transition:opacity .3s ease;
}
.tarjeta-papel-wrap[hidden]{ display:none; }
.tarjeta-papel-wrap.show{ opacity:1; }
.tarjeta-papel{
  position:relative; max-width:400px; width:100%; background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:28px 24px 20px; text-align:center;
  transform:rotate(-1.5deg) scale(.9); transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.tarjeta-papel-wrap.show .tarjeta-papel{ transform:rotate(-1.5deg) scale(1); }
.tarjeta-tape{ position:absolute; top:-12px; left:50%; width:74px; height:22px; margin-left:-37px; transform:rotate(3deg);
  background:repeating-linear-gradient(45deg, rgba(216,69,63,.45) 0 8px, rgba(243,233,210,.85) 8px 16px); border:1px solid rgba(0,0,0,.12); }
.tarjeta-mascota{ width:84px; height:84px; object-fit:contain; margin:0 auto 6px; }
.tarjeta-kicker{ font-family:var(--font-heading); font-size:.6rem; letter-spacing:.16em; color:var(--lavanda-profundo); margin:0 0 8px; }
.tarjeta-texto{ font-family:var(--font-letter); font-size:1.4rem; line-height:1.3; margin:0 0 8px; white-space:pre-line; }
.tarjeta-firma{ font-family:var(--font-letter); font-size:1.2rem; color:var(--ink-soft); text-align:right; margin:0 0 6px; }
.tarjeta-ok{ margin-top:10px; }

/* ---- controles fijos ---- */
.sonido-btn{
  position:fixed; top:calc(10px + env(safe-area-inset-top, 0px)); right:calc(12px + env(safe-area-inset-right, 0px)); z-index:1900;
  background:none; border:0; padding:6px; cursor:pointer; color:var(--bombillo-ambar); line-height:0;
  filter:drop-shadow(0 0 6px rgba(255,206,92,.55));
}
.sonido-btn .sonido-cuerda{ position:absolute; top:-12px; left:50%; width:2px; height:16px; background:#2a1d12; }
body.c4-mudo .sonido-btn{ color:var(--bombillo-off); filter:none; }
html.ach-lock-scroll .sonido-btn{ opacity:0; }
.boleto-fijo{ position:fixed; left:calc(10px + env(safe-area-inset-left, 0px)); bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:1900; }
.boleto-fijo[hidden]{ display:none; }
.boleto-fijo-tab{
  width:44px; height:44px; border-radius:50%; border:2px solid var(--ink); background:var(--lavanda); box-shadow:3px 3px 0 var(--ink);
  font-size:20px; cursor:pointer; display:none; padding:0;
}
.boleto-fijo-card{
  background:var(--lavanda-claro); color:var(--ink); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  font-family:var(--font-mono); font-size:9.5px; line-height:1.35; padding:8px 10px; transform:rotate(-3deg); max-width:190px; white-space:pre-line;
  position:relative;
}
.boleto-fijo-card::before, .boleto-fijo-card::after{ content:''; position:absolute; top:50%; width:10px; height:10px; border-radius:50%; background:var(--cielo); border:2px solid var(--ink); margin-top:-6px; }
.boleto-fijo-card::before{ left:-7px; } .boleto-fijo-card::after{ right:-7px; }
.boleto-fijo.picado .boleto-fijo-card{ background:var(--lavanda-claro); }
.boleto-fijo.picado .boleto-fijo-card::before{ background:var(--paper); }
@media (max-width:420px){
  .boleto-fijo-tab{ display:block; }
  .boleto-fijo-card{ display:none; position:absolute; bottom:52px; left:0; }
  .boleto-fijo.abierto .boleto-fijo-card{ display:block; }
}
html.ach-lock-scroll .boleto-fijo{ opacity:0; pointer-events:none; }

/* ================= 1. ENTRADA ================= */
.hero{ padding-top:150px; overflow:visible; }
.hero-phrase{ opacity:.7; text-shadow:1px 1px 0 rgba(43,33,28,.7); }
.deco-cinta{ position:absolute; height:14px; background:repeating-linear-gradient(45deg, #f0c04a 0 14px, #2b211c 14px 28px); border:1px solid #2b211c; opacity:.85; }
.deco-cinta.cinta-1{ top:60%; left:-4%; width:140px; transform:rotate(-8deg); }
.deco-cinta.cinta-2{ bottom:8%; right:-3%; width:120px; transform:rotate(6deg); }
.deco-papelito{ position:absolute; color:#fff3dd; opacity:.8; }
.deco-papelito.pp1{ bottom:4%; left:12%; transform:rotate(22deg); }
.deco-papelito.pp2{ bottom:2%; left:38%; transform:rotate(-40deg); color:#f2a0b5; }
.deco-papelito.pp3{ bottom:6%; right:22%; transform:rotate(70deg); color:#7fc3e8; }
.deco-papelito.pp4{ bottom:1%; right:8%; transform:rotate(-15deg); color:#f0c04a; }
.deco-chinche{ position:absolute; color:#a8834f; }
.deco-chinche.ch1{ top:26%; left:8%; } .deco-chinche.ch2{ top:52%; right:6%; color:#d8453f; } .deco-chinche.ch3{ bottom:18%; left:24%; color:#6fbf73; }
.hero-nota{ font-family:var(--font-letter); font-size:1.2rem; color:#e7dcc9; margin:10px auto 0; max-width:420px; }

/* el arco */
.arco{
  position:relative; display:grid; grid-template-columns:40px 1fr 40px; align-items:end; max-width:560px; margin:0 auto 22px;
  animation:arco-entra .9s cubic-bezier(.34,1.56,.64,1) both; animation-delay:.9s;
}
@keyframes arco-entra{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }
.arco-poste{ position:relative; height:150px; background:var(--madera); border:2px solid var(--ink); border-bottom:0;
  background-image:repeating-linear-gradient(0deg, transparent 0 9px, rgba(0,0,0,.14) 9px 11px); }
.arco-techo{
  position:relative; background:var(--carton); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  background-image:repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.05) 6px 8px);
  padding:22px 12px 14px; text-align:center; margin-bottom:34px; transform:rotate(-.6deg);
}
.arco-techo::before{
  content:''; position:absolute; left:-2px; right:-2px; top:-22px; height:24px; background:var(--carton-dark);
  clip-path:polygon(0 100%, 50% 0, 100% 100%); border-top:2px solid var(--ink);
}
.arco-letrero{ position:relative; }
.arco-titulo{ display:block; font-family:var(--font-display); font-size:clamp(1.25rem, 5.2vw, 2.05rem); color:var(--tiza); text-shadow:3px 3px 0 var(--ink); letter-spacing:.02em; line-height:1.05; }
.arco-letra-suelta{ position:absolute; font-family:var(--font-display); font-size:clamp(1.25rem, 5.2vw, 2.05rem); color:var(--tiza); text-shadow:3px 3px 0 var(--ink); transform:rotate(18deg) translateY(10px); right:6%; top:60%; opacity:.9; }
.arco-tiza{ font-family:var(--font-letter); font-size:1rem; color:var(--tiza); margin:6px 0 0; opacity:.9; }
.arco-tiza-mini{ position:absolute; right:10px; bottom:6px; font-size:.85rem; transform:rotate(-6deg); opacity:.7; margin:0; }
.arco-guirnalda{ position:absolute; left:6px; right:6px; bottom:-14px; height:16px; display:flex; justify-content:space-around; }
.arco-guirnalda span{ width:9px; height:12px; border-radius:50% 50% 55% 55%; border:1.5px solid var(--ink); background:var(--bombillo-ambar); box-shadow:0 0 6px 1px rgba(255,206,92,.55); }
.arco-guirnalda span:nth-child(3n){ background:var(--bombillo-rosa); box-shadow:0 0 6px 1px rgba(243,139,168,.55); }
.arco-guirnalda span:nth-child(4n){ background:var(--bombillo-verde); box-shadow:0 0 6px 1px rgba(111,191,115,.55); }
body.luz-cierre .arco-guirnalda span{ background:var(--bombillo-off) !important; box-shadow:none !important; }

.altavoz{ position:absolute; top:-34px; left:-12px; width:56px; height:44px; background:none; border:0; padding:0; cursor:pointer; }
.altavoz-bocina{ position:absolute; left:8px; top:8px; width:40px; height:26px; background:var(--carton-dark); border:2px solid var(--ink); clip-path:polygon(0 30%, 55% 0, 100% 0, 100% 100%, 55% 100%, 0 70%); }
.altavoz-cable{ position:absolute; left:26px; top:34px; width:3px; height:40px; background:#2a1d12; transform:rotate(-12deg); }
.altavoz.suena .altavoz-bocina{ animation:altavoz-tiembla .5s ease infinite; }
@keyframes altavoz-tiembla{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-4deg); } 75%{ transform:rotate(4deg); } }

.troqueladora{ position:absolute; top:-18px; right:-16px; width:60px; height:70px; background:none; border:0; padding:0; cursor:pointer; }
.troqueladora-cordel{ position:absolute; left:50%; top:-10px; width:2px; height:30px; background:#cbb389; }
.troqueladora-cuerpo{
  position:absolute; left:8px; top:20px; width:44px; height:38px; background:#8a8a8a; border:2px solid var(--ink); border-radius:6px 6px 14px 14px;
  box-shadow:3px 3px 0 var(--ink); font-size:20px; line-height:34px; color:var(--ink); transform:rotate(8deg);
}
.troqueladora.lista .troqueladora-cuerpo{ animation:troquel-baila .8s ease-in-out infinite; }
@keyframes troquel-baila{ 0%,100%{ transform:rotate(8deg); } 50%{ transform:rotate(-6deg) translateY(2px); } }
.troqueladora.pica .troqueladora-cuerpo{ animation:troquel-pica .35s ease; }
@keyframes troquel-pica{ 0%{ transform:rotate(8deg) scale(1); } 40%{ transform:rotate(0) scale(.85) translateY(6px); } 100%{ transform:rotate(8deg) scale(1); } }
.arco-tinta{ position:absolute; bottom:6px; left:4px; font-size:.75rem; writing-mode:vertical-rl; color:#f3e9d2 !important; }

/* la boletería */
.boleteria-wrap{ position:relative; max-width:560px; margin:30px auto 0; padding-bottom:12px; min-height:300px; }
.boleteria{
  position:relative; width:250px; margin:0 auto; background:var(--madera); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  background-image:repeating-linear-gradient(0deg, transparent 0 9px, rgba(0,0,0,.14) 9px 11px);
  padding:16px 14px 14px; transform:rotate(1deg); z-index:2;
}
.boleteria-techo{ position:absolute; left:-8px; right:-8px; top:-14px; height:18px; background:repeating-linear-gradient(90deg, var(--toldo-a) 0 18px, var(--toldo-b) 18px 36px); border:2px solid var(--ink);
  -webkit-mask:radial-gradient(circle at 9px 100%, transparent 8px, #000 9px) 0 0/18px 100% repeat-x; mask:radial-gradient(circle at 9px 100%, transparent 8px, #000 9px) 0 0/18px 100% repeat-x; }
.boleteria-letrero{ font-family:var(--font-heading); font-size:.7rem; letter-spacing:.2em; color:var(--tiza); margin:4px 0 10px; text-align:center; }
.ventanilla{ position:relative; display:block; width:100%; height:120px; background:none; border:0; padding:0; cursor:pointer; }
.vidrio{
  position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(160deg, rgba(200,225,240,.55), rgba(150,180,205,.35) 60%, rgba(230,240,250,.5));
  border:2px solid var(--ink); box-shadow:inset 0 0 18px rgba(255,255,255,.35); overflow:hidden;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .vidrio{ -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px); } }
.vidrio::before{ content:''; position:absolute; left:-30%; top:-20%; width:60%; height:140%; background:rgba(255,255,255,.18); transform:rotate(20deg); }
.vidrio-corazon{ position:absolute; right:14px; top:8px; font-family:var(--font-letter); font-size:1.6rem; color:rgba(43,33,28,.55); transform:rotate(-12deg); }
.vidrio-frase{ position:absolute; left:10px; bottom:10px; font-family:var(--font-letter); font-size:1.3rem; color:var(--ink); opacity:0; transition:opacity .6s ease; transform:rotate(-3deg); }
.vidrio.frotado .vidrio-frase{ opacity:.85; }
.vidrio.frotado{ background:linear-gradient(160deg, rgba(230,240,250,.25), rgba(150,180,205,.15) 60%, rgba(230,240,250,.2)); }
.ventanilla-campana{ position:absolute; top:-8px; right:-8px; font-size:22px; transform-origin:50% 0; }
.ventanilla.suena .ventanilla-campana{ animation:campana-suena .7s ease; }
@keyframes campana-suena{ 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(-22deg); } 50%{ transform:rotate(18deg); } 80%{ transform:rotate(-8deg); } }
.ventanilla-hint{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-2deg); font-family:var(--font-letter); font-size:1.25rem; color:var(--ink); background:var(--paper); border:1.5px dashed var(--ink); padding:4px 10px; animation:hint-late 1.6s ease-in-out infinite; }
.ventanilla.usada .ventanilla-hint{ display:none; }
@keyframes hint-late{ 0%,100%{ transform:translate(-50%,-50%) rotate(-2deg) scale(1); } 50%{ transform:translate(-50%,-50%) rotate(-2deg) scale(1.05); } }
.impresora{ position:relative; margin:10px -4px 0; height:26px; background:var(--carton); border:2px solid var(--ink); border-radius:4px; }
.impresora-ranura{ position:absolute; left:16px; right:16px; top:10px; height:4px; background:#2b211c; border-radius:2px; }
.impresora.imprime{ animation:impresora-vibra .12s linear infinite; }
@keyframes impresora-vibra{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(1.5px); } }
.boleto{
  position:absolute; left:18px; right:18px; top:12px; background:var(--lavanda-claro); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  font-family:var(--font-mono); font-size:9.5px; line-height:1.45; color:var(--ink); padding:6px 8px 6px 20px; text-align:left; z-index:3;
  clip-path:inset(100% 0 0 0); transition:clip-path .22s linear; transform-origin:top center;
}
.boleto::before{ content:''; position:absolute; left:11px; top:6px; bottom:6px; border-left:1.5px dashed var(--ink); }
.boleto.p1{ clip-path:inset(78% 0 0 0); } .boleto.p2{ clip-path:inset(60% 0 0 0); } .boleto.p3{ clip-path:inset(42% 0 0 0); } .boleto.p4{ clip-path:inset(22% 0 0 0); } .boleto.p5{ clip-path:inset(0 0 0 0); }
.boleto.listo{ clip-path:inset(0 0 0 0); }
.boleto-linea{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.boleto.suelto{ position:fixed; z-index:1950; transition:none; box-shadow:6px 6px 0 var(--ink); }
.boleto-hueco{ position:absolute; right:10px; top:8px; width:16px; height:16px; border-radius:50%; background:var(--paper); border:1.5px solid var(--ink); box-shadow:inset 1px 1px 2px rgba(0,0,0,.25); }
.boleto-hueco[hidden]{ display:none; }
.boleto-honesto{ display:block; margin-top:6px; padding-top:5px; border-top:1px dashed var(--ink); font-family:var(--font-letter); font-size:1.05rem; line-height:1.2; white-space:normal; }
.boleto-honesto[hidden]{ display:none; }
.boleto-honesto .c4-cartel{ font-size:.95rem; padding:4px 8px; transform:none; }
.boleteria-tiza{ font-family:var(--font-letter); font-size:1rem; color:var(--tiza); margin:8px 0 0; text-align:center; opacity:.85; }
.boleteria-chinche{ position:absolute; top:6px; left:6px; color:#d8453f; }
.foca-entrada{
  position:absolute; right:0; bottom:-6px; width:150px; height:150px; object-fit:contain; z-index:3;
  filter:drop-shadow(3px 4px 0 rgba(43,33,28,.35));
  animation:foca-llega 1.2s cubic-bezier(.22,.85,.35,1) both; animation-delay:1.3s;
}
@keyframes foca-llega{ from{ transform:translateX(120px) rotate(6deg); opacity:0; } 60%{ transform:translateX(-8px) rotate(-3deg); opacity:1; } to{ transform:none; opacity:1; } }
.foca-entrada.saluda{ animation:foca-saluda .6s ease; }
@keyframes foca-saluda{ 0%,100%{ transform:rotate(0); } 30%{ transform:rotate(-6deg) translateY(-6px); } 70%{ transform:rotate(4deg); } }
.foca-chapa{ position:absolute; right:24px; bottom:-30px; font-family:var(--font-mono); font-size:9px; background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); padding:2px 6px; transform:rotate(-6deg); z-index:4; margin:0; }
.foca-chapa s{ opacity:.6; }
.boleto-hint{ position:absolute; left:0; right:0; bottom:-40px; margin:0; font-family:var(--font-letter); font-size:1.15rem; color:#ffe08a; text-align:center; }
.boleto-hint[hidden]{ display:none; }
.hero-enter{ margin-top:64px; }
.confetico{ position:fixed; width:10px; height:10px; border-radius:50%; background:var(--lavanda-claro); border:1.5px solid var(--ink); z-index:1949; pointer-events:none; }

/* ================= 2. PREGÓN ================= */
.marquee-wrap{ background:transparent; border:0; padding:6px 0 14px; position:relative; }
.marquee-wrap::before{ content:''; position:absolute; left:0; right:0; top:4px; height:3px; background:#2a1d12; }
.marquee-track{ animation-duration:34s; }
.banderin-txt{
  display:inline-block; margin:0 6px; padding:6px 12px 14px; font-family:var(--font-mono); font-size:13px; color:var(--ink);
  background:var(--b, var(--banderin-2)); border:2px solid var(--ink); border-top:0;
  clip-path:polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); position:relative; top:0;
  transform:rotate(var(--r, 0deg)); transform-origin:top center;
}
.marquee-track.pausado{ animation-play-state:paused; }

/* ================= 3. PLANO ================= */
.reloj-funcion{
  position:relative; display:inline-block; margin:0 auto 22px; left:50%; transform:translateX(-50%) rotate(-1.5deg);
  background:var(--carton); color:var(--ink); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:12px 18px 10px; text-align:center;
  background-image:repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.05) 6px 8px);
}
.reloj-chinche{ position:absolute; top:-8px; left:50%; margin-left:-8px; color:#d8453f; }
.reloj-funcion-label{ display:block; font-family:var(--font-heading); font-size:.62rem; letter-spacing:.14em; }
.reloj-funcion-valor{ display:block; font-family:var(--font-mono); font-size:1.35rem; font-variant-numeric:tabular-nums; margin:4px 0 2px; }
.reloj-funcion-sub{ display:block; font-family:var(--font-letter); font-size:1.05rem; color:var(--ink-soft); }
.plano-poste{ position:relative; margin:0 auto 34px; max-width:600px; padding-top:18px; }
.plano-poste::before{ content:''; position:absolute; left:50%; top:0; width:14px; height:100%; margin-left:-7px; background:var(--madera); border:2px solid var(--ink); background-image:repeating-linear-gradient(0deg, transparent 0 9px, rgba(0,0,0,.14) 9px 11px); }
.plano-hoja{
  position:relative; background:var(--paper-kraft); color:var(--ink); border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
  background-image:repeating-linear-gradient(45deg, transparent 0 5px, rgba(107,79,38,.06) 5px 6px), repeating-linear-gradient(-45deg, transparent 0 9px, rgba(255,255,255,.08) 9px 10px);
  padding:28px 20px 18px; transform:rotate(-1.2deg);
}
.plano-chinche{ position:absolute; }
.plano-chinche.pc1{ top:6px; left:8px; color:#d8453f; } .plano-chinche.pc2{ top:8px; right:10px; color:#2f8f7d; } .plano-chinche.pc3{ bottom:8px; left:12px; color:#f0c04a; } .plano-chinche.pc4{ bottom:6px; right:8px; color:#a68bd8; }
.plano-mancha{ position:absolute; border-radius:44% 56% 62% 38% / 50% 44% 56% 50%; background:radial-gradient(transparent 53%, rgba(107,79,38,.28) 57%, rgba(107,79,38,.12) 62%, transparent 68%); }
.plano-mancha.m1{ top:10%; right:6%; width:70px; height:66px; } .plano-mancha.m2{ bottom:14%; left:34%; width:54px; height:50px; }
.plano-rosa{ position:absolute; top:12px; right:40px; font-family:var(--font-letter); font-size:1.1rem; line-height:1; color:var(--ink-soft); transform:rotate(12deg); text-align:center; }
.plano-tinta{ position:absolute; left:16px; bottom:30px; font-size:.95rem; }
.plano-titulo{ font-family:var(--font-mono); font-size:.82rem; letter-spacing:.1em; margin:0 0 4px; }
.plano-titulo small{ font-family:var(--font-letter); font-size:1rem; letter-spacing:0; color:var(--ink-soft); }
.plano-aqui{ position:absolute; top:52px; left:22px; font-family:var(--font-letter); font-size:1rem; color:var(--toldo-a); transform:rotate(-8deg); }
.plano-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:22px 0 10px; }
.plano-puesto{
  position:relative; display:block; background:var(--paper); color:var(--ink); border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink);
  font-family:var(--font-letter); font-size:1.02rem; line-height:1.1; text-decoration:none; padding:8px 8px 8px 10px; min-height:60px;
  transform:rotate(var(--r, 0deg)); transition:transform .15s;
}
.plano-puesto:nth-child(2n){ --r:1.2deg; } .plano-puesto:nth-child(3n){ --r:-1.4deg; } .plano-puesto:nth-child(5n){ --r:.8deg; }
.plano-puesto:hover{ transform:rotate(var(--r, 0deg)) translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.pp-num{ display:block; font-family:var(--font-mono); font-size:.62rem; color:var(--ink-soft); margin-bottom:2px; }
.plano-tachado{ text-decoration:line-through; opacity:.55; color:var(--ink-soft); }
.plano-lejos{ background:var(--paper-warm); }
.plano-caseta{ overflow:hidden; }
.caseta-persiana{ position:absolute; left:0; right:0; top:0; bottom:0; background:repeating-linear-gradient(0deg, var(--carton) 0 6px, var(--carton-dark) 6px 8px); opacity:.92; }
.plano-caseta .c4-cartel{ position:absolute; left:4px; right:4px; bottom:4px; font-size:.8rem; padding:3px 6px; transform:rotate(-3deg); z-index:2; }
.plano-caseta.abierta .caseta-persiana{ display:none; }
.plano-leyenda{ font-family:var(--font-letter); font-size:1rem; color:var(--ink-soft); margin:0; }
.gato-plano-btn{ position:absolute; background:none; border:0; padding:0; cursor:pointer; color:#3b2f28; z-index:3; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.gato-plano-btn .gato-zzz{ position:absolute; top:-10px; right:-12px; font-family:var(--font-letter); font-size:1rem; color:var(--ink-soft); }
.gato-plano-btn.corrido{ transform:translate(140px,-30px) rotate(20deg); }
.plano-kicker-2{ margin-top:10px; }
.plano-viejos{ font-family:var(--font-letter); font-size:1.1rem; color:#e7dcc9; }
#plano .chapters-row{ margin-bottom:10px; }
.chapter-card{ color:var(--ink); }

/* ================= puestos (genérico) ================= */
.puesto{
  position:relative; background:var(--carton); color:var(--ink); border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
  background-image:repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.05) 6px 8px);
  padding:34px 18px 20px; margin:26px auto 0; max-width:640px;
}
.toldo{
  position:absolute; left:-10px; right:-10px; top:-16px; height:34px; border:2px solid var(--ink);
  background:repeating-linear-gradient(90deg, var(--toldo-a) 0 20px, var(--toldo-b) 20px 40px);
  -webkit-mask:radial-gradient(circle at 10px 100%, transparent 9px, #000 10px) 0 0/20px 100% repeat-x; mask:radial-gradient(circle at 10px 100%, transparent 9px, #000 10px) 0 0/20px 100% repeat-x;
  transform:rotate(-.5deg);
}
.toldo-verde{ background:repeating-linear-gradient(90deg, var(--toldo-c) 0 20px, var(--toldo-b) 20px 40px); }
.toldo-rojo{ background:repeating-linear-gradient(90deg, var(--toldo-a) 0 20px, var(--toldo-b) 20px 40px); }
.toldo-tinta{ position:absolute; left:14px; top:36px; font-size:.9rem; }
.puesto-letrero{ font-family:var(--font-letter); font-size:1.2rem; color:var(--tiza); background:var(--madera); border:2px solid var(--ink); display:inline-block; padding:4px 12px; transform:rotate(-1.5deg); margin:0 0 14px; }
.puesto-hint{ font-family:var(--font-letter); font-size:1.05rem; color:var(--ink-soft); margin:12px 0 0; text-align:center; }
.cartel-tiza{ display:inline-block; font-family:var(--font-letter); font-size:1.1rem; color:var(--tiza); background:#3b2f28; border:2px solid var(--ink); padding:4px 10px; transform:rotate(2deg); margin:14px 0 0; cursor:pointer; }

/* ================= 4. LA FOCA ================= */
.puesto-cuerpo{ display:flex; flex-direction:column; gap:14px; }
.repisa{ position:relative; display:flex; justify-content:space-around; align-items:flex-end; gap:6px; padding:0 6px 10px; border-bottom:8px solid var(--madera); box-shadow:0 8px 0 -2px var(--ink); }
.objeto{ position:relative; background:none; border:0; padding:4px; cursor:grab; display:flex; flex-direction:column; align-items:center; gap:3px; z-index:4; }
.objeto-nombre{ font-family:var(--font-letter); font-size:.95rem; color:var(--ink); }
.objeto-dibujo{ display:block; width:40px; height:40px; }
.obj-picante{ background:#d8453f; border:2px solid var(--ink); border-radius:4px; width:28px; height:40px; margin:0 auto; position:relative; }
.obj-picante::before{ content:'🔥'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:14px; }
.obj-picante::after{ content:''; position:absolute; left:-2px; right:-2px; top:-4px; height:5px; background:var(--ink); }
.obj-gaseosa{ background:#1a1a1a; border:2px solid var(--ink); border-radius:8px 8px 6px 6px; width:20px; height:40px; margin:0 auto; position:relative; }
.obj-gaseosa::before{ content:''; position:absolute; left:4px; top:-7px; width:8px; height:7px; background:#d8453f; border:1.5px solid var(--ink); border-radius:2px 2px 0 0; }
.obj-gaseosa::after{ content:''; position:absolute; left:2px; right:2px; top:14px; height:12px; background:#d8453f; }
.obj-bus{ background:var(--paper-warm); border:2px solid var(--ink); width:40px; height:24px; margin:8px auto 0; position:relative; font-family:var(--font-mono); font-size:7px; line-height:20px; text-align:center; }
.obj-bus::after{ content:'BUS'; }
.obj-gato, .obj-sushi{ color:var(--ink); }
.objeto.usado{ opacity:.55; }
.objeto.arrastrando{ position:fixed; z-index:1960; pointer-events:none; }
.escenario-foca{ position:relative; min-height:230px; }
.tina{ position:absolute; left:8px; bottom:0; width:120px; height:46px; background:var(--carton-dark); border:2px solid var(--ink); border-radius:0 0 12px 12px; }
.tina-agua{ position:absolute; left:4px; right:4px; top:4px; height:14px; background:linear-gradient(90deg, #7fc3e8, #b8e0f7, #7fc3e8); border-radius:4px; opacity:.85; }
.foca-stage{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:180px; height:200px; }
.foca-img{ width:180px; height:180px; object-fit:contain; animation:foca-bob 3.2s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes foca-bob{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-2.5deg) translateY(-3px); } }
.foca-img.equilibrio{ animation:foca-equilibrio .9s ease; }
@keyframes foca-equilibrio{ 0%{ transform:rotate(0); } 25%{ transform:rotate(-8deg); } 50%{ transform:rotate(7deg); } 75%{ transform:rotate(-4deg); } 100%{ transform:rotate(0); } }
.foca-img.corre{ animation:foca-corre 1.6s ease-in-out; }
@keyframes foca-corre{ 0%{ transform:translateX(0); } 40%{ transform:translateX(-120px) rotate(-8deg); } 60%{ transform:translateX(-120px) rotate(8deg); } 100%{ transform:translateX(0); } }
.foca-objeto-nariz{ position:absolute; left:50%; top:24px; transform:translateX(-50%); font-size:22px; animation:objeto-balancea 1.2s ease-in-out infinite; }
.foca-objeto-nariz[hidden]{ display:none; }
@keyframes objeto-balancea{ 0%,100%{ transform:translateX(-50%) rotate(-12deg); } 50%{ transform:translateX(-50%) rotate(12deg); } }
.foca-burbuja{ left:120px; top:-10px; }
.tronco-nutria{ position:absolute; right:0; bottom:0; width:130px; height:150px; }
.tronco-nutria::before{ content:''; position:absolute; left:8px; right:8px; bottom:0; height:34px; background:var(--madera); border:2px solid var(--ink); border-radius:8px; background-image:repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,.14) 7px 9px); }
.nutria-img{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); width:120px; height:98px; object-fit:contain; }
.nutria-img.roja{ animation:nutria-corre 2s ease-in-out; }
@keyframes nutria-corre{ 0%{ transform:translateX(-50%); } 20%{ transform:translateX(-90px) rotate(-10deg); } 40%{ transform:translateX(10px) rotate(10deg); } 60%{ transform:translateX(-80px) rotate(-8deg); } 80%{ transform:translateX(0) rotate(6deg); } 100%{ transform:translateX(-50%); } }
.nutria-humo{ position:absolute; top:6px; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.7); opacity:0; }
.nutria-humo.h1{ left:32px; } .nutria-humo.h2{ right:32px; }
.tronco-nutria.humea .nutria-humo{ animation:humo-sube 1.1s ease-out infinite; }
.tronco-nutria.humea .nutria-humo.h2{ animation-delay:.4s; }
@keyframes humo-sube{ 0%{ opacity:.9; transform:translateY(0) scale(.6); } 100%{ opacity:0; transform:translateY(-40px) scale(1.6); } }
.nutria-burbuja{ right:110px; left:auto; top:-8px; }
.nutria-burbuja::after{ left:auto; right:22px; }
.huella-foca{ position:absolute; color:rgba(43,33,28,.35); }
.huella-foca.hf1{ left:40%; bottom:8px; transform:rotate(20deg); } .huella-foca.hf2{ left:32%; bottom:22px; transform:rotate(-10deg); } .huella-foca.hf3{ left:26%; bottom:4px; transform:rotate(30deg); }
.charco{ position:absolute; bottom:2px; height:10px; border-radius:50%; background:rgba(127,195,232,.45); }
.charco.ch-a{ left:22%; width:40px; } .charco.ch-b{ left:60%; width:28px; }
.balde{ position:absolute; right:14px; bottom:14px; width:44px; height:34px; background:#8a8a8a; border:2px solid var(--ink); border-radius:0 0 8px 8px; font-size:12px; line-height:30px; text-align:center; letter-spacing:-4px; }
.descargar-foca{ display:inline-block; margin:12px 0 0; font-family:var(--font-letter); font-size:1.1rem; color:var(--lavanda-profundo); }
.objeto-flotante{ position:fixed; z-index:1960; pointer-events:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.foca-stage.brilla::after{ content:''; position:absolute; left:20px; right:20px; top:10px; bottom:10px; border:3px dashed var(--bombillo-ambar); border-radius:50%; animation:hint-late 1s ease-in-out infinite; pointer-events:none; }

/* ================= 5. LA CUERDA DE LAS FOTOS ================= */
.cuerdas{ position:relative; padding:10px 0 40px; }
.cuerda{ position:relative; display:flex; justify-content:space-around; align-items:flex-start; gap:8px; padding:18px 14px 10px; margin-bottom:36px; }
.cuerda::before{ content:''; position:absolute; left:0; right:0; top:14px; height:3px; background:var(--cuerda); border-top:1px solid rgba(0,0,0,.35); transform:rotate(-.6deg); }
.cuerda:nth-child(2)::before{ transform:rotate(.8deg); }
.cuerda-nudo{ position:absolute; top:4px; }
.cuerda-nudo.n-izq{ left:-6px; } .cuerda-nudo.n-der{ right:-6px; }
.pinza-foto{
  position:relative; margin:0; width:22%; max-width:150px; background:#fff; padding:6px 6px 22px; border:1px solid rgba(0,0,0,.12);
  box-shadow:3px 4px 0 var(--shadow); transform-origin:50% -10px; transform:rotate(var(--r, 0deg)); cursor:pointer;
  opacity:0; animation:foto-cuelga .9s cubic-bezier(.34,1.56,.64,1) both; animation-play-state:paused;
}
.pinza-foto.in-view{ animation-play-state:running; }
.pinza-foto:nth-child(2){ --r:-3deg; } .pinza-foto:nth-child(3){ --r:2.5deg; } .pinza-foto:nth-child(4){ --r:-1.5deg; } .pinza-foto:nth-child(5){ --r:3deg; }
@keyframes foto-cuelga{ 0%{ opacity:0; transform:rotate(calc(var(--r, 0deg) - 10deg)) translateY(-20px); } 60%{ opacity:1; transform:rotate(calc(var(--r, 0deg) + 4deg)); } 100%{ opacity:1; transform:rotate(var(--r, 0deg)); } }
.pinza-foto img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block; background:#e9dcbd; }
.pinza-foto figcaption{ font-family:var(--font-letter); font-size:.95rem; color:var(--ink); text-align:center; margin-top:4px; line-height:1.1; min-height:1.1em; }
.pinza-foto figcaption .c4-cartel{ font-size:.75rem; padding:2px 5px; transform:none; box-shadow:1px 1px 0 var(--ink); }
.pinza{ position:absolute; top:-16px; left:50%; width:20px; height:32px; margin-left:-10px; z-index:2; }
.pinza-foto:hover{ transform:rotate(var(--r, 0deg)) translateY(-3px); }
.pinza-vacia{ background:none; border:2px dashed rgba(255,248,234,.6); box-shadow:none; cursor:default; padding-bottom:6px; }
.pinza-vacia-etiqueta{ font-family:var(--font-letter); font-size:.95rem; color:#e7dcc9; text-align:center; padding:26px 4px; line-height:1.15; }
.pinza-vacia.completa{ background:#fff; border-style:solid; border-color:rgba(0,0,0,.12); box-shadow:3px 4px 0 var(--shadow); }
.pinza-vacia.completa .pinza-vacia-etiqueta{ display:none; }
.pinza-vacia.zona{ border-color:var(--bombillo-ambar); animation:hint-late 1s ease-in-out infinite; }
.pinza-vacia figcaption{ margin-top:6px; }
.cinnamo-cuerda{ position:absolute; right:12%; top:-52px; width:74px; height:74px; overflow:hidden; z-index:1; }
.cinnamo-cuerda img{ width:74px; height:74px; object-fit:contain; transform:translateY(20px); animation:sway 3.4s ease-in-out infinite; }
.gota{ position:absolute; bottom:8px; width:6px; height:9px; border-radius:50% 50% 60% 60%; background:rgba(127,195,232,.55); }
.gota.g1{ left:8%; } .gota.g2{ left:26%; bottom:14px; } .gota.g3{ left:51%; } .gota.g4{ left:70%; bottom:12px; } .gota.g5{ left:88%; }
.canela-caida{ position:absolute; right:14%; bottom:-6px; font-size:28px; line-height:1; cursor:grab; z-index:5; transform:rotate(20deg); filter:drop-shadow(1px 2px 0 rgba(43,33,28,.4)); }
.canela-caida.arrastrando{ z-index:1960; }
.canela-caida.devuelta{ display:none; }
.cinnamo-cuerda.zona img{ animation:hint-late .8s ease-in-out infinite; }
.cinnamo-cuerda.feliz img{ transform:translateY(0); animation:foca-saluda .6s ease 3; }

.fotomaton{
  position:relative; max-width:300px; margin:30px auto 0; background:var(--madera); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  background-image:repeating-linear-gradient(0deg, transparent 0 9px, rgba(0,0,0,.14) 9px 11px); padding:52px 16px 20px; text-align:center; transform:rotate(-1deg);
}
.fotomaton-techo{ position:absolute; left:-8px; right:-8px; top:-12px; height:40px; background:var(--carton); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; }
.fotomaton-letrero{ font-family:var(--font-display); font-size:1.05rem; color:var(--ink); }
.fotomaton-cortina{ position:absolute; left:12px; top:40px; width:64px; height:96px; background:repeating-linear-gradient(90deg, #d8453f 0 12px, #b8332e 12px 22px); border:2px solid var(--ink); border-radius:0 0 6px 6px; transform-origin:top left; transform:skewY(2deg); }
.fotomaton-cortina::after{ content:''; position:absolute; left:-3px; right:-3px; top:38%; height:8px; background:var(--bombillo-ambar); border:2px solid var(--ink); border-radius:4px; }
.fotomaton-banderin{ position:absolute; right:-10px; top:40px; font-family:var(--font-letter); font-size:.95rem; background:var(--banderin-5); color:var(--ink); border:2px solid var(--ink); padding:2px 8px; transform:rotate(8deg); margin:0; }
.fotomaton-btn{ position:relative; z-index:2; margin-top:96px; }
.tira-ranura{ width:70%; height:6px; background:var(--ink); margin:14px auto 0; border-radius:3px; }
.tira{
  position:relative; width:78px; margin:-4px auto 0; background:#fff; border:1px solid rgba(0,0,0,.2); box-shadow:3px 4px 0 var(--shadow); padding:6px 5px 4px;
  display:flex; flex-direction:column; gap:5px; cursor:grab; z-index:5; animation:tira-sale .9s ease-out both;
}
.tira[hidden]{ display:none; }
@keyframes tira-sale{ from{ clip-path:inset(0 0 100% 0); transform:translateY(-30px); } to{ clip-path:inset(0); transform:none; } }
.tira-marco{ display:flex; align-items:center; justify-content:center; width:100%; height:52px; background:#e9dcbd; border:1px solid rgba(0,0,0,.15); overflow:hidden; color:var(--ink); }
.tira-marco img{ width:48px; height:48px; object-fit:contain; }
.tira-vacio{ font-family:var(--font-letter); font-size:.85rem; color:var(--ink-soft); line-height:1; text-align:center; }
.tira-fecha{ font-family:var(--font-mono); font-size:7.5px; color:var(--ink-soft); text-align:center; }
.tira.arrastrando{ position:relative; z-index:1960; animation:none; }
.tira.colgada{ position:static; margin:0; width:100%; animation:none; cursor:default; box-shadow:none; border:0; padding:0; }
.tira.colgada .tira-marco{ height:40px; }
.tira-hint[hidden]{ display:none; }

/* foto grande */
.foto-grande{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:2200; background:rgba(10,8,6,.82); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .3s; }
.foto-grande[hidden]{ display:none; }
.foto-grande.show{ opacity:1; }
.foto-grande-card{ position:relative; background:#fff; padding:12px 12px 16px; border:1px solid rgba(0,0,0,.15); box-shadow:6px 6px 0 var(--ink); max-width:min(92vw, 460px); transform:rotate(-1.5deg) scale(.92); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.foto-grande.show .foto-grande-card{ transform:rotate(-1.5deg) scale(1); }
.foto-grande-card img{ width:100%; max-height:70vh; object-fit:contain; background:#e9dcbd; }
.foto-grande-tape{ position:absolute; top:-12px; left:50%; width:74px; height:22px; margin-left:-37px; transform:rotate(-4deg); background:repeating-linear-gradient(45deg, rgba(127,195,232,.5) 0 8px, rgba(243,233,210,.85) 8px 16px); border:1px solid rgba(0,0,0,.12); }
.foto-grande-close{ position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%; background:var(--paper); border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); cursor:pointer; font-size:14px; }
.foto-grande-cap{ font-family:var(--font-letter); font-size:1.3rem; color:var(--ink); text-align:center; margin:8px 0 0; }
.foto-grande-nota{ font-family:var(--font-letter); font-size:1.05rem; color:var(--ink-soft); text-align:center; margin:2px 0 0; }
.foto-grande-nota:empty{ display:none; }

.margin-note{ color:#e7dcc9 !important; }
.poste-tiza{ position:absolute; left:4px; top:30px; font-family:var(--font-letter); font-size:.8rem; line-height:1; color:var(--tiza); opacity:.85; transform:rotate(-90deg); transform-origin:left top; white-space:nowrap; }
/* ================= 6. LA VITROLA ================= */
.vitrola-puesto{ position:relative; max-width:640px; margin:26px auto 0; background:var(--carton); border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink); background-image:repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.05) 6px 8px); padding:34px 16px 22px; color:var(--ink); }
.cajon-discos{ position:relative; display:flex; flex-wrap:wrap; gap:4px; background:var(--madera); border:2px solid var(--ink); padding:10px 10px 22px; margin-bottom:20px; }
.lomo{ font-family:var(--font-letter); font-size:1rem; color:var(--ink); background:var(--paper-warm); border:2px solid var(--ink); border-radius:2px; padding:4px 8px; cursor:pointer; transform:rotate(var(--r, 0deg)); transition:transform .15s; }
.lomo:nth-child(2n){ background:#f2a0b5; --r:1deg; } .lomo:nth-child(3n){ background:#7fc3e8; --r:-1deg; } .lomo:nth-child(4n){ background:#f0c04a; }
.lomo:hover{ transform:rotate(var(--r, 0deg)) translateY(-3px); }
.lomo.activo{ background:var(--lavanda-claro); }
.lomo-reves{ background:#3b2f28 !important; color:var(--tiza); }
.lomo-reves .c4-cartel{ font-size:.75rem; padding:1px 4px; transform:none; margin-left:4px; box-shadow:none; }
.cajon-precio{ position:absolute; right:8px; bottom:2px; font-family:var(--font-letter); font-size:.95rem; color:var(--tiza); }
.vitrola-bocina{ position:absolute; right:-6px; top:-30px; width:60px; height:70px; background:#c9a227; border:2px solid var(--ink); clip-path:polygon(40% 100%, 60% 100%, 100% 0, 0 0); background-image:linear-gradient(90deg, rgba(255,255,255,.35), transparent 60%); }
.vinyl-player{ position:relative; color:var(--ink); }
.vinyl-label-blanco{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; background:var(--paper); font-family:var(--font-mono); font-size:9px; color:var(--ink); text-align:center; line-height:1.2; }
.vinyl-label-blanco small{ font-family:var(--font-letter); font-size:11px; }
.vinyl-disc-wrap{ position:relative; }
.aguja{ position:absolute; right:-30px; top:-20px; width:80px; height:60px; cursor:grab; transform-origin:right top; transform:rotate(var(--ang, -30deg)); transition:transform .3s ease; z-index:4; }
.aguja-brazo{ position:absolute; right:0; top:0; width:8px; height:60px; background:#8a8a8a; border:2px solid var(--ink); border-radius:4px; }
.aguja-brazo::after{ content:''; position:absolute; left:-6px; bottom:-6px; width:16px; height:10px; background:#3b2f28; border:2px solid var(--ink); border-radius:2px; }
.aguja-papelito{ position:absolute; right:12px; top:-8px; font-family:var(--font-letter); font-size:.9rem; background:var(--paper); border:1px solid var(--ink); padding:1px 5px; transform:rotate(8deg); }
.aguja.puesta{ --ang:8deg; }
.aguja.puesta .aguja-papelito{ display:none; }
.manivela-wrap{ text-align:center; margin-bottom:8px; }
.manivela{ position:relative; width:110px; height:110px; background:var(--madera); border:2px solid var(--ink); border-radius:50%; padding:0; cursor:grab; display:inline-block; box-shadow:3px 3px 0 var(--ink); background-image:repeating-linear-gradient(0deg, transparent 0 9px, rgba(0,0,0,.14) 9px 11px); }
.manivela-brazo{ position:absolute; left:50%; top:50%; width:44px; height:10px; margin:-5px 0 0 -5px; background:#8a8a8a; border:2px solid var(--ink); border-radius:4px; transform-origin:4px 50%; transform:rotate(var(--ang, 0deg)); }
.manivela-mango{ position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; background:var(--toldo-a); border:2px solid var(--ink); border-radius:50%; transform:rotate(var(--ang, 0deg)) translateX(38px); }
.manivela::before{ content:''; position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; background:var(--carton-dark); border:2px solid var(--ink); border-radius:50%; }
.manivela-hint{ font-family:var(--font-letter); font-size:1.15rem; color:var(--ink); margin:6px 0 0; }
.vitrola-puesto.sin-cancion .lyrics-hint, .vitrola-puesto.sin-cancion .lyrics-hint-arrow, .vitrola-puesto.sin-cancion .paper-crumple{ display:none; }
.vinyl-caption{ font-family:var(--font-letter); font-size:1.15rem; color:var(--ink-soft); max-width:420px; margin:14px auto 0; }
.vinyl-controls[hidden]{ display:none; }
.casete-enredado{ position:absolute; left:10px; bottom:-8px; width:120px; height:20px; background:none; border-bottom:2px solid #3b2f28; border-radius:50%; transform:rotate(-4deg); }
.casete-enredado::before{ content:''; position:absolute; left:20px; top:2px; width:60px; height:16px; border:2px solid #3b2f28; border-radius:50%; transform:rotate(12deg); }
.vitrola-puesto .lyrics-hint, .vitrola-puesto .lyrics-hint-arrow{ color:var(--teal); }
#cancion .section-note{ font-family:var(--font-mono); font-size:.85rem; letter-spacing:.06em; }

/* ================= 7. EL BUZÓN ================= */
.buzon-wrap{ position:relative; max-width:560px; margin:0 auto; }
.buzon{ position:relative; width:170px; height:110px; margin:0 auto 22px; background:#5a7cc7; border:2px solid var(--ink); border-radius:14px 14px 4px 4px; box-shadow:4px 4px 0 var(--ink); background-image:linear-gradient(180deg, rgba(255,255,255,.18), transparent 50%); transform:rotate(-2deg); }
.buzon::after{ content:''; position:absolute; left:50%; bottom:-30px; width:12px; height:30px; margin-left:-6px; background:var(--madera); border:2px solid var(--ink); }
.buzon-ranura{ position:absolute; left:26px; right:26px; top:18px; height:8px; background:var(--ink); border-radius:4px; }
.buzon-calco{ position:absolute; font-family:var(--font-letter); color:var(--tiza); }
.buzon-calco.c1{ left:10px; top:34px; font-size:1.2rem; color:#ffe08a; } .buzon-calco.c2{ right:12px; top:32px; font-size:1.2rem; color:#f2a0b5; }
.buzon-calco.c3{ left:0; right:0; bottom:8px; text-align:center; font-size:1rem; }
.buzon-matasellos{ position:absolute; right:-30px; top:-14px; width:56px; height:56px; border:2px solid var(--ink); border-radius:50%; font-family:var(--font-mono); font-size:8px; color:var(--ink); display:flex; align-items:center; justify-content:center; background:var(--paper); transform:rotate(12deg); }
.buzon-candado{ position:relative; margin:40px auto 0; width:min(320px, 80vw); transform:rotate(-1deg); background:var(--paper); color:var(--ink); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:10px 12px; display:flex; gap:10px; align-items:center; font-family:var(--font-letter); font-size:1.1rem; z-index:3; }
.buzon-candado[hidden]{ display:none; }
.buzon-candado .icon-svg{ width:28px; height:28px; flex:none; }
.estampilla{ position:absolute; top:12px; font-size:22px; padding:4px; background:var(--paper-warm); border:1px dashed var(--ink); }
.estampilla.e1{ right:70px; transform:rotate(6deg); } .estampilla.e2{ right:28px; top:16px; transform:rotate(-8deg); }
.letter-body .c4-cartel{ font-size:1.05rem; }
.clavo-boton{ position:absolute; right:6px; top:-4px; width:70px; text-align:center; }
.clavo-svg{ transform:rotate(-14deg); }
.boton-lavanda{ display:block; width:38px; height:38px; margin:-6px auto 0; border-radius:50%; background:var(--lavanda); border:2px solid var(--ink); box-shadow:0 4px 0 var(--lavanda-profundo), 3px 6px 0 var(--ink); cursor:pointer; transition:transform .08s, box-shadow .08s; }
.boton-lavanda:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--lavanda-profundo), 3px 3px 0 var(--ink); }
.boton-lavanda-tiza{ font-family:var(--font-letter); font-size:.85rem; color:#e7dcc9; margin:6px 0 0; line-height:1; }
#carta .letter-wrap{ margin-top:30px; }

/* ================= 8. LA RIFA ================= */
.rifa{ position:relative; max-width:640px; margin:0 auto; background:var(--carton); color:var(--ink); border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink); background-image:repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.05) 6px 8px); padding:22px 14px 20px; }
.rifa-letrero{ font-family:var(--font-display); font-size:1.4rem; color:var(--tiza); background:var(--madera); border:2px solid var(--ink); display:inline-block; padding:6px 14px; transform:rotate(-1.5deg); margin:0 0 18px; text-shadow:2px 2px 0 var(--ink); }
.rifa-cuerda{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 8px; padding:22px 6px 10px; }
.rifa-cuerda::before{ content:''; position:absolute; left:-6px; right:-6px; top:10px; height:3px; background:var(--cuerda); border-top:1px solid rgba(0,0,0,.35); }
.tiquete{
  position:relative; width:64px; height:82px; background:var(--paper); border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); cursor:pointer;
  font-family:var(--font-mono); display:flex; align-items:center; justify-content:center; transform:rotate(var(--r, 0deg)); transform-origin:50% -8px;
  animation:tiquete-cae .6s cubic-bezier(.34,1.56,.64,1) both; animation-delay:var(--d, 0s);
}
@keyframes tiquete-cae{ from{ opacity:0; transform:translateY(-30px) rotate(calc(var(--r,0deg) - 12deg)); } to{ opacity:1; transform:rotate(var(--r,0deg)); } }
.tiquete::before{ content:''; position:absolute; top:-14px; left:50%; width:2px; height:14px; margin-left:-1px; background:#5a4c3f; }
.tiquete::after{ content:''; position:absolute; left:6px; right:6px; top:8px; border-top:1px dashed var(--ink); }
.tiquete-num{ font-size:1.5rem; }
.tiquete.leida::before{ background:var(--lavanda-profundo); }
.tiquete.leida .tiquete-num{ color:var(--lavanda-profundo); }
.tiquete.leida::after{ content:'●'; border:0; top:auto; bottom:4px; left:auto; right:6px; font-size:8px; color:var(--lavanda); }
.tiquete:hover{ transform:rotate(var(--r, 0deg)) translateY(-3px); }
.rifa-abajo{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:14px; }
.bombo-wrap{ position:relative; text-align:center; }
.bombo{ position:relative; width:150px; height:100px; margin:0 auto; background:var(--carton-dark); border:2px solid var(--ink); border-radius:50% / 60%; box-shadow:4px 4px 0 var(--ink); }
.bombo::after{ content:''; position:absolute; left:50%; bottom:-20px; width:60px; height:22px; margin-left:-30px; background:var(--madera); border:2px solid var(--ink); }
.bombo-boca{ position:absolute; left:50%; top:26px; width:44px; height:30px; margin-left:-22px; background:#2b211c; border-radius:50%; }
.bombo.escupe{ animation:bombo-escupe .5s ease; }
@keyframes bombo-escupe{ 0%{ transform:scale(1); } 30%{ transform:scale(1.06, .9); } 60%{ transform:scale(.96, 1.06); } 100%{ transform:scale(1); } }
.bombo.gira{ animation:bombo-gira .9s ease-in-out; }
@keyframes bombo-gira{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg); } 75%{ transform:rotate(-3deg); } }
.bombo-manivela{ position:absolute; right:-24px; top:30px; width:36px; height:36px; background:none; border:0; padding:0; cursor:pointer; }
.bombo-manivela span{ position:absolute; left:0; top:14px; width:30px; height:8px; background:#8a8a8a; border:2px solid var(--ink); border-radius:4px; transform-origin:4px 50%; transform:rotate(var(--ang, -40deg)); }
.bombo-manivela::before{ content:''; position:absolute; left:-4px; top:12px; width:14px; height:14px; background:var(--carton-dark); border:2px solid var(--ink); border-radius:50%; }
.bombo.zona{ box-shadow:4px 4px 0 var(--ink), 0 0 0 4px var(--bombillo-ambar); }
.rifa-contador{ font-family:var(--font-mono); font-size:.8rem; margin:28px 0 0; }
.campana-laton{ position:absolute; left:-10px; top:-6px; font-size:26px; transform-origin:50% 0; }
.campana-laton.suena{ animation:campana-suena .7s ease; }
.tiquete-14{ background:var(--lavanda-claro); width:78px; height:96px; flex-direction:column; gap:4px; animation:none; opacity:1; --r:3deg; cursor:grab; }
.tiquete-14::before{ display:none; }
.tiquete-14 .tiquete-num{ color:var(--lavanda-profundo); }
.tiquete-sello{ font-family:var(--font-mono); font-size:7px; color:var(--toldo-a); border:1.5px solid var(--toldo-a); padding:2px 3px; text-align:center; line-height:1.2; transform:rotate(-8deg); }
.tiquete-sello small{ font-size:6px; }
.tiquete-14.arrastrando{ z-index:1960; animation:none; }
.tiquete-14.rebota{ animation:tiquete-rebota .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes tiquete-rebota{ 0%{ transform:translate(-160px,-40px) rotate(-30deg); } 100%{ transform:rotate(3deg); } }
.tiquete-abierto{ position:relative; margin:18px auto 0; max-width:420px; background:var(--paper); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:18px 40px 16px 20px; transform:rotate(-1deg); animation:burbuja-in .3s cubic-bezier(.34,1.56,.64,1); }
.tiquete-abierto[hidden]{ display:none; }
.tiquete-abierto::before{ content:''; position:absolute; left:10px; top:8px; bottom:8px; border-left:1.5px dashed var(--ink); }
.tiquete-abierto-num{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--lavanda-profundo); }
.tiquete-abierto-texto{ font-family:var(--font-letter); font-size:1.4rem; line-height:1.3; margin:4px 0 0; }
.tiquete-abierto-texto .c4-cartel{ font-size:1.05rem; }
.tiquete-abierto-cerrar{ position:absolute; top:6px; right:8px; background:none; border:0; font-size:16px; cursor:pointer; color:var(--ink-soft); }
.confeti-pisado{ position:absolute; left:20px; bottom:8px; width:120px; height:14px; background:radial-gradient(circle, #f2a0b5 2px, transparent 2.5px) 0 0/12px 8px, radial-gradient(circle, #7fc3e8 2px, transparent 2.5px) 6px 4px/12px 8px, radial-gradient(circle, #f0c04a 1.5px, transparent 2px) 3px 2px/9px 7px; opacity:.8; }

/* ================= 9. LA NOTARÍA ================= */
.notaria{ position:relative; max-width:640px; margin:0 auto; color:var(--ink); }
.notaria-mesa{ position:relative; background:var(--madera); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background-image:repeating-linear-gradient(90deg, transparent 0 46px, rgba(0,0,0,.1) 46px 48px); height:110px; margin-bottom:-2px; }
.maquina-escribir{ position:absolute; left:20px; top:-30px; width:110px; height:60px; background:var(--carton-dark); border:2px solid var(--ink); border-radius:8px 8px 4px 4px; }
.maquina-escribir span{ position:absolute; bottom:10px; width:10px; height:10px; border-radius:50%; background:var(--paper); border:1.5px solid var(--ink); }
.maquina-escribir span:nth-child(1){ left:16px; } .maquina-escribir span:nth-child(2){ left:34px; } .maquina-escribir span:nth-child(3){ left:52px; }
.maquina-escribir::before{ content:''; position:absolute; left:10px; right:10px; top:-14px; height:16px; background:var(--paper); border:1.5px solid var(--ink); }
.almohadilla{ position:absolute; right:110px; top:26px; width:44px; height:22px; background:#5a4c3f; border:2px solid var(--ink); border-radius:3px; }
.sellos-caucho{ position:absolute; right:14px; top:14px; display:flex; flex-direction:column; gap:4px; }
.sellos-caucho span{ font-family:var(--font-mono); font-size:7px; background:var(--carton); border:1.5px solid var(--ink); padding:2px 5px; transform:rotate(var(--r,-3deg)); }
.sellos-caucho span:nth-child(2){ --r:2deg; } .sellos-caucho span:nth-child(3){ --r:-1deg; }
.notaria-horario{ position:absolute; left:150px; top:20px; font-family:var(--font-letter); font-size:.95rem; color:var(--tiza); margin:0; transform:rotate(-3deg); }
.carpeta-archivo{ position:absolute; left:150px; bottom:8px; font-family:var(--font-mono); font-size:8px; line-height:1.3; background:var(--paper-kraft); border:1.5px solid var(--ink); padding:4px 8px; transform:rotate(2deg); }
.rollo{ display:block; margin:24px auto 0; width:min(420px, 92%); background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:18px; box-shadow:4px 4px 0 var(--ink); padding:14px 20px; cursor:pointer; position:relative; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em;
  background-image:repeating-linear-gradient(90deg, transparent 0 40px, rgba(0,0,0,.05) 40px 42px); }
.rollo::before, .rollo::after{ content:''; position:absolute; top:-4px; bottom:-4px; width:14px; background:var(--paper-warm); border:2px solid var(--ink); border-radius:8px; }
.rollo::before{ left:-8px; } .rollo::after{ right:-8px; }
.rollo-cinta{ position:absolute; left:50%; top:-8px; width:60px; height:16px; margin-left:-30px; background:var(--toldo-a); border:1.5px solid var(--ink); }
.rollo[hidden]{ display:none; }
.folio{ position:relative; background:#fffdf6; color:var(--ink); border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink); margin:24px auto 0; padding:22px 22px 20px; font-family:var(--font-mono); font-size:11.5px; line-height:1.5;
  background-image:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.025) 2px 3px); animation:folio-desenrolla .9s ease-out both; }
.folio[hidden]{ display:none; }
@keyframes folio-desenrolla{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0); } }
.folio::before{ content:''; position:absolute; top:6px; right:6px; bottom:6px; left:6px; border:1px solid var(--ink); pointer-events:none; }
.folio-cabecera{ text-align:center; border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:12px; position:relative; }
.folio-escudo{ position:absolute; left:0; top:0; color:var(--gold); }
.folio-rep{ font-family:var(--font-heading); font-size:.85rem; letter-spacing:.06em; margin:0; }
.folio-num{ position:absolute; right:0; top:0; font-size:10px; margin:0; }
.folio-oficina{ font-size:8.5px; letter-spacing:.08em; margin:2px 0 0; color:var(--ink-soft); }
.folio-titulo{ font-family:var(--font-mono); font-size:12px; text-align:center; margin:0 0 12px; letter-spacing:.04em; }
.folio-p{ margin:0 0 10px; }
.folio-estado{ display:block; margin-top:2px; padding-left:16px; color:var(--ink-soft); }
.folio-testigos{ margin-top:14px; }
.folio-huellas svg{ vertical-align:middle; color:var(--ink-soft); margin-left:2px; }
.folio-huella-mojada, .folio-tiquete{ color:var(--ink-soft); font-style:italic; }
.folio-firmas{ display:flex; gap:20px; justify-content:space-between; margin-top:20px; }
.folio-firma{ flex:1; text-align:center; position:relative; }
.firma-img{ height:56px; width:auto; margin:0 auto 2px; object-fit:contain; }
.firma-el{ opacity:.95; }
.firma-zona{ position:relative; height:70px; margin:0 auto 2px; background:var(--paper); border:1px dashed rgba(43,33,28,.35); touch-action:none; cursor:crosshair; -webkit-user-select:none; user-select:none; }
.firma-svg{ position:absolute; top:0; left:0; width:100%; height:100%; }
.firma-ella{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:60px; }
.firma-ella[hidden]{ display:none; }
.firma-hint{ position:absolute; left:0; right:0; bottom:2px; font-family:var(--font-letter); font-size:.95rem; color:var(--ink-soft); pointer-events:none; }
.firma-zona.firmada .firma-hint{ display:none; }
.folio-linea{ display:block; border-top:1.5px solid var(--ink); margin:0 10px 4px; }
.folio-nombre{ display:block; font-size:9.5px; }
.folio-rol{ display:block; font-size:8px; letter-spacing:.12em; color:var(--ink-soft); }
.folio-sellos{ position:relative; height:70px; margin-top:6px; }
.sello-caido{ position:absolute; font-family:var(--font-heading); font-size:11px; color:var(--toldo-a); border:3px double var(--toldo-a); padding:4px 8px; text-align:center; line-height:1.15; transform:scale(2.4) rotate(-14deg); opacity:0; }
.sello-caido.s1{ left:6%; top:8px; } .sello-caido.s2{ left:38%; top:14px; color:var(--toldo-c); border-color:var(--toldo-c); } .sello-caido.s3{ right:4%; top:2px; color:var(--lavanda-profundo); border-color:var(--lavanda-profundo); }
.sello-caido.s4{ left:50%; top:10px; transform:translateX(-50%) scale(1) rotate(-6deg); opacity:1; color:var(--ink-soft); border-color:var(--ink-soft); }
.folio.firmado .sello-caido.s4{ display:none; }
.folio.firmado .sello-caido.s1{ animation:stamp-hit .55s cubic-bezier(.24,.9,.32,1.2) forwards; animation-delay:.1s; }
.folio.firmado .sello-caido.s2{ animation:stamp-hit .55s cubic-bezier(.24,.9,.32,1.2) forwards; animation-delay:.22s; }
.folio.firmado .sello-caido.s3{ animation:stamp-hit .55s cubic-bezier(.24,.9,.32,1.2) forwards; animation-delay:.34s; }
.folio-botones{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:10px; }
.retro-btn-ghost{ background:var(--paper); color:var(--ink); }
.retro-btn-negar{ background:#3b2f28; }
.folio-nota-negado{ font-family:var(--font-letter); font-size:1.3rem; color:var(--lavanda-profundo); text-align:center; margin:14px 0 0; }
.folio-nota-negado[hidden]{ display:none; }
body.negado{ background-image:linear-gradient(180deg, #0f1226 0%, #161a34 100%) !important; }
body.negado .bombillo .bombillo-halo, body.negado .arco-guirnalda span{ opacity:0 !important; box-shadow:none !important; }
body.negado .bombillo .bombillo-cuerpo{ fill:var(--bombillo-off) !important; }
body.negado #luz-respira{ opacity:0; }
.foca-enserio{ position:fixed; left:50%; bottom:20%; transform:translateX(-50%); z-index:2300; text-align:center; animation:burbuja-in .4s cubic-bezier(.34,1.56,.64,1); }
.foca-enserio img{ width:150px; height:150px; object-fit:contain; }
.foca-enserio p{ font-family:var(--font-letter); font-size:1.5rem; color:var(--ink); background:var(--carton); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:6px 14px; display:inline-block; transform:rotate(-3deg); margin:0; }

/* ================= 10. EL TABLÓN ================= */
.tablon{ position:relative; max-width:600px; margin:0 auto; background:#c9a877; background-image:radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.2px); background-size:14px 14px; border:10px solid #8a6a44; box-shadow:inset 0 0 40px rgba(0,0,0,.25), 5px 5px 0 var(--ink); padding:26px 18px 22px; display:grid; grid-template-columns:repeat(2, 1fr); gap:18px 14px; }
.tablon .letter-note{ max-width:none; width:auto; margin:0; padding:22px 16px 14px; transform:rotate(var(--r, 0deg)); box-shadow:3px 4px 0 var(--shadow); }
.tablon .letter-note p{ font-size:1.1rem; margin-bottom:8px; }
.tablon .letter-note .letter-sign{ font-size:1.15rem; margin:0; }
.tablon-chinche{ position:absolute; top:-6px; left:50%; margin-left:-8px; filter:drop-shadow(1px 1px 0 rgba(0,0,0,.3)); }
.tablon-recibo{ background:var(--paper-warm); }
.recibo{ font-family:var(--font-mono); font-size:9.5px; line-height:1.45; white-space:pre; margin:0; color:var(--ink); overflow-x:auto; }
.tablon-sebusca{ background:#fff3dd; text-align:center; }
.tablon-lapiz{ background:var(--lavanda-claro); }
.lapiz-atado{ position:absolute; right:10px; bottom:8px; font-size:22px; transform:rotate(-30deg); }
.lapiz-atado::before{ content:''; position:absolute; right:-6px; top:-10px; width:2px; height:20px; background:#5a4c3f; transform:rotate(30deg); }
.tablon-lapiz-texto{ font-size:1.05rem; }

/* ================= 11. EL INTERRUPTOR ================= */
.breakers{ position:relative; width:220px; margin:10px auto 26px; }
.breakers-caja{ position:relative; background:var(--madera); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background-image:repeating-linear-gradient(0deg, transparent 0 9px, rgba(0,0,0,.14) 9px 11px); height:150px; }
.breakers-etiqueta{ position:absolute; left:50%; top:8px; transform:translateX(-50%) rotate(-2deg); font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); padding:2px 8px; }
.palanca{ position:absolute; left:50%; top:34px; width:60px; height:100px; margin-left:-30px; background:none; border:0; padding:0; cursor:pointer; }
.palanca-brazo{ position:absolute; left:50%; top:50%; width:12px; height:50px; margin-left:-6px; background:#8a8a8a; border:2px solid var(--ink); border-radius:6px; transform-origin:50% 100%; transform:rotate(0deg); transition:transform .35s cubic-bezier(.34,1.3,.4,1); }
.palanca-mango{ position:absolute; left:50%; top:50%; width:26px; height:26px; margin:-56px 0 0 -13px; background:var(--toldo-a); border:2px solid var(--ink); border-radius:50%; transform-origin:13px 56px; transform:rotate(0deg); transition:transform .35s cubic-bezier(.34,1.3,.4,1); }
.palanca::before{ content:''; position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; background:var(--carton-dark); border:2px solid var(--ink); border-radius:50%; }
.palanca[aria-pressed="true"] .palanca-brazo{ transform:rotate(180deg); }
.palanca[aria-pressed="true"] .palanca-mango{ transform:rotate(180deg); }
.breakers-on, .breakers-off{ position:absolute; left:50%; font-family:var(--font-mono); font-size:9px; color:var(--tiza); transform:translateX(-50%); }
.breakers-on{ top:22px; } .breakers-off{ bottom:10px; }
.breakers-tinta{ position:absolute; right:8px; bottom:8px; font-size:.85rem; max-width:90px; line-height:1.1; }
.breakers-cables{ position:absolute; left:-30px; top:20px; width:30px; height:60px; border-left:3px solid #2a1d12; border-bottom:3px solid #2a1d12; border-radius:0 0 0 20px; }
.breakers-tiza{ font-family:var(--font-letter); font-size:1.05rem; color:#e7dcc9; margin:8px 0 0; text-align:center; }
.cierre-cosas{ position:relative; height:44px; max-width:420px; margin:0 auto 10px; }
.silla{ position:absolute; bottom:0; width:22px; height:30px; border:2px solid var(--carton); border-top-width:8px; border-radius:2px; opacity:.7; }
.silla:nth-child(1){ left:10%; transform:rotate(-8deg); } .silla:nth-child(2){ left:16%; bottom:6px; transform:rotate(4deg); } .silla:nth-child(3){ left:22%; bottom:12px; transform:rotate(-3deg); }
.escoba{ position:absolute; right:12%; bottom:-4px; font-size:34px; transform:rotate(-20deg); }
.monton{ position:absolute; right:30%; bottom:0; width:60px; height:16px; border-radius:50% 50% 0 0; background:radial-gradient(circle, #f2a0b5 2px, transparent 2.5px) 0 0/10px 8px, radial-gradient(circle, #7fc3e8 2px, transparent 2.5px) 5px 4px/10px 8px, #7d6141; border:2px solid var(--ink); border-bottom:0; }
.creditos{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:2400; background:rgba(8,7,14,.96); color:var(--tiza); overflow:hidden; opacity:0; transition:opacity .6s ease; }
.creditos[hidden]{ display:none; }
.creditos.show{ opacity:1; }
.creditos-scroll{ position:absolute; left:50%; top:100%; transform:translateX(-50%); width:min(560px, 92vw); font-family:var(--font-mono); font-size:13px; line-height:1.7; animation:creditos-suben 34s linear forwards; text-align:left; }
@keyframes creditos-suben{ from{ top:100%; } to{ top:-120%; } }
.creditos-scroll p{ display:flex; align-items:baseline; gap:6px; margin:0 0 6px; white-space:nowrap; }
.creditos-puntos{ flex:1; border-bottom:1px dotted rgba(244,239,228,.5); min-width:20px; transform:translateY(-4px); }
.creditos-titulo{ font-family:var(--font-heading); font-size:.9rem; letter-spacing:.1em; justify-content:center; margin-bottom:22px !important; color:var(--bombillo-ambar); }
.creditos-prota{ margin-top:26px !important; font-size:15px; }
.creditos-nikol{ font-family:var(--font-display); font-size:1.8rem; color:var(--lavanda); background:none; border:0; padding:0 4px; cursor:pointer; text-shadow:0 0 12px rgba(166,139,216,.6); animation:hint-late 1.4s ease-in-out infinite; }
.creditos-fin{ justify-content:center; margin-top:40px !important; font-family:var(--font-letter); font-size:1.4rem; }
.creditos-saltar{ position:absolute; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); font-family:var(--font-heading); font-size:.7rem; color:var(--ink); background:var(--bombillo-ambar); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:10px 16px; cursor:pointer; white-space:nowrap; }

/* ================= FOOTER: serpentina, rescate ================= */
.serpentina-wrap{ position:relative; margin:10px auto 0; max-width:420px; min-height:60px; }
.serpentina{ position:relative; display:inline-block; width:44px; height:44px; cursor:grab; }
.serpentina-rollo{ position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; background:repeating-radial-gradient(circle, var(--banderin-5) 0 3px, #f7d7e0 3px 6px); border:2px solid var(--ink); transform:rotate(15deg); }
.serpentina-cola{ position:absolute; left:40px; top:16px; height:8px; width:var(--w, 0px); background:repeating-linear-gradient(90deg, var(--banderin-5) 0 14px, #f7d7e0 14px 28px); border:2px solid var(--ink); border-left:0; max-width:calc(100vw - 120px); transition:width .1s linear; }
.serpentina.abierta .serpentina-rollo{ width:14px; height:14px; top:13px; }
.serpentina-texto{ font-family:var(--font-letter); font-size:1.3rem; color:var(--tiza); background:var(--ink); border:2px solid var(--tiza); padding:12px 16px; margin:12px auto 0; max-width:420px; transform:rotate(-1deg); text-align:left; white-space:pre-line; }
.serpentina-texto[hidden]{ display:none; }
.serpentina-texto .c4-cartel{ font-size:1rem; }
.linterna-rescate{ display:block; margin:10px auto 0; }
.reabrir-carta{ display:block; margin:14px auto 0; font-family:var(--font-letter); font-size:1.15rem; color:var(--tiza); background:none; border:1.5px dashed rgba(244,239,228,.6); padding:6px 12px; cursor:pointer; }
.reabrir-carta[hidden]{ display:none; }
#footer .cinnamon-egg{ bottom:auto; top:10px; }
.footer-sign .c4-cartel{ font-size:1rem; }

/* overlay de logro: la foca en escena grande */
.ach-mascot{ object-fit:contain; }

/* ================= responsive ================= */
@media (max-width:640px){
  .hero{ padding-top:126px; }
  .arco{ grid-template-columns:28px 1fr 28px; }
  .arco-poste{ height:120px; }
  .plano-grid{ grid-template-columns:repeat(3, 1fr); gap:8px; }
  .plano-hoja{ padding:26px 12px 16px; }
  .boleteria{ width:230px; }
  .foca-entrada{ width:120px; height:120px; right:-6px; }
  .repisa{ gap:2px; padding:0 2px 10px; }
  .objeto-nombre{ font-size:.85rem; }
  .escenario-foca{ min-height:210px; }
  .foca-stage{ width:150px; height:170px; }
  .foca-img{ width:150px; height:150px; }
  .tronco-nutria{ width:100px; height:130px; }
  .nutria-img{ width:96px; height:78px; }
  .tina{ width:80px; }
  .cuerda{ gap:4px; padding:18px 6px 10px; }
  .pinza-foto{ width:23%; padding:4px 4px 18px; }
  .pinza-foto figcaption{ font-size:.82rem; }
  .cinnamo-cuerda{ top:-44px; width:60px; height:60px; }
  .cinnamo-cuerda img{ width:60px; height:60px; }
  .tablon{ grid-template-columns:1fr; padding:22px 12px 18px; }
  .rifa-abajo{ flex-direction:column; align-items:center; gap:26px; }
  .bombo-manivela{ right:-18px; }
  .folio{ padding:18px 12px 16px; font-size:10.5px; }
  .folio-firmas{ flex-direction:column; gap:14px; }
  .creditos-scroll{ font-size:11.5px; }
  .creditos-scroll p{ white-space:normal; }
  .buzon-matasellos{ right:-18px; }
  .vitrola-bocina{ right:0; }
  .aguja{ right:-14px; }
}
@media (max-width:400px){
  .plano-grid{ grid-template-columns:repeat(2, 1fr); }
  .pinza-foto{ width:30%; }
  .cuerda{ flex-wrap:wrap; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .bombillo .bombillo-halo, .banderin-tira svg, .foca-img, .pinza-foto, .tiquete, .arco, .foca-entrada, .creditos-scroll, .ventanilla-hint, .cinnamo-cuerda img{ animation:none !important; opacity:1; transform:none; }
  .polilla{ display:block; }
}
html.c4-degradado .bombillo .bombillo-halo{ animation:none; }
.bombillo.brilla .bombillo-halo{ opacity:.95 !important; }
.plano-puesto.sacude{ animation:caseta-sacude .4s ease; }
@keyframes caseta-sacude{ 0%,100%{ transform:rotate(var(--r,0deg)); } 25%{ transform:rotate(calc(var(--r,0deg) - 3deg)) translateX(-3px); } 75%{ transform:rotate(calc(var(--r,0deg) + 3deg)) translateX(3px); } }
.aguja-papelito.salta{ animation:papelito-salta .5s ease; }
@keyframes papelito-salta{ 0%,100%{ transform:rotate(8deg); } 50%{ transform:rotate(-4deg) translateY(-6px); } }
.fotomaton-cortina.sacude{ animation:cortina-sacude .6s ease; }
@keyframes cortina-sacude{ 0%,100%{ transform:skewY(2deg); } 30%{ transform:skewY(-3deg) translateX(4px); } 60%{ transform:skewY(3deg) translateX(-3px); } }
.firma-zona.brilla{ border-color:var(--bombillo-ambar); box-shadow:0 0 0 3px rgba(255,206,92,.5); }
.tronco-nutria.brilla::after{ content:''; position:absolute; left:6px; right:6px; top:20px; bottom:0; border:3px dashed var(--toldo-a); border-radius:12px; pointer-events:none; animation:hint-late 1s ease-in-out infinite; }
html.c4-degradado .polilla:nth-child(n+3){ display:none; }

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