/* ============================================================
   Invitación XV Años · Yazmin Ortiz Garcia
   Paleta inspirada en el vestido: Navy Blue #0B2249
   ============================================================ */

:root {
  --navy:        #0B2249;
  --navy-deep:   #071634;
  --navy-soft:   #15315e;
  --silver:      #C9D4E5;
  --gold:        #C9A86A;
  --gold-soft:   #E2D2A8;
  --cream:       #F4F1EA;
  --text:        #20283a;

  --font-script: 'Great Vibes', cursive;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Montserrat', system-ui, sans-serif;

  --maxw: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---------- Tipografía / utilidades ---------- */
.section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 3rem);
  color: var(--navy);
  text-align: center;
  letter-spacing: .02em;
  margin: 0 0 .3em;
}
.section-title.light { color: var(--cream); }
.section-title::after {
  content: "";
  display: block;
  width: 70px; height: 2px;
  margin: .55em auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.ornament {
  font-size: 2.4rem;
  text-align: center;
  color: var(--gold);
  margin-bottom: .2em;
}
.ornament.light { color: var(--gold-soft); }

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  margin-top: 1rem;
  padding: .7em 1.6em;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  background: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 40px;
  transition: background .3s, color .3s, transform .2s;
}
.btn:hover { background: var(--gold); color: var(--navy-deep); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--cream); }
.btn.ghost:hover { background: var(--gold); color: var(--navy-deep); }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---------- Parallax base ---------- */
.parallax-layer {
  position: absolute;
  inset: -50% 0;          /* extra alto para que el recorrido del parallax no muestre bordes */
  will-change: transform;
  pointer-events: none;
}

/* ============================================================
   HERO / PORTADA
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--cream);
}
.hero__bg {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(21,49,94,.55), transparent 60%),
    linear-gradient(160deg, var(--navy-deep), var(--navy) 55%, var(--navy-soft));
  background-size: cover;
}
/* Si pones una foto en assets/img/hero-bg.jpg, descomenta:
.hero__bg { background-image: url('../assets/img/hero-bg.jpg'); background-size: cover; background-position: center; }
*/
.hero__overlay {
  background: radial-gradient(ellipse at center, transparent 35%, rgba(7,22,52,.65));
}
.hero__sparkles {
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.5px 1.5px at 75% 20%, rgba(201,168,106,.9), transparent),
    radial-gradient(1px 1px at 60% 65%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(201,212,229,.9), transparent),
    radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 10% 60%, rgba(201,168,106,.8), transparent);
  background-repeat: no-repeat;
  opacity: .45;                 /* brillo ambiental tenue de fondo */
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity:.25; } to { opacity:.55; } }

/* Círculos grandes de luz difuminada que se desplazan por detrás (tipo reflectores de fiesta) */
.hero__orb {
  position: absolute;
  top: var(--top, 30%);
  left: 0;
  width: var(--size, 34vw);
  height: var(--size, 34vw);
  border-radius: 50%;
  filter: blur(48px);
  --orb-op: .78;               /* brillo máximo (se ajusta por breakpoint) */
  opacity: 0;                  /* la animación controla el fundido */
  mix-blend-mode: screen;      /* la luz se suma sobre el azul en vez de taparlo */
  will-change: transform, opacity;
  animation: var(--anim, drift-a) var(--dur, 28s) ease-in-out var(--d, 0s) infinite;
}
.hero__orb--gold  { background: radial-gradient(circle, rgba(212,178,112,1),  transparent 72%); }
.hero__orb--blue  { background: radial-gradient(circle, rgba(135,180,240,.95), transparent 72%); }
.hero__orb--white { background: radial-gradient(circle, rgba(255,248,222,.95), transparent 72%); }

/* Trayectorias: entran por un lado, cruzan y salen por el otro (bucle).
   La opacidad sube desde 0 al entrar y baja a 0 al salir → sin apariciones de golpe. */
@keyframes drift-a {
  0%   { transform: translate(-40vw, 0)   scale(.9);  opacity: 0; }
  15%  { opacity: var(--orb-op); }
  85%  { opacity: var(--orb-op); }
  50%  { transform: translate(60vw, 8vh)  scale(1.15); }
  100% { transform: translate(140vw, 0)   scale(.9);  opacity: 0; }
}
@keyframes drift-b {
  0%   { transform: translate(140vw, 4vh)  scale(1.1); opacity: 0; }
  15%  { opacity: var(--orb-op); }
  85%  { opacity: var(--orb-op); }
  50%  { transform: translate(50vw, -6vh)  scale(.85); }
  100% { transform: translate(-40vw, 4vh)  scale(1.1); opacity: 0; }
}
@keyframes drift-c {
  0%   { transform: translate(-30vw, 6vh)  scale(1);   opacity: 0; }
  15%  { opacity: var(--orb-op); }
  85%  { opacity: var(--orb-op); }
  50%  { transform: translate(70vw, -4vh)  scale(1.2); }
  100% { transform: translate(150vw, 6vh)  scale(1);   opacity: 0; }
}

