/* ============ TOKENS ============ */
:root{
  --paper:#f3e9d2;
  --paper-dark:#e9dcbd;
  --ink:#2b211c;
  --burgundy:#7a1f2b;
  --burgundy-light:#a5384a;
  --pink:#e75480;
  --teal:#1f6f78;
  --gold:#d6a419;
  --shadow: rgba(43,33,28,.25);

  --font-display: 'Rubik Bubbles', cursive;
  --font-heading: 'Bungee', cursive;
  --font-body: 'Quicksand', sans-serif;
  --font-letter: 'Caveat', cursive;
  --font-mono: 'Space Mono', monospace;
}

/* ============ TEMAS DEL CAPÍTULO III (se desbloquean, ver .theme-swatch) ============ */
html[data-site-theme="oceano"]{
  --paper:#eef5f7; --paper-dark:#dfeef2; --ink:#152733;
  --burgundy:#1f4e78; --burgundy-light:#3a6f9e; --pink:#e75480;
  --teal:#0f6e8c; --gold:#3aa7c4; --shadow:rgba(21,39,51,.25);
}
html[data-site-theme="bosque"]{
  --paper:#f2f5ea; --paper-dark:#e5ecd6; --ink:#20301f;
  --burgundy:#2f5233; --burgundy-light:#4f7a52; --pink:#c96a4d;
  --teal:#3a6b4a; --gold:#8ba888; --shadow:rgba(32,48,31,.25);
}
html[data-site-theme="lavanda"]{
  --paper:#f5eefa; --paper-dark:#e9defa; --ink:#2c1f3d;
  --burgundy:#5b3a8e; --burgundy-light:#7c5cb0; --pink:#e75480;
  --teal:#8a5fb5; --gold:#c39bd3; --shadow:rgba(44,31,61,.25);
}
html[data-site-theme="atardecer"]{
  --paper:#fbeee0; --paper-dark:#f5ddc4; --ink:#3a1f12;
  --burgundy:#a1330f; --burgundy-light:#c85428; --pink:#f2a541;
  --teal:#7a4419; --gold:#f2a541; --shadow:rgba(58,31,18,.25);
}

/* ---- tema secreto: lo desbloquea el Cinnamoroll escondido, ver #cinnamo-egg ---- */
html[data-site-theme="cinnamoroll"]{
  --paper:#eef8fc; --paper-dark:#dcf0f8; --ink:#2c4a56;
  --burgundy:#4bb8dc; --burgundy-light:#7fd1e8; --pink:#ffb6d9;
  --teal:#3aa0c9; --gold:#bfe9f5; --shadow:rgba(44,74,86,.22);
}
/* las estrellitas y decoraciones se vuelven nubes y corazones azules */
html[data-site-theme="cinnamoroll"] .sticker,
html[data-site-theme="cinnamoroll"] .deco{ visibility:hidden; }
html[data-site-theme="cinnamoroll"] .sticker::after,
html[data-site-theme="cinnamoroll"] .deco::after{
  content:'☁️'; visibility:visible; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
html[data-site-theme="cinnamoroll"] .sticker.s2::after,
html[data-site-theme="cinnamoroll"] .sticker.s5::after,
html[data-site-theme="cinnamoroll"] .deco-1::after{ content:'💙'; }
html[data-site-theme="cinnamoroll"] .sticker.s8::after,
html[data-site-theme="cinnamoroll"] .sticker.s9::after{ content:'🌀'; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.5;
  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%A4%8D</text></svg>") 12 12, auto;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

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

/* ============ SPARKLE LAYER ============ */
#sparkle-layer{ position:fixed; inset:0; pointer-events:none; z-index:9999; }
.spark{
  position:absolute; font-size:16px; will-change:transform,opacity;
  animation: spark-out .8s ease-out forwards;
}
@keyframes spark-out{
  0%{ transform:translate(0,0) scale(1) rotate(0deg); opacity:1; }
  100%{ transform:translate(var(--dx),var(--dy)) scale(.3) rotate(90deg); opacity:0; }
}
.confetti-piece{
  position:fixed; top:-40px; 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), 100vh) rotate(var(--cr,360deg)); opacity:.85; }
}

/* ============ LOVE WIDGET (draggable) ============ */
#love-widget{
  position:fixed; top:90px; right:20px; width:230px;
  background:var(--paper); border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  z-index:500; font-family:var(--font-body);
  user-select:none;
  transform-origin:top right;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
#love-widget.dragging{ transition:none; }
#love-widget-bar{
  background:linear-gradient(90deg,var(--burgundy),var(--pink));
  color:#fff; padding:6px 8px; display:flex; justify-content:space-between; align-items:center;
  cursor:grab; font-weight:700; font-size:13px;
}
#love-widget-bar:active{ cursor:grabbing; }
.lw-btns{ display:flex; gap:5px; }
.lw-btn{
  background:var(--paper); color:var(--ink); width:16px; height:16px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; border:1px solid var(--ink); cursor:pointer; line-height:1;
}
#love-widget-body{ padding:10px 12px 14px; text-align:center; }
.lw-status{ margin:0 0 6px; font-size:13px; font-weight:600; }
.blink-dot{ color:#2ecc71; animation:blink 1.2s infinite; }
@keyframes blink{ 50%{ opacity:.2; } }
.lw-label{ margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.05em; opacity:.75; }
.lcd{
  font-family:var(--font-mono); font-weight:700;
  background:#1c2b1f; padding:6px 0; margin:4px 0;
  display:flex; justify-content:center; align-items:center; gap:3px;
}
.flip-digit{
  position:relative; width:28px; height:40px; font-size:32px;
  perspective:220px;
}
.flip-card{ position:absolute; inset:0; transform-style:preserve-3d; }
.flip-digit.flipping .flip-card{
  animation:flip-rotate .5s cubic-bezier(.4,.1,.3,1) forwards;
}
@keyframes flip-rotate{
  from{ transform:rotateX(0deg); }
  to{ transform:rotateX(-180deg); }
}
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#16221a; color:#7cff8e; border-radius:2px;
  text-shadow:0 0 6px #7cff8e88;
}
.flip-face-front{ transform:rotateX(0deg); }
.flip-face-back{ transform:rotateX(180deg); }
.flip-digit::after{
  content:''; position:absolute; left:2px; right:2px; top:50%; height:1px;
  background:#0009; z-index:2; pointer-events:none;
}
.lw-sub{ margin:0; font-size:11px; font-family:var(--font-mono); opacity:.8; }
#love-widget.dragging{ opacity:.85; }
#love-widget.hidden{ transform: scale(0); opacity:0; pointer-events:none; }
#love-widget.lw-minimized #love-widget-body{ display:none; }
#love-widget.lw-minimized #love-widget-bar{ cursor:default; }

