/* ==========================================================================
   Propuesta B · sin uniformes (solo marca Global)
   Carácter: la marca manda. Se atraviesa la O de GLOBAL, líneas de pase,
   pizarra táctica animada y valores.
   ========================================================================== */

/* ---------- Hero ---------- */
.page--sin .hero__player { right: 13.5vw; bottom: 5.5vw; height: calc(100% - 5.5vw - var(--header-h) * 0.2); }
.page--sin .hero__inset { bottom: clamp(150px, 31vh, 320px); width: clamp(190px, 16.5vw, 280px); }
.hero__flood { z-index: 1; inset: -2px 0 -6px; background: var(--cobalt); opacity: 0; }
/* Modo revelado (data-zoom-reveal): al apagarse la foto queda el azul más oscuro, el mismo del borde de la sección que asoma por la O */
.hero.is-reveal { background: var(--navy-950); }
.xp { margin-top: -2px; }
.hero--zoom::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 6; height: 6vw; pointer-events: none;
  background: var(--cobalt); clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* ---------- 02 · Experiencia ---------- */
.xp { position: relative; z-index: 5; overflow: hidden; background: var(--cobalt); color: var(--white); }
.xp__grid {
  position: relative; display: grid; align-items: center;
  min-height: max(100svh, 58vw, 720px); padding: var(--space-xl) var(--gutter);
}
.xp__copy { position: relative; z-index: 4; width: min(60%, 1040px); }
.xp__title { margin-top: 18px; font-size: clamp(3rem, 6.7vw, 8.4rem); }
.xp__line { display: block; white-space: nowrap; }
.xp__sub { margin-top: clamp(18px, 2.4vw, 30px); font: 700 clamp(1.15rem, 1.5vw, 1.45rem)/1.3 var(--font-body); }
.xp__text { margin-top: 12px; max-width: 44ch; color: rgba(245, 248, 252, 0.86); }
.xp__boot { position: absolute; z-index: 2; left: 49.5%; top: 8%; width: 20.5%; }
.xp__coach { position: absolute; z-index: 2; right: 0; bottom: 7%; width: 35%; }
.xp__frame { position: relative; overflow: hidden; background: var(--navy); }
.xp__frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.14); pointer-events: none; }
.xp__boot .xp__frame { aspect-ratio: 4 / 5.2; }
.xp__coach .xp__frame { aspect-ratio: 4 / 3.3; }
.xp__frame img { width: 100%; height: 100%; object-fit: cover; }
.xp__boot .xp__frame img { height: 116%; margin-top: -8%; }
.xp__coach .xp__frame img { height: 116%; margin-top: -8%; object-position: 40% 50%; }
.xp__note {
  position: absolute; z-index: 5; right: calc(var(--gutter) + 1vw); top: calc(var(--space-xl) - 10px);
  padding: 18px 22px 14px; background: var(--cobalt-900); transform: rotate(-6deg);
  color: var(--white); font-size: clamp(1.3rem, 1.8vw, 1.9rem); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6);
}
.xp__pass { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.xp__pass-line { fill: none; stroke: rgba(245, 248, 252, 0.9); stroke-width: 2; stroke-dasharray: 1 11; stroke-linecap: round; }
.xp__pass-red { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; }
.xp__pass-ball circle { fill: var(--white); }
.xp__pass-ball path { fill: var(--navy); }
.xp__pass-ball { opacity: 0; }

/* ---------- 04 · Método ---------- */
.method { position: relative; overflow: hidden; background: radial-gradient(90% 70% at 75% 50%, var(--navy-800) 0%, var(--navy) 62%); }
.method__pin {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 96px); align-items: center;
  min-height: 100svh; padding: calc(var(--header-h) + 4vh) var(--gutter) 6vh;
}
.method__copy { display: grid; gap: 20px; align-content: center; }
.method__title { margin-top: 4px; }
.method__title .is-red { display: block; }
.method__list { position: relative; margin-top: 14px; padding-left: 30px; }
.method__rail { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: rgba(96, 125, 155, 0.35); }
.method__rail i { position: absolute; inset: 0; background: var(--red); transform: scaleY(0); transform-origin: top center; }
.method__steps { display: grid; gap: clamp(18px, 2.4vh, 28px); }
.mstep { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
.js.motion-ok .mstep { opacity: 0.34; transition: opacity 0.5s linear; }
.js.motion-ok .mstep.is-active { opacity: 1; }
.mstep__num { padding-top: 6px; font: 700 0.8125rem/1 var(--font-display); letter-spacing: 0.2em; color: var(--red); }
.mstep__title { font: 800 clamp(1.8rem, 2.6vw, 2.7rem)/0.95 var(--font-display); text-transform: uppercase; }
.mstep__text { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); max-width: 42ch; }
.method__board { position: relative; perspective: 1500px; }
.board3d { transform: rotateX(30deg) rotateZ(-4deg); transform-origin: 50% 60%; transform-style: preserve-3d; }
.board { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.45)); }
.board__lines path { fill: none; stroke: rgba(200, 212, 227, 0.6); stroke-width: 1.8; stroke-linecap: round; }
.board__spot { fill: rgba(200, 212, 227, 0.7); }
.board__cones path { fill: var(--red); }
.board__run { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-dasharray: 3 8; stroke-linecap: round; }
.board__pass { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.board__shot { fill: none; stroke: var(--white); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.board__rivals path { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
.board__ring { fill: none; stroke: var(--red); stroke-width: 3; }
.board__pl circle { fill: var(--white); stroke: var(--navy); stroke-width: 3; }
.board__pl--main circle { fill: var(--red); stroke: var(--white); stroke-width: 2.5; }
.board__ball circle { fill: var(--white); stroke: var(--navy-950); stroke-width: 2; }
.js.motion-ok .board__crest { opacity: 0; }
.js.motion-ok .board__ring { opacity: 1; }
.method__caption { display: flex; justify-content: center; gap: clamp(18px, 3vw, 40px); margin-top: 22px; font: 600 0.75rem/1 var(--font-display); letter-spacing: 0.26em; text-transform: uppercase; color: var(--line); }
.method__caption span { position: relative; padding-bottom: 10px; transition: color 0.4s linear; }
.method__caption span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transition: transform 0.6s var(--ease-out); }
.method__caption span.is-active { color: var(--white); }
.method__caption span.is-active::after { transform: scaleX(1); }

/* ---------- 05 · Formación integral ---------- */
.life { position: relative; overflow: hidden; padding: var(--space-xl) 0; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-950) 100%); }
.life__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: center; padding: 0 var(--gutter); }
.life__media { position: relative; padding-bottom: 16%; }
.life__frame { position: relative; overflow: hidden; background: var(--navy-800); }
.life__frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.14); pointer-events: none; }
.life__frame img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; }
.life__big .life__frame { aspect-ratio: 3 / 2.1; }
.life__small { position: absolute; z-index: 2; right: -7%; bottom: 0; width: 50%; box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.75); }
.life__small .life__frame { aspect-ratio: 3 / 2; }
.life__tag {
  position: absolute; left: -26px; top: 0; transform: rotate(-90deg) translateX(-100%); transform-origin: top left;
  font: 600 0.75rem/1 var(--font-display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.life__copy { display: grid; gap: 22px; align-content: center; }
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 28px; margin-top: 16px; }
.service { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.service__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(200, 212, 227, 0.28); }
.service__icon svg { width: 32px; height: 32px; overflow: visible; }
.service__icon svg * { fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.service__icon svg .ic-red { stroke: var(--red); }
.service__title { font: 800 1.4rem/1 var(--font-display); text-transform: uppercase; }
.service__text { margin-top: 6px; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }

/* ---------- 07 · Manifiesto ---------- */
.manifesto { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: max(100svh, 720px); padding: var(--space-xl) var(--gutter); background: var(--navy-950); }
.manifesto__bg { position: absolute; inset: -12% 0; z-index: -2; }
.manifesto__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0.6; }
.manifesto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2, 14, 28, 0.92) 0%, rgba(2, 14, 28, 0.6) 55%, rgba(2, 14, 28, 0.3) 100%), linear-gradient(0deg, var(--navy) 0%, rgba(3, 22, 43, 0) 30%); }
.manifesto .watermark { right: -10%; top: 10%; opacity: 0.08; }
.manifesto__inner { position: relative; display: grid; justify-items: start; gap: clamp(24px, 3vw, 40px); max-width: 1200px; }
.manifesto__text { font: 800 clamp(1.75rem, 3.3vw, 3.8rem)/1.04 var(--font-display); text-transform: uppercase; letter-spacing: -0.004em; max-width: 31ch; text-wrap: pretty; }
.manifesto__title { font-size: clamp(3.4rem, 8.4vw, 10rem); }
.manifesto__title > span { display: block; }
.manifesto__stroke { width: min(640px, 64vw); height: 30px; margin-top: calc(clamp(24px, 3vw, 40px) * -1); overflow: visible; }
.manifesto__stroke path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  .xp__note { display: none; }
  .method__pin { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 32px; }
  .mstep__text { font-size: 0.875rem; }
}
@media (max-width: 899px) {
  .method__pin { grid-template-columns: 1fr; }
  .method__board { max-width: 760px; }
  .page--sin .hero__player { right: 2vw; bottom: 38%; height: 42%; }
  .xp__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 28px; min-height: 0; padding-top: var(--space-xl); }
  .xp__copy { grid-column: 1 / -1; grid-row: 1; width: auto; }
  .xp__boot, .xp__coach { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .xp__boot { grid-column: 1 / span 3; grid-row: 2; }
  .xp__coach { grid-column: 3 / -1; grid-row: 3; margin-top: -18%; margin-right: calc(var(--gutter) * -1); }
  .method__pin { min-height: 0; padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .life__grid { grid-template-columns: 1fr; }
  .life__media { padding-bottom: 22%; }
  .life__small { right: 0; width: 56%; }
  .life__tag { display: none; }
  .services { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .page--sin .hero__player { right: -1vw; height: 40%; bottom: 38.5%; }
}