/* ==========================================================================
   Programas · cuatro caminos (jugadores, equipos y grupos, entrenadores,
   clubes y academias), con la comparativa de edad y duración de las estancias
   (se apoya en global.css). Textos: Textos por pagina/jugadores, grupos, entrenadores,
   clubes-y-academias, tecnificacion y campus-internacional.
   ========================================================================== */

.page--prog .nav a { white-space: nowrap; }

/* ---------- 01 · Hero: cuatro caminos ---------- */
.page--prog .hero { min-height: max(100svh, 720px); background: var(--navy-950); }
.hero--prog .hero__glow {
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(7, 85, 217, 0.32), rgba(7, 85, 217, 0) 70%),
    radial-gradient(45% 55% at 0% 100%, rgba(224, 0, 52, 0.18), rgba(224, 0, 52, 0) 70%);
}
.prog-hero__col { z-index: 4; }
.prog-hero__eyebrow { position: relative; z-index: 4; margin-top: clamp(8px, 3vh, 40px); }
.prog-hero__top { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 80px); align-items: end; width: 100%; margin-top: clamp(14px, 2.4vh, 26px); }
.prog-hero__title { font: 900 min(7vw, 12vh)/0.86 var(--font-display); text-transform: uppercase; letter-spacing: -0.016em; }
.prog-hero__title > span { display: block; }
.prog-hero__lead { margin: 0; padding-bottom: 0.4em; max-width: 40ch; }

.paths { position: relative; z-index: 4; width: 100%; margin-top: auto; padding-top: clamp(24px, 4vh, 48px); }
.paths__list { border-top: 1px solid var(--line-soft); }
.path__link {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 52px; align-items: center; gap: clamp(14px, 2vw, 32px);
  padding: clamp(8px, 1.6vh, 16px) 0; border-bottom: 1px solid var(--line-soft); text-decoration: none;
}
.path__link::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--cobalt); transform: scaleY(0); transform-origin: bottom center; transition: transform 0.6s var(--ease-out); }
.path__link:hover::before, .path__link:focus-visible::before { transform: scaleY(1); }
.path__num { font: 800 1rem/1 var(--font-display); letter-spacing: 0.1em; color: var(--line); transition: color 0.3s linear; }
.path__link:hover .path__num, .path__link:focus-visible .path__num { color: var(--white); }
.path__name { font: 900 clamp(2rem, min(5.2vw, 8.2vh), 5.6rem)/0.95 var(--font-display); text-transform: uppercase; letter-spacing: -0.012em; transition: transform 0.6s var(--ease-out); }
.path__link:hover .path__name, .path__link:focus-visible .path__name { transform: translateX(0.12em); }
.path__meta { font: 600 0.75rem/1.3 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); text-align: right; transition: color 0.3s linear; }
.path__link:hover .path__meta, .path__link:focus-visible .path__meta { color: var(--white); }
.path__arrow { display: grid; place-items: center; width: 52px; height: 52px; box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.35); transition: background-color 0.3s linear, color 0.3s linear; }
.path__arrow svg { width: 16px; height: 12px; }
.path__link:hover .path__arrow, .path__link:focus-visible .path__arrow { background: var(--white); color: var(--navy); }
.path__thumb { display: none; }
/* Vista previa que sigue al cursor (escritorio con ratón) */
.paths__preview { position: absolute; z-index: 6; left: 0; top: 0; width: clamp(220px, 21vw, 330px); aspect-ratio: 16 / 10; overflow: hidden; pointer-events: none; visibility: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); }
.paths__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }

/* ---------- 02 · Jugadores ---------- */
.jug { position: relative; padding: var(--space-xl) var(--gutter); background: var(--navy); }
.jug__head, .equipos__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.jug__head .display, .equipos__head .display { margin-top: clamp(16px, 1.6vw, 24px); }
.jug__lead, .equipos__lead { padding-bottom: 0.4em; }

