/* =========================================================
   Santa Vigilia — Tarjeta de invitación
   Paleta tomada de aeminpu.org.pe: blanco, celeste #38BEFD,
   azul marino #00327D, azul #00409F, con acentos dorados.
   ========================================================= */

:root {
  --blanco: #ffffff;
  --cielo-50: #f3fbff;
  --cielo-100: #e2f5ff;
  --cielo-200: #bfe8ff;
  --celeste: #38befd;
  --celeste-fuerte: #0293ee;
  --azul: #00327d;
  --azul-medio: #00409f;
  --azul-noche: #001c4a;
  --oro: #c9a13b;
  --oro-claro: #ead18a;
  --texto: #22314f;
  --texto-suave: #5b6c8d;

  --fuente-titulo: "Cinzel", Georgia, serif;
  --fuente-verso: "Cormorant Garamond", Georgia, serif;
  --fuente-script: "Great Vibes", cursive;
  --fuente-cuerpo: "Lato", system-ui, sans-serif;

  --ancho: 480px;
  --sombra-suave: 0 12px 32px rgba(0, 50, 125, .12);
  --sombra-fuerte: 0 24px 60px rgba(0, 50, 125, .22);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  line-height: 1.65;
  color: var(--texto);
  background: linear-gradient(180deg, var(--cielo-200), var(--cielo-50) 40%, var(--cielo-100)) fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.bloqueado { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
svg { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
strong { color: var(--azul); font-weight: 700; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; border-radius: 8px; }

/* ---------- Elementos comunes ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 50px;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 0;
  font: 700 .8rem/1 var(--fuente-cuerpo);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: scale(.97); }
.boton--azul { color: var(--blanco); background: linear-gradient(135deg, var(--azul-medio), var(--azul)); box-shadow: 0 10px 24px rgba(0, 50, 125, .3); }
.boton--azul:hover { box-shadow: 0 14px 30px rgba(0, 50, 125, .4); }
.boton--borde { color: var(--azul); background: var(--blanco); border: 1.5px solid var(--azul); }
.boton--borde:hover { background: var(--cielo-50); }
.boton--blanco { color: var(--azul); background: var(--blanco); box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }

.botones { display: flex; gap: .75rem; margin-top: 1.25rem; }
.botones .boton { flex: 1; }

.filete { display: flex; align-items: center; justify-content: center; gap: .8rem; color: var(--oro); }
.filete span { width: 70px; height: 1px; background: linear-gradient(90deg, transparent, var(--oro)); }
.filete span:last-child { transform: scaleX(-1); }
.filete i { font-style: normal; font-size: .85rem; }

.titulo {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.75rem;
  font: 600 1rem/1.3 var(--fuente-titulo);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--azul);
}
.titulo::before,
.titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--oro)); }
.titulo::after { transform: scaleX(-1); }
.titulo span { flex: none; max-width: 75%; }

.cita {
  display: block;
  margin-top: .6rem;
  font: 700 .7rem var(--fuente-cuerpo);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--celeste-fuerte);
}

/* Cielo: rayos de sol y nubes */
.rayos {
  position: absolute;
  inset: -20% -40% auto;
  height: 90%;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    repeating-conic-gradient(from 0deg at 50% 22%, rgba(255, 255, 255, .45) 0deg 4deg, rgba(255, 255, 255, 0) 4deg 14deg);
  -webkit-mask-image: radial-gradient(closest-side at 50% 25%, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 25%, #000 30%, transparent 100%);
  animation: girar 90s linear infinite;
}
.nubes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nubes span {
  position: absolute;
  width: 260px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  filter: blur(18px);
  animation: flotar 26s ease-in-out infinite alternate;
}
.nubes span:nth-child(1) { top: 12%; left: -90px; }
.nubes span:nth-child(2) { top: 46%; right: -110px; width: 300px; animation-duration: 32s; }
.nubes span:nth-child(3) { bottom: 6%; left: 10%; width: 340px; height: 110px; animation-duration: 38s; }

/* ---------- Portada ---------- */
.portada {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 40px 30px;
  overflow: hidden;
  text-align: center;
  perspective: 1400px;
}
.portada.cerrada { visibility: hidden; }

/* Hojas (puertas) de la portada */
.hoja {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  overflow: hidden;
  transition: transform 1.5s cubic-bezier(.65, 0, .25, 1) .25s, filter 1.5s ease .25s;
  backface-visibility: hidden;
}
.hoja--izq { left: 0; transform-origin: left center; }
.hoja--der { right: 0; transform-origin: right center; }
.hoja__lienzo {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 198%;
  background: linear-gradient(180deg, #9ddcff 0%, var(--cielo-100) 45%, var(--blanco) 100%);
}
.hoja--izq .hoja__lienzo { left: 0; }
.hoja--der .hoja__lienzo { right: 0; }
.hoja::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease .25s;
  pointer-events: none;
}
.hoja--izq::after { background: linear-gradient(90deg, transparent 40%, rgba(0, 50, 125, .35)); }
.hoja--der::after { background: linear-gradient(270deg, transparent 40%, rgba(0, 50, 125, .35)); }

.portada.abriendo .hoja--izq { transform: rotateY(-108deg); }
.portada.abriendo .hoja--der { transform: rotateY(108deg); }
.portada.abriendo .hoja::after { opacity: 1; }
.portada.abriendo .portada__contenido { animation: alejar .7s cubic-bezier(.5, 0, .75, 0) forwards; }
.portada.abriendo .destellos { transition: opacity .6s; opacity: 0; }
/* Fondo translúcido: La Ley Real (Diez Mandamientos) */
.portada__fondo {
  position: absolute;
  inset: 0;
  background: url("../assets/img/ley-real.jpg") center 30% / cover no-repeat;
  opacity: .16;
  filter: saturate(.8);
}
.portada__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 50%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 100%);
}
/* Marco dorado con esquinas */
.marco-oro {
  position: absolute;
  inset: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  border: 1px solid rgba(201, 161, 59, .7);
  border-radius: 6px;
  pointer-events: none;
}
.marco-oro::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201, 161, 59, .35);
  border-radius: 3px;
}
.marco-oro i {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--oro);
}
.marco-oro i:nth-child(1) { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.marco-oro i:nth-child(2) { top: -4px; right: -4px; border-left: 0; border-bottom: 0; }
.marco-oro i:nth-child(3) { bottom: -4px; left: -4px; border-right: 0; border-top: 0; }
.marco-oro i:nth-child(4) { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }
.portada__contenido { position: relative; max-width: 340px; animation: subir 1.2s ease both; }
.portada__fecha {
  display: inline-block;
  margin: 0 0 1.6rem;
  padding: .4rem 1rem;
  border-top: 1px solid var(--oro);
  border-bottom: 1px solid var(--oro);
  font: 700 .7rem var(--fuente-cuerpo);
  letter-spacing: .12em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--azul);
}
.boton--latido { animation: latido 2.4s ease-in-out 1.5s infinite; }
.boton--ancho { width: 100%; }
.portada__pre { margin: 0; font: italic 500 1.2rem var(--fuente-verso); color: var(--texto-suave); }
.portada__titulo {
  margin: .1rem 0 .6rem;
  font: 700 clamp(2.3rem, 11vw, 3rem)/1.1 var(--fuente-titulo);
  letter-spacing: .05em;
  color: var(--azul);
}
.portada__foto-escena {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 1.6rem auto 1.3rem;
  animation: flotar-v 5s ease-in-out infinite;
}
.anillo-giratorio {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20%, var(--oro-claro) 30%, transparent 40% 70%, var(--celeste) 80%, transparent 90%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: girar 6s linear infinite;
}
.portada__foto .reflejo { inset: 5px; border-radius: 50%; animation: reflejo-mueve 5s ease-in-out infinite; }
.portada__foto {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0;
  animation: balanceo-3d 5s ease-in-out infinite;
  padding: 5px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--oro-claro), var(--oro));
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .7), var(--sombra-fuerte);
}
.portada__foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 3px solid var(--blanco); }
.portada__memoria { margin: 0; font-size: .9rem; letter-spacing: .04em; color: var(--texto-suave); }
.portada__nombre { margin: .1rem 0 .9rem; font: clamp(2rem, 9.5vw, 2.4rem)/1.2 var(--fuente-script); color: var(--azul); }
.portada__nota { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 1rem 0 0; font-size: .78rem; color: var(--texto-suave); }
.portada__nota svg { width: 1em; height: 1em; }

