/* 132 · Sirena — XV bajo el mar: aguamarina, lila marino, nácar y coral. Se abre una concha y adentro brilla la perla.
   Portada: la luz cae a través del agua y se mueve como en el mar (WebGL, modo agua); suben burbujas.
   Orden: el descenso — la invitación baja al fondo del mar y cada sección sube como una burbuja que se abre.
   Fecha: la perla crece y el día queda adentro. Cierre: la cola de sirena saliendo del agua. */
.c-sirena { --display-peso: 400; --nombre-color: #F2ECF4; --titulo-letra: "Gilda Display"; --titulo-peso: 400; --titulo-espacio: 0;
	--dia-letra: "Gilda Display"; --dia-color: #123A5C; --radio: 40px; --vj: 46px; --sombra: 0 18px 24px rgb(4 20 34 / .4); --nombre-tam: clamp(5rem, 14vw, 12rem);
	--ap-w: min(70vw, 340px); --ap-destello: rgb(191 239 240 / .6); }
.c-sirena .xv-cielo { display: none; }
.c-sirena main { background: linear-gradient(180deg, #1C5F82 0%, #145073 20%, #0F3350 55%, #0A2238 100%); }
.c-sirena main > .xv-sec:not(#portada) { background: transparent; }
.c-sirena .v-velo { background: radial-gradient(48% 40% at 50% 48%, rgb(10 34 56 / .55), transparent 76%); }

.c-sirena .e-evento { font-family: "Quicksand", sans-serif; font-weight: 700; color: #BFF5F0; letter-spacing: .44em; font-size: .76rem; }
.c-sirena .e-xv { color: #E6DAF5; } .c-sirena .e-xv span { font-family: "Gilda Display", serif; color: #7FE0DA; }
.c-sirena .e-fecha { color: #E6EEF3; font-weight: 600; letter-spacing: .08em; }
.c-sirena .e-nombre { text-shadow: 0 0 30px rgb(10 34 56 / .8), 0 0 60px rgb(127 224 218 / .35); }
.si-perla { --w: min(10vmin, 90px); left: 22vw; top: 14vh; --dy: -18vh; --ex: 0px; --ey: 30vh; --ed: .3s; --fd: 5s; --fa: 10px; --fr: 0deg; }
.si-estrella { --w: min(16vmin, 150px); left: 4vw; bottom: 6vh; --r: -16deg; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .5s; --fd: 8s; --fa: 4px; --fr: 4deg; }
.si-cola { --w: min(26vmin, 240px); right: 5vw; bottom: 3vh; --dy: 12vh; --ex: 30vw; --ey: 0px; --ed: .6s; --fd: 5s; --fa: 8px; --fr: 4deg; }
.si-concha { --w: min(14vmin, 130px); left: 20vw; bottom: 4vh; --dy: 10vh; --ex: 0px; --ey: 30vh; --ed: .75s; --fd: 7s; --fa: 4px; --fr: 2deg; }

/* burbujas que suben y se abren */
.c-sirena main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: radial-gradient(120% 90% at 30% 0%, rgb(242 236 244 / .2), rgb(63 182 178 / .1) 50%, rgb(18 58 92 / .55));
	border: 1px solid rgb(242 236 244 / .35); border-radius: 44px; padding: clamp(46px, 6vw, 72px) clamp(24px, 5vw, 64px); backdrop-filter: blur(6px);
	box-shadow: inset 0 0 40px rgb(191 239 240 / .12), inset 6px 10px 0 -4px rgb(255 255 255 / .12), 0 40px 70px -40px rgb(0 0 0 / .7); }
.c-sirena .xv-kicker { color: #BFF5F0; letter-spacing: .34em; font-weight: 700; }
.c-sirena .xv-titulo { color: #F2ECF4; }
.c-sirena .xv-titulo .xv-script { font-family: "Ephesis", cursive; color: #F7B4A6; font-size: 1.4em; }
.c-sirena .xv-superficie { background: rgb(242 236 244 / .08); border: 1px solid rgb(242 236 244 / .22); border-radius: 26px; box-shadow: none; }
.c-sirena .xv-momento time { color: #7FE0DA; font-weight: 700; }
.c-sirena .e-firma { color: #F7B4A6; font-size: clamp(2.6rem, 5vw, 3.6rem); }
.c-sirena .xv-boton:not(.xv-boton-suave) { background: #7FE0DA; color: #0F3350; border-color: #7FE0DA; }
.c-sirena .e-ornamento { width: min(70%, 280px); }
.c-sirena .xv-rsvp textarea, .c-sirena .xv-rsvp input { background: rgb(242 236 244 / .1); color: #F2ECF4; border-color: rgb(242 236 244 / .3); }

/* fecha: la perla crece con el día adentro */
.c-sirena .e-fecha-k { color: #BFF5F0; letter-spacing: .44em; font-weight: 700; }
.si-m-perla { inset: 4%; width: 92%; opacity: clamp(0, calc(var(--t1) * 2), 1); transform: scale(calc(.15 + var(--t1) * .85)) rotate(calc(var(--t1) * 120deg)); filter: drop-shadow(0 0 40px rgb(191 239 240 / .5)); }
.c-sirena .e-dia { font-size: clamp(4.4rem, 13vw, 7.2rem); text-shadow: 0 2px 0 rgb(255 255 255 / .5); }
.c-sirena .e-mes { font-family: "Ephesis", cursive; color: #5B3E8C; font-size: clamp(2rem, 5vw, 2.8rem); }
.c-sirena .e-anio { color: #123A5C; }
.c-sirena .e-sem { color: #E6EEF3; }

/* cierre: la cola sale del agua al atardecer */
.c-sirena .e-cierre { background: linear-gradient(180deg, transparent, rgb(242 156 138 / .35) 40%, rgb(143 124 196 / .3)) !important; padding-top: clamp(260px, 38vh, 340px); }
.si-cierre-cola { position: absolute; left: 50%; top: 2%; width: min(46vmin, 300px); translate: -50% 0; animation: si-chapotea 3.4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes si-chapotea { from { rotate: -5deg; } to { rotate: 5deg; } }
.si-cierre-agua { position: absolute; left: 0; right: 0; top: calc(2% + min(40vmin, 260px)); height: 40px; background: radial-gradient(40% 50% at 50% 50%, rgb(191 239 240 / .5), transparent 70%); }
.c-sirena .e-cierre .xv-kicker { color: #BFF5F0; }

@media (max-width: 760px) {
	.c-sirena { --nombre-tam: clamp(4.6rem, 25vw, 6.6rem); }
	.si-perla { --w: 16vw; left: 12vw; top: 10vh; } .si-estrella { --w: 26vw; left: -4vw; bottom: 4vh; }
	.si-cola { --w: 40vw; right: -6vw; bottom: 2vh; } .si-concha { --w: 22vw; left: 30vw; bottom: 3vh; }
}

.c-sirena #portada .e-xv,.c-sirena #portada .e-xv > span { color:#0C3D5A; }