/* ==========================================================================
   Clubes y academias · página para clubes (se apoya en global.css)
   Fotos de jugadores y staff con la equipación real de Global; el Levante UD y el
   Patacona CF aparecen como clubes actuales, no como protagonistas.
   ========================================================================== */

/* ---------- 01 · Hero: el jugador Global y la órbita de clubes ---------- */
.page--clubes .hero { min-height: max(100svh, 720px); }
.hero--clubes .hero__bg img { object-position: 50% 80%; }
.hero--clubes .hero__shade {
  background:
    linear-gradient(90deg, rgba(3, 22, 43, 0.97) 0%, rgba(3, 22, 43, 0.8) 36%, rgba(3, 22, 43, 0.22) 64%, rgba(3, 22, 43, 0.05) 100%),
    linear-gradient(0deg, var(--navy) 0%, rgba(3, 22, 43, 0) 32%),
    linear-gradient(180deg, rgba(3, 22, 43, 0.82) 0%, rgba(3, 22, 43, 0) 26%);
}
.hero--clubes .hero__eyebrow { position: relative; z-index: 4; margin-top: auto; }
.hero--clubes .hero__claim {
  position: relative; z-index: 4; margin-top: clamp(16px, 2.6vh, 28px);
  font: 900 clamp(3.4rem, 4.8vw, 7.8rem)/0.86 var(--font-display); letter-spacing: -0.016em;
}
.hero--clubes .hero__content { margin-top: clamp(18px, 3vh, 30px); padding-top: 0; }
.hero--clubes .hero__lead { max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3vh, 30px); }
.hero--clubes .hero__content .btn { margin-top: 0; }
.hero--clubes .hero__foot { margin-top: auto; padding-top: clamp(20px, 4vh, 40px); }
.page--clubes .hero__player { right: clamp(24px, 18.5vw, 340px); bottom: 0; height: calc(95% - var(--header-h) * 0.3); }
/* Figura del hero (data-hero-fig): jugador que celebra (vertical) o volea (horizontal) */
.hero--clubes[data-hero-fig="celebra"] .hero__player { right: clamp(24px, 16.5vw, 320px); height: calc(93% - var(--header-h) * 0.3); }
.hero--clubes[data-hero-fig="volea"] .hero__player { right: 3vw; bottom: 9%; width: min(54vw, 1000px); height: auto; }
.hero--clubes[data-hero-fig="volea"] .hero__player-inner img { width: 100%; height: auto; }
/* El disparo crece con la pantalla hasta ~3/4 de su alto; el titular se ajusta para que la mano no lo toque */
.hero--clubes[data-hero-fig="disparo"] .hero__player { right: 2vw; bottom: 0; width: min(57vw, 110svh); height: auto; }
.hero--clubes[data-hero-fig="disparo"] .hero__player-inner img { width: 100%; height: auto; }
.page--clubes .hero__player-inner { position: relative; z-index: 2; }
.page--clubes .hero__note { right: calc(var(--gutter) + 2vw); top: calc(var(--header-h) + 7vh); }

/* Órbita: dos medias elipses (detrás y delante del jugador) y tres escudos que giran con el scroll.
   Su tamaño depende de la figura: con un recorte estrecho sobresale bastante a cada lado. */
