/* 122 · Porcelana y Pájaros — boda chinoiserie en azul porcelana sobre blanco loza. Sobre blanco con forro pintado y un botón de porcelana que se desprende.
   Portada: el papel tapiz pintado a mano, con dos pájaros en las ramas a los lados del nombre; la luz del día respira (WebGL, modo respiro).
   Orden: el jarrón — al bajar, las ramas crecen por los costados (--pg) y a cada sección llega volando un pájaro.
   Fecha: un plato de porcelana gira y el día queda pintado en su centro. Cierre: los dos pájaros juntos en la misma rama. */
.c-porcelana { --display-peso: 400; --display-estilo: italic; --nombre-color: #1A2B4F; --titulo-letra: "Bodoni Moda"; --titulo-peso: 500; --titulo-espacio: 0;
	--dia-letra: "Bodoni Moda"; --dia-color: #1F4FA0; --y-letra: "Playfair Display"; --y-color: #C6A867; --pareja-tam: .84;
	--radio: 24px; --vj: 70px; --sombra: 0 12px 14px rgb(31 79 160 / .16); --nombre-tam: clamp(3.4rem, 8.4vw, 7.2rem); }
.c-porcelana .xv-cielo { display: none; }
.c-porcelana main { background: #FAFAF7; }
.c-porcelana main > .xv-sec:not(#portada) { background: transparent; }
.c-porcelana .v-velo { background: radial-gradient(48% 40% at 50% 48%, rgb(250 250 247 / .85), transparent 76%); }

/* las ramas que crecen por los costados al bajar */
.pj-ramas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
html.e-abierto .pj-ramas { opacity: 1; }
.pj-r { position: absolute; bottom: -4vh; width: min(18vw, 200px); transform-origin: 50% 100%; transform: scaleY(calc(.15 + var(--pg, 0) * .95)); opacity: .55; }
.pj-ri { left: -3vw; } .pj-rd { right: -3vw; scale: -1 1; }
.c-porcelana main > .xv-sec { position: relative; z-index: 1; }

/* portada */
.c-porcelana .e-evento { color: #1F4FA0; letter-spacing: .4em; font-family: "Bodoni Moda", serif; font-size: .78rem; }
.c-porcelana .e-fecha { color: #3D4C6B; letter-spacing: .1em; font-style: italic; font-family: "Lora", serif; }
.pj-rama-a { --w: min(18vmin, 170px); left: 14vw; top: 16vh; --r: -12deg; --dy: -10vh; --ex: -20vw; --ey: 0px; --ed: .3s; --fd: 8s; --fa: 3px; --fr: 1.5deg; }
.pj-rama-b { --w: min(18vmin, 170px); right: 14vw; top: 16vh; --r: 12deg; --s: 1; --dy: -10vh; --ex: 20vw; --ey: 0px; --ed: .4s; --fd: 9s; --fa: 3px; --fr: 1.5deg; }
.pj-rama-b .e-img { scale: -1 1; }
.pj-pajaro-a { --w: min(20vmin, 190px); left: 9vw; top: 12vh; --dy: -14vh; --ex: -50vw; --ey: -20vh; --ed: .8s; --fd: 5s; --fa: 4px; --fr: 2deg; }
.pj-pajaro-b { --w: min(20vmin, 190px); right: 9vw; top: 12vh; --dy: -14vh; --ex: 50vw; --ey: -20vh; --ed: 1s; --fd: 6s; --fa: 4px; --fr: 2deg; }
.pj-pajaro-b .e-img { scale: -1 1; }

/* secciones: platos de loza blanca con un filo azul */
.c-porcelana main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; border-radius: 28px; padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 64px);
	box-shadow: inset 0 0 0 6px #FFFFFF, inset 0 0 0 8px #1F4FA0, inset 0 0 0 12px #FFFFFF, inset 0 0 0 13px rgb(31 79 160 / .4), 0 30px 60px -40px rgb(31 79 160 / .5); }
.pj-pajaro { width: clamp(76px, 10vw, 118px); top: -44px; }
.pj-pajaro img { filter: drop-shadow(0 10px 12px rgb(31 79 160 / .2)); }
.fi-vuela.izq.pj-pajaro img { scale: -1 1; }
.c-porcelana .xv-kicker { color: #1F4FA0; letter-spacing: .32em; }
.c-porcelana .xv-titulo { color: #1A2B4F; }
.c-porcelana .xv-titulo .xv-script { font-family: "Playfair Display", serif; font-style: italic; font-weight: 400; color: #1F4FA0; }
.c-porcelana .xv-superficie { background: #F3F6FB; border: 1px solid rgb(31 79 160 / .18); border-radius: 18px; box-shadow: none; }
.c-porcelana .xv-momento time { color: #1F4FA0; font-family: "Bodoni Moda", serif; }
.c-porcelana .e-firma { font-family: "Playfair Display", serif; font-style: italic; color: #1F4FA0; }
.c-porcelana .xv-boton:not(.xv-boton-suave) { background: #1F4FA0; color: #FFFFFF; border-color: #1F4FA0; }
.c-porcelana .e-ornamento { width: min(56%, 220px); }

/* fecha: el plato gira y el día queda pintado en el centro */
.c-porcelana .e-fecha-k { color: #1F4FA0; font-family: "Bodoni Moda", serif; letter-spacing: .4em; }
.pj-m-plato { inset: 0; width: 100%; opacity: clamp(0, calc(var(--t1) * 2), 1); transform: rotate(calc((1 - var(--t1)) * -320deg)) scale(calc(.5 + var(--t1) * .5)); filter: drop-shadow(0 22px 26px rgb(31 79 160 / .22)); }
.pj-m-rama { right: -6%; top: -10%; width: 32%; opacity: var(--t2); transform: translateY(calc((1 - var(--t2)) * -40%)) rotate(14deg); }
.c-porcelana .e-dia-caja { translate: 0 2%; }
.c-porcelana .e-dia { font-weight: 500; font-size: clamp(3.6rem, 10vw, 5.6rem); }
.c-porcelana .e-mes { font-family: "Playfair Display", serif; font-style: italic; color: #1F4FA0; font-size: clamp(1.3rem, 3.4vw, 1.9rem); }
.c-porcelana .e-anio { color: #3D4C6B; font-size: .74rem; }

/* cierre */
.pj-cierre-rama { position: absolute; left: 50%; top: 40px; width: min(24vmin, 150px); translate: -50% 0; rotate: -84deg; }
.pj-cierre-p1, .pj-cierre-p2 { position: absolute; top: 34px; width: min(17vmin, 116px); animation: e-flota 4s ease-in-out infinite alternate; }
.pj-cierre-p1 { left: calc(50% - min(17vmin, 112px)); } .pj-cierre-p2 { left: calc(50% - min(1vmin, 6px)); scale: -1 1; animation-delay: -2s; }
.c-porcelana .e-cierre { padding-top: clamp(290px, 38vh, 340px); }
.c-porcelana .e-cierre .xv-kicker { color: #1F4FA0; }

@media (max-width: 760px) {
	.c-porcelana { --nombre-tam: clamp(3.2rem, 15vw, 4.6rem); }
	.pj-rama-a { --w: 30vw; left: 0; top: 8vh; } .pj-rama-b { --w: 30vw; right: 0; top: 8vh; }
	.pj-pajaro-a { --w: 30vw; left: -2vw; top: 6vh; } .pj-pajaro-b { --w: 30vw; right: -2vw; top: 6vh; }
	.pj-r { width: 30vw; opacity: .3; }
	.pj-pajaro { width: 72px; top: -38px; }
}