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

/* Tipografías */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Poppins:wght@400;500;600;700&display=swap');

/* =======================================================
   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:8px;
  font-size:.85rem;
  margin:0 0 16px;
  color: var(--azul-osc);
}
.breadcrumb a{
  color: var(--azul-cta);
  text-decoration:none;
  font-weight:600;
  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:700;
}

/* === Imagen con card + badge "4 meses" === */
.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;
}
.img-badge{
  position:absolute;
  top:14px; left:14px;
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(255,255,255,.95);
  color: var(--azul);
  font-weight:700;
  font-size:.82rem;
  padding:6px 13px;
  border-radius:999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  backdrop-filter: blur(4px);
}
.img-badge i{ color: var(--azul-cta); }

/* === Título de modalidades === */
.modalidades-title,
.programa-img h4{
  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 h4 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 h5{
  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; }

/* === Modalidades extra como mini-cards con ícono === */
.modalidad-extra{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:18px 0 0;
  padding:16px 16px;
  background:#fff;
  border:1px solid var(--gris-borde);
  border-radius:12px;
  border-left:4px solid var(--azul-cta);
  box-shadow:0 3px 10px rgba(39,51,117,.05);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.modalidad-extra:hover{
  transform:translateX(2px);
  box-shadow:0 8px 20px rgba(39,51,117,.1);
}
.me-icon{
  flex-shrink:0;
  width:42px; height:42px;
  background: linear-gradient(135deg, var(--azul-cta), var(--azul));
  color:#fff;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  box-shadow:0 4px 12px rgba(50,138,187,.3);
}
.me-body{ flex:1; }
.modalidad-extra h4{
  margin:0 0 4px;
  color:var(--azul);
  font-weight:700;
  font-family:"Poppins",sans-serif;
  font-size:.98rem;
}
.modalidad-extra p{
  margin:0;
  font-size:.92rem;
  line-height:1.5;
  color:var(--azul-osc);
}

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

.prog-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--azul);
  background: rgba(50,138,187,.10);
  border: 1px solid rgba(50,138,187,.25);
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.prog-eyebrow i{ color: var(--azul-cta); font-size: .8rem; }

/* 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;
}

/* Badge "Próximo inicio" — mismo estilo que .hero-badge de index.html */
.prog-urgencia{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--azul);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  margin: 4px 0 18px;
  border: 1px solid rgba(39,51,117,.12);
  box-shadow: 0 6px 16px rgba(39, 51, 117, 0.18);
  animation: pulseBadgeCeneval 2.4s ease-in-out infinite;
}
.prog-urgencia i {
  color: var(--azul-cta);
  font-size: 0.95rem;
}
.prog-urgencia strong{ font-weight: 800; }
@keyframes pulseBadgeCeneval {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Highlight del título: "4 meses" en celeste */
.titulo-con-flecha 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 h4{
  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 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;
}

/* Pills institucionales con datos clave del programa */
.prog-metas{
  list-style:none;
  margin:0 0 6px;
  padding:0;
  display:flex; flex-wrap:wrap; gap:8px 10px;
}
.prog-metas li{
  display:inline-flex; align-items:center; gap:7px;
  background:#f5f7fb;
  color: var(--azul);
  font-size:.88rem;
  font-weight:600;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid #e8eaef;
}
.prog-metas li i{ color: var(--azul-cta); font-size:.92rem; }

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

@media (max-width:768px){
  .titulo-con-flecha h2{ font-size:1.7rem; }
  .prog-metas li{ font-size:.82rem; padding:6px 11px; }
}

/* =======================================================
   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);} }

/* =======================================================
   NOTA INFORMATIVA / SEP
======================================================= */
.nota{
  background:#eef4fb; border-left:4px solid var(--azul-cta); padding:14px 16px; border-radius:8px;
  color:var(--azul-osc); line-height:1.5; margin:20px 0; font-size:.95rem; box-shadow:0 3px 8px rgba(0,0,0,.05);
  text-align:justify;
}
.nota-sep{
  position:relative;
  background: linear-gradient(135deg, #eef4fb 0%, #f7f9fc 100%);
  border: 1px solid #d8e6f5;
  border-left: 4px solid var(--azul-cta);
  padding: 14px 18px 14px 50px;
  border-radius: 10px;
  font-size: .95rem;
  color: var(--azul-osc);
  margin: 22px 0 10px;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(39,51,117,.06);
  text-align: left;
}
.nota-sep::before{
  content: '\f132';            /* fa-shield */
  font-family: 'FontAwesome';
  position:absolute;
  left:16px; top:50%;
  transform: translateY(-50%);
  color: var(--azul-cta);
  font-size: 1.25rem;
}
@media (max-width:768px){
  .nota-sep{ font-size:.9rem; padding:12px 14px 12px 44px; }
}

/* =======================================================
   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 PRIMARIO (Preinscribirme / Contáctanos) — celeste sólido con hover morado */
.btn-contactanos,
.btn-whatsapp {
  background: var(--azul-cta);
  color: #fff;
}
.btn-contactanos:hover,
.btn-whatsapp:hover {
  background: var(--azul);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(39,51,117,.35);
}

/* 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;
}

/* === BENEFICIOS EXCLUSIVOS (estilo editorial horizontal — inspirado en UTEG pero con paleta UTEGRA) === */
.beneficios-exclusivos{
  margin: 0 auto;
  padding: 20px 28px 40px;
  max-width: 1200px;
  text-align: center;
}
.hl-azul{ color: var(--azul-cta); }

.bx-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 50px;
  margin: 50px auto 0;
  max-width: 1100px;
}

.bx-card{
  display: flex;
  align-items: stretch;
  gap: 22px;
  text-align: left;
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 6px 24px rgba(39,51,117,.06);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.bx-card:hover{
  transform: translateY(-6px);
  border-color: var(--azul-cta);
  box-shadow: 0 22px 44px rgba(39,51,117,.18);
}

/* Visual cuadrado a la izquierda (sustituye la foto del competidor con un ícono morado/celeste premium) */
.bx-visual{
  flex-shrink: 0;
  width: 130px;
  height: 130px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(39,51,117,.20);
}
/* 4 variaciones de fondo institucional para que cada card "respire" distinto */
.bx-visual-1{
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-cta) 100%);
}
.bx-visual-2{
  background: linear-gradient(135deg, var(--azul-cta) 0%, #5fa6cc 100%);
}
.bx-visual-3{
  background: linear-gradient(135deg, var(--azul-osc) 0%, var(--azul) 100%);
}
.bx-visual-4{
  background: linear-gradient(135deg, #2d3a87 0%, var(--azul-cta) 100%);
}
/* Patrón decorativo sutil estilo "foto" */
.bx-visual::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.18) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.10) 0%, transparent 45%);
  pointer-events: none;
}
.bx-visual i{ position: relative; z-index: 1; transition: transform .4s; }
.bx-card:hover .bx-visual i{ transform: scale(1.1) rotate(-6deg); }