.orbit { position: absolute; left: -66%; right: -66%; top: 49%; height: 21%; pointer-events: none; }
.hero--clubes[data-hero-fig="celebra"] .orbit { left: -46%; right: -46%; top: 45%; height: 20%; }
.hero--clubes[data-hero-fig="volea"] .orbit { left: 4%; right: 4%; top: 22%; height: 60%; }
.hero--clubes[data-hero-fig="disparo"] .orbit { left: 6%; right: 18%; top: 40%; height: 26%; }
.orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit__svg--back { z-index: 1; }
.orbit__svg--front { z-index: 3; }
.orbit__svg path { fill: none; stroke: rgba(200, 212, 227, 0.42); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.orbit__svg--front path { stroke: rgba(245, 248, 252, 0.7); }
.orbit__node { position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: 0; }
.orbit__chip {
  position: absolute; left: -46px; top: -46px; display: grid; place-items: center;
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(2, 14, 28, 0.86);
  box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.3), 0 20px 40px -18px rgba(0, 0, 0, 0.85);
}
.orbit__chip img { width: 58px; height: 66px; object-fit: contain; }
.orbit__node--open .orbit__chip { align-content: center; gap: 2px; background: rgba(2, 14, 28, 0.55); box-shadow: none; border: 1.5px dashed rgba(245, 248, 252, 0.72); }
.orbit__plus { position: relative; width: 14px; height: 14px; }
.orbit__plus::before, .orbit__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--red); transform: translate(-50%, -50%); }
.orbit__plus::before { width: 14px; height: 2px; }
.orbit__plus::after { width: 2px; height: 14px; }
.orbit__label { font: 700 0.6875rem/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- 02 · El modelo ---------- */
.model { position: relative; padding: var(--space-xl) var(--gutter); background: var(--navy); }
.model__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: clamp(24px, 5vw, 96px); }
.model__head .eyebrow { margin-bottom: clamp(16px, 2.2vw, 28px); }
.model__title { font-size: clamp(2.8rem, 5.2vw, 6.2rem); }
.model__title .is-red { display: block; }
.model__track { position: relative; margin-top: clamp(64px, 8vw, 120px); }
.model__rail { position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 44px; height: 2px; background: var(--line-soft); }
.model__fill { position: absolute; inset: 0; background: var(--red); transform-origin: left center; }
.model__ball { position: absolute; left: 0; top: 50%; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; opacity: 0; }
.model__ball svg { width: 100%; height: 100%; }
.model__ball svg * { fill: var(--navy); stroke: var(--white); stroke-width: 1.4; }
.js.motion-ok .model__ball { opacity: 1; }
.model__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); }
.step { display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; }
.step__icon {
  position: relative; z-index: 1; display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 10px;
  border-radius: 50%; background: var(--navy); box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: box-shadow 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}
.step.is-on .step__icon { background: var(--navy-800); box-shadow: inset 0 0 0 1.5px var(--red); }
.step__icon svg, .extra__icon svg, .way__icon svg { width: 44px; height: 44px; overflow: visible; }
.step__icon svg *, .extra__icon svg *, .way__icon svg * { fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.step__icon svg .ic-red, .extra__icon svg .ic-red, .way__icon svg .ic-red { stroke: var(--red); }
.step__num { font: 700 0.8125rem/1 var(--font-display); letter-spacing: 0.24em; color: var(--red); }
.step__title { font: 900 clamp(2.2rem, 3.4vw, 3.6rem)/0.9 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.step__text { max-width: 30ch; color: var(--muted); }

/* ---------- 03 · Beneficios ---------- */
.benefits { position: relative; padding: var(--space-xl) 0; background: var(--navy-950); }
.benefits__head { display: grid; gap: clamp(16px, 2.2vw, 28px); padding: 0 var(--gutter); }
.perks { display: grid; gap: clamp(72px, 10vw, 160px); margin-top: clamp(56px, 7vw, 110px); }
.perk { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 96px); padding-right: var(--gutter); }
.perk--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); padding-right: 0; padding-left: var(--gutter); }
.perk--flip .perk__media { order: 2; }
.perk__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--navy-800); }
.perk__media img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }
.perk__num { position: relative; display: block; width: max-content; font: 900 clamp(6rem, 11vw, 12rem)/0.8 var(--font-display); letter-spacing: -0.02em; }
.perk__num-stroke { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(245, 248, 252, 0.45); }
.perk__num-solid { position: absolute; left: 0; top: 0; color: var(--red); clip-path: inset(0 0 0 0); }
.js.motion-ok .perk__num-solid { clip-path: inset(100% 0 0 0); }
.perk__title { margin-top: clamp(18px, 2vw, 28px); font-size: clamp(2.6rem, 4.6vw, 5.4rem); }
.perk .lead { margin-top: clamp(16px, 1.8vw, 24px); }

