/* 87 · Perfumería — la pirámide de un perfume: notas de salida (ceremonia), de corazón (cena) y de fondo (fiesta).
   Portada: humo perfumado que se enrosca y sube (fondo vivo). En la fecha una gota cae, se vuelve nube y la nube se aclara en el día. */
.c-perfume { --display-peso: 300; --display-estilo: italic; --nombre-color: #F4EBDD; --titulo-letra: "Cinzel"; --titulo-peso: 600; --titulo-espacio: .06em; --titulo-mayus: uppercase;
	--dia-letra: "Cormorant Garamond"; --dia-color: #F4EBDD; --y-letra: "Cinzel"; --y-peso: 500; --y-tam: .26em; --y-color: #E0A964; --y-margen: .14em 0 .18em;
	--radio: 2px; --vj: 40px; --sombra: 0 26px 30px rgb(0 0 0 / .55); --nombre-tam: clamp(5rem, 14vw, 11.6rem); --pareja-tam: 1; --display-espacio: 0; }
.c-perfume .e-evento { color: #E0A964; letter-spacing: .7em; font-family: "Cinzel", serif; font-weight: 600; font-size: .78rem; }
.c-perfume .e-nombre { line-height: .95; text-shadow: 0 0 40px rgb(200 135 58 / .35); }
.c-perfume .e-fecha { color: #D9CBB7; letter-spacing: .24em; text-transform: uppercase; font-size: .74rem; }
.pe-frasco { --w: min(24vmin, 230px); right: 6vw; bottom: 4vh; --r: 6deg; --dy: 12vh; --ey: 30vh; --ed: .8s; --fd: 7s; --fa: 6px; }
.pe-frasco-claro { --w: min(14vmin, 140px); left: 8vw; bottom: 6vh; --r: -8deg; --dy: 16vh; --ey: 30vh; --ed: 1s; --fd: 8s; --fa: 6px; }
.c-perfume .so-tarjeta strong { font-weight: 300; font-style: italic; }
.c-perfume .so-y { font-family: "Cinzel", serif; font-style: normal; font-size: .4em; color: #B8865E; }

/* secciones: frascos de notas */
.c-perfume .xv-cielo { background: radial-gradient(80% 50% at 50% 30%, #2A1A12, #17110D 70%); }
.c-perfume .xv-kicker { color: #E0A964; letter-spacing: .5em; }
.c-perfume .xv-titulo .xv-script { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300; text-transform: none; color: #E0A964; font-size: 1.3em; letter-spacing: 0; }
.c-perfume .xv-superficie { background: linear-gradient(160deg, rgb(216 164 143 / .12), rgb(23 17 13 / .4)); border: 1px solid rgb(216 164 143 / .35); }
.c-perfume .xv-texto-grande { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.c-perfume .e-firma { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300; color: #E0A964; font-size: clamp(2.4rem, 4.6vw, 3.4rem); }
.c-perfume .e-ornamento { width: min(56%, 220px); }
/* la pirámide: tres notas que se llenan de su color */
.c-perfume .xv-itinerario { counter-reset: nota; }
.c-perfume .xv-momento { position: relative; padding-left: 64px; min-height: 70px; align-items: center; }
.c-perfume .xv-momento::before { content: ""; position: absolute; left: 0; top: 50%; width: 40px; height: 56px; translate: 0 -50%; background: url("img/frasco-claro.webp") center / contain no-repeat; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); }
.c-perfume .xv-momento::after { content: ""; position: absolute; left: 7px; bottom: 50%; width: 26px; height: 0; translate: 0 22px; border-radius: 4px; background: var(--nota, #E0A964); opacity: .55; mix-blend-mode: screen; transition: height 1.4s cubic-bezier(.2,.9,.25,1); transition-delay: calc(var(--d, 0) * 1ms + 400ms); }
.c-perfume .xv-momento.visto::after { height: 26px; }
.c-perfume .xv-momento:nth-child(1) { --nota: #F2D28B; } .c-perfume .xv-momento:nth-child(2) { --nota: #E58C7A; } .c-perfume .xv-momento:nth-child(3) { --nota: #A8653A; }
.c-perfume .xv-momento time { color: #E0A964; }

/* fecha: gota → nube → día */
.c-perfume .e-fecha-sec { background: radial-gradient(60% 50% at 50% 45%, #2A1A12, #17110D 75%); }
.c-perfume .e-fecha-k { color: #E0A964; }
.pe-m-gota { left: 40%; top: -6%; width: 20%; transform: translateY(calc(var(--t1) * 180%)) scale(calc(1 - var(--t1) * .5)); opacity: clamp(0, calc((1 - var(--t1)) * 3), 1); }
.pe-m-nube { inset: 0; border-radius: 50%; background: radial-gradient(circle, rgb(244 235 221 / .5), rgb(224 169 100 / .25) 40%, transparent 68%); filter: blur(calc(20px - var(--t2) * 14px));
	opacity: clamp(0, calc(var(--t1) * 3 - 1.4), 1); transform: scale(calc(.3 + var(--t1) * .7)); }
.c-perfume .e-dia { font-weight: 300; font-style: italic; font-size: clamp(5rem, 15vw, 8.6rem); }
.c-perfume .e-mes { font-family: "Cinzel", serif; text-transform: uppercase; letter-spacing: .3em; color: #E0A964; font-size: .95rem; margin-top: 8px; }
.c-perfume .e-anio { color: #D9CBB7; }
.pe-cierre-frasco { position: relative; display: block; width: min(22vmin, 160px); margin: 0 auto 10px; filter: drop-shadow(0 20px 30px rgb(0 0 0 / .6)); }
.c-perfume .e-cierre-arte { position: relative; inset: auto; z-index: 0; }

@media (max-width: 760px) {
	.c-perfume { --nombre-tam: clamp(4.4rem, 21vw, 6.4rem); }
	.pe-frasco { --w: 34vw; right: 0; } .pe-frasco-claro { --w: 20vw; left: 4vw; }
}