.programa {
  position:   relative;
  background: var(--nexo-bg);

  padding-block: var(--section-y) 0;
}

.programa__intro {
  position:              relative;
  z-index:               2;
  display:               grid;

  grid-template-columns: 0.52fr 0.28fr 0.8fr;
  column-gap:            0;
  row-gap:               clamp(var(--space-8), 5vh, var(--space-16));
  align-items:           start;
  margin-block-end:      clamp(var(--space-16), 8vh, var(--space-24));
}

.programa__title {
  grid-column:    1 / -1;
  font-family:    var(--font-heading);
  font-size:      var(--fs-6xl);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-none);
  letter-spacing: -0.01em;
  color:          var(--nexo-dark);
  margin-block-end: 0;
}

.programa__x-slot {
  grid-column:    1;
  align-self:     stretch;
  min-height:     clamp(140px, 16vw, 240px);
  position:       relative;
  pointer-events: none;
}

.programa__x-rail {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

.programa__x {
  width: clamp(140px, 16vw, 240px);
  margin-inline: auto;
  position: sticky;
  top: calc(50vh - clamp(140px, 16vw, 240px) / 2);
}
.programa__x svg { display: block; width: 100%; height: auto; filter: var(--x-relief); }
.programa__x path            { fill: var(--nexo-dark); }
.programa__x path:last-child { fill: var(--nexo-bg); }

.programa__lead {
  grid-column:    3;
  font-family:    var(--font-heading);
  font-size:      var(--fs-lg);
  line-height:    var(--lh-base);
  letter-spacing: 0;
  color:          var(--nexo-dark);
}
.programa__lead p { margin-block-end: var(--space-8); max-width: 42ch;}

.programa__cta,
.programa-card__cta {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  min-height:     2.5rem;
  font-family:    var(--font-heading);
  font-size:      var(--fs-sm);
  font-weight:    var(--fw-semibold);
  letter-spacing: 0;
  padding:        var(--space-3) var(--space-8);
  border-radius:  2px;
  background:     #B200E3;
  color:          var(--nexo-cream);
}

.programa__cards {
  position:       relative;
  z-index:        1;
  display:        flex;
  flex-direction: column;
  gap:            clamp(var(--space-12), 6vh, var(--space-24));
  max-width:      var(--container-max);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
}

.programa-card {
  position:      sticky;
  top:           0;

  z-index:       calc(var(--i) + 1);
  display:       grid;

  grid-template-columns: 0.52fr 1fr 0.08fr;
  align-items:   center;

  min-height:    clamp(31rem, 20rem + 19vw, 39rem);
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
}

.programa-card__panel {
  grid-column: 2;
}

.programa-card__media {
  overflow: hidden;
  /* line-height/font-size 0 evita cualquier hueco de baseline del <picture>
     inline: la imagen y el cuerpo quedan SIEMPRE pegados, sin que se vea el
     marco/fondo entre ambos. */
  line-height: 0;
  font-size: 0;
}
.programa-card__media picture { display: block; }
.programa-card__media img {
  display: block;
  vertical-align: bottom;
  width:   100%;
  height:  auto;
  aspect-ratio: 840 / 258;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.programa-card__media:hover img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .programa-card__media img { transition: none; }
  .programa-card__media:hover img { transform: none; }
}

.programa-card__body {
  padding: clamp(1.25rem, 1.8vw, 1.75rem);
}

.programa-card__title {
  font-family:    var(--font-heading);
  font-size:      var(--fs-2xl);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-tight);
  letter-spacing: -0.01em;
  margin-block-end: var(--space-3);
}

.programa-card__text {
  font-family:    var(--font-heading);
  font-size:      var(--fs-md);
  font-weight:    var(--fw-regular);
  line-height:    var(--lh-snug);
  letter-spacing: -0.005em;
  max-width:      none;
  margin-block-end: var(--space-5);
}

.programa-card--frame-green  { background: #29E5A0; }
.programa-card--frame-purple { background: #B200E3; }
.programa-card--frame-cyan   { background: #0CF2FF; }
.programa-card--frame-yellow { background: #F2E35D; }
.programa-card--frame-red    { background: #FF3151; }

/* Card sin imagen: no se "marca" con marco de color. Sin fondo de marco y sin
   padding para que el panel (el cuerpo de color) llene la card sin dejar borde.
   El panel pasa a ocupar todo el ancho. */
.programa-card.programa-card--no-image {
  background: transparent;
  padding: 0;
  grid-template-columns: 1fr;
}
.programa-card--no-image .programa-card__panel {
  grid-column: 1 / -1;
}

.programa-card__body--green  { background: #29E5A0; color: var(--nexo-dark); }
.programa-card__body--purple { background: #B200E3; color: var(--nexo-cream); }
.programa-card__body--cyan   { background: #0CF2FF; color: var(--nexo-dark); }
.programa-card__body--yellow { background: #F2E35D; color: var(--nexo-dark); }
.programa-card__body--red    { background: #FF3151; color: var(--nexo-cream); }

.programa-card__cta--purple { background: #B200E3; color: var(--nexo-cream); }
.programa-card__cta--yellow { background: #F2E35D; color: var(--nexo-dark); }
.programa-card__cta--cyan   { background: #0CF2FF; color: var(--nexo-dark); }
.programa-card__cta--red    { background: #FF3151; color: var(--nexo-cream); --btn-reveal: var(--nexo-purple); --btn-reveal-fg: var(--nexo-bg); }
.programa-card__cta--green  { background: #29E5A0; color: var(--nexo-dark); }

/* Mobile + tablet: las cards van a todo el ancho de la pantalla (100%),
   sin el max-width del contenedor ni los gutters laterales. */
@media (max-width: 1024px) {
  .programa__cards {
    max-width:      none;
    padding-inline: 0;
  }
}

@media (max-width: 768px) {
  /* Intro: la X a la izquierda y el texto AL LADO (a la derecha). El título
     ocupa todo el ancho arriba. minmax(0,1fr) en la 2ª columna evita que el
     texto se desborde. */
  .programa__intro {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(0.875rem, 4vw, 1.5rem);
    align-items: start;
  }

  .programa__title { grid-column: 1 / -1; }

  .programa__x-slot {
    grid-column: 1;
    min-height: 0;
  }

  .programa__x-rail {
    position: static;
    height: 100%;
  }

  .programa__x {
    width: clamp(72px, 22vw, 104px);
    margin-inline: 0;
    top: clamp(4.5rem, 12vh, 6.5rem);
  }
  .programa__lead { grid-column: 2; min-width: 0; }
  .programa__lead p { max-width: 100%; }

  /* En mobile las cards se siguen apilando (sticky) igual que en desktop,
     pero en una sola columna y con el alto/espaciado ajustados a la pantalla.
     Se conserva position:sticky + top:0 de la regla base. */
  .programa__cards {
    gap: 0;
  }

  .programa-card {
    grid-template-columns: minmax(0, 1fr);
    /* La card se ajusta a su contenido: el frame (color) deja el MISMO espacio
       arriba y abajo del panel (padding-block simétrico). Antes ocupaba toda la
       pantalla (100svh) y el sobrante caía abajo → asimétrico y sin sentido. */
    min-height: auto;
    align-items: start;
    padding: clamp(1.5rem, 6.5vw, 2rem);
    padding-block: 3.5rem;
  }

  .programa-card__panel { grid-column: 1; min-width: 0; }

  .programa-card__media img {
    max-width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 258px;
  }

  .programa-card__body {
    padding: clamp(1.25rem, 5vw, 1.75rem);
  }
}