/* Mariposa decorativa detrás del nombre */
.hero__butterfly {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;                 /* sobre fondo/destellos, debajo de .hero__content (z-index:2) */
}
.hero__butterfly-img {
  width: clamp(420px, 122vw, 1180px);
  max-width: 1360px;
  height: auto;
  opacity: .92;
  filter: drop-shadow(0 10px 40px rgba(7,22,52,.6));
  animation: butterfly-float 7s ease-in-out infinite alternate;
}
@keyframes butterfly-float {
  from { transform: translateY(-8px) scale(.995); }
  to   { transform: translateY(8px)  scale(1.005); }
}
/* Entrada "volando" en dos capas, como la mariposa guía y las de los flocks:
   - .hero__butterfly-flap aletea (scaleX), igual que .guide-butterfly__flap.
   - .hero__butterfly-img hace el recorrido ondulante (translate + rotación),
     entrando desde fuera y meciéndose hasta posarse detrás del nombre.
   El flotado infinito se retrasa hasta que aterriza para no pisar el transform
   del vuelo (al ir último en la lista, butterfly-float ganaría el transform). */
.hero__butterfly-flap {
  display: block;
  transform-origin: 50% 50%;
}
/* Recorrido natural: sube revoloteando desde abajo, derivando de lado a lado
   con un vaivén que se amortigua, sobrepasa apenas su sitio (inercia, como una
   mariposa real al posarse) y se asienta. La clave de la naturalidad es que
   cada tramo lleva su propia curva de aceleración (animation-timing-function
   por keyframe), en vez de la interpolación a velocidad constante que delata
   al CSS. */
@keyframes hero-butterfly-fly-in {
  0%   { opacity: 0;   transform: translate(7vw, 62vh)  rotate(-6deg)  scale(.82); animation-timing-function: cubic-bezier(.3,.1,.5,1); }
  15%  { opacity: .92; }
  32%  { transform: translate(-7vw, 33vh) rotate(8deg)   scale(.88); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  52%  { transform: translate(6vw, 14vh)  rotate(-7deg)  scale(.93); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  70%  { transform: translate(-4vw, 3vh)  rotate(5deg)   scale(.97); animation-timing-function: cubic-bezier(.35,0,.5,1); }
  84%  { transform: translate(2vw, -3vh)  rotate(-3deg)  scale(1.0); animation-timing-function: cubic-bezier(.4,0,.55,1); }
  93%  { transform: translate(-1vw, 1vh)  rotate(1.5deg) scale(1.0); animation-timing-function: ease-in-out; }
  100% { opacity: .92; transform: translate(0, 0) rotate(0) scale(1); }
}
/* Aleteo rápido y constante durante todo el vuelo; 13 medios-ciclos × .2s = 2.6s
   (cubre la entrada completa) y, por ser nº impar con alternate, termina con las
   alas abiertas (scaleX 1). Ritmo brioso como el de una mariposa real, que
   contrasta natural con el planeo lento. */
@keyframes hero-wing-flap {
  from { transform: scaleX(.6); }
  to   { transform: scaleX(1); }
}
.hero.is-intro .hero__butterfly-flap {
  animation: hero-wing-flap .2s ease-in-out 13 alternate forwards;
}
.hero.is-intro .hero__butterfly-img {
  opacity: 0;
  animation:
    hero-butterfly-fly-in 2.6s linear forwards,
    butterfly-float 7s ease-in-out 2.6s infinite alternate;
}

/* ---- Mariposa guía: vuela y se posa por las secciones ---- */
.guide-butterfly {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(46px, 9vw, 76px);
  z-index: 46;                 /* sobre pétalos (45), debajo del botón de música/lightbox */
  pointer-events: none;        /* no bloquea scroll ni enlaces… */
  opacity: 0;                  /* …se enciende por JS al dejar la portada */
  will-change: transform, opacity;
  transform: translate3d(-100px, -100px, 0);
}
.guide-butterfly__flap {
  display: block;
  transform-origin: 50% 50%;
  /* aleteo lento por defecto (estado posada) */
  animation: wing-flap-idle 2.6s ease-in-out infinite alternate;
}
.guide-butterfly.is-flying .guide-butterfly__flap {
  animation: wing-flap-fast .16s ease-in-out infinite alternate;
}
.guide-butterfly__flap img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(7,22,52,.55));
  pointer-events: auto;        /* solo la mariposa es tappable */
  cursor: pointer;
}
@keyframes wing-flap-fast {
  from { transform: scaleX(.5); }
  to   { transform: scaleX(1); }
}
@keyframes wing-flap-idle {
  from { transform: scaleX(.9); }
  to   { transform: scaleX(1); }
}

/* ---- Mariposas por sección ("flocks"): cada sección, un comportamiento ----
   El contenedor .flock cubre la sección; las animaciones de trayecto solo
   corren cuando la sección está en pantalla (clase .is-flying la pone el JS). */
.flock {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;                 /* sobre el fondo, debajo del contenido */
}
/* Flock que ocupa todo el ancho de la ventana (para cruces de lado a lado):
   las mariposas entran/salen por el borde real de la pantalla, no por la caja. */
.flock--wide {
  left: 50%; right: auto;
  width: 100vw; margin-left: -50vw;
}
/* En detalles la mariposa orbita sobre las tarjetas y el mapa: que pase por encima
   del iframe (que de lo contrario lo taparía y la "perdería" un rato). */
