/* ==========================================================================
   El staff · Staff Global Football Total, cuerpo técnico de Global Football Total
   y cuerpo técnico Levante UD Internacional, día a día y lema (se apoya en global.css). Fotos: img/para pagina el staff → assets/img/staff/
   ========================================================================== */

/* Cabecera: los enlaces de dos palabras no se parten */
.page--staff .nav a { white-space: nowrap; }

/* ---------- 01 · Hero: el cuerpo técnico en fila delante de STAFF ---------- */
.page--staff .hero { min-height: max(100svh, 720px); background: var(--navy-950); }
.hero--staff .hero__glow {
  background:
    radial-gradient(48% 60% at 72% 74%, rgba(7, 85, 217, 0.38), rgba(7, 85, 217, 0) 70%),
    radial-gradient(45% 55% at 0% 88%, rgba(224, 0, 52, 0.18), rgba(224, 0, 52, 0) 70%);
}
.staff-hero__giant {
  position: absolute; z-index: 1; right: -1vw; bottom: 4%;
  font: 900 min(30vw, 52vh)/0.78 var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(200, 212, 227, 0.2);
  pointer-events: none; user-select: none;
}
.staff-hero__col { z-index: 4; width: 46%; }
.staff-hero__eyebrow { position: relative; z-index: 4; margin-top: auto; }
.staff-hero__title {
  position: relative; z-index: 4; margin-top: clamp(16px, 2.6vh, 28px);
  font: 900 min(6.2vw, 11.5vh)/0.86 var(--font-display); text-transform: uppercase; letter-spacing: -0.016em;
}
.staff-hero__title > span { display: block; }
.staff-hero__content { margin-top: clamp(18px, 3vh, 30px); padding-top: 0; max-width: 40ch; }
.staff-hero__content .hero__lead { margin-top: 0; max-width: 40ch; }
.hero--staff .hero__foot { margin-top: auto; padding-top: clamp(20px, 4vh, 40px); }

/* Foto de grupo en dos filas (retratos de cintura para arriba): delante dos más grandes, detrás dos asomando entre ellos.
   Los cortes de la cintura quedan por debajo del borde del hero y un degradado funde la foto con la sección siguiente. */
.staff-hero__team {
  position: absolute; z-index: 3; right: calc(var(--gutter) * 0.5); bottom: 0; width: 56%;
  height: calc(100% - var(--header-h) - 2vh); pointer-events: none;
}
.staff-hero__floor { position: absolute; left: 2%; right: 2%; bottom: 0; height: 16%; background: radial-gradient(50% 60% at 50% 100%, rgba(7, 85, 217, 0.4), rgba(7, 85, 217, 0) 72%); }
.staff-hero__fig { position: absolute; display: block; translate: -50% 0; }
.staff-hero__coach { display: block; width: auto; max-width: none; height: 100%; filter: drop-shadow(0 30px 40px rgba(2, 14, 28, 0.6)); }
.staff-hero__fig--f1, .staff-hero__fig--f2 { z-index: 3; bottom: -14%; height: 96%; }
.staff-hero__fig--f1 { left: 26%; }
.staff-hero__fig--f2 { left: 63%; }
.staff-hero__fig--b1, .staff-hero__fig--b2 { z-index: 1; bottom: 4%; height: 84%; }
.staff-hero__fig--b1 { left: 45%; }
.staff-hero__fig--b2 { left: 81%; }
/* La fila de atrás se desvanece por abajo: así no se ve su corte entre los de delante */
.staff-hero__fig--b1 .staff-hero__coach, .staff-hero__fig--b2 .staff-hero__coach {
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 86%); mask-image: linear-gradient(180deg, #000 58%, transparent 86%);
}
.hero--staff::after {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 14%; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 22, 43, 0), var(--navy));
}
.staff-hero__note { right: auto; left: 30%; top: calc(var(--header-h) + 5vh); color: var(--white); }

