/* ==========================================================================
   ARCHIVO:   css/3-globo.css
   PARTE:     Globo interactivo (Honduras – California)
   CONTIENE:  el globo que gira y se arrastra, y la cabeza del Directorio con el
              globo a la derecha
   LO USAN:   directorio.html (desde v0.23 el globo ya no está en el inicio)
   ORDEN:     después de 2-estructura.css
   ========================================================================== */

/* ---------- Cabeza del Directorio con el globo ---------- */
.pagina-cabeza--globo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1rem, 0.5rem + 1vw, 1.5rem);
}
.pagina-cabeza__texto {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
@media (max-width: 48rem) {
  .pagina-cabeza--globo {
    grid-template-columns: minmax(0, 1fr);
  }
  .pagina-cabeza--globo .globo {
    width: min(78%, 17rem);
    justify-self: center;
    margin-block: -0.5rem -1rem;
  }
}

/* ---------- El globo ----------
   Sin JavaScript se ve el dibujo SVG. Con JavaScript, js/componentes/globo.js
   pone encima un globo de puntos que gira y se arrastra. Colores del globo: */
.globo {
  --globo-tierra: 150, 190, 255;
  --globo-hn: 61, 214, 245;
  --globo-ca: 255, 200, 61;
  --globo-arco: 236, 243, 255;
  --globo-texto: 236, 243, 255;
  position: relative;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 1;
  justify-self: end;
}
.globo > svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.globo--vivo > svg {
  display: none;
}
.globo__lienzo {
  position: absolute;
  inset: 0;
  display: block;
  cursor: grab;
  touch-action: pan-y;
  animation: nacer-globo 1400ms var(--salida) both;
}
.globo--arrastrando .globo__lienzo {
  cursor: grabbing;
}
@keyframes nacer-globo {
  from { opacity: 0; transform: scale(0.86) rotate(-8deg); filter: blur(10px); }
}
.globo__pista {
  position: absolute;
  left: 50%;
  bottom: 2%;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(8, 20, 47, 0.7);
  border: 1px solid var(--linea);
  font-size: 0.75rem;
  color: var(--tinta-suave);
  white-space: nowrap;
  translate: -50% 0;
  pointer-events: none;
}
.globo--vivo .globo__pista {
  display: inline-flex;
  animation: aparecer-globo 700ms 1600ms var(--salida) both;
}
.globo__pista::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1.5px solid var(--azul);
  animation: deslizar 2.2s var(--entrada-salida) infinite;
}
@keyframes deslizar {
  0%, 100% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
}

/* Dibujo fijo del globo (sin JavaScript) */
.globo__mar { fill: var(--panel); stroke: var(--tinta); stroke-width: 1.5; }
.globo__halo { fill: none; stroke: var(--tinta); stroke-width: 1; opacity: 0.22; }
.globo__reticula { fill: none; stroke: var(--linea); stroke-width: 0.6; }
.globo__tierra { fill: var(--panel-alto); stroke: var(--linea-fuerte); stroke-width: 0.6; stroke-linejoin: round; }
.globo__california { fill: var(--rojo); }
.globo__honduras { fill: var(--azul); }
.globo__arco { fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linecap: round; }
.globo__arco-sombra { fill: none; stroke: var(--linea-fuerte); stroke-width: 1; stroke-dasharray: 2 5; }
.globo__punto { fill: var(--tinta); }
.globo__onda { fill: none; stroke: none; }
.globo__estrella { fill: var(--azul); }
.globo__constelacion { fill: none; stroke: var(--azul); stroke-width: 0.8; opacity: 0.6; }
.globo__rotulo { font-family: var(--fuente-titulo); font-size: 13px; font-weight: 500; fill: var(--tinta); }
.globo__rotulo-fino { font-family: var(--fuente-texto); font-size: 11.5px; fill: var(--tinta-suave); }

@keyframes aparecer-globo {
  from { opacity: 0; transform: translateY(16px); }
}