/* 56 · Osito en el Bosque — bosque de cuento en papel cortado: café, musgo, miel y crema.
   Guion: los pinos se apartan; el osito asoma entre los arbustos bajo el nombre, con hongos y una bellota que cae.
   Al bajar los árboles se abren más. En la fecha la bellota gira, se abre y queda un tronco con anillos donde
   se lee el día. Al final el osito duerme. */

.c-osito { --display-peso: 800; --nombre-color: #3E2C1E; --titulo-letra: "Bricolage Grotesque"; --titulo-peso: 800; --titulo-espacio: -.02em; --display-espacio: -.02em;
	--dia-letra: "Bricolage Grotesque"; --dia-color: #3E2C1E; --radio: 18px; --vj: 64px; --sombra: 0 22px 24px rgb(62 44 30 / .25); }
.c-osito .e-nombre { text-shadow: 0 4px 0 #FBF3E4, 0 14px 30px rgb(251 243 228 / .9); }
.c-osito .e-padres { font-family: "Caveat Brush", cursive; color: #8C5216; font-size: clamp(1.8rem, 3.6vw, 2.6rem); text-shadow: 0 2px 10px rgb(251 243 228 / .9); }
.c-osito .e-evento { color: #FBF3E4; background: #4F6136; padding: 5px 14px; border-radius: 999px; }
.c-osito .e-padres-n { color: #3E2C1E; background: rgb(251 243 228 / .8); padding: 4px 12px; border-radius: 999px; }
.c-osito .e-fecha { color: #3E2C1E; background: rgb(251 243 228 / .8); padding: 4px 12px; border-radius: 999px; }
.c-osito .e-titulos { align-self: start; margin-top: 11vh; }

.os-pinos-izq, .os-pinos-der { --w: min(42vmin, 420px); top: 14vh; --ey: 0px; --ed: .1s; --fd: 10s; --fa: 3px; --fr: .4deg; }
.os-pinos-izq { left: -6vw; --dx: -12vw; --ex: 20vw; }
.os-pinos-der { right: -6vw; --dx: 12vw; --ex: -20vw; }
.os-pinos-der .e-img { scale: -1 1; }
.os-osito { --w: min(36vmin, 340px); left: calc(50% - min(18vmin, 170px)); bottom: -1vh; --dy: 10vh; --ey: 30vh; --ed: .9s; --fd: 5s; --fa: 4px; --fr: 1deg;
	transition: opacity .5s ease var(--ed), translate 1.3s cubic-bezier(.34,1.3,.64,1) var(--ed); }
.os-hongos { --w: min(22vmin, 210px); left: 10vw; bottom: 3vh; --dy: 6vh; --ex: -20vw; --ey: 0px; --ed: 1.2s; --fd: 0s; }
.os-hongos .e-img { animation: none; }
.os-bellota { --w: min(9vmin, 86px); right: 16vw; top: 46vh; --r: 14deg; --dy: 18vh; --dr: 60deg; --ey: -60vh; --ed: 1.5s; --fd: 3.4s; --fr: 6deg;
	transition: opacity .3s ease var(--ed), translate 1.1s cubic-bezier(.34,1.56,.64,1) var(--ed); }

/* entrada */
.c-osito .xv-entrada { background: radial-gradient(70% 60% at 50% 45%, #5E7344, #3F5029 72%); }
.os-entrada-p1, .os-entrada-p2 { position: absolute; bottom: -4%; width: min(50vmin, 420px); }
.os-entrada-p1 { left: -8vw; } .os-entrada-p2 { right: -8vw; scale: -1 1; }
.c-osito .xv-entrada .xv-boton:not(.xv-boton-suave) { background: #E0A458; border-color: #E0A458; color: #3E2C1E; }

/* bienvenida */
.c-osito .e-ornamento { width: min(70%, 280px); }
.c-osito .e-firma { font-family: "Caveat Brush", cursive; color: #8C5216; }

/* fecha: la bellota se abre y deja un tronco con anillos */
.os-m-bellota { left: 30%; top: 14%; width: 40%; transform: rotate(calc(var(--t1) * 200deg)) scale(calc(1 + var(--t1) * .3)); opacity: clamp(0, calc((1 - var(--t1)) * 3 + .1), 1); }
.os-m-anillos { inset: 4%; border-radius: 50%; background: repeating-radial-gradient(circle, #E8C796 0 6px, #D7AE74 6px 8px, #E8C796 8px 15px); box-shadow: inset 0 0 0 14px #7A5236, 0 30px 50px -24px rgb(62 44 30 / .5);
	opacity: var(--t2); transform: scale(calc(.3 + var(--t2) * .7)); }
.c-osito .e-dia { font-weight: 800; font-size: clamp(4.4rem, 12vw, 7rem); }
.c-osito .e-mes { font-family: "Caveat Brush", cursive; color: #6B3F12; }
.c-osito .e-anio { color: #4E3A28; }

/* secciones */
.c-osito .xv-superficie { background: #FFFDF8; border: 0; box-shadow: 0 8px 0 #E3D3B0, 0 24px 40px -24px rgb(62 44 30 / .35); }
.c-osito .e-itinerario { background: #E3EAD6; }
.c-osito .xv-momento time { color: #8C5216; }
.c-osito .xv-momento span { font-family: "Caveat Brush", cursive; font-size: 1.4rem; }

/* cierre: el osito duerme */
.os-cierre-osito { position: relative; width: min(30vmin, 220px); margin: 0 auto; }
.c-osito .e-cierre-arte { position: relative; inset: auto; z-index: 0; }

@media (max-width: 760px) {
	.os-pinos-izq, .os-pinos-der { --w: 52vw; top: 34vh; }
	.os-pinos-izq { left: -20vw; } .os-pinos-der { right: -20vw; }
	.os-osito { --w: 66vw; left: 17vw; }
	.os-hongos { --w: 30vw; left: 0; }
	.os-bellota { right: 6vw; top: 56vh; --w: 14vw; }
}