/* ==========================================================================
   Plantilla de CV de jugador — HRK Sports.
   Compartida por todos los jugadores: no se toca para sumar uno nuevo.

   Paleta del club: son las únicas variables que hay que cambiar para
   armar el CV de un jugador de otro club. Los valores de abajo son los
   de Carabobo FC (bordó + el blanco de su escudo). Un jugador puede
   además pisarlas puntualmente desde su propio bloque de datos
   (CV_DATA.club.theme), que cv.js aplica como custom properties inline
   si están presentes.

   --club-accent es el color que más resalta en la página (número sobre
   la foto, marcador en la cancha, foco de teclado): tiene que salir del
   escudo/uniforme del club, nunca del verde lima de HRK. Acá se sacó de
   assets/eze.jpg, muestreando el escudo de Carabobo FC — blanco
   (#F4F1ED) en vez del dorado del sol del escudo (#E6CC72), porque el
   blanco da mejor contraste sobre los tres tonos de bordó (15.9–17.9:1
   contra 6.4–11.3:1 del dorado; detalle en el commit).
   ========================================================================== */
:root{
  --club-deep:#2A0E19;    /* fondo de página */
  --club-base:#3A1524;    /* paneles secundarios / cancha */
  --club-mid:#6B2C41;     /* tarjetas (ficha, posición) */
  --club-light:#A35C6B;   /* acento decorativo — NO usar como texto chico: no llega a AA */
  --club-label:#D9A6B5;   /* derivado de --club-light, sí cumple AA para texto chico */
  --club-accent:#F4F1ED;  /* blanco del escudo — número, marcador y foco */

  --ink:#FFFFFF;
  --ink-soft:rgba(255,255,255,.82);
  --ink-faint:rgba(255,255,255,.6);
  --line:rgba(255,255,255,.18);

  --font-display:'Anton', sans-serif;
  --font-body:'Archivo', sans-serif;

  --radius:20px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--club-deep);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

:focus-visible{outline:2px solid var(--club-accent);outline-offset:3px;border-radius:4px}

/* ---------- estructura ----------
   Sin altura fija ni overflow:hidden: la página tiene la altura que le
   pida el contenido. La regla de "todo entra en una pantalla" venía del
   boceto original, con la mitad del contenido de hoy — con la ficha,
   las estadísticas y el encabezado ya no entraba sin cortar algo. */
.cv{
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  padding:22px clamp(16px,3vw,32px) 26px;
  gap:16px;
}
.cv__top{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  padding:6px 4px;
}
.back svg{width:16px;height:16px}
.back:hover{color:var(--ink)}

/* ---------- barra de acciones ----------
   Fila simple con gap: sumar un tercer botón (idioma, más adelante) es
   agregar otro <button class="cv-actions__btn"> acá adentro, no hay que
   rehacer nada. */
.cv-actions{
  position:relative;
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.cv-actions__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:none;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  padding:0;
}
.cv-actions__btn svg{width:18px;height:18px}
.cv-actions__btn:hover{color:var(--ink);border-color:var(--ink-soft)}

/* ---------- lista de compartir (computadora) ----------
   cv.js envuelve el botón de compartir en .cv-share para anclar la
   lista justo debajo — arriba a la derecha, así que se abre hacia
   abajo y hacia la izquierda (right:0, crece hacia adentro de la
   página, nunca se sale por el borde). Mismos colores de tarjeta,
   radio y tipografía que el resto del CV: no es un menú genérico del
   navegador. */
.cv-share{position:relative}
.cv-share__menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:2;
  margin:0;
  padding:6px;
  list-style:none;
  width:max-content;
  min-width:190px;
  max-width:calc(100vw - 32px);
  background:var(--club-mid);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}
.cv-share__menu[hidden]{display:none}
.cv-share__item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border:none;
  border-radius:9px;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.cv-share__item svg{width:18px;height:18px;flex:none;color:var(--club-label)}