/* ---------- 02 · Dirección ---------- */
.direccion { position: relative; padding: var(--space-xl) var(--gutter); background: var(--navy); overflow: hidden; }
.direccion__head .display { margin-top: clamp(16px, 1.6vw, 24px); }
.director { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: center; margin-top: clamp(56px, 8vw, 130px); }
.director--b .director__visual { order: 2; }
.director__visual { position: relative; aspect-ratio: 4 / 4.4; }
/* El retrato sale por encima de su panel de color (cobalto o rojo) */
.director__panel { position: absolute; left: 0; right: 0; bottom: 0; height: 76%; background: var(--cobalt); }
.director--b .director__panel { background: var(--red); }
.director__giant {
  position: absolute; z-index: 1; left: -4%; bottom: 7%;
  font: 900 clamp(4rem, 11vw, 12rem)/0.8 var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(245, 248, 252, 0.45); pointer-events: none;
}
/* El recorte se corta en el borde inferior del panel (la foto sobra por abajo para el parallax) */
.director__photo { position: absolute; z-index: 2; inset: 0; margin: 0; display: flex; align-items: flex-end; justify-content: flex-end; clip-path: inset(-40% -10% 0 -10%); }
.director__photo img { height: 100%; width: auto; max-width: 100%; margin-bottom: -9%; object-fit: contain; object-position: right bottom; }
.director__body { max-width: 54ch; }
.director__role { font: 700 0.8125rem/1 var(--font-display); letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
.director__name { margin-top: 16px; font: 900 clamp(3rem, 5.8vw, 6.4rem)/0.86 var(--font-display); text-transform: uppercase; letter-spacing: -0.015em; }
.director__name > span { display: block; }
.director__stroke { display: block; width: min(300px, 70%); height: 16px; margin-top: 12px; overflow: visible; }
.director__stroke path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.director--b .director__stroke path { stroke: var(--cobalt); }
.director__quote { margin: clamp(22px, 3vw, 36px) 0 0; font-size: clamp(1.1rem, 1.4vw, 1.35rem); line-height: 1.55; color: var(--white); text-wrap: pretty; }
.director__facts { margin-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line-soft); }
.director__facts > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.director__facts dt { font: 600 0.75rem/1.3 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--line); }
.director__facts dd { margin: 0; font: 700 1.05rem/1.25 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- 03 · Cuerpo técnico ---------- */
.tecnico { position: relative; padding: var(--space-xl) var(--gutter); background: var(--navy-800); }
.tecnico__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.tecnico__head .display { margin-top: clamp(16px, 1.6vw, 24px); }
.tecnico__lead { padding-bottom: 0.4em; }
.squad { margin-top: clamp(52px, 6vw, 96px); }
.squad__head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.squad__crest { width: 46px; height: auto; }
.squad__club { font: 800 clamp(1.5rem, 2.2vw, 2.2rem)/1 var(--font-display); text-transform: uppercase; }
.squad:not(.squad--levante) .squad__list { margin-top: clamp(40px, 5vw, 72px); }
.squad__meta { margin-top: 6px; font: 600 0.75rem/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.squad__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); margin-top: clamp(24px, 3vw, 40px); }
.coach__card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy) 100%); transition: box-shadow 0.4s linear; }
.coach:hover .coach__card { box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.45); }
.coach__num { position: absolute; z-index: 1; left: 14px; top: 8px; font: 900 clamp(3rem, 5vw, 5.4rem)/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px rgba(200, 212, 227, 0.35); }
/* El entrenador de pie sobre el círculo central */
.coach__pitch { position: absolute; left: -10%; bottom: 2%; width: 120%; height: 18%; overflow: visible; }
.coach__pitch path { fill: none; stroke: rgba(200, 212, 227, 0.32); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
/* Encuadre de rodillas para arriba: la foto sobra por abajo */
.coach__img { position: absolute; z-index: 2; left: 0; right: 0; top: 9%; margin-inline: auto; width: auto; height: 132%; max-width: none; filter: drop-shadow(0 20px 26px rgba(2, 14, 28, 0.55)); }
.coach__name { margin-top: 16px; font: 800 clamp(1.25rem, 1.6vw, 1.6rem)/1 var(--font-display); text-transform: uppercase; }
.coach__name.is-pending { color: var(--line); }
.coach__lic { margin-top: 6px; font: 600 0.75rem/1.2 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.coach__lic.is-pending { font-weight: 500; letter-spacing: 0.16em; color: var(--line); }
/* Huecos del Levante UD: silueta discontinua, a la espera de las fotos */

/* ---------- 04 · El día a día: fotos que se apilan ---------- */
.dia { position: relative; background: var(--navy); }
.dia__pin { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 96px); align-items: start; padding: var(--space-xl) var(--gutter); }
.dia__side { position: sticky; top: calc(var(--header-h) + 4vh); }
.dia__title { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(2.8rem, 5vw, 6rem); }
.dia__lead { margin-top: clamp(16px, 2vh, 24px); }
.dia__list { display: none; margin-top: clamp(20px, 3vh, 32px); border-top: 1px solid var(--line-soft); }
.dia__item { display: flex; align-items: baseline; gap: 16px; padding: clamp(8px, 1.4vh, 12px) 0; border-bottom: 1px solid var(--line-soft); font: 700 1.1rem/1.1 var(--font-display); text-transform: uppercase; color: rgba(245, 248, 252, 0.32); transition: color 0.4s linear; }
.dia__item span { font-size: 0.8125rem; letter-spacing: 0.2em; color: var(--line); transition: color 0.4s linear; }
.dia__item.is-on { color: var(--white); }
.dia__item.is-on span { color: var(--red); }
.dia__stack { display: grid; gap: 16px; }
.dia__card { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy-800); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.dia__card img { width: 100%; height: 100%; object-fit: cover; }
.dia__shade { position: absolute; inset: 0; background: var(--navy-950); opacity: 0; pointer-events: none; }
.dia__card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 12px; padding: 44px 22px 18px;
  background: linear-gradient(0deg, rgba(2, 14, 28, 0.88), rgba(2, 14, 28, 0));
  font: 800 clamp(1.05rem, 1.4vw, 1.35rem)/1.1 var(--font-display); text-transform: uppercase;
}
.dia__card figcaption span { font-size: 0.8125rem; letter-spacing: 0.2em; color: var(--red); }
/* Escritorio con movimiento: la sección se fija y las fotos se apilan una sobre otra */
.dia.is-stacked .dia__pin { align-items: center; min-height: 100svh; padding-top: calc(var(--header-h) + 3vh); padding-bottom: 5vh; }
.dia.is-stacked .dia__side { position: static; }
.dia.is-stacked .dia__list { display: block; }
.dia.is-stacked .dia__stack { display: block; position: relative; aspect-ratio: 16 / 10; }
.dia.is-stacked .dia__card { position: absolute; inset: 0; aspect-ratio: auto; }