#detalles .flock { z-index: 3; }
/* Mini mariposas de la portada: detrás del nombre, pequeñas y tenues */
#inicio .flock { z-index: 1; }                 /* sobre el fondo, debajo de .hero__content (z-index:2) */
#inicio .fly img { width: clamp(22px, 4vw, 36px); opacity: .8; }
.fly {
  position: absolute;
  opacity: 0;                 /* invisible hasta que su sección entra en vista */
  transition: opacity .8s ease;
  will-change: transform, opacity;
}
.fly img {
  display: block;
  width: clamp(28px, 6vw, 50px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(7,22,52,.4));
}
/* aleteo continuo (solo mientras vuela) */
.flock.is-flying .fly img {
  animation: deco-flap .26s ease-in-out infinite alternate;
}
@keyframes deco-flap { from { transform: scaleX(.62); } to { transform: scaleX(1); } }

/* Posición estructural por comportamiento (lo demás se afina inline) */
.fly--cross  { left: 0; }
.fly--inout  { left: 0; }
.fly--orbit  { top: 50%; left: 50%; margin: -25px 0 0 -25px; }
.fly--up     { bottom: 0; }

/* Las trayectorias solo se aplican cuando .flock está activo → reinician al volver */
.flock.is-flying .fly--cross  { animation: fly-cross 11s linear infinite; }
.flock.is-flying .fly--inout  { animation: fly-inout 9s ease-in-out infinite; }
.flock.is-flying .fly--orbit  { animation: fly-orbit 15s linear infinite; opacity: .8; }
.flock.is-flying .fly--wander { animation: fly-wander 13s ease-in-out infinite; opacity: .8; }
.flock.is-flying .fly--up     { animation: fly-up 8s ease-in infinite; }
/* Llega volando desde fuera y se posa, luego se queda meciéndose (como la guía).
   Las dos animaciones se encadenan: fly-land (una vez) → fly-perch (en bucle).
   La dirección de entrada y el escalonado se afinan inline (--fx/--fy, animation-delay). */
.flock.is-flying .fly--land {
  animation:
    fly-land 2.2s ease-out both,
    fly-perch 5s ease-in-out 2.2s infinite alternate;
  opacity: .85;
}
.flock.is-flying .fly--land img { animation: deco-flap .4s ease-in-out infinite alternate; }

/* Cruzar de lado a lado con vuelo natural: ondulación irregular + leve balanceo.
   Entra y sale por fuera de la pantalla (el flock--wide ocupa 100vw). */
@keyframes fly-cross {
  0%   { transform: translateX(-12vw) translateY(0)     rotate(-8deg); opacity: 0; }
  6%   { opacity: .9; }
  16%  { transform: translateX(10vw)  translateY(-24px) rotate(11deg); }
  29%  { transform: translateX(28vw)  translateY(6px)   rotate(-7deg); }
  43%  { transform: translateX(45vw)  translateY(-20px) rotate(9deg); }
  57%  { transform: translateX(62vw)  translateY(12px)  rotate(-9deg); }
  71%  { transform: translateX(80vw)  translateY(-12px) rotate(8deg); }
  85%  { transform: translateX(96vw)  translateY(8px)   rotate(-6deg); }
  94%  { opacity: .9; }
  100% { transform: translateX(114vw) translateY(0)     rotate(6deg); opacity: 0; }
}
/* Entrar, revolotear y salir por el mismo costado (con pausa) */
@keyframes fly-inout {
  0%   { transform: translate(-25vw, 0);   opacity: 0; }
  18%  { transform: translate(18vw, -12px); opacity: .9; }
  30%  { transform: translate(26vw, 8px); }
  45%  { transform: translate(14vw, -8px); }
  60%  { transform: translate(-25vw, 0);   opacity: 0; }
  100% { transform: translate(-25vw, 0);   opacity: 0; }
}
/* Orbitar alrededor del centro (tarjetas / regalo), manteniéndose derecha */
@keyframes fly-orbit {
  /* el radio se capa a 34vw en pantallas estrechas para que no se salga en móvil */
  from { transform: rotate(0deg)   translateX(min(var(--r, 80px), 34vw)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(min(var(--r, 80px), 34vw)) rotate(-360deg); }
}
/* Deambular suave sobre la paleta */
@keyframes fly-wander {
  0%   { transform: translate(0,0)      rotate(-6deg); }
  25%  { transform: translate(42px,-20px) rotate(6deg); }
  50%  { transform: translate(84px,8px)   rotate(-4deg); }
  75%  { transform: translate(34px,22px)  rotate(5deg); }
  100% { transform: translate(0,0)      rotate(-6deg); }
}
/* Subir y desvanecerse (despedida) */
@keyframes fly-up {
  0%   { transform: translateY(40px)  translateX(0)    rotate(0);    opacity: 0; }
  20%  { opacity: .85; }
  100% { transform: translateY(-170px) translateX(28px) rotate(8deg); opacity: 0; }
}
/* Posada en la orilla: balanceo suave (como la mariposa guía al posarse) */
@keyframes fly-perch {
  from { transform: translateY(-6px) rotate(-5deg); }
  to   { transform: translateY(6px)  rotate(5deg); }
}
/* Entrada: vuela desde fuera (--fx/--fy) hacia su sitio y aterriza en la pose de reposo.
   Termina exactamente donde arranca fly-perch para un relevo sin saltos. */
@keyframes fly-land {
  0%   { transform: translate(var(--fx, 0), var(--fy, -130px)) rotate(-14deg); opacity: 0; }
  10%  { opacity: .85; }
  55%  { transform: translate(calc(var(--fx, 0) * .35), calc(var(--fy, -130px) * .35)) rotate(11deg); }
  80%  { transform: translate(0, 12px) rotate(-7deg); }
  100% { transform: translateY(-6px) rotate(-5deg); opacity: .85; }
}

.hero__content { position: relative; z-index: 2; padding: 1.5rem; }
.hero__content::before {
  content: "";
  position: absolute;
  inset: -14% -16%;
  z-index: -1;
  background: radial-gradient(ellipse 60% 55% at center, rgba(7,22,52,.92) 0%, rgba(7,22,52,.7) 45%, transparent 78%);
  pointer-events: none;
}
.hero__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .45em;
  text-transform: uppercase;
  font-size: clamp(.65rem, 2.5vw, .85rem);
  color: var(--gold-soft);
  margin: 0 0 1.6em;
  padding-left: .45em;
  text-shadow:
    0 0 2px rgba(7,22,52,.98), 0 0 5px rgba(7,22,52,.95),
    0 1px 10px rgba(7,22,52,.9), 0 2px 18px rgba(7,22,52,.75);
}
.hero__name {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(4rem, 18vw, 9rem);
  line-height: .9;
  margin: 0;
  color: var(--cream);
  text-shadow: 0 2px 12px rgba(7,22,52,.85), 0 4px 30px rgba(0,0,0,.5);
  display: inline-block;
  cursor: default;
  transition: transform .45s ease, text-shadow .45s ease;
  will-change: transform;
}
.hero__name:hover {
  transform: scale(1.05);
  color: var(--cream);
  text-shadow:
    0 2px 12px rgba(7,22,52,.85),
    0 4px 30px rgba(0,0,0,.5),
    0 0 18px rgba(226,210,168,.55),   /* halo dorado suave (gold-soft) */
    0 0 38px rgba(201,168,106,.45);   /* resplandor dorado (gold) */
}

