/* ============================
   ESTILOS BASE
============================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html,body { height: 100%; }

body {
  background: #0c0c0c;
  font-family: "Marcellus SC", serif;
  color: #fff;
  text-align: center;
  overflow-x: hidden;
}

/* ============================
   FONDO ESPACIAL (por debajo)
   - z-index bajo para que quede atrás
============================ */
.fondo-espacio {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0; /* importante: detrás del contenido */
  background: radial-gradient(ellipse at bottom, #0d1b2a 0%, #000 100%);
  perspective: 1000px;
  pointer-events: none;
}

/* Capas nebulosa (ya definidas) */
.capa-nebulosa { position: absolute; width: 320%; height: 320%; filter: blur(70px); opacity: 0.45; mix-blend-mode: screen; transform-origin: center; animation: flotarNeb 160s ease-in-out infinite alternate; will-change: transform; }
.capa-nebulosa.n1 { top: -30%; left: -40%; background: radial-gradient(circle at 40% 60%, rgba(100, 0, 255, 0.4), transparent 60%); }
.capa-nebulosa.n2 { top: 20%; left: -20%; background: radial-gradient(circle at 60% 40%, rgba(0, 180, 255, 0.3), transparent 70%); animation-duration: 200s; }
.capa-nebulosa.n3 { top: -10%; left: 30%; background: radial-gradient(circle at 50% 50%, rgba(255, 100, 180, 0.25), transparent 60%); animation-duration: 220s; }

/* Canvas de partículas (JS añade #chispasCanvas) */
#chispasCanvas,
#rafagaCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;          /* encima del fondo, por debajo del header (header z-index:10) */
  pointer-events: none;
  opacity: 0.85;
  mix-blend-mode: screen;
}

/* ============================
   HEADER / PORTADA
   - debe estar por encima del fondo
============================ */
.header-img {
  width: 100%;
  max-width: 1200px;
  margin: 48px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10; /* <-- muy importante: header por encima del canvas */
}

/* IMAGEN PORTADA */
.header-img img {
  width: 950px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.25));
  transition: transform 0.5s ease, filter 0.5s ease;
}

.header-img img:hover {
  transform: scale(1.02);
  filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.35));
}

/* AUDIO */
audio#musicaFondo {
  display: block;
  margin: 22px auto 0 auto;
  width: 320px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
  z-index: 11; /* por encima del header imagen si hace falta */
  position: relative;
}

/* Responsive */
@media (max-width: 768px) {
  .header-img { margin: 20px auto; padding: 12px; }
  .header-img img { width: 100%; max-width: 420px; }
  audio#musicaFondo { width: 260px; }
}

/* ANIMACIONES DEL FONDO (copiadas) */
@keyframes flotarNeb {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(50px, -50px) scale(1.05); }
  100% { transform: translate(-50px, 30px) scale(1.1); }
}

/* Animaciones y capas de fondo adicionales (estrellas/chispas) como las que ya tenías */
.fondo-espacio::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 300%;
  height: 300%;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),
    radial-gradient(1px 1px at 80px 120px, #aaf, transparent),
    radial-gradient(1px 1px at 200px 250px, #cceeff, transparent),
    radial-gradient(2px 2px at 300px 350px, #ffffff, transparent),
    radial-gradient(2px 2px at 400px 150px, #d0eaff, transparent);
  background-size: 400px 400px;
  animation: moverEstrellas 160s linear infinite, titilarEstrella 5s ease-in-out infinite alternate;
  opacity: 0.6;
  transform: translateZ(0);
}

.fondo-espacio::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 300%;
  height: 300%;
  background-image:
    radial-gradient(3px 3px at 40px 80px, #ffb347, transparent),
    radial-gradient(2px 2px at 120px 200px, #ff5e00, transparent),
    radial-gradient(4px 4px at 220px 300px, #ffa64d, transparent),
    radial-gradient(3px 3px at 340px 180px, #ff8c00, transparent),
    radial-gradient(2px 2px at 400px 450px, #ffd580, transparent);
  background-size: 400px 400px;
  animation: moverChispas 12s linear infinite, parpadeoChispas 2s ease-in-out infinite alternate;
  opacity: 0.7;
  mix-blend-mode: screen;
}

@keyframes moverEstrellas { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-400px, -400px, 0); } }
@keyframes moverChispas {
  0% { transform: translateY(100%) scale(0.8) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.8; transform: translateY(-100%) scale(1.1) rotate(15deg); }
  100% { opacity: 0; transform: translateY(-150%) scale(1.2) rotate(25deg); }
}
@keyframes parpadeoChispas { 0%,100% { opacity:0.6; filter: blur(2px); } 50% { opacity:1; filter: blur(3px); } }
@keyframes titilarEstrella { 0%,100% { opacity:0.9; } 50% { opacity:0.4; } }