/* 78 · Érase una Vez — libro de cuentos clásico: grabado y acuarela, castillo, rosales y llave antigua.
   Guion: el libro de tapas verdes se abre y las páginas pasan solas; «Érase una vez…» con los nombres y el castillo en
   la colina; cada sección es un capítulo; en la fecha la llave gira en el candado y sale el círculo dorado con el día. */
.c-cuento { --display-peso: 700; --nombre-color: #2F4A3A; --titulo-letra: "Cinzel Decorative"; --titulo-peso: 700; --titulo-espacio: 0; --dia-letra: "Cinzel Decorative"; --dia-color: #2F4A3A;
	--y-letra: "Tangerine"; --y-peso: 700; --y-tam: .62em; --y-color: #8A5A1E; --y-margen: -.12em 0 -.06em; --radio: 6px; --vj: 70px; --sombra: 0 20px 24px rgb(47 74 58 / .22); --nombre-tam: clamp(5.4rem, 14vw, 11.4rem); }
.c-cuento .e-evento { color: #8A5A1E; font-family: "Cinzel Decorative", serif; font-weight: 700; letter-spacing: .2em; }
.c-cuento .e-nombre { line-height: .9; }
.c-cuento .e-fecha { color: #4A3A2A; font-style: italic; font-size: 1.1rem; }
.c-cuento .e-titulos::before { content: "Érase una vez…"; display: block; font: italic 500 clamp(1.2rem, 2.6vw, 1.6rem)/1 "EB Garamond", serif; color: #4A3A2A; margin-bottom: 4px; }

.cu-castillo { --w: min(40vmin, 400px); left: 50%; top: 2vh; --x: -50%; --dy: -12vh; --ds: -.1; --ey: -10vh; --ed: .3s; --fd: 10s; --fa: 4px; --fr: 0deg; opacity: .7; }
.cu-rosal-izq { --w: min(28vmin, 280px); left: -3vw; bottom: -2vh; --r: -6deg; --dy: 12vh; --ex: -20vw; --ey: 10vh; --ed: .8s; --fd: 8s; --fa: 3px; }
.cu-rosal-der { --w: min(26vmin, 260px); right: -3vw; bottom: -2vh; --r: 6deg; --dy: 12vh; --ex: 20vw; --ey: 10vh; --ed: 1s; --fd: 8.5s; --fa: 3px; }
.cu-rosal-der .e-img { scale: -1 1; }
.cu-pajaro { --w: min(16vmin, 160px); right: 10vw; top: 14vh; --dx: -30vw; --dy: -20vh; --ex: 30vw; --ey: -10vh; --ed: 1.3s; --fd: 3s; --fa: 10px; }

.c-cuento .xv-entrada { background: radial-gradient(70% 60% at 50% 40%, #FBF5E6, #E8DCC0 80%); }
.cu-entrada-libro { position: absolute; left: 50%; bottom: 4%; width: min(70vmin, 520px); translate: -50% 0; opacity: .5; }
.c-cuento .xv-entrada-contenido { position: relative; z-index: 1; }
html.abriendo .cu-entrada-libro { transition: transform 1.3s cubic-bezier(.65,0,.35,1), opacity 1.3s; transform: scale(2) translateY(-20%); opacity: 0; }

.c-cuento .e-ornamento { width: min(70%, 280px); }
.c-cuento .e-firma { font-family: "Tangerine", cursive; font-weight: 700; color: #8A5A1E; font-size: clamp(3rem, 6vw, 4.4rem); }

/* fecha: la llave gira → círculo dorado */
.cu-m-llave { left: 36%; top: 6%; width: 28%; transform-origin: 50% 70%; transform: rotate(calc(var(--t1) * 90deg)) scale(calc(1 - var(--t1) * .3)); opacity: clamp(0, calc((1 - var(--t2)) * 2.4), 1); }
.cu-m-aro { inset: 10%; border-radius: 50%; background: radial-gradient(circle, #FBF5E6 64%, transparent 65%), conic-gradient(#E2C27A, #B08A3E, #F3DEA6, #B08A3E, #E2C27A); box-shadow: 0 0 50px rgb(226 194 122 / .5);
	opacity: var(--t2); transform: scale(calc(.3 + var(--t2) * .7)) rotate(calc(var(--m) * 90deg)); }
.c-cuento .e-dia { font-size: clamp(4rem, 11vw, 6.2rem); }
.c-cuento .e-mes { font-family: "Tangerine", cursive; font-weight: 700; color: #8A5A1E; font-size: clamp(2.8rem, 7vw, 4rem); margin-top: -.15em; }

.c-cuento .xv-superficie { background: #FBF5E6; border: 1px solid rgb(138 90 30 / .35); box-shadow: inset 0 0 0 6px #FBF5E6, inset 0 0 0 7px rgb(138 90 30 / .3); }
.c-cuento .e-itinerario { background: #2F4A3A; --tinta: #F1E7D0; --tinta-2: #E3D9BF; --acento: #E2C27A; --linea: rgba(241,231,208,.2); color: #F1E7D0; }
.c-cuento .xv-momento time { color: #8A5A1E; } .c-cuento .e-itinerario .xv-momento time { color: #E2C27A; }
.c-cuento .xv-titulo .xv-script { font-family: "Tangerine", cursive; font-weight: 700; color: #8A5A1E; font-size: 1.5em; }
.c-cuento .e-itinerario .xv-titulo .xv-script { color: #E2C27A; }
.cu-cierre-libro { position: relative; display: block; width: min(34vmin, 260px); margin: 0 auto; }
.c-cuento .e-cierre-arte { position: relative; inset: auto; z-index: 0; }

@media (max-width: 760px) {
	.cu-castillo { --w: 70vw; top: 3vh; }
	.cu-rosal-izq { --w: 40vw; left: -10vw; } .cu-rosal-der { --w: 38vw; right: -10vw; }
	.cu-pajaro { --w: 22vw; right: 4vw; top: 30vh; }
	.c-cuento { --nombre-tam: clamp(3.6rem, 15vw, 5.2rem); --pareja-tam: 1.12; }
}
@media (min-width: 761px) { .cu-entrada-libro { width: 30vh; bottom: 2%; } }