/* --- Entrada de la portada (letra por letra + texto escalonado) ---
   Sólo se activa bajo .hero.is-intro (la pone el JS). Sin JS, todo se
   ve normal. Línea de tiempo: 0–0.7s sólo mariposa → 0.7–1.7s cascada
   del nombre → 1.55–2.6s eyebrow/apellido/divisor/fecha. */
@keyframes hero-letter-in {
  from { opacity: 0; transform: translateY(26px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.hero__name-letter { display: inline-block; will-change: transform, opacity, filter; }
.hero.is-intro .hero__name-letter {
  opacity: 0;
  animation: hero-letter-in .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(0.7s + var(--i) * 0.08s);
}
.hero.is-intro .hero__eyebrow,
.hero.is-intro .hero__surname,
.hero.is-intro .hero__divider,
.hero.is-intro .hero__date {
  opacity: 0;
  animation: hero-text-in .7s ease-out forwards;
}
.hero.is-intro .hero__eyebrow  { animation-delay: 1.55s; }
.hero.is-intro .hero__surname  { animation-delay: 1.75s; }
.hero.is-intro .hero__divider  { animation-delay: 1.95s; }
.hero.is-intro .hero__date     { animation-delay: 2.15s; }
.hero__surname {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1rem, 4vw, 1.6rem);
  letter-spacing: .35em;
  text-transform: uppercase;
  margin: 1.1em 0 0;
  color: var(--cream);
  text-shadow:
    0 0 2px rgba(7,22,52,.98), 0 0 5px rgba(7,22,52,.95),
    0 1px 10px rgba(7,22,52,.9), 0 2px 18px rgba(7,22,52,.75);
}
.hero__divider {
  display: flex; align-items: center; justify-content: center; gap: .8em;
  color: var(--gold); margin: 1.2em 0;
}
.hero__divider span { height: 1px; width: clamp(40px, 12vw, 90px); background: linear-gradient(90deg, transparent, var(--gold)); }
.hero__divider span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.hero__date {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.1rem, 4.5vw, 1.8rem);
  letter-spacing: .2em;
  margin: 0;
  color: var(--cream);
  text-shadow:
    0 0 2px rgba(7,22,52,.98), 0 0 5px rgba(7,22,52,.95),
    0 1px 10px rgba(7,22,52,.9), 0 2px 18px rgba(7,22,52,.75);
}

.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 3; text-decoration: none; color: var(--silver);
  display: flex; flex-direction: column; align-items: center; gap: .5em;
}
.hero__scroll-text {
  font-size: .65rem; letter-spacing: .3em; text-transform: uppercase;
}
.hero__scroll-arrow {
  width: 18px; height: 18px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  animation: bounce 1.8s infinite;
}
@keyframes bounce {
  0%,100% { transform: rotate(45deg) translate(0,0); opacity:.6; }
  50%     { transform: rotate(45deg) translate(5px,5px); opacity:1; }
}

/* ============================================================
   DEDICATORIA
   ============================================================ */
