/* 124 · Sol y Luna — boda celestial en oro sobre azul medianoche. Sobre con forro de estrellas y un medallón de sol y luna que se parte en dos.
   Portada: la luna y el sol en oro a los lados del nombre, con estrellas que titilan (WebGL, modo titila).
   Orden: del ocaso al alba — la invitación empieza de noche y al bajar amanece: el fondo pasa de medianoche a dorado; en cada sección se enciende una constelación.
   Fecha: un eclipse — la luna cubre al sol y el anillo de luz enmarca el día. Cierre: el sol completo sobre el amanecer dorado. */
.c-solyluna { --display-peso: 400; --nombre-color: #F3E9D2; --titulo-letra: "Cormorant Garamond"; --titulo-peso: 600; --titulo-espacio: .01em;
	--dia-letra: "Cinzel Decorative"; --dia-color: #F3E9D2; --y-letra: "Cormorant Garamond"; --y-color: #D6B25E; --y-tam: .6em; --pareja-tam: .7;
	--radio: 14px; --vj: 44px; --sombra: 0 0 22px rgb(214 178 94 / .35); --nombre-tam: clamp(3.2rem, 7.8vw, 6.8rem); }
.c-solyluna .xv-cielo { display: none; }
.c-solyluna main { background: linear-gradient(180deg, #141B3A 0%, #141B3A 22%, #1D2550 40%, #3B3B66 58%, #7A5E5A 74%, #C79A5A 88%, #E9C989 100%); }
.c-solyluna main > .xv-sec:not(#portada) { background: transparent; }
.c-solyluna .v-velo { background: radial-gradient(52% 42% at 50% 48%, rgb(14 19 42 / .7), transparent 76%); }

/* portada */
.c-solyluna .e-evento { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; text-transform: none; letter-spacing: .08em; font-size: 1.35rem; color: #D6B25E; }
.c-solyluna .e-fecha { color: #CDCDE0; letter-spacing: .14em; }
.c-solyluna .e-nombre { text-shadow: 0 0 30px rgb(214 178 94 / .3); }
.sl-luna { --w: min(26vmin, 240px); left: 8vw; top: calc(50% - min(13vmin, 120px)); --r: -10deg; --dx: -6vw; --dr: -14deg; --ex: -30vw; --ey: 0px; --ed: .3s; --fd: 9s; --fa: 6px; --fr: 2deg; }
.sl-sol { --w: min(28vmin, 260px); right: 8vw; top: calc(50% - min(14vmin, 130px)); --dx: 6vw; --dr: 40deg; --ex: 30vw; --ey: 0px; --ed: .45s; --fd: 10s; --fa: 6px; --fr: 4deg; }
.sl-sol .e-img { animation-name: sl-gira; animation-duration: 40s; animation-timing-function: linear; animation-direction: normal; }
@keyframes sl-gira { to { transform: rotate(360deg); } }
.sl-estrella-a { --w: min(7vmin, 60px); left: 30vw; top: 12vh; --dy: -10vh; --ex: 0px; --ey: -20vh; --ed: .8s; --fd: 3s; --fa: 2px; --fr: 10deg; }
.sl-estrella-b { --w: min(5vmin, 44px); right: 28vw; bottom: 14vh; --dy: 10vh; --ex: 0px; --ey: 20vh; --ed: 1s; --fd: 4s; --fa: 2px; --fr: 12deg; }

/* secciones: placas de cielo con su constelación */
.c-solyluna main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: rgb(16 22 50 / .62); border: 1px solid rgb(214 178 94 / .32); border-radius: 18px;
	padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 64px); backdrop-filter: blur(4px); box-shadow: 0 40px 70px -40px rgb(0 0 0 / .7); }
.sl-const { position: absolute; top: 16px; right: 18px; width: clamp(90px, 12vw, 140px); overflow: visible; }
.sl-const path { fill: none; stroke: rgb(214 178 94 / .7); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s ease .4s; }
.sl-const circle { fill: #F3E9D2; opacity: 0; transition: opacity .6s ease; filter: drop-shadow(0 0 4px #D6B25E); }
.llego > .xv-ancho > .sl-const path { stroke-dashoffset: 0; }
.llego > .xv-ancho > .sl-const circle { opacity: 1; }
.llego > .xv-ancho > .sl-const circle:nth-of-type(2) { transition-delay: .5s; } .llego > .xv-ancho > .sl-const circle:nth-of-type(3) { transition-delay: .9s; }
.llego > .xv-ancho > .sl-const circle:nth-of-type(4) { transition-delay: 1.3s; } .llego > .xv-ancho > .sl-const circle:nth-of-type(n+5) { transition-delay: 1.7s; }
.c-solyluna .xv-kicker { color: #D6B25E; letter-spacing: .32em; }
.c-solyluna .xv-titulo { color: #F3E9D2; }
.c-solyluna .xv-titulo .xv-script { font-style: italic; font-weight: 500; color: #D6B25E; }
.c-solyluna .xv-superficie { background: rgb(243 233 210 / .06); border: 1px solid rgb(214 178 94 / .24); border-radius: 12px; box-shadow: none; }
.c-solyluna .xv-momento time { color: #D6B25E; }
.c-solyluna .e-firma { font-family: "Cormorant Garamond", serif; font-style: italic; color: #D6B25E; }
.c-solyluna .xv-boton:not(.xv-boton-suave) { background: #D6B25E; color: #141B3A; border-color: #D6B25E; }
.c-solyluna .e-ornamento { width: min(60%, 230px); }
.c-solyluna .xv-rsvp textarea, .c-solyluna .xv-rsvp input { background: rgb(243 233 210 / .08); color: #F3E9D2; border-color: rgb(214 178 94 / .4); }

/* fecha: el eclipse */
.c-solyluna .e-fecha-k { color: #D6B25E; letter-spacing: .4em; }
.sl-m-sol { inset: 8%; width: 84%; opacity: clamp(0, calc(var(--t1) * 2), 1); filter: drop-shadow(0 0 40px rgb(214 178 94 / .55)); transform: rotate(calc(var(--t1) * 60deg)); }
.sl-m-luna { inset: 22%; width: 56%; border-radius: 50%; transform: translateX(calc((1 - var(--t1)) * 120%)); opacity: clamp(0, calc(var(--t1) * 1.6), 1); filter: brightness(.25); }
.sl-m-aro { inset: 21%; border-radius: 50%; background: #141B3A; opacity: var(--t2); box-shadow: 0 0 0 2px #F3E9D2, 0 0 30px 6px rgb(255 236 180 / .8), 0 0 90px 20px rgb(214 178 94 / .5); transform: scale(calc(.9 + var(--t2) * .1)); }
.c-solyluna .e-dia-caja { translate: 0 1%; }
.c-solyluna .e-dia { font-size: clamp(3.4rem, 10vw, 5.4rem); font-weight: 700; }
.c-solyluna .e-mes { font-family: "Cormorant Garamond", serif; font-style: italic; color: #D6B25E; font-size: clamp(1.3rem, 3.4vw, 1.9rem); }
.c-solyluna .e-anio { color: #CDCDE0; font-size: .74rem; }

/* cierre: amanece */
.sl-cierre-sol { position: absolute; left: 50%; top: 2%; width: min(40vmin, 300px); translate: -50% 0; animation: sl-gira 50s linear infinite; filter: drop-shadow(0 0 40px rgb(255 236 180 / .7)); }
.c-solyluna .e-cierre { padding-top: clamp(250px, 38vh, 330px); --tinta: #2A2010; --tinta-2: #4A3A1E; --nombre-color: #2A2010; }
.c-solyluna .e-cierre .xv-kicker { color: #5A4214; }
.c-solyluna .e-cierre .e-nombre-fin { color: #2A2010; --y-color: #7A5410; }
.c-solyluna .e-cierre .xv-texto-grande, .c-solyluna .e-cierre p, .c-solyluna .e-cierre a { color: #2A2010; }

@media (max-width: 760px) {
	.c-solyluna { --nombre-tam: clamp(3rem, 14vw, 4.4rem); }
	.sl-luna { --w: 30vw; left: -6vw; top: 9vh; } .sl-sol { --w: 32vw; right: -6vw; top: auto; bottom: 10vh; }
	.sl-estrella-a { left: 70vw; top: 14vh; } .sl-estrella-b { right: 70vw; bottom: 22vh; }
}