/* ==========================================================================
   Casos de éxito · jugadores que entrenaron en Global y hoy juegan en su club
   (se apoya en global.css). Fotos y escudos: img/casos de exito → assets/img/casos/
   ========================================================================== */

/* ---------- 01 · Hero: entonces en Global, ahora en su club ---------- */
.page--casos .hero { min-height: max(100svh, 720px); }
.hero--casos .hero__bg img { object-position: 58% 62%; }
.hero--casos .hero__shade {
  background:
    linear-gradient(90deg, rgba(3, 22, 43, 0.97) 0%, rgba(3, 22, 43, 0.82) 34%, rgba(3, 22, 43, 0.3) 62%, rgba(3, 22, 43, 0.12) 100%),
    linear-gradient(0deg, var(--navy) 0%, rgba(3, 22, 43, 0) 34%),
    linear-gradient(180deg, rgba(3, 22, 43, 0.85) 0%, rgba(3, 22, 43, 0) 26%);
}
.hero--casos .hero__eyebrow { position: relative; z-index: 4; margin-top: auto; }
.hero--casos .hero__claim {
  position: relative; z-index: 4; margin-top: clamp(16px, 2.6vh, 28px);
  font: 900 min(4.9vw, 9.4vh)/0.86 var(--font-display); letter-spacing: -0.016em;
}
.hero--casos .hero__content { margin-top: clamp(18px, 3vh, 30px); padding-top: 0; }
.hero--casos .hero__lead { max-width: 40ch; }
.hero--casos .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3vh, 30px); }
.hero--casos .hero__actions .btn { margin-top: 0; }
.hero--casos .hero__foot { margin-top: auto; padding-top: clamp(20px, 4vh, 40px); }
.hero--casos .hero__player { right: clamp(24px, 13vw, 260px); bottom: 0; height: calc(94% - var(--header-h) * 0.3); }
.hero--casos .hero__player img { filter: drop-shadow(0 0 50px rgba(7, 85, 217, 0.3)) drop-shadow(0 30px 40px rgba(2, 14, 28, 0.5)); }
.hero--casos .hero__note { right: auto; left: 47%; top: calc(var(--header-h) + 9vh); }

/* Tres fotos que se turnan: apiladas y ancladas abajo a la derecha */
.hero--casos .hero__slides { position: relative; height: 100%; }
.hero--casos .hero__player .hero__slide { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: none; }
.hero--casos .hero__slide:not(.is-on) { opacity: 0; visibility: hidden; }
.hero--casos .hero__player .hero__slide--abbey { height: 104%; right: 4%; }
.hero--casos .hero__player .hero__slide--jeremias { right: 6%; }

/* Tarjeta «entonces / ahora», con una barra por historia como las historias de las redes */
.story {
  position: absolute; z-index: 5; right: var(--gutter); bottom: clamp(28px, 7vh, 84px);
  width: clamp(300px, 23vw, 360px); padding: 14px 20px 16px;
  background: rgba(2, 14, 28, 0.9); box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.14), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.story__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.story__bar[hidden] { display: none; }
