/* ═══════════════════════════════════════════════════════════════
   ESTILO — paleta "vino y rosa empolvado"
   ═══════════════════════════════════════════════════════════════ */
:root {
  --vino-noche: #341320;   /* fondo de la cerradura */
  --vino:       #5C2438;
  --rosa-papel: #F6E7E2;   /* fondo principal */
  --rosa:       #E4B7B7;
  --hilo:       #B3263A;   /* el hilo rojo */
  --oro:        #C49A5C;
  --tinta:      #3B2026;
  --tinta-suave:#7A4E58;

  --f-display: "Fraunces", Georgia, serif;
  --f-cuerpo:  "Lora", Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-cuerpo);
  background: var(--rosa-papel);
  color: var(--tinta);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.bloqueado { overflow: hidden; height: 100dvh; }

/* ══════════ CERRADURA ══════════ */
.cerradura {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(ellipse at 50% 30%, var(--vino) 0%, var(--vino-noche) 70%);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  transition: opacity 1.2s ease, visibility 1.2s;
}
.cerradura.abierta { opacity: 0; visibility: hidden; }

.cerradura-contenido { position: relative; z-index: 2; max-width: 420px; color: var(--rosa-papel); }

.sello {
  width: 64px; height: 64px; margin: 0 auto 28px;
  border: 1.5px solid var(--oro); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--rosa);
  animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.12); }
  24% { transform: scale(1); }
  36% { transform: scale(1.08); }
  48% { transform: scale(1); }
}

.cerradura-intro {
  font-style: italic; font-size: 15px; opacity: .75; margin-bottom: 14px;
  letter-spacing: .04em;
}
.cerradura-pregunta {
  font-family: var(--f-display);
  font-weight: 400; font-size: clamp(24px, 6.5vw, 34px);
  line-height: 1.25; margin-bottom: 32px;
}

.cerradura-form { display: flex; gap: 8px; max-width: 340px; margin: 0 auto; }
.cerradura-form input {
  flex: 1; min-width: 0;
  padding: 14px 16px; font: 16px var(--f-cuerpo);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; color: var(--rosa-papel);
  outline: none; text-align: center;
}
.cerradura-form input::placeholder { color: rgba(246,231,226,.45); }
.cerradura-form input:focus { border-color: var(--rosa); }
.cerradura-form button {
  padding: 14px 22px; border: none; border-radius: 999px;
  background: var(--hilo); color: #fff;
  font: 600 15px var(--f-cuerpo); cursor: pointer;
}
.cerradura-form.error { animation: sacudida .45s; }
.cerradura-form.error input { border-color: #e0707f; }
@keyframes sacudida {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-9px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(4px); }
}

.pista-btn {
  margin-top: 22px; background: none; border: none; cursor: pointer;
  color: var(--oro); font: italic 14px var(--f-cuerpo);
  text-decoration: underline; text-underline-offset: 3px;
}
.pista-texto { margin-top: 10px; font-size: 14px; color: var(--rosa); font-style: italic; }

/* corazones flotantes */
.cerradura-corazones { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cerradura-corazones span {
  position: absolute; bottom: -30px; color: var(--rosa);
  opacity: 0; animation: flotar linear infinite;
}
@keyframes flotar {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: .35; }
  90%  { opacity: .1; }
  100% { transform: translateY(-110vh) rotate(35deg); opacity: 0; }
}

