/* 81 · Luz entre Hojas — pantalla dividida: el título de cada sección queda fijo a un lado y la información pasa al otro.
   Portada: sombras de palma que se mecen sobre la pared de estuco con sol de tarde (animado en código).
   En la fecha la sombra de la hoja gira como la aguja de un reloj de sol y marca el día. */
.c-hojas { --display-peso: 400; --nombre-color: #3D352B; --titulo-letra: "Fraunces"; --titulo-peso: 900; --titulo-espacio: -.02em; --dia-letra: "Gloock"; --dia-color: #3D352B;
	--y-letra: "Fraunces"; --y-peso: 400; --y-tam: .34em; --y-color: #A4532F; --radio: 4px; --vj: 54px; --sombra: 0 26px 30px rgb(61 53 43 / .2);
	--nombre-tam: clamp(4.4rem, 11.5vw, 9.6rem); --pareja-tam: 1; --display-espacio: -.01em; }
.c-hojas .e-y { font-style: italic; }
.c-hojas .e-evento { color: #A4532F; letter-spacing: .45em; font-weight: 700; }
.c-hojas .e-nombre { line-height: 1; }
.c-hojas .e-fecha { color: #5E5446; font-weight: 600; }
.c-hojas .e-titulos { justify-items: start; text-align: left; justify-self: start; margin-left: 9vw; }
.c-hojas .e-pareja { justify-items: start; }
.c-hojas .so-y { font-style: italic; font-size: .5em; color: #A4532F; }

/* sombras que se mecen: la sombra de una palma sobre la pared */
.ho-sombra-a, .ho-sombra-b { pointer-events: none; mix-blend-mode: multiply; }
.ho-sombra-a { --w: min(80vmin, 760px); right: -14vw; top: -14vh; --r: 18deg; --dx: 10vw; --dr: 6deg; --ey: 0px; --ex: 20vw; --ed: .2s; opacity: .55; }
.ho-sombra-b { --w: min(60vmin, 560px); right: 18vw; bottom: -20vh; --r: 200deg; --dx: -6vw; --dr: -4deg; --ey: 0px; --ex: 0px; --ed: .5s; opacity: .35; }
.ho-sombra-a .e-img, .ho-sombra-b .e-img { filter: blur(3px); animation: ho-mece 6.5s ease-in-out infinite alternate; transform-origin: 80% 10%; }
.ho-sombra-b .e-img { animation-duration: 8s; filter: blur(6px); }
@keyframes ho-mece { 0% { transform: rotate(-3deg) translate(0, 0) skewX(0deg); } 50% { transform: rotate(1.5deg) translate(-12px, 6px) skewX(2deg); } 100% { transform: rotate(4deg) translate(8px, -4px) skewX(-1deg); } }
.ho-ceramica { --w: min(22vmin, 220px); left: 8vw; bottom: 4vh; --dy: 10vh; --ey: 20vh; --ed: .9s; --fd: 0s; }
.ho-ceramica .e-img { animation: none; }

/* secciones: papel de estuco y encabezado fijo */
.c-hojas main > .xv-sec:not(#portada):not(#fecha) { background: linear-gradient(180deg, #EFE6D8, #F3EADC); }
.c-hojas main > .xv-sec:nth-of-type(even):not(#portada):not(#fecha) { background: #F6EEE1; }
.c-hojas .xv-cab { border-left: 3px solid #C7774E; padding-left: 18px; }
.c-hojas .xv-cab.xv-centro { border-left: 0; padding-left: 0; }
.c-hojas .xv-kicker { color: #A4532F; }
.c-hojas .xv-titulo .xv-script { font-family: "Gloock", serif; font-style: italic; color: #A4532F; }
.c-hojas .xv-superficie { background: #FCFAF6; border: 0; box-shadow: 0 24px 40px -30px rgb(61 53 43 / .4); }
.c-hojas .xv-momento time { color: #A4532F; }
.c-hojas .e-firma { font-family: "Gloock", serif; font-style: italic; color: #A4532F; }
.c-hojas .e-ornamento { width: min(50%, 200px); }

/* fecha: la sombra gira como la aguja de un reloj de sol */
.ho-m-reloj { left: 6%; top: 6%; width: 88%; opacity: calc(.35 + var(--t1) * .65); transform: rotate(calc(var(--m) * 40deg - 20deg)); filter: drop-shadow(0 30px 40px rgb(61 53 43 / .3)); }
.ho-m-sombra { left: 50%; top: 50%; width: 46%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, rgb(61 53 43 / .55), transparent); transform-origin: 0 50%; filter: blur(2px);
	transform: rotate(calc(-200deg + var(--m) * 160deg)); opacity: var(--t1); }
.c-hojas .e-dia-caja { padding: 14px 22px; background: rgb(252 250 246 / .9); border-radius: 50%; aspect-ratio: 1; place-content: center; width: 46%; }
.c-hojas .e-dia { font-size: clamp(3.2rem, 9vw, 5rem); }
.c-hojas .e-mes { font-family: "Gloock", serif; font-style: italic; color: #A4532F; font-size: clamp(1.3rem, 3.4vw, 1.9rem); }
.ho-cierre-sombra { position: absolute; right: -10vw; top: -10%; width: min(70vmin, 560px); opacity: .25; mix-blend-mode: multiply; filter: blur(4px); animation: ho-mece 7s ease-in-out infinite alternate; }

@media (max-width: 760px) {
	.c-hojas .e-titulos { margin-left: 7vw; }
	.c-hojas { --nombre-tam: clamp(3.8rem, 18vw, 5.4rem); }
	.ho-sombra-a { --w: 120vw; right: -40vw; }
	.ho-sombra-b { --w: 90vw; right: -10vw; }
	.ho-ceramica { --w: 34vw; left: auto; right: 6vw; }
	.c-hojas .xv-cab:not(.xv-centro) { position: sticky; top: 0; z-index: 2; background: inherit; padding-top: 14px; padding-bottom: 10px; }
}