/* ============ HERO ============ */
#hero{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, #ffffff33, transparent 40%),
    radial-gradient(circle at 80% 80%, #00000011, transparent 40%),
    var(--paper);
}
.paper-texture{
  position:absolute; inset:0; opacity:.5; pointer-events:none; will-change:transform;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, #00000006 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 2px, #00000004 2px 3px);
}
.badge-corner{
  position:absolute; top:14px; left:14px; z-index:3;
  background:var(--gold); color:var(--ink); font-family:var(--font-mono);
  font-size:11px; padding:5px 9px; border:2px solid var(--ink);
  transform:rotate(-4deg); box-shadow:3px 3px 0 var(--ink);
  cursor:pointer; transition:transform .15s;
}
.badge-corner:hover{ transform:rotate(-4deg) scale(1.06); }
.badge-corner:active{ transform:rotate(-2deg) scale(.97); }
.hero-content{ position:relative; z-index:2; padding:0 20px; }
.eyebrow{
  font-family:var(--font-mono); letter-spacing:.15em; text-transform:uppercase;
  font-size:13px; color:var(--teal); margin:0 0 10px;
}
.hero-title{
  font-family:var(--font-heading); font-size:clamp(2.2rem,7vw,4.5rem);
  color:var(--burgundy); margin:0; text-shadow:3px 3px 0 var(--gold);
  line-height:1.15;
}
.heart-pulse{ display:inline-block; color:var(--pink); animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.25); } }
.hero-sub{
  font-family:var(--font-letter); font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--ink); margin:8px 0 26px;
}
.retro-button{
  display:inline-block; background:var(--pink); color:#fff; text-decoration:none;
  font-family:var(--font-heading); font-size:14px; padding:14px 28px;
  border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  transition:transform .15s, box-shadow .15s;
}
.retro-button:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.retro-button:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

.tape{ position:absolute; width:90px; height:30px; background:#f3e9d2cc; border:1px solid #0002; box-shadow:0 2px 4px #0002; }
.tape-tl{ top:26px; left:50%; transform:translate(calc(-160px + var(--px,0px)), var(--py,0px)) rotate(-8deg); }
.tape-br{ bottom:26px; right:50%; transform:translate(calc(160px + var(--px,0px)), var(--py,0px)) rotate(6deg); }

.floating-stickers{ position:absolute; inset:0; z-index:1; will-change:transform; }
.sticker{ position:absolute; font-size:2rem; color:var(--gold); animation:float 6s ease-in-out infinite; opacity:.85; }
.sticker.s1{ top:12%; left:10%; color:var(--pink); animation-delay:0s; }
.sticker.s2{ top:20%; right:12%; color:var(--burgundy); animation-delay:.8s; font-size:2.6rem; }
.sticker.s3{ bottom:22%; left:16%; animation-delay:1.6s; }
.sticker.s4{ top:60%; right:8%; color:var(--teal); animation-delay:2.4s; }
.sticker.s5{ bottom:14%; right:24%; color:var(--pink); animation-delay:1.2s; }
.sticker.s6{ top:40%; left:6%; animation-delay:2s; font-size:1.6rem; }
.sticker.s7{ bottom:40%; right:40%; color:var(--burgundy); animation-delay:.4s; font-size:1.6rem; }
.sticker.s8{ top:8%; right:30%; animation-delay:1.8s; font-size:1.8rem; }
.sticker.s9{ bottom:10%; left:32%; animation-delay:1s; font-size:1.6rem; }
.sticker.s10{ top:14%; right:9%; animation-delay:2.2s; font-size:1.8rem; }
.otter-egg{ cursor:pointer; }
.otter-egg .otter-inner{ display:inline-block; }
.otter-egg .otter-inner.boop{ animation:otter-boop .5s 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); }
}

/* ---- amigo escondido: Cinnamoroll ---- */
.cinnamo-egg{
  position:absolute; right:4%; bottom:6%; width:56px; height:56px; padding:0;
  border:none; background:none; cursor:pointer; opacity:.5; z-index:2;
  animation: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; }
html[data-site-theme="cinnamoroll"] .cinnamo-egg{ opacity:.95; }
@keyframes float{
  0%,100%{ transform:translateY(var(--py,0px)) rotate(0deg); }
  50%{ transform:translateY(calc(var(--py,0px) - 22px)) rotate(12deg); }
}

/* frases sueltas, como notitas escritas al margen del hero */
.phrase{
  position:absolute; font-family:var(--font-letter); font-weight:600;
  opacity:.55; white-space:nowrap; animation:float 8s ease-in-out infinite;
  pointer-events:none;
}
.phrase.ph1{ top:32%; left:5%; font-size:1.15rem; color:var(--burgundy); transform:rotate(-6deg); animation-delay:.6s; }
.phrase.ph2{ top:16%; right:6%; font-size:1rem; color:var(--teal); transform:rotate(4deg); animation-delay:1.4s; }
.phrase.ph3{ bottom:20%; left:9%; font-size:1.3rem; color:var(--gold); transform:rotate(-3deg); animation-delay:2.2s; }
.phrase.ph4{ bottom:32%; right:13%; font-size:1.1rem; color:var(--burgundy); transform:rotate(5deg); animation-delay:.2s; }

