/* Danna XV — bosque de las Tierras Altas.
   Layout: una columna móvil (máx. 520px) sobre fondo de bosque oscuro;
   las fotos de Danna marcan el ritmo entre secciones, con follaje en parallax a los lados. */

:root {
  /* Paleta (guía de estilo) */
  --bg: #0A120D;          /* fondo principal */
  --surface: #1F2B1F;     /* tarjetas / secciones */
  --fg: #E8E3D7;          /* texto corrido (pergamino) */
  --muted: #9CA389;       /* fechas, datos secundarios (liquen) */
  --gold: #B89947;        /* dorado celta: títulos, filetes, íconos */
  --wisp: #45A092;        /* fuego fatuo: brillos y estados activos */
  --btn: #3A4A31;         /* botón (verde helecho) */
  --copper: #8C593B;      /* acento terroso */
  --white: #FFFFFF;
  /* Tonos fijos (no cambian dentro del pergamino) */
  --gold-raw: #B89947;
  --cream-raw: #E8E3D7;
  --forest-raw: #1F2B1F;
  /* Pergamino: espacios de descanso visual */
  --ink: #26301F;         /* texto sobre pergamino */
  --ink-soft: #55603F;    /* secundario sobre pergamino */
  --bronze: #7A5C1E;      /* dorado oscurecido para títulos sobre pergamino */

  /* Tipografía */
  --f-display: "Cinzel Decorative", "Cinzel", "Trajan Pro", Georgia, serif;
  --f-sub: "Cormorant Garamond", "Garamond", Georgia, serif;
  --f-text: "Lora", Georgia, "Times New Roman", serif;

  --gutter: 20px;
  --col: 520px;
  --ease: cubic-bezier(.22,.61,.36,1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.6 var(--f-text);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--wisp); outline-offset: 3px; }

.page {
  position: relative;
  max-width: var(--col);
  margin-inline: auto;
  overflow: hidden;                 /* el follaje lateral nunca genera scroll horizontal */
  overflow: clip;
  background:
    url("../assets/bg-textura.jpg") center top / 420px repeat,
    var(--bg);
  background-blend-mode: multiply;
  box-shadow: 0 0 80px rgba(0,0,0,.6);
}

/* ---------- Tipografía base ---------- */
.eyebrow {
  margin: 0;
  font: 500 13px/1 var(--f-text);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 2px #000, 0 0 14px rgba(10,18,13,.9);
}
.title {
  margin: 0;
  font: 400 30px/1.15 var(--f-display);
  color: var(--gold);
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.title--sm { font-size: 26px; }
.sub {
  margin: 0;
  font: italic 500 20px/1.3 var(--f-sub);
  color: var(--muted);
  text-wrap: balance;
}
.text { margin: 0; font-size: 15px; line-height: 1.65; max-width: 34ch; text-wrap: pretty; }
.muted { color: var(--muted); }
strong { color: var(--fg); font-weight: 500; }

/* ---------- Secciones ---------- */
.section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-block: 56px;
  padding-inline: var(--gutter);
  text-align: center;
}

.divider {
  width: 78%;
  margin-inline: auto;
  opacity: .9;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: 40px 64px;
  padding-inline: var(--gutter);
  overflow: hidden;
}
.hero__scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg {
  position: absolute;
  inset: -6% 0 auto 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}
.hero__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 50% 30%, transparent 0 40%, rgba(10,18,13,.55) 75%),
    linear-gradient(180deg, rgba(10,18,13,.55) 0%, rgba(10,18,13,.15) 30%, rgba(10,18,13,.55) 72%, var(--bg) 100%);
}
.hero__leaf {
  position: absolute;
  top: 18%;
  width: 46%;
  max-width: 240px;
  will-change: transform;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)) brightness(.82) saturate(.9);
}
.hero__leaf--l { left: -16%; }
.hero__leaf--r { right: -16%; top: 44%; }

