/* ==========================================================
   Diseño "Constelación" · XV años · celestial
   apartar nubes → cielo con luna → unir las estrellas de "XV" → fugaz y niebla
   ========================================================== */

:root {
  --noche: #1b2550;
  --noche-osc: #111938;
  --crepusculo: #8f7fc4;
  --oro: #e8d29a;
  --plata: #c9ccd6;
  --lila-nube: #5a4f8f;
  --estrella-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cpath d='M0 -11L2.1 -2.1 11 0 2.1 2.1 0 11-2.1 2.1-11 0-2.1-2.1Z' fill='%23e8d29a'/%3E%3C/svg%3E");

  --s-fondo: transparent;
  --s-tinta: #eef0fb;
  --s-suave: rgba(226, 229, 247, .74);
  --s-acento: var(--oro);
  --s-acento-tinta: var(--noche);
  --s-tarjeta: rgba(255, 255, 255, .07);
  --s-borde: rgba(232, 210, 154, .3);
  --s-radio: 22px;
  --s-sombra: 0 22px 40px -24px rgba(5, 8, 30, .85);
  --s-fuente: "Cormorant Garamond", Georgia, serif;
  --s-titulo: "Great Vibes", cursive;
  --s-titulo-tam: clamp(2.7rem, 12vw, 3.4rem);
  --s-etiqueta: "Cinzel", Georgia, serif;
  --s-num: "Cinzel", Georgia, serif;
  --s-titulo-color: #fff;
  --s-btn-linea-color: #fff;
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .85) 0 .8px, transparent 1.6px) 0 0 / 61px 67px,
    radial-gradient(circle at 64% 42%, rgba(255, 255, 255, .6) 0 .7px, transparent 1.4px) 0 0 / 89px 83px,
    radial-gradient(circle at 38% 76%, rgba(232, 210, 154, .7) 0 .8px, transparent 1.6px) 0 0 / 127px 113px,
    linear-gradient(180deg, #111938 0%, #1b2550 35%, #2a326c 70%, #4f4890 100%);
  background-attachment: fixed;
  color: var(--s-tinta);
  font-family: var(--s-fuente);
}

