/* =========================================================
   POLISH 07 — FIX2 Club Hub Refined
   - elimina "Hoy en el club"
   - sube el nivel visual del Club Hub
   - agrega gradientes verdes muy sutiles y más aire editorial
   ========================================================= */

.clubHub {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(8, 56, 40, 0.08);
  background:
    radial-gradient(circle at 92% 12%, rgba(8, 96, 71, 0.055), transparent 24%),
    radial-gradient(circle at 16% 78%, rgba(11, 105, 76, 0.04), transparent 20%),
    linear-gradient(180deg, rgba(249, 252, 250, 0.98) 0%, rgba(255, 255, 255, 1) 72%);
  box-shadow: 0 20px 64px rgba(4, 45, 33, 0.055);
}

.clubHub::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 46%;
  height: 100%;
  background:
    linear-gradient(120deg, rgba(10, 97, 71, 0.06), transparent 58%);
  pointer-events: none;
}

.clubHub__intro {
  position: relative;
  min-height: 320px;
  padding: 40px 42px 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.9));
}

.clubHub__intro::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 28px;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(8, 96, 71, 0.065), transparent 68%);
  filter: blur(12px);
  pointer-events: none;
}

.clubHub__intro::after {
  right: -18px;
  top: -20px;
  width: 340px;
  height: 340px;
  opacity: .055;
}

.clubHub__copy h1 {
  max-width: 780px;
}

.clubHub__copy p {
  max-width: 575px;
}

.clubHub__actions {
  margin-top: 26px;
}

.clubHub__button {
  border-radius: 12px;
}

.clubHub__stats {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: min(100%, 332px);
  padding-left: 30px;
}

.clubHubStat {
  position: relative;
  padding: 18px 14px 18px 0;
  border-bottom: 1px solid rgba(7, 51, 36, .085);
}

.clubHubStat::before {
  content: "";
  position: absolute;
  inset: 6px -8px 6px -16px;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(8, 96, 71, 0.045), rgba(8, 96, 71, 0.015) 58%, transparent);
  opacity: .9;
  pointer-events: none;
}

.clubHubStat strong,
.clubHubStat span {
  position: relative;
  z-index: 1;
}

.clubHubStat strong {
  font-size: 32px;
  color: #0a6147;
}

.clubHubStat span {
  color: #5f6f68;
}

.clubHub__utility {
  display: block;
  padding: 16px 16px 18px;
  border-top: 1px solid rgba(7, 51, 36, .07);
  background:
    linear-gradient(180deg, rgba(248, 251, 249, 0.96), rgba(255,255,255,1));
}

.clubHub__access {
  position: relative;
  padding: 6px 2px 0;
}

.clubHub__access::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 120px;
  background:
    radial-gradient(circle at 10% 22%, rgba(8,96,71,.03), transparent 24%),
    radial-gradient(circle at 80% 36%, rgba(8,96,71,.025), transparent 18%);
  pointer-events: none;
}

.clubHub__sectionLabel {
  margin: 0 0 12px 4px;
}

.clubHub__accessGrid {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.clubHubAccess {
  min-height: 128px;
  padding: 16px;
  border: 1px solid rgba(7, 51, 36, 0.072);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(251,252,251,1));
  box-shadow: 0 8px 18px rgba(4,45,33,.02);
}

.clubHubAccess::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -24px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8,96,71,.045), transparent 72%);
  pointer-events: none;
}

.clubHubAccess:hover {
  border-color: rgba(7, 93, 66, .16);
  background:
    linear-gradient(180deg, rgba(249,251,250,1), rgba(244,248,246,1));
}

.clubHubAccess strong {
  margin-top: 14px;
}

.clubHubAccess small {
  max-width: 120px;
}

.clubHubAccess__arrow {
  right: 13px;
  bottom: 12px;
}

.clubHubToday {
  display: none !important;
}

/* Espacio deportivo inferior más limpio al no duplicar contenido del día */
.sportsWidgets {
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .clubHub__intro {
    grid-template-columns: minmax(0, 1fr) 248px;
    min-height: 0;
  }

  .clubHub__stats {
    width: 100%;
  }

  .clubHub__accessGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .clubHub {
    border-radius: 22px;
    background:
      radial-gradient(circle at 100% 10%, rgba(8,96,71,.055), transparent 30%),
      linear-gradient(180deg, rgba(250,252,250,1), rgba(255,255,255,1));
  }

  .clubHub::before {
    width: 100%;
    height: 180px;
    background: linear-gradient(180deg, rgba(10, 97, 71, 0.045), transparent 78%);
  }

  .clubHub__intro {
    padding: 22px 18px 12px;
    background: transparent;
  }

  .clubHub__intro::before {
    left: auto;
    right: 6px;
    top: 8px;
    width: 140px;
    height: 140px;
    opacity: .8;
  }

  .clubHub__copy h1 {
    max-width: 310px;
  }

  .clubHub__actions {
    margin-top: 14px;
  }

  .clubHub__stats {
    margin-top: 15px;
    padding-top: 12px;
  }

  .clubHubStat {
    padding: 10px 8px;
  }

  .clubHubStat::before {
    inset: 1px 2px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(8,96,71,.035), transparent);
  }

  .clubHub__utility {
    padding: 10px 12px 12px;
  }

  .clubHub__access::before {
    top: 18px;
    height: 160px;
  }

  .clubHub__accessGrid {
    gap: 8px;
  }

  .clubHubAccess {
    min-height: 78px;
    padding: 11px 10px;
    border-radius: 13px;
  }

  .clubHubAccess:last-child {
    min-height: 64px;
  }

  .clubHubAccess strong {
    margin-top: 2px;
  }

  .clubHubAccess::after {
    width: 74px;
    height: 74px;
    right: -16px;
    bottom: -18px;
  }
}

@media (max-width: 380px) {
  .clubHub__button {
    min-height: 33px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clubHubAccess,
  .clubHub__button {
    transition: none !important;
  }
}