/* ==========================================================
   Diseño "Neón" · XV años
   pared de ladrillo → interruptor → letrero de neón
   ========================================================== */

:root {
  --noche: #120b14;
  --rosa: #ff4fa3;
  --rosa-fuerte: #ff2b8a;
  --azul: #4fd8ff;
  --azul-fuerte: #18b7f2;
  --brillo-rosa: 0 0 4px #fff, 0 0 10px var(--rosa), 0 0 22px var(--rosa), 0 0 44px var(--rosa-fuerte), 0 0 80px var(--rosa-fuerte);
  --brillo-azul: 0 0 4px #fff, 0 0 10px var(--azul), 0 0 22px var(--azul), 0 0 44px var(--azul-fuerte), 0 0 80px var(--azul-fuerte);
  --ladrillo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='52'%3E%3Crect width='84' height='52' fill='%23170e11'/%3E%3Crect x='1.5' y='1.5' width='39' height='23' rx='1.5' fill='%23693a33'/%3E%3Crect x='43.5' y='1.5' width='39' height='23' rx='1.5' fill='%235c3029'/%3E%3Crect x='-19.5' y='27.5' width='39' height='23' rx='1.5' fill='%23582e28'/%3E%3Crect x='22.5' y='27.5' width='39' height='23' rx='1.5' fill='%236e3d35'/%3E%3Crect x='64.5' y='27.5' width='39' height='23' rx='1.5' fill='%23582e28'/%3E%3C/svg%3E");

  --s-fondo: var(--noche);
  --s-tinta: #f6eaf2;
  --s-suave: rgba(246, 234, 242, .65);
  --s-acento: var(--rosa);
  --s-acento-tinta: #fff;
  --s-tarjeta: rgba(255, 255, 255, .04);
  --s-borde: rgba(255, 79, 163, .45);
  --s-radio: 18px;
  --s-sombra: 0 0 18px rgba(255, 79, 163, .25), inset 0 0 18px rgba(255, 79, 163, .08);
  --s-fuente: "DM Sans", system-ui, sans-serif;
  --s-titulo: "Pacifico", cursive;
  --s-titulo-tam: clamp(2.3rem, 10vw, 2.9rem);
  --s-etiqueta: "DM Sans", system-ui, sans-serif;
  --s-num: "DM Sans", system-ui, sans-serif;
  --s-btn-linea-color: #fff;
}

body { background: var(--noche); color: var(--s-tinta); font-family: var(--s-fuente); }

/* ---------- Pared ---------- */
.pared {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 7svh, 60px);
  padding: calc(env(safe-area-inset-top) + 30px) 16px calc(env(safe-area-inset-bottom) + 70px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(255, 79, 163, 0), transparent 70%),
    radial-gradient(120% 80% at 50% 50%, transparent 30%, rgba(0, 0, 0, .85) 100%),
    linear-gradient(rgba(10, 5, 8, .62), rgba(10, 5, 8, .62)),
    var(--ladrillo);
  background-size: auto, auto, auto, 84px 52px;
  transition: background .8s ease;
}
.pared.encendida {
  background:
    radial-gradient(55% 40% at 50% 36%, rgba(255, 79, 163, .32), transparent 70%),
    radial-gradient(120% 80% at 50% 50%, transparent 35%, rgba(0, 0, 0, .8) 100%),
    linear-gradient(rgba(10, 5, 8, .45), rgba(10, 5, 8, .45)),
    var(--ladrillo);
  background-size: auto, auto, auto, 84px 52px;
}

/* ---------- Letrero ---------- */
.letrero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.neon {
  margin: 0;
  line-height: 1;
  color: rgba(255, 255, 255, .1);
  -webkit-text-stroke: 1px rgba(255, 255, 255, .16);
  text-shadow: none;
}
.neon--azul { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: clamp(1.6rem, 8vw, 2.2rem); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; }
.neon--xv { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: clamp(5.4rem, 30vw, 8rem); letter-spacing: .04em; margin-top: -4px; }
.neon--nombre { font-family: "Pacifico", cursive; font-weight: 400; font-size: clamp(3.2rem, 16vw, 4.6rem); line-height: 1.25; margin-top: -10px; transform: rotate(-6deg); }
.neon--fecha { margin-top: 18px; font-size: clamp(.8rem, 3.6vw, 1rem); letter-spacing: .32em; }
.neon-corazon { width: 52px; margin-top: 4px; fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 2.5; }

.letrero.encendido .neon--rosa { animation: encenderRosa 1.6s linear forwards, zumbar 7s 3s linear infinite; }
.letrero.encendido .neon--azul { animation: encenderAzul 1.4s linear forwards, zumbar 9s 4s linear infinite; }
.letrero.encendido .neon-corazon { animation: encenderCorazon 1.2s linear forwards, latido 1.4s 3s ease-in-out infinite; }
.letrero.encendido .neon--n1 { animation-delay: .1s, 3s; }
.letrero.encendido .neon--n2 { animation-delay: .5s, 3.4s; }
.letrero.encendido .neon--n3 { animation-delay: 1s, 4s; }
.letrero.encendido .neon--n4 { animation-delay: 1.8s, 3s; }
.letrero.encendido .neon--n5 { animation-delay: 2.2s, 5s; }