.dedicatoria {
  position: relative;                 /* overflow visible: el flock--wide cruza toda la pantalla */
  max-width: 760px; margin: 0 auto; padding: clamp(4rem, 12vw, 8rem) 1.5rem;
  text-align: center;
}
.dedicatoria__text {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 4.5vw, 2rem);
  line-height: 1.6; font-style: italic; color: var(--navy);
  margin: 0;
}
.dedicatoria__sign {
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  color: var(--gold); margin-top: .6em;
}

/* ============================================================
   CONTADOR
   ============================================================ */
.contador {
  position: relative; overflow: hidden;
  padding: clamp(4rem, 12vw, 7rem) 1.5rem;
  color: var(--cream); text-align: center;
}
.contador__bg {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(21,49,94,.7), transparent 60%),
    linear-gradient(150deg, var(--navy), var(--navy-deep));
}
.contador__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }
.contador__sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1rem, 3.5vw, 1.4rem); color: var(--silver); margin: .2em 0 2rem;
}
.contador__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 2vw, 1.5rem); max-width: 620px; margin: 0 auto;
}
.cd-box {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(201,168,106,.35);
  border-radius: 14px;
  padding: clamp(.8rem, 3vw, 1.6rem) .4rem;
  backdrop-filter: blur(4px);
}
.cd-num {
  display: block;
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.8rem, 8vw, 3.4rem); line-height: 1;
  color: var(--cream);
}
.cd-label {
  display: block; margin-top: .5em;
  font-size: clamp(.55rem, 2vw, .75rem); letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-soft);
}
.contador__done {
  font-family: var(--font-script);
  font-size: clamp(2rem, 8vw, 3.5rem); color: var(--gold-soft); margin-top: 1rem;
}

/* ============================================================
   DETALLES
   ============================================================ */
.detalles {
  position: relative; overflow: hidden;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(4rem, 12vw, 7rem) 1.5rem;
}
.detalles__cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem; margin-top: 2.5rem;
}
.card {
  background: #fff; border: 1px solid rgba(11,34,73,.1);
  border-radius: 18px; padding: 2.2rem 1.5rem; text-align: center;
  box-shadow: 0 16px 40px -24px rgba(11,34,73,.5);
  transition: transform .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(11,34,73,.55); }
.card__icon { font-size: 2rem; }
.card__title {
  font-family: var(--font-sans); font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase; font-size: .75rem;
  color: var(--gold); margin: .8em 0 .4em;
}
.card__big { font-family: var(--font-serif); font-size: 1.5rem; color: var(--navy); margin: 0; }
.card__small { font-size: .9rem; color: #6a7385; margin: .3em 0 0; }

.mapa { margin-top: 2.5rem; }
.mapa__link { position: relative; display: block; border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 40px -24px rgba(11,34,73,.5); text-decoration: none; }
.mapa iframe { width: 100%; height: 340px; border: 0; display: block; filter: saturate(.9); }
.mapa__hint {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(7,22,52,.85));
  color: var(--cream); font-size: .8rem; text-align: center;
  padding: 2rem .5rem .8rem; letter-spacing: .05em;
}

/* Mini-menú "Agregar a mi calendario" */
.cal-wrap { position: relative; display: inline-block; }
.cal-menu {
  position: absolute; top: calc(100% + .5rem); left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex; flex-direction: column;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(11,34,73,.12);
  border-radius: 14px;
  box-shadow: 0 20px 45px -18px rgba(11,34,73,.55);
  overflow: hidden;
}
.cal-menu[hidden] { display: none; }
.cal-menu__item {
  display: block; width: 100%;
  padding: .85em 1.2em;
  font-family: var(--font-sans); font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); text-align: center; text-decoration: none;
  background: none; border: 0; cursor: pointer;
  transition: background .2s, color .2s;
}
.cal-menu__item + .cal-menu__item { border-top: 1px solid rgba(11,34,73,.08); }
.cal-menu__item:hover { background: var(--gold); color: var(--navy-deep); }

/* ============================================================
   CÓDIGO DE VESTIMENTA
   ============================================================ */
.dresscode {
  position: relative; overflow: hidden;
  max-width: 820px; margin: 0 auto;
  padding: clamp(4rem, 12vw, 7rem) 1.5rem;
  text-align: center;
}
.dresscode__etiqueta {
  font-family: var(--font-sans); font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  font-size: clamp(.8rem, 3vw, 1rem); color: var(--gold);
  margin: 1.2rem 0 0;
}
.dresscode__text {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.1rem, 3.8vw, 1.5rem); line-height: 1.6;
  color: var(--navy); margin: 1rem auto 2.5rem; max-width: 540px;
}
.dresscode__palette {
  display: flex; flex-wrap: wrap; gap: clamp(1rem, 4vw, 2.2rem);
  justify-content: center;
}
.swatch { margin: 0; }
.swatch__dot {
  display: block; width: clamp(48px, 12vw, 66px); aspect-ratio: 1;
  margin: 0 auto; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.8);
  box-shadow: 0 10px 24px -10px rgba(11,34,73,.6), inset 0 0 0 1px rgba(11,34,73,.08);
  transition: transform .25s ease;
}
.swatch:hover .swatch__dot { transform: scale(1.1); }
.swatch figcaption {
  margin-top: .7em; font-family: var(--font-sans);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: #6a7385;
}
.dresscode__nota {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(.95rem, 3vw, 1.2rem); color: var(--gold);
  margin: 2.5rem 0 0;
}

