:root {
  --dc-soc-ball:    url('../img/sports/soccer/soccer-ball-svgrepo-com.svg');
  --dc-soc-field:   url('../img/sports/soccer/soccer-field-1-svgrepo-com.svg');
  --dc-soc-trophy:  url('../img/sports/soccer/soccer-football-fifa-cup-trophy-svgrepo-com.svg');
  --dc-soc-player:  url('../img/sports/soccer/soccer-player-svgrepo-com.svg');
  --dc-soc-shoes:   url('../img/sports/soccer/soccer-shoes-2-svgrepo-com.svg');
  --dc-soc-line:    url('../img/sports/soccer/soccer-svgrepo-com.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-soc-trophy);
          mask-image: var(--dc-soc-trophy);
}
.index-page .dch-cta__panel--player::after {
  -webkit-mask-image: var(--dc-soc-player);
          mask-image: var(--dc-soc-player);
}
.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-soc-field);
          mask-image: var(--dc-soc-field);
  -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; }

/* Pelota mini junto al número de cada stat */
.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, #2CB037);
  -webkit-mask-image: var(--dc-soc-ball);
          mask-image: var(--dc-soc-ball);
  -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;
  animation: dc-soc-spin 18s linear infinite;
}
@keyframes dc-soc-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 720px) {
  .index-page .dch-stat strong::before { display: none; }
}

/* =====================================================
   3. INTRO FEATURES — pelota tenue al inicio de cada fila
   Refuerza la identidad futbolística sin invadir el texto
   ===================================================== */
.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-soc-trophy);  mask-image: var(--dc-soc-trophy); }
.index-page .dch-intro__row:nth-child(2)::before { -webkit-mask-image: var(--dc-soc-player);  mask-image: var(--dc-soc-player); }
.index-page .dch-intro__row:nth-child(3)::before { -webkit-mask-image: var(--dc-soc-field);   mask-image: var(--dc-soc-field); }
.index-page .dch-intro__row:nth-child(4)::before { -webkit-mask-image: var(--dc-soc-shoes);   mask-image: var(--dc-soc-shoes); }
.index-page .dch-intro__row:hover::before {
  opacity: .09;
  transform: translateX(6px) rotate(-4deg);
}

/* =====================================================
   4. ÚNETE — paneles club / jugador
   Trofeo gigante en el panel claro, zapatillas/jugador en el oscuro
   ===================================================== */
.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-soc-trophy);
          mask-image: var(--dc-soc-trophy);
  opacity: .055;
}
.index-page .dch-join__card--player::before {
  background-color: #ffffff;
  -webkit-mask-image: var(--dc-soc-shoes);
          mask-image: var(--dc-soc-shoes);
  opacity: .07;
}
.index-page .dch-join__card:hover::before {
  transform: rotate(-4deg) scale(1.04);
  opacity: .11;
}

/* Marca secundaria — pelota inferior izquierda (acento) */
.index-page .dch-join__card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  left: -50px;
  bottom: -60px;
  background-color: var(--dch-accent, #2CB037);
  -webkit-mask-image: var(--dc-soc-ball);
          mask-image: var(--dc-soc-ball);
  -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;
  transition: transform 14s linear;
}
.index-page .dch-join__card--player::after { background-color: #ffffff; opacity: .06; }
.index-page .dch-join__card:hover::after { transform: rotate(180deg); }

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

/* =====================================================
   5. CLUBES DESTACADOS — sección paper-2: trofeo watermark
   ===================================================== */
.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-soc-trophy);
          mask-image: var(--dc-soc-trophy);
  -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. JUGADORES HOME — sección paper-2: jugador watermark
   ===================================================== */
.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-soc-player);
          mask-image: var(--dc-soc-player);
  -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; }

/* =====================================================
   7. MAPA REGIONES (sección oscura) — cancha de fondo
   ===================================================== */
.index-page #regiones { position: relative; }
.index-page #regiones::after {
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  -webkit-mask-image: var(--dc-soc-field);
          mask-image: var(--dc-soc-field);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center 30%;
          mask-position: center 30%;
  -webkit-mask-size: 80% auto;
          mask-size: 80% auto;
  opacity: .025;
  pointer-events: none;
  z-index: 0;
}
.index-page #regiones .dch-wrap { position: relative; z-index: 1; }

/* =====================================================
   8. NOTICIAS HOME — pelota mínima en la esquina
   ===================================================== */
.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-soc-line);
          mask-image: var(--dc-soc-line);
  -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; }

/* =====================================================
   9. TESTIMONIO editorial — pelota lineal como comilla visual
   ===================================================== */
.index-page .dch-quote { position: relative; overflow: hidden; }
.index-page .dch-quote::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  left: -60px;
  top: -60px;
  background-color: currentColor;
  -webkit-mask-image: var(--dc-soc-line);
          mask-image: var(--dc-soc-line);
  -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;
  transform: rotate(-14deg);
}
.index-page .dch-quote::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -50px;
  bottom: -60px;
  background-color: currentColor;
  -webkit-mask-image: var(--dc-soc-ball);
          mask-image: var(--dc-soc-ball);
  -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;
  pointer-events: none;
  transform: rotate(18deg);
  animation: dc-soc-spin 60s linear infinite;
}
.index-page .dch-quote blockquote { position: relative; z-index: 1; }

/* =====================================================
   10. SPONSORS — pelota como separador editorial
   ===================================================== */
.index-page .dch-sponsors { position: relative; overflow: hidden; }
.index-page .dch-sponsors::before {
  position: absolute;
  width: 280px;
  height: 280px;
  right: -70px;
  top: -90px;
  background-color: var(--dch-ink, #0a0d12);
  -webkit-mask-image: var(--dc-soc-ball);
          mask-image: var(--dc-soc-ball);
  -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-soc-ball);
          mask-image: var(--dc-soc-ball);
  -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 — pelota orbital en el overlay de la imagen
   La pelota va dentro del dch-hero__overlay (z-index 1)
   que está sobre la imagen pero bajo el texto.
   Se usa ::before en dch-hero__bg para no tocar ::after
   (que es la línea accent en custom-home.css)
   ===================================================== */
.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-soc-ball);
          mask-image: var(--dc-soc-ball);
  -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;
  animation: dc-soc-spin 100s linear infinite;
  z-index: 3;
}

/* =====================================================
   Reduce motion: respetar preferencias del usuario
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .index-page .dch-stat strong::before,
  .index-page .dch-quote::after,
  .index-page .dch-hero__bg::after { animation: none; }
  .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; }
}