/* === FIX 1: Limitar alturas iguales SOLO al PROGRAMA (no al CV) === */
/* Anula reglas globales que estiran todas las cards */
.cv-program.cv-dark .cv-card .cv-media,
.cv-program.cv-dark .cv-card .cv-photo-frame,
.cv-program.cv-dark .cv-card .cv-photo{
  /* reset de estiramientos previos */
  height:auto; min-height:0;
}


.cv-program.cv-dark .cv-agenda .cv-photo-frame{
  flex:1 1 auto; height:100%; min-height:100%;
}
.cv-program.cv-dark .cv-agenda .cv-photo{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
}

/* === FIX 2: CV con imagen completa y altura natural (sin forzar) === */
.cv-program.cv-dark .cv-instructor{ align-items:start !important; }
.cv-program.cv-dark .cv-instructor .cv-media{
  display:block !important; align-self:start !important;
  height:auto !important; min-height:0 !important;
}
.cv-program.cv-dark .cv-instructor .cv-photo-frame{
  height:auto !important; min-height:0 !important;
  border:2px solid transparent; border-radius:18px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)) padding-box,
    conic-gradient(from 180deg, var(--pink), var(--blue), var(--pink)) border-box;
}
.cv-program.cv-dark .cv-instructor .cv-photo{
  width:100%; height:auto !important;
  object-fit:contain !important; object-position:center !important;
  transform:none !important; display:block; border-radius:inherit;
}
.cv-program.cv-dark .cv-instructor .cv-scan{ inset:2px; border-radius:16px; }

/* Mobile: sigue natural, sin igualar alturas */
@media (max-width:960px){
  .cv-program.cv-dark .cv-instructor .cv-media,
  .cv-program.cv-dark .cv-instructor .cv-photo-frame,
  .cv-program.cv-dark .cv-instructor .cv-photo{
    height:auto !important; min-height:0 !important;
  }
}

/* 0) Clipa el contenido al borde redondeado de la card */
.cv-program.cv-dark .cv-card{
  overflow: hidden; /* ← evita que la imagen se vea más grande que la tarjeta */
}

/* 1) PROGRAMA — Desktop: la imagen no supera la card */
@media (min-width: 961px){
  /* Asegura que el contenedor de imagen llena su columna, sin crecer más */
  .cv-program.cv-dark .cv-agenda .cv-media{
    align-self: stretch;
    height: 100%;
    overflow: hidden; /* guardaespaldas extra */
  }
  .cv-program.cv-dark .cv-agenda .cv-photo-frame{
    height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;  /* anula ratios previos */
    overflow: hidden;
  }
  .cv-program.cv-dark .cv-agenda .cv-photo{
    width: 100%;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
    object-position: center 40%;
    transform: none; /* evita que el hover la “saque” del frame */
  }
}

/* 2) PROGRAMA — Mobile: tamaño amable (no desborda) */
@media (max-width: 960px){
  .cv-program.cv-dark .cv-agenda{
    grid-template-columns: 1fr;
  }
  .cv-program.cv-dark .cv-agenda .cv-copy{ order: 1; }
  .cv-program.cv-dark .cv-agenda .cv-media{ order: 2; margin-top: .75rem; }

  .cv-program.cv-dark .cv-agenda .cv-photo-frame{
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 42vh !important;
    overflow: hidden;
  }
  .cv-program.cv-dark .cv-agenda .cv-photo{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center 40%;
    transform: none;
  }
}

/* 3) Por si queda algún ratio viejo colándose, neutralízalo siempre */
.cv-program.cv-dark .cv-agenda .cv-photo-frame{ max-width: 100%; }
.cv-program.cv-dark .cv-agenda .cv-photo{ display: block; }


/* BEFORE: solo orbes, sin líneas */
.cv-program.cv-dark .cv-bg::before,
.cv-program .cv-bg::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(40vmax 28vmax at 20% 24%, rgba(56,180,213,.20), transparent 55%),
    radial-gradient(36vmax 24vmax at 80% 76%, rgba(251,94,147,.18), transparent 60%) !important; /* ← sin repeating */
  background-repeat: no-repeat !important;
  animation: cvOrbs 18s ease-in-out infinite alternate;
  opacity:.9;
}