.wisps {
  position: absolute;
  width: 160%;
  max-width: none;
  left: -30%;
  mix-blend-mode: screen;
  pointer-events: none;
  --o: .8;
  opacity: var(--o);
  animation: wisp-float 9s ease-in-out infinite alternate, wisp-breathe 3.6s ease-in-out infinite alternate;
}
.wisps--a { top: 8%; }
.wisps--b { top: 58%; --o: .5; --sx: -1; animation-duration: 12s, 4.2s; animation-delay: -3s, -1s; }
@keyframes wisp-float {
  from { transform: translate3d(0, 0, 0) scaleX(var(--sx, 1)); }
  to   { transform: translate3d(4%, -28px, 0) scaleX(var(--sx, 1)); }
}
@keyframes wisp-breathe {
  from { opacity: calc(var(--o) * .6); }
  to   { opacity: var(--o); }
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.hero__mono {
  width: 88px;
  filter: drop-shadow(0 0 14px rgba(184,153,71,.35));
}
.hero__name {
  margin: -4px 0 0;
  font: 700 56px/1 var(--f-display);
  color: var(--gold);
  letter-spacing: .02em;
  background: linear-gradient(180deg, #E6D08A 0%, var(--gold) 55%, #7C6428 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.6));
}
.hero__lede {
  margin: 4px 0 0;
  max-width: 30ch;
  font: italic 400 21px/1.4 var(--f-sub);
  color: var(--fg);
  text-wrap: balance;
}

/* Primera foto: marco dorado delgado con ramitas que se mecen */
.thin-frame {
  position: relative;
  width: min(78%, 300px);
  margin: 8px 0 6px;
  padding: 7px;
  border: 1px solid var(--gold);
  background: rgba(10,18,13,.6);
  box-shadow:
    0 0 0 4px rgba(10,18,13,.55),
    0 0 0 5px rgba(184,153,71,.45),
    0 22px 40px rgba(0,0,0,.6),
    0 0 40px rgba(69,160,146,.15);
}
.thin-frame__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.thin-frame__sprig {
  position: absolute;
  width: 92px;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
  animation: sway 6s ease-in-out infinite alternate;
}
.thin-frame__sprig--tl { left: -34px; top: -40px; transform-origin: 20% 10%; }
.thin-frame__sprig--br { right: -34px; bottom: -44px; transform-origin: 80% 90%; animation-duration: 7.5s; animation-delay: -2s; }
@keyframes sway {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(5deg); }
}

/* Reproductor */
.player {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 300px);
  padding: 10px 16px 10px 10px;
  background: linear-gradient(180deg, rgba(31,43,31,.88), rgba(10,18,13,.88));
  border: 1px solid rgba(184,153,71,.55);
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.player__btn {
  flex: none;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: radial-gradient(circle at 40% 35%, var(--btn), #101810);
  color: var(--gold);
  cursor: pointer;
  transition: box-shadow .3s var(--ease), color .3s;
}
.player__btn svg { width: 22px; height: 22px; fill: currentColor; }
.player__btn .i-pause { display: none; }
.player.is-playing .player__btn .i-play { display: none; }
.player.is-playing .player__btn .i-pause { display: block; }
.player.is-playing .player__btn { color: var(--white); box-shadow: 0 0 0 4px rgba(69,160,146,.18), 0 0 22px rgba(69,160,146,.45); }
.player__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.player__title { font: italic 600 18px/1 var(--f-sub); color: var(--fg); }
.player__bar { display: block; height: 2px; background: rgba(184,153,71,.25); }
.player__fill { display: block; height: 100%; width: 0; background: var(--gold); transition: width .25s linear; }
.player__note { font-size: 12px; color: var(--muted); letter-spacing: .04em; }

/* ---------- CONTADOR ---------- */
.medallions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin-top: 10px;
}
.medallion {
  position: relative;
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #34452f 0%, var(--surface) 45%, #0d150f 100%);
  border: 1px solid var(--gold);
  box-shadow:
    inset 0 0 0 4px var(--bg),
    inset 0 0 0 5px rgba(184,153,71,.45),
    inset 0 -8px 16px rgba(0,0,0,.5),
    0 0 20px rgba(69,160,146,.14);
}
.medallion::before {           /* anillo de puntos celta */
  content: "";
  position: absolute; inset: 9px;
  border-radius: 50%;
  border: 1px dotted rgba(184,153,71,.4);
}
.medallion__n {
  font: 400 26px/1 var(--f-display);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.medallion__l {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- INVITADO ---------- */
.guest { gap: 12px; }
.seats {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  margin: 4px 0;
}
.seats__n {
  font: 700 64px/1 var(--f-display);
  color: var(--gold);
  text-shadow: 0 0 26px rgba(69,160,146,.35);
}
.seats__l { font: italic 500 26px/1 var(--f-sub); color: var(--fg); }

/* ---------- FOTOS A ANCHO COMPLETO ---------- */
.photo-full {
  position: relative;
  margin: 0;
  overflow: hidden;
  overflow: clip;
}
.photo-full__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* se funde con las secciones de arriba y abajo */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.photo-full__leaf {
  position: absolute;
  top: 6%;
  width: 34%;
  max-width: 180px;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55)) brightness(.88);
}
.photo-full__leaf--l { left: -12%; }
.photo-full__leaf--r { right: -12%; top: 48%; }

/* ---------- TARJETAS DE EVENTO ---------- */
.events { gap: 22px; }
.card {
  position: relative;
  width: 100%;
  max-width: 360px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 22px 28px;
  background: linear-gradient(180deg, rgba(31,43,31,.96), rgba(22,32,23,.96));
  border: 1px solid rgba(184,153,71,.4);
  border-radius: 3px;
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
}
.card::before, .card::after {     /* esquinas doradas */
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid var(--gold);
}
.card::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.card::after  { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.card__icon { width: 64px; height: 64px; object-fit: contain; }
.card .text { margin-bottom: 6px; }

/* ---------- BOTONES ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px;
  padding: 12px 22px;
  font: 500 14px/1.2 var(--f-text);
  letter-spacing: .06em;
  color: var(--fg);
  text-decoration: none;
  background: radial-gradient(120% 140% at 50% 0%, var(--btn) 0%, #1c2618 70%, #0d130d 100%);
  border: 1px solid var(--gold);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(140,89,59,.6);
  transition: box-shadow .35s var(--ease), color .35s var(--ease), transform .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.btn:hover, .btn:active, .btn:focus-visible {
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(140,89,59,.6), inset 0 0 18px rgba(69,160,146,.55), 0 0 18px rgba(69,160,146,.25);
}
.btn:hover svg, .btn:active svg { stroke: var(--white); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; }
.btn--primary {
  min-height: 54px;
  padding-inline: 30px;
  font-size: 16px;
  color: var(--bg);
  font-weight: 500;
  background: linear-gradient(180deg, #D9BE6E 0%, var(--gold) 55%, #8E7230 100%);
  border-color: #E6D08A;
  box-shadow: 0 0 0 4px rgba(184,153,71,.18), 0 10px 26px rgba(0,0,0,.45);
  animation: glow 3.2s ease-in-out infinite;
}
.btn--primary svg { stroke: var(--bg); stroke-width: 2.2; }
.btn--primary:hover, .btn--primary:active, .btn--primary:focus-visible {
  color: var(--white);
  background: linear-gradient(180deg, #4f6a5d 0%, #2c5048 100%);
  box-shadow: inset 0 0 18px rgba(69,160,146,.7), 0 0 26px rgba(69,160,146,.45);
}
.btn--primary:hover svg, .btn--primary:active svg { stroke: var(--white); }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(184,153,71,.18), 0 10px 26px rgba(0,0,0,.45); }
  50%      { box-shadow: 0 0 0 7px rgba(69,160,146,.16), 0 0 30px rgba(69,160,146,.3); }
}

/* ---------- VESTUARIO ---------- */
.dress__icon {
  width: 120px; height: 80px;
  fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(184,153,71,.3));
}

/* ---------- ITINERARIO ---------- */
.timeline {
  position: relative;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  width: 100%;
  max-width: 360px;
  display: flex; flex-direction: column; gap: 18px;
  text-align: left;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 27px; top: 24px; bottom: 24px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
  opacity: .6;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.step__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2d3b2a, var(--bg));
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 4px var(--bg), 0 0 16px rgba(69,160,146,.18);
}
.step__icon img { width: 34px; height: 34px; object-fit: contain; }
.step__icon svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.step__name { font: italic 500 20px/1.2 var(--f-sub); color: var(--fg); }
.step__time { font-size: 13px; color: var(--gold); letter-spacing: .06em; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- LLUVIA DE SOBRES ---------- */
.envelopes { overflow: hidden; }
.rain { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rain img {
  position: absolute;
  top: -80px;
  left: var(--x);
  width: 40px;
  opacity: 0;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
  animation: fall var(--t) linear var(--dl) infinite;
}
@keyframes fall {
  0%   { transform: translateY(0) rotate(var(--r)); opacity: 0; }
  10%  { opacity: .6; }
  85%  { opacity: .5; }
  100% { transform: translateY(820px) rotate(calc(var(--r) * -1)); opacity: 0; }
}
.envelopes > :not(.rain) { position: relative; z-index: 1; }
.envelope {
  width: min(70%, 260px);
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.6));
  animation: hover-env 5s ease-in-out infinite alternate;
}
@keyframes hover-env {
  from { transform: translate3d(0, 0, 0) rotate(-2deg); }
  to   { transform: translate3d(0, -10px, 0) rotate(2deg); }
}
.quote {
  margin: 6px 0 0;
  max-width: 28ch;
  font: italic 500 23px/1.35 var(--f-sub);
  color: var(--fg);
  text-wrap: balance;
}
.quote::before, .quote::after { color: var(--gold); }
.quote::before { content: "« "; }
.quote::after { content: " »"; }