.story__steps { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.story__step { position: relative; height: 24px; cursor: pointer; }
.story__step::before, .story__step i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.story__step::before { background: rgba(245, 248, 252, 0.22); transition: background-color 0.3s linear; }
.story__step:hover::before { background: rgba(245, 248, 252, 0.45); }
.story__step i { background: var(--red); transform: scaleX(0); transform-origin: left center; }
.story__pause { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.35); cursor: pointer; transition: box-shadow 0.3s linear; }
.story__pause:hover { box-shadow: inset 0 0 0 1px var(--white); }
.story__pause-icon { position: relative; width: 10px; height: 11px; }
.story__pause-icon::before, .story__pause-icon::after { content: ""; position: absolute; top: 0; width: 3px; height: 100%; background: var(--white); }
.story__pause-icon::before { left: 0; }
.story__pause-icon::after { right: 0; }
/* En pausa: triángulo de reanudar */
.story__pause[aria-pressed="true"] .story__pause-icon::before { left: 1px; width: 0; height: 0; background: none; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent var(--white); }
.story__pause[aria-pressed="true"] .story__pause-icon::after { display: none; }
.story__slides { display: grid; }
.story__slide { grid-area: 1 / 1; display: grid; grid-template-columns: auto minmax(44px, 1fr) auto; align-items: center; gap: 10px 12px; }
.story__slide:not(.is-on) { opacity: 0; visibility: hidden; }
.story__then { display: grid; justify-items: center; gap: 8px; margin: 0; }
.story__photo { display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--navy-800); box-shadow: 0 0 0 2px var(--red); }
.story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.story small { display: block; margin-bottom: 3px; font: 600 0.625rem/1 var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.story figcaption, .story__caption { font: 700 0.8125rem/1.1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.story__line { width: 100%; height: 22px; overflow: visible; align-self: start; margin-top: 20px; }
.story__line path { fill: none; stroke: var(--white); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.story__line .story__head { stroke-dasharray: none; }
.story__now { display: grid; justify-items: center; gap: 8px; }
.story__crests { display: flex; gap: 6px; height: 64px; align-items: center; }
.story__crests img { width: 44px; height: 52px; object-fit: contain; }
.story__name { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 0.8125rem; color: var(--muted); }
.story__name strong { font: 800 1rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); }

/* ---------- 02 · El mapa ---------- */
.mapa { position: relative; background: var(--navy-950); border-top: 1px solid var(--line-soft); }
.mapa__pin {
  display: grid; grid-template-columns: minmax(330px, 0.8fr) minmax(0, 2.1fr); align-items: center;
  gap: clamp(28px, 4vw, 72px); min-height: 100svh;
  padding: calc(var(--header-h) + 16px) var(--gutter) clamp(32px, 5vh, 64px);
}
.mapa__title { margin-top: clamp(12px, 1.4vw, 20px); font-size: clamp(2.6rem, min(4.4vw, 8vh), 5.6rem); }
.mapa__lead { margin-top: clamp(12px, 1.8vh, 20px); font-size: 0.9375rem; line-height: 1.5; max-width: 40ch; }
.mapa__list { display: grid; margin-top: clamp(14px, 2.4vh, 28px); }
.mapa__item {
  display: grid; grid-template-columns: 26px 28px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: clamp(4px, 0.75vh, 9px) 0; border-top: 1px solid var(--line-soft);
  transition: opacity 0.4s linear;
}
.mapa__item:last-child { border-bottom: 1px solid var(--line-soft); }
.mapa__num { font: 700 0.75rem/1 var(--font-display); letter-spacing: 0.16em; color: var(--muted); }
.mapa__crest { width: 28px; height: 28px; object-fit: contain; }
.mapa__dest { display: grid; gap: 2px; min-width: 0; }
.mapa__dest strong { font: 700 0.9375rem/1.05 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.mapa__dest span { font-size: 0.78125rem; line-height: 1.3; color: var(--muted); }
/* Con el pin, las paradas se encienden según se dibujan */
.mapa__list.is-scrub .mapa__item { opacity: 0.36; }
.mapa__list.is-scrub .mapa__item.is-on { opacity: 0.78; }
.mapa__list.is-scrub .mapa__item.is-current { opacity: 1; }
.mapa__list.is-scrub .mapa__item.is-current .mapa__num { color: var(--red); }

.mapa__map { position: relative; aspect-ratio: 1000 / 470; }
.mapa__land, .mapa__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa__svg { overflow: visible; }
.mapa__land {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  mask-composite: intersect;
}
.mapa__route { fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mapa__route--lens { stroke-width: 1.6; }
.mapa__leader { fill: none; stroke: rgba(200, 212, 227, 0.55); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.mapa__lens-bg { fill: var(--navy-950); }
.mapa__lens-around { fill: #082c50; }
.mapa__lens-land { fill: #0f4a82; stroke: rgba(200, 212, 227, 0.45); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.mapa__lens-ring { fill: none; stroke: rgba(245, 248, 252, 0.6); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mapa__lens-tag { font: 600 11px var(--font-display); letter-spacing: 0.3em; text-transform: uppercase; fill: var(--muted); }
.mapa__ball { fill: var(--white); }
.mapa__pulse { fill: var(--red); transform-box: fill-box; transform-origin: center; }
.motion-ok .mapa__pulse { animation: mapa-pulse 2.4s var(--ease-out) infinite; }
@keyframes mapa-pulse { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }

.mapa__node, .mapa__origin { position: absolute; z-index: 2; width: 0; height: 0; }
.mapa__chip {
  --chip: clamp(30px, 2.9vw, 44px);
  position: absolute; left: 0; top: 0; margin: calc(var(--chip) / -2) 0 0 calc(var(--chip) / -2);
  display: grid; place-items: center; width: var(--chip); height: var(--chip); border-radius: 50%;
  background: rgba(2, 14, 28, 0.94); box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.36), 0 10px 22px -10px rgba(0, 0, 0, 0.9);
}
.mapa__chip img { width: 64%; height: 70%; object-fit: contain; }
.mapa__node--sm .mapa__chip { --chip: clamp(24px, 2.2vw, 34px); }
.mapa__chip--home { --chip: clamp(34px, 3.4vw, 52px); background: none; box-shadow: none; }
.mapa__chip--home img { width: 100%; height: 100%; }
.mapa__label {
  position: absolute; white-space: nowrap;
  font: 700 clamp(0.625rem, 0.78vw, 0.75rem)/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(2, 14, 28, 0.95);
}
.mapa__node--up .mapa__label, .mapa__origin .mapa__label { left: 0; bottom: calc(clamp(30px, 2.9vw, 44px) / 2 + 6px); translate: -50% 0; }
.mapa__origin .mapa__label { bottom: calc(clamp(34px, 3.4vw, 52px) / 2 + 6px); }
.mapa__node--down .mapa__label { left: 0; top: calc(clamp(30px, 2.9vw, 44px) / 2 + 6px); translate: -50% 0; }
.mapa__node--right .mapa__label { left: calc(clamp(30px, 2.9vw, 44px) / 2 + 8px); top: 0; translate: 0 -50%; }
.mapa__node--left .mapa__label { right: calc(clamp(30px, 2.9vw, 44px) / 2 + 8px); top: 0; translate: 0 -50%; }
/* Debajo y hacia la izquierda (Ciudad de México, para no chocar con Alajuela) */
.mapa__node--downleft .mapa__label { right: calc(clamp(30px, 2.9vw, 44px) / -2); top: calc(clamp(30px, 2.9vw, 44px) / 2 + 6px); text-align: right; }
.mapa__node--sm.mapa__node--up .mapa__label { bottom: calc(clamp(24px, 2.2vw, 34px) / 2 + 4px); }
.mapa__node--sm.mapa__node--down .mapa__label { top: calc(clamp(24px, 2.2vw, 34px) / 2 + 4px); }
.mapa__node--sm.mapa__node--right .mapa__label { left: calc(clamp(24px, 2.2vw, 34px) / 2 + 6px); }
.mapa__node--sm .mapa__label { font-size: clamp(0.5625rem, 0.68vw, 0.6875rem); letter-spacing: 0.12em; }

/* ---------- 03 · Las historias ---------- */
.historias { position: relative; padding: var(--space-xl) var(--gutter); }
.historias__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: clamp(24px, 4vw, 72px); }
.historias__head .display { margin-top: clamp(14px, 1.6vw, 22px); }

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(36px, 4.4vw, 64px); }
.filtros[hidden] { display: none; }
.filtros__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font: 700 0.8125rem/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(200, 212, 227, 0.32); transition: color 0.3s linear, background-color 0.3s linear, box-shadow 0.3s linear;
}
.filtros__btn span { font-weight: 600; opacity: 0.6; }
.filtros__btn:hover { color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
.filtros__btn[aria-pressed="true"] { background: var(--white); color: var(--navy); box-shadow: none; }
.filtros__count { margin-left: auto; font-size: 0.875rem; color: var(--muted); }

.fichas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(64px, 7vw, 104px) clamp(20px, 2.4vw, 36px);
  margin-top: clamp(72px, 8vw, 120px); padding: 0; list-style: none;
}
.ficha[hidden] { display: none; }
.ficha > article, .ficha__tu { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--navy-800); box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.1); }
.ficha__stage { position: relative; display: block; aspect-ratio: 1 / 1.02; container-type: inline-size; }
.ficha__bg {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(90% 78% at 50% 16%, var(--cobalt) 0%, var(--cobalt-900) 58%, var(--navy-800) 100%);
}
/* Medio campo: círculo central y línea, como si la ficha estuviera dibujada sobre el césped */
.ficha__bg::before { content: ""; position: absolute; left: 50%; top: 64%; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(245, 248, 252, 0.13); translate: -50% -50%; }
.ficha__bg::after { content: ""; position: absolute; left: 0; right: 0; top: 64%; height: 1px; background: rgba(245, 248, 252, 0.13); }
.ficha__country {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 3%; overflow: hidden;
  font: 900 18cqi/0.8 var(--font-display); text-transform: uppercase; text-align: center; letter-spacing: -0.01em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(245, 248, 252, 0.26);
}
.ficha__now {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin-inline: auto;
  height: 112%; width: auto; max-width: 104%; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 22px 26px rgba(2, 14, 28, 0.55));
}
.ficha__crests-big { position: absolute; z-index: 2; inset: 16% 10% 24%; display: flex; align-items: center; justify-content: center; gap: 9%; }
.ficha__crests-big img { width: 36%; height: auto; max-height: 100%; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(2, 14, 28, 0.5)); }
.ficha__then { position: absolute; z-index: 3; left: 6%; bottom: -10%; width: 30%; margin: 0; }
.ficha__photo { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--navy); box-shadow: 0 0 0 4px var(--navy-800), 0 18px 30px -12px rgba(0, 0, 0, 0.65); }
.ficha__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.ficha__ring { position: absolute; left: -9%; top: -9%; width: 118%; height: 118%; overflow: visible; pointer-events: none; }
.ficha__ring circle { fill: none; stroke: var(--red); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ficha__then .note {
  position: absolute; left: 104%; bottom: 14%; margin: 0;
  font-size: clamp(1.25rem, 1.7vw, 1.65rem); color: var(--white); white-space: nowrap;
  transform: rotate(-8deg); transform-origin: left bottom; text-shadow: 0 2px 10px rgba(2, 14, 28, 0.9);
}
.ficha__body {
  position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start;
  grid-template-areas: "name pitch" "meta pitch" "label label" "list list"; column-gap: 16px;
  padding: clamp(46px, 4.4vw, 60px) clamp(18px, 2vw, 28px) clamp(22px, 2.2vw, 30px);
}
.ficha--sin-entonces .ficha__body { padding-top: clamp(24px, 2.4vw, 32px); }
.ficha__name { grid-area: name; font: 900 clamp(1.9rem, 2.5vw, 2.75rem)/0.9 var(--font-display); text-transform: uppercase; letter-spacing: -0.005em; }
.ficha__name span:first-child { display: block; margin-bottom: 5px; font-size: 0.5em; font-weight: 700; letter-spacing: 0.16em; color: var(--muted); }
.ficha__meta { grid-area: meta; margin-top: 10px; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }
.ficha__pitch { grid-area: pitch; position: relative; width: clamp(44px, 3.6vw, 54px); align-self: start; }
.pitch { display: block; width: 100%; height: auto; overflow: visible; }
.pitch__lines rect { fill: rgba(7, 85, 217, 0.22); }
.pitch__lines * { stroke: rgba(245, 248, 252, 0.5); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.pitch__lines path, .pitch__lines circle { fill: none; }
.pitch__heat { fill: var(--red); opacity: 0.35; filter: blur(3px); }
.pitch__dot { fill: var(--red); stroke: var(--white); stroke-width: 1.4; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.pitch__abbr {
  position: absolute; left: 50%; top: calc(100% + 7px); translate: -50% 0; padding: 4px 6px;
  font: 700 0.6875rem/1 var(--font-display); letter-spacing: 0.14em; background: var(--red);
}
.ficha__now-label { grid-area: label; margin-top: clamp(18px, 2vw, 26px); font: 700 0.6875rem/1 var(--font-display); letter-spacing: 0.26em; text-transform: uppercase; color: var(--red); }
.ficha__now-list { grid-area: list; display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 10px; padding: 12px 0 0; border-top: 1px solid var(--line-soft); list-style: none; }
.ficha__now-list li { display: flex; align-items: center; gap: 10px; }
.ficha__now-list img { width: 34px; height: 38px; object-fit: contain; }
.ficha__now-list span { display: grid; gap: 3px; font: 700 0.9375rem/1.05 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.ficha__now-list small { font: 600 0.625rem/1 var(--font-display); letter-spacing: 0.2em; color: var(--muted); }

@media (hover: hover) and (pointer: fine) {
  /* Sin transiciones CSS en la foto: GSAP anima su transform en la entrada */
  .ficha__bg { transition: filter 0.5s linear; }
  .ficha:hover .ficha__bg { filter: brightness(1.18) saturate(1.1); }
  .ficha--tu:hover .ficha__silhouette { transform: translateY(-3%); }
}

/* La ficha vacía: la próxima puede ser la tuya */
.ficha__tu { text-decoration: none; background: transparent; box-shadow: none; }
.ficha__tu::after { content: ""; position: absolute; inset: 0; border: 1.5px dashed rgba(245, 248, 252, 0.45); pointer-events: none; transition: border-color 0.3s linear; }
.ficha__tu:hover::after, .ficha__tu:focus-visible::after { border-color: var(--red); }
.ficha--tu .ficha__bg { background: radial-gradient(90% 78% at 50% 16%, rgba(7, 85, 217, 0.4) 0%, rgba(4, 48, 126, 0.25) 58%, rgba(8, 44, 80, 0) 100%); }
.ficha__silhouette { position: absolute; z-index: 2; left: 50%; bottom: 0; width: 54%; height: auto; translate: -50% 0; overflow: visible; transition: transform 0.9s var(--ease-out); }
.ficha__silhouette path { fill: rgba(2, 14, 28, 0.35); stroke: rgba(245, 248, 252, 0.7); stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.ficha__plus { position: absolute; z-index: 3; left: 50%; top: 22%; width: 26px; height: 26px; translate: -50% 0; }
.ficha__plus::before, .ficha__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--red); translate: -50% -50%; }
.ficha__plus::before { width: 26px; height: 2px; }
.ficha__plus::after { width: 2px; height: 26px; }
.ficha--tu .ficha__body { display: grid; grid-template-areas: none; grid-template-columns: 1fr; gap: 0; padding-top: clamp(24px, 2.4vw, 32px); }
.ficha--tu .ficha__name, .ficha--tu .ficha__meta { grid-area: auto; }
.ficha__tu-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(18px, 2vw, 26px); font: 700 0.8125rem/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); }
.ficha__tu-cta svg { width: 14px; height: 14px; transition: transform 0.5s var(--ease-out); }
.ficha__tu:hover .ficha__tu-cta svg { transform: translate(3px, -3px); }

/* ---------- Franja: con su selección ---------- */
.ticker--sel { background: var(--white); color: var(--navy); }
.ticker--sel .ticker__item img { width: auto; height: 1.9em; margin-right: 0.7em; }
.ticker--sel .ticker__item--lead { color: var(--red); font-weight: 800; }
.ticker--sel .ticker__sep { width: clamp(14px, 1.4vw, 20px); height: clamp(14px, 1.4vw, 20px); }
.ticker--sel .ticker__sep .sep-star * { fill: var(--red); }

/* ---------- 04 · Tu historia ---------- */
.siguiente {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "head head" "team body"; gap: clamp(36px, 5vw, 80px) clamp(32px, 5vw, 96px);
  padding: var(--space-xl) var(--gutter);
}
.siguiente__head { grid-area: head; }
.siguiente__head .display { margin-top: clamp(14px, 1.6vw, 22px); }
.siguiente__team { grid-area: team; position: relative; padding-bottom: clamp(56px, 6vw, 80px); }
/* Doce caras en dos filas de seis; la segunda, desplazada media cara (de ahí las 13 columnas) */
.lineup { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); padding: 0; list-style: none; }
.lineup li {
  grid-column: span 2; position: relative; aspect-ratio: 1; margin: 0 -6%; border-radius: 50%; overflow: hidden;
  background: var(--navy-800); box-shadow: 0 0 0 3px var(--navy);
}
.lineup li:nth-child(n + 7) { margin-top: -10%; }
.lineup li:nth-child(7) { grid-column: 2 / span 2; }
.lineup img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.lineup__you { display: grid; place-items: center; background: transparent !important; box-shadow: none !important; overflow: visible !important; }
.lineup__you::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px dashed var(--red); }
.lineup__you span { font: 500 clamp(1.4rem, 2vw, 2rem)/1 var(--font-note); color: var(--white); }
.siguiente__note { position: absolute; right: 2%; bottom: 0; transform: rotate(-5deg); color: var(--white); }
.siguiente__body { grid-area: body; align-self: center; }
.siguiente__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.siguiente__clubs { margin-top: clamp(18px, 2vw, 26px); }

