/* ============================================================
   IPUC-COMPONENTES-FCSHE.CSS
   Universidad Piloto de Colombia — Hoja de estilos combinada
   (esquema de color AZUL, para landings de FCSHE)

   Une en un solo archivo:
     1. ipuc-icon-grid-roles-FCSHE.css  (grid de íconos: Sectores / Roles)
     2. ipuc-plan-de-estudios-FCSHE.css (widget de plan de estudios)
     3. ipuc-tag-pill-FCSHE.css         (chips de texto suelto)

   IMPORTANTE — separado a propósito de ipuc-componentes.css (naranja):
   Usa las MISMAS clases (.icon-grid, .ipuc-tag-pill, .ipuc-plan, etc.)
   pero con otro esquema de color. Si se cargan los dos archivos en
   la misma página, se pisan los estilos entre sí. Por eso este
   archivo debe encolarse SOLO en las páginas de programas de FCSHE
   (con un is_page() condicional en WPCode), nunca sitewide junto
   con el naranja.

   A diferencia del combinado naranja, aquí las variables de color
   NO se movieron a :root — se quedaron dentro de .ipuc-plan, tal
   como venían en el archivo original del plan de estudios. El
   icon-grid y los tag-pill de este esquema ya traen sus colores
   azules escritos directo (no dependen de las variables), así que
   no hace falta compartirlas globalmente.
   ============================================================ */


/* ============================================================
   IMPORT DE FUENTE — debe ir siempre antes de cualquier otra
   regla del archivo (lo exige la especificación CSS).
   Requiere "Plus Jakarta Sans" de Google Fonts. Si el sitio ya
   la carga globalmente, borra esta línea para evitar una
   petición HTTP duplicada.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');


/* ============================================================
   SCROLL SUAVE
   Igual que en el esquema naranja: hace que los enlaces con
   ancla (ej. href="#plan-de-estudios") se desplacen con
   animación en vez de saltar de golpe.
   ============================================================ */
html{ scroll-behavior:smooth; }


/* ============================================================
   1. ICON-GRID / ICON-ITEM
   Componente reutilizable de tarjetas con ícono + texto
   (secciones "Sectores" y "Roles"). Fondo azul oscuro/marino en
   vez del café oscuro del esquema naranja.

   USO EN HTML:
     <div class="icon-grid">
       <div class="icon-item">
         <svg>...</svg>
         <span>Desarrollador de software</span>
       </div>
       ...
     </div>
   ============================================================ */
.icon-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.icon-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:#171a21;
  border:1px solid #232833;
  border-radius:10px;
  padding:12px;
  transition:border-color .2s ease, transform .2s ease;
}

.icon-item:hover{
  border-color:#a5e7fe;
  transform:translateY(-2px);
}

.icon-item svg{
  color:#a5e7fe;
  flex-shrink:0;
}

.icon-item span{
  font-size:.78rem;
  color:#E5DCD1;
  line-height:1.25;
}

@media (max-width:900px){
  .icon-grid{ grid-template-columns:1fr; }
}


/* ============================================================
   2. TAG PILLS
   Chips de texto suelto (ej. "Pregrado virtual",
   "Ciencias Sociales", etc.)

   USO EN HTML:
     <span class="ipuc-tag-pill">IA Generativa</span>
     <span class="ipuc-tag-pill ipuc-tag-pill--accent">Humanidades</span>
   ============================================================ */
.ipuc-tag-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.06em; color:#ffffffbd;
  border:1px solid rgba(217,226,247,0.49); padding:3px 10px;
  border-radius:10px; margin-bottom:13px;
}

.ipuc-tag-pill--accent{
  color:#1e498b;
  background:#d9e2f7;
}


/* ============================================================
   3. PLAN DE ESTUDIOS
   Va SIEMPRE junto con su HTML + JS correspondiente (mismo
   bloque HTML personalizado) — este CSS por sí solo no genera
   nada, solo estiliza las clases "ipuc-*" que el JS inyecta.

   ÍNDICE
   3.1 Contenedor, variables y accesibilidad
   3.2 Píldoras de estadísticas
   3.3 Chips de filtro por componente curricular
   3.4 Chips de línea de certificación
   3.5 Acordeón de periodos académicos
   3.6 Tarjeta de curso
   3.7 Leyenda plegable
   3.8 Botón hacia el Documento Maestro (PDF)
   3.9 Responsive
   ============================================================ */