/* ---------- PERGAMINO (descanso visual) ----------
   Fondo claro con bg-textura; los bordes se funden con el bosque.
   Redefine los tokens de color, así cada componente se adapta solo. */
.parchment {
  --fg: var(--ink);
  --muted: var(--ink-soft);
  --gold: var(--bronze);
  isolation: isolate;
  color: var(--fg);
  padding-block: 76px;
}
.parchment::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(244,238,224,.74), rgba(238,230,210,.7)),
    url("../assets/bg-textura.jpg") center / 520px repeat;
  /* borde de papel rasgado arriba y abajo */
  -webkit-clip-path: polygon(0.0% 6px, 3.85% 4px, 7.69% 10px, 11.54% 3px, 15.38% 8px, 19.23% 6px, 23.08% 3px, 26.92% 8px, 30.77% 2px, 34.62% 7px, 38.46% 3px, 42.31% 3px, 46.15% 7px, 50.0% 12px, 53.85% 3px, 57.69% 5px, 61.54% 10px, 65.38% 13px, 69.23% 9px, 73.08% 7px, 76.92% 14px, 80.77% 3px, 84.62% 12px, 88.46% 5px, 92.31% 4px, 96.15% 3px, 100.0% 6px, 100.0% calc(100% - 12px), 96.15% calc(100% - 4px), 92.31% calc(100% - 9px), 88.46% calc(100% - 10px), 84.62% calc(100% - 6px), 80.77% calc(100% - 9px), 76.92% calc(100% - 3px), 73.08% calc(100% - 3px), 69.23% calc(100% - 4px), 65.38% calc(100% - 10px), 61.54% calc(100% - 7px), 57.69% calc(100% - 6px), 53.85% calc(100% - 9px), 50.0% calc(100% - 7px), 46.15% calc(100% - 6px), 42.31% calc(100% - 12px), 38.46% calc(100% - 10px), 34.62% calc(100% - 5px), 30.77% calc(100% - 9px), 26.92% calc(100% - 8px), 23.08% calc(100% - 13px), 19.23% calc(100% - 11px), 15.38% calc(100% - 5px), 11.54% calc(100% - 14px), 7.69% calc(100% - 3px), 3.85% calc(100% - 7px), 0.0% calc(100% - 11px));
          clip-path: polygon(0.0% 6px, 3.85% 4px, 7.69% 10px, 11.54% 3px, 15.38% 8px, 19.23% 6px, 23.08% 3px, 26.92% 8px, 30.77% 2px, 34.62% 7px, 38.46% 3px, 42.31% 3px, 46.15% 7px, 50.0% 12px, 53.85% 3px, 57.69% 5px, 61.54% 10px, 65.38% 13px, 69.23% 9px, 73.08% 7px, 76.92% 14px, 80.77% 3px, 84.62% 12px, 88.46% 5px, 92.31% 4px, 96.15% 3px, 100.0% 6px, 100.0% calc(100% - 12px), 96.15% calc(100% - 4px), 92.31% calc(100% - 9px), 88.46% calc(100% - 10px), 84.62% calc(100% - 6px), 80.77% calc(100% - 9px), 76.92% calc(100% - 3px), 73.08% calc(100% - 3px), 69.23% calc(100% - 4px), 65.38% calc(100% - 10px), 61.54% calc(100% - 7px), 57.69% calc(100% - 6px), 53.85% calc(100% - 9px), 50.0% calc(100% - 7px), 46.15% calc(100% - 6px), 42.31% calc(100% - 12px), 38.46% calc(100% - 10px), 34.62% calc(100% - 5px), 30.77% calc(100% - 9px), 26.92% calc(100% - 8px), 23.08% calc(100% - 13px), 19.23% calc(100% - 11px), 15.38% calc(100% - 5px), 11.54% calc(100% - 14px), 7.69% calc(100% - 3px), 3.85% calc(100% - 7px), 0.0% calc(100% - 11px));
}
.parchment .title { text-shadow: none; }
.parchment .sub { font-weight: 600; }

