/* CARD 3 VERSIONES SECCIÓN RESULTADOS */
.program-results {
  padding: 0 0;
  background: var(--bg-100);
}

.program-results-container {
  max-width: 1284px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 24px;              /* separación entre cards */
}
/* CARD BASE */
.result-card {
  border-radius: 24px;
  padding: 28px 32px;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.08);
  background: #0076d1;         /* se sobreescribe según variante */
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 216px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

/* HOVER GENERAL */
.result-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.16);
}


/* CARD INTRO: ocupa 2 filas del grid */
.result-card--intro {
  background:var(--azul-10);
  color: #0057a4;
  /*grid-row: span 2;       ✔ se estira verticalmente */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* icono redondo arriba */
.result-card-intro-icon {
  width: 50px;
  height: 50px;  
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.result-card-intro-icon .result-icon-svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
}

.result-card-intro-title {
 color: var(--azul2-100);
  margin: 0;
}

/* en hover, aclaramos un poquito el fondo */
.result-card--intro:hover {
  background: #f0f7ff;
}

/* VARIANTE STATS */
.result-card--stat {
  background: #0076d1;
  text-align: center;
}

/* número / dato principal */
.result-number {
  
  margin: 0 0 8px;
}

/* texto */
.result-text,
.result-subtext {
  
  margin: 0;
}

/* subtexto (paréntesis) un poco más pequeño */
.result-subtext {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* hover en stats: un azul un poco más claro */
.result-card--stat:hover {
  background: #0085e6;
}

/* TABLET (≤ 992px): 2 columnas */
@media (max-width: 992px) {
  .program-results-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .result-card--intro {
    grid-row: auto;         /* deja de ocupar 2 filas */
  }
}

/* MOBILE (≤ 640px): 1 columna */
@media (max-width: 640px) {
  .program-results {
    padding: 60px 16px;
  }

  .program-results-container {
    max-width: 100%;
    grid-template-columns: 1fr;
  }

  .result-card {
    padding: 24px 20px;
  }

  .result-card-intro-title {
    font-size: 1.6rem;
  }

  .result-number {
    font-size: 1.4rem;
  }
}


/* ==============================
   RESULTADOS – VARIANTE 2 (3 / 2)
   ============================== */

.program-results--v2 {
  padding: 20px 0 20px 0;
}

.program-results-container--v2 {
  max-width: 1284px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 columnas iguales */
  gap: 24px;
  align-items: stretch;
}

/* Todas las cards de esta variante comparten la misma altura */
.program-results-container--v2 .result-card {
  min-height: 216px; /* usa el mismo valor que en la variante 1 */
}

/* Fila de arriba: intro + 2 stats (cada una ocupa 2 columnas)  */
.program-results-container--v2 .result-card--intro,
.program-results-container--v2 .result-card--stat:not(.result-card--wide) {
  grid-column: span 2;
}

/* Fila de abajo: 2 cards anchas (cada una ocupa 3 columnas) */
.program-results-container--v2 .result-card--wide {
  grid-column: span 3;
}


/* TABLET (≤ 992px): 2 columnas */
@media (max-width: 992px) {
  .program-results-container--v2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .program-results-container--v2 .result-card--intro,
  .program-results-container--v2 .result-card--stat,
  .program-results-container--v2 .result-card--wide {
    grid-column: span 1; /* todas se vuelven cards normales */
  }
}

/* MOBILE (≤ 640px): 1 columna */
@media (max-width: 640px) {
  .program-results--v2 {
    padding: 60px 16px;
  }

  .program-results-container--v2 {
    max-width: 100%;
    grid-template-columns: 1fr;
  }
}


/* ==============================
   RESULTADOS – VARIANTE 3 (2 / 2)
   ============================== */

.program-results--v3 {
  padding: 80px 0;
  
}

.program-results-container--v3 {
  max-width: 1284px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  gap: 24px;
  align-items: stretch;
}

/* misma altura para todas las cards de esta variante */
.program-results-container--v3 .result-card {
  min-height: 216px;   /* ajusta al alto de tu Figma */
}

/* TABLET (≤ 768px): 1 columna */
@media (max-width: 768px) {
  .program-results--v3 {
    padding: 60px 16px;
  }

  .program-results-container--v3 {
    max-width: 100%;
    grid-template-columns: 1fr;
  }

  .program-results-container--v3 .result-card {
    min-height: auto; /* deja que se adapte en móvil */
  }
}