/* ============================================================
   GALERÍA EN ESPIRAL 3D
   Por defecto (sin JS / reduce-motion) se ve como cuadrícula.
   Con JS se activa la clase .is-3d y se convierte en túnel 3D.
   ============================================================ */
.galeria-espiral {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(21,49,94,.65), transparent 60%),
    linear-gradient(160deg, var(--navy-deep), var(--navy));
  color: var(--cream);
}

/* --- Fallback: cuadrícula simple --- */
.espiral-wrap { padding: clamp(4rem, 12vw, 7rem) 1.5rem; }
.espiral-caption { text-align: center; }
.espiral-hint {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1rem, 3.5vw, 1.3rem); color: var(--silver); margin: .2em 0 2.5rem;
}
.espiral-photos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; max-width: var(--maxw); margin: 0 auto;
}
.esp-card {
  margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 3/4;
  box-shadow: 0 16px 40px -28px rgba(0,0,0,.6);
}
.esp-card img { width: 100%; height: 100%; object-fit: cover; }

/* --- Modo 3D activo --- */
.galeria-espiral.is-3d .espiral-wrap {
  position: relative;
  height: auto;
  padding: 0;
}
.galeria-espiral.is-3d .espiral-stage {
  position: relative;
  height: 100vh; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.galeria-espiral.is-3d .espiral-scene {
  position: absolute; inset: 0;
  perspective: 1100px;
  perspective-origin: 50% 46%;
}
.galeria-espiral.is-3d .espiral-photos {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; margin: 0;
  transform-style: preserve-3d;
  display: block;
}
.galeria-espiral.is-3d .esp-card {
  position: absolute; top: 0; left: 0;
  width: clamp(155px, 24vw, 250px);
  aspect-ratio: 3 / 4;      /* retrato: las fotos verticales no se cortan */
  margin: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(201,168,106,.45);
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.7);
  transform: translate(-50%, -50%);
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
  cursor: pointer;
}
.galeria-espiral.is-3d .espiral-caption {
  position: absolute; left: 0; right: 0; bottom: 8%;
  z-index: 5; pointer-events: none;
  text-shadow: 0 2px 20px rgba(7,22,52,.8);
}
@media (prefers-reduced-motion: reduce) {
  .galeria-espiral.is-3d .espiral-wrap { height: auto; padding: clamp(4rem,12vw,7rem) 1.5rem; }
  .galeria-espiral.is-3d .espiral-stage { position: static; height: auto; display: block; overflow: visible; }
  .galeria-espiral.is-3d .espiral-scene { position: static; perspective: none; }
  .galeria-espiral.is-3d .espiral-photos {
    position: static; transform: none; width: auto; height: auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem;
    max-width: var(--maxw); margin: 0 auto;
  }
  .galeria-espiral.is-3d .esp-card {
    position: static; transform: none !important; filter: none !important;
    opacity: 1 !important; width: auto; aspect-ratio: 3/4;
  }
  .galeria-espiral.is-3d .espiral-caption { position: static; }
  /* Nombre de portada: deja el brillo al pasar el cursor, pero sin el zoom */
  .hero__name { transition: none; }
  .hero__name:hover { transform: none; }
  /* Entrada de portada: mostrar todo de inmediato, sin movimiento */
  .hero.is-intro .hero__name-letter,
  .hero.is-intro .hero__eyebrow,
  .hero.is-intro .hero__surname,
  .hero.is-intro .hero__divider,
  .hero.is-intro .hero__date {
    opacity: 1; transform: none; filter: none; animation: none;
  }
  .hero.is-intro .hero__butterfly-flap {
    animation: none;
    transform: none;
  }
  .hero.is-intro .hero__butterfly-img {
    opacity: .92;
    animation: butterfly-float 7s ease-in-out infinite alternate;
  }
}

/* ============================================================
   MESA DE REGALOS
   ============================================================ */
.regalos { position: relative; overflow: hidden; padding: clamp(4rem, 12vw, 7rem) 1.5rem; color: var(--cream); }
.regalos__bg {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(21,49,94,.7), transparent 60%),
    linear-gradient(200deg, var(--navy-deep), var(--navy));
}
.regalos__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; text-align: center; }
.regalos__text {
  font-family: var(--font-serif); font-size: clamp(1.05rem, 3.5vw, 1.4rem);
  line-height: 1.6; color: var(--silver); margin: 1rem auto 2.5rem; max-width: 560px;
}
.regalos__cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem;
}
.regalo-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(201,168,106,.35);
  border-radius: 16px; padding: 2rem 1.5rem; backdrop-filter: blur(4px);
}
.regalo-card h3 {
  font-family: var(--font-serif); font-size: 1.4rem; color: var(--gold-soft); margin: 0 0 .5em;
}
.regalo-card p { font-size: .95rem; color: var(--silver); margin: 0; line-height: 1.5; }

/* ============================================================
   CIERRE / FOOTER
   ============================================================ */