/* ---------- Responsive ---------- */
@media (max-width: 1365px) {
  .page--casos .header-actions .btn { display: none; }
}
@media (max-width: 1099px) {
  .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa__pin { grid-template-columns: 1fr; min-height: 0; padding-top: var(--space-xl); }
  .mapa__side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
  .mapa__side .eyebrow, .mapa__title, .mapa__lead { grid-column: 1; }
  .mapa__list { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .mapa__map { order: 2; }
}
@media (max-width: 899px) {
  /* En móvil el jugador ocupa la parte alta y el texto va debajo, sin pisarse */
  .hero--casos .hero__player { top: calc(var(--header-h) - 4px); bottom: auto; right: 4vw; height: min(36svh, 330px); }
  .hero--casos .hero__player-inner img { -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, #000 76%, transparent 100%); }
  .hero--casos .hero__col { min-height: 0; padding-top: calc(var(--header-h) + min(36svh, 330px) + 8px); }
  .hero--casos .hero__claim { font-size: clamp(2.4rem, 10.4vw, 4.2rem); }
  .hero--casos .hero__eyebrow { margin-top: 0; }
  .hero--casos .hero__foot { margin-top: 20px; padding-top: 0; }
  .hero--casos .hero__note { left: 6%; top: calc(var(--header-h) + 3vh); font-size: 1.5rem; }
  .story { position: relative; right: auto; bottom: auto; width: auto; margin: 0 var(--gutter) 32px; }

  .historias__head { grid-template-columns: 1fr; }
  .filtros__count { width: 100%; margin-left: 0; }
  .mapa__pin { gap: 0; }
  .mapa__side { display: contents; }
  .mapa__side .eyebrow, .mapa__title, .mapa__lead, .mapa__list { grid-column: auto; grid-row: auto; }
  .mapa__side .eyebrow { order: 1; }
  .mapa__title { order: 2; }
  .mapa__lead { order: 3; }
  .mapa__map { order: 4; margin-top: 36px; }
  .mapa__list { order: 5; margin-top: 36px; }
  .mapa__label { display: none; }
  .mapa__origin .mapa__label, .mapa__node--home .mapa__label { display: block; }

  .siguiente { grid-template-columns: 1fr; grid-template-areas: "head" "team" "body"; }
  .siguiente__team { padding-bottom: 92px; }
}
@media (max-width: 699px) {
  .fichas { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .ficha__then { width: 28%; }
}
@media (max-width: 520px) {
  .story { padding: 12px 16px 16px; }
  .story__slide { grid-template-columns: auto minmax(30px, 1fr) auto; }
}
/* Portátiles bajos con el mapa fijado: la frase de apoyo deja sitio a las nueve paradas */
@media (min-width: 1100px) and (max-height: 800px) {
  .mapa__lead { display: none; }
}