/* ============================================================
   NIVEL 1 — El vuelo (laberinto)
   ============================================================ */

.cielo{
  position:relative;
  margin:18px auto 0;
  border:1.5px solid var(--linea);
  border-radius:16px;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFF6F7 0%, #FFFFFF 65%);
  overflow:hidden;
  touch-action:none;          /* que no haga scroll mientras arrastra */
  user-select:none; -webkit-user-select:none;
  cursor:grab;
}
.cielo.volando{ cursor:grabbing; }

/* --- paredes --- */
.pared{
  position:absolute;
  background:var(--rosa-suave);
  border-radius:5px;
  box-shadow:inset 0 -2px 0 rgba(225,29,72,.07);
}

/* --- salida (Perú) --- */
.salida{
  position:absolute;
  border:2px dashed var(--rosa-medio);
  border-radius:50%;
  opacity:.65;
}

/* --- meta (la casa en Mérida) --- */
.meta{
  position:absolute;
  display:grid; place-items:center;
  color:var(--rojo);
}
.meta svg{ width:72%; height:72%; }
.meta::before{
  content:""; position:absolute; inset:6%;
  border-radius:50%;
  background:var(--rosa-suave);
  animation:latido-meta 1.9s ease-in-out infinite;
}
.meta svg{ position:relative; z-index:1; }
@keyframes latido-meta{
  0%,100%{ transform:scale(.82); opacity:.75 }
  50%    { transform:scale(1);   opacity:1 }
}

/* --- el avión --- */
.avion{
  position:absolute; top:0; left:0;
  color:var(--rojo);
  will-change:transform;
  filter:drop-shadow(0 3px 5px rgba(225,29,72,.3));
  z-index:3;
}
.avion svg{ width:100%; height:100%; display:block; }
.avion.aterrizando{ transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease; }

/* --- estelita de corazoncitos --- */
.migaja{
  position:absolute; z-index:2;
  color:var(--rosa-medio); font-size:11px; line-height:1;
  pointer-events:none;
  animation:migaja .95s ease-out forwards;
}
@keyframes migaja{
  0%  { opacity:.9; transform:translate(-50%,-50%) scale(1) }
  100%{ opacity:0;  transform:translate(-50%,-50%) scale(.4) }
}

/* --- la pista (ruta sugerida) --- */
.ruta{
  position:absolute; z-index:1;
  border-radius:50%;
  background:var(--rosa-medio);
  opacity:0;
  animation:aparece-ruta .4s ease forwards;
}
@keyframes aparece-ruta{ to{ opacity:.5 } }

.pie-vuelo{
  margin-top:10px;
  font-family:var(--dato); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.acciones-vuelo{ display:flex; justify-content:center; gap:16px; margin-top:6px; flex-wrap:wrap; }
.acciones-vuelo .btn-texto[hidden]{ display:none; }

@media (prefers-reduced-motion: reduce){
  .meta::before, .migaja{ animation:none !important; }
}