.cierre {
  position: relative; overflow: hidden; min-height: 70vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--cream); padding: 4rem 1.5rem;
}
.cierre__bg {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(21,49,94,.6), transparent 60%),
    linear-gradient(160deg, var(--navy), var(--navy-deep));
}
.cierre__inner { position: relative; z-index: 2; }
.cierre__eyebrow {
  letter-spacing: .4em; text-transform: uppercase; font-size: .75rem;
  color: var(--gold-soft); margin: 0 0 .4em;
}
.cierre__name {
  font-family: var(--font-script); font-size: clamp(3rem, 14vw, 6rem);
  margin: 0; color: var(--cream);
}
.cierre__date {
  font-family: var(--font-serif); letter-spacing: .15em;
  font-size: clamp(1rem, 4vw, 1.4rem); color: var(--silver); margin: 0;
}

/* ============================================================
   BOTÓN DE MÚSICA
   ============================================================ */
.music-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 50;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(7,22,52,.65); color: var(--gold-soft);
  border: 1px solid rgba(201,168,106,.5);
  backdrop-filter: blur(6px);
  cursor: pointer; display: grid; place-items: center;
  transition: transform .2s, background .3s;
}
.music-toggle:hover { transform: scale(1.08); background: rgba(7,22,52,.85); }
.music-bars { display: none; gap: 2px; align-items: flex-end; height: 16px; }
.music-bars i { width: 3px; height: 6px; background: var(--gold-soft); border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.music-bars i:nth-child(2) { animation-delay: .2s; }
.music-bars i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%,100% { height: 5px; } 50% { height: 16px; } }
/* estado reproduciendo: muestra barras, oculta nota */
.music-toggle.is-playing .music-icon { display: none; }
.music-toggle.is-playing .music-bars { display: flex; }

/* Leyenda que "sale" del botón al entrar */
.music-hint {
  position: fixed; top: 22px; right: 72px; z-index: 49;
  max-width: 60vw; padding: .5rem .8rem; border-radius: 999px;
  background: rgba(7,22,52,.85); color: var(--gold-soft);
  border: 1px solid rgba(201,168,106,.5);
  backdrop-filter: blur(6px);
  font-size: .8rem; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.music-hint::after {
  content: ""; position: absolute; top: 50%; right: -5px;
  width: 10px; height: 10px; transform: translateY(-50%) rotate(45deg);
  background: rgba(7,22,52,.85);
  border-top: 1px solid rgba(201,168,106,.5);
  border-right: 1px solid rgba(201,168,106,.5);
}
.music-hint.is-visible { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .music-hint { transform: none; transition: opacity .4s ease; }
}

/* ============================================================
   PÉTALOS FLOTANTES (inspirados en las flores del vestido)
   ============================================================ */
.petals {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 45;
}
.petal {
  position: absolute;
  top: -12vh;
  will-change: transform;
  animation: petal-fall linear infinite;
}
.petal__inner {
  display: block;
  transform-origin: center;
  animation: petal-sway ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 3px rgba(7, 22, 52, .25));
}
.petal__inner svg { display: block; }

@keyframes petal-fall {
  from { transform: translateY(-12vh); }
  to   { transform: translateY(114vh); }
}
@keyframes petal-sway {
  from { transform: translateX(-14px) rotate(-35deg); }
  to   { transform: translateX(14px)  rotate(45deg); }
}

/* ============================================================
   REVELADO AL HACER SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   ACCESIBILIDAD: reduce-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .parallax-layer { transform: none !important; }
  .petals { display: none; }
  .guide-butterfly { display: none; }
  .flock { display: none; }
}

/* ============================================================
   LIGHTBOX DE GALERÍA
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,16,34,.92);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox__img {
  max-width: 90vw; max-height: 80vh;
  width: auto; height: auto;
  border-radius: 10px;
  border: 1px solid rgba(201,168,106,.5);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  transform: scale(.96); transition: transform .3s ease;
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(7,22,52,.6); color: var(--gold-soft);
  border: 1px solid rgba(201,168,106,.5);
  font-family: var(--font-serif); font-size: 1.8rem; line-height: 1;
  cursor: pointer;
  transition: background .3s, transform .2s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(7,22,52,.9); transform: scale(1.08); }
.lightbox__close { top: 18px; right: 18px; font-size: 1.3rem; }
.lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.08); }
.lightbox__count {
  position: absolute; bottom: 22px; left: 0; right: 0;
  text-align: center; color: var(--silver);
  font-family: var(--font-sans); font-size: .8rem; letter-spacing: .2em;
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  .contador__grid { grid-template-columns: repeat(2, 1fr); max-width: 320px; }
  .mapa iframe { height: 280px; }
  .lightbox__close, .lightbox__nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__close { top: 10px; right: 10px; font-size: 1.1rem; }

  /* Mariposas más grandes y presentes en móvil (donde 6vw quedaba diminuto) */
  .fly img { width: clamp(40px, 13vw, 60px); }
  .flock.is-flying .fly--orbit,
  .flock.is-flying .fly--wander,
  .flock.is-flying .fly--land { opacity: .9; }
  /* La guía también un poco mayor para que se note al acompañar */
  .guide-butterfly { width: clamp(56px, 15vw, 82px); }

  /* Orbes de luz: en móvil el blur fijo se comía el círculo (quedaba tenue).
     Los agrandamos, reducimos desenfoque y subimos brillo para que se noten. */
  .hero__orb {
    width: max(var(--size), 62vw);
    height: max(var(--size), 62vw);
    filter: blur(32px);
    --orb-op: .88;
  }
}

