/* =======================================================
   UTEGRA — Detalle de Programa (CSS unificado 2025)
   Paleta institucional + estructura visual estandarizada
   Autor: Edgar Delao
======================================================= */

/* =======================================================
   PALETA INSTITUCIONAL
======================================================= */
:root{
  --azul: #273375;          /* Azul oscuro principal */
  --azul-cta: #328ABB;      /* Azul claro institucional */
  --azul-osc: #1F2C45;      /* Azul petróleo */
  --gris: #ABABAD;          /* Neutro 1 */
  --gris-borde: #C1C1C3;    /* Neutro 2 */
  --chip: #D8D9DA;          /* Neutro 3 */
  --verde: #23ca60;
  --verde-osc: #20b356;
  --naranja: #ff7a00;
  --negro: #000000;
  --blanco: #FFFFFF;
  --beige: #F5F5DC;
}

/* =======================================================
   BASE GLOBAL
======================================================= */
html,body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--negro);
  overflow-x:hidden;
  background:var(--blanco);
}

/* =======================================================
   CONTENEDOR PRINCIPAL + GRID
======================================================= */
.programa-detalle{
  padding: 120px 20px 60px;
  background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 60%);
}
.container{ max-width:1200px; margin: 0 auto; box-sizing:border-box; }
.programa-detalle .container{ max-width: 1360px; }
.programa-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
  padding: 30px 0 80px;
  max-width: 1320px !important;
  width: 100%;
  margin: 0 auto !important;
}
@media (min-width: 1600px){
  .programa-grid{ max-width: 1320px !important; }
}

/* La columna izquierda (breadcrumb + modalidades) acompaña al scroll
   mientras el usuario lee la info larga de la derecha — rebalancea la página
   ahora que quitamos la foto principal. */
.programa-img{
  position: sticky;
  top: 100px;             /* deja espacio para el header fijo */
  align-self: start;
}
@media (max-width: 992px){
  .programa-img{ position: static; }
}

@media (max-width:768px){
  .programa-grid{ display:flex !important; flex-direction:column; gap:18px; }
  .programa-info{ order:1; text-align:left !important; }
  .programa-img{ order:2; }
}

/* =======================================================
   COLUMNA IZQ (Breadcrumb + Imagen + Modalidades)
======================================================= */

/* === Breadcrumb elegante (sustituye al botón "Regresar" chafa) === */
.breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:6px;
  font-size:.8rem;
  margin:0 0 14px;
  color: #5a6478;
}
.breadcrumb a{
  color: #5a6478;
  text-decoration:none;
  font-weight:500;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 2px;
  border-radius:4px;
  transition: color .2s;
}
.breadcrumb a:hover{ color: var(--azul); }
.breadcrumb a i{ font-size:.8rem; }
.bc-sep{ color: var(--gris); font-weight:500; opacity:.7; }
.bc-current{
  color: var(--azul);
  font-weight:600;
}

/* === Imagen con card === */
.img-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(39,51,117,.15);
  margin-bottom:24px;
  transition: transform .35s, box-shadow .35s;
}
.img-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(39,51,117,.22);
}
.img-card img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  margin:0 !important;
  border-radius:0 !important;
}

/* === Título de modalidades === */
.modalidades-title,
.programa-img h2{
  margin:0 0 12px;
  color: var(--azul);
  font-weight:700;
  font-family:"Poppins",sans-serif;
  font-size:1.05rem;
  display:flex; align-items:center; gap:8px;
}
.modalidades-title i,
.programa-img h2 i{ color: var(--azul-cta); }

