/* =========================================================
   Para Lorena — estilos
   Paleta: vino profundo, rojo rosa, rosa empolvado, crema y luz de vela
   ========================================================= */
:root {
  --vino: #2e0710;
  --vino-2: #4a0d1b;
  --vino-3: #6b1428;
  --rojo: #c8102e;
  --rojo-2: #e2364f;
  --rosa: #f3c3bf;
  --rosa-2: #fbe2de;
  --crema: #fff7f3;
  --oro: #f3c27a;
  --tinta: #4a1620;
  --tinta-suave: #7a3a44;
  --f-script: 'Great Vibes', cursive;
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-mano: 'Caveat', cursive;
  --cab-h: 64px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--vino);
  color: var(--crema);
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body.en-intro { overflow: hidden; }
body.con-repro { padding-bottom: 84px; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px; border-radius: 999px; border: 0;
  font-family: var(--f-serif); font-weight: 700; font-size: 18px; letter-spacing: .02em;
  text-decoration: none; touch-action: manipulation; user-select: none;
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
.btn:active { transform: scale(.97); }
.btn-rojo { background: var(--rojo); color: #fff; box-shadow: 0 10px 24px -10px rgba(200, 16, 46, .8); }
.btn-rojo:hover { background: var(--rojo-2); }
.btn-claro { background: var(--crema); color: var(--vino-2); }
.btn-borde { background: transparent; color: var(--rojo); box-shadow: inset 0 0 0 2px var(--rojo); }
.btn-borde-claro { background: transparent; color: var(--crema); box-shadow: inset 0 0 0 2px rgba(255, 247, 243, .7); }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }

.ttl-script { font-family: var(--f-script); font-weight: 400; font-size: clamp(46px, 9vw, 84px); line-height: 1.05; margin: 0; }

/* =========================================================
   INTRO
   ========================================================= */
.intro { position: fixed; inset: 0; z-index: 100; background: #000; }
body:not(.en-intro) .intro { display: none; }
.intro-paso {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s .9s;
}
.intro-paso.is-activo { opacity: 1; visibility: visible; transition: opacity .9s var(--ease), visibility 0s; }

/* Paso 1: empezar */
.intro-inicio { background: radial-gradient(120% 90% at 50% 40%, var(--vino-3), var(--vino) 70%); overflow: hidden; }
.inicio-caja { position: relative; z-index: 2; text-align: center; padding: 24px; }
.inicio-pre { margin: 0; font-size: 18px; letter-spacing: .3em; text-transform: uppercase; color: var(--rosa); }
.inicio-nombre { margin: 0 0 6px; font-family: var(--f-script); font-weight: 400; font-size: clamp(84px, 22vw, 168px); line-height: 1.1; color: #fff; text-shadow: 0 0 40px rgba(226, 54, 79, .6); }
.inicio-txt { margin: 0 auto 30px; max-width: 30ch; color: var(--rosa-2); font-size: 20px; }
.corazon-btn { width: 96px; height: 96px; border: 0; border-radius: 50%; background: transparent; padding: 0; animation: latido 1.3s ease-in-out infinite; }
.corazon-btn svg { width: 100%; height: 100%; fill: var(--rojo-2); filter: drop-shadow(0 0 22px rgba(226, 54, 79, .8)); }
@keyframes latido { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }

.lluvia { position: absolute; inset: 0; pointer-events: none; }
.lluvia span { position: absolute; top: -40px; color: var(--rojo-2); opacity: .5; animation: caer linear infinite; }
@keyframes caer { to { transform: translateY(calc(100vh + 80px)) rotate(var(--giro, 180deg)); } }

/* Paso 2: video estilo historias */
.intro-video { background: #000; }
.intro-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.historias { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px; right: 14px; z-index: 3; display: flex; gap: 6px; }
.historias span { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.historias i { display: block; height: 100%; width: 0; background: #fff; }
.video-cap { position: absolute; top: calc(max(14px, env(safe-area-inset-top)) + 16px); left: 16px; z-index: 3; margin: 0; font-family: var(--f-script); font-size: 34px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.btn-saltar { position: absolute; right: 16px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 3; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; backdrop-filter: blur(6px); }
.video-falta { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; padding: 24px; background: radial-gradient(circle at 50% 40%, var(--vino-2), #000 75%); }
.video-falta p { margin: 0; max-width: 34ch; }
.video-falta-ico { font-size: 54px; }
.video-falta code { color: var(--oro); }
.video-falta .btn { margin-top: 18px; }

/* Paso 3: ¿me amas? */
.intro-pregunta { overflow: hidden; }
.pregunta-fondo { position: absolute; inset: -4%; background: url('../img/sobre.webp') center / cover no-repeat; animation: acercar 18s ease-out both; }
.pregunta-fondo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, rgba(46, 7, 16, .25), rgba(46, 7, 16, .78)); }
@keyframes acercar { from { transform: scale(1.12); } to { transform: scale(1); } }
.pregunta-card {
  position: relative; z-index: 2; width: min(440px, calc(100vw - 32px)); padding: 36px 26px 30px; text-align: center;
  border-radius: 28px; background: rgba(255, 240, 236, .82); color: var(--tinta);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: subir 1s var(--ease) .3s both;
}
@keyframes subir { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.pregunta-pre { margin: 0; letter-spacing: .25em; text-transform: uppercase; font-size: 14px; color: var(--tinta-suave); }
.pregunta-ttl { margin: 4px 0 0; font-family: var(--f-script); font-weight: 400; font-size: clamp(58px, 15vw, 88px); line-height: 1.15; color: var(--rojo); white-space: nowrap; }
.pregunta-sub { min-height: 1.5em; margin: 4px 0 18px; font-family: var(--f-mano); font-size: 24px; color: var(--tinta-suave); }
.pregunta-btns { display: flex; justify-content: center; align-items: center; gap: 16px; min-height: 60px; }
.btn-si { min-width: 120px; background: var(--rojo); color: #fff; font-size: 22px; transition: transform .35s var(--ease), background .2s; box-shadow: 0 12px 28px -10px rgba(200, 16, 46, .9); }
.btn-si:hover { background: var(--rojo-2); }
.btn-no { min-width: 110px; background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--rosa); font-size: 20px; touch-action: none; }
.btn-no.huye { position: fixed; z-index: 120; margin: 0; transition: left .32s var(--ease), top .32s var(--ease), transform .3s var(--ease), opacity .3s; }

/* Paso 4: dijo que sí */
.intro-si { background: radial-gradient(circle at 50% 50%, var(--vino-3), var(--vino) 70%); overflow: hidden; }
.si-caja { position: relative; z-index: 2; text-align: center; padding: 24px; }
.si-ttl { margin: 0; font-family: var(--f-script); font-size: clamp(72px, 20vw, 140px); line-height: 1.1; color: #fff; }
.si-txt { margin: 0; font-size: 24px; color: var(--rosa-2); }
.estallido { position: absolute; left: 50%; top: 50%; pointer-events: none; color: var(--rojo-2); animation: estallar 1.6s var(--ease) forwards; }
@keyframes estallar { from { transform: translate(-50%, -50%) scale(.3); opacity: 1; } to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--r)); opacity: 0; } }

/* =========================================================
   HEADER
   ========================================================= */
.cab {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--cab-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(46, 7, 16, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(243, 195, 191, .14);
}
body.en-intro .cab { display: none; }
.cab-marca { font-family: var(--f-script); font-size: 34px; text-decoration: none; color: #fff; line-height: 1; white-space: nowrap; }
.cab-marca span { color: var(--rojo-2); font-family: var(--f-serif); font-size: 22px; vertical-align: middle; }
.cab-nav { display: flex; gap: 6px; }
.cab-nav a { position: relative; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 17px; color: var(--rosa-2); transition: background .2s, color .2s; white-space: nowrap; }
.cab-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.cab-nav a.is-activo { background: var(--rojo); color: #fff; }
.cab-menu { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 10px; flex-direction: column; justify-content: center; gap: 5px; }
.cab-menu span { display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease), opacity .2s; }
.cab.abierto .cab-menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cab.abierto .cab-menu span:nth-child(2) { opacity: 0; }
.cab.abierto .cab-menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .cab-menu { display: flex; }
  .cab-nav {
    position: absolute; top: var(--cab-h); left: 0; right: 0; flex-direction: column; gap: 2px; padding: 10px 16px 18px;
    background: rgba(46, 7, 16, .97); border-bottom: 1px solid rgba(243, 195, 191, .14);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s;
  }
  .cab.abierto .cab-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s var(--ease); }
  .cab-nav a { padding: 14px 16px; font-size: 20px; }
}

/* =========================================================
   VISTAS
   ========================================================= */
.vista { display: none; min-height: 100svh; padding-top: var(--cab-h); }
.vista.is-activa { display: block; animation: aparecer .6s var(--ease); }
@keyframes aparecer { from { opacity: 0; } }

/* ---------- CARTA ---------- */
.vista-carta { position: relative; overflow: hidden; background: radial-gradient(90% 60% at 50% 0%, #fff 0%, var(--rosa-2) 45%, var(--rosa) 100%); color: var(--tinta); }
.petalos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.petalos span { position: absolute; top: -30px; width: 16px; height: 12px; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, var(--rojo-2), var(--rojo)); opacity: .55; animation: caerPetalo linear infinite; }
@keyframes caerPetalo { to { transform: translate(var(--dx, 60px), calc(100svh + 60px)) rotate(var(--giro, 540deg)); } }

.carta-escena { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: clamp(28px, 6vh, 64px) 16px 80px; min-height: calc(100svh - var(--cab-h)); }
.carta-dias { margin: 0 0 clamp(20px, 5vh, 44px); padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-weight: 600; color: var(--tinta-suave); font-size: 17px; }
.carta-dias span { color: var(--rojo); font-size: 22px; font-weight: 700; }

/* Sobre en CSS */
.sobre { position: relative; width: min(520px, 88vw); aspect-ratio: 1.55; margin-top: clamp(30px, 8vh, 80px); perspective: 1400px; transition: transform .8s var(--ease), opacity .8s; }
.sobre-atras, .sobre-frente, .sobre-solapa { position: absolute; left: 0; right: 0; }
.sobre-atras { inset: 0; border-radius: 10px; background: #d98f8c; box-shadow: 0 30px 60px -20px rgba(90, 15, 30, .55); }
.sobre-hoja { position: absolute; left: 6%; right: 6%; top: 6%; bottom: 6%; z-index: 2; display: grid; place-content: center; text-align: center; border-radius: 6px; background: var(--crema); transition: transform 1s var(--ease) .55s; }
.sobre-hoja p { margin: 0; font-family: var(--f-script); font-size: clamp(30px, 7vw, 44px); color: var(--rojo); }
.sobre-hoja span { color: var(--rojo-2); }
.sobre-frente { inset: 0; z-index: 3; border-radius: 10px; background: linear-gradient(160deg, #f8cfcb, #eeb1ad); clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); }
.sobre-solapa { top: 0; height: 60%; z-index: 4; background: linear-gradient(180deg, #f2bcb8, #e7a5a1); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform .8s var(--ease), z-index 0s .4s; border-radius: 10px 10px 0 0; }
.sobre-sello {
  position: absolute; left: 50%; top: 60%; z-index: 5; width: clamp(64px, 16vw, 84px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 0; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; padding: 0;
  background: radial-gradient(circle at 35% 30%, #e84a5f, #a00d24 60%, #6d0718);
  box-shadow: 0 6px 14px rgba(70, 0, 15, .5), inset 0 -4px 8px rgba(0, 0, 0, .3), inset 0 3px 6px rgba(255, 255, 255, .25);
  color: #ffd6d6; font-size: 30px; transition: transform .5s var(--ease), opacity .4s;
  animation: selloPulso 2.2s ease-in-out infinite;
}
.sobre-sello span { display: block; text-shadow: 0 -1px 0 rgba(0, 0, 0, .35); }
@keyframes selloPulso { 0%, 100% { box-shadow: 0 6px 14px rgba(70, 0, 15, .5), 0 0 0 0 rgba(226, 54, 79, .5), inset 0 -4px 8px rgba(0, 0, 0, .3); } 50% { box-shadow: 0 6px 14px rgba(70, 0, 15, .5), 0 0 0 16px rgba(226, 54, 79, 0), inset 0 -4px 8px rgba(0, 0, 0, .3); } }
.sobre-pista { margin: 22px 0 0; font-family: var(--f-mano); font-size: 26px; color: var(--tinta-suave); animation: flotar 2.4s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-5px); } }

.sobre.abierta .sobre-sello { transform: translate(-50%, -50%) scale(1.5) rotate(20deg); opacity: 0; animation: none; }
.sobre.abierta .sobre-solapa { transform: rotateX(180deg); z-index: 1; }
.sobre.abierta .sobre-hoja { transform: translateY(-62%); }
.sobre.sale { transform: translateY(40px) scale(.9); opacity: 0; }

/* Carta abierta */
.carta {
  position: relative; width: min(720px, 100%); margin-top: 8px; padding: clamp(30px, 6vw, 64px) clamp(22px, 6vw, 70px) clamp(30px, 5vw, 50px);
  border-radius: 6px; color: var(--tinta);
  background:
    linear-gradient(transparent 0 0) padding-box,
    repeating-linear-gradient(180deg, transparent 0 41px, rgba(200, 16, 46, .09) 41px 42px),
    #fffaf6;
  box-shadow: 0 40px 80px -30px rgba(90, 15, 30, .55), 0 0 0 1px rgba(200, 16, 46, .08);
  transform-origin: 50% 0; animation: desdoblar 1.1s var(--ease) both;
}
.carta::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(14px, 4vw, 44px); width: 2px; background: rgba(226, 54, 79, .25); }
@keyframes desdoblar { from { opacity: 0; transform: perspective(1200px) rotateX(-70deg) translateY(-30px); } }
.carta-fecha { margin: 0; text-align: right; font-family: var(--f-mano); font-size: 22px; color: var(--tinta-suave); }
.carta-ttl { margin: 6px 0 10px; font-family: var(--f-script); font-weight: 400; font-size: clamp(54px, 12vw, 92px); line-height: 1.05; color: var(--rojo); text-align: center; }
.carta-saludo { margin: 0 0 14px; font-family: var(--f-mano); font-size: clamp(28px, 6vw, 34px); font-weight: 700; }
.carta-cuerpo p, .carta-cierre { font-family: var(--f-mano); font-size: clamp(24px, 5vw, 28px); line-height: 1.5; margin: 0 0 16px; }
.carta-cuerpo p { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.carta-cuerpo p.visible { opacity: 1; transform: none; }
.carta-cierre { font-weight: 700; color: var(--rojo); }
.carta-firma { margin: 26px 0 0; text-align: right; font-family: var(--f-mano); font-size: 26px; }
.carta-firma span { font-family: var(--f-script); font-size: 52px; color: var(--rojo); line-height: 1.2; }
.carta-pd { margin: 22px 0 0; font-family: var(--f-mano); font-size: 22px; color: var(--tinta-suave); }
.carta-acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.carta-otra { display: block; margin: 22px auto 0; border: 0; background: none; color: var(--tinta-suave); text-decoration: underline; font-size: 16px; min-height: 44px; }

/* ---------- NUESTRA HISTORIA (línea de tiempo en resorte) ---------- */
.vista-historia { background: var(--vino); }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.rs-track { position: relative; height: calc(100vh + 5400px); min-height: 6200px; view-timeline-name: --rs-track; view-timeline-axis: block; }
.rs-stage {
  --R: 440px; --step: 44px; --cw: 720px; --tilt: 5.4deg;
  --rot: calc(var(--p) * -300deg);
  position: sticky; top: var(--cab-h); height: calc(100vh - var(--cab-h)); min-height: 600px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 45%, var(--vino-3), var(--vino) 70%);
}
.rs-eyebrow { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; font-family: var(--f-script); font-size: 34px; color: var(--rosa); }
.rs-zone { position: absolute; inset: 0; }
.rs-glow { position: absolute; left: 50%; top: 50%; width: 900px; height: 620px; margin: -310px 0 0 -450px; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 54, 79, .22), rgba(226, 54, 79, 0)); }
.rs-scene { position: absolute; inset: 0; perspective: 2000px; }
.rs-helix { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d;
  transform: translateZ(calc(var(--R) * -1)) rotateX(-6deg) translateY(calc(var(--p) * -5 * var(--step))) rotateY(var(--rot)); }
.rs-seg { position: absolute; left: 0; top: 0; display: block; height: 3px; width: calc(var(--R) * .1047 + 3px); border-radius: 3px; transform-origin: 0 0;
  transform: translateY(calc(var(--step) * var(--k))) rotateY(var(--th)) translateZ(var(--R)) rotateZ(var(--tilt)) translate(-50%, -50%);
  opacity: calc(.1 + .9 * (1 + cos(calc(var(--th) + var(--rot)))) / 2);
  background: linear-gradient(90deg, #b8233d, var(--oro), #b8233d); box-shadow: 0 0 12px rgba(243, 194, 122, .55); }
.rs-card { --a: calc(var(--th) + var(--rot)); --f: max(0, cos(var(--a)));
  position: absolute; left: 0; top: 0; width: var(--cw); transform-origin: 0 0; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  overflow: hidden; border-radius: 16px; background: #fffaf6; color: var(--tinta); border: 1px solid rgba(243, 195, 191, .5);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(243, 194, 122, calc(var(--f) * .6)), 0 0 48px rgba(226, 54, 79, calc(var(--f) * var(--f) * .3));
  transform: translateY(calc(var(--step) * var(--k))) rotateY(var(--th)) translateZ(calc(var(--R) + 6px)) translate(-50%, -50%);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  opacity: clamp(0, calc((var(--f) - .72) * 3.6), 1);
  filter: blur(calc((1 - var(--f)) * 3px)) brightness(calc(.55 + .45 * var(--f))); }
.rs-photo { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; }
.rs-photo-falta { display: grid; place-content: center; justify-items: center; gap: 6px; min-height: 260px; background: linear-gradient(150deg, var(--rosa), var(--rosa-2)); color: var(--tinta-suave); font-family: var(--f-mano); font-size: 22px; }
.rs-photo-falta b { font-size: 44px; font-weight: 400; }
.rs-body { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 30px; min-width: 0; }
.rs-date { align-self: flex-start; background: var(--rojo); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.rs-ttl { font-family: var(--f-script); font-weight: 400; font-size: clamp(40px, 3.6vw, 56px); line-height: 1; margin: 0; color: var(--rojo); text-wrap: balance; }
.rs-txt { font-size: 18px; line-height: 1.5; color: var(--tinta); margin: 0; text-wrap: pretty; }
.rs-quote { font-family: var(--f-mano); font-size: 28px; line-height: 1.1; color: var(--tinta-suave); margin: 2px 0 0; transform: rotate(-1.5deg); }
.rs-hint { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 10px; font-family: var(--f-mano); font-size: 24px; color: var(--rosa); }
.rs-chev { width: 10px; height: 10px; border-right: 3px solid var(--rosa); border-bottom: 3px solid var(--rosa); transform: rotate(45deg); animation: rs-bob 1.6s ease-in-out infinite; }
@keyframes rs-prog { from { --p: 0; } to { --p: 1; } }
@keyframes rs-hintOut { to { opacity: 0; } }
@keyframes rs-bob { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(6px) rotate(45deg); } }
@supports (animation-timeline: view()) {
  .rs-stage { animation: rs-prog both; animation-timing-function: linear(0, 0, 0, 0, 0, 0.0017, 0.0111, 0.0273, 0.0487, 0.0735, 0.1, 0.1265, 0.1513, 0.1727, 0.1889, 0.1983, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2017, 0.2111, 0.2273, 0.2487, 0.2735, 0.3, 0.3265, 0.3513, 0.3727, 0.3889, 0.3983, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4017, 0.4111, 0.4273, 0.4487, 0.4735, 0.5, 0.5265, 0.5513, 0.5727, 0.5889, 0.5983, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6017, 0.6111, 0.6273, 0.6487, 0.6735, 0.7, 0.7265, 0.7513, 0.7727, 0.7889, 0.7983, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8, 0.8017, 0.8111, 0.8273, 0.8487, 0.8735, 0.9, 0.9265, 0.9513, 0.9727, 0.9889, 0.9983, 1, 1, 1, 1, 1); animation-timeline: --rs-track; animation-range: contain 0% contain 100%; }
  .rs-hint { animation: rs-hintOut linear both; animation-timeline: --rs-track; animation-range: contain 0% contain 3%; }
}
@media (max-width: 1180px) {
  .rs-stage { --R: 230px; --step: 30px; --cw: min(336px, 86vw); --tilt: 6.8deg; min-height: 560px; }
  .rs-eyebrow { top: 14px; font-size: 26px; }
  .rs-glow { width: 520px; height: 420px; margin: -210px 0 0 -260px; }
  .rs-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: 130px auto; }
  .rs-photo, .rs-photo-falta { height: 130px; min-height: 0; }
  .rs-photo-falta b { font-size: 32px; }
  .rs-body { padding: 14px 18px 18px; gap: 6px; }
  .rs-ttl { font-size: 40px; }
  .rs-txt { font-size: 16px; line-height: 1.42; }
  .rs-quote { font-size: 23px; }
  .rs-hint { bottom: 18px; }
}
@media (max-width: 1180px) and (max-height: 720px) { .rs-photo, .rs-photo-falta { height: 90px; } .rs-card { grid-template-rows: 90px auto; } .rs-txt { font-size: 15px; } }
.historia-fin { display: grid; justify-items: center; gap: 18px; padding: 70px 16px 90px; text-align: center; background: var(--vino); }
.historia-fin-txt { margin: 0; font-family: var(--f-script); font-size: clamp(40px, 8vw, 64px); color: var(--rosa); }

/* ---------- CÓMO ME ENAMORÉ (constelación) ---------- */
.vista-enamore { position: relative; overflow: hidden; background: radial-gradient(120% 80% at 50% 100%, #3d0c2a, #12061a 55%, #07030c); }
.cielo { position: absolute; inset: 0; width: 100%; height: 100%; }
.enamore-top { position: relative; z-index: 2; text-align: center; padding: 28px 16px 0; }
.enamore-txt { margin: 8px auto 0; max-width: 40ch; color: var(--rosa-2); font-size: 19px; min-height: 3em; }
.constelacion { position: relative; z-index: 2; width: min(560px, 92vw, 62svh); aspect-ratio: 1; margin: 6px auto 0; }
.const-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.const-lineas line, .const-lineas path { stroke: var(--oro); stroke-width: .35; fill: none; filter: drop-shadow(0 0 4px rgba(243, 194, 122, .8)); stroke-linecap: round; }
.const-lineas .corazon-final { stroke: var(--rojo-2); stroke-width: .7; fill: rgba(226, 54, 79, .12); filter: drop-shadow(0 0 10px rgba(226, 54, 79, .9)); }
.estrella { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 0; padding: 0; background: transparent; display: grid; place-items: center; touch-action: manipulation; }
.estrella i { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .6); transition: transform .4s var(--ease), background .4s, box-shadow .4s; }
.estrella.siguiente i { background: #fff; animation: titilar 1.4s ease-in-out infinite; }
.estrella.vista-ya i { background: var(--oro); box-shadow: 0 0 14px 4px rgba(243, 194, 122, .8); transform: scale(1.3); }
.estrella.siguiente::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); animation: onda 1.6s ease-out infinite; }
.estrella[disabled] { cursor: default; }
.estrella:not(.siguiente):not(.vista-ya) i { opacity: .55; transform: scale(.75); }
@keyframes titilar { 50% { transform: scale(1.7); box-shadow: 0 0 22px 8px rgba(255, 255, 255, .8); } }
@keyframes onda { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.estrella-num { position: absolute; top: 38px; font-family: var(--f-mano); font-size: 17px; color: var(--rosa); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .4s; }
.estrella.vista-ya .estrella-num { opacity: .9; }
@media (max-width: 600px) { .estrella-num { display: none; } }
.enamore-final { position: relative; z-index: 2; text-align: center; padding: 10px 16px 60px; animation: subir 1.2s var(--ease); }
.enamore-final .ttl-script { font-size: clamp(36px, 7vw, 56px); color: var(--rosa); }
.enamore-final-txt { margin: 0 0 22px; font-family: var(--f-script); font-size: clamp(48px, 10vw, 80px); line-height: 1.1; color: #fff; text-shadow: 0 0 30px rgba(226, 54, 79, .8); }
.recuerdo { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(7, 3, 12, .65); backdrop-filter: blur(4px); animation: aparecer .3s; }
.recuerdo-caja { width: min(460px, 100%); padding: 32px 26px 26px; text-align: center; border-radius: 22px; background: linear-gradient(160deg, #2a0b26, #12061a); border: 1px solid rgba(243, 194, 122, .35); box-shadow: 0 0 60px rgba(243, 194, 122, .18); animation: subir .6s var(--ease); }
.recuerdo-num { margin: 0; letter-spacing: .25em; text-transform: uppercase; font-size: 14px; color: var(--oro); }
.recuerdo-ttl { margin: 4px 0 10px; font-family: var(--f-script); font-weight: 400; font-size: 52px; line-height: 1.1; color: #fff; }
.recuerdo-txt { margin: 0 0 24px; font-size: 21px; color: var(--rosa-2); }

/* ---------- NUESTRAS CANCIONES ---------- */
.vista-canciones { background: radial-gradient(90% 50% at 50% 0%, var(--vino-3), var(--vino) 70%); padding-bottom: 60px; }
.canciones-top { text-align: center; padding: 30px 16px 10px; }
.canciones-top p { margin: 8px auto 0; max-width: 42ch; color: var(--rosa-2); }
.canciones-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.vista-canciones .btn-borde { color: var(--rosa-2); box-shadow: inset 0 0 0 2px rgba(243, 195, 191, .6); }
.discos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: clamp(30px, 5vw, 56px) clamp(20px, 4vw, 44px); max-width: 1200px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 40px); }
.disco-item { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.disco { position: relative; width: min(100%, 340px); aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; background: none; touch-action: manipulation; transition: transform .3s var(--ease); }
.disco:hover { transform: translateY(-4px); }
.disco-gira { position: absolute; inset: 0; border-radius: 50%; will-change: transform;
  background:
    radial-gradient(circle, transparent 0 35%, rgba(0, 0, 0, 0) 35%),
    repeating-radial-gradient(circle at 50% 50%, #0d0d0d 0 1.2px, #1d1d1d 1.6px 2.6px, #101010 3px);
  box-shadow: 0 0 0 3px #080808, 0 24px 50px -16px rgba(0, 0, 0, .9); }
.disco-label { position: absolute; inset: 21%; border-radius: 50%; overflow: hidden; background: #fff; display: grid; grid-template-rows: 70% 30%; }
.disco-label img { width: 100%; height: 100%; object-fit: cover; }
.disco-panel { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 16% 4%; color: #111; text-align: left; font-family: Arial, Helvetica, sans-serif; }
.disco-panel b { font-size: clamp(9px, 2.6vw, 12px); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disco-panel span { font-size: clamp(8px, 2.2vw, 10px); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.disco-panel .mini { display: flex; justify-content: center; align-items: center; gap: 10%; margin-top: 2px; font-size: clamp(8px, 2.4vw, 11px); }
.disco-panel .mini .p { width: 1.9em; height: 1.9em; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; }
.disco-panel .linea { height: 2px; background: #ccc; border-radius: 2px; overflow: hidden; }
.disco-panel .linea i { display: block; height: 100%; width: 0; background: #111; }
.disco-hueco { position: absolute; left: 50%; top: 50%; width: 4%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #111; }
.disco-brillo { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, .13) 12%, transparent 18% 50%, rgba(255, 255, 255, .1) 62%, transparent 68%); mix-blend-mode: screen; }
.disco-estado { position: absolute; right: 6%; bottom: 6%; width: 52px; height: 52px; border-radius: 50%; background: var(--rojo); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); transition: transform .3s var(--ease); }
.disco-estado svg { width: 24px; height: 24px; fill: currentColor; }
.disco-estado .i-pausa { display: none; }
.disco-item.sonando .disco-estado .i-play { display: none; }
.disco-item.sonando .disco-estado .i-pausa { display: block; }
.disco-item.sonando .disco-gira { box-shadow: 0 0 0 3px #080808, 0 24px 50px -16px rgba(0, 0, 0, .9), 0 0 60px rgba(226, 54, 79, .55); }
.disco-item.cargando .disco-estado { animation: latido 1s infinite; }
.disco-info h2 { margin: 0; font-family: var(--f-script); font-weight: 400; font-size: 40px; line-height: 1.1; }
.disco-info p { margin: 0; color: var(--rosa); }
.disco-links { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.disco-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 700; background: rgba(255, 255, 255, .08); color: var(--rosa-2); }
.disco-links a:hover { background: rgba(255, 255, 255, .16); }
.disco-links svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Reproductor fijo ---------- */
.repro { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(30, 4, 10, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(243, 195, 191, .15); padding-bottom: env(safe-area-inset-bottom); animation: subirRepro .5s var(--ease); }
@keyframes subirRepro { from { transform: translateY(100%); } }
.repro-barra { position: relative; height: 4px; background: rgba(255, 255, 255, .15); }
.repro-barra i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--rojo-2); }
.repro-barra input { position: absolute; left: 0; right: 0; top: -8px; width: 100%; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.repro-in { display: flex; align-items: center; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 8px clamp(10px, 3vw, 24px); }
.repro-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none; text-align: left; padding: 0; }
.repro-mini { flex: none; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: #111; box-shadow: 0 0 0 4px #111; }
.repro-mini img { width: 100%; height: 100%; object-fit: cover; }
.repro.sonando .repro-mini { animation: girar 4s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.repro-txt { min-width: 0; display: flex; flex-direction: column; }
.repro-txt strong { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repro-txt span { font-size: 15px; color: var(--rosa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repro-ctrl { display: flex; align-items: center; gap: 2px; }
.repro-b { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--rosa-2); }
.repro-b svg { width: 22px; height: 22px; fill: currentColor; }
.repro-b:hover { background: rgba(255, 255, 255, .08); }
.repro-b[aria-pressed="true"] { color: var(--rojo-2); }
.repro-play { width: 50px; height: 50px; background: var(--crema); color: var(--vino); }
.repro-play:hover { background: #fff; }
.repro-play .i-pausa { display: none; }
.repro.sonando .repro-play .i-play { display: none; }
.repro.sonando .repro-play .i-pausa { display: block; }
.repro-tiempo { font-size: 14px; color: var(--rosa); font-variant-numeric: tabular-nums; white-space: nowrap; }
.repro-lista { max-height: min(50vh, 360px); overflow: auto; border-top: 1px solid rgba(243, 195, 191, .15); }
.repro-lista ol { list-style: none; margin: 0 auto; padding: 8px clamp(10px, 3vw, 24px); max-width: 1200px; }
.repro-lista button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 10px; background: none; text-align: left; min-height: 52px; }
.repro-lista button:hover { background: rgba(255, 255, 255, .06); }
.repro-lista button.actual { background: rgba(226, 54, 79, .2); }
.repro-lista img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.repro-lista small { display: block; color: var(--rosa); }
@media (max-width: 640px) {
  .repro-tiempo, #repro-azar, #repro-lista-btn { display: none; }
  .repro-in { gap: 6px; }
  .repro-mini { width: 42px; height: 42px; }
  .repro-txt strong { font-size: 16px; }
  .repro-b { width: 40px; height: 40px; }
}
.repro.lista-abierta #repro-lista-btn { color: var(--rojo-2); }
.yt-host { position: fixed; left: -9999px; top: 0; width: 320px; height: 180px; overflow: hidden; pointer-events: none; }

/* ---------- Modal agregar canción ---------- */
.modal { width: min(460px, calc(100vw - 32px)); border: 0; border-radius: 22px; padding: 0; background: var(--crema); color: var(--tinta); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7); }
.modal::backdrop { background: rgba(20, 2, 8, .7); backdrop-filter: blur(4px); }
.modal-form { display: grid; gap: 12px; padding: 26px 22px 22px; }
.modal-form h2 { margin: 0 0 4px; font-family: var(--f-script); font-weight: 400; font-size: 46px; color: var(--rojo); line-height: 1.1; }
.modal-form label { display: grid; gap: 4px; font-weight: 700; font-size: 16px; }
.modal-form small { font-weight: 500; color: var(--tinta-suave); }
.modal-form input { min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid #e6c1bd; background: #fff; font: 500 16px/1 Arial, sans-serif; color: var(--tinta); }
.modal-form input:focus { outline: 2px solid var(--rojo-2); border-color: transparent; }
.modal-error { margin: 0; min-height: 1.3em; color: var(--rojo); font-weight: 700; font-size: 16px; }
.modal-btns { display: flex; justify-content: flex-end; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rs-stage, .rs-hint { animation-duration: auto !important; }
}