/* Tablets / móviles anchos: tamaño intermedio */
@media (min-width: 481px) and (max-width: 768px) {
  .fly img { width: clamp(38px, 8vw, 56px); }

  /* Orbes intermedios: un poco más grandes y menos desenfoque que en desktop */
  .hero__orb {
    width: max(var(--size), 46vw);
    height: max(var(--size), 46vw);
    filter: blur(40px);
    --orb-op: .82;
  }
}

/* ============================================================
   PORTADA  (#cover)  — pantalla de entrada, sutil y elegante
   Al tocar: la mariposa del centro sube revoloteando y sale por la
   parte superior de la pantalla; el fondo se desvanece y, al irse la
   mariposa, la invitación aparece con su efecto ORIGINAL intacto
   (la mariposa gigante del hero entra desde abajo — ese efecto NO se
   toca; sólo se difiere para que se vea al revelar).
   Reutiliza mariposa.png y los aleteos wing-flap-idle/-fast.
   ============================================================ */
.cover {
  position: fixed;
  inset: 0;
  z-index: 100;                 /* sobre música (50), pétalos (45) y mariposa guía (46) */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cream);
  visibility: visible;
}
.cover.is-closed {
  visibility: hidden;
  pointer-events: none;
}

/* Fondo (mismo degradado del hero) que se desvanece para revelar la web */
.cover__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(ellipse at center, transparent 35%, rgba(7,22,52,.65)),
    radial-gradient(ellipse at 50% 30%, rgba(21,49,94,.55), transparent 60%),
    linear-gradient(160deg, var(--navy-deep), var(--navy) 55%, var(--navy-soft));
  background-size: cover;
  transition: opacity 1.1s ease .3s;
}
.cover.is-opening .cover__bg { opacity: 0; }

/* ---- Mariposa central: en reposo flota y aletea suave; al tocar sube ---- */
.cover__seal {
  position: relative;
  z-index: 2;                   /* sobre el fondo */
  width: clamp(120px, 34vw, 240px);
  animation: cover-seal-float 5.5s ease-in-out infinite alternate;  /* respira, no queda estática */
}
.cover__seal-flap {
  display: block;
  transform-origin: 50% 50%;
  animation: wing-flap-idle 2.6s ease-in-out infinite alternate;    /* aleteo suave en reposo */
}
.cover__seal-flap img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 12px 30px rgba(7,22,52,.6));
}
.cover.is-opening .cover__seal {
  animation: cover-seal-fly-up 1.5s cubic-bezier(.45, .05, .4, 1) forwards;
}
.cover.is-opening .cover__seal-flap {
  animation: wing-flap-fast .18s ease-in-out infinite alternate;    /* aletea más rápido al volar */
}
@keyframes cover-seal-float {
  from { transform: translateY(-9px); }
  to   { transform: translateY(9px); }
}
/* Vuelo sutil: revolotea hacia arriba con un leve vaivén y sale por arriba */
@keyframes cover-seal-fly-up {
  0%   { transform: translate(0, 0)        rotate(0)     scale(1);    opacity: 1; }
  22%  { transform: translate(-2vw, -7vh)  rotate(-4deg) scale(1.03); opacity: 1; }
  52%  { transform: translate(3vw, -42vh)  rotate(3deg)  scale(.97);  opacity: 1; }
  80%  { transform: translate(-2vw, -85vh) rotate(-3deg) scale(.9);   opacity: .85; }
  100% { transform: translate(1vw, -135vh) rotate(-2deg) scale(.8);   opacity: 0; }
}

/* ---- Leyenda "Toca para abrir" ---- */
.cover__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(2rem, 8vh, 4.5rem);
  z-index: 2;
  margin: 0;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  animation: cover-hint-pulse 2.2s ease-in-out infinite;
}
.cover.is-opening .cover__hint {
  opacity: 0;
  transition: opacity .4s ease;
}
@keyframes cover-hint-pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: .95; }
}

/* Bloquea el scroll del fondo mientras la portada está visible, y mantiene
   oculto el contenido del hero para que no se asome al desvanecerse el fondo
   (aparece luego con su animación de entrada original al retirarse la portada). */
body.cover-open { overflow: hidden; }
body.cover-open .hero__content { opacity: 0; }
/* La mariposa del hero se oculta Y se le corta la animación base (butterfly-float):
   si sigue corriendo, al añadir .is-intro tarde no se reinicia y pisa el transform
   del vuelo de entrada, anulando el recorrido desde abajo. Cortándola, el efecto
   original (fly-in) arranca limpio al revelarse la invitación. */
body.cover-open .hero__butterfly-img { opacity: 0; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .cover__hint,
  .cover__seal,
  .cover__seal-flap,
  .cover.is-opening .cover__seal,
  .cover.is-opening .cover__seal-flap { animation: none; }
  .cover__bg { transition: opacity .5s ease; }
  .cover.is-opening .cover__seal { opacity: 0; transition: opacity .4s ease; }
}