/* Invitación de XV años (demo). Base: ../comun/evento/evento.css */
:root {
  --ev-fondo: #160d24;
  --ev-fondo2: #24163a;
  --ev-tinta: #fbeef2;
  --ev-tenue: #cdb8cf;
  --ev-acento: #eaa9bb;
  --ev-acento2: #f3d9a4;
  --ev-linea: rgba(255, 228, 236, .16);
  --ev-tarjeta: rgba(255, 255, 255, .055);
  --ev-sobre: #f4d3dc;
  --ev-sobre-tapa: #e8bccb;
  --ev-sobre-fondo: radial-gradient(ellipse at 50% 30%, #3a2156, #160d24 70%);
  --ev-carta: #fff8f6;
  --ev-sello: #c98b6b;
  --ev-sello-texto: #fff3ea;
  --ev-boton-texto: #2a1430;
  --ev-f-titulo: "Playfair Display", Georgia, serif;
  --ev-f-guion: "Great Vibes", cursive;
  --ev-f-texto: "Manrope", system-ui, sans-serif;
  --ev-radio: 26px;
  --ev-sombra: 0 30px 60px -30px rgba(0, 0, 0, .7);
  --oro: linear-gradient(100deg, #ffe3d3, #eaa9bb 35%, #f3d9a4 55%, #c98b6b 80%, #ffe3d3);
}

body { background: radial-gradient(ellipse 80% 50% at 50% 0%, #2c1846, transparent), var(--ev-fondo); background-attachment: fixed; }
.ev-sobre-carta { color: #3a2140; }
.ev-sobre-carta b { color: #c06a86; }
.ev-sobre-para strong { color: #fff; }
.sobre-cielo { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 70%, #fff, transparent), radial-gradient(1px 1px at 35% 80%, #fff, transparent), radial-gradient(1px 1px at 55% 50%, #fff, transparent); opacity: .7; }
.ev-sobre { isolation: isolate; }

/* Tarjetas de vidrio */
.ev-cuenta > div, .ev-personas article, .ev-lugar, .ev-regalos article, .ev-hito, .ev-rsvp, .momentos-rejilla article, .ev-vestimenta-arte { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); --m-luz: rgba(234, 169, 187, .3); }
.ev-cuenta b, .ev-hito b { background: var(--oro); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: oroCorre 6s linear infinite; }
.ev-form input, .ev-form select, .ev-form textarea, .ev-opciones label { background: rgba(255, 255, 255, .06); }
.ev-form select option { color: #222; }
.ev-titulo em, .ev-frase em, .ev-pie-gigante { background: var(--oro); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: oroCorre 6s linear infinite; padding: 0 .08em; }
.ev-pie-gigante .m-letra { background: inherit; background-size: 1200% 100%; -webkit-background-clip: text; background-clip: text; }
@keyframes oroCorre { to { background-position: -200% 0; } }

/* ---------- Héroe nocturno ---------- */
.hero-cielo { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(234, 169, 187, .28), transparent 70%), radial-gradient(ellipse at 50% 20%, #3a2156, transparent 70%); }
.hero-cielo::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 15%, #fff, transparent), radial-gradient(1px 1px at 80% 40%, #fff, transparent), radial-gradient(1px 1px at 90% 75%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 85%, #fff, transparent), radial-gradient(1px 1px at 15% 90%, #fff, transparent); background-size: 520px 520px; opacity: .8; animation: cieloGira 160s linear infinite; }
@keyframes cieloGira { to { background-position: 520px 260px; } }
.hero-luna { position: absolute; right: 9%; top: 12%; z-index: -1; width: clamp(90px, 13vw, 170px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6f0, #f4d3dc 55%, #d9a6b6); box-shadow: 0 0 80px 20px rgba(244, 211, 220, .35), 0 0 200px 60px rgba(234, 169, 187, .18); }
.hero-luna::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 60%, rgba(0, 0, 0, .06) 8%, transparent 9%), radial-gradient(circle at 62% 30%, rgba(0, 0, 0, .05) 6%, transparent 7%), radial-gradient(circle at 70% 70%, rgba(0, 0, 0, .05) 10%, transparent 11%); }
.hero-xv { position: absolute; left: 0; right: 0; top: 50%; z-index: -1; margin: -0.55em 0 0; font-family: var(--ev-f-titulo); font-size: clamp(260px, 48vw, 620px); font-weight: 600; line-height: 1.1; color: transparent; -webkit-text-stroke: 1.5px rgba(234, 169, 187, .28); text-align: center; letter-spacing: -.04em; opacity: 0; scale: .9; transition: opacity 2s ease .5s, scale 2.4s cubic-bezier(.16, 1, .3, 1) .5s; }
.ev-abierta .hero-xv { opacity: 1; scale: 1; }
.hero-destellos svg { position: absolute; left: var(--x); top: var(--y); width: calc(26px * var(--t)); height: calc(26px * var(--t)); fill: #fff3ea; filter: drop-shadow(0 0 6px #eaa9bb); animation: evBrilla 3s ease-in-out infinite var(--d); }
.tiara { width: clamp(150px, 20vw, 220px); margin: 0 auto 10px; overflow: visible; filter: drop-shadow(0 0 14px rgba(234, 169, 187, .6)); }
.tiara path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ev-abierta .tiara path { animation: tiaraTraza 2.6s cubic-bezier(.6, 0, .2, 1) .6s forwards; }
@keyframes tiaraTraza { to { stroke-dashoffset: 0; } }
.ev-nombres { font-size: clamp(96px, 20vw, 230px); filter: drop-shadow(0 6px 30px rgba(234, 169, 187, .35)); }
.ev-nombres span { padding: 0 .14em; background: var(--oro); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.ev-abierta .ev-nombres span[data-ev-in] { animation: evEntra 1.6s cubic-bezier(.16, 1, .3, 1) .55s both, oroCorre 6s linear infinite; }
.ev-fecha-hero span { border-color: rgba(234, 169, 187, .35); }
.hero-lugar { margin-top: 20px; color: var(--ev-tenue); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; }

/* ---------- Momentos ---------- */
.momentos-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.momentos-rejilla article { padding: 34px 28px; background: var(--ev-tarjeta); border: 1px solid var(--ev-linea); border-radius: var(--ev-radio); box-shadow: var(--ev-sombra); }
.momentos-rejilla b { display: block; margin-bottom: 18px; font-family: var(--ev-f-titulo); font-size: 64px; font-weight: 400; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--ev-acento); }
.momentos-rejilla h3 { font-family: var(--ev-f-titulo); font-size: 28px; }
.momentos-rejilla p { margin-top: 8px; color: var(--ev-tenue); }

.ev-pie { background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(234, 169, 187, .18), transparent); }

@media (max-width: 760px) {
  .momentos-rejilla { grid-template-columns: 1fr; }
  .hero-luna { right: -6%; top: 8%; }
}