html{
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    }

    body {
      margin: 0;
      background: radial-gradient(ellipse at center, #000010 0%, #000000 100%);
      font-family: Arial, sans-serif;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    }

    .solar-system {
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    .sun {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 250px;
      height: 250px;
      margin: -125px 0 0 -125px;
      background: url('../img/gravitar.png') no-repeat center/contain;
      background-color: #000;
      border-radius: 50%;
      z-index: 10;
      animation: blueFlare 5s infinite ease-in-out;
      box-shadow:
        0 0 20px 5px #00e0ff,
        0 0 40px 10px rgba(0, 191, 255, 0.4),
        0 0 60px 20px rgba(0, 100, 255, 0.2);
    }

    .planet-wrapper {
      position: absolute;
      width: 140px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .planet {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color:  #100A84;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      text-decoration: none;
      font-size: 11px;
      box-shadow:
        0 0 10px 3px #ffffff,
        0 0 20px 6px rgba(255, 255, 255, 0.4),
        0 0 30px 10px rgba(255, 255, 255, 0.2);
      transition: transform 0.3s, box-shadow 0.3s;
      z-index: 5;
      position: relative;
    }

    .planet:hover {
      transform: scale(1.2);
      background-color: #4ca3ff;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }

    .orbit {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px dashed rgba(255, 255, 255, 0.3);
      border-radius: 50%;
    }


    @keyframes float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes float2 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
    @keyframes float3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
    @keyframes float4 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } }
    

.planet1 {
  top: 15%;
  left: 46%;
  transform: translate(-50%, -50%);
  animation: float1 6s ease-in-out infinite;
}
.planet2 {
  top: 42%;
  left: 62%;
  transform: translate(-50%, -50%);
  animation: float2 7s ease-in-out infinite;
}
.planet3 {
  top: 70%;
  left: 46%;
  transform: translate(-50%, -50%);
  animation: float3 5s ease-in-out infinite;
}
.planet4 {
  top: 42%;
  left: 30%;
  transform: translate(-50%, -50%);
  animation: float4 6.5s ease-in-out infinite;
}


    @keyframes blueFlare {
      0%, 100% {
        box-shadow:
          0 0 20px 5px #00e0ff,
          0 0 40px 10px rgba(0, 191, 255, 0.4),
          0 0 60px 20px rgba(0, 100, 255, 0.2);
        transform: scale(1);
      }
      50% {
        box-shadow:
          0 0 30px 10px #33f0ff,
          0 0 60px 25px rgba(51, 153, 255, 0.6),
          0 0 90px 35px rgba(0, 102, 255, 0.3);
        transform: scale(1.06);
      }
    }

    /* Tooltip */
    .planet::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 110%;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, 0.85);
      color: #000;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 14px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 999;
    }

    .planet:hover::after {
      opacity: 1;
    }

    /* Fondo animado */
    .bg {
      background: url(../img/bg.webp) no-repeat center/cover;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -3;
      
     background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      animation: moverFondo 30s ease-in-out infinite;
    }

    .bg::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.3;
      z-index: -1;
    }

    @keyframes moverFondo {
      0% {
        background-position: center;
      }
      50% {
        background-position: center 5px; 
      }
      100% {
        background-position: center;
      }
    }




    .star-field {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      perspective: 600px;
      z-index: -2;
    }

    .star-field .layer {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4px;
      height: 4px;
      border-radius: 2px;
      transform-style: preserve-3d;
      box-shadow: -411px -476px #cccccc, 777px -407px #d4d4d4, -387px -477px #fcfcfc;
    }

    @keyframes sf-fly-by {
      from { transform: translateZ(-1200px); opacity: 0.9; }
      to   { transform: translateZ(0);       opacity: 0.9; }
    }

    .star-field .layer:nth-child(1) { animation: sf-fly-by 5s linear infinite; }
    .star-field .layer:nth-child(2) { animation: sf-fly-by 7s linear infinite; }
    .star-field .layer:nth-child(3) { animation: sf-fly-by 9s linear infinite; }

    /* Responsivo */
@media (max-width: 1280px) {
  .solar-system {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 60px;
    padding: 80px 20px;
    height: auto;
    position: relative;
  }

  .sun {
    position: relative;
    top: unset;
    left: unset;
    margin: 0;
    width: 150px;
    height: 150px;
    box-shadow:
      0 0 10px 3px #00e0ff,
      0 0 20px 5px rgba(0, 191, 255, 0.4),
      0 0 30px 10px rgba(0, 100, 255, 0.2);
  }

  .planet-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .planet {
    position: relative;
    width: 100px;
    height: 100px;
    font-size: 12px;
    transform: none !important;
    animation: none !important;
    box-shadow:
      0 0 10px 3px #ffffff,
      0 0 20px 6px rgba(255, 255, 255, 0.4),
      0 0 30px 10px rgba(255, 255, 255, 0.2);
  }

  .orbit {
    width: 80px;
    height: 80px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .planet::after {
    font-size: 9px;
    padding: 6px 6px;
  }


  .planet1, .planet2, .planet3, .planet4 {
    top: unset !important;
    left: unset !important;
    transform: none !important;
  }
}


::-webkit-scrollbar {
  width: 10px;
}


::-webkit-scrollbar-track {
  background: #000010; 
}


::-webkit-scrollbar-thumb {
  background: #4ca3ff; 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00e0ff;
}