.cv-share__item:hover{background:rgba(255,255,255,.08)}
.cv-share__item:focus-visible{
  background:rgba(255,255,255,.08);
  outline:2px solid var(--club-accent);
  outline-offset:-2px;
}

/* ---------- encabezado ----------
   El CV no tenía título propio: el nombre sólo vivía en chico, dentro
   de la credencial. Esto es lo primero que se lee al abrir la página.
   Sólo el nombre — el número y el club salían acá también, pero ya
   están sin repetir en otro lado (club en la ficha, número en el
   marcador de la cancha). */
.cv-header{
  flex:none;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  column-gap:18px;
  row-gap:4px;
}
.cv-header__name{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(32px,4.6vw,52px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--ink);
}

/* Columnas iguales (antes 1.1fr/1fr) y los cuatro paneles con la misma
   relación de aspecto (--panel-ar): con el mismo ancho de columna, la
   misma proporción da la misma altura sin depender de cuánto contenido
   tenga cada uno — ni de si ya cargó el video. Antes cada zona tenía su
   propia medida (la foto por aspect-ratio, la cancha y la ficha por su
   contenido, el video por sus dimensiones reales) y terminaban los
   cuatro de un tamaño distinto. */
.grid{
  flex:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:16px;
  --panel-ar:4/3;
}
.zone--photo,
.card--pitch,
.card--facts,
.zone--video{
  aspect-ratio:var(--panel-ar);
}

/* ---------- por dónde pasó (trayectoria) ----------
   Antes era una fila más de la ficha, un renglón con los clubes
   separados por puntos medios — con seis clubes (el caso de Axel
   Abet) no se leía, y era justo el primer dato que mira quien evalúa
   a un jugador. Ahora es su propio bloque de ancho completo, entre la
   grilla y la franja de contacto: tiene lugar para respirar en vez de
   competir por espacio dentro de la ficha, que además mide siempre lo
   mismo (--panel-ar) — no se podía estirar para una lista larga sin
   arriesgar que se cortara. */
.trajectory{
  flex:none;
  background:var(--club-mid);
  border-radius:var(--radius);
  padding:24px clamp(20px,3vw,34px);
}
.trajectory__label{
  margin:0 0 20px;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--club-label);
}
.trajectory__list{
  list-style:none;
  margin:0;
  padding:0;
}
/* El punto y la línea son ::before/::after del propio <li>, anclados
   con top/left y bottom/left fijos (no un cálculo de porcentaje
   contra la altura del item, que con texto de una sola línea y
   padding constante no hacía falta y resultaba frágil). El punto
   queda a una distancia fija del techo del renglón; la línea arranca
   justo debajo del punto y se extiende hasta el borde inferior del
   padding, que es exactamente donde empieza el próximo item — como
   los <li> se apilan sin gap entre ellos, ese punto coincide con el
   techo del próximo punto, y la línea queda continua. Con un solo
   club en la lista, el último item es también el primero: la regla de
   :last-child ya alcanza, sin caso especial. */
.trajectory__item{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 0 22px 24px;
  font-size:16px;
  font-weight:600;
  color:var(--ink-soft);
}
.trajectory__item:last-child{padding-bottom:0}
.trajectory__item::before{
  content:'';
  position:absolute;
  left:0;
  top:6px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--ink-faint);
}
.trajectory__item:not(:last-child)::after{
  content:'';
  position:absolute;
  left:5px;
  top:17px;
  bottom:0;
  width:1px;
  background:var(--line);
}
.trajectory__club{flex:1}
.trajectory__item--current{color:var(--ink);font-weight:700}
.trajectory__item--current::before{
  width:13px;
  height:13px;
  top:5px;
  background:var(--club-accent);
}
.trajectory__badge{
  flex:none;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--club-deep);
  background:var(--club-accent);
  padding:4px 10px;
  border-radius:999px;
}