/* AFTER: aurora suave, también sin líneas */
.cv-program.cv-dark .cv-bg::after,
.cv-program .cv-bg::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 700px at 15% 20%, rgba(56,180,213,.16), transparent 60%),
    radial-gradient(1100px 650px at 85% 80%, rgba(251,94,147,.14), transparent 65%) !important; /* ← sin repeating */
  background-repeat: no-repeat !important;
  background-size: 140% 140%, 140% 140% !important;
  background-position: 0% 0%, 100% 100% !important;
  mix-blend-mode: screen;
  filter: blur(2px);
  animation: auroraDrift 16s ease-in-out infinite alternate;
}

/* En caso de que alguna regla use background-image acumulativa,
   borramos cualquier capa residual de repeating-linear-gradient */
.cv-program .cv-bg::before,
.cv-program .cv-bg::after{
  /* fuerza a NO tener patrones de líneas heredados */
  box-shadow: none !important;              /* por si lo simulaban con sombras */
}

/* Animaciones (por si no estaban definidas al final) */
@keyframes cvOrbs{
  from{ transform: translate3d(-1.2%,-.8%,0) }
  to  { transform: translate3d( 1.2%, .8%,0) }
}
@keyframes auroraDrift{
  to{ background-position: 8% 6%, 92% 94%; filter: blur(3px) }
}

/* ================================
 /* ================================
   MOBILE — Centrar COMPLETAMENTE la sección PROGRAMA
   ================================ */
@media (max-width: 960px){
  /* 1) La tarjeta PROGRAMA en sí, centrada y con ancho controlado */
  .cv-program.cv-dark .cv-agenda{
    /* la .cv-agenda es tu card del programa */
    width: min(860px, 100%);
    margin-inline: auto !important;   /* centra la card */
    grid-template-columns: 1fr;       /* una sola columna */
    justify-items: center;            /* centra hijos (texto/foto) en el grid */
    align-items: start;
    text-align: center;               /* títulos y párrafos centrados */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Columna de TEXTO: bloque centrado con ancho legible */
  .cv-program.cv-dark .cv-agenda .cv-copy{
    width: min(720px, 100%);
    margin-inline: auto !important;   /* centra el bloque de texto */
    text-align: center;               /* centra títulos y subtítulos */
  }

  /* Listas dentro del texto: que no “empujen” a la derecha */
  .cv-program.cv-dark .cv-agenda .cv-list{
    width: min(720px, 92%);
    margin: .35rem auto 0 auto;       /* centro */
    padding-left: 0 !important;       /* quita sangría extra */
    list-style-position: inside;      /* viñetas alineadas al centro del bloque */
    text-align: left;                 /* mejor lectura de ítems */
  }

  /* Timeline (horarios): bloque centrado y columnas proporcionadas */
  .cv-program.cv-dark .cv-agenda .cv-timeline{
    width: min(720px, 92%);
    margin: .5rem auto 0 auto;        /* centro */
  }
  .cv-program.cv-dark .cv-agenda .cv-timeline li{
    grid-template-columns: 78px 1fr;  /* chip de hora + texto */
    align-items: start;
  }

  /* 3) Columna de IMAGEN: centrada de verdad */
  .cv-program.cv-dark .cv-agenda .cv-media{
    order: 2;                         /* imagen debajo del texto */
    width: 100%;
    display: flex;
    justify-content: center;          /* centra el marco dentro */
    justify-self: center !important;  /* centra el grid-item */
    margin-top: .75rem;
  }
  .cv-program.cv-dark .cv-agenda .cv-photo-frame{
    width: min(680px, 100%) !important;
    margin-inline: auto !important;   /* marco centrado */
    aspect-ratio: 16 / 10 !important; /* proporción amable en móvil */
    max-height: 42vh !important;
    overflow: hidden;
  }
  .cv-program.cv-dark .cv-agenda .cv-photo{
    width: 100%;
    height: 100% !important;
    display: block;
    object-fit: cover;
    object-position: 50% 50% !important; /* centrada exacta */
    transform: none !important;           /* sin desplazamientos por zoom */
  }

  /* 4) CTA del PROGRAMA bien centrado y ancho cómodo */
  .cv-program.cv-dark .cv-cta{
    display: flex; justify-content: center;
  }
  .cv-program.cv-dark .cv-cta .btn-primary{
    width: min(420px, 92%);
    justify-content: center;
  }
}

/* Phones muy chicas: un pelín más alto el marco para que “respire” */
@media (max-width: 420px){
  .cv-program.cv-dark .cv-agenda .cv-photo-frame{
    aspect-ratio: 16 / 11 !important;
  }
}