/* 14 · Peonía y Lino · colección Jardín.
   Peonías sobre lino: rosa empolvado, lino y salvia.
   Tipografía: Playfair Display (nombres y títulos), Parisienne (el «&» y los acentos), Mulish (texto).
   Gesto propio: en la fecha, un botón cerrado se abre en peonía alrededor del día, que queda en el corazón de la flor.
   Planos: el lino pintado detrás de los actos claros · bandas de salvia y de rosa profundo · orillas de tela que cae ·
   pétalos que bajan despacio en la portada. */

.pl {
	--claro: #F6EEE6;
	--claro-2: #ECDFD3;
	--acc: #9E4A5A;
	--script-c: #B9606F;
	--banda-1: #4C5A49;
	--banda-1b: #37433A;
	--banda-2: #7A3E4B;
	--banda-2b: #582A35;
	--banda-txt: #FBF4EE;
	--acc-banda: #F3C6C4;
	--banda-1-img: var(--f2);
	--banda-1-img-m: var(--f2m);
	--banda-2-img: var(--f1);
	--banda-2-img-m: var(--f1m);
	--orilla-a: #E3B5B5;
	--orilla-b: #A9B49A;
	--mota: #F1C4C6;
	--sobre-papel: #F5ECE3;
	--sobre-solapa: #F0E3D8;
	--sello-1: #B9606F;
	--sello-2: #7A3443;
	--forro: var(--f1);
	--velo-a: 66%;
	--velo-b: 46%;
}
.pl .jd-nombres { letter-spacing: -0.015em; }
.pl .jd-titulo-sec i, .pl .jd-y { font-size: 1.2em; }
.pl .jd-frase { font-style: italic; }
/* Las motas son pétalos: una gota con la punta torcida. */
.pl .jd-destellos i { border-radius: 70% 0 70% 0; background: linear-gradient(135deg, #F7D3D3, #E2A0A7); rotate: var(--r, 0deg); width: calc(var(--s) * 1.3); }

/* ---------- Portada: pétalos que bajan despacio ---------- */
.pl-petalos { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.pl-petalos i { position: absolute; top: -8%; left: var(--x, 50%); width: var(--s, 18px); aspect-ratio: 1.3; border-radius: 75% 0 75% 0; background: linear-gradient(135deg, #F9DADA, #E5A3AA 70%, #D98C96); box-shadow: inset -2px -2px 4px rgb(160 70 90 / .18); opacity: 0; will-change: transform, opacity; animation: pl-cae var(--d, 14s) linear var(--t, 0s) infinite; }
@keyframes pl-cae {
	0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
	8% { opacity: .85; }
	50% { transform: translate3d(var(--dx, 30px), 55svh, 0) rotate(calc(var(--r, 0deg) + 160deg)); }
	92% { opacity: .7; }
	100% { opacity: 0; transform: translate3d(calc(var(--dx, 30px) * -.6), 112svh, 0) rotate(calc(var(--r, 0deg) + 320deg)); }
}
.pl .jd-portada-pintura::after { background: radial-gradient(64% 52% at 50% 52%, color-mix(in oklab, var(--claro) 70%, transparent), transparent 82%); }

/* ---------- Frase ---------- */
.pl-acuarela-intro { left: max(-4vw, -70px); top: 2%; width: clamp(160px, 20vw, 320px); rotate: -14deg; filter: drop-shadow(0 18px 24px rgb(120 60 70 / .16)); }

/* ---------- Fecha: el botón se abre en peonía alrededor del día ---------- */
.pl .jd-fecha {
	--a: clamp(0, calc((var(--sc-p, 0) - 0.05) / 0.55), 1);
	--m: calc(var(--a) * var(--a) * (3 - 2 * var(--a)));
}
.pl .jd-fecha-figura { width: min(100%, 32rem, 66svh); }
.pl-flor { position: absolute; inset: 0; }
.pl-flor .pl-peonia { transform-origin: 50% 33%; scale: calc(.28 + var(--m) * .72); rotate: calc((1 - var(--m)) * -38deg); clip-path: circle(calc(8% + var(--m) * 72%) at 50% 33%); opacity: clamp(0, calc(var(--m) * 2.4 - .15), 1); filter: drop-shadow(0 24px 28px rgb(120 50 64 / .2)); will-change: transform, clip-path; }
.pl-boton { transform-origin: 50% 46%; translate: 0 -13%; scale: calc(.62 - var(--m) * .3); opacity: clamp(0, calc(1 - var(--m) * 2.6), 1); }
.pl-boton-linea { stroke: rgb(255 255 255 / .55); stroke-width: 2; stroke-linecap: round; }
.pl-sepalo { fill: #7E8C6E; }
.pl-tallo { stroke: #7E8C6E; stroke-width: 4; stroke-linecap: round; }
/* El día en el corazón de la flor, sobre un círculo de lino. */
.pl .jd-fecha-figura .jd-dia { left: 50%; top: 33%; translate: -50% -50%; width: 34cqi; aspect-ratio: 1; align-content: center; gap: 1.4cqi; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--claro) 96%, transparent) 62%, color-mix(in oklab, var(--claro) 70%, transparent) 82%, transparent); opacity: clamp(0, calc(var(--m) * 1.8 - .25), 1); scale: calc(.7 + var(--m) * .3); }
.pl .jd-dia-sem { font-size: max(.6rem, 3cqi); letter-spacing: .3em; padding-left: .3em; }
.pl .jd-dia-n { font-size: 15cqi; line-height: .9; }
.pl .jd-mes i { color: var(--script-c); }

/* ---------- Cierre ---------- */
.pl-acuarela-cierre { right: max(-3vw, -40px); bottom: -3%; width: clamp(180px, 22vw, 340px); rotate: 10deg; z-index: 1; opacity: .95; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.pl .jd-fecha-figura { width: min(80vw, 42svh); }
	.pl-acuarela-intro { width: 34vw; left: -10vw; top: 0; opacity: .85; }
	.pl-acuarela-cierre { width: 42vw; right: -10vw; opacity: .7; }
}

/* ---------- Movimiento reducido ---------- */
.quieto .pl-petalos { display: none; }
.quieto .pl .jd-fecha { --m: 1; }