/* =========================================================
       6. TARJETAS GENERALES DE INFORMACIÓN
    ========================================================= */
    .cards-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .info-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 30px;
      border: 1px solid var(--gray-200);
      box-shadow: 0 12px 28px rgba(11, 61, 145, 0.05);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .info-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 22px 38px rgba(11, 61, 145, 0.1);
    }

    .icon-box {
      width: 62px;
      height: 62px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--blue-100), #ffffff);
      color: var(--blue-900);
      margin-bottom: 18px;
      font-size: 1.5rem;
    }

    /* Section with subtle light background image */
    .section--bg-light {
      background:
        linear-gradient(rgba(255,255,255,0.93), rgba(245,249,255,0.93)),
        url('https://images.unsplash.com/photo-1559027615-cd4628902d4a?auto=format&fit=crop&w=1800&q=60') center/cover no-repeat;
    }

    .info-card h3 {
      color: var(--blue-900);
      font-size: 1.28rem;
      margin-bottom: 12px;
    }

    .info-card p,
    .program-card p,
    .value-card p,
    .timeline-item p,
    .contact-card p {
      color: var(--gray-700);
    }