/* ============ MARQUEE ============ */
.marquee-wrap{
  background:var(--ink); color:var(--paper); 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%); } }

/* ============ NOTAS AL MARGEN (manuscritas) ============ */
.margin-note{
  font-family:var(--font-letter); font-size:1.3rem; color:var(--teal);
  text-align:center; margin:22px auto 0; max-width:420px; opacity:.9;
  transform:rotate(-2deg);
}
.margin-note-r{ color:var(--burgundy); transform:rotate(2deg); }
.margin-note-l{ transform:rotate(-2deg); }
#letter-note{
  position:relative; transform:translateY(var(--rise,0px)) rotate(-2deg);
  transition:transform .8s cubic-bezier(.5,-.3,.6,1.4);
}

/* ============ CORRECCIÓN TACHADA EN LA CARTA ============ */
.scratch{ text-decoration:line-through; text-decoration-thickness:2px; color:var(--burgundy); opacity:.5; }
.fix{
  font-family:var(--font-letter); color:var(--burgundy); font-size:1.05em;
  margin-left:6px; display:inline-block; transform:rotate(-3deg);
}

/* ============ INSIGNIAS ============ */
.badges-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:36px 22px; max-width:960px; margin:0 auto; padding-top:6px; }
.badge-medal{
  display:flex; flex-direction:column; align-items:center; width:150px;
  transform:rotate(var(--r,0deg)); transition:transform .25s ease;
}
.badge-medal:nth-child(odd){ --r:-2deg; }
.badge-medal:nth-child(even){ --r:2deg; }
.badge-medal:hover{ transform:rotate(0deg) scale(1.05); }
.badge-disc{
  position:relative; width:92px; height:92px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 34% 28%, #fff6da, var(--gold) 55%, #a37711 100%);
  border:3px solid var(--ink);
  box-shadow:
    0 3px 0 var(--ink),
    inset 0 -8px 12px rgba(43,33,28,.3),
    inset 0 5px 8px rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
}
.badge-disc::before{
  content:''; position:absolute; inset:8px; border-radius:50%;
  border:2px dashed rgba(43,33,28,.4);
  pointer-events:none;
}
.badge-disc::after{
  content:'★'; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-size:14px; color:var(--gold); text-shadow:0 1px 0 var(--ink);
}
.badge-disc-icon{ font-size:2.05rem; filter:drop-shadow(1px 2px 0 rgba(43,33,28,.3)); }
.badge-banner{
  position:relative; z-index:1; width:128px; margin-top:-15px;
  background:linear-gradient(160deg, var(--burgundy), var(--burgundy-light));
  color:#fff8ea; font-family:var(--font-body); font-weight:700; font-size:.72rem; line-height:1.28;
  padding:19px 11px 13px; text-align:center;
  clip-path:polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  box-shadow:2px 3px 0 var(--shadow);
}

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

/* ============ DECORACIONES DE SECCIÓN ============ */
.deco-host{ position:relative; overflow:hidden; }
.deco{ position:absolute; color:var(--gold); opacity:.5; font-size:1.6rem; animation:float 7s ease-in-out infinite; pointer-events:none; will-change:transform; }
.deco-1{ top:8%; left:5%; color:var(--pink); }
.deco-2{ top:70%; right:6%; font-size:1.3rem; animation-delay:1.4s; }
.deco-3{ bottom:6%; left:10%; color:var(--teal); font-size:1.2rem; animation-delay:2.6s; }

/* ============ CORAZONES AMBIENTALES (sitio completo) ============ */
#ambient-layer{ position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.ambient-heart{ position:absolute; bottom:-40px; opacity:0; animation:ambient-rise linear forwards; }
@keyframes ambient-rise{
  0%{ transform:translateY(0) rotate(0deg); opacity:0; }
  10%{ opacity:.5; }
  90%{ opacity:.4; }
  100%{ transform:translateY(-110vh) rotate(25deg); opacity:0; }
}

.ambient-firefly{
  position:absolute; bottom:-10px; border-radius:50%; opacity:0;
  background:var(--gold,#d6a419);
  box-shadow:0 0 8px 3px rgba(214,164,25,.7);
  animation:ambient-firefly-float linear forwards, ambient-firefly-glow ease-in-out infinite;
}
@keyframes ambient-firefly-float{
  0%{ transform:translate(0,0); opacity:0; }
  8%{ opacity:1; }
  50%{ transform:translate(var(--fx,20px), -35vh); }
  92%{ opacity:.8; }
  100%{ transform:translate(calc(var(--fx,20px) * -1), -75vh); opacity:0; }
}
@keyframes ambient-firefly-glow{
  0%,100%{ opacity:.35; transform:scale(.8); }
  50%{ opacity:1; transform:scale(1.15); }
}

.ambient-tulip{
  position:absolute; bottom:-40px; opacity:0; transform-origin:bottom center;
  animation:ambient-rise linear forwards, ambient-tulip-sway ease-in-out infinite;
}
@keyframes ambient-tulip-sway{
  0%,100%{ margin-left:calc(var(--sway,15px) * -1); }
  50%{ margin-left:var(--sway,15px); }
}

/* ===== Intro: lluvia de ventanitas al darle ENTRAR ===== */
.intro-overlay{
  position:fixed; inset:0; z-index:3000; pointer-events:none; display:none;
  overflow:hidden;
}
.intro-popup{
  position:absolute; width:clamp(120px,30vw,175px);
  background:var(--paper); border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink); font-family:var(--font-body);
  opacity:0; transform:scale(.2) rotate(var(--r,0deg));
  animation:intro-pop-in .5s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:var(--d,0s);
}
.intro-popup-bar{
  background:linear-gradient(90deg,var(--burgundy),var(--pink)); color:#fff;
  padding:5px 8px; font-weight:700; font-size:11px;
  display:flex; justify-content:space-between; align-items:center; gap:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.intro-popup-dots{ display:flex; gap:4px; flex-shrink:0; }
.intro-popup-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.85); display:inline-block; }
.intro-popup-body{
  padding:16px 12px; font-weight:700; font-size:15px; color:var(--burgundy);
  line-height:1.3; text-align:center;
}
@keyframes intro-pop-in{
  0%{ opacity:0; transform:scale(.2) rotate(var(--r,0deg)); }
  60%{ opacity:1; transform:scale(1.08) rotate(var(--r,0deg)); }
  100%{ opacity:1; transform:scale(1) rotate(var(--r,0deg)); }
}