/* 3.1 Contenedor, variables (azules, propias de FCSHE) y accesibilidad */
.ipuc-plan{
  /* Color de facultad (azul FCSHE) */
  --ipuc-orange-300:#4a89e8;
  --ipuc-orange-400:#135ecf;
  --ipuc-orange-500:#1E498B;
  --ipuc-orange-600:#00398f;
  --ipuc-orange-tint:#dce8fa;
  --ipuc-active-accent:var(--ipuc-orange-500);
  --ipuc-active-tint:var(--ipuc-orange-tint);

  /* Neutros de texto y fondo */
  --ipuc-ink:#121417;
  --ipuc-ink-soft:#60656b;
  --ipuc-paper-alt:#e4eaf2;
  --ipuc-dark:#111417;
  --ipuc-line:#d3dae5;

  /* Tipografía y easing */
  --ipuc-font:'Plus Jakarta Sans', sans-serif;
  --ipuc-ease:cubic-bezier(.22,.68,0,1);

  /* Colores de componente curricular */
  --ipuc-comp-disciplinar:#C00000;
  --ipuc-comp-disciplinar-tint:#F8E9E9;
  --ipuc-comp-interdisciplinar:#A39B8E;
  --ipuc-comp-interdisciplinar-tint:#F1EDE6;
  --ipuc-comp-investigacion:#6B6560;
  --ipuc-comp-investigacion-tint:#EAE7E3;
  --ipuc-comp-certificacion:#5A9BD0;
  --ipuc-comp-certificacion-tint:#E7F0F8;
  --ipuc-comp-tic:#1E7A6F;
  --ipuc-comp-tic-tint:#E3F0EE;

  font-family:var(--ipuc-font);
  color:var(--ipuc-ink);
  max-width:1180px;
  margin:0 auto;
}
.ipuc-plan *{ box-sizing:border-box; }
.ipuc-plan h2, .ipuc-plan h3{ font-family:var(--ipuc-font); margin:0; }

@media (prefers-reduced-motion: reduce){
  .ipuc-plan *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}
.ipuc-plan a:focus-visible,
.ipuc-plan button:focus-visible,
.ipuc-plan [tabindex]:focus-visible{
  outline:2.5px solid var(--ipuc-orange-500);
  outline-offset:2px;
  border-radius:4px;
}

/* 3.2 Píldoras de estadísticas */
.ipuc-plan-pills{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.ipuc-plan-pills span{
  font-size:12px; font-weight:600;
  border:1px solid rgba(217,226,247,0.49); padding:7px 14px;
  border-radius:100px; color:#ffffffbd;
}
.ipuc-counter{ font-variant-numeric:tabular-nums; color:#fff; font-weight:700; }

/* 3.3 Chips de filtro por componente curricular
   (incluye "Mediados por TIC", propio de este esquema, además
   de los 4 componentes ya conocidos) */
.ipuc-plan-body{ border-radius:0 0 18px 18px; }
.ipuc-filter-chips{ display:flex; flex-wrap:wrap; gap:9px; padding:26px 0 6px; }
.ipuc-filter-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ipuc-font); font-size:.82rem; font-weight:600;
  padding:10px 17px; border-radius:100px;
  border:1.5px solid var(--ipuc-line) !important;
  background:#F0F0F0 !important;
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  color:var(--ipuc-ink-soft) !important;
  cursor:pointer; min-height:40px;
  transition:all .18s var(--ipuc-ease);
}
.ipuc-filter-chip:hover{ border-color:var(--ipuc-orange-400); }
.ipuc-filter-chip.active{
  background:var(--ipuc-orange-500) !important;
  border-color:var(--ipuc-orange-500) !important;
  color:#fff !important;
}
.ipuc-filter-chip.active:hover{
  background:#1e498b !important;
  border-color:#1e498b !important;
  color:#fff !important;
}
.ipuc-chip-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.ipuc-dot-disciplinar{ background:var(--ipuc-comp-disciplinar); }
.ipuc-dot-interdisciplinar{ background:var(--ipuc-comp-interdisciplinar); }
.ipuc-dot-investigacion{ background:var(--ipuc-comp-investigacion); }
.ipuc-dot-certificacion{ background:var(--ipuc-comp-certificacion); }
.ipuc-dot-tic{ background:var(--ipuc-comp-tic); }

