/* 123 · Pavo Real Nouveau — boda art nouveau de noche: petróleo, turquesa pluma y cobre. Se abre una puerta de hierro forjado en dos hojas.
   Portada: el abanico de plumas se abre detrás del nombre y las estrellas de brillo titilan (WebGL, modo titila).
   Orden: vitrinas nouveau — cada sección va dentro de un marco de cobre que se traza al llegar.
   Fecha: el ojo de una pluma se agranda y el día queda en el centro. Cierre: la cola del pavo real completa. */
.c-pavo { --display-peso: 400; --nombre-color: #F2EAD8; --titulo-letra: "Marcellus"; --titulo-peso: 400; --titulo-espacio: .04em;
	--dia-letra: "Italiana"; --dia-color: #F2EAD8; --y-letra: "Marcellus"; --y-color: #DB9A5E; --y-tam: .5em; --pareja-tam: .86;
	--radio: 4px; --vj: 46px; --sombra: 0 18px 24px rgb(0 0 0 / .4); --nombre-tam: clamp(3.6rem, 9vw, 7.8rem); --marco: #DB9A5E;
	--ap-placa: rgb(13 47 56 / .82); --ap-placa-tinta: #F2EAD8; --ap-radio: 200px 200px 10px 10px; }
.c-pavo .xv-cielo { display: none; }
.c-pavo main { background: radial-gradient(90% 50% at 50% 0%, #134A57, #0D2F38 55%, #0A252C); }
.c-pavo main > .xv-sec:not(#portada) { background: transparent; }
.c-pavo .v-velo { background: radial-gradient(52% 44% at 50% 48%, rgb(9 33 40 / .72), transparent 76%); }
.c-pavo .ap-placa { border: 1px solid rgb(219 154 94 / .7); box-shadow: inset 0 0 0 6px rgb(13 47 56 / .82), inset 0 0 0 7px rgb(219 154 94 / .4), 0 30px 60px -24px rgb(0 0 0 / .7); padding-top: 54px; }
.c-pavo .ap-placa .ap-titulo small { color: #DB9A5E; }
.c-pavo .ap-placa .ap-titulo strong { font-size: clamp(2rem, 8vw, 2.9rem); }

/* portada */
.c-pavo .e-evento { font-family: "Marcellus", serif; color: #DB9A5E; letter-spacing: .44em; font-size: .8rem; }
.c-pavo .e-fecha { color: #CBDCD6; letter-spacing: .14em; }
.c-pavo .e-nombre { text-shadow: 0 0 34px rgb(43 166 160 / .35); }
.pv-abanico { --w: min(78vmin, 760px); left: calc(50% - min(39vmin, 380px)); top: calc(50% - min(30vmin, 290px)); --dy: -12vh; --ds: .1; --ex: 0px; --ey: 10vh; --ed: .2s; --fd: 10s; --fa: 3px; --fr: 0deg; opacity: .34; }
html:not(.e-abierto) .pv-abanico .e-img { transform: scale(.2, .1); }
.pv-abanico .e-img { transform-origin: 50% 100%; transition: transform 1.8s cubic-bezier(.2,.9,.3,1) .4s; }
.pv-pluma-a { --w: min(22vmin, 200px); left: 3vw; bottom: 4vh; --r: -24deg; --dy: 10vh; --dr: -8deg; --ex: -30vw; --ey: 0px; --ed: .6s; --fd: 6s; --fa: 6px; --fr: 2.5deg; }
.pv-pluma-b { --w: min(22vmin, 200px); right: 3vw; bottom: 4vh; --r: 24deg; --dy: 10vh; --dr: 8deg; --ex: 30vw; --ey: 0px; --ed: .7s; --fd: 7s; --fa: 6px; --fr: 2.5deg; }
.pv-pluma-b .e-img { scale: -1 1; }

/* vitrinas: paneles oscuros con el marco de cobre que se traza */
.c-pavo main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: linear-gradient(160deg, rgb(19 74 87 / .7), rgb(10 37 44 / .82)); border-radius: 160px 160px 10px 10px;
	padding: clamp(70px, 8vw, 100px) clamp(24px, 5vw, 64px) clamp(40px, 5vw, 64px); box-shadow: 0 40px 70px -40px rgb(0 0 0 / .8); }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.c-pavo .fi-marco svg { display: none; }
.c-pavo .fi-marco { inset: 10px; border: 4px double #DB9A5E; border-radius: 150px 150px 6px 6px;
	-webkit-mask: conic-gradient(from 180deg at 50% 50%, #000 var(--ang), transparent 0); mask: conic-gradient(from 180deg at 50% 50%, #000 var(--ang), transparent 0); transition: --ang 2.4s cubic-bezier(.5,0,.3,1) .2s; }
.c-pavo .llego > .xv-ancho > .fi-marco { --ang: 360deg; }
.c-pavo .xv-kicker { font-family: "Marcellus", serif; color: #DB9A5E; letter-spacing: .34em; }
.c-pavo .xv-titulo { color: #F2EAD8; }
.c-pavo .xv-titulo .xv-script { font-family: "Italiana", serif; color: #6ED3CC; }
.c-pavo .xv-superficie { background: rgb(242 234 216 / .06); border: 1px solid rgb(219 154 94 / .3); border-radius: 6px; box-shadow: none; }
.c-pavo .xv-momento time { color: #DB9A5E; font-family: "Marcellus", serif; }
.c-pavo .e-firma { font-family: "Italiana", serif; color: #DB9A5E; }
.c-pavo .xv-boton:not(.xv-boton-suave) { background: #965027; color: #FFF8EC; border-color: #965027; }
.c-pavo .e-ornamento { width: min(70%, 280px); }
.c-pavo .xv-rsvp textarea, .c-pavo .xv-rsvp input { background: rgb(242 234 216 / .08); color: #F2EAD8; border-color: rgb(219 154 94 / .4); }

/* fecha: el ojo de la pluma se agranda */
.c-pavo .e-fecha-k { font-family: "Marcellus", serif; color: #DB9A5E; letter-spacing: .4em; }
.pv-m-pluma { left: 22%; top: -40%; width: 56%; transform-origin: 50% 36%; opacity: clamp(0, calc(var(--t1) * 2 - var(--t2) * 2.4), 1);
	transform: translateY(calc((1 - var(--t1)) * 30%)) scale(calc(.7 + var(--t1) * .5 + var(--t2) * 2.6)); filter: drop-shadow(0 20px 30px rgb(0 0 0 / .4)); }
.pv-m-ojo { inset: 6%; border-radius: 50%; opacity: var(--t2); transform: scale(calc(.4 + var(--t2) * .6));
	background: radial-gradient(circle, rgb(15 76 92 / .95) 0 38%, rgb(43 166 160 / .55) 39% 52%, rgb(219 154 94 / .5) 53% 60%, rgb(43 166 160 / .25) 61% 70%, transparent 71%); }
.c-pavo .e-dia { font-size: clamp(5.4rem, 16vw, 9rem); }
.c-pavo .e-mes { font-family: "Marcellus", serif; text-transform: uppercase; letter-spacing: .32em; color: #DB9A5E; font-size: clamp(.9rem, 2.4vw, 1.2rem); }
.c-pavo .e-anio { color: #CBDCD6; }

/* cierre */
.pv-cierre-abanico { position: absolute; left: 50%; top: 2%; width: min(64vmin, 440px); translate: -50% 0; opacity: .8; transform-origin: 50% 100%; animation: pv-abre 2s cubic-bezier(.2,.9,.3,1) both; }
@keyframes pv-abre { from { transform: scale(.2, .1); opacity: 0; } }
.c-pavo .e-cierre { padding-top: clamp(260px, 46vh, 400px); }
.c-pavo .e-cierre .xv-kicker { color: #DB9A5E; font-family: "Marcellus", serif; }

@media (max-width: 760px) {
	.c-pavo { --nombre-tam: clamp(3.4rem, 16vw, 5rem); }
	.pv-abanico { --w: 100vw; left: 0; top: 18vh; }
	.pv-pluma-a { --w: 30vw; left: -4vw; } .pv-pluma-b { --w: 30vw; right: -4vw; }
	.c-pavo main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { border-radius: 120px 120px 8px 8px; padding: 70px 22px 40px; }
	.c-pavo .fi-marco { border-radius: 112px 112px 4px 4px; }
}
.c-pavo .ap-puerta .so-pie { padding: 12px 18px; border-radius: 14px; background: rgb(9 33 40 / .78); backdrop-filter: blur(4px); }