/* 131 · Mascarada Veneciana — XV de baile de máscaras en blanco, negro y plata. Se abre levantando el antifaz de plumas.
   Portada: un salón veneciano en blanco y negro con humo plateado que pasa (WebGL, modo nubes) y destellos de vela.
   Orden: el baile — cada sección está oculta detrás de un antifaz distinto que se retira al llegar.
   Fecha: la máscara gira y el día queda en su mirada. Cierre: el antifaz sobre su nombre. */
.c-mascarada { --display-peso: 400; --nombre-color: #F6F5F2; --titulo-letra: "Playfair Display"; --titulo-peso: 700; --titulo-espacio: -.01em;
	--dia-letra: "Playfair Display"; --dia-color: #F6F5F2; --radio: 6px; --vj: 70px; --sombra: 0 18px 24px rgb(0 0 0 / .5); --nombre-tam: clamp(5rem, 14vw, 12rem);
	--ap-w: min(74vw, 360px); --ap-destello: rgb(255 255 255 / .5); }
.c-mascarada .xv-cielo { display: none; }
.c-mascarada main { background: radial-gradient(90% 50% at 50% 0%, #26262B, #101012 60%); }
.c-mascarada main > .xv-sec:not(#portada) { background: transparent; }
.c-mascarada .v-velo { background: radial-gradient(48% 40% at 50% 48%, rgb(10 10 12 / .7), transparent 76%); }

.c-mascarada .e-evento { font-family: "Jost", sans-serif; color: #C9CCD1; letter-spacing: .5em; font-size: .76rem; font-weight: 600; }
.c-mascarada .e-xv span { font-family: "Playfair Display", serif; color: #F6F5F2; }
.c-mascarada .e-fecha { color: #C9CCD1; letter-spacing: .14em; }
.c-mascarada .e-nombre { text-shadow: 0 0 30px rgb(0 0 0 / .8); }
.ms-pluma-a { --w: min(28vmin, 260px); left: 3vw; top: 10vh; --r: -20deg; --dy: -10vh; --dr: -10deg; --ex: -30vw; --ey: 0px; --ed: .3s; --fd: 6s; --fa: 6px; --fr: 3deg; opacity: .85; }
.ms-pluma-b { --w: min(24vmin, 230px); right: 3vw; bottom: 6vh; --r: 160deg; --dy: 10vh; --dr: 10deg; --ex: 30vw; --ey: 0px; --ed: .45s; --fd: 7s; --fa: 6px; --fr: 3deg; opacity: .7; }
.ms-antifaz { --w: min(16vmin, 150px); right: 18vw; top: 12vh; --r: 14deg; --dy: -12vh; --ex: 20vw; --ey: -20vh; --ed: .7s; --fd: 5s; --fa: 5px; --fr: 3deg; }

/* el baile: paneles detrás del antifaz */
.c-mascarada main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: linear-gradient(160deg, rgb(36 36 41 / .92), rgb(20 20 23 / .95)); border: 1px solid rgb(201 204 209 / .3);
	border-radius: 6px; padding: clamp(46px, 6vw, 72px) clamp(24px, 5vw, 64px); box-shadow: 0 40px 70px -40px rgb(0 0 0 / .9); overflow: hidden; }
.c-mascarada main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #141416; transition: opacity .8s ease .35s; }
.c-mascarada main > .xv-sec.llego:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::after { opacity: 0; }
.ms-velo { z-index: 6; }
.ms-velo img { filter: drop-shadow(0 20px 30px rgb(0 0 0 / .6)); }
.c-mascarada .xv-kicker { color: #C9CCD1; letter-spacing: .36em; }
.c-mascarada .xv-titulo { color: #F6F5F2; }
.c-mascarada .xv-titulo .xv-script { font-family: "Italianno", cursive; font-weight: 400; color: #E4E6EA; font-size: 1.45em; }
.c-mascarada .xv-superficie { background: rgb(246 245 242 / .05); border: 1px solid rgb(201 204 209 / .22); border-radius: 4px; box-shadow: none; }
.c-mascarada .xv-momento time { color: #E4E6EA; font-weight: 600; }
.c-mascarada .e-firma { color: #E4E6EA; font-size: clamp(2.6rem, 5vw, 3.6rem); }
.c-mascarada .xv-boton:not(.xv-boton-suave) { background: #F6F5F2; color: #101012; border-color: #F6F5F2; }
.c-mascarada .e-ornamento { width: min(80%, 320px); }
.c-mascarada .xv-rsvp textarea, .c-mascarada .xv-rsvp input { background: rgb(246 245 242 / .06); color: #F6F5F2; border-color: rgb(201 204 209 / .35); }

/* fecha: la máscara gira y el día queda en su mirada */
.c-mascarada .e-fecha-k { color: #C9CCD1; letter-spacing: .5em; }
.ms-m-antifaz { left: 2%; top: 14%; width: 96%; opacity: clamp(0, calc(var(--t1) * 2), 1);
	transform: perspective(900px) rotateY(calc((1 - var(--t1)) * 35deg)) translateY(calc(var(--t2) * -30%)) scale(calc(1 - var(--t2) * .5)); filter: drop-shadow(0 20px 30px rgb(0 0 0 / .6)); }
.ms-m-brillo { inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .16), transparent 70%); opacity: var(--t2); }
.c-mascarada .e-dia-caja { translate: 0 80%; }
.c-mascarada .e-dia { font-size: clamp(4.6rem, 13vw, 7.4rem); }
.c-mascarada .e-mes { font-family: "Italianno", cursive; color: #E4E6EA; font-size: clamp(2.4rem, 6vw, 3.4rem); }
.c-mascarada .e-anio { color: #C9CCD1; }

.ms-cierre-antifaz { position: absolute; left: 50%; top: 4%; width: min(60vmin, 380px); translate: -50% 0; animation: e-flota 5s ease-in-out infinite alternate; filter: drop-shadow(0 20px 30px rgb(0 0 0 / .6)); }
.c-mascarada .e-cierre { padding-top: clamp(280px, 46vh, 380px); }
.c-mascarada .e-cierre .xv-kicker { color: #C9CCD1; }

@media (max-width: 760px) {
	.c-mascarada { --nombre-tam: clamp(4.4rem, 24vw, 6.4rem); }
	.ms-pluma-a { --w: 40vw; left: -8vw; top: 6vh; } .ms-pluma-b { --w: 36vw; right: -8vw; bottom: 4vh; } .ms-antifaz { --w: 26vw; right: 6vw; top: 10vh; }
}

.c-mascarada .e-dia { line-height:1; }
.c-mascarada .e-mes { margin-top:.1em; }

@media (min-width:761px) { .c-mascarada #fecha .e-dia-caja { translate:0 48%; } }