/* ══════════ OVERLAY MÚSICA ══════════ */
.overlay-musica {
  position: fixed; inset: 0; z-index: 40;
  background: var(--vino-noche);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
}
.btn-comenzar {
  font-family: var(--f-display); font-size: 24px; line-height: 1.4;
  color: var(--rosa-papel); background: none; cursor: pointer;
  border: 1.5px solid var(--oro); border-radius: 18px;
  padding: 34px 40px;
}
.btn-comenzar .nota { display: block; font-size: 34px; color: var(--oro); margin-bottom: 12px; }
.btn-sin-musica {
  background: none; border: none; cursor: pointer;
  color: rgba(246,231,226,.5); font: italic 14px var(--f-cuerpo);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ══════════ YINCANA (cuenta atrás diaria) ══════════ */
.yincana {
  position: fixed; inset: 0; z-index: 45;
  background: radial-gradient(ellipse at 50% 25%, var(--vino) 0%, var(--vino-noche) 70%);
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 40px 24px;
}
.yincana-corazones { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.yincana-corazones span {
  position: absolute; bottom: -30px; color: var(--rosa);
  opacity: 0; animation: flotar linear infinite;
}
.yincana-contenido {
  position: relative; z-index: 2; width: 100%; max-width: 420px;
  text-align: center; color: var(--rosa-papel); margin: auto;
}
.yincana-eyebrow {
  font-size: 13px; letter-spacing: .12em; font-style: italic;
  opacity: .8; margin-bottom: 12px;
}
.yincana-titulo {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(30px, 9vw, 42px); line-height: 1.1; margin-bottom: 30px;
}
.yincana-etapas { display: flex; flex-direction: column; gap: 18px; }

.etapa {
  background: #fdf6f3; color: var(--tinta);
  border-radius: 8px; padding: 22px 20px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.etapa-sello {
  display: block; width: 100%; border: none; cursor: pointer;
  background: none; color: var(--hilo);
  font-family: var(--f-display); font-size: 22px; font-weight: 500;
  text-transform: capitalize;
}
.etapa-sello::after {
  content: "toca para abrir"; display: block;
  font-family: var(--f-cuerpo); font-style: italic; font-size: 13px;
  color: var(--tinta-suave); text-transform: none; margin-top: 6px;
}
.etapa.abierta .etapa-sello { color: var(--vino); cursor: default; }
.etapa.abierta .etapa-sello::after { content: none; }
.etapa-mensaje {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(92,36,56,.18);
  font-size: 17px; font-style: italic; color: var(--tinta-suave); line-height: 1.6;
}
.etapa-mensaje.animar { animation: aparecer 1s ease both; }

.etapa.bloqueada {
  background: rgba(255,255,255,.06); color: rgba(246,231,226,.6);
  box-shadow: none; border: 1px dashed rgba(246,231,226,.22);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.etapa-candado { font-size: 22px; opacity: .8; }
.etapa-etiqueta { font-family: var(--f-display); font-size: 18px; text-transform: capitalize; }
.etapa-bloqueo { font-size: 13px; font-style: italic; text-transform: capitalize; }

#btnAbrirAlbum { margin-top: 30px; }
#btnAbrirAlbum.animar { animation: aparecer 1s ease both; }

/* ══════════ PORTADA ══════════ */
.portada {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 48px 24px; position: relative;
}
.portada-eyebrow {
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--hilo); margin-bottom: 18px;
}
.portada-titulo {
  font-family: var(--f-display); font-weight: 350;
  font-size: clamp(44px, 13vw, 84px); line-height: 1.05;
  font-variation-settings: "opsz" 144;
}
.portada-nombres {
  font-style: italic; font-size: 19px; color: var(--tinta-suave); margin-top: 14px;
}
.contador { margin-top: 44px; display: flex; align-items: baseline; gap: 12px; }
.contador-num {
  font-family: var(--f-display); font-size: 52px; color: var(--hilo); font-weight: 500;
}
.contador-label {
  font-size: 13px; text-align: left; line-height: 1.35;
  color: var(--tinta-suave); letter-spacing: .05em;
}
.portada-scroll {
  position: absolute; bottom: 28px; left: 0; right: 0;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-suave); opacity: .7;
  animation: bajar 2.2s ease-in-out infinite;
}
@keyframes bajar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ══════════ HILO ROJO + CAPÍTULOS ══════════ */
.capitulos-wrap { position: relative; }
.hilo {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.hilo path {
  fill: none; stroke: var(--hilo); stroke-width: 2.5; stroke-linecap: round;
  opacity: .75;
}

.capitulo {
  position: relative; z-index: 1;
  max-width: 560px; margin: 0 auto; padding: 72px 24px;
}
.cap-anio {
  font-family: var(--f-display); font-size: clamp(56px, 16vw, 96px);
  font-weight: 300; color: transparent;
  -webkit-text-stroke: 1.2px var(--hilo);
  line-height: 1; opacity: .55;
}
.cap-eyebrow {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--oro); margin: 10px 0 6px;
}
.cap-titulo {
  font-family: var(--f-display); font-weight: 450;
  font-size: clamp(26px, 7vw, 36px); line-height: 1.2; margin-bottom: 16px;
}
.cap-texto { font-size: 17px; color: var(--tinta-suave); font-style: italic; margin-bottom: 34px; }

.cap-media { display: flex; flex-direction: column; gap: 30px; }
.cap-media figure { margin: 0; }
.cap-media img, .cap-media video {
  width: 100%; display: block; border-radius: 4px;
  background: var(--rosa);
  box-shadow: 0 14px 34px rgba(59,32,38,.16);
}
/* fotos como pequeñas polaroids alternadas */
.cap-media figure {
  background: #fff; padding: 10px 10px 14px; border-radius: 4px;
  box-shadow: 0 14px 34px rgba(59,32,38,.14);
}
.cap-media figure:nth-child(odd)  { transform: rotate(-1.3deg); }
.cap-media figure:nth-child(even) { transform: rotate(1.1deg); }
.cap-media img, .cap-media video { box-shadow: none; }
.cap-media figcaption {
  font-size: 14px; font-style: italic; color: var(--tinta-suave);
  text-align: center; padding-top: 10px;
}
.media-falta {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/3; border-radius: 4px;
  background: linear-gradient(135deg, var(--rosa), #f0d4d0);
  color: var(--vino); font-size: 13px; font-style: italic; text-align: center;
  padding: 16px;
}

/* ══════════ MAPA ══════════ */
.seccion-mapa { max-width: 640px; margin: 0 auto; padding: 72px 24px; text-align: center; }
.mapa {
  height: 64vh; min-height: 380px; border-radius: 8px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(59,32,38,.18);
  border: 1px solid rgba(92,36,56,.15);
}
.mapa-ayuda { margin-top: 12px; font-size: 13px; font-style: italic; color: var(--tinta-suave); }
.marcador-corazon {
  font-size: 26px; color: var(--hilo); line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,.25);
  animation: latido 2.4s ease-in-out infinite;
}
.leaflet-popup-content { font-family: var(--f-cuerpo); }
.leaflet-popup-content b { font-family: var(--f-display); color: var(--vino); }

/* ══════════ SORPRESA ══════════ */
.sorpresa {
  max-width: 560px; margin: 0 auto; padding: 90px 24px 60px; text-align: center;
}
.lazo { width: 110px; margin: 0 auto 8px; color: var(--hilo); }
.lazo svg { width: 100%; height: auto; }

.sobre {
  position: relative; margin: 30px auto 0; display: block;
  width: 220px; height: 150px; border: none; cursor: pointer;
  background: #fdf6f3; border-radius: 6px;
  box-shadow: 0 16px 38px rgba(59,32,38,.22);
  font-size: 34px; color: var(--hilo);
  transition: transform .3s;
}
.sobre:active { transform: scale(.97); }
.sobre-solapa {
  position: absolute; top: 0; left: 0; right: 0; height: 0;
  border-left: 110px solid transparent; border-right: 110px solid transparent;
  border-top: 70px solid var(--rosa);
  transform-origin: top; transition: transform .8s ease;
}
.sobre.abierto .sobre-solapa { transform: rotateX(180deg); }
.sobre.abierto { opacity: 0; transition: transform .3s, opacity .6s ease .7s; pointer-events: none; }
.sobre-cuerpo { position: relative; top: 38px; }
.sobre-label {
  position: absolute; bottom: -34px; left: 0; right: 0;
  font: italic 14px var(--f-cuerpo); color: var(--tinta-suave);
}
.sorpresa-carta {
  margin-top: 56px; padding: 34px 26px;
  background: #fff; border-radius: 6px;
  box-shadow: 0 16px 38px rgba(59,32,38,.16);
  font-size: 18px; font-style: italic;
  animation: aparecer 1s ease both;
}
.sorpresa-detalle {
  margin-top: 20px; font-family: var(--f-display); font-style: normal;
  font-size: 22px; color: var(--hilo);
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════ CIERRE ══════════ */
.cierre {
  padding: 60px 24px 110px; text-align: center;
  font-family: var(--f-display); font-size: clamp(22px, 6vw, 30px);
  color: var(--vino); line-height: 1.4;
}
.cierre-firma { margin-top: 18px; font-family: var(--f-cuerpo); font-style: italic; font-size: 16px; color: var(--tinta-suave); }

/* ══════════ MÚSICA FLOTANTE ══════════ */
.btn-musica {
  position: fixed; bottom: 18px; right: 18px; z-index: 30;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--vino); color: var(--rosa-papel); font-size: 20px;
  box-shadow: 0 6px 18px rgba(59,32,38,.35);
}
.btn-musica.pausada { opacity: .5; }

/* ══════════ REVEAL ON SCROLL ══════════ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visto { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}