/* =========================================================================
   CD TERUEL — Ficha de jugador
   ========================================================================= */
.jg-loading { color: var(--texto-sec); padding: 4rem 0; }

/* Cabecera azul marino con foto + datos */
.jg-hero { background: var(--marino); color: #fff; position: relative; overflow: hidden; }
.jg-hero::after { content: ""; position: absolute; top: -30%; right: -10%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(200,16,46,.28), transparent 70%); pointer-events: none; }
.jg-hero__inner { position: relative; z-index: 2; padding-block: clamp(1.4rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem); }
.jg-crumb { color: rgba(255,255,255,.65); margin-bottom: 1.5rem; }
.jg-crumb a:hover { color: #fff; }
.jg-crumb .icon { opacity: .5; }

.jg-hero__grid { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
@media (max-width: 720px) { .jg-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.jg-photo { position: relative; }
.jg-photo img { position: relative; z-index: 1; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; border-radius: var(--radio-xl); background: var(--marino-500); }
/* dorsal grande arriba a la derecha de la ficha */
.jg-bignum { position: absolute; z-index: 1; top: clamp(.5rem, 2vw, 1.5rem); right: var(--gutter); font-family: "Cinzel", sans-serif; font-weight: 700; font-size: clamp(4.5rem, 12vw, 9rem); line-height: .85; color: var(--rojo-300); text-shadow: 0 4px 24px rgba(0,0,0,.3); pointer-events: none; }
@media (max-width: 720px) { .jg-bignum { font-size: clamp(3.5rem, 16vw, 6rem); } }

.jg-info { padding-bottom: .5rem; }
.jg-pos { font-family: "Barlow", sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-300); }
.jg-name { color: #fff; text-transform: uppercase; font-weight: 700; font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1; margin: .4rem 0 1.5rem; letter-spacing: .01em; }

.jg-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radio); overflow: hidden; max-width: 520px; }
@media (max-width: 420px) { .jg-datos { grid-template-columns: 1fr; } }
.jg-datos div { background: var(--marino-700); padding: .8rem 1.1rem; }
.jg-datos dt { font-family: "Barlow", sans-serif; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.jg-datos dd { font-family: "Cinzel", sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff; margin: .25rem 0 0; }

/* Cuerpo */
.jg-body { background: var(--papel); }
.jg-prose { max-width: 72ch; }
.jg-prose p { color: var(--gris-700); font-size: 1.08rem; line-height: 1.75; }
.jg-prose p + p { margin-top: 1.2rem; }
.jg-back { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.jg-back a { display: inline-flex; align-items: center; gap: .5rem; color: var(--rojo); font-weight: 700; font-family: "Barlow", sans-serif; }
.jg-back a .icon { width: 18px; height: 18px; }
.jg-back a:hover { gap: .8rem; }

/* =========================================================================
   Ficha de jugador v2: fondo oscuro degradado a granate, dorsal gigante,
   foto centrada sobre banda roja, nombre a la izquierda y datos a la derecha
   ========================================================================= */
.jg-hero2 {
  position: relative; overflow: hidden; color: #fff;
  background:
    repeating-linear-gradient(115deg, transparent 0 46px, rgba(255,255,255,.025) 46px 48px),
    linear-gradient(115deg, #0b101f 0%, #101a35 45%, #1a2a52 82%, #26407a 100%);
  min-height: clamp(420px, 46vw, 640px);
  display: flex; align-items: stretch;
}
/* dorsal gigante desvanecido tras la foto */
.jg-bignum2 {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: grid; place-items: center;
  font-family: "Cinzel", serif; font-weight: 700; line-height: 1;
  font-size: clamp(16rem, 38vw, 34rem); color: rgba(56, 90, 163, .5);
  user-select: none;
}
/* sin dorsal: escudo en líneas desvanecido */
.jg-bigescudo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("../assets/img/escudo-lineas.png") no-repeat center 22% / auto 82%;
  opacity: .12;
}
.jg-hero2__grid {
  position: relative; z-index: 3; width: 100%;
  display: grid; grid-template-columns: 1fr minmax(280px, 460px) 1fr;
  align-items: center; gap: clamp(1rem, 3vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3.5rem);
}
.jg-col--izq { align-self: start; padding-top: clamp(.5rem, 2vw, 2rem); }
.jg-escudito { width: clamp(40px, 4vw, 56px); height: auto; margin-bottom: 1.2rem; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.jg-name2 {
  color: #fff; text-transform: uppercase; font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.08; letter-spacing: .01em;
  max-width: 12ch;
}
.jg-dato-izq { margin-top: clamp(2rem, 8vw, 7rem); display: flex; align-items: baseline; gap: 1.2rem; }
.jg-dato-izq span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 600; }
.jg-dato-izq strong { font-family: "Barlow", sans-serif; font-weight: 700; font-size: 1.05rem; }

/* foto centrada, apoyada en la base del hero (pisa la banda roja) */
.jg-col--foto { align-self: end; display: flex; justify-content: center; }
.jg-photo2 { width: 100%; max-width: 440px; height: auto; display: block; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }

.jg-col--der { align-self: start; padding-top: clamp(.5rem, 2vw, 2rem); text-align: right; }
.jg-poslabel { display: block; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 700; }
.jg-posval {
  display: inline-block; margin-top: .3rem; padding-bottom: .55rem;
  font-family: "Cinzel", serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem); border-bottom: 3px solid var(--rojo);
}
.jg-tabla { margin: clamp(1.8rem, 4vw, 3.2rem) 0 0; }
.jg-tabla div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.jg-tabla div:last-child { border-bottom: 0; }
.jg-tabla dt { font-size: .8rem; color: rgba(255,255,255,.55); font-weight: 600; }
.jg-tabla dd { margin: 0; font-family: "Barlow", sans-serif; font-weight: 700; font-size: 1rem; white-space: nowrap; }

/* banda roja inferior (la foto la pisa) */
.jg-banda { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(70px, 9vw, 130px); background: var(--rojo); z-index: 2; }

/* móvil: columna única, foto entre el nombre y los datos */
@media (max-width: 860px) {
  .jg-hero2__grid { grid-template-columns: 1fr; text-align: center; gap: 1.2rem; }
  .jg-col--izq { padding-top: 1.5rem; }
  .jg-escudito { margin-inline: auto; }
  .jg-name2 { max-width: none; margin-inline: auto; }
  .jg-dato-izq { display: none; }
  .jg-col--der { text-align: center; padding-bottom: calc(60px + 1.6rem); order: 3; }
  .jg-col--foto { order: 2; }
  .jg-photo2 { max-width: 320px; }
  .jg-tabla div { justify-content: center; gap: 1rem; }
  .jg-banda { height: 60px; }
}