/* ---------- franja de contacto ----------
   El cierre de la página, no un banner pegado encima: mismos colores
   de club que el resto (--club-mid, --club-accent), misma familia
   tipográfica. Pensada para quien ya vio el perfil — un club o un
   representante — no para el jugador. */
.cv-contact{
  flex:none;
  background:var(--club-mid);
  border-radius:var(--radius);
  padding:clamp(18px,3vw,28px) clamp(20px,5vw,48px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}
.cv-contact__lede{
  margin:0;
  max-width:44em;
  font-size:15px;
  line-height:1.55;
  color:var(--ink-soft);
}
.cv-contact__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  border-radius:999px;
  background:var(--club-accent);
  color:var(--club-deep);
  font-weight:700;
  font-size:15px;
  text-decoration:none;
}
.cv-contact__cta svg{width:20px;height:20px;flex:none}
@media(prefers-reduced-motion:no-preference){
  .cv-contact__cta{transition:filter .15s ease}
}
.cv-contact__cta:hover{filter:brightness(.93)}
.cv-contact__print{display:none}

.cv__foot{flex:none;display:flex;justify-content:center;padding-top:6px}
.sig{font-size:12px;color:var(--ink-faint)}
.sig strong{color:var(--ink-soft);font-weight:700}
/* El nombre es el único enlace de la frase (HRK Sports queda como
   texto). padding+margin negativos del mismo valor: el área táctil
   crece a 44px sin mover nada visualmente, ya que se cancelan en el
   layout. Subrayado propio porque el peso de .sig strong ya lo hace
   ver como texto normal, no como algo tocable. */
.sig a{color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:2px;padding:16px 4px;margin:-16px -4px;border-radius:3px;transition:color .2s}
.sig a:hover{color:var(--club-accent)}

/* ---------- zona: foto ----------
   La relación de aspecto sale de --panel-ar (compartida con los otros
   tres paneles), no de una propia. */
.zone--photo{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--club-base);
}
.zone--photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
}
/* La credencial (isCredential:true) es vertical (4/5) y el cuadrante
   ahora es más ancho que alto: si se recortara con object-fit:cover se
   comería el nombre impreso en la tarjeta. object-fit:contain la deja
   siempre entera — las franjas que sobran a los costados quedan
   pintadas con el fondo del club (el mismo --club-base del cuadrante)
   en vez de verse como un hueco. */
.zone--photo--credential img{
  object-fit:contain;
  background:var(--club-base);
}

/* ---------- tarjetas (ficha / posición) ---------- */
.card{
  background:var(--club-mid);
  border-radius:var(--radius);
  padding:20px clamp(18px,2.6vw,28px);
  display:flex;
  flex-direction:column;
}
.card__label{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--club-label);
}

/* ---------- ficha de datos ----------
   El valor pesa claramente más que la etiqueta: la etiqueta es
   referencia (chica, apagada, en ink-faint — ya no en el color de
   acento del club, que le daba demasiada presencia), el valor es el
   contenido real (más grande, más peso, blanco pleno). */
/* La trayectoria (antes una fila más acá) se fue a su propio bloque
   ("por dónde pasó", ver más abajo), así que a la ficha le quedó
   menos contenido para el mismo alto fijo (--panel-ar). En vez de
   dejar ese sobrante como un hueco abajo de la lista, flex:1 hace que
   .facts ocupe todo el alto que le sobra a la tarjeta, y
   justify-content:space-between reparte esa demasía entre las filas
   (el gap de 9px queda como piso mínimo si además hiciera falta
   achicarse) — la primera fila arranca pegada a la etiqueta y la
   última llega hasta abajo, la ficha se sigue viendo completa, no
   vacía. min-height:0 es lo que deja que, si algún día no entrara,
   overflow-y:auto pueda scrollear en vez de desbordar la tarjeta. */
