/* ==========================================================================
   PÁGINA ROMÁNTICA — ESTILOS
   Los colores están en variables: cambia los valores de :root para
   personalizar la paleta (modo día) y [data-theme="night"] (modo nocturno).
   ========================================================================== */

:root {
  --bg: #fff8f6;
  --bg-alt: #fbece9;
  --surface: #ffffff;
  --text: #3b2a2b;
  --muted: #8a716f;
  --rose: #df7a78;
  --rose-soft: #f7d7d3;
  --red: #b01027;
  --red-2: #d9303f;
  --red-glow: rgba(176, 16, 39, .35);
  --gold: #b88f45;
  --gold-soft: #e9d3a4;
  --paper: #fffdf6;
  --ink: #3b2a2b;
  --line: rgba(184, 143, 69, .3);
  --shadow: 0 20px 50px -22px rgba(120, 25, 30, .38);
  --radius: 18px;

  --font-script: "Great Vibes", "Parisienne", cursive;
  --font-hand: "Dancing Script", cursive;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-theme="night"] {
  --bg: #100a0a;
  --bg-alt: #180f10;
  --surface: #201617;
  --text: #f4e9e7;
  --muted: #bba4a2;
  --rose: #f0938f;
  --rose-soft: #3a1e20;
  --red: #ff4f5e;
  --red-2: #ff8080;
  --red-glow: rgba(255, 79, 94, .45);
  --gold: #e3c27e;
  --gold-soft: #6b5836;
  --paper: #f5ebdc;
  --line: rgba(227, 194, 126, .2);
  --shadow: 0 25px 60px -25px rgba(0, 0, 0, .85), 0 0 50px -25px rgba(255, 79, 94, .3);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color .6s ease, color .6s ease;
}
body.bloqueado { overflow: hidden; }
/* Nada puede hacer la página más ancha que la pantalla (evita que el celular la aleje) */
html, body { max-width: 100%; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--rose); color: #fff; }

.contenedor { width: min(1120px, 100% - 32px); margin-inline: auto; }
section { padding: clamp(64px, 11vw, 136px) 0; position: relative; scroll-margin-top: 20px; }
.seccion-alt { background: var(--bg-alt); transition: background-color .6s ease; }

/* Luces suaves del modo nocturno */
[data-theme="night"] body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(600px circle at 12% 18%, rgba(255, 79, 94, .07), transparent 60%),
    radial-gradient(520px circle at 88% 72%, rgba(227, 194, 126, .06), transparent 60%);
}

/* ---------- Títulos de sección ---------- */
.titulo-seccion { text-align: center; margin-bottom: clamp(40px, 6vw, 70px); }
.eyebrow {
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.titulo-seccion h2 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  line-height: 1.1;
  margin: .2em 0 .15em;
  color: var(--red);
}
.titulo-seccion p { color: var(--muted); max-width: 560px; margin: .6em auto 0; }
.ornamento {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--gold); font-size: .9rem;
}
.ornamento span { width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ornamento span:last-child { transform: scaleX(-1); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 13px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 12px 30px -10px var(--red-glow);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, background .35s, color .35s;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -12px var(--red-glow); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-grande { padding: 16px 36px; font-size: 1.02rem; }
.btn-borde { background: transparent; color: var(--red); border-color: var(--red); box-shadow: none; }
.btn-borde:hover { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Aparición al hacer scroll ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2, .8, .2, 1);
}
.js [data-reveal].visible { opacity: 1; transform: none; }

/* ==========================================================================
   BIENVENIDA (SOBRE)
   ========================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 16px;
  text-align: center;
  color: #fff;
  background: radial-gradient(circle at 50% 40%, #5c1520, #1a0a0c 72%);
  transition: opacity 1.1s ease .1s, visibility 1.1s ease .1s;
}
.intro.oculto { opacity: 0; visibility: hidden; }
.sobre {
  position: relative;
  width: min(290px, 72vw);
  aspect-ratio: 1.6;
  margin: 0 auto 34px;
  perspective: 900px;
  cursor: pointer;
  animation: flotarSobre 3.2s ease-in-out infinite;
}
.intro.abriendo .sobre { animation: none; }
.sobre-cuerpo, .sobre-frente { position: absolute; inset: 0; border-radius: 6px; }
.sobre-cuerpo { background: linear-gradient(160deg, #f5d0cc, #e39a94); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65); z-index: 1; }
.sobre-carta {
  position: absolute; left: 7%; right: 7%; top: 7%; height: 82%;
  background: var(--paper);
  border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--font-script);
  color: #b01027;
  font-size: clamp(1.5rem, 6vw, 2rem);
  z-index: 2;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1) .55s;
}
.sobre-frente { background: linear-gradient(160deg, #efc0bb, #dc8a84); clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); z-index: 3; }
.sobre-solapa {
  position: absolute; left: 0; right: 0; top: 0; height: 60%;
  background: linear-gradient(180deg, #e8aaa4, #cf7a73);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  z-index: 4;
  transition: transform .7s ease, z-index 0s linear .35s;
}
.sobre-sello {
  position: absolute; left: 50%; top: 56%;
  width: 50px; height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d42a36, #8a0d1e);
  color: #ffd9d6;
  display: grid; place-items: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  z-index: 5;
  transition: opacity .35s, transform .35s;
}
.intro.abriendo .sobre-sello { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
.intro.abriendo .sobre-solapa { transform: rotateX(180deg); z-index: 1; }
.intro.abriendo .sobre-carta { transform: translateY(-58%); }
.intro-texto { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 3.5vw, 1.5rem); margin: 0 0 22px; }
.intro-nota { font-size: .8rem; opacity: .6; margin-top: 18px; letter-spacing: .05em; }
@keyframes flotarSobre { 50% { transform: translateY(-10px) rotate(-1deg); } }

/* ==========================================================================
   CAPAS DE EFECTOS
   ========================================================================== */
.capa-fx, .capa-confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.capa-fx { z-index: 40; }
.capa-confeti { z-index: 80; }
.corazon-click {
  position: fixed; z-index: 85;
  pointer-events: none;
  color: var(--red-2);
  line-height: 1;
  animation: corazonClick 1.2s ease-out both;
}
@keyframes corazonClick {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.5); }
  to   { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% - 80px)) scale(1.2); }
}

