/* Misión espacial — fiesta infantil del espacio (oscura): cohete, planeta y estrellas. Va después
   de kit/base.css y kit/infantil.css. Solo var(--mi-*) / var(--k-*); nunca {{ theme.x }} aquí. */

.ms {
  --k-orn-2: var(--k-text);
  /* Campo de estrellas hecho con degradados (sin imágenes). */
  background:
    radial-gradient(1.5px 1.5px at 12% 6%, var(--k-text), transparent 60%),
    radial-gradient(1px 1px at 78% 4%, var(--k-text), transparent 60%),
    radial-gradient(2px 2px at 90% 18%, var(--k-primary), transparent 60%),
    radial-gradient(1px 1px at 6% 28%, var(--k-text), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 12%, var(--k-text), transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 24%, var(--k-accent), transparent 60%),
    radial-gradient(1px 1px at 48% 40%, var(--k-text), transparent 60%),
    radial-gradient(120% 50% at 50% 0%, var(--k-secondary), transparent 70%),
    var(--k-page-bg);
  background-size: 100% 760px, 100% 760px, 100% 760px, 100% 760px, 100% 760px, 100% 760px, 100% 760px, auto, var(--k-page-bg-size);
  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, no-repeat, no-repeat;
}
.ms .k-orn { color: var(--k-secondary); }
.ms-hero > .ms-planet, .ms-hero > .ms-star { position: absolute; }
.ms-planet { top: 5%; left: -8%; width: 150px; rotate: -8deg; }
.ms-star { width: 20px; }
.ms-star--a { top: 9%; right: 14%; }
.ms-star--b { top: 30%; right: 6%; width: 14px; }
.ms-star--c { top: 40%; left: 8%; width: 12px; }
.ms-frame { position: relative; width: min(60vw, 260px); margin: .6rem auto 1.4rem; }
.ms-photo { overflow: hidden; aspect-ratio: 1; border-radius: 50%; background: var(--k-soft);
  box-shadow: 0 0 0 10px var(--k-surface), 0 0 0 13px var(--k-primary), 0 0 0 22px var(--k-surface), 0 0 60px 20px color-mix(in srgb, var(--k-primary) 22%, transparent); }
.ms-photo img { width: 100%; height: 100%; object-fit: cover; }
.ms-rocket { position: absolute; right: -24%; bottom: -8%; width: 30%; rotate: 24deg; }
@media (prefers-reduced-motion: no-preference) {
  .ms-rocket { animation: ms-fly 3.2s ease-in-out infinite; }
}
@keyframes ms-fly { 50% { translate: 4px -10px; } }
.ms .fi-age { position: absolute; left: -8%; bottom: -6%; color: var(--k-on-primary); box-shadow: 0 0 0 5px var(--k-bg), 0 0 30px 4px color-mix(in srgb, var(--k-primary) 40%, transparent); }
.ms .fi-name { letter-spacing: -.02em; }
.ms-launch { margin: .6rem 0 -.2rem; }
.ms .fi-countdown > div { box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-primary) 55%, transparent); }
.ms .fi-countdown strong { color: var(--k-primary); }
.ms .fi-soft { background: color-mix(in srgb, var(--k-surface) 70%, transparent); }
.ms .fi-bring li { box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-primary) 55%, transparent); }
.ms .fi-welcome .k-divider { width: 76px; }
.ms .fi-footer-orn { width: 48px; rotate: 24deg; }