/* ==========================================================================
   Versión 3 · base Levante–Global + la formación en cuatro capítulos
   Se apoya en global.css, con.css y sin.css; aquí solo lo nuevo o distinto.
   ========================================================================== */

.page--v3 .nav ul { gap: clamp(18px, 2.4vw, 40px); }

/* ---------- 01 · Hero: al atravesar la O se ve ya la sección 02 (modo revelado, en sin.css) ---------- */
.page--v3 .hero--zoom::after { display: none; }
/* La nota «Valencia / Más que fútbol» va dentro del bloque del jugador, a la derecha de su cabeza:
   así no le pisa la cara en pantallas más anchas que altas (portátiles con la barra del navegador) */
.page--v3 .hero__player .hero__note { left: 84%; right: auto; top: 8%; white-space: nowrap; }

/* ---------- 02 · La formación ---------- */
.train { position: relative; background: var(--navy-950); }

/* Introducción con índice de capítulos (es lo que se ve a través de la O) */
.train__intro {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-content: space-between; gap: clamp(48px, 8vh, 96px);
  min-height: max(100svh, 720px); padding: calc(var(--space-xl) + 16px) var(--gutter) clamp(40px, 7vh, 72px);
}
.train__bg { position: absolute; inset: -10% 0; z-index: -2; }
.train__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.train__intro::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 14, 28, 0.94) 0%, rgba(2, 14, 28, 0.7) 40%, rgba(2, 14, 28, 0.2) 75%),
    linear-gradient(0deg, var(--navy-950) 0%, rgba(2, 14, 28, 0) 45%),
    linear-gradient(180deg, var(--navy-950) 0%, rgba(2, 14, 28, 0.7) 22%, rgba(2, 14, 28, 0) 50%);
}
.train__intro-copy { display: grid; gap: 22px; max-width: 780px; }
.train__title { font-size: clamp(3.2rem, 7.4vw, 8.8rem); }
.train__index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.train__index li { --line: 1; position: relative; padding-top: 18px; }
.train__index li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); transform: scaleX(var(--line)); transform-origin: left center; }
.train__index li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-soft); z-index: -1; }
.train__index-link { display: grid; gap: 8px; min-height: 44px; text-decoration: none; }
.train__index-num { font: 700 0.8125rem/1 var(--font-display); letter-spacing: 0.22em; color: var(--red); }
.train__index-name {
  font: 900 clamp(2.2rem, 4.2vw, 4.8rem)/0.9 var(--font-display); text-transform: uppercase; letter-spacing: -0.005em;
  color: var(--white); -webkit-text-stroke: 1.2px var(--white);
}
.js.motion-ok .train__index-name { color: transparent; }
.train__index-sub { font-size: 0.875rem; line-height: 1.45; color: var(--muted); max-width: 22ch; }
.train__index-link:hover .train__index-name, .train__index-link:focus-visible .train__index-name { color: var(--white); }

