/* 141 · Misión Espacial — cumpleaños infantil en el espacio: cohete, planetas y un casco de astronauta de juguete. Se abre la escotilla redonda: gira y se abre.
   Portada: el cohete despega con humo y los planetas flotan entre estrellas que titilan (WebGL, modo titila).
   Orden: el viaje — un cohete sube por el costado según se lee (--pg) y en cada sección aterriza un planeta distinto.
   Fecha: el cohete aterriza en la luna y planta la bandera con el día. Cierre: el cohete regresa a casa. */
.c-espacial { --display-peso: 700; --nombre-color: #FFFFFF; --titulo-letra: "Bungee"; --titulo-peso: 400; --titulo-espacio: 0;
	--dia-letra: "Bungee"; --dia-color: #12163F; --edad-letra: "Bungee"; --edad-color: #FFD23F; --radio: 26px; --vj: 54px; --sombra: 0 18px 24px rgb(0 0 0 / .4);
	--nombre-tam: clamp(4.6rem, 13vw, 11rem); --ap-w: min(66vw, 320px); --ap-destello: rgb(255 210 63 / .6); }
.c-espacial .xv-cielo { display: none; }
.c-espacial main { background: radial-gradient(120% 60% at 50% 0%, #1E2460, #12163F 50%, #0B0E2C); }
.c-espacial main > .xv-sec:not(#portada) { background: transparent; }
.c-espacial .v-velo { background: radial-gradient(48% 40% at 50% 48%, rgb(10 12 40 / .55), transparent 76%); }
.es-ruta-cohete { position: fixed; left: 2vw; top: 0; bottom: 0; z-index: 0; width: min(9vw, 64px); pointer-events: none; opacity: 0; transition: opacity 1s ease; }
html.e-abierto .es-ruta-cohete { opacity: 1; }
.es-ruta-cohete img { position: absolute; left: 0; width: 100%; bottom: calc(4vh + var(--pg, 0) * 76vh); filter: drop-shadow(0 0 14px rgb(255 122 47 / .5)); }
.es-estela { position: absolute; left: 50%; bottom: 0; width: 3px; height: calc(4vh + var(--pg, 0) * 76vh); translate: -50% 0; background: repeating-linear-gradient(transparent 0 8px, rgb(255 255 255 / .4) 8px 16px); }
.c-espacial main > .xv-sec { position: relative; z-index: 1; }

.c-espacial .e-evento { font-family: "Bungee", sans-serif; color: #2EC4B6; letter-spacing: .14em; font-size: .9rem; }
.c-espacial .e-edad-t { font-family: "Fredoka", sans-serif; font-weight: 700; color: #FFFFFF; }
.c-espacial .e-fecha { color: #D3D8F5; font-weight: 700; }
.c-espacial .e-nombre { text-shadow: 0 6px 0 #FF7A2F, 0 10px 30px rgb(0 0 0 / .5); }
.ep-planeta { --w: min(22vmin, 210px); right: 6vw; top: 9vh; --r: -10deg; --dy: -12vh; --dr: 10deg; --ex: 30vw; --ey: -20vh; --ed: .3s; --fd: 7s; --fa: 10px; --fr: 4deg; }
.ep-luna { --w: min(14vmin, 130px); left: 8vw; top: 14vh; --dy: -16vh; --ex: -30vw; --ey: -20vh; --ed: .45s; --fd: 8s; --fa: 10px; --fr: 4deg; }
.ep-cohete { --w: min(16vmin, 150px); left: 14vw; bottom: 6vh; --dy: -70vh; --dr: 6deg; --ex: 0px; --ey: 40vh; --ed: .6s; --fd: 1.4s; --fa: 3px; --fr: .6deg; }
.ep-humo { position: absolute; left: 10%; right: 10%; bottom: -30%; height: 50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / .8), rgb(255 255 255 / 0)); filter: blur(8px); animation: ep-humo 1.6s ease-out infinite; }
@keyframes ep-humo { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6) translateY(30%); opacity: 0; } }
.ep-casco { --w: min(16vmin, 150px); right: 10vw; bottom: 6vh; --r: 10deg; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .75s; --fd: 6s; --fa: 8px; --fr: 4deg; }

/* el viaje: cada sección es un planeta */
.c-espacial main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: linear-gradient(160deg, rgb(46 196 182 / .14), rgb(26 31 82 / .9) 40%); border: 2px solid rgb(255 255 255 / .14);
	border-radius: 28px; padding: clamp(50px, 6vw, 74px) clamp(24px, 5vw, 64px); box-shadow: 0 40px 70px -40px rgb(0 0 0 / .8); }
.ms-planeta { width: clamp(84px, 11vw, 130px); top: -50px; }
.c-espacial .xv-kicker { font-family: "Bungee", sans-serif; color: #2EC4B6; letter-spacing: .1em; }
.c-espacial .xv-titulo { color: #FFFFFF; }
.c-espacial .xv-titulo .xv-script { font-family: "Fredoka", sans-serif; font-weight: 700; color: #FFD23F; }
.c-espacial .xv-superficie { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .16); border-radius: 20px; box-shadow: none; }
.c-espacial .xv-momento time { color: #FFD23F; font-weight: 800; }
.c-espacial .e-firma { color: #FF8A45; }
.c-espacial .xv-boton:not(.xv-boton-suave) { background: #FF7A2F; color: #FFFFFF; border-color: #FF7A2F; }
.c-espacial .e-ornamento { width: min(60%, 230px); }
.c-espacial .xv-rsvp textarea, .c-espacial .xv-rsvp input { background: rgb(255 255 255 / .07); color: #FFFFFF; border-color: rgb(255 255 255 / .2); }

/* fecha: aterriza en la luna y planta la bandera */
.c-espacial .e-fecha-k { font-family: "Bungee", sans-serif; color: #2EC4B6; letter-spacing: .14em; }
.ep-m-luna { left: 10%; bottom: -16%; width: 80%; opacity: clamp(0, calc(var(--t1) * 3), 1); }
.ep-m-cohete { left: 64%; top: 0; width: 22%; transform: translateY(calc((1 - var(--t1)) * -130%)) rotate(calc((1 - var(--t1)) * 10deg)); opacity: clamp(0, calc(var(--t1) * 3), 1); }
.ep-m-bandera { left: 26%; top: 20%; width: 46%; height: 34%; border-radius: 6px 14px 14px 6px; background: #FFFFFF; box-shadow: -6px 0 0 #D3D8F5, 0 16px 30px rgb(0 0 0 / .4);
	transform-origin: 0 100%; transform: scaleY(var(--t2)); opacity: var(--t2); }
.ep-m-bandera::before { content: ""; position: absolute; left: -6px; top: 0; width: 4px; height: 200%; background: #D3D8F5; }
.c-espacial .e-dia-caja { translate: 0 -24%; }
.c-espacial .e-dia { font-size: clamp(2.8rem, 8vw, 4.2rem); }
.c-espacial .e-mes { font-family: "Fredoka", sans-serif; font-weight: 700; color: #FF7A2F; font-size: clamp(1rem, 2.6vw, 1.3rem); }
.c-espacial .e-anio { color: #12163F; font-size: .62rem; }

.ep-cierre-planeta { position: absolute; left: 50%; top: 40px; width: min(44vmin, 280px); translate: -50% 0; }
.ep-cierre-cohete { position: absolute; left: calc(50% + min(10vmin, 70px)); top: 10px; width: min(14vmin, 90px); rotate: 150deg; animation: e-flota 3s ease-in-out infinite alternate; }
.c-espacial .e-cierre { padding-top: clamp(250px, 36vh, 320px); }
.c-espacial .e-cierre .xv-kicker { color: #2EC4B6; }

@media (max-width: 760px) {
	.c-espacial { --nombre-tam: clamp(4rem, 22vw, 6rem); }
	.ep-planeta { --w: 34vw; right: -4vw; top: 7vh; } .ep-luna { --w: 22vw; left: 4vw; top: 10vh; }
	.ep-cohete { --w: 22vw; left: 6vw; } .ep-casco { --w: 24vw; right: 4vw; bottom: 5vh; }
	.es-ruta-cohete { width: 9vw; left: 1vw; opacity: .7; }
	.ms-planeta { width: 76px; top: -40px; }
}