/* 121 · Flores Prensadas — boda natural sobre papel hecho a mano con semillas. Sobre de papel con bordes rasgados; la flor prensada cae al abrir.
   Portada: el papel con fibras y semillas, y flores prensadas que se acomodan alrededor del nombre; la luz de ventana respira (WebGL, modo respiro).
   Orden: el herbario — cada sección es una lámina con su flor «pegada» con cinta y la etiqueta escrita a mano.
   Fecha: los pétalos sueltos se ordenan en una corona y el día queda al centro. Cierre: el papel se llena de brotes. */
.c-herbario { --display-peso: 500; --display-estilo: italic; --nombre-color: #4A3F35; --titulo-letra: "Fraunces"; --titulo-peso: 600; --titulo-espacio: -.01em;
	--dia-letra: "Fraunces"; --dia-color: #4A3F35; --y-letra: "Caveat"; --y-color: #A9583D; --y-tam: .62em; --pareja-tam: .82;
	--radio: 3px; --vj: 64px; --sombra: 0 10px 12px rgb(74 63 53 / .16); --nombre-tam: clamp(3.4rem, 8.4vw, 7rem); }
.c-herbario .xv-cielo { display: none; }
.c-herbario main { background: #EFE8DA url("img/forro.webp") center / 520px repeat; }
.c-herbario main > .xv-sec:not(#portada) { background: transparent; }
.c-herbario .v-velo { background: radial-gradient(50% 42% at 50% 48%, rgb(247 242 231 / .82), transparent 76%); }

/* portada */
.c-herbario .e-evento { font-family: "Caveat", cursive; font-size: 1.7rem; letter-spacing: .02em; text-transform: none; color: #A9583D; font-weight: 600; }
.c-herbario .e-fecha { color: #6B5F52; letter-spacing: .1em; }
.hb-helecho { --w: min(26vmin, 240px); left: 4vw; top: 8vh; --r: -14deg; --dx: -4vw; --dy: -8vh; --ex: -20vw; --ey: 0px; --ed: .3s; --fd: 9s; --fa: 4px; --fr: 1.2deg; }
.hb-lavanda { --w: min(24vmin, 220px); right: 5vw; top: 10vh; --r: 12deg; --dx: 4vw; --dy: -8vh; --ex: 20vw; --ey: 0px; --ed: .45s; --fd: 8s; --fa: 4px; --fr: 1.2deg; }
.hb-cosmos { --w: min(20vmin, 180px); left: 12vw; bottom: 5vh; --r: -8deg; --dy: 10vh; --ex: 0px; --ey: 30vh; --ed: .6s; --fd: 7s; --fa: 5px; --fr: 2deg; }
.hb-petalos { --w: min(18vmin, 170px); right: 12vw; bottom: 7vh; --r: 20deg; --dy: 12vh; --dr: 30deg; --ex: 0px; --ey: 30vh; --ed: .75s; --fd: 8s; --fa: 6px; --fr: 3deg; }

/* el herbario: láminas de papel con flor pegada y etiqueta */
.c-herbario main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FBF8F1; padding: clamp(44px, 5vw, 64px) clamp(24px, 5vw, 64px) clamp(84px, 9vw, 110px);
	box-shadow: 0 1px 0 rgb(74 63 53 / .1), 0 26px 50px -30px rgb(74 63 53 / .45); border-radius: 2px; }
.hb-flor { top: -30px; right: clamp(14px, 4vw, 40px); width: clamp(76px, 10vw, 112px); }
.hb-etq { right: clamp(14px, 4vw, 40px); bottom: 18px; display: grid; gap: 2px; padding: 8px 14px 8px; border: 1px solid rgb(74 63 53 / .3); background: #FFFDF8; transform: rotate(-1.5deg);
	font: 600 1.15rem/1.1 "Caveat", cursive; color: #4A3F35; text-align: left; opacity: 0; translate: 0 10px; transition: opacity .7s ease .8s, translate .7s ease .8s; }
.hb-etq b { font: 600 .62rem/1 "Karla", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #A9583D; }
.llego > .xv-ancho > .hb-etq { opacity: 1; translate: 0 0; }
.c-herbario .xv-kicker { font-family: "Karla", sans-serif; color: #A9583D; letter-spacing: .3em; }
.c-herbario .xv-titulo { color: #4A3F35; }
.c-herbario .xv-titulo .xv-script { font-family: "Fraunces", serif; font-style: italic; font-weight: 400; color: #7D8B5A; }
.c-herbario .xv-superficie { background: #F3EDE0; border: 1px dashed rgb(74 63 53 / .22); border-radius: 2px; box-shadow: none; }
.c-herbario .xv-momento time { color: #A9583D; font-weight: 600; }
.c-herbario .e-firma { font-family: "Caveat", cursive; font-weight: 600; color: #A9583D; font-size: clamp(2.2rem, 4vw, 3rem); }
.c-herbario .xv-boton:not(.xv-boton-suave) { background: #596836; color: #FFFFFF; border-color: #596836; }
.c-herbario .e-ornamento { width: min(60%, 230px); }

/* fecha: los pétalos se ordenan en corona */
.c-herbario .e-fecha-k { font-family: "Caveat", cursive; font-size: 1.8rem; letter-spacing: .02em; text-transform: none; color: #A9583D; }
.hb-m-p { left: 38%; top: 38%; width: 24%; opacity: clamp(0, calc(var(--t1) * 2), 1);
	transform: rotate(calc(var(--a) + (1 - var(--t1)) * 120deg)) translateY(calc(-145% - (1 - var(--t1)) * 90%)) rotate(calc(var(--j) * 23deg)); }
.c-herbario .e-dia { font-style: italic; font-weight: 500; font-size: clamp(5rem, 14vw, 8rem); }
.c-herbario .e-mes { font-family: "Caveat", cursive; font-weight: 600; color: #A9583D; }
.c-herbario .e-anio { color: #6B5F52; }

/* cierre: brotes y flores que crecen */
.hb-cierre-a, .hb-cierre-b, .hb-cierre-c { position: absolute; bottom: -2%; transform-origin: 50% 100%; animation: hb-crece 1.6s cubic-bezier(.3,1.3,.5,1) both; }
.hb-cierre-a { left: -2%; width: min(30vw, 240px); rotate: -8deg; } .hb-cierre-b { right: -2%; width: min(28vw, 220px); rotate: 10deg; animation-delay: .2s; }
.hb-cierre-c { left: 50%; width: min(20vw, 150px); translate: -50% 0; bottom: 2%; animation-delay: .4s; opacity: .9; }
.e-cierre:not(.llego) .e-cierre-arte img { animation-play-state: paused; }
@keyframes hb-crece { from { transform: scale(0); } }
.c-herbario .e-cierre { padding-bottom: clamp(180px, 26vh, 240px); }
.c-herbario .e-cierre .xv-kicker { font-family: "Caveat", cursive; font-size: 1.6rem; text-transform: none; letter-spacing: 0; color: #A9583D; }

@media (max-width: 760px) {
	.c-herbario { --nombre-tam: clamp(3.2rem, 15vw, 4.6rem); }
	.hb-helecho { --w: 32vw; left: -4vw; top: 6vh; } .hb-lavanda { --w: 30vw; right: -3vw; top: 7vh; }
	.hb-cosmos { --w: 30vw; left: 4vw; bottom: 6vh; } .hb-petalos { --w: 26vw; right: 4vw; bottom: 9vh; }
}