:root {
  --dc-com-house:    url('../img/community/house.svg');
  --dc-com-people:   url('../img/community/people.svg');
  --dc-com-card:     url('../img/community/member-card.svg');
  --dc-com-folder:   url('../img/community/project-folder.svg');
  --dc-com-news:     url('../img/community/megaphone.svg');
  --dc-com-calendar: url('../img/community/calendar.svg');
}

/* Helper: marca decorativa base */
.index-page [class*="dch-"]::before,
.index-page [class*="dch-"]::after { pointer-events: none; }
.index-page .dch-cta__panel { position: relative; overflow: hidden; }

.index-page .dch-cta__panel--club::after,
.index-page .dch-cta__panel--player::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 360px;
  height: 360px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .07;
  transform: rotate(-8deg);
  transition: transform .9s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              opacity .6s ease;
  pointer-events: none;
}
.index-page .dch-cta__panel--club::after {
  -webkit-mask-image: var(--dc-com-house);
          mask-image: var(--dc-com-house);
}
.index-page .dch-cta__panel--player::after {
  -webkit-mask-image: var(--dc-com-people);
          mask-image: var(--dc-com-people);
}
.index-page .dch-cta__panel:hover::after {
  transform: rotate(0deg) scale(1.05);
  opacity: .12;
}

/* =====================================================
   2. STAT BAND
   ===================================================== */
.index-page .dch-stats { position: relative; overflow: hidden; }
.index-page .dch-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--dch-ink, #0a0d12);
  -webkit-mask-image: var(--dc-com-calendar);
          mask-image: var(--dc-com-calendar);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 110% auto;
          mask-size: 110% auto;
  opacity: .045;
  pointer-events: none;
  z-index: 0;
}
.index-page .dch-stats .dch-wrap { position: relative; z-index: 1; }

.index-page .dch-stat { position: relative; }
.index-page .dch-stat strong { position: relative; display: inline-block; }
.index-page .dch-stat strong::before {
  content: "";
  position: absolute;
  top: 8px;
  right: -34px;
  width: 26px;
  height: 26px;
  background-color: var(--dch-accent, #D46A2C);
  -webkit-mask-image: var(--dc-com-house);
          mask-image: var(--dc-com-house);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .55;
}
@media (max-width: 720px) {
  .index-page .dch-stat strong::before { display: none; }
}

/* =====================================================
   3. INTRO FEATURES
   ===================================================== */
.index-page .dch-intro__row { position: relative; }
.index-page .dch-intro__row::before {
  content: "";
  position: absolute;
  left: -10px;
  bottom: -18px;
  width: 110px;
  height: 110px;
  background-color: var(--dch-ink, #0a0d12);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .04;
  pointer-events: none;
  transition: opacity .6s ease, transform .8s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.index-page .dch-intro__row:nth-child(1)::before { -webkit-mask-image: var(--dc-com-card);     mask-image: var(--dc-com-card); }
.index-page .dch-intro__row:nth-child(2)::before { -webkit-mask-image: var(--dc-com-folder);   mask-image: var(--dc-com-folder); }
.index-page .dch-intro__row:nth-child(3)::before { -webkit-mask-image: var(--dc-com-news);     mask-image: var(--dc-com-news); }
.index-page .dch-intro__row:nth-child(4)::before { -webkit-mask-image: var(--dc-com-calendar); mask-image: var(--dc-com-calendar); }
.index-page .dch-intro__row:hover::before {
  opacity: .09;
  transform: translateX(6px) rotate(-4deg);
}

/* =====================================================
   4. ÚNETE — paneles directiva / socios
   ===================================================== */
.index-page .dch-join__card { position: relative; overflow: hidden; }

.index-page .dch-join__card::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -140px;
  top: -120px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-12deg);
  transition: transform 1s var(--ease-out, cubic-bezier(.16,1,.3,1)), opacity .8s ease;
}
.index-page .dch-join__card--club::before {
  background-color: var(--dch-ink, #0a0d12);
  -webkit-mask-image: var(--dc-com-house);
          mask-image: var(--dc-com-house);
  opacity: .055;
}
.index-page .dch-join__card--player::before {
  background-color: #ffffff;
  -webkit-mask-image: var(--dc-com-people);
          mask-image: var(--dc-com-people);
  opacity: .07;
}
.index-page .dch-join__card:hover::before {
  transform: rotate(-4deg) scale(1.04);
  opacity: .11;
}

.index-page .dch-join__card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  left: -50px;
  bottom: -60px;
  background-color: var(--dch-accent, #D46A2C);
  -webkit-mask-image: var(--dc-com-card);
          mask-image: var(--dc-com-card);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .08;
  pointer-events: none;
  z-index: 0;
}
.index-page .dch-join__card--player::after { background-color: #ffffff; opacity: .06; }

.index-page .dch-join__card-inner { position: relative; z-index: 1; }

/* =====================================================
   5. JUNTAS DESTACADAS
   ===================================================== */
.index-page #clubes-destacados { position: relative; overflow: hidden; }
.index-page #clubes-destacados::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  right: -180px;
  top: -120px;
  background-color: var(--dch-ink, #0a0d12);
  -webkit-mask-image: var(--dc-com-house);
          mask-image: var(--dc-com-house);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .035;
  pointer-events: none;
  transform: rotate(8deg);
  z-index: 0;
}
.index-page #clubes-destacados .dch-wrap { position: relative; z-index: 1; }

/* =====================================================
   6. DIRIGENTES
   ===================================================== */
.index-page #jugadores-home { position: relative; overflow: hidden; }
.index-page #jugadores-home::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  left: -160px;
  bottom: -140px;
  background-color: var(--dch-ink, #0a0d12);
  -webkit-mask-image: var(--dc-com-people);
          mask-image: var(--dc-com-people);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .04;
  pointer-events: none;
  transform: rotate(-6deg);
  z-index: 0;
}
.index-page #jugadores-home .dch-wrap { position: relative; z-index: 1; }

/* =====================================================
   8. NOTICIAS
   ===================================================== */
.index-page #noticias-home { position: relative; overflow: hidden; }
.index-page #noticias-home::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: -100px;
  bottom: -100px;
  background-color: var(--dch-ink, #0a0d12);
  -webkit-mask-image: var(--dc-com-news);
          mask-image: var(--dc-com-news);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .05;
  pointer-events: none;
  transform: rotate(12deg);
  z-index: 0;
}
.index-page #noticias-home .dch-wrap { position: relative; z-index: 1; }

/* =====================================================
   10. SPONSORS
   ===================================================== */
.index-page .dch-sponsors { position: relative; overflow: hidden; }
.index-page .dch-sponsors::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -70px;
  top: -90px;
  background-color: var(--dch-ink, #0a0d12);
  -webkit-mask-image: var(--dc-com-people);
          mask-image: var(--dc-com-people);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .06;
  pointer-events: none;
}

.index-page .dch-marquee__track .dot {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask-image: var(--dc-com-house);
          mask-image: var(--dc-com-house);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  border-radius: 0;
  opacity: .9;
}

/* =====================================================
   11. HERO
   ===================================================== */
.index-page .dch-hero__bg::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  right: -100px;
  top: -100px;
  background-color: #ffffff;
  -webkit-mask-image: var(--dc-com-house);
          mask-image: var(--dc-com-house);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .035;
  pointer-events: none;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .index-page .dch-cta__panel::after,
  .index-page .dch-join__card::before,
  .index-page .dch-join__card::after,
  .index-page .dch-intro__row::before { transition: none; }
}