/* Estilos generales */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Asegurarse de que el contenedor principal del contenido sea flexible */
.full-height-section {
  height: 100vh; /* Ocupa toda la altura de la ventana */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Estilos para el contenedor de Three.js */
#threejs-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 1.7cm); /* Ajuste de altura menos 1.7 cm */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  background-color: #010407;
}

/* Estilos para el overlay */
#overlay {
  position: absolute;
  top: 88%; /* Ajusta según sea necesario */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  text-align: center;
}

/* Estilos para el botón dentro del overlay */
#overlay button {
  color: #fff !important;
  font-size: 20px;
  font-weight: 500;
  padding: 0.5em 1.2em;
  background: #1b6481;
  position: relative;
  border: 2px solid #257392;
  border-radius: 25px; /* Hace que los bordes sean redondos */
  outline: 1px solid;
  outline-color: rgba(163, 175, 180, 0.4);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  }

/* Cambio de color al pasar el cursor sobre el botón */
#overlay button:hover {
  box-shadow: inset 0 0 20px rgba(49, 138, 172, 0.5), 0 0 20px rgba(49, 138, 172, 0.4);
  outline-color: rgba(49, 138, 172, 0);
  outline-offset: 80px;
  text-shadow: 1px 1px 6px #fff;
}

/* Estilos para el contenedor de la clase "planeta" */
.planeta {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}

/* Estilos para el contenedor del botón lateral */
#boton-lateral {
  display: inline-block; /* Para que el contenedor no ocupe toda la línea */
  margin-top: 20px; /* Ajusta el margen superior según sea necesario */
  margin-left: 30px; /* Ajusta el margen izquierdo según sea necesario */
}

/* Estilos para el botón con ID bot_1 */
#bot_1 {
  color: #fff !important;
  font-size: 20px;
  font-weight: 500;
  padding: 0.5em 1.2em;
  background: #1b6481;
  position: relative;
  border: 2px solid #257392;
  border-radius: 25px; /* Hace que los bordes sean redondos */
  outline: 1px solid;
  outline-color: rgba(163, 175, 180, 0.4);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Cambio de color al pasar el cursor sobre el botón */
#bot_1:hover {
  box-shadow: inset 0 0 20px rgba(49, 138, 172, 0.5), 0 0 20px rgba(49, 138, 172, 0.4);
  outline-color: rgba(49, 138, 172, 0);
  outline-offset: 80px;
  text-shadow: 1px 1px 6px #fff;
  
}

/* Estilos para el loader */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: auto; /* Centra el loader vertical y horizontalmente */
  perspective: 780px;
  z-index: 2000; /* Asegura que el loader esté por encima del contenido */
  opacity: 1;
  transition: opacity 1s ease-in-out;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
}
.loader.hidden {
  opacity: 0;
}
.loader .text {
  font-size: 20px;
  font-weight: 700;
  color: #f2f9ff;
  z-index: 10;
}
.loader .load-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
}
.loader .load-inner.load-one {
  left: 0%;
  top: 0%;
  border-bottom: 5px solid #5c5edc;
  animation: rotate1 1.15s linear infinite;
}
.loader .load-inner.load-two {
  right: 0%;
  top: 0%;
  border-right: 5px solid #9f63fa;
  animation: rotate2 1.15s 0.1s linear infinite;
}
.loader .load-inner.load-three {
  right: 0%;
  bottom: 0%;
  border-top: 5px solid #3b82f6;
  animation: rotate3 1.15s 0.15s linear infinite;
}
@keyframes rotate1 {
  0% {
    transform: rotateX(45deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(45deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@keyframes rotate2 {
  0% {
    transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(45deg) rotateY(45deg) rotateZ(360deg);
  }
}
@keyframes rotate3 {
  0% {
    transform: rotateX(-60deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(-60deg) rotateY(0deg) rotateZ(360deg);
  }
}

/* Estilos para el canvas de Three.js */
.threejs-canvas {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.threejs-canvas.visible {
  opacity: 1;
}

/* Ajustes de responsive */
@media (max-width: 768px) {
  .planeta {
    padding: 0;
  }
}

/* Media query para dispositivos móviles */
@media (max-width: 480px) {
  .planeta {
    padding: 0;
  }
}

/* Estilos para el canvas de Three.js */
.threejs-canvas {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.threejs-canvas.visible {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}