/* ---------- Cielo (hero) ---------- */
.cielo {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto auto auto 1.25fr;
  justify-items: center;
  padding: calc(env(safe-area-inset-top) + 54px) 16px calc(env(safe-area-inset-bottom) + 96px);
  overflow: hidden;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(120% 55% at 50% 112%, rgba(143, 127, 196, .95), transparent 62%),
    radial-gradient(60% 40% at 20% 10%, rgba(61, 74, 138, .6), transparent 70%),
    linear-gradient(180deg, #0f1636 0%, #1b2550 38%, #353d7c 72%, #7b6db8 100%);
}
.cielo__estrellas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.cielo__luna {
  position: absolute;
  right: 7%;
  top: calc(env(safe-area-inset-top) + 6svh);
  z-index: 1;
  width: clamp(72px, 22vw, 126px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 34px 6px rgba(236, 232, 255, .32), 0 0 110px 34px rgba(143, 127, 196, .38);
  animation: lunaFlota 12s ease-in-out infinite alternate;
}
.cielo__luna img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; mix-blend-mode: screen; filter: brightness(1.1) contrast(1.05); }
@keyframes lunaFlota { from { transform: translateY(0); } to { transform: translateY(10px); } }

.cielo__xv {
  grid-row: 2;
  position: relative;
  z-index: 3;
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: .8rem;
  letter-spacing: .5em;
  padding-left: .5em;
  text-transform: uppercase;
  color: var(--oro);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s ease .3s, transform 1s ease .3s;
}
.cielo.revelado .cielo__xv { opacity: 1; transform: none; }

/* ---------- Constelación ---------- */
.mapa {
  grid-row: 3;
  position: relative;
  z-index: 3;
  width: min(84vw, 390px, 52svh);
  aspect-ratio: 10 / 7;
  margin: 22px 0 18px;
}
.mapa__lineas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(255, 244, 214, .9)) drop-shadow(0 0 9px rgba(232, 210, 154, .55));
}
.guia-linea { stroke: rgba(201, 204, 214, .28); stroke-width: 1; stroke-dasharray: 2 5; stroke-linecap: round; opacity: 0; transition: opacity 1.2s ease .8s; }
.cielo.fase-b .guia-linea { opacity: 1; }
.cielo.completa .guia-linea { opacity: 0; transition-delay: 0s; }
.trazo { stroke: #fff4d6; stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset .55s cubic-bezier(.3, .7, .3, 1), stroke-width .6s ease, stroke .6s ease; }
.mapa.completa .trazo { stroke: #fffaf0; stroke-width: 2.6; animation: brillarTrazo 2.4s ease-in-out .3s infinite alternate; }
@keyframes brillarTrazo { from { opacity: 1; } to { opacity: .7; } }

.astro {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: scale(.3);
  transition: opacity .6s ease, transform .6s cubic-bezier(.3, 1.5, .5, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
  -webkit-tap-highlight-color: transparent;
}
.cielo.fase-b .astro { opacity: 1; transform: none; }
.astro:disabled { cursor: default; }
.astro::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px solid transparent;
}
.astro.siguiente::before { border-color: rgba(232, 210, 154, .9); animation: pulso 1.5s ease-out infinite; }
.astro svg {
  width: 17px;
  height: 17px;
  fill: #d9def3;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .85));
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), fill .35s ease;
  animation: centellear 3s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.37s);
}
.astro.siguiente svg { fill: #fff; transform: scale(1.3); }
.astro.unida svg { fill: var(--oro); transform: scale(1.45); filter: drop-shadow(0 0 6px rgba(232, 210, 154, 1)) drop-shadow(0 0 14px rgba(232, 210, 154, .6)); animation: none; }
.astro.error { animation: temblor .35s ease; }
.astro:focus-visible { outline: 2px solid var(--oro); outline-offset: 0; }
.mapa.completa .astro svg { animation: destello 1s ease; }
@keyframes pulso { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes centellear { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes temblor { 25% { translate: -4px 0; } 50% { translate: 4px 0; } 75% { translate: -2px 0; } }
@keyframes destello { 40% { transform: scale(2.1) rotate(45deg); } 100% { transform: scale(1.45); } }

/* Guía, ayuda y título (comparten la misma celda) */
.cielo__abajo { grid-row: 4; position: relative; z-index: 6; display: grid; justify-items: center; min-height: 140px; }
.cielo__abajo > * { grid-area: 1 / 1; transition: opacity .9s ease, transform .9s ease; }
.cielo__guia { display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; pointer-events: none; }
.cielo.fase-b .cielo__guia { opacity: 1; pointer-events: auto; }
.cielo.completa .cielo__guia { opacity: 0; pointer-events: none; }
.cielo__une { margin: 0; max-width: 19em; font-style: italic; font-size: 1.12rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.cielo__ayuda {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(232, 210, 154, .6);
  border-radius: 999px;
  background: rgba(27, 37, 80, .45);
  font-family: "Cinzel", serif;
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cielo__ayuda:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.cielo__ayuda:disabled { opacity: .5; cursor: default; }

.cielo__titulo { opacity: 0; transform: translateY(16px); pointer-events: none; }
.cielo.revelado .cielo__titulo { opacity: 1; transform: none; transition-delay: .5s; }
.cielo__nombre {
  margin: 0;
  padding: 0 .2em .05em;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(3.8rem, 19vw, 5.6rem);
  line-height: 1.1;
  background: linear-gradient(100deg, #fff 15%, var(--oro) 40%, #fff 55%, #d9d3f5 75%, #fff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(232, 210, 154, .45)) drop-shadow(0 0 30px rgba(143, 127, 196, .7));
  animation: brillo 8s linear infinite;
}
@keyframes brillo { to { background-position: -220% 0; } }
.cielo__fecha { margin: 4px 0 0; font-family: "Cinzel", serif; font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }

/* Estrella fugaz */
.fugaz {
  position: absolute;
  left: -40%;
  top: 14%;
  z-index: 4;
  width: 170px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95));
  transform: rotate(18deg);
  opacity: 0;
  pointer-events: none;
}
.fugaz::after { content: ""; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(255, 244, 214, .9); }
.fugaz.cruza { animation: fugaz 1.4s cubic-bezier(.3, .4, .4, 1) forwards; }
@keyframes fugaz {
  0% { opacity: 0; transform: translate(0, 0) rotate(18deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(170vw, 55vw) rotate(18deg); }
}

/* Niebla baja: "bailar en las nubes" */
.niebla {
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: -4%;
  height: 34%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 2.2s ease, transform 2.6s ease;
}
.cielo.revelado .niebla { opacity: 1; transform: none; }
.niebla i {
  position: absolute;
  bottom: -18%;
  width: 62%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(233, 226, 250, .55) 55%, rgba(233, 226, 250, 0));
  animation: deriva 16s ease-in-out infinite alternate;
}
.niebla i:nth-child(1) { left: -6%; }
.niebla i:nth-child(2) { left: 22%; width: 70%; bottom: -30%; animation-duration: 21s; animation-delay: -6s; }
.niebla i:nth-child(3) { left: 50%; bottom: -12%; animation-duration: 18s; animation-delay: -3s; }
.niebla i:nth-child(4) { left: 10%; width: 40%; height: 46%; bottom: 30%; opacity: .45; animation-duration: 24s; }
@keyframes deriva { from { transform: translateX(-6%); } to { transform: translateX(8%); } }

/* ---------- Nubes que se apartan ---------- */
.nubes { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity 1.3s ease; }
.nubes:active { cursor: grabbing; }
.cielo.despejado .nubes { opacity: 0; pointer-events: none; }
.nubes__ui {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 20svh) 20px calc(env(safe-area-inset-bottom) + 9svh);
  pointer-events: none;
  transition: opacity .8s ease, visibility .8s;
}
.cielo.despejado .nubes__ui { opacity: 0; visibility: hidden; }
.nubes__pre { margin: 0; max-width: 12em; font-family: "Great Vibes", cursive; font-size: clamp(2.1rem, 9.5vw, 2.9rem); line-height: 1.2; color: var(--lila-nube); text-shadow: 0 0 18px #fff, 0 0 4px #fff; }
.nubes__hint {
  margin: auto 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Cinzel", serif;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--lila-nube);
  text-shadow: 0 0 10px #fff;
}
.nubes__dedo { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--lila-nube); background: rgba(255, 255, 255, .7); animation: barrer 2.4s ease-in-out infinite; }
@keyframes barrer { 0%, 100% { transform: translateX(-14px); } 50% { transform: translateX(14px); } }
.nubes__btn {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(90, 79, 143, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font-family: "Cinzel", serif;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #463c7a;
  cursor: pointer;
  pointer-events: auto;
}
.nubes__btn:focus-visible { outline: 2px solid var(--lila-nube); outline-offset: 3px; }

.cielo .desliza-c { z-index: 7; color: #fff; }

/* ---------- Secciones ---------- */
.s-titulo { filter: drop-shadow(0 0 12px rgba(232, 210, 154, .4)); }
.s-titulo::before { content: ""; display: block; width: 18px; height: 18px; margin: 0 auto 10px; background: var(--estrella-ico) center / contain no-repeat; animation: centellear 3s ease-in-out infinite; }
.s-cuenta__caja, .s-evento {
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.s-cuenta__num { color: #fff; text-shadow: 0 0 12px rgba(232, 210, 154, .6); }
.s-evento__icono { color: var(--oro); border-color: rgba(232, 210, 154, .7); box-shadow: 0 0 14px rgba(232, 210, 154, .25); }
.s-evento__hora { font-family: "Great Vibes", cursive; font-size: 2.4rem; color: var(--oro); }
.s-foto { border: 1px solid rgba(232, 210, 154, .4); }
.s-paleta li { border-color: rgba(255, 255, 255, .3); }
.s-vestimenta__tipo { font-family: "Cinzel", serif; font-size: 1.15rem; letter-spacing: .28em; color: var(--oro); }
.s-rsvp__saludo { font-family: "Great Vibes", cursive; font-size: 2.1rem; color: var(--oro); }
.s-btn--lleno { background: linear-gradient(120deg, #d9bd78, #f6e7bf 50%, #d9bd78); color: var(--noche); box-shadow: 0 0 24px rgba(232, 210, 154, .35); }
.s-pie__n { font-family: "Great Vibes", cursive; font-size: 3rem; color: #fff; }
.btn-musica { background: rgba(27, 37, 80, .9); color: var(--oro); border: 1px solid rgba(232, 210, 154, .6); }

.dedicatoria { padding-top: 100px; }
.dedicatoria__foto { position: relative; width: min(60vw, 236px); aspect-ratio: 1; }
.dedicatoria__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(232, 210, 154, .7), 0 0 40px rgba(143, 127, 196, .7), 0 0 90px rgba(232, 210, 154, .2);
}
.dedicatoria__orbita { position: absolute; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); animation: orbitar 30s linear infinite; }
.dedicatoria__orbita circle { fill: none; stroke: rgba(232, 210, 154, .5); stroke-width: .4; stroke-dasharray: .4 2.2; stroke-linecap: round; }
.dedicatoria__orbita path { fill: var(--oro); }
@keyframes orbitar { to { transform: rotate(360deg); } }
.dedicatoria__texto { margin: 34px 0 0; max-width: 21em; font-style: italic; font-size: clamp(1.22rem, 5vw, 1.42rem); line-height: 1.6; }
.dedicatoria__familia { margin-top: 24px; }
.dedicatoria__t { margin: 18px 0 0; font-family: "Cinzel", serif; font-size: .64rem; letter-spacing: .32em; text-transform: uppercase; color: var(--s-suave); }
.dedicatoria__n { margin: 4px 0 0; font-family: "Great Vibes", cursive; font-size: 2rem; line-height: 1.25; color: var(--oro); }

.nubes-sep { position: relative; height: 80px; overflow: hidden; pointer-events: none; }
.nubes-sep i {
  position: absolute;
  bottom: -40px;
  width: 60%;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 226, 250, .3), transparent);
  animation: deriva 20s ease-in-out infinite alternate;
}
.nubes-sep i:nth-child(1) { left: -10%; }
.nubes-sep i:nth-child(2) { left: 25%; width: 70%; bottom: -50px; animation-delay: -7s; }
.nubes-sep i:nth-child(3) { left: 55%; animation-delay: -12s; }
.nubes-sep--b i { background: radial-gradient(closest-side, rgba(143, 127, 196, .35), transparent); }

.banda { position: relative; margin: 10px 24px; overflow: hidden; border-radius: 26px; border: 1px solid rgba(232, 210, 154, .5); box-shadow: var(--s-sombra); }
.banda img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.banda figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 80px 26px 26px;
  background: linear-gradient(180deg, transparent, rgba(17, 25, 56, .88));
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.5rem, 6.6vw, 1.9rem);
  line-height: 1.3;
  text-align: center;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .cielo__luna, .astro svg, .astro.siguiente::before, .cielo__nombre, .niebla i, .nubes__dedo,
  .s-titulo::before, .dedicatoria__orbita, .nubes-sep i, .mapa.completa .trazo { animation: none !important; }
  .astro { transition-delay: 0s; }
}