/* ---------- Botón de música ---------- */
.musica {
  position: fixed;
  right: max(16px, calc(50% - var(--ancho) / 2 + 16px));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 40;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--celeste);
  color: var(--azul);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sombra-suave);
  cursor: pointer;
}
.musica__barras { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.musica__barras i { width: 3px; height: 100%; border-radius: 2px; background: var(--azul); animation: ecualizador 1s ease-in-out infinite; }
.musica__barras i:nth-child(2) { animation-delay: -.3s; }
.musica__barras i:nth-child(3) { animation-delay: -.6s; }
.musica__barras i:nth-child(4) { animation-delay: -.15s; }
.musica__off { display: none; }
.musica[aria-pressed="false"] .musica__barras { display: none; }
.musica[aria-pressed="false"] .musica__off { display: block; }

/* ---------- Página ---------- */
.pagina {
  position: relative;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  overflow: hidden;
  background: var(--blanco);
}

/* Hero */
.hero {
  position: relative;
  padding: calc(3rem + env(safe-area-inset-top)) 1.5rem 2.5rem;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, #a8e0ff 0%, var(--cielo-100) 40%, var(--blanco) 100%);
}
.hero > * { position: relative; }
.hero__pre { margin: 0; font: italic 500 1.25rem var(--fuente-verso); color: var(--texto-suave); }
.hero__titulo {
  margin: 0;
  font: 700 clamp(2.4rem, 12vw, 3.1rem)/1.1 var(--fuente-titulo);
  letter-spacing: .05em;
  color: var(--azul);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .8);
}
.hero__motivo { margin: .6rem auto 0; max-width: 28ch; font-size: .98rem; color: var(--texto); }
/* ---------- Efectos 3D y brillos ---------- */
.hero > .destellos,
.portada > .destellos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Inclinación 3D (la controla app.js con --rx / --ry) */
[data-tilt] {
  --rx: 0deg;
  --ry: 0deg;
  --bx: 50%;
  --by: 30%;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .15s linear;
  will-change: transform;
}
.reflejo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--bx) var(--by), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%);
  mix-blend-mode: soft-light;
}

