/* ==========================================================================
   Sección 4 — Problema + CTA banner Early Bird (PMST_ES, Figma 929:7452)
   Fila superior: header (H2 bold + lead 32) + card (gradiente rojo, 3 warnings).
   Banner CTA rojo: H2 + p20 + caja Early Bird (countdown + botón).
   ========================================================================== */

.problem__inner {
  display: flex;
  flex-direction: column;
  gap: 140px;
}

/* ---- Fila: header + card ---- */
.problem__grid {
  display: flex;
  align-items: center;
  gap: 56px;
}
.problem__header {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.problem__title {
  font-size: var(--fs-h2); /* 48px */
  font-weight: var(--fw-bold); /* Bold (override del estilo H2 en Figma) */
  line-height: var(--lh-h2);
  color: var(--color-text);
}
.problem__lead {
  font-size: var(--fs-h3); /* 32px */
  font-weight: var(--fw-regular);
  line-height: 1.15;
  color: var(--color-text);
}

.problem__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  border-radius: var(--radius-section);
  background: linear-gradient(to bottom, rgba(226, 0, 59, 0.05) 0%, rgba(255, 255, 255, 0.18) 100%);
}
.problem__card-title {
  font-size: var(--fs-h3); /* 32px */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  color: var(--color-red-brand);
}
.problem__list { display: flex; flex-direction: column; max-width: 400px; }

/* variante warn del feat-row (icono triángulo rojo, sin fondo) */
.feat-row--warn .feat-row__ic {
  background: none;
  border-radius: 0;
  color: var(--color-red-brand);
}
.feat-row--warn .feat-row__ic svg { width: 24px; height: 24px; }

/* ---- Banner CTA rojo ---- */
.cta-banner {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 40px;
  border-radius: 40px;
  background: var(--color-red-brand);
  color: #fff;
  overflow: hidden;
}
.cta-banner__copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cta-banner__title {
  font-size: var(--fs-h2); /* 48px */
  font-weight: var(--fw-light);
  line-height: var(--lh-h2);
  color: #fff;
}
.cta-banner__text {
  font-size: var(--fs-p20); /* 20px */
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: #fff;
  padding-right: 48px;
}

/* caja Early Bird dentro del banner */
.cta-banner__offer {
  flex-shrink: 0;
  width: 600px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 80px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 24px;
}
/* countdown del banner: cajas más translúcidas que el default */
.cta-banner__offer .countdown__box { background: rgba(255, 255, 255, 0.32); }
.cta-banner__deadline {
  font-size: var(--fs-p22); /* 22px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
  color: #fff;
}
/* il bottone dentro il box offerta può andare a capo e rientrare nel box */
.cta-banner__offer .btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .problem__inner { gap: 80px; }
  .problem__grid { flex-direction: column; align-items: stretch; gap: 32px; }
  .problem__list { max-width: none; }
  .cta-banner { flex-direction: column; align-items: stretch; }
  .cta-banner__offer { width: 100%; }
  .cta-banner__text { padding-right: 0; }
}

@media (max-width: 720px) {
  .problem__title { font-size: 2rem; }
  .problem__lead { font-size: 1.375rem; }
  .problem__card-title, .cta-banner__title { font-size: 1.75rem; }
  .cta-banner { padding: 28px; }
  .cta-banner__offer { padding: 28px 20px; }
  .feat-row__text { font-size: var(--fs-body); }
}