/* 3.4 Chips de línea de certificación */
.ipuc-linea-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 0 14px; margin-top:7px; }
.ipuc-linea-chips[hidden]{ display:none; }
.ipuc-linea-chip{
  font-family:var(--ipuc-font); font-size:.76rem; font-weight:600;
  padding:7px 14px; border-radius:100px;
  border:1.5px dashed var(--ipuc-comp-certificacion);
  background:var(--ipuc-comp-certificacion-tint);
  color:var(--ipuc-comp-certificacion);
  cursor:pointer; min-height:34px;
  transition:all .18s var(--ipuc-ease);
}
.ipuc-linea-chip.active{
  background:var(--ipuc-comp-certificacion);
  border-style:solid;
  color:#fff;
}

/* 3.5 Acordeón de periodos académicos */
.ipuc-semester{
  border:1px solid var(--ipuc-line);
  border-radius:14px;
  margin-top:14px;
  overflow:hidden;
}
.ipuc-sem-head{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:18px 22px; border:none !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  font-family:var(--ipuc-font); font-size:13px; font-weight:500;
  cursor:pointer; color:var(--ipuc-ink) !important; min-height:44px;
}
.ipuc-chev{ transition:transform .25s ease; color:var(--ipuc-orange-500); }
.ipuc-semester.open .ipuc-chev{ transform:rotate(180deg); }
.ipuc-sem-collapse{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .32s var(--ipuc-ease);
}
.ipuc-semester.open .ipuc-sem-collapse{ grid-template-rows:1fr; }
.ipuc-sem-collapse-inner{ overflow:hidden; min-height:0; }
.ipuc-sem-courses{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; padding:20px 10px;
}

/* 3.6 Tarjeta de curso */
.ipuc-course-card{
  border:1.5px solid var(--ipuc-orange-500);
  border-radius:12px; padding:16px;
  transition:border-color .18s var(--ipuc-ease),
             transform .18s var(--ipuc-ease),
             box-shadow .18s var(--ipuc-ease);
}
.ipuc-course-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px -14px rgba(0,73,184,0.35);
}
.ipuc-course-card.ipuc-highlighted{ border-color:var(--ipuc-card-border); }
.ipuc-course-card.ipuc-highlighted-cert{ border-color:var(--ipuc-comp-certificacion); }
.ipuc-course-card.ipuc-highlighted-tic{ border-color:var(--ipuc-comp-tic); }

.ipuc-cert-badge{ display:inline-flex; vertical-align:-4px; cursor:help; }
.ipuc-cert-badge img{ width:16px; height:16px; display:block; object-fit:contain; }

.ipuc-route-badge{ display:inline-flex; vertical-align:-6px; cursor:help; margin-left:4px; }
.ipuc-route-badge img{ height:20px; width:auto; display:block; object-fit:contain; }

.ipuc-tic-badge{ display:inline-flex; vertical-align:-4px; cursor:help; margin-left:4px; }
.ipuc-tic-badge img{ width:16px; height:16px; display:block; object-fit:contain; }

.ipuc-course-card .ipuc-code-tag{
  display:inline-flex; align-items:center; justify-content:center;
  padding:3px 9px;
  background:var(--ipuc-code-tint, var(--ipuc-active-tint));
  color:var(--ipuc-code-color, var(--ipuc-active-accent));
  font-weight:700; font-size:.7rem; letter-spacing:.03em;
  border-radius:6px; margin-bottom:8px; cursor:help;
  transition:color .18s var(--ipuc-ease), background .18s var(--ipuc-ease);
}
.ipuc-course-card .ipuc-course-title{
  font-size:.88rem; margin-bottom:6px; line-height:1.3;
  font-weight:700; color:var(--ipuc-ink);
}
.ipuc-course-card .ipuc-course-desc{
  font-size:.76rem; line-height:1.45; color:var(--ipuc-ink-soft);
  margin-bottom:10px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.ipuc-course-card .ipuc-meta{
  font-size:.72rem; color:var(--ipuc-ink-soft);
  padding-top:8px; border-top:1px dashed var(--ipuc-line);
}
.ipuc-course-card.ipuc-dimmed{ opacity:.28; filter:grayscale(.4); }

/* 3.7 Leyenda plegable */
.ipuc-legend{
  border:1px solid var(--ipuc-line);
  border-radius:14px; margin-top:20px; overflow:hidden;
}
.ipuc-legend-toggle{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  gap:10px; padding:16px 20px; border:none !important;
  background:none !important; background-image:none !important; box-shadow:none !important;
  font-family:var(--ipuc-font); font-size:.86rem; font-weight:700;
  cursor:pointer; color:var(--ipuc-ink) !important; min-height:44px;
}
.ipuc-legend-toggle .ipuc-chev{ transition:transform .25s ease; color:var(--ipuc-orange-500); }
.ipuc-legend-toggle[aria-expanded="true"] .ipuc-chev{ transform:rotate(180deg); }
.ipuc-legend-collapse{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .32s var(--ipuc-ease);
}
.ipuc-legend.open .ipuc-legend-collapse{ grid-template-rows:1fr; }
.ipuc-legend-collapse-inner{ overflow:hidden; min-height:0; }
.ipuc-legend-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; padding:0 20px 22px;
}
.ipuc-legend-heading{
  font-family:var(--ipuc-font);
  font-weight:700;
  font-size:.82rem;
  color:var(--ipuc-ink);
  margin:0 0 10px;
}
.ipuc-legend-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ipuc-legend-list li{
  display:flex; align-items:center; gap:9px;
  font-size:.8rem; color:var(--ipuc-ink); line-height:1.35;
}
.ipuc-legend-dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.ipuc-legend-icon{ width:20px; height:auto; max-height:18px; object-fit:contain; flex:none; }
.ipuc-legend-glossary{ display:grid; grid-template-columns:auto 1fr; gap:6px 10px; margin:0; font-size:.78rem; }
.ipuc-legend-glossary dt{ font-weight:700; color:var(--ipuc-orange-500); white-space:nowrap; }
.ipuc-legend-glossary dd{ margin:0; color:var(--ipuc-ink-soft); line-height:1.35; }