.intro-popups-clip{ position:absolute; inset:0; }
.intro-popups-clip.sweeping{
  animation:intro-sweep-clip var(--sweep-dur,3.6s) cubic-bezier(.65,.02,.55,1) forwards;
}
@keyframes intro-sweep-clip{
  from{ clip-path:inset(0 0 0 0); }
  to{ clip-path:inset(0 0 0 100%); }
}

.intro-broom{
  position:absolute; top:50%; left:-22vw;
  width:clamp(70px,13vw,110px); height:auto;
  transform:translateY(-50%) rotate(-10deg) scaleX(-1);
  z-index:2; filter:drop-shadow(3px 4px 0 var(--shadow));
  animation:intro-broom-move var(--sweep-dur,3.6s) cubic-bezier(.65,.02,.55,1) forwards;
}
@keyframes intro-broom-move{
  from{ left:-22vw; }
  to{ left:110vw; }
}

.intro-smoke{
  position:absolute; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px;
  border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle,
    rgba(255,255,255,.95) 0%, rgba(240,232,218,.75) 35%,
    rgba(240,232,218,.35) 60%, rgba(240,232,218,0) 78%);
  filter:blur(3px);
  animation:intro-smoke-rise 1.9s ease-out forwards;
}
@keyframes intro-smoke-rise{
  0%{ opacity:0; transform:translate(0,0) scale(.35) rotate(0deg); }
  12%{ opacity:.8; }
  100%{ opacity:0; transform:translate(var(--dx,12px),var(--dy,-60px)) scale(2.4) rotate(var(--dr,25deg)); }
}

/* ===== Easter egg: cinnamon roll escondido + modo canela ===== */
.cinnamon-egg{
  position:absolute; right:14px; bottom:10px; font-size:20px; opacity:.22;
  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); } }

body.cinnamon-mode{
  filter:sepia(.4) saturate(1.05) brightness(1.02);
  transition:filter 1.4s ease;
}

.ambient-roll{
  position:absolute; top:-40px; opacity:0;
  animation:ambient-roll-fall linear forwards, ambient-roll-spin linear infinite;
}
@keyframes ambient-roll-fall{
  0%{ transform:translateY(0); opacity:0; }
  10%{ opacity:.9; }
  90%{ opacity:.8; }
  100%{ transform:translateY(112vh); opacity:0; }
}
@keyframes ambient-roll-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* ============ SECTIONS ============ */
.section{ padding:90px 20px; max-width:1100px; margin:0 auto; position:relative; }
.section-alt{ background:var(--paper-dark); max-width:100%; }
.section-alt > *{ max-width:1100px; margin-left:auto; margin-right:auto; }
.section-title{ text-align:center; margin:0 auto 6px; max-width:1100px; }
.title-tag{
  font-family:var(--font-heading); font-size:clamp(1.4rem,4vw,2.2rem); color:var(--burgundy);
  background:linear-gradient(transparent 60%, var(--gold) 60%); padding:0 6px;
}
.section-kicker{ text-align:center; font-family:var(--font-letter); font-size:1.4rem; color:var(--teal); margin:0 auto 50px; max-width:1100px; }

.reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ============ CAPÍTULOS (mes actual / próximo capítulo) ============ */
.chapters-row{ display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }
.chapter-card{
  position:relative; width:260px; text-align:center; background:#fff8ea;
  border:2px solid var(--ink); box-shadow:4px 4px 0 var(--shadow); padding:26px 24px 22px;
  font-family:var(--font-body); color:var(--ink);
}
.chapter-current{ border-color:var(--pink); background:linear-gradient(120deg,#fff0f5,#fff8ea); }
.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,#fff8ea,#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); }
.icon-svg{ width:1em; height:1em; display:inline-block; vertical-align:-0.15em; }
.icon-inline{ width:.85em; height:.85em; display:inline-block; vertical-align:-0.1em; }
.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:pulse 1.4s ease-in-out infinite; }
.chapter-roman{
  display:block; font-family:var(--font-heading); font-size:2.2rem; color:var(--burgundy);
  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:1rem; margin:0 0 8px; color:var(--burgundy); }
.chapter-card p{ margin:0; font-size:.88rem; line-height:1.35; }

/* ---- modal (parallax + retro, a juego con el hero) ---- */
.chapter-modal{
  position:fixed; inset:0; background:#000000cc; display:none;
  align-items:center; justify-content:center; z-index:2100; padding:20px;
  perspective:1000px;
}
.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; transform-style:preserve-3d; will-change:transform;
  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; will-change:transform;
  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; will-change:transform; }
