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

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

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

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

/* ============ 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:18px; max-width:900px; margin:0 auto; }
.badge-chip{
  display:flex; align-items:center; gap:10px; background:#fff8ea; border:2px solid var(--ink);
  border-radius:999px; padding:10px 20px 10px 12px; box-shadow:3px 3px 0 var(--shadow);
  font-family:var(--font-body); font-weight:600; font-size:.95rem; max-width:260px;
  transform:rotate(var(--r,0deg)); transition:transform .2s;
}
.badge-chip:nth-child(odd){ --r:-1.5deg; }
.badge-chip:nth-child(even){ --r:1.5deg; }
.badge-chip:hover{ transform:rotate(0deg) scale(1.04); }
.badge-icon{ font-size:1.4rem; flex-shrink:0; }

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

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

/* ============ 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{
  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;
}
.pin-photo{ margin:0; position:relative; 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:420px; margin:0 auto; text-align:center; }
.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; }
.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{
  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;
}
.letter-stamp{ position:absolute; top:-22px; right:26px; font-size:2.4rem; transform:rotate(12deg); cursor:pointer; }
.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);
}
.letter-to{ font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--teal); margin:0 0 18px; }
.letter-body{ font-family:var(--font-letter); font-size:1.55rem; line-height:1.5; color:var(--ink); }
.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; }

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

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

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

  .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{ 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%); }
}