/* 44 · Mundo de Juguete — juguetes de madera escandinavos: amarillo, rojo, azul y verde sobre crema.
   Guion: una caja de juguetes se abre; los bloques caen y forman una torre junto al nombre; el tren cruza la
   pantalla y el cohete despega al bajar. En la fecha los bloques rebotan y se vuelven el marco de colores del
   día, que queda en un bloque azul. El programa son bloques de colores; el cohete viaja de sección en sección. */

.c-juguete { --display-peso: 400; --nombre-color: #2B2D42; --titulo-letra: "Baloo 2"; --titulo-peso: 800; --titulo-espacio: -.01em;
	--edad-letra: "Chewy"; --edad-color: #C71F4F; --radio: 24px; --vj: 92px; --sombra: 0 18px 20px rgb(43 45 66 / .2); }
.c-juguete .e-nombre { text-shadow: 5px 5px 0 #FFD23F; letter-spacing: .01em; }
.c-juguete .e-edad-n { text-shadow: 5px 5px 0 #FFD23F; }
.c-juguete .e-edad-t { font-family: "Baloo 2", sans-serif; font-weight: 800; color: #0B6E8E; font-size: clamp(1.4rem, 3vw, 2rem); }
.c-juguete .e-titulos { margin-top: -4vh; }

.ju-nube { --w: min(26vmin, 240px); right: 8vw; top: 9vh; --dx: 10vw; --ex: 20vw; --ey: 0px; --ed: .3s; --fd: 8s; --fa: 8px; }
.ju-cohete { --w: min(15vmin, 140px); left: 10vw; top: 14vh; --r: 18deg; --dx: 8vw; --dy: -70vh; --dr: 6deg; --ey: 40vh; --ed: .6s; --fd: 3s; --fa: 8px; }
.ju-bloques { --w: min(26vmin, 240px); left: 5vw; bottom: 3vh; --dy: 8vh; --ed: .9s; --ey: -70vh; --fd: 0s; transition: opacity .4s ease var(--ed), translate 1s cubic-bezier(.34,1.56,.64,1) var(--ed); }
.ju-bloques .e-img { animation: none; }
.ju-tren { --w: min(38vmin, 360px); right: 4vw; bottom: 4vh; --dx: -70vw; --ex: 40vw; --ey: 0px; --ed: 1.2s; --fd: .5s; --fa: 1.5px; --fr: .4deg; }

/* entrada: caja de juguetes */
.c-juguete .xv-entrada { background: radial-gradient(80% 60% at 50% 40%, #FFE27A, #FFD23F 70%); }
.ju-entrada-bloques { position: absolute; right: 6vw; bottom: 4vh; width: min(24vmin, 210px); rotate: -6deg; filter: drop-shadow(0 20px 20px rgb(0 0 0 / .2)); }
.c-juguete .xv-entrada .xv-boton:not(.xv-boton-suave) { background: #C71F4F; border-color: #C71F4F; color: #FFFFFF; }

/* bienvenida */
.c-juguete .e-ornamento { width: min(80%, 320px); }

/* fecha: los bloques rebotan y se vuelven el marco de colores; el día queda en un bloque azul */
.ju-m-bloques { left: 30%; top: 22%; width: 40%; transform: translateY(calc(sin(var(--t1) * 9.42rad) * -18%)) rotate(calc(var(--t1) * 12deg)) scale(calc(1 - var(--t2) * .4)); opacity: clamp(0, calc((1 - var(--t2)) * 2.4 - .4), 1); }
.ju-m-aro { inset: 6%; border-radius: 30%; padding: clamp(14px, 3vmin, 24px); background: conic-gradient(from -45deg, #FFD23F 0 25%, #EF476F 0 50%, #118AB2 0 75%, #06D6A0 0);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: var(--t2); transform: rotate(calc((1 - var(--t2)) * -120deg)) scale(calc(.5 + var(--t2) * .5)); }
.c-juguete .e-dia { font-family: "Baloo 2", sans-serif; font-weight: 800; color: #FFFFFF; background: #118AB2; border-radius: 22px; padding: .06em .2em .02em; box-shadow: 0 10px 0 #0B5E78; font-size: clamp(4.6rem, 13vw, 7.6rem); }
.c-juguete .e-mes { font-family: "Chewy", cursive; color: #C71F4F; margin-top: .3em; }

/* programa en bloques */
.c-juguete .xv-superficie { border: 0; background: #FFFFFF; box-shadow: 0 10px 0 #F1E3C4, 0 24px 40px -24px rgb(43 45 66 / .4); }
.c-juguete .e-itinerario { background: #DDF5EE; }
.c-juguete .xv-momento { border: 0; border-radius: 18px; margin-bottom: 12px; padding: 16px 20px; background: #FFFFFF; box-shadow: 0 6px 0 var(--b, #FFD23F); }
.c-juguete .xv-momento:last-child { border: 0; }
.c-juguete .xv-momento:nth-child(4n+2) { --b: #EF476F; }
.c-juguete .xv-momento:nth-child(4n+3) { --b: #118AB2; }
.c-juguete .xv-momento:nth-child(4n+4) { --b: #06D6A0; }
.c-juguete .xv-momento time { color: #0B6E8E; }
.c-juguete .e-regalos { background: #FFEFD0; }

/* cierre: nubes; el cohete (viajero) despega por encima del nombre */
.ju-cierre-nube { position: absolute; width: min(28vmin, 240px); left: 6vw; top: 12%; opacity: .9; }
.ju-cierre-nube-2 { left: auto; right: 8vw; top: 60%; width: min(20vmin, 180px); }

@media (max-width: 760px) {
	.ju-nube { --w: 34vw; right: 2vw; top: 7vh; }
	.ju-cohete { --w: 20vw; left: 4vw; top: 10vh; }
	.ju-bloques { --w: 34vw; left: 2vw; }
	.ju-tren { --w: 52vw; right: 0; }
	.ju-cierre-nube-2 { display: none; }
}

/* Fecha con agrupación natural y menos espaciado entre letras. */
.xv-fecha-discreta { letter-spacing:.06em; line-height:1.55; text-wrap:balance; }