/* ---------- 05 · Lema ---------- */
.lema { position: relative; padding: var(--space-xl) var(--gutter); background: var(--navy-950); overflow: hidden; }
.lema__title { display: grid; gap: 0.04em; margin-top: clamp(24px, 3vw, 40px); font: 900 clamp(2.3rem, 9.4vw, 11rem)/0.86 var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; }
.lema__line .fill-text__stroke { -webkit-text-stroke: 1.5px rgba(245, 248, 252, 0.45); }
.lema__line--red .fill-text__stroke { -webkit-text-stroke-color: rgba(224, 0, 52, 0.75); }
.lema__line--red .fill-text__solid { color: var(--red); }
.lema__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(32px, 5vw, 96px); align-items: end; margin-top: clamp(32px, 4vw, 60px); }
.lema__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* ---------- 03 y 04 · Fichas con retrato de cintura para arriba y sello de la licencia ---------- */
.tecnico--levante { background: var(--navy-950); }
.licencias { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 2vw, 26px); padding: 0; list-style: none; }
.licencias li { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px; box-shadow: inset 0 0 0 1px rgba(245, 248, 252, 0.28); font: 700 0.75rem/1 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.licencias b { font: 900 1.5rem/0.8 var(--font-display); letter-spacing: 0; color: var(--white); font-variant-numeric: tabular-nums; }
.squad__list--six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.coach--portrait .coach__card { aspect-ratio: 4 / 5; }
.coach--portrait .coach__num { font-size: clamp(2.2rem, 3.2vw, 3.6rem); }
.coach--portrait .coach__img { top: auto; bottom: 0; height: 90%; }
.coach--portrait .coach__name { font-size: clamp(1.1rem, 1.35vw, 1.4rem); }
/* Sello de la licencia, como un parche en la esquina de la ficha */
.coach__badge {
  position: absolute; z-index: 3; right: 10px; top: 10px; display: grid; justify-items: center; gap: 3px; padding: 6px 8px 7px;
  background: var(--white); color: var(--navy); font: 700 0.5625rem/1 var(--font-display); letter-spacing: 0.2em;
  box-shadow: 0 8px 18px -8px rgba(2, 14, 28, 0.7);
}
.coach__badge b { font: 900 1.15rem/0.9 var(--font-display); letter-spacing: 0.02em; color: var(--red-700); }

/* ---------- Pie ---------- */
.page--staff .footer__cta .display { font-size: clamp(3.2rem, 7.4vw, 8.8rem); }

/* ---------- Responsive ---------- */
/* Por debajo de 1280 px el botón de la cabecera cede su sitio para que la marca no se parta (sigue en el menú y en el pie) */
@media (max-width: 1279px) {
  .page--staff .header-actions .btn { display: none; }
}
@media (max-width: 1099px) {
  .squad__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .squad__list--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dia__pin { grid-template-columns: 1fr; }
  .dia__side { position: static; }
}

@media (max-width: 899px) {
  .hero--staff { display: flex; flex-direction: column; }
  .staff-hero__col { width: auto; min-height: 0; flex: 1 0 auto; padding-bottom: 12px; }
  .staff-hero__title { font-size: min(11.5vw, 7.2svh); }
  .staff-hero__content, .staff-hero__content .hero__lead { max-width: none; }
  .staff-hero__team { position: relative; right: auto; flex: none; width: 100%; height: clamp(260px, 42svh, 420px); }
  .staff-hero__giant { font-size: 40vw; bottom: 2%; }

  .director { grid-template-columns: 1fr; margin-top: 64px; }
  .director--b .director__visual { order: 0; }
  .director__visual { max-width: 520px; width: 100%; }
  .director__facts > div { grid-template-columns: 1fr; gap: 6px; }

  .tecnico__head { grid-template-columns: 1fr; row-gap: 20px; }
  .coach__num { font-size: 2.6rem; }
  .squad__list--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach--portrait .coach__num { font-size: 2.2rem; }

  .lema__foot { grid-template-columns: 1fr; }
}