/* ==========================================================================
   Team · índice editorial de coaches
   Escritorio: retrato grande a la izquierda (cambia al pasar por cada nombre) y nombres monumentales
   a la derecha; la barra de bronce cruza el retrato a la altura del coach activo.
   Móvil: fichas con retrato en dos columnas (todas visibles, sin depender de JS).
   ========================================================================== */
.crew { --mask: var(--bone); background: var(--bone); padding: var(--section-y) 0; }
.crew__head { row-gap: var(--s3); margin-bottom: var(--s5); }
.crew__title { font-size: var(--fs-h2); }
.crew__side { max-width: 44ch; color: var(--muted); font-size: .9375rem; }

/* Fichas (móvil primero) */
.crew__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s2); }
.crew__item { position: relative; scroll-margin-top: calc(var(--header-h) + 16px); }
.crew__fig { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-3); }
.crew__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06); transition: filter .9s var(--ease-out), transform 1.4s var(--ease-out); }
@media (hover: none) { .crew__img { filter: none; } }
.crew__row { position: relative; display: grid; grid-template-columns: 1fr; padding-top: 12px; }
.crew__n { position: absolute; top: -2.1em; left: 10px; font: 500 .75rem/1 var(--text); color: var(--bone); mix-blend-mode: difference; }
.crew__name { font-size: clamp(1.05rem, 4.8vw, 1.5rem); font-stretch: 115%; line-height: .98; text-transform: uppercase; letter-spacing: -.015em; }
.crew__name span { display: block; }
.crew__meta { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.crew__role { color: var(--bronze-deep); }
.crew__cls { display: flex; flex-wrap: wrap; gap: 0 .35em; font-size: .8125rem; line-height: 1.4; color: var(--ink); }
.crew__cls li:not(:last-child)::after { content: " ·"; color: var(--bronze-deep); }
.crew__cls--none { color: var(--muted); font-style: italic; }
.crew__count { color: var(--muted); letter-spacing: .1em; font-size: .6875rem; }
.crew__ig { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: -4px; text-decoration: none;
  font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere; }
.crew__ig .ico { flex: none; width: 16px; height: 16px; color: var(--bronze-deep); }
.crew__ig:hover span { text-decoration: underline; text-underline-offset: 3px; }
.crew__end { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: var(--s3) var(--s2);
  background: var(--ink); color: var(--bone); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.crew__end p { font: 700 clamp(1rem, 4.4vw, 1.4rem)/1.05 var(--display); font-stretch: 115%; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: var(--s1); }
.crew__end .tlink { color: var(--bone); font-size: .6875rem; }
.crew__end .tlink .ico { color: var(--bronze-hi); }

@media (max-width: 380px) {
  .crew__list { column-gap: 12px; }
  .crew__end { padding: var(--s2) 12px; }
  .crew__end .tlink { letter-spacing: .06em; }
}

/* Escritorio: índice con retrato fijo a la izquierda */
@media (min-width: 900px) {
  .crew__intro { grid-column: 1 / span 7; }
  .crew__side { grid-column: 9 / span 4; align-self: end; }
  .crew__head { margin-bottom: var(--s10); }
  .crew__list { position: relative; z-index: 0; display: block; padding-left: calc((100% - 11 * var(--col-gap)) * 5 / 12 + 5 * var(--col-gap));
    border-top: 2px solid var(--ink); }
  .crew__item { position: static; }
  /* El retrato de cada coach ocupa la columna izquierda; solo se ve el del activo */
  .crew__fig { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: calc((100% - 11 * var(--col-gap)) * 5 / 12 + 4 * var(--col-gap));
    aspect-ratio: auto; opacity: 0; transition: opacity .7s var(--ease-out); }
  .crew__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10, 10, 10, .35)); }
  .crew__img { transform: scale(1.04); }
  .crew__item.is-active .crew__fig { z-index: 1; opacity: 1; }
  .crew__item.is-active .crew__img { transform: none; }
  .crew__item:hover .crew__img, .crew__item:focus-within .crew__img { filter: none; }
  /* Sin JS: el retrato sigue al cursor gracias a :has() */
  .no-js .crew__list:has(.crew__item:hover) .crew__item.is-active:not(:hover) .crew__fig { opacity: 0; }
  .no-js .crew__item:hover .crew__fig { z-index: 1; opacity: 1; }

  .crew__row { grid-template-columns: 3.5rem 1fr; align-items: baseline; column-gap: 0; padding: 20px 0 16px var(--s4);
    border-bottom: var(--rule-light); transition: background-color .5s; }
  .crew__n { position: static; grid-row: 1 / span 2; font: 500 .8125rem/1 var(--text); color: var(--bronze-deep); mix-blend-mode: normal; }
  .crew__name { font-size: clamp(2rem, 3.5vw, 3.4rem); font-stretch: 120%; line-height: .92; letter-spacing: -.03em; color: rgba(17, 21, 24, .5);
    transition: color .5s var(--ease-out); }
  .crew__name span { display: inline; }
  .crew__item.is-active .crew__name, .crew__item:hover .crew__name, .crew__item:focus-within .crew__name { color: var(--ink); }
  .crew__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); margin-top: 12px; }
  .crew__cls { font-size: .875rem; }
  .crew__ig { margin: 0 0 0 auto; min-height: 32px; }
  /* La barra: cruza el retrato y el nombre del coach activo */
  .crew__row::after { content: ""; position: absolute; z-index: 2; bottom: -3.5px; height: 6px; right: 0;
    left: calc(-100% * 5 / 7 - var(--col-gap) * 5 / 7); background: var(--bronze);
    transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); pointer-events: none; }
  .crew__item.is-active .crew__row::after { transform: none; }
  .crew__end { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); padding: var(--s4) 0 0 calc(3.5rem + var(--s4));
    background: none; color: var(--ink); clip-path: none; }
  .crew__end p { flex: 1 1 100%; font-size: 1.25rem; margin: 0; }
  .crew__end .tlink { color: var(--ink); font-size: .8125rem; }
  .crew__end .tlink .ico { color: var(--bronze-deep); }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .crew__fig, .crew__row::after, .crew__name { transition: none; }
}