/* Comités (/comites). Capa sobre sitio.css; 1rem = 10 pt del diseño. No hay
 * artboard: composición nuestra con las piezas del sitio (icono + etiqueta +
 * título, patrones decorativos, tarjetas redondeadas, paleta). Tres cortes como
 * el resto: móvil (< 768), tableta 768–1199 y ≥ 1200 px dentro de `--st-lado`.
 *
 * Lista tipográfica, sin tarjetas, retratos ni líneas (decisión del dueño
 * 2026-11-06): nombre en azul, cargo en teal, institución en tinta suave; la
 * rejilla se aprieta cuando sólo hay nombres (.cm-lista--nombres). Los tramos
 * con grupo llevan un subtítulo (.cm-grupo). */

.cm-pagina { position: relative; }
.cm-pagina > :not(.st-patron) { position: relative; z-index: 1; }
span.cm-patron { opacity: .9; }
span.cm-patron--1 { left: 21.5rem; top: -8rem; }
span.cm-patron--2 { left: -5.14rem; top: 46rem; }
span.cm-patron--3 { right: -14rem; top: -6rem; }
span.cm-patron--4 { left: -5.14rem; bottom: -4rem; }

/* ---------- Intro ---------- */

.cm-intro { padding-bottom: 3.5rem; }
.cm-intro .st-etiqueta { margin-top: 1.8rem; }
.cm-intro__titulo { max-width: 40rem; }
.cm-intro__texto { color: var(--st-tinta-2); }

.cm-saltos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.6rem;
}
.cm-saltos__enlace {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  height: 4.4rem;
  padding: 0 1.8rem;
  border: 1px solid var(--st-borde-boton);
  border-radius: 2.2rem;
  background: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--st-tinta);
}
.cm-saltos__cuenta {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.6rem;
  border-radius: 1.2rem;
  background: var(--st-verde);
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 0;
}

/* ---------- Un comité ---------- */

.cm-comite {
  position: relative;
  padding: 4rem 3rem 5rem 2.5rem;
  overflow: hidden;
}
.cm-comite--suave {
  background: var(--st-fondo-suave);
  --st-sangre: var(--st-fondo-suave);
}
.cm-comite__interior { position: relative; }
.cm-comite__cuerpo { min-width: 0; }
.cm-comite__titulo {
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 3.4rem;
  color: var(--st-azul);
}
.cm-comite__titulo::before {
  content: '';
  display: block;
  width: 5rem;
  height: 0.5rem;
  margin: 0.4rem 0 1.4rem;
  border-radius: 0.25rem;
  background: var(--st-verde);
}
.cm-comite__descripcion { margin-top: 1.4rem; color: var(--st-tinta-2); }
.cm-comite__cuenta {
  margin-top: 1.4rem;
  font-size: 1.4rem;
  line-height: 2rem;
  color: var(--st-pie-tinta);
}
.cm-comite__cuenta strong { color: var(--st-azul); }

/* Lista de integrantes */
.cm-lista {
  display: grid;
  gap: 1.6rem 3rem;
  margin-top: 2.8rem;
}
.cm-lista--nombres { gap: 0.9rem 3rem; }
.cm-persona { min-width: 0; }
.cm-persona__nombre {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.3rem;
  color: var(--st-azul);
  text-wrap: balance;
}
.cm-persona__cargo {
  margin-top: 0.2rem;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-teal);
}
.cm-persona__institucion {
  margin-top: 0.2rem;
  font-size: 1.4rem;
  line-height: 2rem;
  color: var(--st-tinta-2);
}

/* Subtítulo de grupo dentro del comité (Presidente, Coordinación Logística…) */
.cm-grupo {
  margin-top: 3.4rem;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-teal);
}
.cm-grupo:first-of-type { margin-top: 3rem; }
.cm-grupo + .cm-lista { margin-top: 1.2rem; }
.cm-lista--nombres + .cm-grupo { margin-top: 3.2rem; }

/* Sin integrantes todavía */
.cm-vacio {
  margin-top: 2.6rem;
  padding: 2.6rem 2.4rem;
  border: 1px dashed rgba(39, 151, 155, .5);
  border-radius: 1.5rem 1.5rem 3rem 1.5rem;
  background: rgba(39, 151, 155, .06);
}
.cm-vacio__titulo {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: .115em;
  text-transform: uppercase;
  color: var(--st-teal);
}
.cm-vacio__texto {
  margin-top: 0.8rem;
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: var(--st-tinta-2);
}

/* ---------- Cierre ---------- */

.cm-cierre { padding: 4.5rem 3rem 9rem 2.5rem; }
.cm-cierre__acciones {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 2.6rem;
}
.cm-cierre .st-boton { width: 100%; max-width: 30rem; }