.facts{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  justify-content:space-between;
  gap:9px;
  overflow-y:auto;
}
.facts li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
}
.facts__k{
  flex:none;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--ink-faint);
}
.facts__v{
  text-align:right;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
}
.facts__v--pending{
  font-size:14px;
  font-weight:400;
  font-style:italic;
  color:var(--ink-faint);
}
.facts__ig{
  text-decoration:none;
  font-weight:700;
  border-bottom:1px solid transparent;
}
.facts__ig:hover{border-bottom-color:currentColor}
.facts__note{
  border-bottom:none;
  padding-top:2px;
  font-size:12px;
  line-height:1.5;
  color:var(--ink-faint);
  display:block;
}

/* La trayectoria es lo primero que lee quien evalúa a un jugador: se
   apila (etiqueta arriba, texto abajo) en vez de ir en la misma línea
   que la etiqueta, y su texto es más grande que el resto de los
   valores — entraba apretada en un solo renglón. */
.facts li.facts__row--feature{
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.facts__v--feature{
  text-align:left;
  font-size:19px;
  line-height:1.45;
}

/* ---------- cancha / posición ----------
   La tarjeta ahora tiene una altura fija (--panel-ar), no la que le
   pida su contenido, así que el SVG (vertical, 100×150) ya no puede
   medir por ancho: con el ancho completo se iba mucho más alto que la
   tarjeta. .pitch ocupa el espacio que sobra debajo de la etiqueta y de
   las estadísticas (flex:1), y el SVG mide por alto dentro de eso —
   más chico, pero completo y con el marcador en su lugar. */
.card--pitch{gap:10px}
.pitch{display:flex;align-items:center;justify-content:center;flex:1;min-height:0}
.pitch svg{width:auto;height:100%;max-width:100%;aspect-ratio:100/150}
.pitch__turf{fill:var(--club-base)}
.pitch__line{stroke:rgba(255,255,255,.5);stroke-width:1}
.pitch__marker{fill:var(--club-accent)}
.pitch__number{
  fill:var(--club-deep);
  font-family:var(--font-display);
  font-size:9px;
}
/* Sólo para lectores de pantalla: sin esta descripción el dibujo de la
   cancha no dice nada a quien no lo ve. Oculta visualmente (no
   display:none, que también la saca del árbol de accesibilidad). */
.pitch-desc{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.pitch-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
}
.pitch-stats__item{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.pitch-stats__value{
  font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,26px);
  line-height:1;
  color:var(--club-accent);
}
.pitch-stats__label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--club-label);
}

/* ---------- video (placeholder si todavía no hay archivo) ----------
   La relación de aspecto sale de --panel-ar (compartida con los otros
   tres paneles): el cuadrante no depende de si el archivo ya cargó ni
   de su proporción real — eso lo resuelve adentro object-fit:contain,
   sin recortar ni deformar.

   .video-stage envuelve el video (antes esos hijos — video, botón de
   sonido — vivían directo en .zone--video): así, cuando hay momentos,
   el video puede ocupar menos que el 100% del cuadrante sin que la
   lista le pise el lado. Sin momentos, .video-stage con flex:1 como
   único hijo ocupa el 100% igual que antes — el cuadrante se ve
   exactamente como siempre, sin ninguna regla condicional. */
