/* 12 · Volcán y Orquídea · colección Costa Rica.
   Un volcán al atardecer: gris ceniza, púrpura orquídea y brasa suave.
   Tipografía: Cormorant Garamond (nombres y títulos), Pinyon Script (el «&» y los acentos), Jost (texto).
   Gesto propio: la bruma del cráter se levanta al bajar, y en la fecha una orquídea se abre mientras la bruma se va.
   Planos: la bruma pintada detrás de los actos claros · bandas de ceniza (piedra volcánica) y de orquídea (atardecer) ·
   orillas de nube baja · brasas que flotan. */

.vo {
	--claro: #F2ECE6;
	--claro-2: #E4D9D0;
	--acc: #8A4479;
	--script-c: #9C4F86;
	--banda-1: #2B272D;
	--banda-1b: #1C191E;
	--banda-2: #4A2546;
	--banda-2b: #301830;
	--banda-txt: #F6EFE8;
	--acc-banda: #EDB08C;
	--banda-1-img: var(--f3);
	--banda-1-img-m: var(--f3m);
	--banda-2-img: var(--f2);
	--banda-2-img-m: var(--f2m);
	--orilla-a: #8D808F;
	--orilla-b: #B98AAE;
	--mota: rgb(255 226 206);
	--sobre-papel: #EEE7E1;
	--sobre-solapa: #E8DFD8;
	--sello-1: #9C4F86;
	--sello-2: #5A2850;
	--forro: var(--f2);
	--velo-a: 70%;
	--velo-b: 52%;
}
.vo .jd-titulo-sec, .vo .jd-nombres, .vo .porton-nombres, .vo .jd-frase, .vo .jd-lugar-nombre, .vo .jd-cierre-nombres { font-weight: 400; }
.vo .jd-nombres { letter-spacing: -0.02em; }
.vo .jd-frase { font-style: italic; }

