/* ═══════════════════════════════════════════════════════════════
   EQUIPO — partials/equipo.php

   «Our Collective»: el titular, su entrada a dos columnas y la rejilla
   de tarjetas.

   La banda de cierre que va debajo en /the-team NO está aquí: vive en
   css/trabajemos.css, porque su partial lo usan ya dos páginas y /faq
   no tiene por qué cargar el CSS de unas tarjetas que no dibuja.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* La referencia pinta el cargo y el botón en ROSA. Aquí van con
     --acento, el naranja de la marca, porque un tercer color de acento
     en un sitio que ya tiene el suyo hace que la sección parezca de
     otra web. Para volver al rosa de la referencia basta cambiar esta
     línea: no hay ningún color escrito más abajo. */
  --eq-acento: var(--acento);

  /* El marco blanco del retrato y los círculos de las redes. Es la
     misma pareja gris+blanco de la FAQ y del formulario de contacto:
     superficie gris, y lo que va encima en blanco. */
  --eq-encima: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════
   1. Our Collective
   ═══════════════════════════════════════════════════════════════ */

.eq {
  background: var(--bg);
  padding: clamp(80px, 14vh, 170px) var(--hd-pad) clamp(40px, 7vh, 90px);
}

.eq-dentro {
  max-width: var(--ancho-max);
  margin: 0 auto;
}

.eq-titular {
  font-size: clamp(52px, 11vw, 168px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .92;
  color: var(--tinta-alta);
  margin-bottom: clamp(36px, 8vh, 110px);
}

/* La izquierda es una nota al margen y la derecha el texto que se lee.
   Del mismo tamaño competirían, y ganaría la izquierda solo por ir
   antes; por eso una va pequeña y en gris y la otra grande y en tinta. */
.eq-entrada {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
  gap: clamp(24px, 5vw, 90px);
  align-items: start;
  margin-bottom: clamp(48px, 9vh, 120px);
}

.eq-nota {
  max-width: 34ch;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--muted);
}

.eq-texto {
  max-width: 64ch;
  font-size: clamp(17px, 1.75vw, 27px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.42;
  color: var(--tinta-alta);
}


/* ── Las tarjetas ──────────────────────────────────────────────── */
.eq-rejilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── CUANDO NO SON CUATRO ────────────────────────────────────────
   La rejilla nació con cuatro columnas fijas porque había cuatro
   personas, y tres eran inventadas. Al quedar una sola de verdad, esa
   tarjeta ocupaba un cuarto de la fila y los otros tres cuartos
   quedaban en blanco: no se lee como una decisión, se lee como si
   faltara algo por cargar.

   El número lo escribe el PHP en data-n, así que esto se ajusta solo
   según cuánta gente haya en config/equipo.php. Por encima de cuatro
   vuelve a la rejilla de arriba y se reparten en dos filas.

   Con UNA sola no se estira la tarjeta a todo el ancho: una foto 4:5 a
   1440px de ancho mide más de metro y medio de alto y no cabe en
   pantalla. Se le pone un techo cómodo y se centra. */
.eq-rejilla[data-n="1"] {
  grid-template-columns: minmax(0, clamp(280px, 32vw, 420px));
  justify-content: center;
}
.eq-rejilla[data-n="2"] {
  grid-template-columns: repeat(2, minmax(0, clamp(280px, 32vw, 420px)));
  justify-content: center;
}
.eq-rejilla[data-n="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eq-tarjeta {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 16px);
  padding: clamp(12px, 1.2vw, 20px);
  border-radius: clamp(16px, 1.6vw, 26px);
  background: var(--gris);
  transition: background .3s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.eq-tarjeta:hover {
  background: var(--gris-on);
  transform: translateY(-4px);
}

/* ── LA TARJETA DE HUECO ─────────────────────────────────────────
   La de «Coming soon», al lado de la última persona. Tiene que leerse
   como un sitio vacío A PROPÓSITO y no como una tarjeta que no cargó,
   y eso lo hacen tres cosas:

     · el trazo DISCONTINUO. Es la convención de «aquí va algo que
       todavía no está»; con borde continuo sería una tarjeta más.
     · SIN fondo gris. Las de persona son sólidas; esta es hueca, y esa
       diferencia se ve antes de leer una palabra.
     · SIN el levantar al pasar el puntero. No lleva a ningún lado, y
       un elemento que reacciona invita a pulsarlo. */
.eq-tarjeta.es-hueco {
  background: none;
  border: 1.5px dashed var(--border);
  /* Justifica el contenido al centro del alto: la tarjeta mide lo que
     mida la de al lado —la rejilla estira— y sin esto el rótulo se
     quedaría pegado arriba. */
  justify-content: center;
}
.eq-tarjeta.es-hueco:hover {
  background: none;
  transform: none;
  border-color: var(--dim);
}

.eq-hueco-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.2vh, 14px);
  padding: clamp(20px, 3vw, 40px) 0;
  color: var(--muted);
}