.zone--video{
  position:relative;
  display:flex;
  border-radius:var(--radius);
  background:var(--club-base);
  overflow:hidden;
}
.video-stage{
  position:relative;
  flex:1;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.zone--video video{width:100%;height:100%;object-fit:contain;display:block;background:var(--club-base)}
.video-sound{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,3,6,.6);
  border:1px solid rgba(255,255,255,.25);
  color:var(--ink);
  cursor:pointer;
}
.video-sound svg{width:18px;height:18px}
@media(prefers-reduced-motion:no-preference){
  .video-sound{transition:background .15s ease}
}
.video-sound:hover{background:rgba(10,3,6,.8)}
.video-play{
  position:absolute;
  inset:0;
  margin:auto;
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,3,6,.65);
  border:1px solid rgba(255,255,255,.3);
  color:var(--ink);
  cursor:pointer;
}
.video-play svg{width:26px;height:26px;margin-left:3px}
@media(prefers-reduced-motion:no-preference){
  .video-play{transition:background .15s ease}
}
.video-play:hover{background:rgba(10,3,6,.85)}
.zone--video.zone--pending{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px dashed var(--line);
}
.pending__icon{width:30px;height:30px;color:var(--ink-faint)}
.pending__label{
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--ink-faint);
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* ---------- momentos destacados (opcional, data.video.moments) ----------
   Botones de verdad (no un carrusel decorativo): foco visible con el
   mismo :focus-visible del resto del sitio, aria-pressed anuncia el
   activo además del color — el color solo no alcanza. */
.video-moments{
  flex:none;
  width:168px;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  overflow-y:auto;
  background:var(--club-mid);
}
.video-moments__item{
  flex:none;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  text-align:left;
  cursor:pointer;
}
@media(prefers-reduced-motion:no-preference){
  .video-moments__item{transition:background .15s ease, border-color .15s ease, color .15s ease}
}
.video-moments__item:hover{border-color:var(--ink-soft);color:var(--ink)}
/* El activo se distingue por algo más que el color (que puede fallar
   para daltonismo o pantallas B/N): borde más grueso, además del
   color de acento y de aria-pressed. */
.video-moments__item[aria-pressed="true"]{
  background:var(--club-accent);
  border-color:var(--club-accent);
  border-width:2px;
  padding:9px 11px;
  color:var(--club-deep);
  font-weight:700;
}

/* ---------- mobile: una columna ----------
   --panel-ar iguala los cuatro paneles en la grilla de dos columnas de
   escritorio; en una sola columna angosta esa misma proporción da una
   caja demasiado baja (el ancho ya no es la mitad, es casi todo el
   viewport) y la ficha no entraba — quedaba con contenido cortado
   arriba, scrolleado adentro de su propia tarjeta. Acá cada panel
   vuelve a medir por su propio contenido o por una proporción pensada
   para el ancho completo, como antes de esa medida compartida. */
@media(max-width:860px){
  .cv{padding:20px 16px 26px}
  .grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:18px;
  }
  .card--facts{order:2;aspect-ratio:auto}
  .card--pitch{order:3;aspect-ratio:auto}
  .pitch{flex:none}
  .zone--video{order:4;aspect-ratio:4/5}
  .zone--photo{order:1;aspect-ratio:4/5}

  /* Con momentos, la lista va debajo del video (no al lado — no entra
     en el ancho de celular) y el cuadrante deja de medir por
     aspect-ratio fijo: ahora es video + lista apiladas, así que mide
     por su contenido. El video conserva su propia proporción. */
  .zone--video--moments{aspect-ratio:auto;flex-direction:column}
  .zone--video--moments .video-stage{flex:none;aspect-ratio:4/5}
  .zone--video--moments .video-moments{width:auto}
}

@media(prefers-reduced-motion:no-preference){
  .back{transition:color .15s ease}
  .facts__ig{transition:border-color .15s ease}
}

/* ---------- entrada: "el nombre que se arma" ----------
   La arma cv.js (ver initIntro): un clon del nombre del encabezado, con
   la misma clase que el real (cv-header__name) para heredar su
   tipografía sin copiar nada a mano, viaja desde abajo-grande hasta
   transform:none, que por construcción cae exacto sobre el nombre real.
   Todo lo que hay acá es sólo el aspecto visual — el armado y el
   desarmado son de cv.js. */
