/* Base */
body {
  font-family: Helvetica, Geneva, Verdana, sans-serif;
  background: url("https://midire.ar/img/starback2.gif") repeat;
  color: #00ff00;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Encabezado */
.site-header {
  padding: 1rem;
  background: url("https://midire.ar/img/starback2.gif") repeat;
  border-bottom: 2px solid lime;
}

.site-header h1 {
  margin: 0.5rem 0;
}

.clock-digits img {
  image-rendering: pixelated;
  width: 16px;
  height: 21px;
  vertical-align: middle;
}

/* Orbital layout */
.orbital {
  position: relative;
  width: min(90vw, 480px);
  height: min(90vw, 480px);
  margin: 2rem auto;
}

/* Planeta */
.planet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0;   /* elimina espacios verticales entre imágenes */
  gap: 0;           /* elimina separación explícita */
}

.planet-top,
.planet-center,
.planet-bottom {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;        /* asegura que no haya margen extra */
  padding: 0;       /* asegura que no haya padding extra */
}

/* Estrellas en posiciones radiales */
.star {
  position: absolute;
  width: 88px; /* ancho estimado para imagen + etiqueta */
  text-align: center;
  transform: translate(-50%, -50%);
}

.star img {
  width: 50px;
  height: 50px;
  transition: transform 0.2s ease-out;
}

.star-label {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: #c8facc; /* verde suave retro */
  text-shadow: 0 0 4px rgba(0, 255, 0, 0.35);
}

/* Posiciones equidistantes alrededor del círculo */
.star-pos-top { left: 50%; top: 6%; }
.star-pos-top-right { left: 85%; top: 22%; }
.star-pos-right { left: 94%; top: 50%; }
.star-pos-bottom-right { left: 85%; top: 78%; }
.star-pos-bottom { left: 50%; top: 94%; }
.star-pos-left { left: 6%; top: 50%; }

/* Hover visual */
.star a:hover img {
  transform: scale(1.2);
}

/* Texto auxiliar y extras */
.helper-text {
  margin: 0.5rem auto 1.5rem;
}

.extras {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.extra-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #aee7b1;
  text-decoration: none;
  font-size: 0.9rem;
}

.extra-link img {
  display: block;
}

/* Footer */
.site-footer {
  background: url("https://midire.ar/img/starback2.gif") repeat;
  padding: 1rem;
  border-top: 2px solid lime;
  font-size: 0.9rem;
}

/* Responsivo fino */
@media (max-width: 420px) {
  .star-label {
    font-size: 0.8rem;
  }
  .star {
    width: 72px;
  }
}