/* ===== Reset básico ===== */
body, h1, h2, h3, p, button {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
/* ===== Fondo y estructura general ===== */
body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  color: #fff;
  background: #000;
  text-align: center;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

/* ===== Fondo base (imagen fija) ===== */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(rgba(10, 0, 25, 0.7), rgba(0, 0, 0, 0.85)),
    url("https://cdn.textures4photoshop.com/tex/thumbs/space-background-with-starfield-free-download-thumb45.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 0;
}

/* ===== Estrellas animadas ===== */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent url("https://www.transparenttextures.com/patterns/stardust.png") repeat;
  opacity: 0.35;
  animation: moveStars 90s linear infinite;
  pointer-events: none; /* 👉 evita bloquear clics */
  z-index: 1;
}

@keyframes moveStars {
  from { background-position: 0 0; }
  to { background-position: -3000px 1500px; }
}

/* ===== Contenido principal ===== */
header, main, footer {
  position: relative;
  z-index: 10; /* 🔝 asegura que los botones estén siempre al frente */
}

header {
  margin-top: 40px;
}

.logo {
  width: 150px;
  margin-bottom: 10px;
}

h1 {
  font-size: 2.4em;
  margin: 10px 0 5px;
}

h2 {
  color: #b38bff;
  font-size: 1.1em;
  margin-bottom: 20px;
}

/* ===== Botones ===== */
.button-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  width: 80%;
  max-width: 900px;
  margin: 0 auto 40px;
}

button {
  background: linear-gradient(135deg, #8a63ff, #b38bff);
  border: none;
  color: white;
  padding: 14px 0;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 10px rgba(179, 139, 255, 0.4);
}

button:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(179, 139, 255, 0.8);
  background: linear-gradient(135deg, #b38bff, #8a63ff);
}

/* ===== Footer ===== */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
  background: rgba(0, 0, 20, 0.6);
  backdrop-filter: blur(6px);
  text-align: center;
  font-size: 14px;
  color: #cccccc;
  z-index: 20;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
}

/* ===== Animación fade-in ===== */
.fade-in {
  animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ===== FIX PARA QUE EL CONTENIDO QUEDE ARRIBA ===== */
#app-content {
  position: relative;
  z-index: 9999; /* 👈 asegura que esté siempre arriba */
}

/* Esto mantiene los fondos detrás */
#background-layer,
#stars-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* 👈 se quedan atrás */
}

#stars-layer {
  background: transparent url("https://www.transparenttextures.com/patterns/stardust.png") repeat;
  opacity: 0.35;
  animation: moveStars 90s linear infinite;
  pointer-events: none;
}

@keyframes moveStars {
  from { background-position: 0 0; }
  to { background-position: -3000px 1500px; }
}