/* ============================================================
   PROFUNDIDAD VISUAL — luz ambiental, grano y transparencias
   ============================================================ */

/* Luz global: permanece detrás de todas las páginas. */
body::before {
  background:
    radial-gradient(circle at 8% 18%, rgba(212,120,154,0.17) 0%, transparent 25%),
    radial-gradient(circle at 88% 72%, rgba(184,126,192,0.12) 0%, transparent 29%),
    linear-gradient(135deg, rgba(7,3,10,0.12), rgba(16,8,24,0.34)),
    url('../img/Hero.png') center 20% / cover no-repeat;
  filter: blur(22px) brightness(0.17) saturate(0.72);
}

/* Grano muy ligero para evitar superficies digitales demasiado planas. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.045;
  background-image:
    repeating-radial-gradient(circle at 17% 31%, rgba(255,255,255,0.7) 0 0.45px, transparent 0.7px 3px),
    repeating-linear-gradient(117deg, rgba(255,255,255,0.16) 0 0.5px, transparent 0.5px 4px);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: soft-light;
}

/* Capas base por sección. */
#home-preview,
#musica,
#tienda,
#fotos,
#redes,
#contacto {
  isolation: isolate;
}

#home-preview {
  position: relative;
  background:
    radial-gradient(ellipse 48% 70% at 8% 50%, rgba(212,120,154,0.075), transparent 68%),
    radial-gradient(ellipse 38% 60% at 92% 25%, rgba(184,126,192,0.055), transparent 72%),
    linear-gradient(180deg, rgba(7,3,10,0.34), rgba(16,8,24,0.16));
  overflow: hidden;
}

#tienda {
  background:
    radial-gradient(ellipse 55% 70% at 88% 12%, rgba(212,120,154,0.075), transparent 70%),
    linear-gradient(145deg, rgba(7,3,10,0.12), rgba(16,8,24,0.2));
}

#fotos {
  background:
    radial-gradient(ellipse 55% 65% at 14% 86%, rgba(184,126,192,0.075), transparent 70%),
    linear-gradient(25deg, rgba(7,3,10,0.16), rgba(18,8,24,0.2));
}

#redes {
  background:
    radial-gradient(ellipse 42% 58% at 50% 8%, rgba(212,120,154,0.065), transparent 72%),
    linear-gradient(180deg, rgba(16,8,24,0.16), rgba(7,3,10,0.2));
}

/* Aros de cristal: un único elemento por sección, deliberadamente tenue. */
#home-preview::after,
#musica::after,
#tienda::after,
#fotos::after,
#redes::after,
#contacto::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: clamp(300px, 38vw, 620px);
  aspect-ratio: 1;
  right: -13%;
  bottom: -38%;
  border: 1px solid rgba(242,179,204,0.075);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(212,120,154,0.045), transparent 58%);
  box-shadow:
    inset 0 0 90px rgba(184,126,192,0.035),
    0 0 120px rgba(212,120,154,0.025);
  pointer-events: none;
}

#home-preview::after { right: -10%; top: -28%; bottom: auto; }
#musica::after       { right: auto; left: -14%; bottom: -34%; }
#tienda::after       { right: -12%; top: -24%; bottom: auto; }
#fotos::after        { right: auto; left: -13%; bottom: -40%; }
#redes::after        { right: -10%; bottom: -32%; }
#contacto::after     { right: auto; left: -15%; top: -26%; bottom: auto; }

/* Mantener el contenido por encima de las capas ambientales. */
#home-preview > .container,
.musica-inner,
.tienda-inner,
.fotos-inner,
.redes-inner,
.contacto-main {
  position: relative;
  z-index: 1;
}

/* Más volumen en secciones con fotografía de fondo. */
.musica-overlay {
  background:
    radial-gradient(circle at 78% 24%, rgba(212,120,154,0.13), transparent 30%),
    radial-gradient(circle at 15% 82%, rgba(184,126,192,0.1), transparent 34%),
    linear-gradient(135deg, rgba(212,120,154,0.06), rgba(7,3,10,0.12) 48%, rgba(184,126,192,0.055));
}

.contacto-bg::after {
  background:
    radial-gradient(circle at 78% 18%, rgba(212,120,154,0.12), transparent 32%),
    radial-gradient(circle at 12% 82%, rgba(184,126,192,0.09), transparent 34%),
    linear-gradient(135deg, rgba(212,120,154,0.13), rgba(7,3,10,0.22) 55%, rgba(16,8,24,0.42));
}

.hero-bg::after {
  background:
    radial-gradient(circle at 76% 28%, rgba(212,120,154,0.12), transparent 28%),
    linear-gradient(to bottom, rgba(7,3,10,0.35) 0%, rgba(7,3,10,0.1) 35%, rgba(7,3,10,0.6) 65%, rgba(7,3,10,0.92) 100%);
}

/* Cristal y reflejos suaves en las superficies principales. */
.album-card,
.shop-card,
.social-card,
.form-card,
.login-card {
  box-shadow:
    0 24px 70px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 0 0 1px rgba(212,120,154,0.018);
}

.album-card,
.shop-card,
.social-card,
.form-card {
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

@media (max-width: 768px) {
  body::after { opacity: 0.025; mix-blend-mode: normal; }

  #home-preview::after,
  #musica::after,
  #tienda::after,
  #fotos::after,
  #redes::after,
  #contacto::after {
    width: 360px;
    opacity: 0.58;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body::after { display: none; }
  .album-card,
  .shop-card,
  .social-card,
  .form-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
}