/* ============================================================
   programas.css — retos y membresías

   Los dos son lo mismo en estructura: un programa con nombre,
   una promesa y una lista de lo que trae. Cambia el compromiso
   —el reto tiene fecha, la membresía tiene vigencia— y por eso
   comparten componente y solo se distinguen por el sello.
   ============================================================ */

.programas {
  display: grid;
  gap: var(--esp-4);
  margin: var(--esp-4) 0;
}

@media (min-width: 900px) {
  .programas { grid-template-columns: repeat(2, 1fr); }
}

.programa {
  display: flex;
  flex-direction: column;
  padding: var(--esp-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-2xl);
  background: var(--color-superficie-alta);
}

/* Sello de disponibilidad. Es lo que separa un reto —que abre y
   cierra— de una membresía, que está siempre. */
.programa-sello {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  margin-bottom: var(--esp-2);
  padding: 5px 14px;
  border-radius: var(--radio-pill);
  background: color-mix(in oklab, var(--marca-camel) 22%, var(--color-superficie));
  font-size: var(--txt-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
}

.programa-sello::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radio-circulo);
  background: var(--color-acento);
}

.programa-nombre {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
  font-size: var(--txt-lg);
  line-height: 1.15;
  margin: 0 0 var(--esp-1);
}

.programa-lema {
  font-family: var(--font-titular);
  font-style: italic;
  font-size: var(--txt-base);
  line-height: 1.4;
  color: var(--color-texto-enfasis);
  margin: 0 0 var(--esp-2);
}

.programa p {
  margin: 0 0 var(--esp-2);
  font-weight: var(--peso-ligero);
  line-height: 1.7;
  color: var(--color-texto-secundario);
}

.programa-lista {
  list-style: none;
  margin: var(--esp-1) 0 var(--esp-3);
  padding: 0;
  display: grid;
  gap: 8px;
}

.programa-lista li {
  position: relative;
  padding-left: var(--esp-3);
  font-weight: var(--peso-ligero);
  line-height: 1.6;
}

.programa-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: var(--radio-circulo);
  border: 1.5px solid var(--color-acento);
}

/* El botón queda pegado abajo para que las dos tarjetas cierren
   a la misma altura aunque el texto no mida lo mismo. */
.programa-pie { margin-top: auto; }

/* ── Beneficios en rejilla, para la membresía ── */
.beneficios {
  list-style: none;
  margin: var(--esp-3) 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}

@media (min-width: 700px) { .beneficios { grid-template-columns: repeat(2, 1fr); } }

.beneficios li {
  position: relative;
  padding-left: var(--esp-3);
  font-weight: var(--peso-ligero);
  line-height: 1.6;
}

.beneficios li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-acento-oscuro);
}

/* Fechas de la convocatoria: son el dato que decide si alguien entra
   a esta temporada o espera a la siguiente, así que se destacan. */
.programa-fechas {
  margin: var(--esp-3) 0;
  padding: var(--esp-2) var(--esp-3);
  border-left: 3px solid var(--color-acento);
  background: var(--color-superficie-alta);
  border-radius: 0 var(--radio-md) var(--radio-md) 0;
  font-weight: var(--peso-cuerpo);
}