.finder { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(32px, 4vw, 56px); }
.finder__label { font: 700 0.8125rem/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.finder__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 18px; font: 700 0.875rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.35); transition: background-color 0.3s linear, color 0.3s linear, box-shadow 0.3s linear; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--white); }
.chip.is-on { background: var(--white); color: var(--navy); }

.group { margin-top: clamp(40px, 5vw, 80px); }
.group--academy { margin-top: clamp(64px, 8vw, 120px); }
.group__head { display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.group__kicker { font: 700 0.75rem/1 var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); }
.group__title { max-width: 30ch; font: 800 clamp(1.5rem, 2.4vw, 2.4rem)/1.02 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.group__lead { max-width: 62ch; color: var(--muted); }

/* Fichas de las estancias */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin-top: clamp(24px, 3vw, 40px); }
.prog, .prow, .compare__table tbody tr { transition: opacity 0.5s linear; }
.prog.is-dim, .prow.is-dim, .compare__table tbody tr.is-dim { opacity: 0.22; }
.prog article { display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--navy-800); }
.prog__media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.prog__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.prog:hover .prog__media img { transform: scale(1.05); }
.prog__tag { position: absolute; left: 14px; top: 14px; padding: 7px 10px; background: var(--red); font: 700 0.6875rem/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; }
.prog__body { display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2.4vw, 32px); }
.prog__name { font: 900 clamp(2rem, 3.2vw, 3.4rem)/0.9 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.prog__claim { font: 700 1.05rem/1.25 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.prog__text { max-width: 54ch; color: var(--muted); }
.prog__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; border-top: 1px solid var(--line-soft); }
.prog__specs > div { padding-top: 14px; }
.prog__specs > div + div { padding-left: 18px; box-shadow: inset 1px 0 0 var(--line-soft); }
.prog__specs dt { font: 600 0.6875rem/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--line); }
.prog__specs dd { margin: 6px 0 0; font: 800 clamp(1.4rem, 2vw, 2rem)/1 var(--font-display); text-transform: uppercase; }