/* Botón oscuro para usar sobre pergamino */
.btn--ink {
  color: var(--cream-raw);
  background: radial-gradient(120% 140% at 50% 0%, #3A4A31 0%, var(--forest-raw) 70%, #121a12 100%);
  border-color: var(--gold-raw);
  box-shadow: 0 8px 20px rgba(38,48,31,.35);
}
.btn--ink svg { stroke: var(--gold-raw); }
.hint { margin: 0; font-size: 12px; color: var(--muted); }

/* ---------- PLAYLIST ---------- */
.eq {
  display: flex; align-items: flex-end; gap: 5px;
  height: 46px;
  margin-bottom: 4px;
}
.eq span {
  width: 6px; height: 100%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--bronze), #3A4A31);
  transform-origin: bottom;
  animation: eq 1.1s ease-in-out infinite alternate;
}
.eq span:nth-child(2) { animation-duration: .8s;  animation-delay: -.3s; }
.eq span:nth-child(3) { animation-duration: 1.3s; animation-delay: -.6s; }
.eq span:nth-child(4) { animation-duration: .9s;  animation-delay: -.2s; }
.eq span:nth-child(5) { animation-duration: 1.2s; animation-delay: -.9s; }
.eq span:nth-child(6) { animation-duration: .7s;  animation-delay: -.4s; }
.eq span:nth-child(7) { animation-duration: 1s;   animation-delay: -.7s; }
@keyframes eq {
  from { transform: scaleY(.18); }
  to   { transform: scaleY(1); }
}