/* === Selector de modalidad — como lo teníamos antes en desktop === */
.selector-modalidad{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 0 0 16px;
}
.selector-modalidad button{
  background: #f5f7fb;
  border: 1px solid transparent;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  color: var(--azul-osc);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.selector-modalidad button i{
  color: var(--azul-cta);
  font-size: .9rem;
  transition: color .2s;
}
.selector-modalidad button:hover{
  background: #e9eef5;
  color: var(--azul);
}
.selector-modalidad .activo,
.selector-modalidad .activo:hover{
  background: var(--azul-cta);
  color: #fff;
  border-color: var(--azul-cta);
}
.selector-modalidad .activo i{ color: #fff; }
.selector-modalidad .disabled{
  background: #f0f0f0; color: #999; cursor: not-allowed;
}

/* === Horarios — grid 2x2 compacto === */
.horario{
  margin: 6px 0 18px;
  padding: 0;
  background: transparent;
  border: 0;
}
.horario-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;        /* 2 columnas: reduce scroll ~50% */
  gap: 8px;
}
.horario-card{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
  min-width: 0;
}
.horario-card:hover{
  border-color: var(--azul-cta);
  box-shadow: 0 4px 12px rgba(39,51,117,.08);
}
.horario-card.horario-destacado{
  background: linear-gradient(135deg, rgba(50,138,187,.08), rgba(39,51,117,.04));
  border-color: var(--azul-cta);
}
/* Si es la única card (caso "En línea"), ocupa ancho completo */
.horario-card.horario-destacado:only-child{
  grid-column: 1 / -1;
}
.horario-icon{
  flex-shrink: 0;
  width: 34px; height: 34px;
  background: rgba(50,138,187,.12);
  color: var(--azul-cta);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: .92rem;
}
.horario-card.horario-destacado .horario-icon{
  background: var(--azul-cta);
  color: #fff;
}
.horario-info{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
  min-width: 0;                            /* permite que el texto se trunque/wrap */
}
.horario-info h3{
  margin: 0;
  font-size: .85rem;
  color: var(--azul);
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  display: flex; align-items: center; gap: 6px;
}
.horario-dias{
  font-size: .72rem;
  color: var(--azul-cta);
  font-weight: 600;
  letter-spacing: .02em;
}
.horario-time{
  font-size: .76rem;
  color: var(--azul-osc);
  opacity: .85;
}
.horario-badge{
  background: var(--azul-cta);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* En pantallas muy chicas, vuelve a 1 columna para legibilidad */
@media (max-width: 420px){
  .horario-grid{ grid-template-columns: 1fr; }
  .horario-card.horario-destacado{ grid-column: auto; }
}

@media (max-width:768px){
  .programa-img{ margin-top: -10px; }
  .selector-modalidad{ grid-template-columns: 1fr; }
}

/* =======================================================
   HORARIOS
======================================================= */
.horario{
  margin:6px 0 18px; padding:12px 14px; background:#f9fbff; border:1px solid #e9f1ff; border-radius:10px;
}
.horario ul{ margin:0; padding-left:18px; }
.horario li{ line-height:1.45; margin:6px 0; }
.oculto{ display:none; }

/* =======================================================
   COLUMNA DERECHA (Información)
======================================================= */
.titulo-con-flecha{ margin-bottom:22px; }

.prog-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 12px;
}
.prog-eyebrow::before{
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--azul-cta);
}

/* Lead descriptivo bajo el título */
.prog-lead{
  font-size: 1.02rem;
  color: var(--azul-osc);
  line-height: 1.55;
  margin: 10px 0 14px !important;
  opacity: .9;
  text-align: left !important;
}


/* Highlight del título: "4 meses" en celeste */
.titulo-con-flecha :is(h1, h2) .hl{
  color: var(--azul-cta);
  position: relative;
  white-space: normal;
}

/* Card "¿Qué es CENEVAL?" — explicación clave para quien no lo conoce */
.que-es-card{
  display: flex;
  gap: 14px;
  background: linear-gradient(135deg, rgba(50,138,187,.08), rgba(39,51,117,.04));
  border: 1px solid rgba(50,138,187,.25);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 18px 0 16px;
}
.que-es-icon{
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--azul-cta);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.que-es-body{ flex: 1; }
.que-es-body h2{
  margin: 0 0 6px;
  color: var(--azul);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
}
.que-es-body p{
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--azul-osc);
  text-align: left;
}

.titulo-con-flecha :is(h1, h2){
  font-family: "Montserrat", sans-serif;
  font-size: 2.6rem;
  line-height: 1.1;
  margin: 0 0 20px;
  color: var(--azul);
  font-weight: 800;
  letter-spacing: -0.8px;
}