.cv-intro{
  position:fixed;
  inset:0;
  z-index:999;
  overflow:hidden;
  background:var(--club-deep);
  cursor:pointer;
}
.cv-intro__watermark{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(.55);
  opacity:0;
  font-family:var(--font-display);
  font-size:32vw;
  line-height:1;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.5px var(--club-accent);
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}
.cv-intro__name{
  position:fixed;
  margin:0;
  display:block;
  opacity:0;
  white-space:nowrap;
  pointer-events:none;
}

/* Segunda barrera además del chequeo en JS: si por lo que sea la
   entrada llegara a crearse con esta preferencia activa, no se ve. */
@media(prefers-reduced-motion:reduce){
  .cv-intro{display:none}
}

/* ==========================================================================
   Impresión / PDF (botón "Descargar" -> window.print())
   Objetivo: una sola hoja A4, usada entera — no una versión achicada de
   la pantalla. Se arma un diseño propio para papel: foto + ficha lado a
   lado arriba (la ficha, con más contenido, manda el alto de esa fila;
   la foto se estira para igualarlo y object-fit:contain la deja
   siempre entera, nunca recortada), la cancha ocupa todo el ancho
   debajo con el diagrama y las estadísticas lado a lado (así no queda
   angosta con un vacío al costado), y el video se saca sin dejar
   ningún cuadrante vacío porque a ninguno de los tres paneles restantes
   le toca esa celda — el grid tiene su propio molde con nombres de
   área (photo/facts/pitch), no depende de la posición del video en el
   documento.

   Importante: esto NO puede depender del corte de mobile
   (@media(max-width:860px)). Se probó así en una versión anterior
   porque el ancho de A4 a 96dpi (~718px) es menor a ese corte — pero
   los navegadores no evalúan igual el ancho al imprimir: en Chrome, la
   media query de mobile se resolvió contra el ancho de la ventana
   (1440px en una prueba), no contra el de la hoja, así que el corte no
   se activaba y el grid de dos columnas de pantalla quedaba puesto tal
   cual — cancha diminuta con hueco al lado, cuadrante del video vacío.
   Por eso cada regla de layout de acá abajo es explícita, sin apoyarse
   en ninguna otra media query. */