/* ---------- ÁLBUM COMPARTIDO ---------- */
.album { padding-top: 96px; }
.polaroids {
  position: relative;
  width: 250px; height: 190px;
  margin-bottom: 8px;
}
.polaroid {
  position: absolute;
  top: 10px;
  width: 112px;
  padding: 7px 7px 24px;
  background: #FBF8F1;
  box-shadow: 0 10px 22px rgba(38,48,31,.35);
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.polaroid--1 { left: 0;    transform: rotate(-12deg); animation: bob 5s ease-in-out infinite alternate; }
.polaroid--2 { left: 69px; top: 0; z-index: 2; transform: rotate(2deg); animation: bob 6s ease-in-out -2s infinite alternate; }
.polaroid--3 { right: 0;   transform: rotate(11deg); animation: bob 5.5s ease-in-out -1s infinite alternate; }
@keyframes bob {
  from { margin-top: 0; }
  to   { margin-top: -6px; }
}
.album__cam {
  position: absolute;
  left: 50%; bottom: -6px;
  z-index: 3;
  width: 58px; height: 58px;
  margin-left: -29px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3A4A31, var(--forest-raw));
  border: 1px solid var(--gold-raw);
  box-shadow: 0 0 0 5px rgba(122,92,30,.18), 0 8px 18px rgba(38,48,31,.4);
}
.album__cam svg { width: 26px; height: 26px; fill: none; stroke: var(--gold-raw); stroke-width: 1.6; stroke-linejoin: round; }
.album__steps {
  margin: 4px 0 6px;
  padding: 0;
  list-style: none;
  counter-reset: paso;
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 300px;
  text-align: left;
  font-size: 14px;
}
.album__steps li {
  counter-increment: paso;
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline;
}
.album__steps li::before {
  content: counter(paso);
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--bronze);
  font: 400 13px/1 var(--f-display);
  color: var(--bronze);
}
.hashtag { margin: 0; font: 400 18px/1 var(--f-display); color: var(--bronze); letter-spacing: .04em; }