/* ==========================================================================
   NAVEGACIÓN
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px clamp(16px, 4vw, 40px);
  color: #fff;
  transition: background-color .4s, padding .4s, color .4s, box-shadow .4s;
}
.nav.solida {
  background: rgba(255, 248, 246, .85);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 10px;
}
.nav-marca { font-family: var(--font-script); font-size: 1.75rem; text-decoration: none; line-height: 1; }
.nav-links { display: flex; gap: clamp(14px, 2vw, 26px); list-style: none; margin: 0; padding: 0; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.nav-links a { text-decoration: none; opacity: .85; transition: opacity .3s, color .3s; }
.nav-links a:hover { opacity: 1; color: var(--red-2); }
.icono-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  background: transparent;
  display: grid; place-items: center;
  transition: transform .4s, background .3s;
}
.icono-btn:hover { transform: rotate(20deg); background: color-mix(in srgb, currentColor 10%, transparent); }
.icono-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.icono-btn .ico-luna { fill: currentColor; stroke: none; }
.ico-sol, [data-theme="night"] .ico-luna { display: none; }
[data-theme="night"] .ico-sol { display: block; }
@media (max-width: 900px) { .nav-links { display: none; } }

/* ==========================================================================
   1. PORTADA
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: 110px 16px 90px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(ellipse at 25% 20%, #5f1620, transparent 60%),
    radial-gradient(ellipse at 80% 85%, #44141c, transparent 55%),
    #1a0a0c;
}
/* Portada: la foto se ve completa (sin recortar) y los bordes libres se
   rellenan con la misma foto desenfocada, en computador y en celular. */