.retrato3d { margin: 2.25rem auto 0; width: min(270px, 74%); }
.retrato3d__inclina { position: relative; animation: flotar-v 6s ease-in-out infinite; }
.retrato3d__halo {
  position: absolute;
  inset: -28px -28px -10px;
  border-radius: 999px 999px 40px 40px;
  background: conic-gradient(from 0deg, rgba(247, 226, 161, 0) 0deg, rgba(247, 226, 161, .9) 60deg, rgba(56, 190, 253, 0) 120deg, rgba(56, 190, 253, .7) 200deg, rgba(247, 226, 161, 0) 260deg, rgba(247, 226, 161, .9) 320deg, rgba(247, 226, 161, 0) 360deg);
  filter: blur(18px);
  opacity: .85;
  transform: translateZ(-40px);
  animation: girar 9s linear infinite;
}
.retrato3d__paloma {
  position: absolute;
  top: -6px;
  right: -26px;
  width: 64px;
  transform: translateZ(70px);
  animation: paloma 7s ease-in-out infinite;
}
.retrato3d__paloma svg { width: 100%; height: auto; fill: var(--blanco); stroke: none; filter: drop-shadow(0 6px 10px rgba(0, 50, 125, .35)); }

.hero__retrato {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  padding: 6px;
  border-radius: 999px 999px 28px 28px;
  background: linear-gradient(160deg, #f5e3a8, var(--oro) 45%, #a8822a);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .75), 0 30px 60px rgba(0, 50, 125, .35);
  animation: balanceo-retrato 7s ease-in-out infinite;
}
.hero__retrato .reflejo { inset: 6px; border-radius: 999px 999px 23px 23px; animation: reflejo-mueve 7s ease-in-out infinite; }

/* Texto con brillo que recorre las letras */
.brillo-texto,
.brillo-oro {
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
  animation: brillar 5s linear infinite;
}
.brillo-texto { background-image: linear-gradient(100deg, var(--azul) 40%, var(--celeste) 50%, var(--azul) 60%); }
.brillo-oro { background-image: linear-gradient(100deg, var(--azul) 38%, var(--oro) 48%, var(--oro-claro) 50%, var(--oro) 52%, var(--azul) 62%); padding: 0 .1em; }

/* Notas musicales flotantes */
.grupo { position: relative; }
.notas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.notas i {
  position: absolute;
  bottom: 10%;
  font-style: normal;
  font-size: 1.6rem;
  color: var(--oro);
  opacity: 0;
  animation: nota 7s ease-in infinite;
}
.notas i:nth-child(1) { left: 8%; animation-delay: 0s; }
.notas i:nth-child(2) { left: 88%; animation-delay: 1.4s; color: var(--celeste); }
.notas i:nth-child(3) { left: 20%; animation-delay: 2.8s; font-size: 1.2rem; }
.notas i:nth-child(4) { left: 76%; animation-delay: 4.2s; }
.notas i:nth-child(5) { left: 50%; animation-delay: 5.6s; color: var(--celeste); font-size: 1.3rem; }
.grupo__foto { position: relative; }
.grupo__foto .reflejo { border-radius: 20px; }

/* Pie: icono con resplandor */
.pie__icono { animation: resplandor 3s ease-in-out infinite; }
.hero__retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 999px 999px 23px 23px;
  border: 3px solid var(--blanco);
}
.hero__nombre h2 {
  margin: 1.75rem 0 .75rem;
  font: 400 clamp(2.5rem, 12vw, 3rem)/1.1 var(--fuente-script);
  color: var(--azul);
}
.hero__salmo { margin: 0 auto; max-width: 26ch; font: italic 500 1.25rem/1.45 var(--fuente-verso); color: var(--texto); }