/* ---------- CONFIRMACIÓN ---------- */
.rsvp {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%;
  padding: 34px 20px;
  border-top: 1px solid rgba(184,153,71,.35);
  border-bottom: 1px solid rgba(184,153,71,.35);
  background: radial-gradient(80% 100% at 50% 50%, rgba(69,160,146,.12), transparent 70%);
}

/* ---------- LUCIÉRNAGAS (bucle en todo el scroll) ---------- */
.fireflies {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}
.firefly {
  position: absolute;
  width: var(--s, 5px); height: var(--s, 5px);
  border-radius: 50%;
  background: radial-gradient(circle, #E9FFF9 0%, #7FE0CE 35%, rgba(69,160,146,0) 70%);
  box-shadow: 0 0 10px 3px rgba(69,160,146,.45);
  opacity: 0;
  animation:
    firefly-drift var(--dur, 12s) ease-in-out var(--delay, 0s) infinite alternate,
    firefly-blink var(--blink, 3s) ease-in-out var(--delay, 0s) infinite;
}
.firefly--gold {
  background: radial-gradient(circle, #FFF6D6 0%, #E2C26A 35%, rgba(184,153,71,0) 70%);
  box-shadow: 0 0 10px 3px rgba(184,153,71,.4);
}
@keyframes firefly-drift {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(var(--dx1, 20px), var(--dy1, -30px), 0); }
  66%  { transform: translate3d(var(--dx2, -15px), var(--dy2, -60px), 0); }
  100% { transform: translate3d(var(--dx3, 10px), var(--dy3, -90px), 0); }
}
@keyframes firefly-blink {
  0%, 100% { opacity: 0; }
  40%, 60% { opacity: var(--o, .85); }
}

/* ---------- CIERRE ---------- */
.closing {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-block: 40px calc(64px + env(safe-area-inset-bottom, 0px));
  padding-inline: var(--gutter);
  text-align: center;
  overflow: hidden;
}
.wisps--c { top: 18%; --o: .3; }
.closing__text {
  position: relative;
  margin: 0;
  max-width: 28ch;
  font: italic 400 22px/1.4 var(--f-sub);
  text-wrap: balance;
}
.closing__sign { position: relative; margin: 0; font: 400 22px/1 var(--f-display); color: var(--gold); }
.closing__mono { position: relative; width: 120px; margin-top: 10px; filter: drop-shadow(0 0 18px rgba(184,153,71,.35)); }

/* ---------- BOTÓN FLOTANTE DE MÚSICA ---------- */
.music-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: radial-gradient(circle at 40% 35%, var(--btn), var(--bg));
  color: var(--gold);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.55);
}
.music-fab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.music-fab.is-playing { color: var(--white); box-shadow: 0 0 0 4px rgba(69,160,146,.2), 0 0 22px rgba(69,160,146,.5); }
.music-fab.is-playing svg { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- REVELADO AL HACER SCROLL ----------
   Solo se oculta si el JS está activo (clase .js en <html>); sin JS todo queda visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Pantallas más anchas: mantener la columna de invitación ---------- */
@media (min-width: 560px) {
  body {
    background:
      linear-gradient(rgba(10,18,13,.82), rgba(10,18,13,.92)),
      url("../assets/bg-bosque-niebla.jpg") center / cover fixed;
  }
}

/* "Quitar animaciones" / ahorro de energía en Android activan prefers-reduced-motion.
   En vez de apagar todo, se suaviza: aparecen con fundido corto, sin saltos ni caída de sobres. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: translateY(10px); transition-duration: .8s, .8s; }
  .rain { display: none; }
  .envelope, .btn--primary, .music-fab.is-playing svg { animation: none; }
  .wisps { animation-duration: 18s, 6s; }
  .firefly { animation: firefly-blink var(--blink, 3s) ease-in-out var(--delay, 0s) infinite; }
}