/* Invitación de aniversario, bodas de plata (demo). Base: ../comun/evento/evento.css */
:root {
  --ev-fondo: #0e1628;
  --ev-fondo2: #172340;
  --ev-tinta: #eef1f6;
  --ev-tenue: #a9b2c2;
  --ev-acento: #d4dae3;
  --ev-acento2: #f3e6c8;
  --ev-linea: rgba(212, 218, 227, .16);
  --ev-tarjeta: rgba(255, 255, 255, .045);
  --ev-sobre: #1d2a47;
  --ev-sobre-tapa: #26365a;
  --ev-sobre-fondo: radial-gradient(ellipse at 50% 35%, #1d2a47, #0a101e 72%);
  --ev-carta: #f6f3ec;
  --ev-sello: #aeb5c1;
  --ev-sello-texto: #1d2a47;
  --ev-boton-texto: #0e1628;
  --ev-f-titulo: "Bodoni Moda", Georgia, serif;
  --ev-f-guion: "Bodoni Moda", Georgia, serif;
  --ev-f-texto: "Inter Tight", system-ui, sans-serif;
  --ev-radio: 2px;
  --ev-sombra: 0 30px 60px -30px rgba(0, 0, 0, .7);
  --plata: linear-gradient(100deg, #8d96a5, #ffffff 25%, #b9c0cb 45%, #eef1f6 60%, #8d96a5 80%, #ffffff);
}

body { background: linear-gradient(#0e1628, #0b1322); }
.ev-sobre-para strong { color: #fff; }
.ev-sobre-carta { color: #1d2a47; }
.ev-sobre-carta b { font-style: italic; font-size: clamp(26px, 6vw, 34px); color: #1d2a47; }
.ev-sello { font-family: var(--ev-f-titulo); font-size: 30px; font-style: italic; }
.ev-titulo em, .ev-frase em, .ev-nombres i { font-style: italic; }
.ev-titulo em, .ev-frase em, .ev-pie-gigante, .ev-cuenta b, .ev-hito b, .cifras b { background: var(--plata); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: plataCorre 7s linear infinite; }
@keyframes plataCorre { to { background-position: -200% 0; } }
.ev-pie-gigante { font-style: italic; }
.ev-cuenta > div, .ev-personas article, .ev-lugar, .ev-regalos article, .ev-hito, .ev-rsvp, .ev-vestimenta-arte { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); --m-luz: rgba(238, 241, 246, .18); }
.ev-cuenta > div, .ev-hito, .ev-rsvp, .ev-regalos article, .ev-lugar { border-image: linear-gradient(135deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .05) 40%, rgba(255, 255, 255, .3)) 1; }
.ev-form input, .ev-form select, .ev-form textarea, .ev-opciones label { background: rgba(255, 255, 255, .05); }
.ev-form select option { color: #222; }
.ev-boton { border-radius: 2px; letter-spacing: .06em; }

/* ---------- Héroe ---------- */
.hero-halo { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 50% 45%, rgba(238, 241, 246, .14), transparent 45%), radial-gradient(ellipse 80% 40% at 50% 110%, rgba(243, 230, 200, .14), transparent); }
.hero-surcos { position: absolute; left: 50%; top: 50%; z-index: -1; width: min(1100px, 150vw); aspect-ratio: 1; margin: calc(min(1100px, 150vw) / -2) 0 0 calc(min(1100px, 150vw) / -2); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 22px, rgba(212, 218, 227, .06) 23px 24px); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); animation: evGira 90s linear infinite; }
.hero-25 { position: relative; display: grid; place-items: center; margin: clamp(30px, 5vw, 56px) auto clamp(24px, 4vw, 46px); }
.hero-25 p { position: relative; z-index: 1; font-family: var(--ev-f-titulo); font-size: clamp(150px, 26vw, 300px); font-weight: 500; line-height: .9; letter-spacing: -.04em; background: var(--plata); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: plataCorre 7s linear infinite; filter: drop-shadow(0 10px 40px rgba(238, 241, 246, .25)); }
.hero-anillos { position: absolute; left: 50%; top: 50%; width: clamp(290px, 40vw, 500px); translate: -50% -50%; overflow: visible; }
.hero-anillos circle { stroke-dasharray: 1; stroke-dashoffset: 1; transform-origin: center; transform-box: fill-box; }
.ev-abierta .hero-anillos circle { animation: anilloTraza 2.8s cubic-bezier(.6, 0, .2, 1) .7s forwards, evGira 40s linear 3.5s infinite; }
.ev-abierta .hero-anillos circle + circle { animation-delay: 1.1s, 3.9s; animation-direction: normal, reverse; }
@keyframes anilloTraza { to { stroke-dashoffset: 0; } }
.ev-nombres { font-family: var(--ev-f-titulo); font-size: clamp(46px, 8vw, 96px); font-weight: 400; color: var(--ev-tinta); }
.ev-nombres i { display: inline; margin: 0 .1em; font-size: 1em; color: var(--ev-acento2); }
.ev-fecha-hero b { background: var(--plata); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--ev-linea); }
.cifras div { padding: clamp(30px, 5vw, 56px) 16px; text-align: center; border-right: 1px solid var(--ev-linea); }
.cifras div:last-child { border-right: 0; }
.cifras b { display: block; font-family: var(--ev-f-titulo); font-size: clamp(44px, 6vw, 76px); font-weight: 400; line-height: 1; }
.cifras span { display: block; margin-top: 10px; color: var(--ev-tenue); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- Línea de tiempo con hilo de plata ---------- */
.linea-tiempo { padding-left: 46px; }
.linea-tiempo::before, .linea-tiempo::after { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--ev-linea); }
.linea-tiempo::after { background: linear-gradient(#fff, #c9ced6, #f3e6c8); transform-origin: top; scale: 1 var(--ev-p, 0); box-shadow: 0 0 12px rgba(255, 255, 255, .5); }
.linea-tiempo .ev-hito { position: relative; display: grid; grid-template-columns: 150px 1fr; padding: 28px 30px; }
.linea-tiempo .ev-hito::before { content: ""; position: absolute; left: -41px; top: 38px; width: 14px; height: 14px; background: var(--ev-fondo); border: 2px solid var(--ev-linea); border-radius: 50%; transition: background-color .5s, border-color .5s, box-shadow .5s; }
.linea-tiempo .ev-hito.activo::before { background: #fff; border-color: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 0 18px #fff; }
.lugar-unico { grid-template-columns: minmax(0, 720px); justify-content: center; }

.ev-pie { background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(212, 218, 227, .12), transparent); }

@media (max-width: 760px) {
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras div:nth-child(2) { border-right: 0; }
  .cifras div:nth-child(-n+2) { border-bottom: 1px solid var(--ev-linea); }
  .linea-tiempo { padding-left: 36px; }
  .linea-tiempo .ev-hito { grid-template-columns: 1fr; padding: 24px; }
  .linea-tiempo .ev-hito::before { left: -31px; top: 32px; }
  .linea-tiempo::before, .linea-tiempo::after { left: 6px; }
}