/* ==========================================================================
   Página de inicio (antes «versión 3 · equipación Global»)
   Se apoya en global.css, con.css, sin.css y v3.css; aquí van los encajes de
   los recortes con la equipación de Global, la cabecera y la sección del staff.
   ========================================================================== */

/* Cabecera como en el resto de páginas: cinco enlaces; por debajo de 1280 px el botón cede su sitio para que la marca no se parta (sigue en el menú y en el pie) */
.page--v3g .nav ul { gap: clamp(16px, 2vw, 34px); }
.page--v3g .nav a { white-space: nowrap; }
@media (max-width: 1279px) {
  .page--v3g .header-actions .btn { display: none; }
}

/* ---------- 01 · Hero: la camiseta negra se separa del fondo con un halo cobalto ----------
   El jugador del regate tiene las proporciones del hero de la versión 3: se usa su misma colocación (con.css). */
.page--v3g .hero__player img { filter: drop-shadow(0 0 46px rgba(7, 85, 217, 0.32)) drop-shadow(0 34px 44px rgba(2, 14, 28, 0.55)); }

/* ---------- 05 · Experiencia: recorte más estrecho (jugador de pie) ---------- */
.page--v3g .xp--v3 .xp__cut { left: 50%; top: 3%; width: 13.2%; }

/* ---------- 10 · Mensaje final: el recorte es más alto, se ajusta el ancho para mantener la escala ---------- */
.page--v3g .finale__player { width: calc(var(--g) * 0.7); }

/* ---------- 04 · El staff técnico ---------- */
.staff { position: relative; background: var(--navy); }

/* Banda: la foto de la charla táctica pasa de tarjeta a sangre */
.staff__band {
  position: relative; isolation: isolate;
  display: grid; align-content: end; min-height: max(100svh, 680px);
  padding: calc(var(--header-h) + 48px) var(--gutter) clamp(48px, 9vh, 104px);
}
.staff__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--navy-800); }
.staff__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.staff__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, var(--navy) 0%, rgba(3, 22, 43, 0.88) 20%, rgba(3, 22, 43, 0.3) 52%, rgba(3, 22, 43, 0) 70%),
    linear-gradient(90deg, rgba(3, 22, 43, 0.6) 0%, rgba(3, 22, 43, 0) 48%);
}
.staff__head { display: grid; gap: clamp(14px, 2vw, 24px); max-width: 1180px; }
.staff__title { font-size: clamp(3.2rem, 7.8vw, 9.4rem); }
/* La nota se apoya sobre el final del titular («importa.») */
.staff__note { position: absolute; right: calc(var(--gutter) + 1vw); bottom: calc(clamp(48px, 9vh, 104px) + clamp(3.2rem, 7.8vw, 9.4rem) * 0.9 + 18px); transform: rotate(-7deg); color: var(--white); }

/* Cuerpo: texto y fotos a la izquierda (fijos al bajar), alineación a la derecha */
.staff__body {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px);
  padding: clamp(32px, 4vw, 64px) var(--gutter) var(--space-xl);
}
.staff__aside { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; display: grid; gap: clamp(32px, 4vw, 52px); }
.staff__lead { max-width: 40ch; }
.staff__figs { position: relative; }
.staff__fig--b { position: relative; z-index: 1; width: 62%; margin: -16% 0 0 auto; }
.staff__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy-800); box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.8); }
.staff__frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.14); pointer-events: none; }
.staff__frame img { width: 100%; height: 114%; margin-top: -7%; object-fit: cover; }
.staff__fig--b .staff__frame img { object-position: 40% 50%; }

