/* ===================================================================
   BLOQUE RETOS — MRM TRIBAL
   Tipografías de Figma (con valores de respaldo por si faltan tokens):
     · Texto de entrada     Heading/h4/regular  32 / 40
     · Principales retos    Heading/h5/bold     20 / 28 · 700
     · Título del reto      Body/body/semibold  16 / 24 · 600
     · Descripción del reto Body/body/regular   16 / 24 · 400
   =================================================================== */

.mt-challenges {
  --mt-ch-font-heading: var(--mt-font-family-heading, "Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --mt-ch-font-body: var(--mt-font-family-body, "Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif);

  box-sizing: border-box;
  width: 100%;
  font-family: var(--mt-ch-font-body);
  color: var(--mt-color-main, #1E1E1E);
}

.mt-challenges *,
.mt-challenges *::before,
.mt-challenges *::after {
  box-sizing: border-box;
}

/* --- Texto de entrada — Heading/h4/regular ----------------------------- */
.mt-challenges .mt-challenges__intro {
  margin: 0 0 40px;
}

.mt-challenges .mt-challenges__intro,
.mt-challenges .mt-challenges__intro p,
.mt-challenges .mt-challenges__intro li {
  font-family: var(--mt-ch-font-heading) !important;
  font-size: var(--mt-font-size-h4, 32px) !important;
  line-height: var(--mt-line-height-h4, 40px) !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  color: inherit;
}

.mt-challenges .mt-challenges__intro p {
  margin: 0;
}

.mt-challenges .mt-challenges__intro p + p {
  margin-top: 16px;
}

/* --- Título del listado — Heading/h5/bold ------------------------------ */
.mt-challenges .mt-challenges__heading {
  margin: 0 0 24px;
  padding: 0;
  font-family: var(--mt-ch-font-heading);
  font-size: var(--mt-font-size-h5, 20px);
  line-height: var(--mt-line-height-h5, 28px);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--mt-color-main, #1E1E1E);
}

/* --- Retos -------------------------------------------------------------- */
.mt-challenges .mt-challenges__items {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-challenges .mt-challenges__item {
  margin: 0;
  padding: 0;
}

/* Título del reto — Body/body/semibold */
.mt-challenges .mt-challenges__title {
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--mt-ch-font-body);
  font-size: var(--mt-font-size-body, 16px);
  line-height: var(--mt-line-height-body, 24px);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

/* Descripción del reto — Body/body/regular
   Con !important porque el tema aplica tamaños a los <p> del contenido
   (por ejemplo .page-description p:first-child a 28px). */
.mt-challenges .mt-challenges__text,
.mt-challenges .mt-challenges__text p,
.mt-challenges .mt-challenges__text li {
  font-family: var(--mt-ch-font-body) !important;
  font-size: var(--mt-font-size-body, 16px) !important;
  line-height: var(--mt-line-height-body, 24px) !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  color: var(--mt-color-main, #1E1E1E);
}

.mt-challenges .mt-challenges__text p {
  margin: 0;
}

.mt-challenges .mt-challenges__text p + p {
  margin-top: 8px;
}

/* --- Separadores opcionales entre retos -------------------------------- */
.mt-challenges--rules .mt-challenges__item + .mt-challenges__item {
  padding-top: 32px;
  border-top: 1px solid #BBB9B2;
}

/* --- Mobile ------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .mt-challenges .mt-challenges__intro {
    margin-bottom: 32px;
  }

  .mt-challenges .mt-challenges__items {
    gap: 24px;
  }
}