/* 3.8 Botón hacia el Documento Maestro (PDF) */
.ipuc-dm-link-wrap{ display:flex; justify-content:center; margin-top:22px; }
.ipuc-dm-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ipuc-font); font-size:.82rem; font-weight:700;
  color:var(--ipuc-orange-500); text-decoration:none;
  padding:11px 20px; border-radius:100px;
  border:1.5px solid var(--ipuc-orange-500);
  transition:all .18s var(--ipuc-ease);
}
.ipuc-dm-link svg{ width:15px; height:15px; }
.ipuc-dm-link:hover{ background:var(--ipuc-orange-500); color:#fff; }

/* 3.9 Responsive */
@media (max-width:900px){
  .ipuc-sem-courses{ grid-template-columns:1fr; }
  .ipuc-legend-grid{ grid-template-columns:1fr; }
}


/* ============================================================
   4. HERO CARD
   Tarjeta semitransparente que se superpone sobre la imagen del
   bloque "Portada" (hero de inicio). Adaptada a partir de la
   versión naranja (ipuc-componentes.css) usando el mismo azul
   FCSHE (#0049b8). Como esta tarjeta vive FUERA de .ipuc-plan,
   los colores van escritos directo (no dependen de variables).
   ============================================================ */
.ipuc-hero-card{
  background:rgba(30, 73, 139, 0.8); /* El 0.8 añade un 80% de opacidad */;
  border-radius:22px;
  padding:26px 36px;
  max-width:760px;
  margin-left:auto;
  color:#fff;
}
.ipuc-hero-pills{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.ipuc-hero-pill{
  display:inline-flex; align-items:center;
  font-size:.85rem; font-weight:600; color:#fff;
  border:1px solid rgba(255,255,255,.35);
  padding:6px 14px; border-radius:100px;
}
.ipuc-hero-title{
  color:#fff; font-size:49.4px; font-weight:500; line-height:1.05;
  margin:0 0 14px;
}
.ipuc-hero-title .ipuc-hero-title-light{ color:#dce8fa; }
.ipuc-hero-divider{ border:none; border-top:1px solid rgba(255,255,255,.35); margin:0 0 14px; }
.ipuc-hero-desc{ color:#fff; font-size:.95rem; line-height:1.5; max-width:640px; margin:0 0 18px; }
.ipuc-hero-stats{ display:flex; flex-wrap:wrap; gap:0; }
.ipuc-hero-stat{ padding:0 28px; border-right:1px solid rgba(255,255,255,.3); }
.ipuc-hero-stat:first-child{ padding-left:0; }
.ipuc-hero-stat:last-child{ border-right:none; }
.ipuc-hero-stat-top{ display:flex; align-items:center; gap:8px; color:#fff; font-size:.9rem; margin-bottom:3px; }
.ipuc-hero-stat-top svg{ flex-shrink:0; width:16px; height:16px; }
.ipuc-hero-stat-price{ font-weight:700; font-size:1.1rem; color:#dce8fa; }
.ipuc-hero-stat-label{ font-weight:700; color:#fff; font-size:.95rem; }
.ipuc-hero-note{ color:rgba(255,255,255,.75); font-size:.76rem; margin-top:10px; }

.ipuc-hero-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:18px; }
.ipuc-hero-btn-primary{
  display:inline-flex; align-items:center; gap:7px;
  background:#1e498b !important;
  color:#fff !important; font-weight:700; font-size:.78rem;
  padding:9px 15px; border-radius:7px;
  text-decoration:none !important;
}
.ipuc-hero-btn-primary svg{
  width:12px !important; height:12px !important;
  flex-shrink:0; fill:currentColor;
}
.ipuc-hero-btn-secondary{
  color:#fff !important; font-weight:700; font-size:.78rem;
  text-decoration:none !important;
}

@media (max-width:900px){
  .ipuc-hero-card{ max-width:none; padding:28px; }
  .ipuc-hero-title{ font-size:2rem; }
  .ipuc-hero-stats{ flex-direction:column; gap:14px; }
  .ipuc-hero-stat{ padding:0; border-right:none; }
}

/* Fila hero con columna vacía a la izquierda (revela la imagen)
   y columna de contenido a la derecha con la tarjeta + botones
   apilados juntos (para landings que usen este layout, como
   Especialización). */
.ipuc-hero-row{
  display:grid;
  grid-template-columns:760px 1fr;
  gap:14px;
  align-items:start;
}
.ipuc-hero-row .ipuc-hero-card{
  max-width:none;
  margin-left:0;
}
.ipuc-hero-row .ipuc-hero-actions{
  margin-top:18px;
}
@media (max-width:900px){
  .ipuc-hero-row{ grid-template-columns:1fr; }
  .ipuc-hero-row > div:first-child{ display:none; }
}


/* ============================================================
   5. PERFIL ASPIRANTE / EGRESADO (tarjeta lateral + tabs)
   Adaptado del naranja: la tarjeta y el panel usan neutros
   oscuros (no cambian), pero los tabs activos y su hover SÍ
   usan el color de facultad, así que van en azul hardcodeado
   (esta sección vive fuera de .ipuc-plan).
   ============================================================ */
.ipuc-perfil{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:24px;
  align-items:start;
}
.ipuc-perfil-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:#171a21;
  border:1px solid #232833;
  border-radius:14px;
  padding:20px;
}
.ipuc-perfil-card-icon{ flex-shrink:0; width:36px; height:36px; }
.ipuc-perfil-card-icon svg,
.ipuc-perfil-card-icon img{ width:100%; height:100%; display:block; }
.ipuc-perfil-card-text strong{
  display:block;
  color:#fff;
  font-size:.95rem;
  margin-bottom:6px;
}
.ipuc-perfil-card-text p{
  margin:0;
  color:#E5DCD1;
  font-size:.82rem;
  line-height:1.45;
}
.ipuc-perfil-side-stack{ display:flex; flex-direction:column; gap:10px; }
.ipuc-perfil-card-text p.ipuc-lh-tight{ line-height:1.2; }

.ipuc-perfil-tabs{ display:flex; gap:10px; margin-bottom:16px; }
.ipuc-perfil-tab{
  font-family:inherit;
  font-size:.85rem; font-weight:700;
  padding:11px 22px;
  border-radius:100px;
  border:1.5px solid #332C23;
  background:transparent;
  color:#E5DCD1;
  cursor:pointer;
  transition:all .18s ease;
}
.ipuc-perfil-tab:hover{ border-color:#1e498b; }
.ipuc-perfil-tab.active{
  background:#1e498b;
  border-color:#1e498b;
  color:#fff;
}

.ipuc-perfil-panel{
  display:none;
  background:#171a21;
  border:1px solid #232833;
  border-radius:18px;
  padding:28px 32px;
}
.ipuc-perfil-panel.active{ display:block; }
.ipuc-perfil-panel h3{
  margin:0 0 14px;
  color:#fff;
  font-size:1.1rem;
  font-weight:700;
}
.ipuc-perfil-panel p{
  margin:0;
  color:#E5DCD1;
  font-size:.9rem;
  line-height:1.6;
}

@media (max-width:680px){
  .ipuc-perfil{ grid-template-columns:1fr; }
}


/* ============================================================
   6. HERO TAGLINE + PILLS
   Banner azul bajo el hero de inicio (frase destacada + pills
   de temas). Reutiliza .ipuc-tag-pill / .ipuc-tag-pill--accent.
   ============================================================ */
.ipuc-tagline-banner{
  background:#1e498b;
  padding:40px 40px 44px;
}
.ipuc-tagline-text{
  color:#fff;
  font-weight:700;
  font-size:1.35rem;
  line-height:1.4;
  margin:0 0 22px;
  max-width:1100px;
}
.ipuc-tagline-text .ipuc-tagline-light{
  font-weight:400;
  color:#dce8fa;
}
.ipuc-tagline-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
}
.ipuc-tagline-pills .ipuc-tag-pill{ margin-bottom:0; }

@media (max-width:680px){
  .ipuc-tagline-banner{ padding:28px 20px 32px; }
  .ipuc-tagline-text{ font-size:1.1rem; }
}


/* ============================================================
   7. DIFERENCIADORES
   Grid de tarjetas blancas (ícono + label azul + título +
   descripción), seguido de tarjetas anchas con fondo crema.
   ============================================================ */
.ipuc-diff-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.ipuc-diff-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:22px;
}
.ipuc-diff-card{
  background:#fff;
  border:1px solid #d3dae5;
  border-radius:16px;
  padding:28px;
  box-shadow:none !important;
}
.ipuc-diff-card.ipuc-diff-card--wide{
  background:#e4eaf2;
  border:none;
  box-shadow:none !important;
}
.ipuc-diff-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.ipuc-diff-card-icon{
  width:36px; height:36px;
  flex-shrink:0;
  color:#1e498b;
}
.ipuc-diff-card-icon svg{ width:100%; height:100%; }
.ipuc-diff-card-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.ipuc-diff-header-text{ min-width:0; }
.ipuc-diff-label{
  display:block;
  color:#1e498b;
  font-weight:600;
  font-size:13px;
  margin-bottom:0;
  line-height:1.3;
}
.ipuc-diff-title-sm{
  font-weight:800;
  font-size:14px;
  color:#121417;
  margin:0;
  line-height:1.3;
}
.ipuc-diff-desc{
  color:#60656b;
  font-size:12px;
  line-height:1.6;
  margin:0;
}
.ipuc-diff-desc strong{ color:#121417; }

@media (max-width:900px){
  .ipuc-diff-grid{ grid-template-columns:1fr; }
  .ipuc-diff-grid-2{ grid-template-columns:1fr; }
}


/* ============================================================
   8. CHECKLIST DE CAPACIDADES
   Grid de pills alargadas con ícono de check circular azul.
   ============================================================ */
.ipuc-check-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.ipuc-check-item{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid #d3dae5;
  border-radius:12px;
  height:47.56px;
  padding:0 20px;
  box-shadow:none !important;
}
.ipuc-check-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:13.71px; height:13.71px;
  border-radius:50%;
  background:#1e498b;
  flex-shrink:0;
}
.ipuc-check-icon svg{ width:8px; height:8px; color:#fff; }
.ipuc-check-text{
  color:#121417;
  font-size:13px;
}

@media (max-width:680px){
  .ipuc-check-grid{ grid-template-columns:1fr; }
}


/* ============================================================
   9. MODALIDADES DE GRADO
   Fila de pills reutilizando .ipuc-tag-pill--accent (ya azul).
   ============================================================ */
.ipuc-modalidades-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.ipuc-modalidades-pills .ipuc-tag-pill{ margin-bottom:0; }


/* ============================================================
   10. TARJETA DE CONTACTO (formulario)
   Neutros oscuros, sin dependencia del color de facultad.
   ============================================================ */
.ipuc-contact-card{
  background:#1c1c1c;
  border-radius:18px;
  padding:32px 36px;
}
.ipuc-contact-badge{
  display:inline-block;
  background:#ff0000;
  color:#fff;
  font-weight:700;
  font-size:.65rem;
  letter-spacing:.02em;
  padding:2px 8px;
  border-radius:4px;
  margin-bottom:10px;
}
.ipuc-contact-title{
  color:#fff;
  font-size:1.3rem;
  font-weight:800;
  margin:0 0 10px;
}
.ipuc-contact-desc{
  color:#c9c2b8;
  font-size:.85rem;
  line-height:1.5;
  margin:0 0 18px;
}
.ipuc-contact-card iframe{
  display:block;
  width:100%;
  border:none;
  min-height:900px;
}

@media (max-width:680px){
  .ipuc-contact-card{ padding:24px 20px; }
  .ipuc-contact-title{ font-size:1.4rem; }
}