/* ===== Propuesta · Laporte con el trofeo en la tarjeta de datos =====
   Se carga DESPUÉS de style.css y solo toca la tarjeta del pin del trofeo
   (.info--jug). El jugador vive en su propia capa (.info__jug), que deja salir
   la cabeza y el trofeo por ENCIMA del canto superior de la tarjeta y lo corta
   por el canto inferior: «sale de la tarjeta».
   Geometría del recorte (assets/img/jugadores/laporte-geo.json):
     eje de la cabeza al 54,8 % del ancho · base del trofeo al 90 % del alto. */

.info--jug{
  overflow:visible;                       /* la cabeza tiene que poder salir */
  --pop:clamp(56px,11vh,118px);           /* cuánto asoma por encima de la tarjeta; laporte.js
                                             lo recorta para que la cabeza nunca pise el menú */
  margin-top:calc(var(--pop) / 2);        /* recentra el conjunto tarjeta + cabeza */
}

/* decorado recortado a la tarjeta (antes lo recortaba el overflow de .info) */
.info__deco{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
/* La V asoma por la IZQUIERDA del jugador, subiendo desde el canto inferior. Para que
   pueda ir a esta altura sin que su brazo cruce «+78.000», las cifras de esta tarjeta
   van algo más pequeñas y juntas que en style.css (a 86 px llegaban al 51 % del ancho). */
.info--jug .info__bgv{right:13%;bottom:-16%;width:44%;opacity:0;transform-origin:50% 80%}
/* A esta altura su esquina superior queda a la derecha de «+3500» (más corto) y, como
   el brazo baja en diagonal hacia la derecha, al llegar a la fila de «+78.000» ya
   está separado de ella. */
.info__halo{position:absolute;right:-8%;top:-8%;width:60%;height:125%;opacity:0;
  background:radial-gradient(closest-side,rgba(227,6,19,.50),rgba(227,6,19,.16) 58%,rgba(227,6,19,0) 100%)}

/* capa del jugador: columna derecha a toda la altura de la tarjeta.
   clip-path: abierto por arriba (la cabeza asoma) y cerrado en el canto inferior,
   con la misma esquina redondeada que la tarjeta. El cuerpo NO se corta en recto:
   se funde (máscara) antes del canto, igual que en móvil. Con corte recto, al subir
   la tarjeta se veía el borde inferior de la imagen como una línea. */
.info__jug{position:absolute;z-index:1;top:0;bottom:0;right:0;width:42%;pointer-events:none;
  clip-path:inset(calc(-1 * var(--pop) - 60px) 0 0 -30% round 0 0 24px 0)}
.info__jug-fig{position:absolute;left:58%;top:calc(-1 * var(--pop));
  height:calc((100% + var(--pop)) / .98);   /* el 98 % del recorte cae en el canto: ahí ya es transparente */
  aspect-ratio:868 / 1378;translate:-54.8% 0;will-change:transform,opacity;opacity:0}
.info__jug-img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;
  -webkit-mask-image:linear-gradient(#000 0 84%,transparent 97%);
          mask-image:linear-gradient(#000 0 84%,transparent 97%)}

/* destello que cruza al jugador y al trofeo cuando las cifras terminan de contar.
   La máscara es el propio recorte, así que solo brilla la figura. */
.info__jug-brillo{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(100deg,rgba(255,236,226,0) 40%,rgba(255,236,226,.55) 50%,rgba(255,236,226,0) 60%);
  background-size:260% 100%;background-position:125% 0;
  -webkit-mask-image:url("../img/jugadores/laporte-trofeo-2027-sm.webp"),linear-gradient(#000 0 84%,transparent 97%);
          mask-image:url("../img/jugadores/laporte-trofeo-2027-sm.webp"),linear-gradient(#000 0 84%,transparent 97%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* texto a la izquierda y cifras en 2×2 para dejar sitio al jugador */
.info--jug .info__txt{position:relative;z-index:2;width:58%}
.info--jug .info__title{font-size:clamp(26px,3.3vw,50px)}
.info--jug .info__grid{grid-template-columns:repeat(2,max-content);column-gap:clamp(30px,3.4vw,50px);row-gap:clamp(18px,2.4vw,30px)}
.info--jug .info__num{font-size:clamp(34px,5.3vw,76px)}

/* ── móvil y tableta vertical ────────────────────────────────────────────
   El jugador pasa ARRIBA de la tarjeta, centrado, como un cromo: la cabeza
   rompe el canto superior y el cuerpo se funde con el fondo de la tarjeta
   justo antes del texto. Alturas en svh para que quepa con la barra del
   navegador (la tarjeta entera + lo que asoma ≤ ~92 svh). */
@media (max-width:899px){
  .info--jug{--zona:clamp(160px,30svh,300px);--pop:clamp(38px,8svh,86px);
    padding-top:calc(var(--zona) + 6px)}
  .info--jug .info__txt{width:auto}
  .info--jug .info__title{font-size:clamp(22px,6.4vw,40px)}
  .info--jug .info__sub{margin-bottom:18px}
  .info--jug .info__grid{grid-template-columns:repeat(2,1fr);gap:18px 14px}
  .info--jug .info__num{font-size:clamp(30px,9vw,60px)}
  .info--jug .info__cta{margin-top:18px}
  .info__jug{left:0;right:0;width:auto;bottom:auto;height:var(--zona);
    clip-path:inset(calc(-1 * var(--pop) - 60px) 0 0 0)}
  .info__jug-fig{height:calc((var(--zona) + var(--pop)) / .93);translate:-54.8% 0}
  /* sin canto en el que cortarse: el cuerpo se funde bajo la base del trofeo */
  .info__jug-img{-webkit-mask-image:linear-gradient(#000 0 83%,transparent 95%);
                         mask-image:linear-gradient(#000 0 83%,transparent 95%)}
  .info__jug-brillo{-webkit-mask-image:url("../img/jugadores/laporte-trofeo-2027-sm.webp"),linear-gradient(#000 0 83%,transparent 95%);
                            mask-image:url("../img/jugadores/laporte-trofeo-2027-sm.webp"),linear-gradient(#000 0 83%,transparent 95%);
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-composite:source-in;mask-composite:intersect}
  /* móvil: la V deja de ir centrada detrás del jugador (se tapaba casi entera) y
     asoma a su IZQUIERDA, más baja, sin bajar del hueco del jugador al texto */
  .info--jug .info__bgv{left:-8%;right:auto;top:max(0px,calc(var(--zona) - 58vw));bottom:auto;width:56%;
    translate:0 0;transform-origin:30% 60%}   /* arriba del todo, a la altura de la cabeza */
  .info__halo{left:50%;right:auto;top:-18%;width:88%;height:auto;aspect-ratio:1;translate:-50% 0}
}

/* ── pantallas bajas ─────────────────────────────────────────────────────
   Portátiles de 720-820 px de alto: la tarjeta se compacta por altura para que
   quede hueco para la cabeza entre ella y el menú. */
@media (min-width:900px) and (max-height:820px){
  .info--jug{padding-top:min(4vw,4.6vh);padding-bottom:min(4vw,4.6vh)}
  .info--jug .info__title{font-size:min(3.3vw,5.4vh)}
  .info--jug .info__sub{margin-bottom:min(3vw,3.4vh)}
  .info--jug .info__num{font-size:min(6vw,9vh)}
  .info--jug .info__grid{row-gap:min(2.4vw,2.6vh)}
  .info--jug .info__cta{margin-top:min(26px,2.6vh)}
  /* aquí las cifras son más pequeñas y dejan sitio: la V puede subir más */
  .info--jug .info__bgv{bottom:-4%}
}
/* móviles bajos (≤ 700 px útiles, p. ej. 360×640 con la barra): menos jugador,
   cifras más prietas y fuera el subtítulo */
@media (max-width:899px) and (max-height:700px){
  .info--jug{--zona:clamp(130px,25svh,190px);padding-top:calc(var(--zona) + 2px);
    padding-bottom:22px}
  .info--jug .info__kicker{font-size:11px}
  .info--jug .info__title{font-size:clamp(20px,5.8vw,30px);margin:4px 0 12px}
  .info--jug .info__sub{display:none}
  .info--jug .info__num{font-size:clamp(26px,8vw,40px)}
  .info--jug .info__lab{margin-top:4px}
  .info--jug .info__grid{gap:12px 14px}
  .info--jug .info__cta{margin-top:14px}
  /* con la zona del jugador más baja, la V arriba del todo pisaría el texto: más pequeña */
  .info--jug .info__bgv{width:48%}
}