.hero-bg { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1.6s ease; }
.hero-bg.lista { opacity: 1; }
.hero-bg img { position: absolute; display: block; }
.hero-fondo {
  inset: -60px;
  width: calc(100% + 120px); height: calc(100% + 120px);
  object-fit: cover;
  filter: blur(32px) brightness(.62) saturate(1.15);
}
.hero-foto {
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  animation: respirar 22s ease-in-out infinite alternate;
}
@keyframes respirar { to { transform: scale(1.035); } }
.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(42, 8, 12, .2), rgba(18, 4, 6, .78) 82%),
    linear-gradient(180deg, rgba(18, 4, 6, .45), rgba(18, 4, 6, .05) 40%, rgba(18, 4, 6, .92));
}
.hero-luces span {
  position: absolute; border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  animation: deriva 18s ease-in-out infinite alternate;
}
.hero-luces span:nth-child(1) { width: 42vw; height: 42vw; background: #ff3b4a; left: -12vw; top: 8%; opacity: .32; }
.hero-luces span:nth-child(2) { width: 34vw; height: 34vw; background: #d4af37; right: -8vw; bottom: 4%; opacity: .22; animation-delay: -6s; }
.hero-luces span:nth-child(3) { width: 26vw; height: 26vw; background: #ff8a80; left: 42%; top: -12%; opacity: .25; animation-delay: -12s; }
@keyframes deriva { to { transform: translate(7vw, 6vh) scale(1.2); } }

.hero-contenido { position: relative; z-index: 2; max-width: 960px; }
.hero .eyebrow { color: var(--gold-soft); }
[data-theme="night"] .hero .eyebrow { color: #e9d3a4; }
.hero h1 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3.3rem, 10.5vw, 7.8rem);
  line-height: 1.05;
  margin: .12em 0 .2em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .45), 0 0 60px rgba(255, 79, 94, .25);
}
.palabra { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(24px); }
.hero.animar .palabra { animation: palabra 1.3s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes palabra { to { opacity: 1; filter: blur(0); transform: none; } }
.hero-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  max-width: 640px;
  margin: 0 auto 2.3em;
  opacity: .92;
}
.hero .aparece { opacity: 0; transform: translateY(22px); transition: opacity 1.3s ease, transform 1.3s cubic-bezier(.2, .8, .2, 1); }
.hero.animar .aparece { opacity: 1; transform: none; }
.hero.animar .hero-sub.aparece { opacity: .92; }
.scroll-indicador {
  position: absolute; left: 50%; bottom: 28px; z-index: 2;
  width: 26px; height: 42px; margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 14px;
}
.scroll-indicador span {
  position: absolute; left: 50%; top: 8px;
  width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: #fff;
  animation: rueda 1.8s ease-in-out infinite;
}
@keyframes rueda { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ==========================================================================
   CONTADOR
   ========================================================================== */
.fecha-grande { font-family: var(--font-serif); font-size: clamp(1.6rem, 4vw, 2.2rem) !important; color: var(--text) !important; letter-spacing: .12em; }
.contador-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; max-width: 900px; margin: 0 auto; }
.contador-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 6px 20px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform .4s, background-color .6s;
}
.contador-item:hover { transform: translateY(-5px); }
.contador-num { font-family: var(--font-serif); font-size: clamp(1.8rem, 4.2vw, 2.9rem); color: var(--red); line-height: 1; font-variant-numeric: tabular-nums; }
.contador-label { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.contador-total { text-align: center; margin: 40px 0 0; color: var(--muted); font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; }
.contador-total strong { color: var(--red); font-style: normal; font-weight: 500; }
@media (max-width: 700px) { .contador-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }

/* ==========================================================================
   2. CARTA
   ========================================================================== */
.papel {
  position: relative;
  max-width: 780px; margin: 0 auto;
  padding: clamp(46px, 7vw, 84px) clamp(26px, 7vw, 84px) clamp(40px, 6vw, 70px);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .7), transparent 50%),
    radial-gradient(circle at 90% 95%, rgba(233, 211, 164, .25), transparent 55%),
    var(--paper);
  color: var(--ink);
  border-radius: 6px;
  box-shadow: 0 35px 70px -30px rgba(90, 18, 25, .5), 0 2px 6px rgba(0, 0, 0, .04);
  cursor: pointer;
}
.papel::before {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(184, 143, 69, .35);
  border-radius: 3px;
  pointer-events: none;
}
.papel::after {
  content: "❤";
  position: absolute; top: -26px; left: 50%;
  width: 54px; height: 54px; margin-left: -27px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d42a36, #8a0d1e);
  color: #ffd9d6; font-size: 1.25rem;
  box-shadow: 0 6px 16px rgba(120, 10, 25, .4);
}
.carta-cabecera {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  font-family: var(--font-serif); font-style: italic;
  color: #8a716f; font-size: .95rem;
  margin-bottom: 26px;
}
.carta-contenido p {
  font-family: var(--font-hand);
  font-size: clamp(1.18rem, 2.4vw, 1.42rem);
  line-height: 1.7;
  margin: 0 0 .9em;
}
.carta-contenido .carta-saludo { font-family: var(--font-script); font-size: clamp(2.1rem, 5vw, 2.9rem); color: #b01027; line-height: 1.2; }
.carta-contenido .carta-despedida { font-weight: 600; color: #b01027; }
.escribiendo .typed::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px; vertical-align: -.12em;
  background: #b01027;
  animation: parpadeo 1s steps(1) infinite;
}
@keyframes parpadeo { 50% { opacity: 0; } }
.carta-firma {
  font-family: var(--font-script);
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  color: #b01027;
  text-align: right;
  margin: 10px 0 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.papel.terminada .carta-firma { opacity: 1; transform: none; }
.papel.terminada { cursor: default; }
.carta-pista { text-align: center; font-size: .78rem; color: #a8918f; margin: -8px 0 22px; letter-spacing: .05em; transition: opacity .6s; }
.carta-pista.oculta { display: none; }

/* ==========================================================================
   3. CARRUSEL (polaroids)
   ========================================================================== */
.recuerdos { overflow: hidden; }   /* las polaroids de los lados se asoman sin ensanchar la página */
.carrusel + .carrusel { margin-top: 90px; }
.carrusel-cab { text-align: center; margin-bottom: 26px; }
.carrusel-cab h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; }
.carrusel-cab p { margin: .2em 0 0; color: var(--muted); }
.carrusel-stage {
  --slide-w: min(76vw, 330px);
  --gap: clamp(150px, 25vw, 300px);
  position: relative;
  height: 560px;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  outline: none;
}
.slide {
  position: absolute; left: 50%; top: 0;
  width: var(--slide-w);
  margin: 0;
  transform: translateX(calc(-50% + var(--d, 0) * var(--gap))) scale(calc(1 - var(--ad, 0) * .15)) rotate(calc(var(--d, 0) * 3deg));
  opacity: calc(1 - var(--ad, 0) * .38);
  filter: saturate(calc(1 - var(--ad, 0) * .35));
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .9s, filter .9s;
  cursor: pointer;
}
.slide.lejana { opacity: 0; visibility: hidden; pointer-events: none; }
.slide.activa { cursor: grab; }
.polaroid {
  background: #fff;
  padding: 14px 14px 20px;
  border-radius: 4px;
  box-shadow: 0 25px 50px -20px rgba(60, 14, 18, .5);
  color: #3b2a2b;
}
[data-theme="night"] .polaroid { background: #f7f1ea; }
.polaroid-foto { overflow: hidden; aspect-ratio: 4 / 5; background: #f7d7d3; }
.polaroid-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(.2, .8, .2, 1); -webkit-user-drag: none; }
.slide.activa:hover .polaroid-foto img { transform: scale(1.09); }
.polaroid figcaption { padding-top: 14px; text-align: center; }
.polaroid-titulo { font-family: var(--font-hand); font-size: 1.5rem; font-weight: 600; line-height: 1.25; margin: 0; color: #b01027; }
.polaroid-meta { font-size: .76rem; color: #8a716f; margin: .35em 0; letter-spacing: .03em; }
.polaroid-desc { font-size: .88rem; line-height: 1.5; margin: 0; color: #5b4446; }
.carrusel-controles { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 18px; }
.flecha {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--red);
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  transition: transform .3s, background .3s, color .3s;
}
.flecha:hover { background: var(--red); color: #fff; transform: scale(1.08); }
.flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--rose); opacity: .5; transition: width .4s, opacity .4s, background .4s; }
.dot.activo { width: 26px; opacity: 1; background: var(--red); }

/* ==========================================================================
   AGENDA DE MOMENTOS
   ========================================================================== */
.agenda-controles { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 44px; }
.agenda-controles .filtros { margin-bottom: 0; }
.agenda-anios {
  display: flex; gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}
.agenda-anios::-webkit-scrollbar { display: none; }
.agenda-anios a {
  flex: none;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: .95rem;
  text-decoration: none;
  transition: color .3s, border-color .3s;
}
.agenda-anios a:hover { color: var(--red); border-color: var(--red); }

.agenda-libro { max-width: 880px; margin: 0 auto; display: grid; gap: 34px; }
/* Cada año es una página de agenda con argollas a la izquierda */
.agenda-anio {
  position: relative;
  scroll-margin-top: 90px;
  padding: 34px clamp(20px, 5vw, 48px) 20px clamp(52px, 8vw, 84px);
  border-radius: 20px;
  background:
    linear-gradient(90deg, transparent calc(clamp(52px, 8vw, 84px) - 18px), rgba(217, 48, 63, .22) 0, rgba(217, 48, 63, .22) calc(clamp(52px, 8vw, 84px) - 17px), transparent 0),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: background-color .6s;
}
.agenda-anio::before {
  content: "";
  position: absolute; left: clamp(14px, 2.4vw, 24px); top: 26px; bottom: 26px;
  width: 16px;
  background: radial-gradient(circle, var(--bg-alt) 0 5px, var(--gold) 5.5px 7px, transparent 7.5px) center top / 16px 34px repeat-y;
}
.agenda-anio-titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--rose-soft);
}
.agenda-anio-titulo span { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 5vw, 2.8rem); color: var(--red); line-height: 1; }
.agenda-anio-titulo small { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 500; }

.entrada {
  display: grid; grid-template-columns: 84px 1fr; gap: 24px;
  padding: 26px 0;
  border-top: 1px dashed var(--line);
}
.agenda-anio-titulo + .entrada { border-top: 0; }
.entrada.oculta { display: none; }
.entrada-fecha {
  align-self: start;
  width: 84px;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px -14px rgba(120, 25, 30, .45);
  transition: background-color .6s;
}
.ef-mes { display: block; padding: 4px 0; background: linear-gradient(135deg, var(--red), var(--red-2)); color: #fff; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.ef-dia { display: block; padding-top: 6px; font-family: var(--font-serif); font-size: 2.2rem; line-height: 1.05; color: var(--text); }
.ef-semana { display: block; padding: 2px 4px 9px; font-size: .64rem; color: var(--muted); }
.entrada-fecha.aprox { padding: 10px 6px; }
.ef-icono { display: block; font-size: 1.6rem; line-height: 1.2; }
.ef-texto { display: block; margin-top: 4px; font-size: .68rem; line-height: 1.3; color: var(--muted); font-weight: 500; }
.entrada-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.chip-tipo { padding: 3px 11px; border-radius: 999px; font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; background: var(--rose-soft); color: var(--red); }
.tipo-carta .chip-tipo { background: var(--red); color: #fff; }
.tipo-poema .chip-tipo { background: rgba(184, 143, 69, .18); color: var(--gold); }
.entrada-hora { font-size: .78rem; color: var(--muted); }
.entrada h4 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.2rem, 2.6vw, 1.45rem); line-height: 1.3; margin: 0 0 .35em; }
.entrada-texto p { margin: 0 0 .6em; color: var(--muted); }
.entrada-texto p:last-child { margin-bottom: 0; }
.tipo-carta .entrada-texto p { font-family: var(--font-serif); font-style: italic; }
.tipo-poema .entrada-texto p { font-family: var(--font-hand); font-size: 1.22rem; line-height: 1.5; color: var(--text); }
.entrada-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.mini-foto {
  position: relative;
  width: 92px; height: 92px; margin: 0;
  border-radius: 12px; overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 10px 22px -12px rgba(120, 25, 30, .5);
}
.mini-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.mini-foto:hover img { transform: scale(1.1); }
.mini-mas { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(42, 8, 12, .55); color: #fff; font-weight: 500; }
@media (max-width: 600px) { .mini-foto { width: 72px; height: 72px; } }
.entrada-foto { max-width: 440px; margin: 12px 0 14px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.entrada-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.entrada-leer {
  display: inline-flex; align-items: center; gap: .3em;
  margin-top: 14px; padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--red);
  background: transparent;
  color: var(--red);
  font-size: .85rem; font-weight: 500;
  transition: background .3s, color .3s;
}
.entrada-leer:hover { background: var(--red); color: #fff; }
/* ---------- 🎂 Cumpleaños: tarjeta de fiesta ---------- */
.agenda-especiales { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.especiales-titulo { width: 100%; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.especial {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 10px 20px;
  border-radius: 16px;
  border: 1px solid var(--gold);
  background:
    radial-gradient(circle, rgba(227, 194, 126, .35) 0 1.4px, transparent 1.9px) 0 0 / 16px 16px,
    linear-gradient(135deg, rgba(227, 194, 126, .22), rgba(217, 48, 63, .12)),
    var(--surface);
  box-shadow: 0 10px 24px -14px var(--red-glow);
  line-height: 1.3;
  transition: transform .3s, box-shadow .3s;
}
.especial:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px var(--red-glow); }
.especial strong { font-family: var(--font-serif); font-weight: 500; font-size: 1rem; color: var(--red); }
.especial span { font-size: .82rem; color: var(--text); }
.especial small { font-size: .72rem; color: var(--gold); font-weight: 500; }

.entrada.tipo-cumple {
  position: relative;
  margin: 14px -10px;
  padding: 46px 14px 24px;
  border: 1px solid var(--gold);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(227, 194, 126, .45) 0 1.6px, transparent 2.1px) 0 0 / 24px 24px,
    radial-gradient(circle, rgba(217, 48, 63, .28) 0 1.4px, transparent 1.9px) 12px 12px / 24px 24px,
    radial-gradient(ellipse at 85% 20%, rgba(227, 194, 126, .28), transparent 55%),
    linear-gradient(160deg, rgba(255, 244, 230, .55), rgba(217, 48, 63, .07)),
    var(--surface);
  box-shadow: 0 0 0 4px rgba(227, 194, 126, .14), 0 22px 44px -24px var(--red-glow);
}
.agenda-anio-titulo + .entrada.tipo-cumple, .entrada + .entrada.tipo-cumple, .entrada.tipo-cumple + .entrada { border-top: 1px solid var(--gold); }
.entrada.tipo-cumple + .entrada:not(.tipo-cumple) { border-top: 0; }
.tipo-cumple .entrada-fecha { position: relative; overflow: visible; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227, 194, 126, .25), 0 0 26px rgba(227, 194, 126, .45); }
.tipo-cumple .ef-mes { background: linear-gradient(135deg, var(--gold), #f4dca0); color: #5a3d12; border-radius: 11px 11px 0 0; }
.tipo-cumple .entrada-fecha::before {   /* pastelito sobre la fecha */
  content: "🎂"; position: absolute; left: 50%; top: -24px; z-index: 2;
  transform: translateX(-50%);
  font-size: 1.35rem;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25));
  animation: saltito 2.4s ease-in-out infinite;
}
.tipo-cumple .chip-tipo { background: linear-gradient(135deg, var(--gold), #f4dca0); color: #5a3d12; }
.tipo-cumple h4 {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 2.5rem); line-height: 1.1;
  color: var(--red);
  padding-right: 58px;   /* espacio para los globos */
}
.cumple-edad { margin: 0 0 .4em; font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--gold); }
.cumple-cuenta {
  display: inline-flex; align-items: center;
  margin-top: 14px; padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff; font-size: .85rem; font-weight: 500;
  box-shadow: 0 8px 20px -8px var(--red-glow);
}
.cumple-cuenta.hoy { animation: latido 1.4s ease-in-out infinite; }
.banderines { position: absolute; left: 0; right: 0; top: 0; height: 40px; pointer-events: none; }
.banderines svg { position: absolute; left: 0; top: 0; width: 100%; height: 20px; overflow: visible; }
.banderines path { fill: none; stroke: var(--gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.banderines span {
  position: absolute;
  width: 14px; height: 18px; margin-left: -7px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  animation: bandera 2.6s ease-in-out infinite alternate;
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, .12);
}
@keyframes bandera { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.cumple-globos { position: absolute; right: 14px; top: 34px; width: 60px; height: 70px; pointer-events: none; }
.cumple-globos i {
  position: absolute; bottom: 20px;
  width: 22px; height: 27px;
  border-radius: 50% 50% 48% 52% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .75) 0 9%, transparent 24%), var(--c);
  box-shadow: inset -3px -4px 7px rgba(0, 0, 0, .18);
  animation: flotarGlobo 3.2s ease-in-out infinite alternate;
}
.cumple-globos i::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 22px; background: rgba(184, 143, 69, .6); }
.cumple-globos i:nth-child(1) { left: 0;    --c: var(--red-2); animation-delay: -.8s; }
.cumple-globos i:nth-child(2) { left: 19px; --c: var(--gold);  bottom: 30px; animation-delay: -1.9s; }
.cumple-globos i:nth-child(3) { left: 38px; --c: var(--red);   animation-delay: -.3s; }
@keyframes flotarGlobo { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-8px) rotate(4deg); } }
@keyframes saltito { 0%, 70%, 100% { transform: translateX(-50%) translateY(0); } 80% { transform: translateX(-50%) translateY(-6px); } }
.entrada.brillar { animation: brillar 1.8s ease; }
@keyframes brillar { 30% { box-shadow: 0 0 0 6px rgba(227, 194, 126, .55), 0 0 40px rgba(227, 194, 126, .6); } }
@media (max-width: 600px) {
  .entrada.tipo-cumple { margin: 12px -8px; padding: 44px 10px 20px; }
  .cumple-globos { right: 6px; transform: scale(.8); transform-origin: top right; }
}

