/* ---------------------- Program highlight band ---------------------- */
    .program-band{padding:40px 0;}
    /* ---------------------- Program highlight band ---------------------- */
.program-band{padding:40px 0;}

.program-row{
  max-width:var(--maxw);
  margin:0 auto;
  padding:20px;
  display:grid;
  gap:22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Fuerza 3 columnas en desktop */
@media(min-width:900px){
  .program-row{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Cartas */
.prog-card{
  border-radius:18px;
  padding:28px;
  color:white;
  position:relative;
  min-height:180px;
  cursor:pointer;             /* 🔥 hace la carta clicable */
  transition: transform .25s var(--smooth);
}

/* Efecto hover */
.prog-card:hover{
  transform:translateY(-6px) scale(1.02);
}

/* estilos asimétricos */
.prog-card:nth-child(1){background:var(--accent);}
.prog-card:nth-child(2){background:white; color:#333; border:2px dashed rgba(0,0,0,0.15);}
.prog-card:nth-child(3){background:var(--dark);}
.prog-card:nth-child(4){background:#b85b12;}
.prog-card:nth-child(5){background:#8b004f;}
.prog-card:nth-child(6){background:#004f72;}

.meta{display:flex; gap:10px; align-items:center;}

.icon{
  width:36px;
  height:36px;
  background:rgba(255,255,255,0.18);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

    .prog-card .meta{display:flex; gap:10px; align-items:center; font-weight:600}
    .prog-card .title{font-size:20px; margin:10px 0 6px}
    /* asymmetry */
    .prog-card:nth-child(1){background:var(--accent); transform:skewY(-1deg) translateY(6px); box-shadow:var(--shadow)}
    .prog-card:nth-child(2){background:linear-gradient(180deg,#fff,#fff); color:#333; border:2px dashed rgba(0,0,0,0.06); transform:translateY(-12px) rotate(-1deg); box-shadow:0 18px 40px rgba(0,0,0,0.06)}
    .prog-card:nth-child(3){background:var(--dark); transform:skewY(1deg) translateY(14px); box-shadow:var(--shadow)}
    .prog-grid{display:flex; gap:14px}

    /* icons flat style */
    .icon{width:36px;height:36px;background:rgba(255,255,255,0.12);border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
    /* --- Ajustes estéticos para las 3 últimas cards --- */

/* Card 4 – estilo cálido, ligera rotación */
.prog-card:nth-child(4){
  background:#b85b12;
  border-radius:22px;
  transform:rotate(-1.2deg);
  box-shadow:0 10px 18px rgba(0,0,0,0.18);
}

/* Card 5 – estilo tipo “punteado invertido” */
.prog-card:nth-child(5){
  background:#8b004f;
  border-radius:22px;
  transform:rotate(1deg);
  box-shadow:0 10px 18px rgba(0,0,0,0.15);
  border:2px dashed rgba(255,255,255,0.25);
}

/* Card 6 – estilo sobrio con textura */
.prog-card:nth-child(6){
  background:#004f72;
  border-radius:22px;
  transform:rotate(-0.6deg);
  box-shadow:0 10px 18px rgba(0,0,0,0.2);
  position:relative;
}

/* textura sutil tipo “grain” para la 6 (imita acabado artesanal) */
.prog-card:nth-child(6)::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 0);
  background-size:4px 4px;
  border-radius:inherit;
}