/* Bloques */
.bloque { padding: 3rem 1.5rem; text-align: center; }
.bloque + .bloque { border-top: 1px solid var(--cielo-100); }

.mensaje { padding-top: 1.5rem; }
.mensaje__texto { margin: 1.5rem 0 0; font-size: 1.04rem; line-height: 1.85; }
.mensaje__firma { margin: 1.25rem 0 0; font: 2.2rem/1.2 var(--fuente-script); color: var(--azul); }
.mensaje__nota { margin: .5rem 0 0; font: italic 500 1.12rem var(--fuente-verso); color: var(--texto-suave); }

/* Fecha y hora */
.datos { padding-bottom: 2.5rem; }
.datos__tarjeta {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 1.5rem 1rem;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--blanco), var(--cielo-50));
  border: 1px solid var(--cielo-100);
  box-shadow: var(--sombra-suave);
  position: relative;
}
.datos__tarjeta::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(201, 161, 59, .35);
  border-radius: 17px;
  pointer-events: none;
}
.datos__col { flex: 1; display: grid; justify-items: center; align-content: center; gap: .3rem; }
.datos__col small { font: 700 .7rem var(--fuente-cuerpo); letter-spacing: .26em; text-transform: uppercase; color: var(--celeste-fuerte); }
.datos__num,
.datos__hora { font: 700 3.6rem/1 var(--fuente-titulo); color: var(--azul); }
.datos__hora { font-size: 2.9rem; padding: .35rem 0; }
.datos__sep { width: 1px; margin: .25rem .5rem; background: linear-gradient(180deg, transparent, var(--oro), transparent); }

/* Franja celeste: cuenta regresiva */
.franja {
  position: relative;
  padding: 2.75rem 1.5rem;
  text-align: center;
  color: var(--blanco);
  background: linear-gradient(135deg, var(--celeste) 0%, var(--celeste-fuerte) 60%, var(--azul-medio) 100%);
}
.franja::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 15% 0%, rgba(255, 255, 255, .3), transparent 70%);
  pointer-events: none;
}
.conteo__titulo { position: relative; margin: 0 0 1.25rem; font: 600 1rem var(--fuente-titulo); letter-spacing: .4em; text-transform: uppercase; }
.conteo__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.conteo__grid > div {
  padding: .95rem .2rem .75rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.conteo__grid { perspective: 600px; }
.conteo__grid > div { transform-style: preserve-3d; box-shadow: 0 10px 20px rgba(0, 40, 110, .18), inset 0 1px 0 rgba(255, 255, 255, .5); }
.conteo__grid span.gira { animation: voltear .6s cubic-bezier(.3, .7, .4, 1); }
.conteo__grid span { display: block; font: 700 clamp(1.7rem, 8.5vw, 2.3rem)/1 var(--fuente-titulo); font-variant-numeric: tabular-nums; }
.conteo__grid small { display: block; margin-top: .45rem; font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .92; }
.conteo__estado { position: relative; margin: 0; font: italic 600 1.35rem var(--fuente-verso); }

/* Grupo musical */
.grupo__intro { margin: 0 0 1.25rem; color: var(--texto-suave); }
.grupo__foto { margin: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--sombra-fuerte); }
.grupo__foto img { width: 100%; }