.extras { margin: clamp(88px, 11vw, 170px) var(--gutter) 0; }
.extras__head { display: flex; align-items: center; gap: 24px; }
.extras__rule { flex: 1; height: 1px; background: var(--line-soft); transform-origin: left center; }
.extras__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); margin-top: 10px; }
.extra { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding: 30px 0 32px; border-bottom: 1px solid var(--line-soft); }
.extra__title { font: 800 clamp(1.3rem, 1.6vw, 1.6rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.extra__text { margin-top: 10px; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }

/* ---------- 04 · Nuestros clubes ---------- */
.clubs { position: relative; background: var(--navy); }
.clubs__pin {
  position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px);
  min-height: 100svh; padding: calc(var(--header-h) + 20px) var(--gutter) clamp(28px, 4vh, 48px);
}
.clubs__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.clubs__head .eyebrow { margin-bottom: clamp(14px, 1.8vw, 22px); }
.clubs__title { font-size: clamp(2.8rem, 5.4vw, 6.4rem); }
.clubs__lead { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--white); max-width: 18ch; text-align: right; }
.clubs__time { display: grid; grid-template-columns: 2fr 1fr; column-gap: clamp(14px, 1.6vw, 24px); }
.clubs__when { display: flex; align-items: center; gap: 14px; font: 700 0.75rem/1 var(--font-display); letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
.clubs__when b { font-weight: 700; }
.clubs__when i { flex: 1; height: 1px; background: rgba(200, 212, 227, 0.5); transform-origin: left center; }
.clubs__when--next { color: var(--red); }
.clubs__when--next i { background: none; border-top: 1px dashed var(--red); }
.clubs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); min-height: 0; }
.club {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end;
  min-height: min(60vh, 620px); padding: clamp(20px, 2vw, 32px); background: var(--navy-800);
}
.club::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(2, 14, 28, 0.96) 0%, rgba(2, 14, 28, 0.7) 34%, rgba(2, 14, 28, 0) 64%); }
.club__media { position: absolute; inset: 0; z-index: -2; }
.club__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.club__body { display: grid; justify-items: start; gap: 8px; }
.club__crest { width: 48px; height: 56px; margin-bottom: 8px; object-fit: contain; }
.club__role { font: 700 0.75rem/1.2 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.club__name { font: 900 clamp(2.4rem, 3.4vw, 4rem)/0.88 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.club__text { max-width: 34ch; color: var(--muted); }
.club--open { background: var(--navy-950); box-shadow: inset 0 0 0 1px rgba(224, 0, 52, 0.45); }
.club--open::after { background: linear-gradient(0deg, rgba(2, 14, 28, 0.9) 0%, rgba(2, 14, 28, 0) 50%); }
.club__art { position: absolute; left: 12%; right: 12%; top: 7%; height: 50%; z-index: -2; }
.jersey { width: 100%; height: 100%; overflow: visible; }
.jersey path { fill: none; stroke: rgba(245, 248, 252, 0.78); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.jersey .jersey__seam { stroke: rgba(200, 212, 227, 0.4); }
.jersey .jersey__crest { stroke: var(--white); stroke-dasharray: 3 5; }
.jersey .jersey__plus { stroke: var(--red); stroke-width: 2.2; }
.club__crest--open { display: block; width: 48px; height: 48px; border-radius: 50%; border: 1.5px dashed rgba(245, 248, 252, 0.72); position: relative; }
.club__crest--open::before, .club__crest--open::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--red); transform: translate(-50%, -50%); }
.club__crest--open::before { width: 16px; height: 2px; }
.club__crest--open::after { width: 2px; height: 16px; }
.club__cta { margin-top: 12px; }

/* ---------- 05 · Cómo entrenamos ---------- */
.how { position: relative; padding: var(--space-xl) var(--gutter); background: var(--navy-950); }
.how__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.how__media { position: sticky; top: calc(var(--header-h) + 28px); }
.how__img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--navy-800); }
.how__img img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.how__note { position: absolute; right: -3%; bottom: 7%; transform: rotate(-7deg); color: var(--white); }
.how__copy { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.rules { margin-top: clamp(16px, 2.6vw, 36px); border-top: 1px solid var(--line-soft); }
.rule { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: clamp(18px, 2vw, 26px) 0; border-bottom: 1px solid var(--line-soft); }
.rule__num { padding-top: 0.55em; font: 700 0.8125rem/1 var(--font-display); letter-spacing: 0.22em; color: var(--red); }
.rule__text { font: 800 clamp(1.7rem, 2.6vw, 2.9rem)/0.98 var(--font-display); text-transform: uppercase; letter-spacing: -0.005em; color: var(--white); }

/* ---------- 06 · Más formas de colaborar ---------- */
.collab { position: relative; padding: var(--space-xl) 0 clamp(64px, 8vw, 120px); background: var(--navy); }
.collab__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: clamp(24px, 5vw, 96px); padding: 0 var(--gutter); }
.collab__head .eyebrow { margin-bottom: clamp(16px, 2.2vw, 28px); }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); margin: clamp(52px, 6vw, 96px) var(--gutter) 0; }
.way { position: relative; display: grid; align-content: start; justify-items: start; gap: 16px; padding-top: 30px; }
.way__rule { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); transform-origin: left center; }
.way__title { font: 900 clamp(2rem, 2.8vw, 3rem)/0.92 var(--font-display); text-transform: uppercase; letter-spacing: -0.005em; }
.way__text { color: var(--muted); max-width: 40ch; }
.way .link-arrow { margin-top: 4px; }