/* =======================================================
   HERO — Datos clave del programa (lista de definiciones)
   2x2 por defecto; 4 en fila cuando la columna mide >= 560px
======================================================= */
.titulo-con-flecha{ container-type: inline-size; }
.prog-facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 20px 0 22px;
  padding: 4px 0;
  background: #f7f9fc;
  border: 1px solid #e3e8f1;
  border-radius: 14px;
}
.prog-fact{ min-width: 0; padding: 12px 16px; }
.prog-fact:nth-child(even){ border-left: 1px solid #e3e8f1; }
.prog-fact:nth-child(n+3){ border-top: 1px solid #e3e8f1; }
.prog-fact dt{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5a6478;
}
.prog-fact dt i{ color: var(--azul-cta); font-size: .85rem; width: 14px; text-align: center; }
.prog-fact dd{
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--azul);
  overflow-wrap: break-word;
}
.prog-fact--inicio dd strong{ font-weight: 800; }
/* En teléfonos (<=768px) siempre 2x2 */
@media (min-width: 769px){
  @container (min-width: 560px){
    .prog-facts{
      grid-template-columns: minmax(0,.8fr) minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr);
    }
    .prog-fact:nth-child(n+3){ border-top: 0; }
    .prog-fact + .prog-fact{ border-left: 1px solid #e3e8f1; }
  }
}

/* CTAs del hero (reutilizan .js-open-wa y el enlace de becas) */
.prog-hero-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 6px;
}
.prog-cta{
  flex: 1 1 210px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.prog-cta--primary{
  background: var(--azul);
  color: #fff;
  box-shadow: 0 8px 20px rgba(39,51,117,.22);
}
.prog-cta--primary:hover{
  background: #1d275c;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(39,51,117,.3);
}
.prog-cta--secondary{
  background: #fff;
  color: var(--azul);
  border-color: var(--gris-borde);
}
.prog-cta--secondary:hover{
  border-color: var(--azul);
  color: var(--azul);
  transform: translateY(-2px);
}
.prog-cta i{ font-size: 1.05rem; }
.prog-cta:focus-visible{
  outline: 3px solid rgba(50,138,187,.55);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  .prog-cta, .prog-cta:hover{ transition: none; transform: none; }
}

.programa-info p{ line-height:1.65; color:var(--azul-osc); text-align:justify; }

@media (max-width:768px){
  .titulo-con-flecha :is(h1, h2){ font-size:1.7rem; }
}

/* =======================================================
   ACORDEONES — limpios y ligeros
======================================================= */
.acordeon{
  margin-bottom: 10px;
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.acordeon:hover{
  border-color: var(--azul-cta);
  box-shadow: 0 4px 14px rgba(39,51,117,.08);
}
.acordeon-btn{
  width: 100%;
  background: transparent;
  border: 0;
  padding: 15px 22px;
  font-weight: 700;
  color: var(--azul);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: background .25s, color .25s;
  text-align: left;
}
.acordeon-btn i{
  font-size: 1.05rem;
  color: var(--azul-cta);
  width: 22px;
  text-align: center;
  transition: transform .35s ease, color .25s;
}
.acordeon-btn::after{
  content: '\f107';                     /* fa-chevron-down */
  font-family: 'FontAwesome';
  margin-left: auto;
  color: var(--azul-cta);
  font-size: .95rem;
  transition: transform .35s ease, color .25s;
}
.acordeon-btn.active{
  background: var(--azul);
  color: #fff;
}
.acordeon-btn.active i,
.acordeon-btn.active::after{ color: #fff; }
.acordeon-btn.active::after{ transform: rotate(180deg); }
.acordeon-btn:hover:not(.active){
  background: #f5f7fb;
}
.acordeon-contenido{
  display:none; padding:0 20px; background:var(--blanco); border-top:1px solid var(--gris-borde);
  line-height:1.6; color:var(--azul-osc); font-size:.96rem; animation:fadeIn .3s ease; text-align:justify;
}
.acordeon-contenido.open{ display:block; }

@keyframes fadeIn{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} }

/* =======================================================
   BOTONES DE ACCIÓN
======================================================= */
.botones-acciones{
  display:flex; flex-direction:column; align-items:center; gap:18px; margin:25px 0; width:100%; max-width:700px; margin-left:auto; margin-right:auto;
}
.botones-acciones .fila{
  display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; width:100%; max-width:620px;
}

/* === Botones de acción — congruentes con .cta-btn del index === */
.btn-secundario,.btn-contactanos,.btn-whatsapp{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 30px;             /* pill, como cta-btn de index */
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  font-size: 1.02rem;
  text-decoration: none;
  transition: background .25s, transform .25s, box-shadow .25s, color .25s, border-color .25s;
  box-shadow: 0 6px 18px rgba(39,51,117,.18);
  height: 52px;
  line-height: 1;
  box-sizing: border-box;
  text-align: center;
  flex: 1;
  min-width: 180px;
  max-width: 100%;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
}

/* Botón SECUNDARIO — limpio, suave, sin borde grueso */
.btn-secundario {
  background: #fff;
  color: var(--azul);
  border-color: var(--gris-borde);
  box-shadow: 0 3px 10px rgba(39,51,117,.06);
}
.btn-secundario:hover {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(39,51,117,.25);
}
.btn-secundario:hover i { color: #fff !important; }

/* Iconos sin tints raros (heredan color del botón) */
.btn-secundario i,
.btn-contactanos i,
.btn-whatsapp i {
  font-size: 1.05rem;
  color: inherit;
  transition: transform .25s ease;
}
.btn-secundario:hover i,
.btn-contactanos:hover i,
.btn-whatsapp:hover i {
  transform: scale(1.15);
}

@media (max-width:768px){
  .botones-acciones .fila{ display:flex; flex-direction:column; grid-template-columns:1fr; gap:10px; width:100%; }
  .btn-secundario,.btn-contactanos,.btn-whatsapp{
    width:100%; min-width:unset;
    padding:12px 14px; font-size:.92rem; height:48px;
  }
}

/* =======================================================
   BENEFICIOS — cards institucionales con icono circular
======================================================= */
/* === Beneficios viejos (compat) === */
.beneficios{
  margin: 70px auto 0;
  text-align: center;
  padding: 75px 28px;
  background: linear-gradient(135deg, rgba(50,138,187,.07), rgba(39,51,117,.05));
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  max-width: 1100px;
}

/* Eyebrow + lead consistentes con otras secciones */
.beneficios > .seccion-eyebrow{
  position: relative;
  z-index: 1;
}
.beneficios h3{
  position: relative;
  z-index: 1;
}
.beneficios::before{
  content: '🎓';
  position: absolute;
  top: 28px; right: 40px;
  font-size: 3.2rem;
  opacity: .12;
  pointer-events: none;
  transform: rotate(-12deg);
}
.beneficios::after{
  content: '📖';
  position: absolute;
  bottom: 28px; left: 40px;
  font-size: 2.8rem;
  opacity: .10;
  pointer-events: none;
  transform: rotate(15deg);
}
.beneficios h3{
  position: relative;
  font-size: 2.3rem;
  margin: 0 0 16px;
  color: var(--azul);
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
  z-index: 1;
}

@media (max-width: 900px){
  .beneficios{ padding: 40px 16px; margin-top: 40px; }
  .beneficios h3{ font-size: 1.55rem; }
}

/* =======================================================
   BOTÓN FLOTANTE "HABLAR CON ASESOR" — verde WhatsApp, abre el chat
======================================================= */
.btn-preinscripcion{
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: 16px;
  z-index: 2980;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: var(--blanco);
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(18,140,126,.35);
  transition: .2s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  cursor: pointer;
  border: 0;
  font-family: 'Poppins', sans-serif;
}
.btn-preinscripcion:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(18,140,126,.5);
  color: #fff;
}

/* =======================================================
   RESPONSIVE + EXTRAS
======================================================= */
.img-desktop{ display:block; }
.img-movil{
  display:none;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:14px;
  margin:16px 0;
  box-shadow: 0 10px 28px rgba(39,51,117,.15);
}
@media (max-width:768px){
  /* En móvil ocultamos la card de la columna izquierda completa
     (incluyendo badge "4 meses" absoluto y modalidades viajan después). */
  .programa-img .img-card{ display:none; }
  .img-desktop{ display:none; }
  .img-movil{ display:block; }
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

main { box-sizing: border-box; }

/* =======================================================
   ANIMACIONES DE ENTRADA AL SCROLL — reveal lateral
======================================================= */
.reveal-left, .reveal-right, .reveal-up{
  opacity: 0;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-up    { transform: translateY(40px); }
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-up.is-visible{
  opacity: 1;
  transform: translateX(0) translateY(0);
}
/* Stagger automático para hijos */
.reveal-stagger > *{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.reveal-stagger.is-visible > *{
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .15s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .25s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .35s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .45s; }

@media (prefers-reduced-motion: reduce){
  .reveal-left, .reveal-right, .reveal-up, .reveal-stagger > *{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =======================================================
   ENCABEZADOS DE SECCIÓN (compartido por Proceso + FAQ)
======================================================= */
.proceso-header{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
.seccion-eyebrow{
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--azul-cta);
  background: rgba(50,138,187,.10);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.proceso-header h3{
  font-family: "Montserrat", sans-serif;
  font-size: 2.3rem;
  color: var(--azul);
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
}
.proceso-header p{
  font-size: 1.05rem;
  color: var(--azul-osc);
  opacity: .75;
  line-height: 1.55;
  margin: 0;
}

/* =======================================================
   PROCESO ¿CÓMO FUNCIONA? — timeline vertical
======================================================= */
.proceso-seccion{
  margin: 0 auto;
  padding: 30px 28px 50px;
  max-width: 1100px;
  background: #f5f7fb;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}
/* Emoji decorativo flotante */
.proceso-seccion::before{
  content: '📝';
  position: absolute;
  top: 30px; right: 40px;
  font-size: 3.4rem;
  opacity: .08;
  transform: rotate(-15deg);
  pointer-events: none;
}
.proceso-seccion::after{
  content: '📚';
  position: absolute;
  bottom: 30px; left: 40px;
  font-size: 3rem;
  opacity: .07;
  transform: rotate(12deg);
  pointer-events: none;
}

.proceso-steps{
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  counter-reset: step;
  display: grid;
  gap: 18px;
}
/* Línea vertical conectando los pasos */
.proceso-steps::before{
  content: '';
  position: absolute;
  left: 25px;
  top: 25px;
  bottom: 25px;
  width: 2px;
  background: linear-gradient(180deg, var(--azul-cta) 0%, var(--azul) 100%);
  border-radius: 1px;
  opacity: .25;
}

.proceso-step{
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 22px 26px 22px 22px;
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: 16px;
  transition: border-color .25s, box-shadow .35s, transform .35s cubic-bezier(.2,.7,.2,1);
  position: relative;
  box-shadow: 0 2px 12px rgba(39,51,117,.04);
}
.proceso-step:hover{
  border-color: var(--azul-cta);
  box-shadow: 0 14px 32px rgba(39,51,117,.15);
  transform: translateX(8px);
}
.proceso-num{
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--azul-cta);
  color: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(50,138,187,.2);
}
.proceso-step-final .proceso-num{
  background: linear-gradient(135deg, var(--azul-cta), var(--azul));
  color: #fff;
  border-color: var(--azul);
  font-size: 1.2rem;
}
.proceso-content{ flex: 1; padding-top: 4px; }
.proceso-content h4{
  margin: 0 0 6px;
  color: var(--azul);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
}
.proceso-content p{
  margin: 0;
  font-size: .94rem;
  color: var(--azul-osc);
  line-height: 1.55;
  opacity: .85;
}

/* =======================================================
   FAQ — Acordeones
======================================================= */
.faq-seccion{
  margin: 0 auto;
  padding: 30px 28px 60px;
  max-width: 1100px;
  position: relative;
}
.faq-seccion::before{
  content: '❓';
  position: absolute;
  top: 30px; left: 40px;
  font-size: 3rem;
  opacity: .06;
  pointer-events: none;
}
.faq-seccion::after{
  content: '✏️';
  position: absolute;
  bottom: 30px; right: 40px;
  font-size: 2.8rem;
  opacity: .08;
  transform: rotate(20deg);
  pointer-events: none;
}
.faq-list{ max-width: 800px; margin: 10px auto 0 !important; position: relative; z-index: 1; }
.faq-list{ margin-top: 10px; }
.faq-list .acordeon-contenido p{
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
  color: var(--azul-osc);
  padding: 16px 22px 20px;
}
.faq-list .acordeon-contenido.open{ padding: 0; }
.faq-list .acordeon-contenido a{
  color: var(--azul-cta);
  font-weight: 600;
  text-decoration: none;
}
.faq-list .acordeon-contenido a:hover{ text-decoration: underline; }

/* =======================================================
   RESPONSIVE de nuevas secciones
======================================================= */
@media (max-width: 992px){
  .programa-grid{ gap: 40px; padding: 20px 0 60px; }
}
@media (max-width: 768px){
  .programa-detalle{ padding: 100px 14px 50px; }
  .programa-detalle .container{ padding-left: 0; padding-right: 0; }
  .titulo-con-flecha :is(h1, h2){
    font-size: 1.55rem;
    line-height: 1.18;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .titulo-con-flecha :is(h1, h2) .hl{ white-space: normal; }
  .prog-lead{ font-size: .95rem; }
  .beneficios{ margin-top: 50px; padding: 55px 20px; }
  .beneficios h3{ font-size: 1.7rem; }
  .proceso-seccion, .faq-seccion{ padding: 60px 20px; margin-top: 50px; }
  .proceso-header{ margin-bottom: 40px; }
  .proceso-header h3{ font-size: 1.7rem; }
  .proceso-header p{ font-size: .95rem; }
  .proceso-step{ padding: 16px 18px; gap: 14px; }
  .proceso-num{ width: 44px; height: 44px; font-size: 1.1rem; border-width: 2px; }
  .proceso-steps::before{ left: 22px; top: 22px; bottom: 22px; }
  .proceso-content h4{ font-size: 1rem; }
  .proceso-content p{ font-size: .88rem; }
}

/* =======================================================
   RESPONSIVE PRO — Tablet (iPad) + Móvil afinado
   (Arregla inconsistencias detectadas: breadcrumb arriba,
    horarios sin overflow, selector compacto, botones stack,
    pills wrap, fonts escalables)
======================================================= */

/* === iPad / Tablet (769 – 1366px) — solo tunes visuales.
   El "¿Qué aprenderás?" se mueve a la columna izquierda via JS
   (data-tablet-move en programa_detalle.js) para no romper la
   alineación de filas que el grid haría inevitablemente. */
@media (min-width: 769px) and (max-width: 1366px){
  .programa-detalle{ padding: 110px 26px 60px; }
  .programa-grid{ grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1000px !important; }
  .titulo-con-flecha :is(h1, h2){ font-size: 2.15rem; }
  .prog-lead{ font-size: 1rem; }
  .horario-card{ padding: 11px 12px; }
  .horario-info h3{ font-size: .82rem; }
  .horario-time{ font-size: .73rem; }
  .horario-dias{ font-size: .7rem; }
  .que-es-card{ padding: 18px; }
  .selector-modalidad{ gap: 7px; }
}

/* === MÓVIL ≤768px === */
@media (max-width: 768px){
  /* 1) Reordenar grid: breadcrumb arriba, info, modalidades abajo */
  .programa-grid{
    display: flex !important;
    flex-direction: column;
    gap: 14px;
  }
  /* .programa-img desaparece como caja: sus hijos pasan al grid */
  .programa-img{ display: contents; }
  /* Orden de cada elemento */
  .programa-img > .breadcrumb{ order: 1; margin-bottom: 4px; }
  .programa-info{ order: 2; }
  .programa-img > .modalidades-title{ order: 3; margin-top: 18px; }
  .programa-img > .selector-modalidad{ order: 4; }
  .programa-img > .horario{ order: 5; }

  /* 2) Modalidades y horarios — rediseñado para móvil
        (antes se sentía como componente desktop comprimido) */
  .modalidades-title{
    font-size: 1.15rem !important;
    margin: 4px 0 14px !important;
    padding: 0 2px;
  }

  /* En móvil: el selector ocupa todo el ancho con buttons igualados */
  .selector-modalidad{
    display: flex !important;
    flex-wrap: nowrap;
    width: 100%;
    padding: 4px;
    gap: 4px;
  }
  .selector-modalidad button{
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 6px;
    font-size: .78rem;
    border-radius: 9px;
    min-height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .selector-modalidad button i{ font-size: .8rem; margin-right: 2px; }

  /* Horarios — cards más generosas, fuente que matchea el resto */
  .horario{
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .horario-grid{ grid-template-columns: 1fr !important; gap: 10px; }
  .horario-card{
    padding: 14px 16px !important;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--gris-borde);
    box-shadow: 0 2px 8px rgba(31,44,69,.04);
  }
  .horario-card.horario-destacado{
    background: linear-gradient(135deg, rgba(50,138,187,.06), rgba(39,51,117,.03));
    border-color: var(--azul-cta);
    grid-column: auto !important;
  }
  .horario-icon{ width: 40px !important; height: 40px !important; font-size: 1.05rem !important; }
  .horario-info h3{ font-size: 1rem !important; }
  .horario-dias{ font-size: .85rem !important; }
  .horario-time{ font-size: .85rem !important; }
  .horario-badge{ font-size: .58rem !important; padding: 2px 7px !important; }

  /* 3) Horario-grid: SIEMPRE 1 columna en móvil para no cortar texto */
  .horario-grid{ grid-template-columns: 1fr; gap: 8px; }
  .horario-card.horario-destacado{ grid-column: auto; }

  /* 4) Botones-acciones: stack vertical para no cortarse */
  .botones-acciones .fila{
    flex-direction: column;
    gap: 10px;
  }
  .botones-acciones .btn-secundario{
    width: 100%;
    justify-content: center;
  }

  /* 5) Datos clave: 2x2 compacto; CTAs a todo lo ancho */
  .prog-facts{ margin: 16px 0 18px; }
  .prog-fact{ padding: 11px 12px; }
  .prog-fact dd{ font-size: .9rem; }
  .prog-cta{ flex-basis: 100%; }

  /* 6) Cards: que no se salgan del viewport */
  .que-es-card,
  .modalidad-extra,
  .acordeon,
  .horario,
  .img-movil{
    max-width: 100%;
    box-sizing: border-box;
  }
  .que-es-card{ padding: 16px; gap: 12px; }

  /* 7) Acordeón texto: que envuelva en vez de cortarse */
  .acordeon-btn{
    font-size: .92rem;
    padding: 14px 14px;
    white-space: normal;
    text-align: left;
    line-height: 1.3;
  }

  /* 8) Padding consistente */
  .programa-detalle{ padding: 95px 14px 40px; }
  .programa-detalle .container{ padding: 0; max-width: 100%; }

  /* 9) Eyebrow más compacto */
  .prog-eyebrow{ font-size: .72rem; margin-bottom: 8px; }
}

  /* 10) Salvaguardas anti-overflow: ningún hijo del main puede sobresalir */
  .programa-detalle,
  .programa-detalle *{ max-width: 100%; box-sizing: border-box; }
  .programa-detalle img{ height: auto; }
  .programa-detalle p,
  .programa-detalle h1,
  .programa-detalle h2,
  .programa-detalle h3,
  .programa-detalle h4{
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: manual;
  }
  .programa-detalle h1,
  .programa-detalle h2,
  .programa-detalle h3,
  .programa-detalle h4{ text-wrap: balance; }
  .programa-detalle p,
  .programa-detalle li{ text-wrap: pretty; }
  /* texto-jus: en móvil ya no justificamos (provoca huecos enormes en pantallas chicas) */
  .programa-info p,
  .texto-jus,
  .que-es-body p{ text-align: left !important; }
  /* Refuerzo: el grid y el container nunca exceden viewport */
  .programa-grid, .programa-info, .container{ width: 100%; max-width: 100%; }
}

/* === Móvil chico ≤480px: tunes finales === */
@media (max-width: 480px){
  .titulo-con-flecha :is(h1, h2){ font-size: 1.45rem; line-height: 1.2; }
  .prog-lead{ font-size: .9rem; line-height: 1.55; }
  .prog-fact dt{ font-size: .66rem; letter-spacing: .06em; }
  .selector-modalidad button{ flex: 1 1 100%; }
  .que-es-icon{ width: 38px; height: 38px; font-size: 1rem; }
  .que-es-body h2{ font-size: 1rem; }
  .que-es-body p{ font-size: .88rem; }
  .acordeon-btn{ font-size: .88rem; padding: 13px 12px; }
  .programa-detalle{ padding: 90px 12px 36px; }
  .proceso-step{ padding: 14px 14px; }
  .proceso-num{ width: 38px; height: 38px; font-size: 1rem; }
  .proceso-content h4{ font-size: .95rem; }
  .proceso-content p{ font-size: .85rem; }
  .breadcrumb{ font-size: .78rem; }
}

/* =======================================================
   PÁGINA DE PROGRAMA v2 (.pd) — sistema de componentes
   compartido por las 9 páginas de programa.
   Hero → Por qué UTEGRA → Lo que aprenderás → Modalidades
   → Perfil de egreso → Titulación y validez → Proceso
   → Becas y bolsa → FAQ → CTA final
======================================================= */
.pd{
  --pd-borde: #e3e8f1;
  --pd-texto: #3d4a5c;      /* 8.9:1 sobre blanco */
  --pd-suave: #5a6478;      /* 5.9:1 sobre blanco */
  --pd-fondo: #f5f7fb;
}
.pd .container{ max-width: 1240px; }

/* ---------- HERO ---------- */
.pd-hero{ padding: 8px 0 8px; }
.pd-hero > .breadcrumb{ margin-bottom: 22px; }
.pd-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.pd-hero .titulo-con-flecha{ margin: 0; }
.pd-hero__media .img-card{ margin: 0; }
.pd-hero__media .img-card img,
.pd-hero .img-desktop{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- SECCIONES ---------- */
.pd-section{ padding: 88px 0 0; }
.pd-head{ max-width: 720px; margin: 0 0 32px; }
.pd-head--center{ text-align: center; margin-left: auto; margin-right: auto; }
.pd-head--center .prog-eyebrow{ justify-content: center; }
.pd-head h2{
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.5px;
  color: var(--azul);
  margin: 0 0 12px;
}
.pd-head p{
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--pd-texto);
  text-align: inherit !important;
}
.pd-subtitle{
  font-family: "Poppins", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--azul);
  margin: 0 0 16px;
}
.pd-text{
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--pd-texto);
  margin: 0;
  text-align: left !important;
}
.pd-callout{
  margin: 22px 0 0;
  padding: 16px 20px;
  background: #f1f7fb;
  border-left: 4px solid var(--azul-cta);
  border-radius: 0 12px 12px 0;
  color: var(--azul-osc);
  line-height: 1.6;
  text-align: left !important;
}
.pd-callout strong{ color: var(--azul); }

/* Layout de dos columnas */
.pd-split{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 48px;
  align-items: start;
}

/* ---------- TARJETAS ---------- */
.pd-cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.pd-cards--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-card{
  display: block;
  background: #fff;
  border: 1px solid var(--pd-borde);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(31,44,69,.04);
}
.pd-card__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(50,138,187,.12);
  color: var(--azul);
  font-size: 1.2rem;
  margin-bottom: 16px;
}
.pd-card h3{
  font-family: "Poppins", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--azul);
  margin: 0 0 8px;
}
.pd-card p{
  margin: 0;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--pd-texto);
  text-align: left !important;
}
.pd-card--link{
  text-decoration: none;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.pd-card--link:hover{
  border-color: var(--azul-cta);
  box-shadow: 0 12px 28px rgba(39,51,117,.12);
  transform: translateY(-3px);
}
.pd-card--link:focus-visible{ outline: 3px solid rgba(50,138,187,.55); outline-offset: 3px; }
.pd-card__more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--azul);
}
.pd-card--link:hover .pd-card__more i{ transform: translateX(3px); }
.pd-card__more i{ transition: transform .25s; }

/* Áreas de conocimiento */
.pd-areas{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pd-areas li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--pd-borde);
  border-radius: 12px;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--azul);
}
.pd-areas li i{ color: var(--azul-cta); margin-top: 3px; flex-shrink: 0; }

/* Tarjeta con lista */
.pd-listcard{
  background: #fff;
  border: 1px solid var(--pd-borde);
  border-radius: 16px;
  padding: 26px 28px;
  height: 100%;
}
.pd-listcard h3{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--azul);
  margin: 0 0 16px;
}
.pd-listcard h3 i{ color: var(--azul-cta); }
.pd-checklist{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pd-checklist li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .97rem;
  line-height: 1.55;
  color: var(--pd-texto);
}
.pd-checklist li i{
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(50,138,187,.12);
  color: var(--azul);
  font-size: .7rem;
}
.pd-checklist strong{ color: var(--azul); }

