/* =====================================================================
   RANGO CREATIVE STUDIO — /equipo
   Créditos de rodaje: filas con número y filete, no tarjetas.
   ===================================================================== */

.crew-sec { padding-block: var(--space-7) var(--space-8); }

.crew { list-style: none; border-top: var(--bw) solid var(--red); }
/* La foto manda: 380px de ancho (3/4 → 507 de alto) le da presencia al wipe
   vertical y refuerza la lectura de «créditos de rodaje». El bloque de texto
   NO se ensancha: su `max-width: 52ch` es la longitud de línea óptima y
   estirarlo empeoraría la legibilidad. Decisión de Sebastian, 2026-07-10. */
.crew__item {
  display: grid;
  grid-template-columns: auto 1fr 380px auto;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: var(--bw-thin) solid var(--line);
}
.crew__n { font-family: var(--font-display); color: var(--ink-faint);
  font-size: var(--fs-400); line-height: 1; align-self: start; padding-top: 0.35em; }

.crew__name { font-size: var(--fs-500); line-height: 1; }
.crew__role { color: var(--red); font-weight: 900; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); font-size: var(--fs-100); margin-top: var(--space-2); }
.crew__bio { margin-top: var(--space-3); max-width: 52ch;
  color: var(--ink-muted); font-size: var(--fs-300); line-height: 1.6; }

/* Foto: telón que sube. Reposo = visible (GSAP anima desde inset(100% 0 0 0)). */
.crew__photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-elev);
  clip-path: inset(0 0 0 0); }
.crew__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: grayscale(1);
  transition: filter var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo); }

.crew__social { display: flex; flex-direction: column; gap: var(--space-4); }
.crew__social svg { width: 22px; height: 22px; }
/* Son ENLACES, no adorno: en reposo van a --ink-faint a opacidad plena
   (4.03:1, pasa el 3:1 que pide WCAG 1.4.11 para gráficos con significado).
   Medido: con opacity .45 el color efectivo era #373A41 → 1.71:1, invisible.
   La revelación la hacen el color y el desplazamiento, no la opacidad. */
.crew__social a { display: block; color: var(--ink-faint); transform: translateX(6px);
  transition: color var(--dur-fast) var(--ease-out-expo),
              transform var(--dur) var(--ease-out-expo); }

/* ---------------------------------------------------------------------
   PARIDAD DE FOCO — la regla importante de esta página.
   Todo lo que revela el hover de la fila lo revela también :focus-within.
   Sin esto, quien navega con teclado alcanza los enlaces de IG/email pero
   no ve ninguna respuesta visual, y la foto nunca pasa a color.
   Cualquier estado nuevo va en estos MISMOS selectores, no solo en :hover.
   --------------------------------------------------------------------- */
.crew__item:hover .crew__photo img,
.crew__item:focus-within .crew__photo img { filter: grayscale(0); transform: scale(1.04); }

.crew__item:hover .crew__social a,
.crew__item:focus-within .crew__social a { color: var(--ink); transform: translateX(0); }

.crew__item:hover .crew__name,
.crew__item:focus-within .crew__name { color: var(--red); }

.crew__item:hover .crew__n,
.crew__item:focus-within .crew__n { color: var(--red); }

/* El enlace concreto que tiene el foco, además, se marca de rojo */
.crew__social a:hover,
.crew__social a:focus-visible { color: var(--red); }

.crew__name { transition: color var(--dur-fast) var(--ease-out-expo); }
.crew__n    { transition: color var(--dur-fast) var(--ease-out-expo); }

/* Escalón intermedio: a 380px la foto estrangulaba la columna de texto hasta
   356px de caja útil (medido a 950px de viewport). Aquí cede ella, no el texto. */
@media (max-width: 1200px) and (min-width: 901px) {
  .crew__item { grid-template-columns: auto 1fr 280px auto; }
}

@media (max-width: 900px) {
  .crew__item { grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4);
    align-items: start; }
  .crew__photo { grid-column: 2; max-width: 320px; margin-top: var(--space-4); }
  .crew__social { grid-column: 2; flex-direction: row; gap: var(--space-5);
    margin-top: var(--space-4); }
}

/* Sin puntero: no hay hover que revele nada, así que las fotos van en
   color y los iconos en su sitio desde el principio. El ancho de pantalla
   no es la señal correcta aquí; la capacidad de hover sí. */
@media (hover: none) {
  .crew__social a { color: var(--ink); transform: none; }
  .crew__photo img { filter: grayscale(0); }
}