/* 113 · Dulce Espera — baby shower de pastelería francesa. Apertura: la caja rosada con lazo; la tapa se levanta y adentro,
   sobre papel de seda, está la tarjeta. Portada: la vitrina con luces que titilan (WebGL, modo titila) y brillos de azúcar.
   Orden: la vitrina — las secciones son dulces en sus bandejas, cada uno con su etiqueta, acomodados como en un mostrador.
   Fecha: los macarons caen y se arma la torre; el día queda arriba. */
.c-dulce { --display-peso: 400; --nombre-color: #5A3A2E; --titulo-letra: "Gilda Display"; --titulo-peso: 400; --titulo-espacio: 0; --dia-letra: "Gilda Display"; --dia-color: #5A3A2E;
	--radio: 24px; --vj: 54px; --sombra: 0 16px 22px rgb(90 58 46 / .2); --nombre-tam: clamp(5rem, 12vw, 10rem); }
.c-dulce .xv-cielo { display: none; }
.c-dulce main { background: linear-gradient(180deg, #FFF4F0, #FBEFF4 50%, #F6F0FA); }
.c-dulce main > .xv-sec:not(#portada) { background: transparent; }
.c-dulce .v-velo { background: radial-gradient(54% 40% at 50% 46%, rgb(255 248 238 / .78), transparent 74%); }

/* portada */
.c-dulce .e-evento { color: #D06A85; letter-spacing: .4em; font-weight: 600; font-size: .76rem; }
.c-dulce .e-padres { font-family: "Gilda Display", serif; color: #7A5A4C; font-size: clamp(1.1rem, 2.4vw, 1.5rem); }
.c-dulce .e-padres-n { color: #7A5A4C; }
.c-dulce .e-nombre { line-height: 1.05; text-shadow: 0 2px 24px rgb(255 248 238 / .9); }
.c-dulce .e-fecha { color: #5A3A2E; font-weight: 500; background: rgb(255 248 238 / .8); padding: 6px 16px; border-radius: 999px; }
.du-cupcake { --w: min(22vmin, 200px); left: 4vw; bottom: 4vh; --r: -6deg; --dx: -8vw; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .5s; --fd: 6s; --fa: 5px; --fr: 2deg; }
.du-macarons { --w: min(24vmin, 220px); right: 4vw; bottom: 5vh; --r: 4deg; --dx: 8vw; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .7s; --fd: 5s; --fa: 5px; --fr: 2deg; }
.du-biberon { --w: min(12vmin, 110px); right: 12vw; top: 10vh; --r: 12deg; --dy: -14vh; --dr: 10deg; --ex: 20vw; --ey: -10vh; --ed: .3s; --fd: 6s; --fa: 8px; --fr: 4deg; }

/* la vitrina: un mostrador de dulces en bandejas */
.c-dulce .bento { padding: 14vh 0 10vh; gap: clamp(30px, 3vw, 40px) clamp(18px, 2vw, 26px); }
@media (min-width: 901px) {
	.c-dulce .bento { grid-template-columns: repeat(6, 1fr); }
	.c-dulce .b-bienvenida { grid-column: span 4; } .c-dulce .b-lugares { grid-column: span 2; } .c-dulce .b-itinerario { grid-column: span 3; } .c-dulce .b-regalos { grid-column: span 3; }
}
.c-dulce .bento > .xv-sec > .xv-ancho { position: relative; background: #FFF8EE; border-radius: 26px; padding: clamp(36px, 3.6vw, 48px) clamp(22px, 3vw, 36px) clamp(26px, 3vw, 36px);
	box-shadow: inset 0 0 0 6px #FFF8EE, inset 0 0 0 7px rgb(208 106 133 / .3), 0 30px 50px -34px rgb(90 58 46 / .5); transition: transform 1s cubic-bezier(.3,1.4,.5,1), opacity .6s ease; }
.c-dulce .bento > .xv-sec:not(.llego) > .xv-ancho { opacity: 0; transform: translateY(30px) rotate(-3deg) scale(.95); }
.c-dulce .bento > .b-lugares > .xv-ancho { background: #FBE6EC; } .c-dulce .bento > .b-itinerario > .xv-ancho { background: #EEF4E2; } .c-dulce .bento > .b-regalos > .xv-ancho { background: #F1EAF8; }
.c-dulce .bento .e-bien-grid, .c-dulce .bento .e-dos, .c-dulce .bento .e-detalles-2, .c-dulce .bento .e-lugares { grid-template-columns: 1fr; }
.c-dulce .bento .e-bien-arte { min-height: 0; }
.c-dulce .bento .e-ornamento { width: min(46%, 170px); }
.c-dulce .bento .xv-cab { margin-bottom: 12px; }
@media (min-width: 901px) { .c-dulce .bento .b-bienvenida .e-bien-grid { grid-template-columns: 1.2fr .8fr; } }
.c-dulce .xv-kicker { color: #D06A85; letter-spacing: .34em; }
.c-dulce .xv-titulo .xv-script { font-family: "Parisienne", cursive; color: #D06A85; font-size: 1.25em; }
.c-dulce .xv-superficie { background: rgb(255 255 255 / .7); border: 0; }
.c-dulce .xv-momento time { color: #D06A85; font-weight: 600; }
.c-dulce .e-firma { font-family: "Parisienne", cursive; color: #D06A85; }
.c-dulce .xv-boton:not(.xv-boton-suave) { background: #5A3A2E; color: #FFF8EE; border-color: #5A3A2E; }

/* fecha: los macarons caen y se arma la torre */
.c-dulce .e-fecha-k { color: #D06A85; }
.du-m-macarons { left: 24%; top: 10%; width: 52%; transform: translateY(calc((1 - var(--t1)) * -90%)) rotate(calc((1 - var(--t1)) * -30deg)); opacity: clamp(0, calc((1 - var(--t2)) * 2.4), 1); }
.du-m-torre { left: 16%; top: 22%; width: 68%; opacity: calc(var(--t2) * .55); transform: translateY(calc((1 - var(--t2)) * 20%)) scale(calc(.8 + var(--t2) * .2)); }
.c-dulce .e-dia-caja { padding: 16px 24px 18px; background: rgb(255 248 238 / .94); border-radius: 50%; aspect-ratio: 1; width: 44%; align-content: center; translate: 0 -12%; box-shadow: 0 10px 30px -12px rgb(90 58 46 / .35); }
.c-dulce .e-dia { font-size: clamp(3rem, 9vw, 4.6rem); }
.c-dulce .e-mes { font-family: "Parisienne", cursive; color: #D06A85; font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
.c-dulce .e-anio { color: #7A5A4C; font-size: .76rem; }

/* cierre */
.du-cierre-torre { position: absolute; left: 50%; top: 4%; width: min(26vmin, 190px); translate: -50% 0; }
.c-dulce .e-cierre { padding-top: clamp(230px, 32vh, 300px); }

@media (max-width: 900px) { .c-dulce .bento { width: calc(100% - 2.4rem); gap: 34px; } }
@media (max-width: 760px) {
	.c-dulce { --nombre-tam: clamp(4.2rem, 21vw, 6.4rem); }
	.du-cupcake { --w: 30vw; left: -2vw; bottom: 2vh; }
	.du-macarons { --w: 32vw; right: -2vw; bottom: 3vh; }
	.du-biberon { --w: 15vw; right: 8vw; top: 8vh; }
	.c-dulce .e-dia-caja { width: 52%; }
}