.impacto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); margin-top: var(--space-5); }
.impacto-card { display: flex; flex-direction: column; gap: var(--space-2); }
.progreso-barra { width: 100%; height: 3px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .09); overflow: hidden; }
.progreso-barra-relleno { height: 100%; background: var(--rule-gold); }

/* ============================================================
   Campaña activa — sin tarjeta: la cifra recaudada es el elemento gráfico y la barra
   dorada cierra el bloque. Antes iban en `.card`, y una caja con borde alrededor de
   cada colecta las volvía un formulario, no una causa.
   ============================================================ */
.impacto-campana { display: flex; flex-direction: column; gap: var(--space-3); }
.impacto-campana h3 { font-family: var(--font-display); font-size: var(--text-xl); }
.impacto-campana > p { color: var(--color-text-muted); margin: 0; max-width: 46ch; }
.impacto-cifras {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;   /* pega las cifras abajo: columnas de texto desigual se alinean */
}
.impacto-cifras strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-gold);
  line-height: 1;
}
.impacto-cifras span { color: var(--color-text-muted); font-size: var(--text-sm); }
.impacto-cifras em {
  margin-left: auto;
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: .08em;
  color: var(--color-text-muted);
}

/* Historial — línea de tiempo sobria: la fecha manda, sin caja */
.impacto-hecho {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid rgba(201, 168, 76, .3);
}
.impacto-hecho-fecha {
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.impacto-hecho h3 { font-family: var(--font-display); font-size: var(--text-lg); }
.impacto-hecho p { color: var(--color-text-muted); margin: 0; max-width: 46ch; }

/* ============================================================
   Las tres causas — sin tarjetas ni bordes: columnas separadas por una hairline
   dorada, el mismo recurso que el resto del sitio usa para dividir sin cajas.
   ============================================================ */
.causas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-5);
}
.causa {
  position: relative;
  padding-left: var(--space-6);
}
.causa + .causa::before {
  content: '';
  position: absolute;
  inset: 6% auto 6% calc(var(--space-6) * -.5);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201, 168, 76, .38) 22%, rgba(201, 168, 76, .38) 78%, transparent);
}
.causa-icono {
  display: block;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}
.causa-icono svg { width: 34px; height: 34px; }
.causa h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.causa p { color: var(--color-text-muted); margin: 0; }

@media (max-width: 820px) {
  .causas-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .causa { padding-left: 0; padding-top: var(--space-5); }
  /* En una sola columna la hairline pasa a ser horizontal, arriba de cada bloque. */
  .causa + .causa::before {
    inset: calc(var(--space-5) * -.5) 10% auto 10%;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .38) 22%, rgba(201, 168, 76, .38) 78%, transparent);
  }
}