/* ==========================================================================
   hero.css — hero de portada, hero de páginas internas y carrusel
   ========================================================================== */

.page-hero {
  position: relative;
  margin-top: 0;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.page-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0b0b0c8c 0% 40%, #0b0b0ceb);
}
.page-hero .container {
  position: relative;
  z-index: 2;
  padding-top: 160px;
  padding-bottom: 56px;
}
.page-hero .breadcrumb {
  color: #fff9;
  font-size: 13px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.page-hero .breadcrumb a:hover,
.page-hero h1 {
  color: var(--c-white);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, #0b0b0c8c, #0b0b0c73 45%, #0b0b0cf2);
}
.hero:after {
  content: "";
  position: absolute;
  right: -10%;
  top: -10%;
  width: 60%;
  height: 120%;
  z-index: 1;
  background: radial-gradient(circle at center, rgba(200, 16, 46, .28), transparent 65%);
  filter: blur(10px);
}
.hero .container {
  position: relative;
  z-index: 2;
  padding-top: 120px;
  padding-bottom: 90px;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--c-white);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.hero-tag span.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-red-bright);
}
.hero h1 {
  color: var(--c-white);
  max-width: 15ch;
}
.hero .lead {
  color: #ffffffd1;
  margin-top: 22px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  max-width: 620px;
}
@media (min-width: 640px) {
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
}
.hero-stats .stat strong {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--c-white);
}
.hero-stats .stat span {
  color: #fff9;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%);
  color: #ffffffa6;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.scroll-cue .line {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), transparent);
  animation: scrollcue 2s infinite;
}

/* -- Carrusel (hero de portada y tarjetas de categoría) --------------------- */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slides .carousel-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.card-media .carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.carousel-slide {
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.carousel-slide.active {
  opacity: 1;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .45);
  background: #0b0b0c59;
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, border-color .25s, opacity .25s;
}
.carousel-arrow:hover {
  background: #0b0b0c99;
  border-color: var(--c-white);
}
.carousel-arrow.prev { left: 20px; }
.carousel-arrow.next { right: 20px; }
.carousel-arrow svg { width: 18px; height: 18px; }
.card-media .carousel-arrow {
  width: 32px;
  height: 32px;
  opacity: .85;
}
.card-media:hover .carousel-arrow,
.card-media:focus-within .carousel-arrow {
  opacity: 1;
}
.card-media .carousel-arrow.prev { left: 10px; }
.card-media .carousel-arrow.next { right: 10px; }
.card-media .carousel-arrow svg { width: 14px; height: 14px; }
.carousel-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}
.hero > .carousel-dots {
  bottom: 130px;
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff6;
  border: none;
  padding: 0;
  transition: all .3s var(--ease);
}
.carousel-dots button.active {
  background: var(--c-white);
  width: 22px;
  border-radius: 4px;
}

/* -- Imágenes de fondo por página (antes inline style="background-image") -- */
.page-hero-calendario { background-image: url('../assets/img/hero-calendario.jpg'); }
.page-hero-categorias { background-image: url('../assets/img/hero-categorias.jpg'); }
.page-hero-entrenadores { background-image: url('../assets/img/hero-entrenadores.jpg'); }
.page-hero-galeria { background-image: url('../assets/img/hero-galeria.jpg'); }
.page-hero-historia { background-image: url('../assets/img/hero-historia.jpg'); }
.page-hero-inscripciones { background-image: url('../assets/img/hero-inscripciones.jpg'); }
.page-hero-nosotros { background-image: url('../assets/img/hero-nosotros.jpg'); }
.page-hero-noticias { background-image: url('../assets/img/hero-noticias.jpg'); }
.page-hero-sponsors { background-image: url('../assets/img/hero-sponsors.jpg'); }
.page-hero-tienda { background-image: url('../assets/img/hero-tienda.jpg'); }

.hero-slide-inicio { background-image: url('../assets/img/hero-inicio.jpg'); }
.hero-slide-adulto-damas { background-image: url('../assets/img/categoria-adulto-damas.jpg'); }
.hero-slide-adulto-varones { background-image: url('../assets/img/categoria-adulto-varones.jpg'); }
.hero-slide-sub16 { background-image: url('../assets/img/categoria-sub16.jpg'); }
.hero-slide-real1 { background-image: url('../assets/img/hero-real-1.jpg'); }
.hero-slide-real2 { background-image: url('../assets/img/hero-real-2.jpg'); }
.hero-slide-real3 { background-image: url('../assets/img/hero-real-3.jpg'); }