/* ==========================================================
   Diseño "Caja musical" · XV años
   joyero → girar la llave → tapa con espejo → bailarina
   ========================================================== */

:root {
  --lila: #b9a3e0;
  --lila-osc: #8f6fc4;
  --rosa: #f3c3d4;
  --rosa-osc: #e39cb8;
  --ciruela: #5b3a5e;
  --oro: #c9a45c;
  --oro-claro: #f0d898;
  --oro-grad: linear-gradient(115deg, #a8823c, #f0d898 35%, #c9a45c 55%, #fff1c9 70%, #b08a44);

  --s-fondo: #f7eef6;
  --s-tinta: var(--ciruela);
  --s-suave: #8a7090;
  --s-acento: var(--lila-osc);
  --s-acento-tinta: #fff;
  --s-tarjeta: rgba(255, 255, 255, .8);
  --s-borde: rgba(143, 111, 196, .2);
  --s-radio: 24px;
  --s-sombra: 0 18px 34px -20px rgba(91, 58, 94, .45);
  --s-fuente: "Cormorant Garamond", Georgia, serif;
  --s-titulo: "Great Vibes", cursive;
  --s-titulo-tam: clamp(2.8rem, 12vw, 3.5rem);
  --s-etiqueta: "Cinzel", Georgia, serif;
  --s-num: "Cinzel", Georgia, serif;
  --s-titulo-color: var(--ciruela);
}

body {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .8) 0 1px, transparent 2px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .7) 0 1px, transparent 2px) 0 0 / 70px 70px,
    linear-gradient(180deg, #f3e9f4, #ece2f6 40%, #f7eef6);
  background-attachment: fixed;
  color: var(--ciruela);
  font-family: var(--s-fuente);
}

/* ---------- Joyero (hero) ---------- */
.joyero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: calc(env(safe-area-inset-top) + clamp(150px, 24svh, 220px)) 16px calc(env(safe-area-inset-bottom) + 64px);
  overflow: hidden;
  text-align: center;
}
.joyero::before {                          /* halo de luz */
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 130vw;
  max-width: 700px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(243, 195, 212, .35) 35%, transparent 65%);
  z-index: -1;
}
.joyero__pre, .joyero__titulo {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top) + 6svh);
  margin: 0;
  transition: opacity 1s ease, transform 1s ease;
}
.joyero__pre { top: calc(env(safe-area-inset-top) + 12svh); font-family: "Great Vibes", cursive; font-size: clamp(2rem, 9vw, 2.6rem); color: var(--lila-osc); }
.joyero.abierta .joyero__pre { opacity: 0; transform: translateY(-10px); }
.joyero__titulo { opacity: 0; transform: translateY(14px); }
.joyero.abierta .joyero__titulo { opacity: 1; transform: none; transition-delay: 1.6s; }
.joyero__xv { margin: 0; font-family: "Cinzel", serif; font-size: .82rem; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--oro); }
.joyero__nombre {
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(3.6rem, 17vw, 5rem);
  line-height: 1.05;
  padding: 0 .15em .1em;
  background: linear-gradient(110deg, var(--lila-osc), #c48ab8 40%, var(--oro) 70%, var(--lila-osc));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brillo 6s linear infinite;
}
@keyframes brillo { to { background-position: -200% 0; } }
.joyero__fecha { margin: 0; font-family: "Cinzel", serif; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--s-suave); }

/* ---------- Caja ---------- */
.caja {
  --w: min(70vw, 290px, 40svh);
  position: relative;
  width: var(--w);
  height: calc(var(--w) * .92);
  perspective: 900px;
  perspective-origin: 50% 0%;
  flex: none;
}
.caja__brillo {
  position: absolute;
  inset: -30% -40%;
  background: radial-gradient(closest-side, rgba(255, 236, 200, .9), transparent);
  opacity: 0;
  transition: opacity 1.5s ease .6s;
  pointer-events: none;
}
.joyero.abierta .caja__brillo { opacity: 1; }

