/* M06 · Resultados (nodo 217:316). 2 columnas × 2 tarjetas de proyecto. */

.resultados {
  background: var(--color-blanco);
  padding-block: 80px;
}
.resultados__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px; /* 1216 - 2×593 */
}
.resultados__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Columnas flexibles (no fijas a 593): en desktop siguen dando 593 ((1216-30)/2),
     pero al estrechar encogen en vez de desbordar el contenedor. */
  flex: 1 1 0;
  min-width: 0;
}

/* Variante "con cabecera" (nodo 586:3392): header sobre las tarjetas, sin doble padding. */
.resultados__cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px;
}
.resultados__cabecera-texto { display: flex; flex-direction: column; gap: 24px; max-width: 593px; }
.resultados__kicker { color: var(--color-azul-100); } /* #005070 AA (decisión 33), no #0074A3 */
.resultados__titulo { color: var(--color-negro-azul); font-size: 32px; }
.resultados__desc {
  font-family: var(--font-base); font-weight: 400; font-size: 16px;
  line-height: 1.3; color: var(--color-negro-100); margin: 0; max-width: 489px;
}
.resultados__cta { flex-shrink: 0; align-self: flex-end; }

@media (max-width: 1023px) {
  .resultados__cabecera { flex-direction: column; align-items: flex-start; gap: 24px; }
  .resultados__cta { align-self: flex-start; }
}

/* Variante "listado" (distributiva, nodo 506:2869): bg #CCE3ED, subheader + grid dinámico + Cargar más. */
.resultados--listado { background: var(--color-azul-20); padding-block: 40px 80px; }
.resultados--listado .resultados__inner { display: block; }
.resultados__region { display: flex; flex-direction: column; gap: 32px; align-items: center; }
.resultados__subheader {
  align-self: stretch;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  color: var(--color-negro-azul);
  margin: 0;
}
.resultados__subheader:focus { outline: none; }
.resultados__subheader:focus-visible { outline: 2px solid var(--color-negro-azul); outline-offset: 4px; }
.resultados__grid {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.resultados__vacio { align-self: flex-start; font-family: var(--font-base); color: var(--color-negro-azul); }
.resultados__cargar { align-self: center; }

/* Móvil/tablet: una sola columna, tarjetas a ancho completo (context-mvl).
   Corta a 1023px (no 900): las 2 columnas fijas necesitaban ~1216 y antes desbordaban. */
@media (max-width: 1023px) {
  .resultados__inner { flex-direction: column; gap: 24px; }
  .resultados__col { width: 100%; flex: none; } /* reset del flex de fila para apilar sin estirar */
  .resultados__grid { flex-direction: column; gap: 24px; }
}