.eq-hueco-mas {
  display: grid;
  place-items: center;
  width:  clamp(38px, 3.6vw, 54px);
  height: clamp(38px, 3.6vw, 54px);
  border-radius: 50%;
  border: 1.5px dashed var(--border);
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 300;
  line-height: 1;
  color: var(--dim);
}

.eq-hueco-txt {
  font-size: clamp(11px, .95vw, 13px);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}


.eq-cabeza { text-align: center; }

.eq-nombre {
  font-size: clamp(15px, 1.3vw, 20px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--tinta-alta);
}

/* En cursiva y en el color de acento, como la referencia: es lo que
   separa el cargo del nombre sin meter una línea ni un tamaño más. */
.eq-rol {
  margin-top: 3px;
  font-size: clamp(12.5px, 1.05vw, 15px);
  font-style: italic;
  font-weight: 500;
  color: var(--eq-acento);
}

/* El marco blanco alrededor del retrato: es lo que lo despega del gris
   de la tarjeta sin necesidad de un borde. */
.eq-retrato {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: clamp(12px, 1.2vw, 20px);
  background: var(--eq-encima);
  display: grid;
  place-items: center;
}

/* display: contents — el <picture> desaparece del diseño y el <img>
   pasa a ser hijo directo de su contenedor, que es lo que las reglas de
   abajo dan por hecho. Es la convención de este sitio; la estableció
   .pf-obra picture en css/portfolio.css. Aquí había tres líneas
   —display:block, width y height— haciendo lo mismo peor. */
.eq-retrato picture { display: contents; }

.eq-retrato img {
  width: 100%;
  height: 100%;
  /* cover y no contain: un retrato tiene que llenar su marco. Con
     contain, una foto más ancha deja dos franjas blancas a los lados y
     la fila de tarjetas se ve descuadrada. */
  object-fit: cover;
  /* center top: la foto ya viene encuadrada a 4:5, así que en la
     práctica no sobra nada. Se conserva por si alguna llega más alta —
     entonces lo que se recorta son los pies y no la cara. */
  object-position: center top;
  display: block;
}

/* Sin foto: las iniciales, grandes y en gris claro. Se lee como un
   hueco a propósito y no como una imagen que no cargó. */
.eq-iniciales {
  font-size: clamp(32px, 3.5vw, 56px);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--dim);
  user-select: none;
}

.eq-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.eq-redes {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.eq-redes a {
  display: grid;
  place-items: center;
  width: clamp(28px, 2.4vw, 36px);
  height: clamp(28px, 2.4vw, 36px);
  border-radius: 50%;
  background: var(--eq-encima);
  color: var(--tinta-alta);
  transition: background .25s ease, color .25s ease;
}
.eq-redes a:hover {
  background: var(--tinta-alta);
  color: var(--eq-encima);
}
/* El SVG hereda el color del enlace: por eso el icono se pinta solo al
   pasar por encima, sin una regla propia. */
.eq-redes svg {
  width: 45%;
  height: 45%;
}

.eq-perfil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(11px, .92vw, 13px);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--eq-acento);
  border-radius: 999px;
  padding: clamp(9px, .95vw, 13px) clamp(14px, 1.4vw, 22px);
  text-decoration: none;
  transition: background .25s ease;
}
.eq-perfil:hover { background: var(--tinta-alta); }

.eq-punto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   Tamaños
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  /* Cuatro tarjetas a este ancho dejan el nombre en dos renglones y el
     botón debajo de los iconos. Dos filas de dos respiran. */
  .eq-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* Las dos columnas de la entrada se apilan: la nota queda encima del
     texto que presenta, que es el orden en que se leen. */
  .eq-entrada { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3vh, 28px); }
  .eq-nota    { max-width: 52ch; }
}

@media (max-width: 520px) {
  /* Una tarjeta por fila: a dos, el retrato baja de 130px de ancho y la
     cara dentro deja de reconocerse. */
  .eq-rejilla { grid-template-columns: minmax(0, 1fr); }

  /* El botón a lo ancho, debajo de los iconos: en línea, los dos
     objetivos compiten por el mismo pulgar. */
  .eq-pie    { flex-direction: column; align-items: stretch; gap: 10px; }
  .eq-redes  { justify-content: center; }
  .eq-perfil { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .eq-tarjeta, .eq-redes a, .eq-perfil { transition: none; }
  .eq-tarjeta:hover { transform: none; }
}