/* ============================================================
   FUNDACIÓN BANÚS · LA FUNDACIÓN
   Unifica en una sola página lo que antes eran /fundacion/ y
   /patronato/. Solo maquetación: ni un color ni un cuerpo se
   definen aquí, todo sale de los tokens del sistema.
   ============================================================ */

/* ---------- Entrada (misión) ----------
   Mismo par lead + relato que la home, pero aquí es la cabecera
   real de la página, así que el lead editorial abre a más cuerpo. */
.fundacion-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: var(--space-2xl);
  row-gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.fundacion-intro__lead {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: var(--lh-lead);
  color: var(--texto);
  margin: 0;
}

.fundacion-intro__relato {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.fundacion-intro__relato .cuerpo { font-size: var(--text-cuerpo); }

/* ---------- Qué hacemos ----------
   La lista numerada del sistema. En arena, el rosa cede al vino.
   El texto largo de cada línea usa el desc del propio componente. */
.labor {
  margin-top: var(--space-2xl);
}

/* Sin regla de apertura ni de cierre: la lista respira contra la
   sección en vez de quedar encajonada. Se conservan los filetes
   internos, que son los que separan un fin de otro. */
.labor > li:first-child { border-top: 0; }
.labor > li:last-child { border-bottom: 0; }

/* Los rótulos de cada fin, en la voz display (Deuterium): la misma
   familia que los rótulos de sección, pero a un cuerpo menor. Peso
   ligero (no fino del todo: a este cuerpo el 100 casi no se lee) para
   que respiren elegantes sin desaparecer. */
.labor .lista-num__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--text-cuerpo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto);
}

/* El número (01, 02…) y el rótulo son fuentes y cuerpos distintos, así
   que alineados por arriba bailaban. Los sentamos en la misma línea
   base: el índice queda a ras del rótulo. */
.labor > li {
  align-items: baseline;
}

/* ---------- Órgano de gobierno ----------
   Rejilla de retratos. El retrato es circular por el componente
   .retrato; aquí solo se resuelve el grid y la ficha de texto. */
.organo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--space-xl) var(--space-lg);
  margin-top: var(--space-2xl);
  padding: 0;
  list-style: none;
}

.miembro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

/* El retrato se ciñe a un tamaño cómodo dentro de su celda para que
   las caras no crezcan sin control en pantallas anchas. */
.miembro__foto {
  width: min(160px, 70%);
}

.miembro__nombre {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-lead);
  line-height: var(--lh-titulo);
  color: var(--texto);
  margin: 0;
  /* REGLA · fichas en fila: reservar las líneas del rótulo que envuelve.
     En una rejilla de fichas, un nombre que pasa a dos líneas empuja su
     cargo hacia abajo y descuadra la fila entera. Reservando de antemano
     el alto de dos líneas, todas las fichas comparten línea base y los
     cargos alinean, envuelva o no el nombre. Los nombres de una línea se
     centran en ese hueco para que el aire quede repartido. Si algún día
     un nombre pide tres líneas, se sube la reserva aquí. */
  min-block-size: calc(var(--lh-titulo) * 2em);
  display: flex;
  align-items: center;
  justify-content: center;
}

.miembro__cargo {
  font-family: var(--font-texto);
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--acento-display);
  margin: var(--space-xs) 0 0;
}

/* Subtítulo que separa Patronato de equipo de gestión, sin romper
   el ritmo de la página: es un titulo del sistema con aire arriba. */
.organo-grupo + .organo-grupo {
  margin-top: var(--space-3xl);
}

.organo-grupo__titulo {
  margin-bottom: 0;
  /* Versalitas de verdad: el texto va en minúscula en el HTML y aquí
     se dibuja en small-caps, sin la mayúscula alta de inicio. */
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

/* ---------- Tableta y móvil ---------- */
@media (max-width: 900px) {
  .fundacion-intro {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg);
  }
}