/* 41 · Pastel de Capas — pastelería de autor: rosa fresa, crema, chocolate y menta.
   Guion: una caja de pastelería se abre; los pisos del pastel caen uno por uno y rebotan bajo el nombre; la vela
   se posa arriba. En la fecha la vela se enciende, su luz crece y se vuelve el plato festoneado donde queda el día.
   El programa son porciones; la confirmación lleva un glaseado que chorrea; al final, el pastel completo. */

.c-pastel { --display-peso: 700; --display-estilo: italic; --titulo-letra: "Lobster Two"; --titulo-peso: 700; --titulo-estilo: italic;
	--edad-letra: "Lobster Two"; --edad-color: #C2344F; --nombre-color: #4A2C24; --radio: 22px; --vj: 70px; --sombra: 0 18px 22px rgb(74 44 36 / .22); }
.c-pastel .e-edad-n { font-style: italic; font-weight: 700; }
.c-pastel .e-edad-t { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: clamp(1rem, 2vw, 1.4rem); letter-spacing: .2em; text-transform: uppercase; color: #74493F; }
.c-pastel .e-titulos { align-self: start; margin-top: clamp(70px, 11vh, 120px); gap: 8px; }
.c-pastel .e-nombre { text-shadow: 0 3px 0 #FFFFFF, 0 10px 30px rgb(242 167 184 / .6); }

/* el pastel: tres pisos que caen uno por uno y rebotan; la vela al final */
.pa-pastel { position: absolute; left: 50%; bottom: 3vh; width: min(30vmin, 300px); height: calc(min(30vmin, 300px) * 1.62); translate: -50% 0; }
.pa-pastel .e-obj { --dy: 14vh; --ds: -.06; transition: opacity .5s ease var(--ed), translate 1.05s cubic-bezier(.34,1.5,.64,1) var(--ed); }
.pa-pastel .e-img { animation: none; }
html:not(.e-abierto) .pa-pastel .e-obj { opacity: 0; translate: 0 -80vh; }
.pa-base { --w: 100%; left: 0; bottom: 0; --ed: .55s; z-index: 1; }
.pa-medio { --w: 78%; left: 11%; bottom: 27%; --ed: .9s; z-index: 2; }
.pa-alto { --w: 60%; left: 20%; bottom: 50%; --ed: 1.25s; z-index: 3; }
.pa-vela { --w: 6%; left: 56%; bottom: 70%; --ed: 1.65s; z-index: 2; }
.pa-vela::after { content: ""; position: absolute; left: 50%; top: -9%; width: 260%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #FFF4C2 0%, rgb(255 205 110 / .55) 35%, transparent 70%); opacity: 0; animation: pa-llama 2.6s ease-in-out 2.4s infinite alternate; }
html:not(.e-abierto) .pa-vela::after { animation: none; }
@keyframes pa-llama { from { opacity: .55; scale: .9; } to { opacity: 1; scale: 1.12; } }
.pa-cereza { --w: min(11vmin, 100px); left: 12%; top: 54%; --dx: -6vw; --dy: -20vh; --dr: -30deg; --ex: -20vw; --ey: 0px; --ed: 1.9s; --fd: 3.8s; --fa: 12px; --fr: 6deg; }

/* entrada: caja de pastelería con lazo */
.c-pastel .xv-entrada { background: repeating-linear-gradient(90deg, #F7C3CE 0 46px, #FFF4E6 46px 92px); }
.c-pastel .xv-entrada-contenido { background: #FFFAF3; padding: 34px clamp(24px, 6vw, 56px); border-radius: 26px; box-shadow: 0 30px 60px -30px rgb(74 44 36 / .5); }
.pa-lazo { position: absolute; left: 50%; top: 0; bottom: 0; width: 46px; translate: -50% 0; background: linear-gradient(90deg, #C2344F, #D2405B 50%, #C2344F); opacity: .9; }
.pa-caja { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 50%, transparent 40%, rgb(74 44 36 / .1)); }

/* bienvenida */
.c-pastel .e-ornamento { width: min(70%, 280px); }
.c-pastel .e-bienvenida { background: linear-gradient(180deg, transparent, #FCE1E5 30%, #FCE1E5 70%, transparent); }

/* fecha: la vela se enciende y su luz se vuelve el plato festoneado del día */
.pa-m-vela { left: 47%; top: 4%; width: 6%; opacity: calc(1 - var(--t2)); transform: translateY(calc((1 - var(--t1)) * 30%)); }
.pa-m-llama { left: 50%; top: calc(8% + var(--t2) * 42%); width: calc(16% + var(--t1) * 20% + var(--t2) * 50%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
	background: radial-gradient(circle, #FFF6D0 0%, rgb(255 200 100 / .7) 30%, rgb(255 180 90 / 0) 70%); opacity: calc(var(--t1) * (1 - var(--t2) * .8)); }
.pa-m-plato { inset: 6%; border-radius: 50%; background: #FFFAF3; box-shadow: 0 30px 60px -30px rgb(74 44 36 / .45), inset 0 0 0 12px #F7C3CE;
	-webkit-mask: radial-gradient(circle at 50% 50%, #000 66%, transparent 66.5%), conic-gradient(#000 0 0); mask: radial-gradient(circle at 50% 50%, #000 66%, transparent 66.5%), conic-gradient(#000 0 0);
	opacity: var(--t2); transform: scale(calc(.5 + var(--t2) * .5)); }
.pa-m-plato::before { content: ""; position: absolute; inset: -2%; border-radius: 50%; background: radial-gradient(circle, transparent 62%, #F2A7B8 62.5% 66%, transparent 66.5%); }
.c-pastel .e-dia { font-family: "Fredoka", sans-serif; font-weight: 700; color: #4A2C24; font-size: clamp(5rem, 16vw, 9rem); }
.c-pastel .e-mes { font-style: italic; font-weight: 700; color: #C2344F; }

/* programa en porciones */
.c-pastel .e-itinerario { background: #F7C3CE; }
.c-pastel .xv-momento { border: 0; background: #FFFAF3; border-radius: 999px; padding: 14px 26px; margin-bottom: 12px; box-shadow: 0 10px 24px -16px rgb(74 44 36 / .5); }
.c-pastel .xv-momento:last-child { border: 0; }
.c-pastel .xv-momento time { color: #C2344F; }
.c-pastel .xv-superficie { background: #FFFAF3; border: 0; box-shadow: 0 24px 50px -30px rgb(74 44 36 / .45); }
.c-pastel .e-regalos { background: #E3F2EA; }

/* confirmación con glaseado */
.c-pastel .e-rsvp { position: relative; padding-top: 52px; overflow: hidden; }
.c-pastel .e-rsvp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px;
	background: radial-gradient(14px 18px at 16px 16px, #F2A7B8 98%, transparent) 0 0 / 46px 34px repeat-x, linear-gradient(#F2A7B8 0 0) 0 0 / 100% 16px no-repeat; }

/* cierre: el pastel completo */
.c-pastel .e-cierre-arte { position: relative; inset: auto; z-index: 0; width: 150px; height: 240px; }
.pa-cierre { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; }
.pa-cierre img { position: absolute; filter: drop-shadow(0 14px 16px rgb(74 44 36 / .2)); }
.pa-cierre img:nth-child(1) { width: 100%; left: 0; bottom: 0; }
.pa-cierre img:nth-child(2) { width: 78%; left: 11%; bottom: 27%; }
.pa-cierre img:nth-child(3) { width: 60%; left: 20%; bottom: 50%; }
.pa-cierre img:nth-child(4) { width: 6%; left: 56%; bottom: 73%; }

@media (max-width: 760px) {
	.pa-pastel { width: 56vw; height: calc(56vw * 1.62); bottom: 2vh; }
	.c-pastel .e-titulos { margin-top: 64px; }
	.pa-cereza { left: 4%; top: 58%; --w: 16vw; }
}

/* Indicación visible sobre la ilustración del pastel. */
.e-pista { isolation:isolate; color:var(--tinta); }
.e-pista::before { content:""; position:absolute; z-index:-1; top:-6px; left:-12px; right:-12px; height:calc(1.5em + 12px); border-radius:999px; background:var(--fondo); pointer-events:none; }