/* Capítulos: por defecto apilados (sin JS, móvil o movimiento reducido) */
.train__pin { position: relative; }
.chapter { position: relative; }
.chapter + .chapter { margin-top: 8px; }
.chapter__scene { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy); }
.chapter__poster, .chapter__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chapter__canvas { opacity: 0; }
.chapter__canvas.is-live { opacity: 1; }
.chapter__shade { display: none; }
.chapter__copy { position: relative; display: grid; gap: 10px; justify-items: start; padding: 28px var(--gutter) clamp(48px, 7vw, 88px); }
.chapter__num { font: 900 clamp(4rem, 11vw, 8rem)/0.8 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px rgba(245, 248, 252, 0.45); }
.chapter__kicker { font: 700 0.8125rem/1.2 var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); }
.chapter__title { font: 900 clamp(3.6rem, 10vw, 9rem)/0.84 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.chapter__text { font-size: 1.0625rem; line-height: 1.6; color: var(--muted); max-width: 40ch; }
.train__hud, .train__nav { display: none; }

/* Versión cinematográfica (escritorio + movimiento): la activa el JS */
.train.is-cinematic .train__pin { height: 100svh; min-height: 640px; overflow: hidden; }
.train.is-cinematic .chapter { position: absolute; inset: 0; margin: 0; }
.train.is-cinematic .chapter__scene { position: absolute; inset: 0; aspect-ratio: auto; transform-origin: 50% 50%; }
.train.is-cinematic .chapter__shade {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 14, 28, 0.84) 0%, rgba(2, 14, 28, 0.4) 34%, rgba(2, 14, 28, 0) 58%),
    linear-gradient(0deg, rgba(2, 14, 28, 0.8) 0%, rgba(2, 14, 28, 0) 38%),
    linear-gradient(180deg, rgba(2, 14, 28, 0.55) 0%, rgba(2, 14, 28, 0) 22%);
}
.train.is-cinematic .chapter[data-side="right"] .chapter__shade {
  background:
    linear-gradient(270deg, rgba(2, 14, 28, 0.84) 0%, rgba(2, 14, 28, 0.4) 34%, rgba(2, 14, 28, 0) 58%),
    linear-gradient(0deg, rgba(2, 14, 28, 0.8) 0%, rgba(2, 14, 28, 0) 38%),
    linear-gradient(180deg, rgba(2, 14, 28, 0.55) 0%, rgba(2, 14, 28, 0) 22%);
}
.train.is-cinematic .chapter__copy { position: absolute; left: var(--gutter); bottom: clamp(104px, 17vh, 160px); width: min(42vw, 660px); padding: 0; gap: 12px; }
.train.is-cinematic .chapter[data-side="right"] .chapter__copy { left: auto; right: var(--gutter); justify-items: end; text-align: right; }
.train.is-cinematic .chapter__num { font-size: clamp(7rem, 13vw, 14rem); margin-bottom: 0.02em; }
.train.is-cinematic .chapter__title { font-size: clamp(4.6rem, 9.6vw, 10.5rem); }
.train.is-cinematic .chapter__text { color: rgba(245, 248, 252, 0.9); font-size: 1.125rem; }
.train.is-cinematic .train__hud { display: block; position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.train.is-cinematic .train__nav {
  position: absolute; z-index: 6; left: var(--gutter); right: var(--gutter); bottom: clamp(24px, 4vh, 40px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px);
}
.train__nav-btn { display: grid; gap: 10px; min-height: 44px; padding-top: 6px; text-align: left; color: rgba(245, 248, 252, 0.55); transition: color 0.3s linear; }
.train__nav-btn:hover, .train__nav-btn.is-active { color: var(--white); }
.train__nav-label { font: 700 0.75rem/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; }
.train__nav-label b { margin-right: 0.7em; color: var(--red); font-weight: 700; }
.train__nav-bar { position: relative; height: 3px; overflow: hidden; background: rgba(245, 248, 252, 0.2); }
.train__nav-bar i { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left center; }

/* ---------- 04 · Experiencia: entra en diagonal desde el azul marino del método ---------- */
.xp--cut::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: -1px; height: 6vw; pointer-events: none;
  background: var(--navy); clip-path: polygon(0 0, 100% 0, 0 100%);
}
.xp--v3 .xp__cut { left: 45.5%; top: 2%; width: 21%; }
.xp__cut .xp__frame { aspect-ratio: auto; overflow: visible; background: none; }
.xp__cut .xp__frame::after { display: none; }
.xp__cut .xp__frame img { height: auto; margin-top: 0; filter: drop-shadow(0 34px 40px rgba(2, 14, 28, 0.5)); }
.xp--v3 .xp__coach .xp__frame { aspect-ratio: 3 / 2; }
.xp--v3 .xp__coach .xp__frame img { object-position: 50% 50%; }

/* ---------- 07 · Ciudad Deportiva (sin esquema de ruta) ---------- */
.cdl--v3 { padding-bottom: calc(var(--space-xl) + 20px); }

/* ---------- 09 · Mensaje final: cartel simétrico ---------- */
.finale { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-xl) var(--gutter) 0; background: var(--navy-950); text-align: center; }
.finale__bg { position: absolute; left: 0; right: 0; bottom: 0; z-index: -3; height: 76%; }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; opacity: 0.75; }
.finale::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, var(--navy-950) 0%, rgba(2, 14, 28, 0.6) 46%, rgba(2, 14, 28, 0.28) 70%, rgba(2, 14, 28, 0.9) 100%);
}
.finale .finale__crest { left: 0; right: 0; top: 26%; margin: 0 auto; width: min(66vw, 880px); opacity: 0.06; }
.finale__top { position: relative; z-index: 4; display: grid; justify-items: center; gap: 22px; max-width: 1040px; margin: 0 auto; }
.finale__top .eyebrow { justify-content: center; }
.finale__text { font: 800 clamp(1.5rem, 2.6vw, 2.9rem)/1.06 var(--font-display); text-transform: uppercase; letter-spacing: -0.004em; max-width: 36ch; text-wrap: balance; }