.chapter-modal-deco span{
  position:absolute; color:var(--gold); opacity:.55; font-size:1.4rem;
  animation:float 6s ease-in-out infinite;
}
.chapter-modal-deco .cmd-1{ top:10%; left:8%; color:var(--pink); }
.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; will-change:transform;
}
.chapter-modal-tape-tl{ top:-8px; left:26px; transform:translate(var(--px,0px), var(--py,0px)) rotate(-8deg); }
.chapter-modal-tape-br{ bottom:-8px; right:26px; transform:translate(var(--px,0px), var(--py,0px)) rotate(6deg); }
.chapter-modal-body{ position:relative; z-index:2; padding:36px 28px 30px; text-align:center; }
.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.15rem; color:var(--burgundy); margin:8px 0; }
.chapter-modal-lock{ font-size:3rem; display:inline-block; color:var(--burgundy); 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.6rem; min-width:46px;
  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.15rem; color:var(--teal); margin-top:4px; }
.chapter-modal-burst{ font-size:2.1rem; 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; }
}
.theme-swatches{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.theme-swatch{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; color:var(--ink);
  border:2px solid var(--ink); cursor:pointer; padding:9px 7px 7px; background:#fff;
  box-shadow:3px 3px 0 var(--shadow); display:flex; flex-direction:column; align-items:center;
  gap:6px; transition:transform .15s, box-shadow .15s;
}
.theme-swatch:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--shadow); }
.theme-swatch::before{
  content:''; display:block; width:36px; height:18px; border-radius:3px;
  background:linear-gradient(90deg,var(--sw1),var(--sw2),var(--sw3)); border:1px solid #0003;
}
.theme-swatch.active{ outline:3px solid var(--gold); outline-offset:2px; }