.entrada.destacada .entrada-fecha { box-shadow: 0 0 0 3px var(--rose-soft), 0 0 30px var(--red-glow); }
.entrada.destacada h4 { color: var(--red); }
@media (max-width: 600px) {
  .agenda-anio {
    padding: 26px 16px 12px 44px;
    background: linear-gradient(90deg, transparent 35px, rgba(217, 48, 63, .22) 0, rgba(217, 48, 63, .22) 36px, transparent 0), var(--surface);
  }
  .agenda-anio::before { left: 11px; width: 14px; background-size: 14px 30px; }
  .entrada { grid-template-columns: 56px 1fr; gap: 12px; padding: 22px 0; }
  .entrada-fecha { width: 56px; }
  .ef-dia { font-size: 1.6rem; }
  .ef-mes { letter-spacing: .1em; font-size: .64rem; }
  .ef-texto { font-size: .62rem; }
}

/* Lector de cartas y poemas */
.lector {
  position: fixed; inset: 0; z-index: 72;
  padding: 70px 16px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(15, 5, 6, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s, visibility .4s;
}
.lector.abierto { opacity: 1; visibility: visible; }
.lector-cerrar { position: fixed; top: 16px; right: 16px; }
.lector-hoja {
  position: relative;
  max-width: 740px; margin: 0 auto;
  padding: clamp(44px, 7vw, 76px) clamp(24px, 7vw, 76px);
  border-radius: 6px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .7), transparent 50%),
    radial-gradient(circle at 90% 95%, rgba(233, 211, 164, .25), transparent 55%),
    var(--paper);
  color: var(--ink);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
  transform: translateY(30px);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.lector.abierto .lector-hoja { transform: none; }