.bx-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 6px 6px 0;
}
.bx-eyebrow{
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--azul-cta);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
  font-family: "Montserrat", sans-serif;
}
.bx-card h4{
  margin: 0 0 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--azul);
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.bx-card p{
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--azul-osc);
  opacity: .82;
}

/* CTA debajo de los 4 beneficios */
.bx-cta{
  margin-top: 50px;
  text-align: center;
}
.btn-cta-bx{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-cta) 100%);
  color: #fff;
  padding: 16px 42px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.02rem;
  font-family: "Montserrat", sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(39,51,117,.30);
  transition: transform .25s, box-shadow .25s;
}
.btn-cta-bx:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(39,51,117,.4);
  color: #fff;
}
.btn-cta-bx i{ font-size: 1.05rem; transition: transform .25s; }
.btn-cta-bx:hover i{ transform: scale(1.15); }

/* Responsive */
@media (max-width: 900px){
  .bx-grid{ grid-template-columns: 1fr; gap: 22px; }
  .beneficios-exclusivos{ padding: 55px 18px; }
}
@media (max-width: 480px){
  .bx-card{ flex-direction: column; padding: 18px; gap: 16px; text-align: center; }
  .bx-body{ text-align: center; padding: 0; }
  .bx-visual{ width: 110px; height: 110px; font-size: 2.6rem; margin: 0 auto; }
  .bx-card h4{ font-size: 1.1rem; }
  .bx-card p{ font-size: .9rem; }
  .btn-cta-bx{ padding: 13px 26px; font-size: .92rem; }
}
/* Eyebrow + lead consistentes con otras secciones */
.beneficios > .seccion-eyebrow{
  position: relative;
  z-index: 1;
}
.beneficios .seccion-lead{
  position: relative;
  z-index: 1;
  font-size: 1rem;
  color: var(--azul-osc);
  opacity: .75;
  max-width: 600px;
  margin: 8px auto 32px;
  line-height: 1.5;
}
.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;
}