.caja__cuerpo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 46%;
  z-index: 4;
  border-radius: 8px 8px 18px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 30%),
    linear-gradient(180deg, #f6cfdd, var(--rosa-osc));
  box-shadow:
    inset 0 0 0 7px rgba(246, 207, 221, .9),
    inset 0 0 0 9px var(--oro),
    inset 0 -10px 18px rgba(120, 40, 80, .18),
    0 26px 30px -16px rgba(91, 58, 94, .55);
}
.caja__cuerpo::before {                    /* moldura dorada superior */
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: -6px;
  height: 12px;
  border-radius: 6px;
  background: var(--oro-grad);
  box-shadow: 0 3px 6px rgba(91, 58, 94, .3);
}
.caja__cerradura {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 22px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50% 50% 4px 4px;
  background: var(--oro-grad);
  box-shadow: 0 2px 4px rgba(91, 58, 94, .35);
}
.caja__cerradura::after { content: ""; position: absolute; left: 50%; top: 8px; width: 6px; height: 12px; transform: translateX(-50%); border-radius: 3px 3px 1px 1px; background: #6b4a2a; }
.caja__pata { position: absolute; bottom: -12px; width: 22px; height: 16px; border-radius: 50% 50% 40% 40%; background: var(--oro-grad); box-shadow: 0 4px 6px rgba(91, 58, 94, .4); }
.caja__pata--izq { left: 8%; }
.caja__pata--der { right: 8%; }

.caja__interior {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: calc(8% + 46% - 2px);
  height: 27%;
  z-index: 1;
  border-radius: 10px 10px 2px 2px;
  background: radial-gradient(120% 90% at 50% 100%, #8f5a93, #4a2c50 70%);
  box-shadow: inset 0 10px 20px rgba(0, 0, 0, .35);
}

/* Tapa: gira hacia atrás sobre la bisagra y muestra el espejo */
.caja__tapa {
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: calc(8% + 46% - 4px);
  height: 30%;
  z-index: 5;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(.3, .6, .2, 1);
}
.joyero.abierta .caja__tapa { transform: rotateX(-132deg); z-index: 1; }
.joyero.girando .caja__tapa { animation: temblor .25s ease; }
@keyframes temblor { 0%, 100% { transform: none; } 50% { transform: translateY(-2px) rotate(.6deg); } }
.tapa__cara { position: absolute; inset: 0; border-radius: 14px 14px 6px 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tapa__frente {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6), transparent 45%),
    linear-gradient(180deg, #fbe1ea, var(--rosa));
  box-shadow: inset 0 -6px 10px rgba(120, 40, 80, .15), 0 6px 10px -4px rgba(91, 58, 94, .35);
}
.tapa__marco { position: absolute; inset: 9px 12px; border: 2px solid var(--oro); border-radius: 10px 10px 4px 4px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5); }
.tapa__monograma {
  position: relative;
  font-family: "Great Vibes", cursive;
  font-size: calc(var(--w) * .2);
  line-height: 1;
  background: var(--oro-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8));
}
.tapa__espejo {
  transform: rotateX(180deg);
  background: linear-gradient(180deg, #f6cfdd, var(--rosa-osc));
  display: grid;
  place-items: center;
}
.tapa__espejo span {
  width: 76%;
  height: 72%;
  border-radius: 50%;
  border: 3px solid var(--oro);
  background:
    linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, .85) 42%, transparent 52%),
    linear-gradient(160deg, #e9eef3, #b8c3cf 60%, #dfe6ec);
}

