/* 101 · Picnic en el Parque — de día, al aire libre. Sobre crema con forro de cuadros y cerezas que caen.
   Portada: sombra de árbol con hojas que se mecen sobre el césped (WebGL, modo sombra); los títulos van en una
   servilleta de cuadros. Orden: el mantel — cada sección es una tarjeta que cae sobre el mantel, un poco girada.
   Fecha: la canasta se abre y el día sale en una servilleta doblada. */
.c-picnic { --display-peso: 400; --nombre-color: #2F3A24; --titulo-letra: "Fraunces"; --titulo-peso: 800; --titulo-espacio: -.02em; --dia-letra: "Caprasimo"; --dia-color: #2F3A24;
	--edad-letra: "Caprasimo"; --edad-color: #C23A33; --radio: 18px; --vj: 54px; --sombra: 0 20px 26px rgb(47 58 36 / .28); --nombre-tam: clamp(3.8rem, 9vw, 7.6rem); }
.c-picnic .xv-cielo { display: none; }
.c-picnic main { background: linear-gradient(rgb(251 245 230 / .8), rgb(251 245 230 / .8)), url("img/forro.webp") 0 0 / 190px repeat; }
.c-picnic main > .xv-sec:not(#portada) { background: transparent; }
.c-picnic .v-velo { background: none; }

/* portada: los títulos en una servilleta de cuadros */
.c-picnic #portada .e-titulos { margin: 0 6vw; padding: clamp(26px, 4vw, 44px) clamp(24px, 5vw, 56px); background: #FBF5E6; border: 14px solid transparent; border-radius: 6px;
	border-image: url("img/forro.webp") 120 round; box-shadow: 0 30px 50px -20px rgb(30 40 20 / .5); rotate: -1.5deg; }
.c-picnic .e-evento { color: #5E8B4E; letter-spacing: .4em; font-weight: 700; font-size: .74rem; }
.c-picnic .e-edad-t { font-family: "Fraunces", serif; font-style: italic; color: #2F3A24; }
.c-picnic .e-fecha { color: #4F5A40; font-weight: 600; }
.c-picnic .e-pista { color: #FFFFFF; text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.pc-canasta { --w: min(30vmin, 270px); left: 2vw; bottom: 2vh; --r: -6deg; --dx: -6vw; --dy: 12vh; --ex: -30vw; --ey: 0px; --ed: .6s; --fd: 6s; --fa: 4px; --fr: 1deg; }
.pc-limonada { --w: min(18vmin, 160px); right: 5vw; bottom: 5vh; --r: 6deg; --dx: 6vw; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .8s; --fd: 5s; --fa: 5px; --fr: 2deg; }

/* el mantel: tarjetas de papel que caen girando */
.c-picnic main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { background: #FFFDF6; border-radius: 6px; padding: clamp(26px, 4vw, 50px);
	box-shadow: 0 2px 0 #EDE3CB, 0 30px 40px -24px rgb(47 58 36 / .45); }
.c-picnic .xv-kicker { color: #C23A33; letter-spacing: .38em; }
.c-picnic .xv-titulo .xv-script { font-family: "Caprasimo", serif; color: #5E8B4E; font-weight: 400; }
.c-picnic .xv-superficie { background: #FBF5E6; border: 1px solid #EDE3CB; }
.c-picnic .xv-momento time { color: #C23A33; font-weight: 700; }
.c-picnic .e-firma { font-family: "Caprasimo", serif; color: #C23A33; }
.c-picnic .xv-boton:not(.xv-boton-suave) { background: #C23A33; border-color: #C23A33; color: #FFFFFF; }
.c-picnic .e-ornamento { width: min(70%, 260px); }

/* fecha: la canasta se abre y sale la servilleta con el día */
.c-picnic .e-fecha-k { color: #C23A33; }
.pc-m-canasta { left: 16%; top: 18%; width: 68%; transform: translateY(calc(var(--t2) * 40%)) scale(calc(1 - var(--t2) * .3)); opacity: clamp(0, calc((1 - var(--t2)) * 2.5), 1); }
.pc-m-servilleta { inset: 14%; border-radius: 4px; background: url("img/forro.webp") 0 0 / 70px; box-shadow: 0 24px 40px -18px rgb(47 58 36 / .5);
	opacity: var(--t2); transform: translateY(calc((1 - var(--t2)) * 30%)) rotate(calc(45deg - var(--t2) * 51deg)) scale(calc(.4 + var(--t2) * .6)); }
.pc-m-servilleta::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: #FBF5E6; box-shadow: inset 0 0 0 2px #EDE3CB; }
.c-picnic .e-dia { font-size: clamp(4rem, 12vw, 6.4rem); }
.c-picnic .e-mes { font-family: "Fraunces", serif; font-style: italic; font-weight: 700; color: #C23A33; font-size: clamp(1.3rem, 3.4vw, 1.9rem); }
.c-picnic .e-anio { color: #4F5A40; }

/* cierre */
.pc-cierre-pastel { position: absolute; left: 50%; top: 5%; width: min(26vmin, 190px); translate: -50% 0; filter: drop-shadow(0 18px 20px rgb(47 58 36 / .3)); }
.c-picnic .e-cierre { padding-top: clamp(190px, 28vh, 270px); }

@media (max-width: 760px) {
	.c-picnic { --nombre-tam: clamp(3.2rem, 15vw, 4.8rem); }
	.c-picnic #portada .e-titulos { margin: 0 5vw; border-width: 10px; }
	.pc-canasta { --w: 38vw; left: -6vw; bottom: 1vh; }
	.pc-limonada { --w: 22vw; right: 2vw; bottom: 3vh; }
}