/* Tarjeta de validez oficial */
.pd-validez{
  height: 100%;
  padding: 30px 30px 32px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--azul) 0%, #1f2a63 100%);
  box-shadow: 0 14px 32px rgba(39,51,117,.22);
}
.pd-validez__icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: rgba(255,255,255,.14);
  font-size: 1.35rem;
  margin-bottom: 18px;
}
.pd-validez h3{
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #fff;
}
.pd-validez p{ margin: 0; line-height: 1.65; color: rgba(255,255,255,.92); text-align: left !important; }
.pd-validez strong{ color: #fff; }

/* ---------- MODALIDADES Y HORARIOS ---------- */
.pd-panel{
  background: var(--pd-fondo);
  border-radius: 24px;
  padding: 40px;
}
.pd-panel .pd-head{ margin-bottom: 24px; }
.pd-horarios .selector-modalidad{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.pd-horarios .selector-modalidad button{
  flex: 0 1 auto;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--pd-borde);
  font-size: .92rem;
}
.pd-horarios .selector-modalidad .activo,
.pd-horarios .selector-modalidad .activo:hover{
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}
.pd-horarios .horario{
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.pd-horarios .horario-grid{
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.pd-horarios .horario-card{
  padding: 18px;
  border-radius: 14px;
  border-color: var(--pd-borde);
  align-items: flex-start;
}
.pd-horarios .horario-card.horario-destacado:only-child{ grid-column: auto; }

/* ---------- PROCESO / FAQ ---------- */
.pd-proceso .proceso-steps{ max-width: 860px; margin: 0 auto; }
.pd-faq .faq-list{ max-width: 860px; }

/* ---------- CTA FINAL ---------- */
.pd-cta-band{
  margin: 88px 0 20px;
  padding: 44px 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--azul) 0%, #24508f 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}
.pd-cta-band__text{ flex: 1 1 380px; }
.pd-cta-band h2{
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 8px;
  color: #fff;
}
.pd-cta-band p{ margin: 0; color: rgba(255,255,255,.9); line-height: 1.6; text-align: left !important; }
.pd-cta-band__inicio{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px !important;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: .92rem;
  color: #fff !important;
}
.pd-cta-band__actions{
  flex: 1 1 300px;
  max-width: 460px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.prog-cta--light{
  background: #fff;
  color: var(--azul);
}
.prog-cta--light:hover{ background: #eef3fb; color: var(--azul); transform: translateY(-2px); }
.prog-cta--ghost{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
.prog-cta--ghost:hover{ border-color: #fff; background: rgba(255,255,255,.08); color: #fff; transform: translateY(-2px); }
.pd-cta-band .prog-cta:focus-visible{ outline-color: #fff; }

/* ---------- RESPONSIVE ---------- */
/* Laptop / iPad horizontal */
@media (max-width: 1199px){
  .pd-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-hero__grid{ gap: 36px; }
}
/* iPad vertical y tabletas: hero apilado, texto primero */
@media (max-width: 900px){
  .pd-hero__grid{ grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pd-hero__media .img-card img,
  .pd-hero .img-desktop{ aspect-ratio: 16 / 9; }
  .pd-split{ grid-template-columns: minmax(0, 1fr); }
  .pd-section{ padding-top: 64px; }
  .pd-panel{ padding: 30px 26px; }
  .pd-cta-band{ margin-top: 64px; padding: 34px 30px; }
  .pd-cta-band__actions{ max-width: none; }
}
/* Teléfonos */
@media (max-width: 768px){
  .pd-hero .img-desktop{ display: block; }
  .pd-hero .img-card{ display: block; }
  .pd-hero > .breadcrumb{ margin-bottom: 14px; }
  .pd-section{ padding-top: 52px; }
  .pd-head{ margin-bottom: 22px; }
  .pd-panel{ padding: 24px 16px; border-radius: 18px; }
  .pd-horarios .selector-modalidad{ flex-wrap: nowrap; }
  .pd-horarios .selector-modalidad button{ flex: 1 1 0; padding: 10px 8px; border-radius: 12px; }
  .pd-listcard{ padding: 22px 18px; }
  .pd-validez{ padding: 24px 20px; }
  .pd-cta-band{ padding: 28px 20px; border-radius: 18px; margin-top: 52px; }
  .pd-cta-band .prog-cta{ flex-basis: 100%; }
}
@media (min-width: 481px) and (max-width: 768px){
  .pd-horarios .horario-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px){
  .pd-cards, .pd-cards--2{ grid-template-columns: minmax(0, 1fr); }
  .pd-card{ padding: 20px; }
  .pd-areas{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px){
  .pd-horarios .selector-modalidad button{ font-size: .78rem; }
  .pd-horarios .selector-modalidad button i{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .pd-card--link, .pd-card--link:hover, .pd-card__more i{ transition: none; transform: none; }
}
.pd-cta-band__actions{ flex: 0 1 auto; }
.pd-cta-band__actions .prog-cta{ flex: 1 1 auto; white-space: nowrap; }
@media (max-width: 900px){
  .pd-cta-band__actions{ flex: 1 1 100%; }
}
@media (max-width: 400px){
  .pd-cta-band__actions .prog-cta{ white-space: normal; }
}
@media (max-width: 768px){
  .pd-hero .titulo-con-flecha h1{ font-size: clamp(1.6rem, 1.15rem + 2.2vw, 2rem); }
}