/* =========================================
   XCANDLES · HERO ALBUM + BACKGROUND GLOBAL
   ========================================= */

/* ---------- BACKGROUND GENERAL DEL INDEX ---------- */

.index-editorial-bg {
  position: relative;
  background: #f4efe8;
}

.index-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: url('/img/backgrounds/index-editorial-bg.jpg');
  background-size: cover;
  background-position: center;

  transform: scale(1.02);
  filter: none;
  opacity: 1;
}

/* overlay beige editorial */
.index-bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
}

/* contenido por encima */
body > *:not(.index-bg-layer) {
  position: relative;
  z-index: 2;
}

/* asegurar header por encima */
#header-container {
  position: relative;
  z-index: 10000;
}


/* ---------- HERO ALBUM ---------- */

.hero-album {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  min-height: 560px;
  border-radius: 34px;
  isolation: isolate;
  background: #f4efe8;
}

/* slides */
.hero-album__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;

  opacity: 0;
  transform: scale(1.045);

  transition:
    opacity 1800ms ease,
    transform 7200ms ease;

  z-index: 1;
}

.hero-album__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* sin blur interno */
.hero-album__blur {
  display: none;
}

/* overlay beige suave sobre el hero */
.hero-album__overlay {
  display: none;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 768px) {
  .hero-album {
    min-height: 420px;
    border-radius: 26px;
  }

  .index-bg-layer {
    transform: scale(1.02);
    filter: none;
    opacity: 1;
  }

  .index-bg-layer::after {
    background: rgba(244, 239, 232, 0.86);
  }

  .hero-album__overlay {
    background: rgba(244, 239, 232, 0.18);
  }
}

/* HERO por encima del overlay beige */
.hero-editorial {
  position: relative;
  z-index: 3;
}

.hero-editorial__visual {
  position: relative;
  z-index: 4;
}

.hero-album {
  position: relative;
  z-index: 5;
}