/* Comparativa: un rango por programa sobre la escala de edad y otra de duración (logarítmica) */
.compare { margin: clamp(32px, 4vw, 56px) 0 0; padding: clamp(20px, 2.4vw, 32px); background: rgba(2, 14, 28, 0.55); box-shadow: inset 0 0 0 1px var(--line-soft); }
.compare__title { display: grid; gap: 8px; font: 800 clamp(1.3rem, 1.8vw, 1.8rem)/1 var(--font-display); text-transform: uppercase; }
.compare__title span { font: 700 0.75rem/1 var(--font-display); letter-spacing: 0.24em; color: var(--red); }
.compare__table { width: 100%; margin-top: 18px; border-collapse: collapse; table-layout: fixed; }
.compare__table th, .compare__table td { padding: 12px 28px 12px 0; text-align: left; vertical-align: middle; }
.compare__table thead th { font: 600 0.75rem/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.compare__table thead th:first-child { width: 24%; }
.compare__unit { margin-left: 6px; font-size: 0.625rem; letter-spacing: 0.14em; color: var(--line); }
.compare__axes td { padding-top: 0; padding-bottom: 8px; }
.axis { position: relative; display: block; height: 18px; border-bottom: 1px solid var(--line-soft); }
.axis i { position: absolute; left: calc(var(--p) * 100%); bottom: 5px; transform: translateX(-50%); font: 600 0.6875rem/1 var(--font-display); font-style: normal; letter-spacing: 0.06em; white-space: nowrap; color: var(--line); }
.axis i:first-child { transform: none; }
.axis i:last-child { left: auto; right: 0; transform: none; }
.compare__table tbody tr { border-top: 1px solid var(--line-soft); }
.compare__table tbody th { font: 800 1.05rem/1.1 var(--font-display); text-transform: uppercase; }
.compare__table tbody th a { text-decoration: none; }
.compare__table tbody th a:hover { color: var(--red); }
.range { position: relative; display: block; height: 34px; }
.range::before { content: ""; position: absolute; left: 0; right: 0; top: 70%; height: 1px; background: rgba(200, 212, 227, 0.14); }
.range i { position: absolute; top: 70%; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); min-width: 10px; height: 10px; margin-top: -5px; border-radius: 4px; background: var(--red); transform-origin: left center; }
.range b { position: absolute; left: calc(var(--a) * 100%); top: 0; font: 600 0.75rem/1 var(--font-display); letter-spacing: 0.06em; white-space: nowrap; color: var(--white); }
.range--point b { left: auto; right: 0; }
tr:hover .range i { background: #ff2a5c; }

/* Programas de la academia filial */
.prows { margin-top: clamp(24px, 3vw, 40px); }
.prow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(18px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--line-soft); }
.prow__media { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-800); }
.prow__media img { width: 100%; height: 100%; object-fit: cover; }
.prow__art { display: grid; place-items: center; background: linear-gradient(135deg, var(--navy-700), var(--navy-950)); }
.prow__icon { width: 30%; aspect-ratio: 1; }
.prow__icon svg { width: 100%; height: 100%; overflow: visible; }
.prow__icon svg * { fill: none; stroke: var(--white); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.prow__icon svg .ic-red { stroke: var(--red); }
.prow__body { display: grid; align-content: center; gap: 8px; max-width: 58ch; }
.prow__num { font: 800 1rem/1 var(--font-display); letter-spacing: 0.12em; color: var(--red); }
.prow__name { font: 900 clamp(1.9rem, 3vw, 3.2rem)/0.92 var(--font-display); text-transform: uppercase; }
.prow__claim { font: 700 1.05rem/1.25 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.prow__text { color: var(--muted); }

/* ---------- 03 · Equipos y grupos: bandas a sangre ---------- */
.equipos { position: relative; padding: var(--space-xl) 0; background: var(--navy-800); overflow: hidden; }
.equipos__head { padding: 0 var(--gutter); }
.bands { display: grid; gap: clamp(48px, 6vw, 100px); margin-top: clamp(40px, 5vw, 80px); }
.band { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding-right: var(--gutter); }
.band--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); padding-right: 0; padding-left: var(--gutter); }
.band--flip .band__media { order: 2; }
.band__media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__num { display: block; font: 900 clamp(4rem, 8vw, 8rem)/0.8 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px rgba(200, 212, 227, 0.4); }
.band__name { margin-top: 14px; font: 900 clamp(2.2rem, 4vw, 4.4rem)/0.9 var(--font-display); text-transform: uppercase; }
.band__text { margin-top: 16px; max-width: 46ch; font-size: clamp(1rem, 1.15vw, 1.1rem); color: var(--muted); }
.band__for { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line-soft); font: 700 1rem/1.25 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.band__for span { display: block; margin-bottom: 6px; font: 600 0.6875rem/1 var(--font-display); letter-spacing: 0.22em; color: var(--line); }

