/* ===== REMEDIA — página: El Problema =====
   Solo secciones de esta página.
   Todo selector prefijado con .page-el-problema o .sec--*
   ===================================== */

/* ===== 00 · INTRO (hero) =======================================
   H1 + 2 párrafos, alineados a la izquierda — mismo criterio que
   .sec--intro de "¿Esto Es Para Ti?" (sin eyebrow). */

.sec--intro__title {
  margin-bottom: var(--sp-3);
}

.sec--intro__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-xl);
  color: var(--c-text-muted);
}

.sec--intro__subtitle + .sec--intro__subtitle {
  margin-top: var(--sp-3);
}

.sec--intro__subtitle strong {
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

/* ===== 01 · FRENOS ==============================================
   Título de 2 líneas centrado (2ª en itálica) + 2 columnas de texto
   debajo, también centradas — mismo patrón visual que .manifiesto
   de la-firma.css, pero sin la animación de "escritura".

   Anchos: la imagen de referencia trae los 2 bloques de texto
   anotados como frames de 360px de ancho (Hug) — eso sí viene medido,
   se respeta literal. El título NO trae anotación de ancho en la
   imagen: ⚠️ CONFIRMAR — se estima 640px por proporción visual
   mientras Abel confirma el valor real contra Figma. */

.sec--frenos__title {
  max-width: 640px;   /* ⚠️ CONFIRMAR: sin anotación en la imagen, ver nota arriba */
  margin-inline: auto;
  margin-bottom: var(--sp-6);
  text-align: center;
}

.sec--frenos__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
}

.sec--frenos__col {
  flex: 0 1 360px;   /* 360px medido en la imagen ("360 x 96 Hug") */
  max-width: 360px;
  text-align: center;
}

.sec--frenos__desc {
  font-family: var(--f-ui);
  font-size: var(--fs-body-l);
  color: var(--c-text-muted);
}

@media (max-width: 767.98px) {
  .sec--frenos__col {
    flex-basis: 100%;
    max-width: 460px;
  }
}

/* ===== 02 · ECOSISTEMA (las 8 dimensiones) =====================
   Título + subtítulo + diagrama a la izquierda; acordeón (componente
   compartido .valor, ver main.css) a la derecha — mismo criterio de
   columnas que .sec--valores de la-firma.css. El ítem abierto en
   itálica ya es un estado del componente (main.css), aplica también
   en La Firma. */

.sec--ecosistema__title {
  margin-bottom: var(--sp-3);
}

.sec--ecosistema__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-l);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-5);
}

.sec--ecosistema__diagram {
  width: 100%;
}

.sec--ecosistema__list {
  padding-left: var(--sp-5);
}

@media (max-width: 991.98px) {
  .sec--ecosistema__intro { margin-bottom: var(--sp-5); }
  .sec--ecosistema__list { padding-left: 0; }
}

/* ===== 03 · BANDA (degradado, acento naranja) ==================
   Mismo componente compartido .grad/.grad--banda (main.css), solo se
   sobreescriben las 4 paradas — mismo criterio que indica CLAUDE.md
   ("Abel genera los gradientes; cuando lleguen, se sobreescriben
   --g1..--g4 y nada más"). Aquí NO llegó el gradiente exportado por
   Abel todavía: ⚠️ CONFIRMAR — son 4 paradas propias, extrapoladas
   rotando el mismo criterio de luminosidad que usan las paradas verdes
   del home (negro → tono oscuro del acento → tono medio → acento
   exacto --p-naranja) para no dejar la banda sin color mientras se
   confirma el degradado real. */

.sec--banda {
  --g1: #0B0B0B;
  --g2: #2B140F;
  --g3: #8F3A1F;
  --g4: var(--p-naranja);
}