/* ============ TIMELINE ============ */
.timeline{ position:relative; padding-left:30px; border-left:3px dashed var(--burgundy); display:flex; flex-direction:column; gap:40px; }
.timeline-item{ position:relative; padding-left:24px; }
.tl-dot{ position:absolute; left:-42px; top:4px; width:16px; height:16px; border-radius:50%; background:var(--gold); border:3px solid var(--paper); box-shadow:0 0 0 2px var(--burgundy); }
.tl-dot-big{ width:20px; height:20px; left:-44px; background:var(--pink); }
.tl-dot-live{ background:#2ecc71; animation:blink 1.2s infinite; }
.tl-card{ background:#fff8ea; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--shadow); padding:16px 20px; }
.tl-card-dashed{ border-style:dashed; background:transparent; opacity:.85; }
.tl-card-highlight{ background:linear-gradient(120deg,#fff0f5,#fff8ea); border-color:var(--pink); }
.tl-page{
  float:right; font-family:var(--font-mono); font-size:10px; color:var(--paper);
  background:var(--burgundy); padding:2px 7px; border-radius:3px; letter-spacing:.05em;
}
.tl-date{ font-family:var(--font-mono); font-size:12px; color:var(--teal); text-transform:uppercase; letter-spacing:.05em; }
.tl-card h3{ font-family:var(--font-heading); font-size:1.1rem; color:var(--burgundy); margin:6px 0; }
.tl-card p{ margin:0; }

/* ============ ALBUM / CORKBOARD ============ */
.corkboard{
  position:relative; overflow:hidden;
  background:
    radial-gradient(#0000000d 1px, transparent 1.2px) 0 0/14px 14px,
    #c9a877;
  border:10px solid #8a6a44; box-shadow: inset 0 0 40px #0004;
  padding:50px 30px; display:flex; flex-wrap:wrap; gap:34px; justify-content:center;
}

/* --- un tablero con historia: manchas, agujeritos, cinta suelta, una notita --- */
.corkboard-stain{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  mix-blend-mode:multiply; opacity:.55;
}
.stain-1{
  top:16px; left:22px; width:110px; height:80px;
  background:radial-gradient(circle, transparent 56%, #6b4a23aa 60%, transparent 68%);
  transform:rotate(-8deg);
}
.stain-2{
  bottom:20px; right:34px; width:70px; height:70px;
  background:radial-gradient(ellipse at 40% 40%, #4a2f12aa, transparent 70%);
}
.stain-3{
  top:46%; left:8px; width:46px; height:60px;
  background:radial-gradient(circle, transparent 50%, #6b4a2388 55%, transparent 65%);
  transform:rotate(12deg);
}
.corkboard-ghost{
  position:absolute; z-index:0; pointer-events:none;
  top:24px; right:70px; width:130px; height:160px;
  background:#00000008; border:1px dashed #00000022;
  transform:rotate(-3deg);
}
.corkboard-pinhole{
  position:absolute; z-index:0; pointer-events:none; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #00000090, #00000050 70%, transparent 100%);
  box-shadow:0 1px 0 #ffffff22;
}
.ph-1{ top:26px; right:120px; }
.ph-2{ bottom:60px; left:60px; }
.ph-3{ top:44%; right:16px; }
.ph-4{ bottom:24px; left:190px; }
.corkboard-scratch{
  position:absolute; z-index:0; pointer-events:none;
  top:34%; left:40%; width:90px; height:30px;
  border-top:1.5px solid #00000022; border-radius:50%;
  transform:rotate(-16deg);
}
.corkboard-tape-scrap{
  position:absolute; z-index:2; pointer-events:none;
  top:14px; right:16px; width:60px; height:20px;
  background:#f3e9d2b3; border:1px solid #0002; box-shadow:0 2px 4px #0003;
  transform:rotate(11deg);
}
.corkboard-note{
  position:absolute; z-index:2; pointer-events:none;
  bottom:22px; left:20px; width:132px; padding:14px 12px 18px;
  background:#fff6a8; box-shadow:2px 5px 9px #00000038; transform:rotate(4deg);
  font-family:var(--font-letter); font-size:1.05rem; line-height:1.2; color:#4a3d0e; text-align:center;
}
.corkboard-note::before{
  content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:44px; height:16px; background:#d6a41999; border:1px solid #0002;
}
.pin-photo{ margin:0; position:relative; z-index:1; background:#fff; padding:10px 10px 36px; box-shadow:0 8px 16px #00000033; transition:transform .25s ease, box-shadow .25s ease; width:230px; }
.pin-photo:hover{ transform:translateY(-6px) scale(1.03) rotate(0deg) !important; box-shadow:0 16px 26px #00000044; z-index:5; cursor:zoom-in; }
.pin-photo img{ width:100%; display:block; }
.pin-photo figcaption{ font-family:var(--font-letter); font-size:1.15rem; text-align:center; color:var(--ink); padding-top:8px; }
.strip-photo{ width:280px; }
.polaroid.rot-l{ transform:rotate(-4deg); }
.polaroid.rot-r{ transform:rotate(3deg); }
.polaroid.small{ width:190px; }
.polaroid.faded img{ filter:sepia(.35) contrast(.95); }
.pin{ position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #ff8a8a, var(--pink)); box-shadow:0 3px 4px #0006; }
.washi{ position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg); width:70px; height:22px; background:#d6a41999; border:1px solid #0002; }

/* --- corkboard: fotos "pegándose" a la pared, escalonado --- */
.corkboard-photo{ --rot:0deg; opacity:0; }
.corkboard-photo.rot-l{ --rot:-4deg; }
.corkboard-photo.rot-r{ --rot:3deg; }
.corkboard-photo .pin,
.corkboard-photo .washi{ opacity:0; }
.corkboard-photo.pinning{
  animation: pin-drop 2.4s cubic-bezier(.22,.85,.35,1) forwards;
  animation-delay: var(--stagger, 0ms);
}
.corkboard-photo.pinning .pin{
  animation: pin-stick .5s ease-out forwards;
  animation-delay: calc(var(--stagger, 0ms) + 1.8s);
}
.corkboard-photo.pinning .washi{
  animation: washi-stick .5s ease-out forwards;
  animation-delay: calc(var(--stagger, 0ms) + 1.8s);
}
@keyframes pin-drop{
  0%{ opacity:0; transform:translateY(-48px) rotate(calc(var(--rot) - 12deg)) scale(.9); }
  55%{ opacity:1; transform:translateY(7px) rotate(calc(var(--rot) + 3deg)) scale(1.02); }
  78%{ transform:translateY(-3px) rotate(var(--rot)) scale(.99); }
  100%{ opacity:1; transform:translateY(0) rotate(var(--rot)) scale(1); }
}
@keyframes pin-stick{
  0%{ opacity:0; transform:translateX(-50%) scale(2.2) rotate(-30deg); }
  55%{ opacity:1; transform:translateX(-50%) scale(.8) rotate(10deg); }
  100%{ opacity:1; transform:translateX(-50%) scale(1) rotate(0deg); }
}
@keyframes washi-stick{
  0%{ opacity:0; transform:translateX(-50%) rotate(-3deg) scale(1.9) translateY(-16px); }
  55%{ opacity:1; transform:translateX(-50%) rotate(-3deg) scale(.88); }
  100%{ opacity:1; transform:translateX(-50%) rotate(-3deg) scale(1); }
}

/* ============ VIDEO ============ */
.vhs-frame{ max-width:420px; margin:0 auto; background:#111; border:6px solid #222; border-radius:8px; box-shadow:8px 8px 0 var(--shadow); overflow:hidden; }
.vhs-topbar, .vhs-bottombar{ color:#7cff8e; font-family:var(--font-mono); font-size:12px; padding:8px 12px; background:#000; display:flex; justify-content:space-between; }
.vhs-bottombar{ justify-content:center; letter-spacing:.05em; }
#love-video{ width:100%; display:block; background:#000; }
.video-caption{ text-align:center; font-family:var(--font-letter); font-size:1.3rem; color:var(--teal); margin-top:22px; }

/* ============ CANCIÓN / VINILO ============ */
.vinyl-player{ display:flex; flex-direction:column; align-items:center; gap:28px; width:100%; max-width:640px; 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{
  width:220px; height:220px; 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:92px; height:92px; 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; }
.lyrics-line.active{ opacity:1; transform:scale(1.04); }
.lyrics-line.active .lyrics-es{ color:var(--burgundy); }
.lyrics-en{ margin:0; font-family:var(--font-body); font-weight:600; font-size:.85rem; color:var(--ink); }
.lyrics-es{ margin:2px 0 0; font-family:var(--font-letter); font-size:1.05rem; color:var(--teal); }
.lyrics-empty{ margin:0; font-family:var(--font-letter); font-size:1.1rem; color:var(--teal); opacity:.75; padding:0 10px; }
.vinyl-controls{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.small-button{ font-size:12px; padding:10px 20px; }
.ghost-button{ background:transparent; color:var(--burgundy); box-shadow:4px 4px 0 var(--ink); }
.ghost-button:hover{ background:var(--paper-dark); }

.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(--pink); 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(--pink); border:2px solid var(--ink); cursor:pointer;
}
.volume-row input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--pink); border:2px solid var(--ink); cursor:pointer;
}
.song-note{ font-family:var(--font-mono); font-size:11px; color:var(--teal); text-align:center; max-width:360px; opacity:.85; margin-top:6px; }
.song-note code{ background:#00000012; padding:1px 4px; border-radius:3px; }

/* ============ CARTA ============ */
.letter-wrap{ max-width:640px; margin:0 auto; position:relative; }

.envelope{
  position:absolute; top:0; left:0; width:100%; height:230px; 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(--burgundy); 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:640px; margin:0 auto; background:#fffdf6; border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--shadow); padding:40px 36px; position:relative; overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  max-height:230px;
  transition:opacity .5s ease .05s, transform .5s 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); pointer-events:auto; max-height:2400px; }
.letter-stamp{ position:absolute; top:-22px; right:26px; font-size:2.4rem; transform:rotate(12deg); cursor:pointer; z-index:2; }
.letter-stamp.stamp-pulse{ animation:stamp-pulse .6s ease; }
@keyframes stamp-pulse{
  0%{ transform:rotate(12deg) scale(1); }
  40%{ transform:rotate(-8deg) scale(1.3); }
  100%{ transform:rotate(12deg) scale(1); }
}
.letter-ribbon{
  position:absolute; top:-2px; left:36px; background:var(--pink); 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.55rem; 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(--burgundy); margin-top:10px; position:relative; z-index:1; }

.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; }

/* ============ RAZONES: notitas de colores con hueco y clavito, mal pegadas ============ */
.reasons-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:36px 26px; }
.reason-card{
  --note:#fff8ea; --r:0deg; --jx:0px; --jy:0px;
  background:var(--note);
  border:1px solid #00000014;
  box-shadow:3px 6px 0 #00000022, 3px 6px 14px #00000022;
  padding:32px 18px 20px; font-family:var(--font-letter); font-size:1.35rem; font-weight:600;
  position:relative; border-radius:2px; opacity:0;
  transform:translate(var(--jx),var(--jy)) rotate(var(--r));
  transition:transform .4s cubic-bezier(.25,.8,.35,1), box-shadow .2s ease;
}
.reason-card.pinning{
  animation:note-drop 1.3s cubic-bezier(.22,.85,.35,1) forwards;
  animation-delay:var(--stagger,0ms);
}
/* estado final ya asentado: fija visualmente lo que dejó la animación,
   para poder apagarla (animation:none) sin que la nota vuelva a opacity:0 */
.reason-card.settled{
  opacity:1; animation:none;
  transform:translate(var(--jx),var(--jy)) rotate(var(--r));
}
@keyframes note-drop{
  0%{ opacity:0; transform:translate(var(--jx),calc(var(--jy) - 46px)) rotate(calc(var(--r) - 16deg)) scale(.86); }
  55%{ opacity:1; transform:translate(var(--jx),calc(var(--jy) + 6px)) rotate(calc(var(--r) + 5deg)) scale(1.03); }
  78%{ transform:translate(var(--jx),calc(var(--jy) - 2px)) rotate(var(--r)) scale(.99); }
  100%{ opacity:1; transform:translate(var(--jx),var(--jy)) rotate(var(--r)) scale(1); }
}
.reason-card.pinning:hover{
  transform:translate(0,-4px) rotate(0deg) scale(1.06);
  box-shadow:5px 10px 0 #00000022, 5px 12px 18px #00000030; z-index:3;
}
/* el hueco, como el de las notitas que se cuelgan de un clavo */
.reason-card::before{
  content:''; position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%; background:var(--paper);
  box-shadow:0 0 0 3px #00000014, inset 0 2px 3px #00000055;
  z-index:1;
}
/* el clavito, clavado un instante después de que la notita se asienta */
.reason-card::after{
  content:''; position:absolute; top:8px; left:50%; z-index:2;
  width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e2e2e2, #6b6b6b 65%, #2c2c2c 100%);
  box-shadow:0 1px 2px #0008;
  opacity:0; transform:translateX(-50%) scale(2.6) translateY(-12px);
}
.reason-card.pinning::after{
  animation:nail-drive .35s ease-out forwards;
  animation-delay:calc(var(--stagger,0ms) + 1s);
}
@keyframes nail-drive{
  0%{ opacity:0; transform:translateX(-50%) scale(2.6) translateY(-12px); }
  60%{ opacity:1; transform:translateX(-50%) scale(.8) translateY(1px); }
  100%{ opacity:1; transform:translateX(-50%) scale(1) translateY(0); }
}
.reason-card:nth-child(6n+1){ --note:#ffd9e6; }
.reason-card:nth-child(6n+2){ --note:#d9f3e2; }
.reason-card:nth-child(6n+3){ --note:#fff2bf; }
.reason-card:nth-child(6n+4){ --note:#d8ecf8; }
.reason-card:nth-child(6n+5){ --note:#ecdcf7; }
.reason-card:nth-child(6n+6){ --note:#ffe2ce; }
.reason-editable{ opacity:.75; border-style:dashed; }

.reason-card{ cursor:pointer; }
.reason-text{ display:block; }
.reason-sign{
  display:block; text-align:right; font-size:.8em; margin-top:10px;
  color:var(--burgundy); opacity:.75;
}

/* notitas que se apartan cuando otra está en foco */
.reason-card.pushed-away{
  transition:transform .45s cubic-bezier(.22,.85,.35,1), opacity .45s ease, filter .45s ease;
  transform:translate(calc(var(--jx) + var(--pushx,0px)), calc(var(--jy) + var(--pushy,0px))) rotate(var(--r));
  opacity:.35; filter:blur(1px) saturate(.7);
}
.reason-card.is-source-hidden{ opacity:0 !important; pointer-events:none; }

/* telón de fondo detrás de la nota en foco */
.notes-backdrop{
  position:fixed; inset:0; background:#2b211ce6; z-index:2000;
  opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.notes-backdrop.show{ opacity:1; pointer-events:auto; }

/* el clon gigante de la nota en foco */
.note-clone{
  position:fixed; z-index:2001; cursor:zoom-out;
  box-shadow:8px 14px 0 #00000030, 8px 20px 40px #00000055 !important;
}
.note-clone::before{ width:22px; height:22px; top:16px; }
.note-clone::after{ width:13px; height:13px; top:12px; }
.note-clone .reason-text{ font-size:1.15em; }

/* el clavito que hace caer todas las notitas y las devuelve a la normalidad */
.notes-reset-nail{
  display:none; position:fixed; left:50%; bottom:34px; transform:translateX(-50%);
  z-index:2002; width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e8e8e8, #6b6b6b 65%, #2c2c2c 100%);
  border:2px solid var(--ink); box-shadow:0 6px 0 #00000055, 0 10px 18px #00000055;
  font-size:22px; align-items:center; justify-content:center; cursor:pointer;
}
.notes-reset-nail.show{ display:flex; animation:nail-pop .3s ease-out; }
.notes-reset-nail:active{ transform:translateX(-50%) translateY(4px); box-shadow:0 2px 0 #00000055, 0 4px 10px #00000055; }
@keyframes nail-pop{
  0%{ transform:translateX(-50%) scale(0); }
  70%{ transform:translateX(-50%) scale(1.15); }
  100%{ transform:translateX(-50%) scale(1); }
}

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

/* ============ LIGHTBOX ============ */
.lightbox{ position:fixed; inset:0; background:#000000e6; display:none; align-items:center; justify-content:center; z-index:2000; padding:30px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(90vw,900px); max-height:85vh; box-shadow:0 0 40px #000; }
#lightbox-close{ position:absolute; top:20px; right:30px; color:#fff; font-size:28px; cursor:pointer; }

/* ============ RESPONSIVE (afinado para iPhone) ============ */
@media (max-width:640px){
  body{ font-size:16px; }

  /* el hero usa svh para no pelear con la barra de Safari que aparece/desaparece */
  #hero{ min-height:100vh; min-height:100svh; padding-top:env(safe-area-inset-top); }

  /* las cintas decorativas estaban calculadas para pantallas anchas y en iPhone
     terminaban cayendo justo encima del badge de arriba a la izquierda */
  .tape{ display:none; }

  .lyrics-widget.open{ width:220px; height:190px; }

  /* frases sueltas: en pantallas chicas el hero ya está lleno, y menos texto flotando = menos costo */
  .phrase{ display:none; }

  .chapters-row{ gap:16px; }
  .chapter-card{ width:100%; max-width:320px; padding:22px 20px 18px; }
  .chapter-countdown{ gap:6px; }
  .cc-block span{ font-size:1.3rem; min-width:38px; padding:5px 3px; }
  .cinnamo-egg{ width:44px; height:44px; right:6%; bottom:2%; }

  .badge-corner{
    top:calc(10px + env(safe-area-inset-top)); left:10px; right:10px;
    max-width:calc(100% - 20px);
    font-size:9.5px; line-height:1.35; padding:6px 10px;
    white-space:normal; transform:rotate(-2deg);
  }

  .hero-content{ padding-top:56px; }

  /* widget: en escritorio es una ventanita arrastrable; en iPhone se vuelve
     una pastilla chiquita que no tapa el botón ENTRAR, y se abre al tocarla */
  #love-widget{
    width:auto; min-width:0; top:auto; left:auto !important;
    bottom:calc(14px + env(safe-area-inset-bottom)); right:14px;
    border-radius:999px; box-shadow:3px 3px 0 var(--ink); overflow:hidden;
    transition:border-radius .2s ease;
  }
  #love-widget-bar{ padding:10px 16px; cursor:pointer; }
  #love-widget-title{ font-size:12px; }
  .lw-btns{ display:none; }
  #love-widget-body{ display:none; padding:12px 16px 16px; }
  #love-widget.lw-open{ border-radius:18px; }
  #love-widget.lw-open #love-widget-body{ display:block; }
  .flip-digit{ width:22px; height:32px; font-size:26px; }

  .marquee-track{ animation-duration:18s; }
  .marquee-wrap{ font-size:12px; padding:8px 0; }

  .section{ padding:56px 18px; }
  .section-kicker{ margin-bottom:34px; font-size:1.2rem; }

  .timeline{ padding-left:20px; }
  .tl-dot{ left:-32px; }
  .tl-dot-big{ left:-34px; }
  .tl-card{ padding:14px 16px; }

  .corkboard{ padding:30px 14px; gap:24px; }
  .pin-photo{ width:100%; max-width:260px; }
  .corkboard-ghost, .corkboard-scratch{ display:none; }
  .corkboard-note{ width:112px; font-size:.92rem; padding:11px 9px 15px; }
  .corkboard-tape-scrap{ width:48px; height:16px; }

  .letter{ padding:30px 22px; }
  .letter-body{ font-size:1.35rem; }

  .stat-strip{ gap:12px; }
  .stat-box{ min-width:140px; padding:12px 16px; }

  #footer{ padding-bottom:calc(40px + env(safe-area-inset-bottom)); }
}

/* en pantallas táctiles apagamos el rastro de chispitas del mouse:
   en iOS el pointermove se dispara al hacer scroll con el dedo y se ve mal */
@media (pointer:coarse){
  #sparkle-layer{ display:none; }
}

/* dark mode: keep it as a warm paper site intentionally, this is a physical scrapbook feel regardless of system theme */

/* ============ SQUISH DE BOTONES ============ */
@keyframes squish{
  0%{ transform:scale(1); }
  35%{ transform:scale(.85,.92); }
  60%{ transform:scale(1.07,1.03); }
  100%{ transform:scale(1); }
}
@keyframes squish-badge{
  0%{ transform:rotate(-4deg) scale(1); }
  35%{ transform:rotate(-4deg) scale(.85,.92); }
  60%{ transform:rotate(-4deg) scale(1.07,1.03); }
  100%{ transform:rotate(-4deg) scale(1); }
}
.retro-button.squish, .player-btn.squish, .lw-btn.squish, .chapter-locked.squish{ animation:squish .32s cubic-bezier(.36,.07,.19,.97); }
.badge-corner.squish{ animation:squish-badge .32s cubic-bezier(.36,.07,.19,.97); }

/* ============ EASTER EGGS: toast de mensajito ============ */
.egg-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(16px);
  background:var(--burgundy); color:#fff8ec; font-family:var(--font-mono); font-size:13px;
  line-height:1.4; padding:10px 18px; border-radius:10px; border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--shadow); opacity:0; pointer-events:none; z-index:9999;
  max-width:min(86vw, 420px); text-align:center;
  transition:opacity .35s ease, transform .35s ease;
}
.egg-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce){
  .egg-toast{ transition:opacity .2s linear; transform:translateX(-50%); }
  .egg-toast.show{ transform:translateX(-50%); }
}