/* Programs page — kept the theme's own .clases-items card shell (organic blob-mask
   background is a distinctive, worth-keeping piece of the site's visual identity) but
   added a real per-program icon badge and a working per-card CTA link, replacing the
   fake identical schedule/self-referential title link the theme shipped with. */

.programs-intro-text {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  color: var(--text);
}

/* .clases-section carries its own hardcoded margin-top:120px in main.css, separate
   from (and in addition to) the section-padding padding-top the "pt-0" utility class
   removes — it was tuned for sitting directly under the breadcrumb banner. With the
   new programs-intro-section now in between, that 120px stacks on top of the intro's
   own spacing and reads as a huge dead gap before the cards. Cut down to something
   that still separates the two sections without the redundant whitespace. */
.clases-section {
  margin-top: 40px;
}

.clases-items .clases-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg4);
  color: var(--theme);
  font-size: 22px;
  margin-bottom: 16px;
}

/* Theme's .clases-schedule is a 3-item flex row (age / weekly / time); we only have two
   honest facts per program (age, format), so justify-content:space-between would leave
   an awkward gap on the right. flex-start + fixed gap reads intentional either way. */
.clases-items .clases-schedule {
  justify-content: flex-start !important;
  gap: 40px;
}

.clases-items .clases-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--theme);
  font-weight: 600;
  font-size: 15px;
  transition: gap 0.3s ease;
}
.clases-items .clases-link:hover {
  gap: 12px;
  color: var(--theme);
}
.clases-items .clases-link i {
  font-size: 16px;
}

/* Curriculum breakdown (5 areas) — no static design exists for this section (only
   .clases-items's own icon exists in the theme, sized for a small badge). Matches the
   80px circle-icon pattern used on the About page's .icon-items instances, but scoped
   here directly since this section isn't nested in .about-activities-wrapper. */
.curriculum-items {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  height: 100%;
  padding: 28px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--box-shadow);
}
.curriculum-items .icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  background: var(--bg4);
  color: var(--theme);
  border-radius: 50%;
}
.curriculum-items .icon i {
  font-size: 30px;
}
.curriculum-items .content h5 {
  margin-bottom: 8px;
}
.curriculum-items .content p {
  color: var(--text);
  margin: 0;
}