/* ---------- Portada: la bruma del cráter se levanta al bajar ---------- */
.vo-bruma { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.vo-bruma i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgb(240 234 232 / .96), rgb(222 214 218 / .7) 52%, rgb(222 214 218 / 0) 100%); will-change: transform, opacity; }
.vo-portada-bruma, .jd-portada .vo-bruma i { --sube: calc(var(--e, 0) * -62svh); }
.vo-b1 { width: 80vw; height: 46svh; left: -22vw; bottom: -14svh; translate: 0 var(--sube, 0); opacity: calc(.95 - var(--e, 0) * 1.1); animation: vo-deriva 18s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.vo-b2 { width: 70vw; height: 40svh; right: -20vw; bottom: -8svh; translate: 0 calc(var(--sube, 0) * 1.25); opacity: calc(.9 - var(--e, 0) * 1.2); animation: vo-deriva 22s cubic-bezier(.45, 0, .55, 1) -6s infinite alternate-reverse; }
.vo-b3 { width: 60vw; height: 30svh; left: 18vw; bottom: -18svh; translate: 0 calc(var(--sube, 0) * .8); opacity: calc(.85 - var(--e, 0) * .9); animation: vo-deriva 16s cubic-bezier(.45, 0, .55, 1) -3s infinite alternate; }
.vo-b4 { width: 50vw; height: 26svh; left: -12vw; top: 8svh; translate: 0 calc(var(--sube, 0) * .5); opacity: calc(.55 - var(--e, 0) * .8); animation: vo-deriva 26s cubic-bezier(.45, 0, .55, 1) -9s infinite alternate-reverse; }
@keyframes vo-deriva { from { transform: translateX(-3vw) scale(1); } to { transform: translateX(3vw) scale(1.06); } }
/* La brasa: un calor suave que se enciende debajo de la bruma. */
.vo-brasa { position: absolute; z-index: 1; left: -10%; right: -10%; bottom: -20svh; height: 60svh; pointer-events: none; background: radial-gradient(50% 50% at 50% 100%, rgb(232 132 92 / .38), rgb(200 110 140 / .14) 55%, transparent 75%); opacity: calc(.6 + var(--e, 0) * .4); animation: vo-late 7s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes vo-late { from { transform: scale(1); filter: saturate(1); } to { transform: scale(1.05); filter: saturate(1.25); } }

/* ---------- Frase: una orquídea asoma en la esquina ---------- */
.vo-acuarela-intro { right: max(-3vw, -50px); top: 4%; width: clamp(150px, 19vw, 300px); rotate: 12deg; filter: drop-shadow(0 18px 26px rgb(60 30 50 / .18)); }

/* ---------- Fecha: la bruma se levanta y la orquídea se abre ---------- */
.vo .jd-fecha {
	--a: clamp(0, calc((var(--sc-p, 0) - 0.06) / 0.5), 1);
	--m: calc(var(--a) * var(--a) * (3 - 2 * var(--a)));
}
.vo-orquidea { position: absolute; inset: 0; }
.vo-flor { transform-origin: 46% 60%; scale: calc(.34 + var(--m) * .66); rotate: calc((1 - var(--m)) * -24deg); clip-path: circle(calc(12% + var(--m) * 64%) at 46% 42%); opacity: calc(.4 + var(--m) * .6); filter: drop-shadow(0 26px 30px rgb(70 30 60 / .22)); will-change: transform, clip-path; }
.vo-halo { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgb(236 168 128 / .4), rgb(156 79 134 / .16) 55%, transparent 75%); opacity: var(--m); scale: calc(.6 + var(--m) * .5); }
.vo-bruma-fecha { z-index: 4; }
.vo-bruma-fecha i { --sube: calc(var(--m) * -80svh); }
.vo-bruma-fecha .vo-b1 { width: 70vw; height: 60svh; left: -10vw; bottom: -10svh; opacity: calc(.92 - var(--m) * 1.05); }
.vo-bruma-fecha .vo-b2 { width: 60vw; height: 56svh; right: -8vw; bottom: -16svh; opacity: calc(.88 - var(--m) * 1.1); }
.vo-bruma-fecha .vo-b3 { width: 56vw; height: 40svh; left: 14vw; bottom: 10svh; opacity: calc(.7 - var(--m) * 1.1); }
/* El día va en la columna del texto, grande, como una cifra tallada. */
.vo .jd-fecha-texto .jd-dia { position: static; justify-items: start; gap: .2rem; margin-bottom: .9rem; }
.vo .jd-fecha-texto .jd-dia-sem { font-size: .74rem; }
.vo .jd-fecha-texto .jd-dia-n { font-size: clamp(6.4rem, 4rem + 8vw, 11rem); line-height: .84; font-weight: 300; translate: 0 calc((1 - var(--m)) * 18px); }
.vo .jd-mes i { color: var(--script-c); }

/* ---------- Bandas ---------- */
.vo .jd-lugar-nombre, .vo .jd-momento-hora { font-weight: 400; }

/* ---------- Cierre: la orquídea abierta ---------- */
.vo-acuarela-cierre { right: max(-3vw, -40px); bottom: -2%; width: clamp(170px, 22vw, 340px); rotate: -10deg; z-index: 1; opacity: .95; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.vo-acuarela-intro { width: 34vw; right: -8vw; top: 0; opacity: .85; }
	.vo .jd-fecha-texto .jd-dia { justify-items: center; }
	.vo .jd-fecha-texto .jd-dia { margin-bottom: .5rem; }
	.vo .jd-fecha-texto .jd-dia-n { font-size: clamp(4.6rem, 3rem + 10vw, 6rem); line-height: .95; }
	.vo .jd-fecha-figura { width: min(64vw, 32svh); }
	.vo-acuarela-cierre { width: 40vw; right: -10vw; opacity: .7; }
}
@media (min-width: 761px) {
	.vo-flor { filter: drop-shadow(0 26px 30px rgb(70 30 60 / .22)) blur(calc((1 - var(--m)) * 4px)); }
}

/* ---------- Movimiento reducido ---------- */
.quieto .vo-bruma i, .quieto .vo-brasa { animation: none; }
.quieto .vo .jd-fecha { --m: 1; }
.quieto .jd-portada .vo-bruma { opacity: .6; }