/* Alineación técnica (hoja de partido) */
.lineup__label {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
  font: 600 0.75rem/1 var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--line);
}
.lineup__label span:first-child { color: var(--white); }
.lineup__track { position: relative; padding-left: 46px; }
.lineup__rail { position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--line-soft); }
.lineup__rail i { position: absolute; inset: 0; background: var(--red); transform-origin: 50% 0; }
.lineup__ball { position: absolute; z-index: 1; left: 2px; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); }
.lineup__ball svg { width: 100%; height: 100%; overflow: visible; }
.lineup__ball svg * { fill: none; stroke: var(--white); stroke-width: 1.4; stroke-linejoin: round; }
.js:not(.motion-ok) .lineup__ball, .no-js .lineup__ball { display: none; }

.lineup__row {
  display: grid; grid-template-columns: clamp(76px, 7vw, 112px) minmax(0, 1fr); align-items: center;
  gap: clamp(14px, 1.8vw, 28px); padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line-soft);
}
.lineup__num { position: relative; font: 900 clamp(3.2rem, 5vw, 5.6rem)/0.8 var(--font-display); letter-spacing: -0.01em; }
.lineup__num-o { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(245, 248, 252, 0.42); }
.lineup__num-s { position: absolute; inset: 0; color: var(--red); }
/* Las caras de cada grupo, superpuestas como en una convocatoria */
.lineup__faces { display: flex; margin: 0 0 14px; padding: 0 0 0 6px; list-style: none; }
.lineup__face { flex: none; width: clamp(42px, 3.4vw, 52px); aspect-ratio: 1; margin-left: -8px; border-radius: 50%; overflow: hidden; background: var(--navy-700); box-shadow: 0 0 0 3px var(--navy); }
.lineup__face img { width: 100%; height: 100%; object-fit: cover; }
.lineup__role { font: 800 clamp(1.5rem, 2vw, 2.2rem)/0.95 var(--font-display); text-transform: uppercase; letter-spacing: 0.005em; }
.lineup__text { margin-top: 8px; font-size: 0.96875rem; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.lineup__text strong { color: var(--white); font-weight: 600; }
.lineup__sum { margin-top: 22px; font: 600 0.8125rem/1.5 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.lineup__sum b { font: 900 1.6rem/1 var(--font-display); letter-spacing: 0; color: var(--white); margin-right: 4px; }
.lineup__sum span { color: var(--white); white-space: nowrap; }
.lineup__more { margin-top: 26px; }

/* Con movimiento, cada fila espera apagada hasta que llega el balón (sin JS se ve completa) */
.js.motion-ok .lineup__faces { opacity: 0.45; filter: grayscale(1); transition: opacity 0.5s linear, filter 0.5s linear; }
.js.motion-ok .lineup__row.is-on .lineup__faces { opacity: 1; filter: none; }
.js.motion-ok .lineup__role { color: rgba(245, 248, 252, 0.3); transition: color 0.5s linear; }
.js.motion-ok .lineup__text { opacity: 0.38; transition: opacity 0.5s linear; }
.js.motion-ok .lineup__row.is-on .lineup__role { color: var(--white); }
.js.motion-ok .lineup__row.is-on .lineup__text { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .staff__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; }
  .lineup__row { grid-template-columns: 76px minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .page--v3g .xp--v3 .xp__cut { left: auto; top: auto; width: auto; grid-column: 2 / span 2; }
  .page--v3g .finale__player { width: calc(var(--g) * 0.94); }

  .staff__band { min-height: max(84svh, 560px); padding-top: calc(var(--header-h) + 24px); }
  .staff__photo img { object-position: 42% 40%; }
  .staff__title { font-size: clamp(2.8rem, 12vw, 5rem); }
  .staff__note { display: none; }
  .staff__body { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 28px; }
  .staff__aside { position: relative; top: auto; }
  .staff__fig--b { width: 68%; }
}
@media (max-width: 599px) {
  .page--v3g .finale__player { width: calc(var(--g) * 1.42); }
  .lineup__track { padding-left: 38px; }
  .lineup__rail { left: 11px; }
  .lineup__ball { left: 0; }
  .lineup__row { grid-template-columns: 52px minmax(0, 1fr); align-items: start; }
  .lineup__num { font-size: 3rem; }
  .lineup__face { width: 40px; margin-left: -10px; }
  .lineup__role { font-size: 1.45rem; }
}

/* Enlace a la página de casos de éxito, bajo los servicios de «Futbolistas para el mundo» */
.page--v3g .life__more { margin-top: clamp(20px, 2.4vw, 32px); }
.page--v3g .center__more { margin-top: clamp(16px, 2vw, 26px); }

/* ---------- 08 · Dónde entrenamos: tres sedes ---------- */
.cdl--sedes .cdl__title { font-size: clamp(2.8rem, 4.8vw, 5.8rem); }
.cdl--sedes .cdl__copy { gap: 18px; }
.cdl--sedes.is-pinned { padding: 0; }
.cdl--sedes.is-pinned .sedes__pin { display: grid; align-content: center; min-height: 100svh; padding: calc(var(--header-h) + 12px) 0 clamp(24px, 4vh, 48px); }
.sedes__list { margin: clamp(6px, 1.4vh, 16px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.sede { position: relative; border-bottom: 1px solid var(--line-soft); }
.sede__btn {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; width: 100%;
  min-height: 44px; padding: clamp(12px, 1.7vh, 18px) 0; text-align: left; color: var(--muted); cursor: pointer; transition: color 0.3s linear;
}
.sede__btn:hover, .sede.is-on .sede__btn { color: var(--white); }
.sede__num { font: 700 0.75rem/1 var(--font-display); letter-spacing: 0.16em; }
.sede.is-on .sede__num { color: var(--red); }
.sede__name { font: 800 clamp(1.25rem, 1.7vw, 1.65rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.sede__place { font: 600 0.6875rem/1 var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; }
.sede__text { margin: -4px 0 0 46px; padding-bottom: 16px; max-width: 46ch; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.js .sede:not(.is-on) .sede__text { display: none; }
.sede__bar { display: none; }
.js .sede__bar { display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.sede__bar i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left center; }

/* Sin JavaScript se ven las tres sedes una debajo de otra; con él, apiladas y se pasa de una a otra */
.sedes__stage { display: grid; gap: 40px; }
.sede__fig { margin: 0; align-self: center; }
.js .sedes__stage { gap: 0; }
.js .sede__fig { grid-area: 1 / 1; }
.js .sede__fig:not(.is-on) { opacity: 0; visibility: hidden; }
#sede-iale .cdl__scan { -webkit-mask-image: url("../img/v3g/sede-iale-900.webp"); mask-image: url("../img/v3g/sede-iale-900.webp"); }
#sede-patacona .cdl__scan { -webkit-mask-image: url("../img/v3g/sede-patacona-1000.webp"); mask-image: url("../img/v3g/sede-patacona-1000.webp"); }
@media (max-width: 899px) {
  .sedes__stage { order: -1; }
  .sede__name { font-size: 1.3rem; }
  .sede__text { margin-left: 46px; }
}
.cdl--sedes .cdl__title .is-red { display: block; }



/* Portada: línea con palabras clave dentro del H1, con aspecto de antetítulo bajo «Football Total»
   (el hueco que ocupa se le quita al margen del texto de debajo, para que el hero siga cabiendo en pantalla) */
.hero__kicker { position: relative; z-index: 4; margin-top: clamp(10px, 1.6vh, 16px); line-height: 1.25rem; }
.hero__title:has(.hero__kicker) ~ .hero__content { padding-top: clamp(12px, 2vh, 20px); }
/* En móvil el jugador sube hasta el título y la taparía: pasa encima de «Global», siempre en una línea
   (el contorno baja con la palabra la altura exacta de esa línea) */
@media (max-width: 899px) {
  .hero__kicker { order: -1; margin: 0 0 12px; font-size: min(0.8125rem, 3.4vw); white-space: nowrap; }
  .hero__kicker .eyebrow__rule { display: none; }
  .hero__echo { top: calc(var(--hero-top) + 1.25rem + 12px); }
}