@keyframes encenderRosa {
  0%, 9%, 13%, 31%, 35% { color: rgba(255, 255, 255, .1); text-shadow: none; -webkit-text-stroke-color: rgba(255, 255, 255, .16); }
  10%, 12%, 32%, 34%, 60%, 100% { color: #fff4fa; text-shadow: var(--brillo-rosa); -webkit-text-stroke-color: transparent; }
}
@keyframes encenderAzul {
  0%, 15%, 19%, 45%, 48% { color: rgba(255, 255, 255, .1); text-shadow: none; -webkit-text-stroke-color: rgba(255, 255, 255, .16); }
  16%, 18%, 46%, 47%, 70%, 100% { color: #f2fcff; text-shadow: var(--brillo-azul); -webkit-text-stroke-color: transparent; }
}
@keyframes encenderCorazon {
  0%, 20%, 26% { stroke: rgba(255, 255, 255, .16); filter: none; }
  22%, 24%, 60%, 100% { stroke: #fff4fa; filter: drop-shadow(0 0 4px var(--rosa)) drop-shadow(0 0 12px var(--rosa)) drop-shadow(0 0 26px var(--rosa-fuerte)); }
}
@keyframes zumbar { 0%, 96%, 98%, 100% { opacity: 1; } 97% { opacity: .55; } }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- Interruptor ---------- */
.interruptor { display: flex; flex-direction: column; align-items: center; gap: 14px; transition: opacity .8s ease; }
.pared.encendida .interruptor { opacity: .35; }
.placa {
  width: 74px;
  height: 116px;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  background: linear-gradient(160deg, #f4efe6, #d8d1c4);
  box-shadow: inset 0 1px 0 #fff, 0 10px 20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .25);
}
.placa__tornillo { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #bdb6a8, #8f887b); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); position: relative; }
.placa__tornillo::after { content: ""; position: absolute; left: 1px; right: 1px; top: 4px; height: 1px; background: rgba(0, 0, 0, .35); transform: rotate(-30deg); }
.palanca {
  all: unset;
  position: relative;
  width: 30px;
  height: 52px;
  border-radius: 7px;
  background: linear-gradient(180deg, #c8c0b2, #ebe5da);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35);
  cursor: pointer;
  touch-action: none;
}
.palanca span {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 26px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(180deg, #fffdf8, #e2dbcf);
  box-shadow: 0 4px 4px rgba(0, 0, 0, .35);
  transition: top .18s cubic-bezier(.3, 1.6, .5, 1);
}
.palanca[aria-pressed="true"] span { top: 4px; box-shadow: 0 -2px 4px rgba(0, 0, 0, .25); }
.palanca:focus-visible { outline: 2px solid var(--rosa); outline-offset: 6px; }
.interruptor__txt {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  animation: invitar 2s ease-in-out infinite;
}
.pared.encendida .interruptor__txt { animation: none; }
@keyframes invitar { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ---------- Reflectores ---------- */
.reflectores { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease 2.4s; mix-blend-mode: screen; }
.pared.encendida .reflectores { opacity: 1; }
.reflectores span {
  position: absolute;
  top: -10%;
  width: 46%;
  height: 120%;
  transform-origin: 50% 0;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(18px);
}
.reflectores span:nth-child(1) { left: -6%; background: linear-gradient(rgba(255, 79, 163, .55), transparent 85%); animation: barrer 6s ease-in-out infinite; }
.reflectores span:nth-child(2) { left: 27%; background: linear-gradient(rgba(79, 216, 255, .45), transparent 85%); animation: barrer 7.5s ease-in-out infinite reverse; }
.reflectores span:nth-child(3) { right: -6%; background: linear-gradient(rgba(178, 120, 255, .5), transparent 85%); animation: barrer 6.8s 1s ease-in-out infinite; }
@keyframes barrer { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }

.pared .desliza-c { color: #fff; }

/* ---------- Secciones ---------- */
.s-titulo { color: #fff; text-shadow: var(--brillo-rosa); }
.s-evento, .s-cuenta__caja { border-width: 1.5px; }
.s-cuenta__num { color: #fff; font-weight: 700; text-shadow: var(--brillo-azul); }
.s-evento__icono { color: var(--azul); border-color: var(--azul); box-shadow: 0 0 12px rgba(79, 216, 255, .5), inset 0 0 8px rgba(79, 216, 255, .3); }
.s-evento__hora { color: #fff; font-weight: 700; text-shadow: var(--brillo-rosa); }
.s-foto { border: 1.5px solid var(--rosa); box-shadow: 0 0 16px rgba(255, 79, 163, .45); }
.s-foto:nth-child(even) { border-color: var(--azul); box-shadow: 0 0 16px rgba(79, 216, 255, .45); }
.s-vestimenta__tipo { font-family: "Pacifico", cursive; color: #fff; text-shadow: var(--brillo-azul); }
.s-rsvp__saludo { color: #fff; font-family: "Pacifico", cursive; text-shadow: var(--brillo-azul); }
.s-btn--lleno { background: transparent; border: 2px solid #fff; box-shadow: var(--brillo-rosa), inset 0 0 14px rgba(255, 79, 163, .6); text-shadow: 0 0 8px var(--rosa); }
.s-btn--linea, .s-btn--mini { border-color: var(--azul); box-shadow: 0 0 10px rgba(79, 216, 255, .45); }
.s-pie__n { font-family: "Pacifico", cursive; color: #fff; text-shadow: var(--brillo-rosa); }

.frase { padding-top: 90px; }
.frase__foto { width: min(62vw, 250px); aspect-ratio: 4 / 5; padding: 6px; border-radius: 24px; border: 2px solid var(--rosa); box-shadow: var(--brillo-rosa); }
.frase__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; }
.frase__texto { margin: 30px 0 0; max-width: 22em; font-size: 1.15rem; line-height: 1.7; }

.btn-musica { background: rgba(18, 11, 20, .9); color: var(--rosa); border: 1.5px solid var(--rosa); box-shadow: 0 0 12px rgba(255, 79, 163, .5); }

@media (prefers-reduced-motion: reduce) {
  .letrero.encendido .neon, .letrero.encendido .neon-corazon { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
  .reflectores span, .interruptor__txt { animation: none !important; }
}