@media print{
  @page{ size:A4; margin:10mm; }

  *{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  html,body{background:#fff}

  /* El encabezado y la firma del pie quedan directo sobre la página
     blanca (no sobre una tarjeta del color del club), así que su texto
     ya no puede ser --ink/--ink-faint (blanco, pensado para el fondo
     oscuro de pantalla) — sobre papel blanco sería invisible. */
  .cv-header__name{color:#141414}
  .sig,.sig strong{color:#4a4a4a}
  /* En papel el enlace no se toca: mismo color que el resto de la
     firma y sin subrayado, para que no quede un link roto a la vista. */
  .sig a{color:inherit;text-decoration:none;padding:0;margin:0}

  .cv-intro{display:none !important}
  .cv__top{display:none}
  .zone--video,
  .zone--video.zone--pending{display:none !important}
  .cv-contact__cta{display:none}
  .cv-contact__print{display:block}

  .cv{
    min-height:0;
    padding:0;
    display:block;
  }

  .cv-header{margin-bottom:18px}
  .cv-header__name{font-size:42px}

  /* Grid propio de impresión: dos columnas arriba (foto/ficha), la
     cancha ocupa las dos abajo. Nombrado explícito en vez de depender
     del orden del documento — así el video (sin área asignada, y
     display:none) no puede dejar una celda vacía. */
  .grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    grid-template-areas:
      "photo facts"
      "pitch pitch";
    gap:18px;
    margin-bottom:18px;
  }
  .zone--photo{grid-area:photo;aspect-ratio:auto}
  .card--facts{grid-area:facts;aspect-ratio:auto}
  .card--pitch{grid-area:pitch;aspect-ratio:auto}

  /* La ficha manda el alto de la fila de arriba (su contenido decide
     cuánto mide); la foto se estira para igualarlo (stretch, el
     comportamiento por defecto de grid) y adentro object-fit:contain
     la deja siempre entera sin importar si es vertical, horizontal o
     una credencial — nunca la recorta de forma que corte la cara. */
  .zone--photo img{object-fit:contain;background:var(--club-base)}

  .card{padding:20px 24px}
  .card__label{margin-bottom:12px;font-size:12px}

  .facts{gap:11px}
  .facts li{padding-bottom:11px}
  .facts__k{font-size:10px}
  .facts__v{font-size:15px}
  .facts__v--feature{font-size:16px;line-height:1.4}
  .facts__v--pending{font-size:13px}
  .facts__note{font-size:10.5px}

  /* La cancha es vertical (2:3): a lo ancho de la hoja se iría más
     alta que la página entera. En vez de estirarla, el diagrama y las
     estadísticas quedan lado a lado dentro de la tarjeta — el
     diagrama mide por su propio alto (no por el ancho de la
     tarjeta), las estadísticas ocupan el resto sin dejar un vacío al
     costado. Sin stats (no todos los jugadores los tienen todavía),
     :has() saca la segunda columna y el diagrama crece centrado — así
     no queda un hueco donde iban las estadísticas. */
  .card--pitch{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "label label"
      "diagram stats";
    align-items:center;
    column-gap:32px;
    row-gap:10px;
  }
  .card--pitch:has(.pitch-stats:empty){
    grid-template-columns:1fr;
    grid-template-areas:
      "label"
      "diagram";
    justify-items:center;
  }
  .card--pitch:has(.pitch-stats:empty) .pitch{justify-self:center}
  .card--pitch:has(.pitch-stats:empty) .pitch svg{height:270px}
  .card--pitch .card__label{grid-area:label;margin-bottom:0}
  .pitch{grid-area:diagram;flex:none;justify-self:start}
  .pitch svg{width:auto;height:260px;max-width:100%;aspect-ratio:100/150}
  .pitch-stats{
    grid-area:stats;
    flex-direction:column;
    align-items:flex-start;
    gap:13px;
  }
  .pitch-stats__value{font-size:22px}
  .pitch-stats__label{font-size:10px}

  /* "Por dónde pasó" en papel: se probó primero la misma línea
     vertical de pantalla, compacta — con seis clubes (Abet) igual se
     iba a una segunda hoja en los cuatro jugadores (medido generando
     el PDF real, no alcanzaba con mirar el CSS). Acá sí vuelve a una
     línea horizontal, como pedía la consigna para ese caso: los
     clubes en un renglón separados por puntos medios, el actual en
     negrita con su etiqueta — sin puntos ni línea vertical, que no
     hacen falta en una sola línea de texto. */
  .trajectory{padding:14px 20px;margin-bottom:10px}
  .trajectory__label{margin-bottom:8px;font-size:11px}
  .trajectory__list{display:block}
  .trajectory__item{
    display:inline;
    padding:0;
    font-size:11px;
    font-weight:600;
  }
  .trajectory__item::before{display:none}
  /* Mismo selector que la regla de pantalla (.trajectory__item:not
     (:last-child)::after), no sólo .trajectory__item::after — si no,
     la de pantalla le gana por especificidad aunque esté en otra
     media query, y el separador nunca aparece (pasó: el content:'' de
     pantalla seguía ganando acá adentro). */
  .trajectory__item:not(:last-child)::after{
    content:' · ';
    position:static;
    width:auto;
    height:auto;
    background:none;
  }
  .trajectory__item--current{font-weight:700}
  .trajectory__badge{
    display:inline-block;
    margin-left:5px;
    font-size:7px;
    padding:1px 6px;
  }

  .cv-contact{padding:20px 24px;gap:10px;margin-bottom:10px}
  .cv-contact__lede{font-size:12px}
  .cv-contact__print{
    margin:0;
    font-size:13px;
    font-weight:700;
    color:var(--ink);
  }

  .cv__foot{padding-top:10px}
  .sig{font-size:9px}
}