.finale__stage {
  /* --g es el cuerpo de SUEÑO: jugador, halo y alto del cartel se miden con él */
  --g: min(29vw, 33rem, 46vh);
  --gt: 16px;
  position: relative; height: calc(var(--gt) + var(--g) * 1.9); margin: clamp(16px, 3vw, 48px) calc(var(--gutter) * -1) 0;
}
.finale__glow {
  position: absolute; z-index: 0; left: 0; right: 0; top: calc(var(--gt) - var(--g) * 0.35); margin: 0 auto;
  width: calc(var(--g) * 2.3); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7, 85, 217, 0.55), rgba(7, 85, 217, 0.18) 55%, rgba(7, 85, 217, 0) 74%);
}
.finale__giant {
  position: absolute; z-index: 1; left: 0; right: 0; top: var(--gt); display: block;
  font: 900 var(--g)/0.8 var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; white-space: nowrap;
}
.finale__giant-stroke { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(245, 248, 252, 0.42); }
.finale__giant-solid { position: absolute; inset: 0; color: var(--white); clip-path: inset(0 0 0 0); }
.js.motion-ok .finale__giant-solid { clip-path: inset(-10% 100% -10% 0); }
.finale__player { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--gt) + var(--g) * 0.44); margin: 0 auto; width: calc(var(--g) * 0.93); }
.finale__player img { width: 100%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55)); }
.finale__fade { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 44%; pointer-events: none; background: linear-gradient(0deg, var(--navy-950) 10%, rgba(2, 14, 28, 0.82) 42%, rgba(2, 14, 28, 0) 100%); }
.finale__copy { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(36px, 6vh, 64px); display: grid; justify-items: center; gap: 12px; }
.finale__title { margin: 0; font-family: var(--font-display); text-transform: uppercase; line-height: 0.88; }
.finale__big { display: block; font-weight: 900; font-size: clamp(3rem, 6.4vw, 7.2rem); letter-spacing: -0.01em; }
.finale__small { display: block; margin-top: 0.22em; font-weight: 800; font-size: clamp(1.6rem, 3.1vw, 3.4rem); letter-spacing: 0.01em; }
.finale__stroke { width: min(560px, 60vw); height: 24px; margin-top: -4px; overflow: visible; }
.finale__stroke path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.finale__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .page--v3 .header-actions .btn { display: none; }
}
@media (max-width: 899px) {
  .xp--cut::before { height: 10vw; }
  /* El recorte vuelve a la rejilla móvil de sin.css (sin esto quedaba diminuto y desplazado) */
  .xp--v3 .xp__cut { left: auto; top: auto; width: auto; }
  .train__intro { min-height: 0; }
  .train__index { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .chapter__scene { aspect-ratio: 1 / 1.05; }
  .finale__stage { --g: min(37vw, 46vh); --gt: 12px; height: calc(var(--gt) + var(--g) * 2.6); }
  .finale__player { top: calc(var(--gt) + var(--g) * 0.5); width: calc(var(--g) * 1.25); }
  .finale__glow { top: calc(var(--gt) - var(--g) * 0.21); width: calc(var(--g) * 2.4); }
  .finale__fade { height: 60%; }
  .finale__big { font-size: 11vw; }
  .finale__small { font-size: 6.2vw; }
  .finale__copy { bottom: 28px; }
}
@media (max-width: 599px) {
  /* En el teléfono el jugador gana tamaño y la cabeza apenas pisa el pie de la palabra */
  .finale__stage { height: calc(var(--gt) + var(--g) * 4); }
  .finale__player { top: calc(var(--gt) + var(--g) * 0.56); width: calc(var(--g) * 1.95); }
  .finale__glow { top: calc(var(--gt) - var(--g) * 0.03); width: calc(var(--g) * 2.7); }
}