.beneficios-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 40px auto 0;
}

.beneficio{
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: 18px;
  padding: 32px 22px;
  text-align: center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
  box-shadow: 0 4px 16px rgba(39,51,117,.06);
}
.beneficio:hover{
  transform: translateY(-8px);
  border-color: var(--azul-cta);
  box-shadow: 0 22px 40px rgba(39,51,117,.18);
}

/* Ícono dentro de círculo celeste suave, hover = morado lleno */
.beneficio i{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(50,138,187,.12);
  color: var(--azul-cta);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
  transition: background .35s, color .35s, transform .35s;
}
.beneficio:hover i{
  background: var(--azul);
  color: #fff;
  transform: scale(1.08);
}

.beneficio p{
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--azul-osc);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 900px){
  .beneficios{ padding: 40px 16px; margin-top: 40px; }
  .beneficios h3{ font-size: 1.55rem; }
  .beneficios-grid{ grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
  .beneficio{ padding: 22px 14px; }
  .beneficio i{ width: 56px; height: 56px; font-size: 1.4rem; }
}
@media (max-width: 480px){
  .beneficios-grid{ grid-template-columns: 1fr; max-width: 320px; }
}

/* =======================================================
   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; }
  .btn-volver{ display:none; }
}

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; }

/* =======================================================
   CTA FINAL — banda morada antes del footer
======================================================= */
.cta-final-prog{
  margin-top: 100px;
  padding: 90px 28px 100px;
  background: linear-gradient(135deg, var(--azul) 0%, #2d3a87 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final-prog::before{
  content: '';
  position: absolute;
  top: -160px; right: -160px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(50,138,187,.28) 0%, transparent 65%);
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}
.cta-final-inner{
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}
.cta-final-inner h3{
  font-family: "Montserrat", sans-serif;
  font-size: 2.5rem;
  color: #fff;
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: -0.7px;
  line-height: 1.15;
}
.cta-final-inner p{
  font-size: 1.1rem;
  color: rgba(255,255,255,.88);
  margin-bottom: 36px;
  line-height: 1.5;
}
.btn-cta-final{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--azul);
  padding: 16px 36px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: all .25s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.btn-cta-final:hover{
  background: var(--azul-cta);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(50,138,187,.4);
}
.btn-cta-final i{ font-size: 1.15rem; transition: transform .25s; }
.btn-cta-final:hover i{ transform: scale(1.15); }

/* =======================================================
   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 h2{
    font-size: 1.55rem;
    line-height: 1.18;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .titulo-con-flecha 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; }
  .cta-final-prog{ margin-top: 70px; padding: 65px 20px 70px; }
  .cta-final-inner h3{ font-size: 1.7rem; }
  .cta-final-inner p{ font-size: .98rem; }
}

/* =======================================================
   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 h2{ font-size: 2.15rem; }
  .prog-lead{ font-size: 1rem; }
  .horario-card{ padding: 11px 12px; }
  .horario-info h5{ 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 h5{ 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) Pills (prog-metas, hero-badge) no se desbordan */
  .prog-metas{ flex-wrap: wrap; gap: 6px; }
  .prog-metas li{ font-size: .78rem; padding: 5px 10px; }

  /* 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; padding: 5px 12px; letter-spacing: .3px; }
}

  /* 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: auto;
  }
  /* 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 h2{ font-size: 1.45rem; line-height: 1.2; }
  .prog-lead{ font-size: .9rem; line-height: 1.55; }
  .prog-urgencia{ font-size: .82rem; padding: 8px 14px; }
  .selector-modalidad button{ flex: 1 1 100%; }
  .que-es-icon{ width: 38px; height: 38px; font-size: 1rem; }
  .que-es-body h4{ 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; }
}