/* Bailarina */
.bailarina {
  position: absolute;
  left: 50%;
  bottom: calc(8% + 44%);
  width: 44%;
  z-index: 2;
  transform: translate(-50%, 60%);
  opacity: 0;                              /* oculta (y sin asomar) hasta que se abre la tapa */
  transition: transform 1.8s cubic-bezier(.3, 1.3, .4, 1) .8s, opacity .3s ease .8s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.joyero.abierta .bailarina { transform: translate(-50%, 0); opacity: 1; }
.bailarina__fig { width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(91, 58, 94, .3)); }
.joyero.abierta .bailarina__fig { animation: piruetear 2.8s ease-in-out 2s infinite; }
/* gira de lado a lado sin quedar de perfil (una figura plana desaparecería a 90°) */
@keyframes piruetear {
  0%, 100% { transform: perspective(300px) rotateY(-50deg); }
  50%      { transform: perspective(300px) rotateY(50deg); }
}
.bailarina__base { width: 70%; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--oro-grad); box-shadow: 0 4px 6px rgba(91, 58, 94, .3); }

/* Llave para dar cuerda */
.llave {
  position: absolute;
  right: -17%;
  bottom: calc(8% + 23%);
  width: 76px;
  height: 76px;
  margin-bottom: -38px;
  z-index: 6;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .6s ease;
}
.llave:active { cursor: grabbing; }
.llave:focus-visible { outline: 2px solid var(--lila-osc); outline-offset: 4px; }
.joyero.abierta .llave { opacity: 0; pointer-events: none; }
.llave__progreso { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.llave__progreso circle { fill: none; stroke-width: 4; stroke: rgba(201, 164, 92, .22); }
.llave__progreso .llave__avance { stroke: var(--oro); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .15s ease; }
.llave__fig { width: 48px; height: 48px; filter: drop-shadow(0 3px 3px rgba(91, 58, 94, .35)); animation: invitar 2.6s ease-in-out infinite; }
.joyero.girando .llave__fig { animation: none; }
@keyframes invitar { 0%, 70%, 100% { rotate: 0deg; } 80% { rotate: 40deg; } 90% { rotate: -10deg; } }

.joyero__hint { margin: 10px 0 0; font-family: "Cinzel", serif; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--s-suave); transition: opacity .6s; }
.joyero__giro { display: inline-block; font-size: 1.1rem; color: var(--oro); animation: girar 2s linear infinite; }
.joyero.abierta .joyero__hint { opacity: 0; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Secciones ---------- */
.dedicatoria { padding-top: 90px; }
.dedicatoria__foto {
  width: min(62vw, 240px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px;
  border: 6px solid #fff;
  box-shadow: 0 0 0 2px var(--oro), 0 24px 40px -20px rgba(91, 58, 94, .6);
}
.dedicatoria__texto { margin: 26px 0 0; max-width: 22em; font-style: italic; font-size: clamp(1.2rem, 5vw, 1.4rem); line-height: 1.6; }
.dedicatoria__t { margin: 26px 0 0; font-family: "Cinzel", serif; font-size: .66rem; letter-spacing: .36em; text-transform: uppercase; color: var(--s-suave); }
.dedicatoria__n { margin: 4px 0 0; font-family: "Great Vibes", cursive; font-size: 2rem; color: var(--lila-osc); }

.s-evento__icono { color: var(--oro); border-color: var(--oro); background: #fff; }
.s-evento__hora { font-family: "Great Vibes", cursive; font-size: 2.2rem; color: var(--lila-osc); }
.s-vestimenta__tipo { font-family: "Cinzel", serif; font-size: 1.3rem; letter-spacing: .3em; color: var(--lila-osc); }
.s-rsvp__saludo { font-family: "Great Vibes", cursive; font-size: 2rem; }
.s-cuenta__num { color: var(--lila-osc); }
.s-btn--lleno { background: linear-gradient(120deg, var(--lila-osc), #c48ab8); }
.s-pie__n { font-family: "Great Vibes", cursive; font-size: 3rem; color: var(--lila-osc); }
.btn-musica { background: #fff; color: var(--lila-osc); box-shadow: var(--s-sombra); }

@media (prefers-reduced-motion: reduce) {
  .llave__fig, .joyero__giro, .joyero__nombre, .joyero.abierta .bailarina__fig { animation: none !important; }
}