.lector-hoja::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(184, 143, 69, .35); border-radius: 3px; pointer-events: none; }
.lector-hoja .eyebrow { color: #b88f45; }
.lector-hoja h3 { font-family: var(--font-script); font-weight: 400; font-size: clamp(2.3rem, 6vw, 3.3rem); line-height: 1.15; color: #b01027; margin: .2em 0 .1em; }
.lector-fecha { font-family: var(--font-serif); font-style: italic; color: #8a716f; margin: 0 0 28px; }
.lector-texto p { font-family: var(--font-serif); font-size: clamp(1rem, 2.2vw, 1.1rem); line-height: 1.9; margin: 0 0 1.1em; }
.lector-texto.poema p { font-family: var(--font-hand); font-size: clamp(1.25rem, 2.8vw, 1.5rem); line-height: 1.55; margin-bottom: 1.3em; }
.lector-texto strong { color: #b01027; font-weight: 500; }
.lector-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 740px; margin: 22px auto 0; color: rgba(255, 255, 255, .6); font-size: .85rem; }
.lector-nav button { padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-size: .88rem; transition: background .3s; }
.lector-nav button:hover { background: rgba(255, 79, 94, .55); }

/* ==========================================================================
   5. GALERÍA + LIGHTBOX
   ========================================================================== */
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.filtro {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .88rem;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.filtro:hover { transform: translateY(-2px); border-color: var(--red); }
.filtro.activo { background: var(--red); border-color: var(--red); color: #fff; }
/* Cuadrícula pareja (filas cuadradas; la altura de fila la fija script.js) */
.galeria-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .galeria-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .galeria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.g-item {
  position: relative;
  margin: 0;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--shadow);
  animation: entrarFoto .7s cubic-bezier(.2, .8, .2, 1) both;
}
.g-item.oculto, .g-item.fuera { display: none; }
.g-item img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; background: var(--rose-soft); transition: transform 1s cubic-bezier(.2, .8, .2, 1); -webkit-user-drag: none; }
.galeria-pie { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 30px; }
.galeria-album { color: var(--gold); font-size: .9rem; text-decoration: none; }
.galeria-album:hover { text-decoration: underline; }
.g-item:hover img, .g-item:focus-visible img { transform: scale(1.08); }
.g-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 16px 14px;
  background: linear-gradient(transparent, rgba(30, 8, 10, .82));
  color: #fff;
  font-family: var(--font-serif); font-style: italic; font-size: .95rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s, transform .4s;
}
.g-item:hover figcaption, .g-item:focus-visible figcaption { opacity: 1; transform: none; }
@media (hover: none) { .g-item figcaption { opacity: 1; transform: none; } }
@media (max-width: 600px) { .g-item { border-radius: 10px; } .g-item figcaption { padding: 30px 10px 8px; font-size: .8rem; } }
@keyframes entrarFoto { from { opacity: 0; transform: scale(.94) translateY(16px); } }

.lightbox {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: 70px 16px;
  background: rgba(15, 5, 6, .93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s, visibility .4s;
  overflow: hidden;
  touch-action: pan-y;
}
.lightbox.abierto { opacity: 1; visibility: visible; }
.lb-figura { margin: 0; text-align: center; max-width: min(1100px, 100%); }
.lb-figura img {
  max-width: 100%; max-height: 76vh;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  transform: scale(.94);
  cursor: zoom-in;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .25s;
}
.lightbox.abierto .lb-figura img { transform: none; }
.lightbox.abierto .lb-figura img.zoom { transform: scale(1.9); cursor: zoom-out; }
.lb-figura img.cambiando { opacity: 0; }
.lb-figura figcaption { color: #f5e9e8; margin-top: 16px; font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; }
.lb-figura small { display: block; font-family: var(--font-sans); font-style: normal; font-size: .75rem; letter-spacing: .15em; opacity: .6; margin-top: 4px; }
.lb-btn {
  position: absolute; z-index: 2;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff; font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center;
  transition: background .3s;
}
.lb-btn:hover { background: rgba(255, 79, 94, .6); }
.lb-cerrar { top: 16px; right: 16px; font-size: 1.1rem; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; } }

/* ==========================================================================
   6. RAZONES (tarjetas que giran)
   ========================================================================== */
.razones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 18px; }
.razon {
  aspect-ratio: 3 / 4;
  padding: 0; border: 0; background: none;
  perspective: 1000px;
  animation: entrarRazon .7s cubic-bezier(.2, .8, .2, 1) both;
}
.razon-inner {
  position: relative; display: block;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.3, 1.35, .5, 1);
}
.razon:hover .razon-inner { transform: rotateY(10deg) translateY(-4px); }
.razon.volteada .razon-inner { transform: rotateY(180deg); }
.razon.volteada:hover .razon-inner { transform: rotateY(172deg); }
.razon.destacada .razon-inner { animation: sacudir .6s ease; }
.razon-cara {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 18px;
  border-radius: 16px;
  text-align: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: var(--shadow);
}
.razon-frente { background: linear-gradient(145deg, #d9303f, #b01027 60%, #7a0a1c); color: #fff; overflow: hidden; }
.razon-frente::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 11px; }
.razon-frente::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .9s;
}
.razon:hover .razon-frente::after { transform: translateX(100%); }
.razon-corazon { font-size: 1.7rem; animation: latido 1.6s ease-in-out infinite; }
.razon-num { font-family: var(--font-serif); font-size: 2.2rem; line-height: 1; }
.razon-pista { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; opacity: .82; }
.razon-reverso { background: var(--paper); color: var(--ink); border: 1px solid #e9d3a4; transform: rotateY(180deg); }
.razon-reverso small { position: absolute; top: 14px; font-size: .64rem; letter-spacing: .2em; color: #b88f45; }
.razon-reverso p { font-family: var(--font-hand); font-size: 1.28rem; line-height: 1.35; margin: 0; }
.razones-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 44px; }
#razones-progreso { font-family: var(--font-serif); font-style: italic; }
@keyframes latido { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
@keyframes entrarRazon { from { opacity: 0; transform: translateY(24px) scale(.95); } }
@keyframes sacudir { 25% { transform: rotate(-4deg) scale(1.05); } 75% { transform: rotate(4deg) scale(1.05); } }
@media (max-width: 480px) {
  .razones-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .razon-reverso p { font-size: 1.08rem; }
}

/* ==========================================================================
   7. MÚSICA
   ========================================================================== */
.musica { background: radial-gradient(ellipse at top, #3d0d16, #120709 72%); color: #f5e9e8; overflow: hidden; }
.musica .titulo-seccion h2 { color: #ff8080; }
.musica .eyebrow { color: #e3c27e; }
.musica-dedicatoria { font-family: var(--font-script); font-size: clamp(1.6rem, 4vw, 2.2rem) !important; color: #e9d3a4 !important; line-height: 1.2; }
.reproductor { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 64px); max-width: 960px; margin: 0 auto; }
.pantalla { display: grid; place-items: center; min-width: 0; }
.yt-marco {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, .8), 0 0 80px -15px rgba(255, 79, 94, .5);
}
.yt-marco iframe { display: block; width: 100%; height: 100%; border: 0; }
.vinilo {
  position: relative;
  width: clamp(210px, 32vw, 300px); aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #111 0 2px, #1d1d1d 3px 4px);
  display: grid; place-items: center;
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, .75), 0 0 0 8px rgba(255, 255, 255, .03), 0 0 80px -10px rgba(255, 79, 94, .35);
  animation: girar 6s linear infinite paused;
}
.vinilo::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, .09) 25%, transparent 30% 70%, rgba(255, 255, 255, .07) 75%, transparent 80%);
}
body.sonando .vinilo { animation-play-state: running; }
.vinilo-label {
  position: relative;
  width: 38%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  border: 3px solid #b01027;
  background: radial-gradient(circle at 35% 35%, #ff8080, #b01027);
  display: grid; place-items: center;
}
.vinilo-label::before { content: "❤"; color: #fff; font-size: 1.6rem; }
.vinilo-label img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes girar { to { transform: rotate(360deg); } }
.rep-dedicatoria { font-family: var(--font-script); font-size: clamp(1.8rem, 4vw, 2.4rem); color: #e9d3a4; margin: 0 0 8px; line-height: 1.2; }
.rep-info h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.rep-artista { margin: 0; opacity: .7; }
.rep-dedicatoria:empty { display: none; }
.rep-controles { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.rep-progreso { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.ctrl {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .05);
  color: #f5e9e8;
  display: grid; place-items: center;
  transition: background .3s, transform .3s;
}
.ctrl:hover { background: rgba(255, 79, 94, .35); transform: scale(1.06); }
.ctrl svg { width: 18px; height: 18px; fill: currentColor; }
.play {
  width: 64px; height: 64px; flex: none;
  border-radius: 50%; border: 0;
  background: linear-gradient(135deg, #ff3b4a, #b01027);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -8px rgba(255, 59, 74, .7);
  transition: transform .3s;
}
.play:hover { transform: scale(1.07); }
.play svg { width: 26px; height: 26px; fill: currentColor; }
.ico-pausa, body.sonando .ico-play { display: none; }
body.sonando .ico-pausa { display: block; }
body.sonando .play { animation: pulso 2s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 74, .6); } 100% { box-shadow: 0 0 0 22px rgba(255, 59, 74, 0); } }
.barra { flex: 1; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .15); cursor: pointer; position: relative; }
.barra::before { content: ""; position: absolute; inset: -10px 0; }
.barra-progreso { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8080, #e3c27e); }
.tiempo { font-size: .78rem; opacity: .7; font-variant-numeric: tabular-nums; min-width: 34px; }
.ecualizador { display: flex; align-items: flex-end; gap: 4px; height: 36px; margin-top: 24px; }
.ecualizador span { width: 5px; height: 18%; border-radius: 3px; background: linear-gradient(#e3c27e, #ff3b4a); transition: height .4s; }
body.sonando .ecualizador span { animation: eq .9s ease-in-out infinite alternate; }
.ecualizador span:nth-child(3n)   { animation-duration: .7s; }
.ecualizador span:nth-child(3n+1) { animation-duration: 1.1s; animation-delay: -.3s; }
.ecualizador span:nth-child(4n)   { animation-duration: .8s; animation-delay: -.5s; }
.ecualizador span:nth-child(5n)   { animation-duration: 1.3s; animation-delay: -.2s; }
@keyframes eq { from { height: 12%; } to { height: 100%; } }

/* Lista de canciones */
.playlist { list-style: none; max-width: 960px; margin: 48px auto 0; padding: 0; display: grid; gap: 8px; }
.playlist li { display: flex; align-items: center; gap: 8px; }
.pista {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  color: #f5e9e8;
  text-align: left;
  transition: background .3s, border-color .3s;
}
.pista:hover { background: rgba(255, 255, 255, .07); }
.pista.activa { background: linear-gradient(90deg, rgba(255, 59, 74, .24), rgba(255, 59, 74, .04)); border-color: rgba(255, 128, 128, .4); }
.pista-num { min-width: 26px; font-family: var(--font-serif); opacity: .6; }
.pista-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.pista-info strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pista-info small { font-size: .8rem; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pista-eq { display: none; align-items: flex-end; gap: 3px; height: 16px; }
.pista-eq i { width: 3px; height: 35%; border-radius: 2px; background: #ff8080; }
.pista.activa .pista-eq { display: flex; }
body.sonando .pista.activa .pista-eq i { animation: eq .8s ease-in-out infinite alternate; }
.pista-eq i:nth-child(2) { animation-delay: -.3s; }
.pista-eq i:nth-child(3) { animation-delay: -.55s; }
.pista-yt {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  display: grid; place-items: center;
  color: #f5e9e8; text-decoration: none;
  opacity: .6;
  transition: opacity .3s, background .3s;
}
.pista-yt:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.playlist-aviso { justify-content: center; padding: 18px; font-family: var(--font-serif); font-style: italic; opacity: .7; }
.playlist-pie { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 26px; }
.btn-claro { color: #ff8080; border-color: rgba(255, 128, 128, .6); }
.btn-claro:hover { background: #ff4f5e; border-color: #ff4f5e; color: #fff; }
.playlist-enlace { color: #e9d3a4; font-size: .9rem; text-decoration: none; opacity: .8; transition: opacity .3s; }
.playlist-enlace:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 760px) {
  .reproductor { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pantalla, .rep-info { width: 100%; }
  .rep-controles { justify-content: center; }
  .ecualizador { justify-content: center; }
}

/* Botón flotante de música */
.fab-musica {
  position: fixed; right: 18px; bottom: 18px; z-index: 55;
  width: 54px; height: 54px;
  border-radius: 50%; border: 0;
  background: linear-gradient(135deg, #ff3b4a, #b01027);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -8px rgba(176, 16, 39, .6);
  opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .5s, transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.fab-musica.visible { opacity: 1; transform: none; pointer-events: auto; }
.fab-musica svg { width: 22px; height: 22px; fill: currentColor; }
.mini-eq { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.mini-eq i { width: 3px; height: 30%; background: #fff; border-radius: 2px; animation: eq .8s ease-in-out infinite alternate; }
.mini-eq i:nth-child(2) { animation-delay: -.3s; } .mini-eq i:nth-child(3) { animation-delay: -.6s; } .mini-eq i:nth-child(4) { animation-delay: -.15s; }
body.sonando .fab-musica .ico-nota { display: none; }
body.sonando .fab-musica .mini-eq { display: flex; }

/* ==========================================================================
   VIDEOS
   ========================================================================== */
.videos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.video-card { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.video-marco { aspect-ratio: 16 / 9; background: #000; }
.video-marco iframe, .video-marco video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.video-card figcaption { padding: 14px 20px; font-family: var(--font-serif); font-style: italic; }

/* ==========================================================================
   9. CIERRE
   ========================================================================== */
.final {
  position: relative;
  padding: clamp(90px, 13vw, 150px) 0 40px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg), var(--bg-alt));
  overflow: hidden;
}
.final-foto { position: relative; width: min(320px, 76vw); margin: 0 auto 56px; }
.js .final-foto[data-reveal] { transform: translateY(40px) rotate(-3deg); }
.js .final-foto[data-reveal].visible, .final-foto { transform: rotate(-3deg); }
.final-foto::before {
  content: ""; position: absolute; top: -14px; left: 50%; z-index: 1;
  width: 110px; height: 30px; margin-left: -55px;
  background: rgba(247, 215, 211, .75);
  transform: rotate(4deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.final-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--rose-soft); }
.final-foto.horizontal { width: min(660px, 92vw); }
.final-foto.horizontal img { aspect-ratio: 3 / 2; }
.final h2 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 6.2rem);
  line-height: 1.1;
  color: var(--red);
  margin: 0 auto .3em;
  max-width: 900px;
}
.final-fecha { font-family: var(--font-serif); font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: .15em; color: var(--gold); margin: 0 0 24px; }
.final-fecha small { display: block; font-family: var(--font-sans); font-size: .8rem; letter-spacing: .08em; color: var(--muted); margin-top: 4px; }
.final-mensaje { max-width: 620px; margin: 0 auto 30px; color: var(--muted); font-size: 1.05rem; }
.firma { margin: 0 0 44px; }
.firma span { display: block; font-family: var(--font-script); font-size: clamp(2rem, 5vw, 2.8rem); color: var(--red); line-height: 1.2; }
.firma strong { display: block; font-weight: 500; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-top: 10px; }
.pie { margin: 90px 0 0; font-size: .82rem; color: var(--muted); }
.pie a { color: var(--red); }

/* ---------- Aviso flotante ---------- */
.toast {
  position: fixed; left: 50%; bottom: 90px; z-index: 95;
  max-width: calc(100% - 32px);
  padding: 12px 22px;
  border-radius: 999px;
  background: #2a1012;
  color: #fff;
  font-size: .9rem;
  text-align: center;
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate(-50%, 20px);
  pointer-events: none;
  transition: opacity .4s, transform .4s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}