/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .page--clubes .header-actions .btn { display: none; }
  .extras__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .page--clubes .hero__player { right: 31vw; bottom: 49%; height: 41%; }
  .hero--clubes[data-hero-fig="celebra"] .hero__player { right: 27vw; bottom: 49%; height: 41%; }
  .hero--clubes[data-hero-fig="volea"] .hero__player { right: -1vw; bottom: 53%; width: 98vw; }
  .hero--clubes .hero__claim { font-size: clamp(2.5rem, 10.6vw, 4.2rem); }
  .hero--clubes .hero__eyebrow { margin-top: auto; }
  .hero--clubes .hero__foot { margin-top: 20px; padding-top: 0; }
  .orbit { left: -95%; right: -95%; }
  .hero--clubes[data-hero-fig="celebra"] .orbit { left: -72%; right: -72%; }
  .hero--clubes[data-hero-fig="volea"] .orbit { left: 6%; right: 6%; top: 20%; height: 62%; }
  .hero--clubes[data-hero-fig="disparo"] .hero__player { right: 5vw; bottom: 51%; width: 86vw; }
  .hero--clubes[data-hero-fig="disparo"] .orbit { left: 4%; right: 16%; top: 38%; height: 28%; }
  .orbit__chip { left: -33px; top: -33px; width: 66px; height: 66px; }
  .orbit__chip img { width: 40px; height: 46px; }
  .orbit__label { font-size: 0.5625rem; letter-spacing: 0.12em; }

  .model__head { grid-template-columns: 1fr; }
  .model__track { margin-top: 48px; }
  .model__rail { left: 43px; right: auto; top: 44px; bottom: 60px; width: 2px; height: auto; }
  .model__fill { transform-origin: center top; }
  .model__ball { left: 50%; top: 0; }
  .model__steps { grid-template-columns: 1fr; gap: 34px; }
  .step { grid-template-columns: 88px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; justify-items: start; text-align: left; }
  .step__icon { grid-row: 1 / span 3; margin-bottom: 0; }
  .step__num { align-self: end; }

  .perks { gap: 64px; }
  .perk, .perk--flip { grid-template-columns: 1fr; gap: 26px; padding: 0; }
  .perk--flip .perk__media { order: 0; }
  .perk__copy { padding: 0 var(--gutter); }
  .perk__num { font-size: clamp(5rem, 24vw, 8rem); }
  .extras__list { grid-template-columns: 1fr; }

  .clubs__pin { min-height: 0; padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .clubs__head { grid-template-columns: 1fr; }
  .clubs__lead { text-align: left; }
  .clubs__time { display: none; }
  .clubs__list { grid-template-columns: 1fr; }
  .club { min-height: min(118vw, 560px); }
  .club--open { min-height: 0; padding-top: calc(50vw + 28px); }
  .club__art { top: 20px; height: 50vw; left: 16%; right: 16%; }
  .clubs__head { gap: 18px; }

  .how__grid { grid-template-columns: 1fr; }
  .how__media { position: relative; top: auto; }
  .how__img { aspect-ratio: 4 / 3; }
  .how__note { right: 4%; bottom: -4%; }

  .collab__head { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .model__ball { display: none; }
}