/* Galería */
.franja-suave { padding: 3rem 0 2.5rem; text-align: center;background: linear-gradient(180deg, var(--cielo-100), var(--cielo-50)); }
.franja-suave .titulo { padding: 0 1.5rem; }
.galeria__escena {
  position: relative;
  width: calc(100% - 3rem);
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  padding: 6px;
  border-radius: 24px;
  background: var(--blanco);
  box-shadow: var(--sombra-fuerte);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.galeria__fotos {
  --dir: 1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 19px;
  background: var(--cielo-100);
  cursor: zoom-in;
  perspective: 1100px;
}
/* Cada foto entra girando en 3D y la anterior sale hacia el otro lado */
.galeria__foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(calc(var(--dir) * 55%)) rotateY(calc(var(--dir) * -62deg)) scale(.82);
  transition: transform 1s cubic-bezier(.22, .9, .3, 1), opacity .8s ease;
  backface-visibility: hidden;
}
.galeria__foto.sale { opacity: 0; transform: translateX(calc(var(--dir) * -55%)) rotateY(calc(var(--dir) * 62deg)) scale(.82); }
.galeria__foto.activa { opacity: 1; transform: none; z-index: 1; }
.galeria__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  -webkit-user-drag: none;
}
.galeria__foto.activa img { animation: kenburns 7s ease-out both; }
.galeria__flecha {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 0;
  border-radius: 50%;
  color: var(--azul);
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--sombra-suave);
  cursor: pointer;
}
.galeria__flecha svg { stroke-width: 2.4; }
.galeria__flecha--ant { left: 14px; }
.galeria__flecha--sig { right: 14px; }
.galeria__contador,
.galeria__lupa {
  position: absolute;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font: 700 .7rem var(--fuente-cuerpo);
  letter-spacing: .08em;
  color: var(--blanco);
  background: rgba(0, 28, 74, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.galeria__contador { right: 18px; }
.galeria__lupa { left: 18px; }
.galeria__lupa svg { width: 1em; height: 1em; }
.galeria__puntos { display: flex; justify-content: center; gap: 4px; margin-top: 1.1rem; }
.galeria__puntos button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.galeria__puntos button::after { content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--cielo-200); transition: width .3s, background .3s; }
.galeria__puntos button[aria-current="true"]::after { width: 20px; background: var(--celeste-fuerte); }

/* Ubicación */
.ubicacion__tarjeta {
  overflow: hidden;
  border-radius: 24px;
  background: var(--blanco);
  border: 1px solid var(--cielo-100);
  box-shadow: var(--sombra-suave);
}
.ubicacion__mapa {
  position: relative;
  height: 260px;
  background: linear-gradient(135deg, #e9f6ff, #d4eefe);
}
.ubicacion__mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.ubicacion__ampliar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  font: 700 .75rem var(--fuente-cuerpo);
  color: var(--blanco);
  text-decoration: none;
  background: var(--azul);
  box-shadow: 0 6px 16px rgba(0, 50, 125, .35);
}
.ubicacion__datos { padding: 1.5rem 1.25rem 1.4rem; }
.ubicacion__dir { margin: 0; font: 700 1.35rem/1.35 var(--fuente-titulo); color: var(--azul); }
.ubicacion__distrito { margin: .35rem 0 1.25rem; font-size: .95rem; font-weight: 700; letter-spacing: .08em; color: var(--celeste-fuerte); }
.ubicacion .botones { margin-top: .75rem; }

/* Pie: icono */
.pie__icono { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); }