/* ---------- Interacción (todo termina en el estado estático) ---------- */

.cm-saltos__enlace,
.cm-persona__nombre {
  transition:
    transform .22s cubic-bezier(.2, .7, .2, 1),
    translate .3s cubic-bezier(.16, 1, .3, 1),
    box-shadow .22s cubic-bezier(.2, .7, .2, 1),
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}
.cm-saltos__enlace:hover,
.cm-saltos__enlace:focus-visible {
  transform: translateY(-0.2rem);
  border-color: var(--st-tinta);
  background: var(--st-fondo-suave);
  box-shadow: 0 0.6rem 1.4rem rgba(19, 51, 62, .14);
}
/* Al pasar el cursor el nombre se tiñe de teal y se desliza un poco: vivo sin cajas. */
.cm-persona:hover .cm-persona__nombre { color: var(--st-teal); translate: 0.4rem 0; }

/* =====================================================================
   TABLETA (768–1199 px): escala del artboard de 1025 pt.
   ===================================================================== */
@media (min-width: 768px) {
  span.cm-patron--1 { left: 79rem; top: -10rem; }
  span.cm-patron--2 { left: -5.14rem; top: 30rem; }
  span.cm-patron--3 { right: -5.14rem; top: -8rem; }
  span.cm-patron--4 { left: -5.14rem; bottom: -6rem; }

  .cm-intro { padding: 4rem 2.5rem 4rem; }
  .cm-intro__titulo { max-width: 62rem; }
  .cm-intro__texto { max-width: 68rem; }

  .cm-comite { padding: 5rem 2.5rem 6rem; }
  .cm-comite__descripcion { max-width: 68rem; }

  .cm-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem 4rem;
    margin-top: 3.4rem;
  }
  .cm-lista--nombres { gap: 1.2rem 4rem; }
  .cm-grupo { margin-top: 4rem; }
  .cm-grupo + .cm-lista { margin-top: 1.6rem; }

  .cm-cierre { padding: 5rem 2.5rem 10rem; }
  .cm-cierre__acciones { flex-direction: row; }
  .cm-cierre .st-boton { width: auto; min-width: 26rem; }
}

/* =====================================================================
   LAPTOP Y ESCRITORIO (≥ 1200 px): composición propia dentro de --st-lado.
   Cada comité va en dos columnas: cabecera fija a la izquierda (título,
   descripción, cuenta) y la rejilla de integrantes a la derecha.
   ===================================================================== */
@media (min-width: 1200px) {
  span.cm-patron--1 { left: auto; right: -4rem; top: -12rem; }
  span.cm-patron--2 { left: -8rem; top: 36rem; }
  span.cm-patron--3 { right: -8rem; top: -10rem; }
  span.cm-patron--4 { left: -8rem; bottom: -8rem; }

  .cm-intro { padding: 6.4rem var(--st-lado) 5.6rem; }
  .cm-intro__titulo { max-width: 76rem; font-size: 3.6rem; line-height: 4.4rem; }
  .cm-intro__texto { max-width: 76rem; }
  .cm-saltos { margin-top: 3.2rem; }
  .cm-saltos__enlace { height: 4.8rem; padding: 0 2.2rem; font-size: 1.4rem; }

  .cm-comite { padding: 7rem var(--st-lado) 8rem; }
  .cm-comite__interior {
    display: grid;
    grid-template-columns: minmax(30rem, 36rem) minmax(0, 1fr);
    column-gap: 7rem;
    align-items: start;
  }
  .cm-comite__cabeza {
    position: sticky;
    top: 10rem; /* bajo la barra (8 rem) */
  }
  .cm-comite__titulo { font-size: 3.4rem; line-height: 4rem; }
  .cm-comite__cuenta { margin-top: 2rem; font-size: 1.5rem; }

  .cm-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.2rem 4.8rem;
    margin-top: 0.6rem;
  }
  .cm-lista--nombres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 4.8rem;
  }
  .cm-persona__nombre { font-size: 1.8rem; line-height: 2.5rem; }
  .cm-persona__cargo { margin-top: 0.4rem; }
  .cm-persona__institucion { margin-top: 0.4rem; font-size: 1.45rem; line-height: 2.1rem; }

  .cm-grupo { margin-top: 4.4rem; font-size: 1.4rem; }
  .cm-grupo:first-of-type { margin-top: 0.6rem; }
  .cm-grupo + .cm-lista { margin-top: 1.8rem; }

  .cm-vacio { margin-top: 0.4rem; padding: 3.6rem 3.2rem; max-width: 64rem; }

  .cm-cierre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4rem;
    padding: 7rem var(--st-lado) 10rem;
  }
  .cm-cierre .st-texto { max-width: 60rem; }
  .cm-cierre__acciones { margin-top: 0; }
}