/* Invitación de cumpleaños, fiesta disco retro (demo). Base: ../comun/evento/evento.css */
:root {
  --ev-fondo: #fff3e2;
  --ev-fondo2: #ffe6c7;
  --ev-tinta: #2a1240;
  --ev-tenue: #6b5279;
  --ev-acento: #ff3e7f;
  --ev-acento2: #6c2bd9;
  --ev-linea: rgba(42, 18, 64, .16);
  --ev-tarjeta: #ffffff;
  --ev-sobre: #ffc93c;
  --ev-sobre-tapa: #ff8a1f;
  --ev-sobre-fondo: repeating-conic-gradient(from 0deg at 50% 50%, #ff3e7f 0 10deg, #ff5a92 10deg 20deg);
  --ev-carta: #fff8ee;
  --ev-sello: #6c2bd9;
  --ev-sello-texto: #ffc93c;
  --ev-boton-texto: #ffffff;
  --ev-f-titulo: "Bricolage Grotesque", system-ui, sans-serif;
  --ev-f-guion: "Shrikhand", cursive;
  --ev-f-texto: "Bricolage Grotesque", system-ui, sans-serif;
  --ev-radio: 26px;
  --ev-sombra: 6px 6px 0 #2a1240;
}

.ev-titulo { font-weight: 800; letter-spacing: -.02em; }
.ev-titulo em { color: var(--ev-acento); }
.ev-sobre-para { color: #fff; }
.ev-sobre-para strong { display: inline; color: #ffc93c; font-family: var(--ev-f-guion); }
.ev-sobre-carta b { color: #ff3e7f; font-size: clamp(28px, 7vw, 38px); }
.ev-sello { font-family: var(--ev-f-guion); font-size: 32px; }
.ev-abrir { color: #2a1240; background: #ffc93c; box-shadow: 4px 4px 0 #2a1240; font-family: var(--ev-f-guion); font-size: 18px; letter-spacing: .04em; text-transform: none; }
.ev-abrir:hover { box-shadow: 6px 6px 0 #2a1240; }

/* Tarjetas tipo sticker con borde y sombra sólida */
.ev-cuenta > div, .ev-personas article, .ev-lugar, .ev-regalos article, .ev-rsvp, .ev-vestimenta-arte { border: 3px solid #2a1240; --m-luz: rgba(255, 255, 255, .5); }
.ev-cuenta > div:nth-child(1) { background: #ffc93c; rotate: -3deg; }
.ev-cuenta > div:nth-child(2) { background: #ff8a1f; rotate: 2deg; }
.ev-cuenta > div:nth-child(3) { background: #1fb5a8; rotate: -2deg; }
.ev-cuenta > div:nth-child(4) { background: #ff3e7f; rotate: 3deg; color: #fff; }
.ev-cuenta > div:nth-child(4) span { color: #fff; }
.ev-cuenta b { font-family: var(--ev-f-guion); font-weight: 400; }
.ev-cuenta span { color: #2a1240; }
.ev-boton { border: 3px solid #2a1240; box-shadow: 4px 4px 0 #2a1240; transition: translate .2s, box-shadow .2s; }
.ev-boton:hover { translate: -2px -2px; box-shadow: 6px 6px 0 #2a1240; filter: none; }
.ev-boton--borde { background: #fff; border-color: #2a1240; }
.ev-paso-punto { border: 3px solid #2a1240; }
.ev-paso.activo .ev-paso-punto { border-color: #2a1240; rotate: -8deg; }
.ev-ruta::after { background: repeating-linear-gradient(#ff3e7f 0 16px, #ffc93c 16px 32px, #1fb5a8 32px 48px); width: 6px; margin-left: -3px; }
.ev-paso-hora { font-family: var(--ev-f-guion); color: var(--ev-acento2); }
.ev-paso-info h3, .ev-lugar-cuerpo h3, .ev-regalos h3, .ev-vestimenta h3 { font-weight: 800; }
.ev-frase p { font-weight: 800; letter-spacing: -.02em; }
.ev-pie-gigante { color: #ff3e7f; text-shadow: 4px 4px 0 #ffc93c, 8px 8px 0 #6c2bd9; padding-bottom: .1em; }
.ev-form input, .ev-form select, .ev-form textarea, .ev-opciones label { border: 2px solid #2a1240; }
.ev-opciones label:has(input:checked) { border-color: #2a1240; box-shadow: 3px 3px 0 #2a1240; }
.ev-paleta span::before { border-color: #2a1240; }

/* ---------- Héroe ---------- */
.ev-hero { padding-bottom: 170px; }
.hero-rayos { position: absolute; left: 50%; top: 50%; z-index: -2; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax; background: repeating-conic-gradient(#fff3e2 0 9deg, #ffe2bb 9deg 18deg); animation: evGira 80s linear infinite; }
.hero-bola { position: absolute; left: 50%; top: 0; z-index: 1; width: clamp(90px, 11vw, 150px); margin-left: clamp(-75px, -5.5vw, -45px); overflow: visible; filter: drop-shadow(0 18px 24px rgba(42, 18, 64, .35)); transform-origin: 50% 0; animation: bolaMece 4s ease-in-out infinite; }
.bola-reticula { animation: bolaGira 3s linear infinite; }
.bola-brillos path { transform-box: fill-box; transform-origin: center; animation: evBrilla 1.6s ease-in-out infinite; }
.bola-brillos path:nth-child(2) { animation-delay: .5s; }
.bola-brillos path:nth-child(3) { animation-delay: 1s; }
@keyframes bolaGira { to { translate: -16px 0; } }
@keyframes bolaMece { 50% { rotate: 4deg; } }
.hero-luces i { position: absolute; top: -10%; left: 50%; z-index: -1; width: 18vw; height: 120%; transform-origin: 50% 0; background: linear-gradient(var(--c), transparent 80%); opacity: .22; filter: blur(8px); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); animation: luzBarre 6s ease-in-out infinite alternate; }
.hero-luces i:nth-child(1) { --c: #ff3e7f; rotate: -40deg; }
.hero-luces i:nth-child(2) { --c: #1fb5a8; rotate: -15deg; animation-delay: -2s; }
.hero-luces i:nth-child(3) { --c: #ffc93c; rotate: 10deg; animation-delay: -4s; }
.hero-luces i:nth-child(4) { --c: #6c2bd9; rotate: 32deg; animation-delay: -1s; }
.hero-luces i:nth-child(5) { --c: #ff8a1f; rotate: 52deg; animation-delay: -3s; }
@keyframes luzBarre { from { translate: -60px 0; } to { translate: 60px 0; } }
.ev-hero-sup { color: var(--ev-acento2); font-weight: 800; }
.hero-30 { display: grid; justify-items: center; margin: 6px 0 18px; font-family: var(--ev-f-guion); line-height: .85; }
.hero-30 span { font-size: clamp(180px, 32vw, 380px); color: #ff3e7f; text-shadow: 6px 6px 0 #ff8a1f, 12px 12px 0 #ffc93c, 18px 18px 0 #1fb5a8, 24px 24px 0 #6c2bd9; letter-spacing: -.02em; }
.ev-abierta .hero-30 span { animation: treintaBota 1.4s cubic-bezier(.3, 1.6, .5, 1) .6s both; }
@keyframes treintaBota { from { scale: .2; rotate: -18deg; } to { scale: 1; rotate: -4deg; } }
.hero-30 small { margin-top: 14px; padding: 6px 18px; color: #fff; background: #2a1240; border-radius: 999px; font-family: var(--ev-f-texto); font-size: 15px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; rotate: 2deg; }
.ev-fecha-hero { font-weight: 800; }
.ev-fecha-hero b { font-family: var(--ev-f-guion); color: #6c2bd9; }
.ev-fecha-hero span { border-color: #2a1240; }
.sticker { position: absolute; z-index: 4; padding: 10px 18px; color: #2a1240; background: #fff; border: 3px solid #2a1240; border-radius: 999px; box-shadow: 4px 4px 0 #2a1240; font-weight: 800; font-size: 15px; white-space: nowrap; }
.sticker--a { left: 9%; top: 30%; background: #ffc93c; rotate: -10deg; }
.sticker--b { right: 8%; top: 40%; background: #1fb5a8; color: #fff; rotate: 8deg; }
.sticker--c { left: 14%; bottom: 26%; background: #ff3e7f; color: #fff; rotate: 6deg; font-family: var(--ev-f-guion); font-weight: 400; font-size: 20px; }
.ev-abierta .sticker { animation: evEntra 1.2s cubic-bezier(.3, 1.6, .5, 1) both, stickerFlota 5s ease-in-out 2s infinite; animation-delay: calc(.9s + var(--i, 0) * .15s), calc(2s + var(--i, 0) * .3s); }
@keyframes stickerFlota { 50% { translate: 0 -10px; } }
.hero-ondas { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 130px; overflow: hidden; }
.hero-ondas svg { width: 200%; max-width: none; height: 100%; animation: ondaCorre 12s linear infinite; }
@keyframes ondaCorre { to { translate: -50% 0; } }
.ev-bajar { bottom: 140px; color: #2a1240; }

/* ---------- Franja ---------- */
.franja { overflow: hidden; padding: 18px 0; background: #2a1240; margin: 20px 0; }
.franja div { display: flex; gap: 34px; width: max-content; animation: franjaCorre 20s linear infinite; }
.franja span { color: #ffc93c; font-family: var(--ev-f-guion); font-size: clamp(30px, 4vw, 48px); line-height: 1.2; }
.franja i { color: #ff3e7f; font-size: 28px; font-style: normal; align-self: center; }
@keyframes franjaCorre { to { translate: -50% 0; } }

/* ---------- Canciones ---------- */
.canciones { color: #fff3e2; background: #2a1240; transition: background-color .9s; }
.canciones .ev-titulo { color: #fff3e2; }
.canciones .ev-titulo em { color: #ffc93c; }
.canciones .ev-encabezado p:not(.ev-etiqueta) { color: #d8c6e6; }
.canciones .ev-etiqueta { color: #1fb5a8; }
.canciones-form { display: flex; gap: 12px; max-width: 640px; margin: 0 auto 34px; }
.canciones-form input { flex: 1; min-width: 0; padding: 15px 20px; color: #2a1240; background: #fff3e2; border: 3px solid #ffc93c; border-radius: 999px; font: 600 16px var(--ev-f-texto); }
.canciones-form .ev-boton { border-color: #ffc93c; box-shadow: 4px 4px 0 #ffc93c; }
.canciones-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; }
.canciones-lista li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; color: #fff3e2; background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 243, 226, .25); border-radius: 999px; font-weight: 600; }
.canciones-lista li.nueva { animation: cancionEntra .8s cubic-bezier(.3, 1.6, .5, 1) both; border-color: #ffc93c; }
@keyframes cancionEntra { from { scale: .3; opacity: 0; } }
.disco { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #ff3e7f 0 4px, #111 5px 7px, #333 8px 9px, #111 10px 11px, #2b2b2b 12px); animation: evGira 2s linear infinite; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lugar-unico { grid-template-columns: minmax(0, 720px); justify-content: center; }
.ev-lugar { box-shadow: 8px 8px 0 #2a1240; }
.ev-pie { background: linear-gradient(transparent, #ffe2bb); }

@media (max-width: 760px) {
  .sticker { font-size: 13px; padding: 8px 14px; }
  .sticker--a { left: 4%; top: 16%; }
  .sticker--b { right: 3%; top: 29%; }
  .sticker--c { display: none; }
  .hero-30 span { text-shadow: 4px 4px 0 #ff8a1f, 8px 8px 0 #ffc93c, 12px 12px 0 #1fb5a8, 16px 16px 0 #6c2bd9; }
  .canciones-form { flex-direction: column; }
  .ev-cuenta > div { rotate: 0deg !important; }
}