/* ---------- 04 · Entrenadores: la pizarra ---------- */
.coaches { position: relative; padding: var(--space-xl) var(--gutter); background: var(--navy-950); overflow: hidden; }
.coaches__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.coaches__copy { position: sticky; top: calc(var(--header-h) + 4vh); }
.coaches__copy .display { margin-top: clamp(16px, 1.6vw, 24px); }
.coaches__copy .lead { margin-top: clamp(18px, 2vw, 28px); }
.coaches__board { width: 100%; max-width: 520px; aspect-ratio: 3 / 2; margin-top: clamp(24px, 3vw, 48px); }
.coaches__board svg { width: 100%; height: 100%; overflow: visible; }
.coaches__board .art-line { fill: none; stroke: rgba(200, 212, 227, 0.55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.coaches__board .art-strong { fill: none; stroke: var(--white); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.coaches__board .art-red { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.coaches__board .art-dot { fill: var(--white); }
.coaches__board .art-dot--red { fill: var(--red); }
.coaches__list { display: grid; gap: clamp(36px, 5vw, 80px); }
.cprog { display: grid; gap: 10px; }
.cprog__media { margin: 0 0 8px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-800); }
.cprog__media img { width: 100%; height: 100%; object-fit: cover; }
.cprog__num { font: 800 1rem/1 var(--font-display); letter-spacing: 0.12em; color: var(--red); }
.cprog__name { font: 900 clamp(2rem, 3.4vw, 3.6rem)/0.9 var(--font-display); text-transform: uppercase; }
.cprog__text { max-width: 54ch; color: var(--muted); }

/* ---------- 05 · Clubes y academias ---------- */
.clubs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--navy); }
.clubs__media { position: relative; margin: 0; min-height: 100%; overflow: hidden; }
.clubs__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.clubs__body { display: grid; align-content: center; justify-items: start; padding: var(--space-xl) var(--gutter); }
.clubs__title { margin-top: clamp(16px, 1.6vw, 24px); font-size: clamp(3rem, 5.6vw, 6.6rem); }
.clubs__list { width: 100%; margin: clamp(24px, 3vw, 40px) 0; border-top: 1px solid var(--line-soft); }
.clubs__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.clubs__list h3 { font: 800 1.5rem/1 var(--font-display); text-transform: uppercase; }
.clubs__list p { margin-top: 8px; color: var(--muted); }
.clubs__num { font: 800 1rem/1.5 var(--font-display); letter-spacing: 0.12em; color: var(--red); }

/* ---------- Pie y menú ---------- */
.page--prog .footer__cta .display { font-size: clamp(3.2rem, 7.4vw, 8.8rem); }


/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  .pgrid { grid-template-columns: 1fr; }
  .coaches__grid { grid-template-columns: 1fr; }
  .coaches__copy { position: static; }
  .clubs { grid-template-columns: 1fr; }
  .clubs__media { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 899px) {
  .prog-hero__top { grid-template-columns: 1fr; }
  .prog-hero__title { font-size: min(12vw, 7.4svh); }
  .path__link { grid-template-columns: 30px minmax(0, 1fr) 84px; row-gap: 6px; padding: 12px 0; }
  .path__num { grid-row: 1 / span 2; align-self: start; padding-top: 6px; font-size: 0.8125rem; }
  .path__name { font-size: clamp(1.6rem, 7.4vw, 2.4rem); }
  .path__meta { grid-column: 2; grid-row: 2; text-align: left; font-size: 0.625rem; letter-spacing: 0.14em; }
  .path__thumb { display: block; grid-column: 3; grid-row: 1 / span 2; aspect-ratio: 4 / 3; overflow: hidden; }
  .path__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .path__arrow, .paths__preview { display: none; }

  .jug__head, .equipos__head { grid-template-columns: 1fr; row-gap: 20px; }
  .prow { grid-template-columns: 1fr; }
  .band, .band--flip { grid-template-columns: 1fr; padding: 0; }
  .band--flip .band__media { order: 0; }
  .band__body { padding: 0 var(--gutter); }
}

/* Comparativa en móvil: cada programa en su bloque, con la etiqueta de cada escala */
@media (max-width: 699px) {
  .compare__table, .compare__table tbody, .compare__table tr, .compare__table th, .compare__table td { display: block; }
  .compare__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare__table tbody tr { padding: 14px 0 6px; }
  .compare__table th, .compare__table td { padding: 0 0 8px; }
  .compare__table td::before { display: block; margin-bottom: 2px; font: 600 0.625rem/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--line); }
  .compare__table td:nth-of-type(1)::before { content: "Edad (6 a 21 años)"; }
  .compare__table td:nth-of-type(2)::before { content: "Duración (1 semana a 10 meses)"; }
  :lang(en) .compare__table td:nth-of-type(1)::before { content: "Age (6 to 21)"; }
  :lang(en) .compare__table td:nth-of-type(2)::before { content: "Duration (1 week to 10 months)"; }
}