/* Recordatorio */
.recordar { padding-top: 2.5rem; }
.recordar__icono { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: var(--azul); background: var(--cielo-100); }
.recordar__icono svg { width: 28px; height: 28px; }
.recordar__titulo { margin: .9rem 0 .4rem; font: 600 1rem var(--fuente-titulo); letter-spacing: .22em; text-transform: uppercase; color: var(--azul); }
.recordar__estado { margin: 0 auto; max-width: 30ch; }
.recordar__estado.activo::before { content: "✓ "; color: #13a36b; font-weight: 900; }
.enlace {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  padding: .5rem .25rem;
  border: 0;
  background: none;
  font: 700 .85rem var(--fuente-cuerpo);
  color: var(--celeste-fuerte);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* Pie */
.pie {
  position: relative;
  padding: 3.25rem 1.5rem calc(5.5rem + env(safe-area-inset-bottom));
  overflow: hidden;
  text-align: center;
  color: var(--blanco);
  background: linear-gradient(180deg, var(--azul-medio), var(--azul) 50%, var(--azul-noche));
}
.pie > :not(.nubes) { position: relative; }
.nubes--pie span { background: rgba(56, 190, 253, .25); }
.pie__gracias { margin: 0; font: italic 500 1.2rem var(--fuente-verso); opacity: .9; }
.pie__hijos { margin: .5rem 0 0; font: 600 .9rem var(--fuente-titulo); letter-spacing: .35em; text-transform: uppercase; color: var(--oro-claro); }
.pie__familia { margin: .2rem 0 1.75rem; font: 2.6rem/1.2 var(--fuente-script); }

/* ---------- Visor de fotos ---------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 60px 12px;
  background: rgba(0, 20, 55, .94);
  animation: aparecer .3s ease;
}
.visor img { max-height: 100%; width: auto; border-radius: 12px; border: 4px solid var(--blanco); }
.visor__cerrar,
.visor__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  color: var(--azul);
  background: var(--blanco);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.visor__cerrar { top: calc(10px + env(safe-area-inset-top)); right: 12px; }
.visor__nav { top: 50%; transform: translateY(-50%); }
.visor__nav--ant { left: 8px; }
.visor__nav--sig { right: 8px; }

/* ---------- Alerta ---------- */
.alerta {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 28, 74, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: aparecer .3s ease;
}
.alerta__caja {
  width: 100%;
  max-width: 360px;
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  border-radius: 24px;
  background: var(--blanco);
  box-shadow: var(--sombra-fuerte);
  animation: subir .45s ease both;
}
.alerta__icono { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--blanco); background: linear-gradient(135deg, var(--celeste), var(--celeste-fuerte)); animation: campana 1.2s ease-in-out 2; }
.alerta__icono svg { width: 30px; height: 30px; stroke-width: 2; }
.alerta h2 { margin: 1rem 0 .5rem; font: 600 1.1rem var(--fuente-titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--azul); }
.alerta p { margin: 0 0 1.5rem; }
.alerta .boton { width: 100%; }

/* ---------- Aviso breve ---------- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 80;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: .8rem 1.1rem;
  border-radius: 14px;
  font-size: .88rem;
  color: var(--blanco);
  background: var(--azul);
  box-shadow: var(--sombra-fuerte);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .3s, transform .3s;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Aparición al desplazarse ---------- */
.revelar {
  opacity: 0;
  transform: perspective(900px) translateY(40px) rotateX(22deg) scale(.96);
  transform-origin: 50% 0;
  transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .8, .25, 1);
}
.revelar.visible { opacity: 1; transform: none; }

/* ---------- Animaciones ---------- */
@keyframes girar { to { transform: rotate(360deg); } }
/* Balanceo 3D continuo (no depende de JavaScript ni del giroscopio) */
@keyframes balanceo-3d {
  0%, 100% { transform: perspective(600px) translateZ(40px) rotateY(-24deg) rotateX(6deg); }
  50% { transform: perspective(600px) translateZ(40px) rotateY(24deg) rotateX(-6deg); }
}
@keyframes balanceo-retrato {
  0%, 100% { transform: perspective(800px) translateZ(30px) rotateY(-12deg) rotateX(4deg); }
  50% { transform: perspective(800px) translateZ(30px) rotateY(12deg) rotateX(-3deg); }
}
@keyframes reflejo-mueve {
  0%, 100% { background-position: 0 0; opacity: .5; transform: translateX(-20%); }
  50% { opacity: 1; transform: translateX(20%); }
}
@keyframes alejar { to { opacity: 0; transform: perspective(800px) translateZ(-220px) rotateX(18deg); } }
@keyframes flotar-v { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes brillar { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes paloma { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: -8px -12px; rotate: 6deg; } }
@keyframes nota { 0% { opacity: 0; transform: translateY(0) rotate(-10deg); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-260px) rotate(20deg) translateX(20px); } }
@keyframes resplandor { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .15), 0 0 18px rgba(234, 209, 138, .35); } 50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 0 36px rgba(234, 209, 138, .75); } }
@keyframes voltear { 0% { transform: rotateX(90deg); opacity: .2; } 100% { transform: rotateX(0); opacity: 1; } }
@keyframes kenburns { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
@keyframes latido { 0%, 100% { box-shadow: 0 10px 24px rgba(0, 50, 125, .3), 0 0 0 0 rgba(56, 190, 253, .5); } 50% { box-shadow: 0 10px 24px rgba(0, 50, 125, .3), 0 0 0 12px rgba(56, 190, 253, 0); } }
@keyframes rebote { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes flotar { from { transform: translateX(0); } to { transform: translateX(70px); } }
@keyframes ecualizador { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes campana { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }

/* En computadora la invitación se presenta como un celular */
@media (min-width: 560px) {
  body { padding: 32px 0; }
  .pagina { border-radius: 28px; box-shadow: var(--sombra-fuerte); }
}