/* ============================================================
   Luntha — Sistema de paleta y componentes
   --------------------------------------------------------
   Este archivo se carga tarde (después de theme-refresh.css)
   para que los tokens tengan precedencia sin reescribir nada
   del theme base.

   Los tokens Luntha (--color-*) tienen dos fuentes:
     1) Default Luntha (hex fijos) — funciona si NO hay paleta
        activa en el theme.
     2) Override desde el selector de paletas del theme:
        --primary, --primary-dark, --primary-light, --accent,
        --accent-turquoise, --luntha-verde-UN
        Si el admin seleccionó "Luntha" en WP Admin → 🎨 Paleta,
        el inyector escribe esos valores en :root y nuestras
        clases .luntha-* los consumen automáticamente.

   La paleta "Luntha" en palette-selector.php está mapeada a:
     --primary            = #3D7FCC   (azul primario)
     --primary-dark       = #153159   (azul profundo)
     --primary-light      = #6FA1DD   (azul claro)
     --accent             = #A61E5C   (acento magenta)
     --accent-turquoise   = #00A8A8   (teal)
     --luntha-verde-UN      = #5DB130   (verde)
   ============================================================ */

:root {
  /* ── PRIMARY (Luntha defaults) ── */
  --color-primary:      #3D7FCC;
  --color-primary-deep: #153159;
  --color-primary-light:#6FA1DD;
  --color-primary-50:   #EAF2FC;
  --color-primary-100:  #C5D9F4;
  --color-primary-200:  #9ABDE9;
  --color-primary-300:  #6FA1DD;
  --color-primary-400:  #4982D4;
  --color-primary-500:  #3D7FCC;
  --color-primary-600:  #2E64A6;
  --color-primary-700:  #224B7E;
  --color-primary-800:  #1A385F;
  --color-primary-900:  #153159;

  /* ── SECONDARY — verde (Luntha) ── */
  --color-green:        #5DB130;
  --color-green-50:     #EEF7E5;
  --color-green-100:    #D2EAB8;
  --color-green-700:    #447D22;

  /* ── SECONDARY — teal (Luntha) ── */
  --color-teal:         #00A8A8;
  --color-teal-50:      #DDF5F5;
  --color-teal-700:     #006E6E;

  /* ── ACCENT (Luntha) ── */
  --color-accent:       #A61E5C;
  --color-accent-50:    #F7E1EC;
  --color-accent-700:   #7B1443;

  /* ── NEUTRALS ── */
  --color-ink:          #0F1A2B;
  --color-ink-muted:    #4B5563;
  --color-ink-subtle:   #6B7280;
  --color-border:       #E5E7EB;
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #F7F8FA;
  --color-overlay:      rgba(21, 49, 89, 0.65);
  --color-focus-ring:   rgba(61, 127, 204, 0.35);

  /* ── SEMÁNTICOS ── */
  --color-success:      var(--color-green);
  --color-info:         var(--color-teal);
  --color-link:         var(--color-primary);
  --color-link-hover:   var(--color-primary-deep);

  /* ── RADIOS / SOMBRAS ── */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 26, 43, 0.06);
  --shadow:    0 4px 12px rgba(15, 26, 43, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 26, 43, 0.12);
}

/* ============================================================
   BRIDGE con el selector de paletas del theme
   --------------------------------------------------------
   El inyector (med_inject_palette_css) escribe con !important
   las variables del theme (--primary, --accent, etc.) en :root.
   Si está activo, sobreescribimos los tokens Luntha para que
   los componentes .luntha-* reflejen la paleta elegida.

   Sin este bloque, el inyector del theme ganaría siempre
   (por el !important) a las variables Luntha.
   ============================================================ */

:root {
  /* Si el theme inyectó --primary, lo usamos como Luntha-primary */
  --color-primary:      var(--primary,      var(--color-primary));
  --color-primary-deep: var(--primary-dark, var(--color-primary-deep));
  --color-primary-light:var(--primary-light,var(--color-primary-light));
  --color-accent:       var(--accent,       var(--color-accent));
  --color-teal:         var(--accent-turquoise, var(--color-teal));
  --color-green:        var(--luntha-verde-UN,    var(--color-green));

  /* Las tonalidades se derivan del primary activo.
     Si la paleta activa es Luntha/Verde/Azul/etc., los
     tints 50/100/200 mantienen coherencia visual. */
  --color-primary-50:   color-mix(in srgb, var(--color-primary) 8%,  white);
  --color-primary-100:  color-mix(in srgb, var(--color-primary) 18%, white);
  --color-primary-200:  color-mix(in srgb, var(--color-primary) 30%, white);
  --color-primary-300:  color-mix(in srgb, var(--color-primary) 60%, white);
  --color-primary-500:  var(--color-primary);
  --color-primary-600:  color-mix(in srgb, var(--color-primary) 80%, black);
  --color-primary-700:  color-mix(in srgb, var(--color-primary-deep) 60%, var(--color-primary));
  --color-primary-800:  color-mix(in srgb, var(--color-primary-deep) 80%, black);
  --color-primary-900:  var(--color-primary-deep);

  --color-accent-50:    color-mix(in srgb, var(--color-accent) 12%, white);
  --color-accent-700:   color-mix(in srgb, var(--color-accent) 70%, black);

  --color-green-50:     color-mix(in srgb, var(--color-green) 12%, white);
  --color-green-100:    color-mix(in srgb, var(--color-green) 25%, white);
  --color-green-700:    color-mix(in srgb, var(--color-green) 70%, black);

  --color-teal-50:      color-mix(in srgb, var(--color-teal) 12%, white);
  --color-teal-700:     color-mix(in srgb, var(--color-teal) 70%, black);

  /* Focus ring: tinte del primary actual */
  --color-focus-ring:   color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* ============================================================
   APLICACIÓN A ELEMENTOS BASE
   ============================================================ */

a {
  color: var(--color-link);
  transition: color .15s;
}
a:hover { color: var(--color-link-hover); }

::selection { background: var(--color-primary-200); color: var(--color-primary-deep); }

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   COMPONENTES REUTILIZABLES
   Clases .luntha-* (prefijo para no chocar con el theme base).
   ============================================================ */

/* ── Botones ── */.luntha-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  font: 600 0.95rem/1 'Ancizar sans', 'Segoe UI', system-ui, sans-serif;
  border-radius: var(--radius);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .2s, color .2s, border-color .2s;
}
.luntha-btn:hover { transform: translateY(-1px); }
.luntha-btn:active { transform: translateY(0); }.luntha-btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.luntha-btn--primary:hover {
  background: var(--color-primary-deep);
  color: #fff;
  box-shadow: var(--shadow);
}.luntha-btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.luntha-btn--outline:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-deep);
}.luntha-btn--ghost {
  background: transparent;
  color: var(--color-primary-deep);
  border-color: var(--color-border);
}
.luntha-btn--ghost:hover { background: var(--color-surface-alt); color: var(--color-primary-deep); }

/* ============================================================
   HERO DE PROGRAMA (POSGRADO) — variante "compacta"
   Usado en single-programa.php cuando $es_posgrado.
   Layout: grid 2 columnas (texto | imagen), info-cards y CTAs.
   ============================================================ */.luntha-programa-hero {
  --tipo-color: #3D7FCC;
  /* Coherente con .med-hero-evento / .med-hero-noticia: sin borde, sin
     border-radius, sin box-shadow, sin top-bar. El color del tipo vive
     en los pills, los CTAs y los iconos; el contenedor en sí es plano.
     Padding-top 40px para que el breadcrumb no quede pegado al header
     institucional (que tiene su propio padding interno pero queremos
     un respiro claro entre el menú y el breadcrumb del CPT).
     Padding-bottom 8px para mantener la compacidad — la separación
     hacia el section siguiente la da .luntha-programa-hero +.section { padding-top: 16px } definido en modern-styles.css. */
  background: var(--color-surface, #fff);
  padding: 40px 0 8px;
  margin: 0;
  position: relative;
}

/* El contenido va por encima de cualquier capa absoluta que pueda
   añadir un override del ::before (ej. .luntha-programa-hero--stats). */
.luntha-programa-hero > * {
  position: relative;
  z-index: 1;
}

/* Slot de filtros dentro del hero (botones .filter-btn del theme). El padre
   pasa el HTML pre-renderizado en $archive_filters. */.luntha-archive-hero__filters {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}.luntha-archive-hero__filters .filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

/* Form de filtros dentro del hero (archive-publicacion.php): selects +
   inputs + submit + clear. Estilo outlined Luntha, alineado con el resto
   del hero. */.luntha-archive-hero__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

/* Variante inline: form que vive DENTRO de un card (luntha-header-helper
   data-layout="filter-pills"). Muestra el form como una segunda fila del
   card con un divider sutil arriba, en vez de aislado fuera del card.
   Usado en archive-publicacion.php (Colección + Año + Buscar + Filtrar
   debajo de los filter-pills de Tipo). */
.luntha-archive-hero__form--inline {
  flex-basis: 100%;          /* fuerza salto de línea dentro del card */
  justify-content: flex-start;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
}.luntha-archive-hero__select, .luntha-archive-hero__input {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-primary-deep, #153159);
  background: var(--color-surface, #fff);
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 0;
}.luntha-archive-hero__select { cursor: pointer; }
.luntha-archive-hero__select:focus,
.luntha-archive-hero__input:focus {
  border-color: var(--color-primary, #3D7FCC);
  box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(61,127,204,0.35));
}
.luntha-archive-hero__select:hover,
.luntha-archive-hero__input:hover {
  border-color: var(--color-primary-200, #9ABDE9);
}

/* Luntha button — variante small (compacta para usar dentro del hero). */.luntha-btn--sm {
  padding: 0.5rem 1rem !important;
  font-size: 0.85rem !important;
  border-radius: 999px !important;
}

/* Chips de filtros activos (muestra contexto arriba del form). */.luntha-active-chip {
  display: inline-block;
  background: var(--color-primary-50, #EAF2FC);
  color: var(--color-primary-deep, #153159);
  border: 1px solid var(--color-primary-100, #C5D9F4);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0 0.25rem;
}.luntha-archive-hero__chips {
  margin-top: 0.5rem;
  text-align: center;
}

/* ── Publication cards: barra Luntha top + tipo label filled ─────
   Cada card tiene --card-color (set inline en archive-publicacion.php
   según el tipo: teal/accent/green/ink-muted). La barra superior ::before
   hace que el color sea visible incluso con thumbnail. */.pub-card {
  position: relative;
  overflow: hidden;
  padding-top: 22px !important; /* espacio para la barra top */
}
.pub-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--card-color, var(--color-primary, #3D7FCC));
  z-index: 2;
}
/* Educacion cards: misma barra Luntha top */.edu-card {
  position: relative;
  overflow: hidden;
  padding-top: 22px !important;
}
.edu-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--card-color, var(--color-primary, #3D7FCC));
  z-index: 2;
}
/* Tipo label filled con el color del tipo (más protagonismo) */.pub-card__tipo-pill {
  background: var(--card-color, var(--color-primary, #3D7FCC)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}.luntha-programa-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 992px) {.luntha-programa-hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 2.5rem;
  }
}

/* Pills del hero: tag (tipo) + acreditacion + snies. Estilo único compartido
   para que los tres se vean uniformes en la misma fila. */.luntha-programa-hero__tag {
  display: inline-flex;
  align-items: center;
  background: var(--tipo-color, var(--color-primary, #3D7FCC));
  color: #fff;
  border: 1.5px solid var(--tipo-color, var(--color-primary, #3D7FCC));
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--tipo-color, #3D7FCC) 35%, transparent);
}
/* Tag (PREGRADO) puede tener margin-bottom solo, no entre pills */.luntha-programa-hero__tag {
  margin-bottom: 0;
}.luntha-programa-hero__title {
  font-family: "Ancizar Serif", "Times New Roman", serif;
  color: var(--color-primary-deep);
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}.luntha-programa-hero__desc {
  color: var(--color-primary-deep);
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0.8rem 0 1.25rem;
  max-width: 60ch;
  opacity: 0.85;
}
.luntha-programa-hero__desc:last-of-type {
  margin-bottom: 1.5rem;
}.luntha-programa-hero__desc-link--primary {
  color: var(--color-primary-deep);
  font-weight: 700;
}.luntha-programa-hero__desc-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.luntha-programa-hero__desc-link:hover {
  border-bottom-color: currentColor;
}.luntha-programa-hero__info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  padding: 16px 0;
  margin: 4px 0 1.5rem;
  border-top: 1px solid #e2e4e7;
  border-bottom: 1px solid #e2e4e7;
}.luntha-programa-hero__card--wide { grid-column: 1 / -1; }

/* Card sin contenedor visible: estilo alineado con .med-meta-item de educacion_continuada.
   Solo icono + label + value en fila, sin border/background/border-radius.
   El "frame" lo aporta el parent (.luntha-programa-hero__info) con border-top/bottom. */.luntha-programa-hero__card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.4rem 0;
  transition: transform .15s;
}
.luntha-programa-hero__card:hover {
  transform: translateY(-1px);
}.luntha-programa-hero__card-icon {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tipo-color, #3D7FCC) 18%, transparent);
  color: var(--tipo-color, var(--color-primary, #3D7FCC));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tipo-color, #3D7FCC) 25%, transparent);
  /* Font stack con soporte de emojis nativos en macOS, Windows, Linux, Android.
     El orden importa: el primer font que tenga el glifo gana. Los browsers
     headless (Playwright/Chromium) suelen caer al fallback sin emoji, donde
     WP inyecta un <img> con src a s.w.org (reemplazo por twemoji-like).
     En ese caso el CSS img.emoji { width/height: 20px } debajo fuerza el
     tamaño del placeholder. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", "Android Emoji", sans-serif;
}
/* WordPress reemplaza los emojis en el front-end por <img class="emoji" src="…s.w.org/...svg">.
   Esos <img> no tienen width/height explícitos, así que se colapsan a 0×0 dentro del
   círculo de 40px. Forzamos 20px×20px (alineado con el font-size del span) para
   que el emoji se vea centrado. Aplica a los iconos del hero de archive + singles
   (programa, dependencia, noticia, evento, edu-continuada) que reusan la misma clase. */
.luntha-programa-hero__card-icon img,
.luntha-programa-hero__card-icon img.emoji {
  width: 20px;
  height: 20px;
  display: block;
}.luntha-programa-hero__card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}.luntha-programa-hero__card-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tipo-color, var(--color-primary, #3D7FCC));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}.luntha-programa-hero__card-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary-deep);
  line-height: 1.3;
  word-wrap: break-word;
}.luntha-programa-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Fila de pills (tag + acreditacion + snies) en la parte superior del hero
   image-based. Los pills comparten estilo via .luntha-programa-hero__pill. */.luntha-programa-hero__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* ── Stats-forward variant (sin imagen, color por tipo) ─────
   Variante del luntha-programa-hero centrada en info:
   - tag colored por tipo (--tipo-color)
   - title + subtitle + status line
   - 5 stat cards (Duración, Créditos, Modalidad, SNIES, Acreditación)
   - CTAs: Inscríbete primary (filled tipo-color) + outline + ghost */.luntha-programa-hero--stats {
  --tipo-color: #3D7FCC;
  text-align: center;
  background: var(--color-surface, #fff);
  position: relative;
  padding: 2rem 1.5rem 2.25rem;
  border-radius: 16px;
  border: 2px solid color-mix(in srgb, var(--tipo-color) 35%, transparent);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--tipo-color) 15%, transparent);
}
/* Override del ::after del .luntha-programa-hero base: en stats-forward
   el tinte ya viene del background, así que ocultamos el radial primario
   (que si no叠加aría con un tinte azul genérico que no coincide con el tipo). */
.luntha-programa-hero--stats::after { display: none; }
/* Y el ::before de la línea multi-color la reemplazamos por un top-bar
   Luntha sólido del tipo (más identidad, menos arcoíris). */
.luntha-programa-hero--stats::before {
  background: var(--tipo-color);
  opacity: 1;
  height: 5px;
  top: 0;
}.luntha-programa-hero--stats .luntha-programa-hero__top {
  margin-bottom: 1.75rem;
}.luntha-programa-hero--stats .luntha-programa-hero__tag {
  background: var(--tipo-color);
  color: #fff;
  border-color: var(--tipo-color);
  font-size: 0.88rem;
  padding: 0.6rem 1.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--tipo-color) 45%, transparent);
}.luntha-programa-hero--stats .luntha-programa-hero__title {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  margin: 0.4rem auto 0.4rem;
  max-width: 36ch;
  color: var(--color-primary-deep, #153159);
}.luntha-programa-hero--stats .luntha-programa-hero__subtitle {
  color: var(--color-primary-deep, #153159);
  font-size: 1rem;
  font-weight: 600;
  margin: 0.4rem auto 0.7rem;
  max-width: 90ch;
  max-width: 50ch;
  opacity: 0.85;
}
/* Status pill: Luntha sólido grande, con sombra fuerte — presencia real */.luntha-programa-hero--stats .luntha-programa-hero__status {
  color: #fff;
  background: var(--tipo-color);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0 auto 0.5rem;
  display: inline-block;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tipo-color) 50%, transparent);
  text-transform: uppercase;
}

/* Stats grid: max 220px por card → centra items sueltos
   1-2 items: 1-2 cards de 220px centradas
   3 items: 3 cards de 220px
   4 items: 4 cards de 220px
   5+ items: se reduce o wrappea */.lp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 220px));
  gap: 1rem;
  margin: 0 auto 1.5rem;
  justify-content: center;
}.lp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-surface, #fff);
  border: 1.5px solid color-mix(in srgb, var(--tipo-color, #3D7FCC) 30%, transparent);
  border-top: 5px solid var(--tipo-color, var(--color-primary, #3D7FCC));
  border-radius: 12px;
  padding: 1.25rem 0.85rem 1.05rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lp-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tipo-color, #3D7FCC) 25%, transparent);
  border-color: color-mix(in srgb, var(--tipo-color, #3D7FCC) 50%, transparent);
}.lp-stat__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tipo-color, #3D7FCC) 22%, transparent);
  color: var(--tipo-color, #3D7FCC);
  margin-bottom: 0.7rem;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tipo-color, #3D7FCC) 30%, transparent);
}.lp-stat__value {
  font-family: "Ancizar Serif", "Times New Roman", serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary-deep, #153159);
  margin-bottom: 0.25rem;
  word-break: break-word;
}.lp-stat__label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tipo-color, var(--color-primary, #3D7FCC));
}

/* CTAs en stats-forward: el primary usa el color del tipo */.luntha-programa-hero--stats .luntha-programa-hero__cta {
  justify-content: center;
  margin-top: 0.5rem;
}.lp-btn-tipo {
  background: var(--tipo-color, #3D7FCC) !important;
  border-color: var(--tipo-color, #3D7FCC) !important;
  color: #fff !important;
  font-size: 0.95rem;
  padding: 0.8rem 1.6rem;
  font-weight: 700;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tipo-color, #3D7FCC) 40%, transparent);
}
.lp-btn-tipo:hover {
  background: color-mix(in srgb, var(--tipo-color, #3D7FCC) 88%, #000) !important;
  border-color: color-mix(in srgb, var(--tipo-color, #3D7FCC) 88%, #000) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--tipo-color, #3D7FCC) 55%, transparent);
  transform: translateY(-1px);
}.lp-btn-share {
  cursor: pointer;
}.lp-btn-share.is-copied {
  color: var(--color-green, #5DB130);
}

@media (max-width: 640px) {.luntha-programa-hero--stats .luntha-programa-hero__title {
    font-size: 1.75rem;
  }.lp-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }.luntha-programa-hero--stats .luntha-programa-hero__cta {
    flex-direction: column;
  }.luntha-programa-hero--stats .luntha-programa-hero__cta .luntha-btn {
    width: 100%;
    justify-content: center;
  }
}.luntha-programa-hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Aspect ratio responsive: a mayor ancho del viewport, el area visible se
     hace MAS ANCHA (landscape) para aprovechar mejor la columna 1fr en grids
     anchos. */
  aspect-ratio: 4 / 3;
  background: var(--color-surface-alt);
  /* Border Luntha prominente + shadow de color para identidad de tipo */
  border: 3px solid color-mix(in srgb, var(--tipo-color, #3D7FCC) 45%, transparent);
  box-shadow:
    0 12px 36px color-mix(in srgb, var(--tipo-color, #3D7FCC) 25%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.luntha-programa-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.luntha-programa-hero__media:hover img {
  transform: scale(1.04);
}
/* Aspect ratios progresivamente más anchos para que la imagen no domine
   verticalmente al hero cuando el contenido (pills + título + 3 cards + CTAs)
   es más bajo que la imagen con ratio 4/3 default. */
@media (min-width: 1200px) {.luntha-programa-hero__media { aspect-ratio: 16 / 9; }   /* 1.78 */
}
@media (min-width: 1400px) {.luntha-programa-hero__media { aspect-ratio: 2 / 1; }     /* 2.0  */
}
@media (min-width: 1600px) {.luntha-programa-hero__media { aspect-ratio: 5 / 2; }     /* 2.5  */
}
@media (max-width: 991.98px) {
  /* Ocultar la imagen del hero en mobile/tablet. Solo aparece en desktop.
     El content del hero ocupa el 100% del ancho del grid en mobile. */.luntha-programa-hero__media { display: none; }
}

/* ── Docente: avatar fallback (cuando el docente no tiene foto) ──
   Mismo contenedor que .luntha-programa-hero__media pero con un
   gradiente azul Luntha y la inicial del nombre centrada. Reusa las
   clases del hero de programa para mantener el lenguaje visual. */.luntha-programa-hero__media--docente {
  display: flex;
  align-items: center;
  justify-content: center;
}.luntha-docente-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3D7FCC 0%, #2a5da8 100%);
  color: #fff;
  font-family: 'Ancizar Serif', Georgia, serif;
  font-weight: 700;
  font-size: clamp(5rem, 12vw, 10rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
/* En mobile/tablet el avatar (que es el único elemento visual del
   docente cuando no hay foto) debe ocupar menos alto. Sin esta regla
   el aspect-ratio 4/3 lo hace demasiado dominante y rompe el
   balance del hero. */
@media (max-width: 991.98px) {.luntha-programa-hero__media--docente {
    aspect-ratio: 16 / 9;
    max-width: 360px;
    margin: 0 auto;
  }.luntha-docente-avatar {
    font-size: clamp(3.5rem, 14vw, 6rem);
  }
}

/* ── Docente: layout portrait-friendly ──
   El programa usa un media column ancho (1fr vs 1.2fr) pensado para
   imágenes landscape del campus. Para docentes la foto de perfil suele
   ser vertical (3:4 o 2:3), así que:
     1. Apretamos la columna del media con un grid override
        (más espacio para el contenido, menos para la imagen).
     2. Forzamos aspect-ratio portrait (3:4) y cap de altura
        para que una foto vertical se vea natural sin recorte agresivo.
     3. object-fit: cover recorta el sobrante sin deformar. */.luntha-programa-hero--docente .luntha-programa-hero__grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 2rem;
}
/* Compactar espaciado vertical entre secciones del docente: como el
   hero del docente tiene 7 elementos stacked (pills, title, lineas,
   info, perfiles, ctas) hay que apretar los gaps para que el avatar
   no quede flotando en un mar de blanco. */.luntha-programa-hero--docente .luntha-programa-hero__pills {
  margin-bottom: 0.5rem;
}.luntha-programa-hero--docente .luntha-programa-hero__title {
  margin: 0 0 10px;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
}.luntha-programa-hero--docente .luntha-programa-hero__areas {
  margin: 0 0 0.6rem;
  gap: 0.4rem 0.55rem;
}.luntha-programa-hero--docente .luntha-programa-hero__info {
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}.luntha-programa-hero--docente .luntha-programa-hero__card {
  padding: 0.6rem 0.8rem;
  gap: 0.65rem;
}.luntha-programa-hero--docente .luntha-programa-hero__card-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}
.luntha-programa-hero--docente .luntha-programa-hero__card-icon svg {
  width: 15px;
  height: 15px;
}.luntha-programa-hero--docente .luntha-programa-hero__card-label {
  font-size: 0.65rem;
  margin-bottom: 1px;
}.luntha-programa-hero--docente .luntha-programa-hero__card-value {
  font-size: 0.85rem;
}.luntha-programa-hero--docente .luntha-programa-hero__profiles {
  margin: 0 0 0.7rem;
}.luntha-programa-hero--docente .luntha-programa-hero__profiles-label {
  margin-bottom: 0.35rem;
  font-size: 0.65rem;
}.luntha-programa-hero--docente .luntha-programa-hero__profiles-list {
  gap: 0.35rem;
}.luntha-programa-hero--docente .luntha-programa-hero__profile {
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  gap: 0.35rem;
}.luntha-programa-hero--docente .luntha-programa-hero__cta {
  gap: 0.5rem;
}.luntha-programa-hero--docente .luntha-programa-hero__cta .luntha-btn {
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
}.luntha-programa-hero--docente .luntha-programa-hero__media {
  aspect-ratio: 3 / 4;
  max-width: 280px;
  max-height: 360px;
  width: 100%;
  justify-self: end;
  align-self: start;
}
.luntha-programa-hero--docente .luntha-programa-hero__media img {
  /* object-fit: cover (heredado) recortará la foto vertical sin deformar */
  object-position: center 20%;
}.luntha-programa-hero--docente .luntha-docente-avatar {
  font-size: clamp(3.5rem, 7vw, 6.5rem);
}
@media (max-width: 991.98px) {.luntha-programa-hero--docente .luntha-programa-hero__grid {
    grid-template-columns: 1fr;
  }.luntha-programa-hero--docente .luntha-programa-hero__media {
    max-width: 240px;
    max-height: 300px;
    margin: 0 auto;
  }
}

/* ============================================================
   MEGA-MENÚ (#main_menu_dropdown) — respeta paleta Luntha
   --------------------------------------------------------
   Override del amarillo #F2C94C y los azules hardcoded que
   usa med-navbar.css en el contenedor del mega-menú.
   Se aplica al bloque de 3 columnas y al header de grupo
   que aparece al desplegar Talento Humano, Oferta Académica,
   Dependencias, etc.
   ============================================================ */

/* Fondo del mega-menú (antes: #F2C94C) */
#main_menu_dropdown {
  background: var(--color-primary-50) !important;
}

/* Header de grupo: "TALENTO HUMANO", "OFERTA ACADÉMICA", etc.
   Antes: color #1a3a5c, border-bottom 2px solid #1a3a5c */
#main_menu_dropdown.group-header {
  color: var(--color-primary-deep) !important;
  border-bottom-color: var(--color-primary) !important;
}

/* Items del mega-menú — color base */
#main_menu_dropdown.col-items .dropdown-item {
  color: var(--color-ink) !important;
}

/* Hover: usa tinte Luntha con borde accent */
#main_menu_dropdown .col-items .dropdown-item:hover,
#main_menu_dropdown .col-items .dropdown-item:focus {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-primary-deep) !important;
  border-left-color: var(--color-accent) !important;
}

/* Sombra más coherente con el theme (era rgba(0,0,0,.14)) */
#main_menu_dropdown {
  box-shadow: 0 10px 28px rgba(15, 26, 43, 0.10) !important;
}

/* ============================================================
   PROGRAMA — Sección Profesores (grid de cards)
   ============================================================ */.med-profesores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}.med-profesor-card {
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
  padding: 0.85rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 8px);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.med-profesor-card:hover {
  border-color: var(--color-primary-200, #c7d8f0);
  box-shadow: 0 4px 12px rgba(13, 25, 43, 0.06);
  transform: translateY(-1px);
}.med-profesor-card__foto {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-alt, #f7f8fa);
}.med-profesor-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}.med-profesor-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}.med-profesor-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}
.med-profesor-card__name a {
  color: var(--color-ink, #0F1A2B);
  text-decoration: none;
}
.med-profesor-card__name a:hover {
  color: var(--color-primary, #3D7FCC);
  text-decoration: underline;
}.med-profesor-card__cargo {
  font-size: 0.78rem;
  color: var(--color-ink-muted, #4B5563);
  margin: 0;
}.med-profesor-card__areas {
  font-size: 0.72rem;
  color: var(--color-ink-subtle, #6B7280);
  margin: 0;
  font-style: italic;
}.med-profesor-card__correo {
  font-size: 0.72rem;
  margin: 2px 0 0;
}
.med-profesor-card__correo a {
  color: var(--color-primary, #3D7FCC);
  text-decoration: none;
  word-break: break-all;
}
.med-profesor-card__correo a:hover {
  text-decoration: underline;
}

/* ── Shortcode [med_docentes] — layout grid (reusa .med-profesor-card) ── */.med-profesores-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}.med-profesores-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.med-profesores-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }.med-profesores-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 768px) {.med-profesores-grid--cols-2, .med-profesores-grid--cols-3, .med-profesores-grid--cols-4 { grid-template-columns: 1fr; }
}

/* Avatar fallback cuando el docente no tiene foto */.med-profesor-card__foto--fallback {
  background: linear-gradient(135deg, #3D7FCC 0%, #2a5da8 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  font-size: 3rem;
  font-weight: 600;
  font-family: 'Ancizar Serif', Georgia, serif;
}.med-profesor-card__orcid {
  font-size: 0.7rem;
  margin: 4px 0 0;
}
.med-profesor-card__orcid a {
  color: #a6ce39;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.med-profesor-card__orcid a:hover { text-decoration: underline; }

/* ── Shortcode [med_docentes] — layout list ── */.med-docentes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}.med-docentes-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e2e4e7;
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.med-docentes-list__item:hover {
  border-color: #c0d3eb;
  box-shadow: 0 2px 6px rgba(61, 127, 204, 0.08);
}.med-docentes-list__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3D7FCC 0%, #2a5da8 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.05rem;
  font-family: 'Ancizar Serif', Georgia, serif;
}.med-docentes-list__body {
  flex-grow: 1;
  min-width: 0;
}.med-docentes-list__name {
  margin: 0;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
}
.med-docentes-list__name a { color: #2a2a2a; text-decoration: none; }
.med-docentes-list__name a:hover { color: #3D7FCC; }.med-docentes-list__cargo, .med-docentes-list__areas {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: #6b7280;
  line-height: 1.3;
}.med-docentes-list__email {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: #3D7FCC;
  text-decoration: none;
  word-break: break-all;
  max-width: 220px;
  text-align: right;
}
.med-docentes-list__email:hover { text-decoration: underline; }
@media (max-width: 600px) {.med-docentes-list__email { display: none; }
}

/* ── Shortcode [med_docentes] — empty state ── */.med-docentes-empty {
  padding: 18px 22px;
  background: #f6f8fa;
  border-left: 3px solid #c0d3eb;
  border-radius: 4px;
  color: #6b7280;
  font-style: italic;
  font-size: 0.95rem;
}

/* ── Shortcode [med_docentes] — title (opcional) ── */.med-docentes-title {
  margin: 0 0 18px;
}

/* ── Shortcode [med_docentes] — filtro (buscador + área + dedicación) en cliente ──
   Siempre horizontal con flex-wrap: los items se acomodan en una fila cuando
   caben y se wrappean a la siguiente línea en contenedores estrechos (ej. un
   sidebar col-lg-4). El search crece con flex para ocupar el espacio libre
   y los selects mantienen su contenido. Esto evita el "todo apilado" feo
   que se ve cuando el filtro cae en una caja estrecha. */.med-docentes-filter {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 22px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
  border: 1px solid #d6e3f4;
  border-radius: 10px;
}
.med-docentes-filter > * { min-width: 0; }

/* Buscador: crece para ocupar el espacio libre; si el contenedor es muy
   estrecho, hace wrap a su propia línea (flex-basis 200px). */.med-docentes-filter__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 200px;
  min-width: 0;
}.med-docentes-filter__icon {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
  color: #6b7e9c;
  pointer-events: none;
}.med-docentes-filter__input {
  width: 100%;
  padding: 11px 40px 11px 38px;
  border: 1px solid #cdd9ea;
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
  color: #153159;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.med-docentes-filter__input::placeholder { color: #8aa0bf; }
.med-docentes-filter__input:focus {
  outline: none;
  border-color: #3D7FCC;
  box-shadow: 0 0 0 3px rgba(61, 127, 204, 0.15);
}
/* Quita la X nativa del input[type=search] en webkit/chromium — la manejamos nosotros */
.med-docentes-filter__input::-webkit-search-cancel-button,
.med-docentes-filter__input::-webkit-search-decoration,
.med-docentes-filter__input::-ms-clear,
.med-docentes-filter__input::-ms-reveal {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}.med-docentes-filter__clear {
  position: absolute;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3eaf5;
  color: #153159;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background-color .15s;
}
.med-docentes-filter__clear[hidden] { display: none; }
.med-docentes-filter__clear:hover { background: #c8d5ea; }

/* Bloque label + select (área / dedicación) — label y select siempre en
   la misma línea; el bloque se apila vertical en mobile y queda
   inline en row. */.med-docentes-filter__area, .med-docentes-filter__dedicacion, .med-docentes-filter__vinculacion {
  display: flex;
  align-items: center;
  gap: 8px;
}.med-docentes-filter__area-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #153159;
  white-space: nowrap;
  flex-shrink: 0;
}.med-docentes-filter__select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 32px 10px 12px;
  border: 1px solid #cdd9ea;
  border-radius: 8px;
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153159' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
    no-repeat right 10px center / 14px 14px;
  font-size: 0.92rem;
  color: #153159;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.med-docentes-filter__select:focus {
  outline: none;
  border-color: #3D7FCC;
  box-shadow: 0 0 0 3px rgba(61, 127, 204, 0.15);
}

/* Contador: empujado a la derecha con margin-left:auto, no crece. */.med-docentes-filter__count {
  font-size: 0.82rem;
  font-weight: 600;
  color: #4a6480;
  background: #eef4fc;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #d6e3f4;
  white-space: nowrap;
  margin-left: auto;
}

/* ── Mobile (< 720px): cada item ocupa fila propia para que el search
   tenga todo el ancho y los selects no se corten. Sin esto, el filter
   en columnas estrechas (sidebar col-lg-4) muestra el search cortado
   "Buscar por nombre, ár…" y los selects desbordados. */
@media (max-width: 719px) {.med-docentes-filter {
    flex-direction: column;
    align-items: stretch;
  }.med-docentes-filter__search, .med-docentes-filter__area, .med-docentes-filter__dedicacion, .med-docentes-filter__vinculacion, .med-docentes-filter__count {
    flex: 0 0 auto;
    width: 100%;
  }.med-docentes-filter__count { margin-left: 0; }
}

/* ── Tablet (≥ 720px): un poco más de padding y gap ── */
@media (min-width: 720px) {.med-docentes-filter { gap: 10px 14px; padding: 12px 16px; }.med-docentes-filter__search { flex: 1 1 240px; }
}

/* ── Desktop (≥ 1024px): breathing room ── */
@media (min-width: 1024px) {.med-docentes-filter { gap: 10px 14px; padding: 12px 18px; }.med-docentes-filter__search { flex: 1 1 280px; }
}.med-docentes-filter__no-results {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: #fff8ec;
  border: 1px solid #f0d8a8;
  border-left: 3px solid #d4a13b;
  border-radius: 6px;
  color: #7a5a1e;
  font-size: 0.92rem;
}

/* ============================================================
   ARCHIVE HERO — variante MINIMAL (default 2026-07-28)
   El header de un listado no necesita ser "showcase": solo breadcrumb +
   título + tag (CPT) + lead corto + filtros. Sin grid 2-col, sin imagen
   lateral, sin info-cards. Padding compacto (32px top, 24px bottom)
   para que el grid de cards del listado sea el protagonista visual.
   ============================================================ */.luntha-archive-header {
  padding: 32px 0 24px;
  /* Sin background propio — el hero hereda el bg de la section padre
     (section-light / section-gray / white según el page). Antes tenía
     `background: var(--color-surface, #fff)` que pintaba un card blanco
     aislado alrededor del hero, haciéndolo parecer "de otro sitio" en
     páginas con section-gray. Ahora el header se ve continuo con la
     section, como el resto del theme. */
  margin: 0;
  position: relative;
}.luntha-archive-header .med-hero-breadcrumbs {
  margin-bottom: 12px;
}.luntha-archive-header__title {
  font-family: "Ancizar Serif", "Times New Roman", serif;
  color: #0c2444;
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  max-width: 36ch;
}.luntha-archive-header__tag {
  display: inline-block;
  background: var(--tipo-color, #3D7FCC);
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  /* Para que el tag pueda ir DESPUÉS del título sin romper el ritmo
     (el orden en el HTML es breadcrumb → title → tag → desc → filtros). */
  box-shadow: 0 2px 6px color-mix(in srgb, var(--tipo-color, #3D7FCC) 20%, transparent);
}.luntha-archive-header__desc {
  color: #4a5568;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 0;
  max-width: 70ch;
}.luntha-archive-header__filters {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Separación uniforme header→section (24px). Regla centralizada en
   modern-styles.css (selector universal para todos los heroes/headers).
   NO duplicar aquí — el adyacente de modern-styles.css ya cubre
   .luntha-archive-header. */

/* ============================================================
   CARD-INFO — estándar de cards del theme (2026-08-13)
   --------------------------------------------------------------
   Promotion: el patrón compacto de card-dependencia.php (sesión
   2026-08-13) pasa a ser el estándar. Reemplaza el diseño previo
   de "info-rows" (más cuadrado, tag rectangular, value coloreado).
   El nuevo diseño es:
     - Borde superior coloreado (4px) por categoría
     - Pill tag (en lugar de rectángulo)
     - Rows con grid (icon | body | action opcional)
     - Footer con "Ver detalle →" coloreado
   Hover: lift + sombra coloreada por categoría.

   Variantes:
     - Default (compacta, sin imagen)
     - .card-info--with-image: media 16:9 con hover zoom arriba
   ============================================================ */
.card-info {
    --tipo-color: #3D7FCC;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 26, 43, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card-info::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--tipo-color);
}
.card-info:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 28px rgba(15, 26, 43, 0.10),
        0 0 0 1px color-mix(in srgb, var(--tipo-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--tipo-color) 25%, transparent);
}

/* Ocultar card vía JS (search/filter client-side) */
.card-info.is-hidden,
.card-image.is-hidden { display: none; }

/* ---- Media (imagen opcional) ---- */
.card-info--with-image { padding: 0; }
.card-info__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e5e7eb;
    position: relative;
}
.card-info__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.card-info:hover .card-info__media img { transform: scale(1.04); }

/* ---- Body ---- */
.card-info__body {
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
/* Variante sin imagen: padding igual al body para layout consistente */
.card-info:not(.card-info--with-image) { padding: 18px 20px 16px; }
.card-info:not(.card-info--with-image) .card-info__body { padding: 0; }

/* ---- Header: tag + título ---- */
.card-info__header {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}
.card-info__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    background: color-mix(in srgb, var(--tipo-color) 12%, transparent);
    color: var(--tipo-color);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
    line-height: 1.2;
}
.card-info__tag::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--tipo-color);
    border-radius: 50%;
}
.card-info__title {
    font-size: 17px;
    line-height: 1.3;
    margin: 0;
    color: #0c2444;
    font-weight: 700;
}
.card-info__title a {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.card-info__title a:hover { color: var(--tipo-color); }

/* ---- Rows (icon + label + value, +action opcional) ---- */
.card-info__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.card-info__row {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.4;
}
.card-info__row--with-action {
    grid-template-columns: 28px 1fr auto;
}
.card-info__icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: #f8fafc;
    border-radius: 8px;
    color: #475569;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", "Android Emoji", sans-serif;
    line-height: 1;
}
.card-info__icon svg { width: 14px; height: 14px; display: block; }
.card-info__icon img,
.card-info__icon img.emoji { width: 16px; height: 16px; display: block; }
.card-info__row-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.card-info__row-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 1px;
    line-height: 1.2;
}
.card-info__row-value {
    color: #0c2444;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.card-info__row-value--muted { color: #94a3b8; font-style: italic; }
.card-info__row-value--link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}
.card-info__row-value--link:hover { border-bottom-color: currentColor; }

/* ---- Action button (right side of a row) ---- */
.card-info__row-action {
    display: flex;
    align-items: center;
}
.card-info__action {
    width: 30px; height: 30px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #475569;
    text-decoration: none;
    transition: all .15s;
}
.card-info__action svg { width: 14px; height: 14px; }
.card-info__action:hover {
    border-color: var(--tipo-color);
    color: var(--tipo-color);
    background: color-mix(in srgb, var(--tipo-color) 8%, #fff);
}
.card-info__action--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Footer / CTA ----
   Importante: el partial usa el elemento semántico <footer>, pero el theme
   tiene una regla global `footer { background:#666; color:#ddd; padding:15px 0 25px;
   font-size:.9em }` en unal.css. Tenemos que sobreescribir TODO lo que esa
   regla global pueda tocar para que el footer del card conserve su estilo. */
.card-info__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 12px 0 0;
    background: transparent;
    color: inherit;
    font-size: 13px;
    border-top: 1px solid #f1f5f9;
    box-sizing: border-box;
    flex-shrink: 0;
}
.card-info__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--tipo-color);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: gap .15s;
}
.card-info__cta:hover { gap: 10px; }
.card-info__cta svg { width: 12px; height: 12px; }

/* ============================================================
   CARD-IMAGE — Variante con imagen header + info-rows
   ============================================================ */.card-image {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e4e7;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  height: 100%;
}
.card-image:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px var(--tipo-color, #3D7FCC) 30;
  border-color: var(--tipo-color, #3D7FCC);
}

/* Image header — adapta la altura al aspect ratio natural de la imagen
   para que NO se recorte cuando la imagen es más ancha que 4:3 (ej: el
   banner 768x246 = ~3.12:1 que usa Medicina General se cortaba por los
   lados y mostraba solo "Medicin..." en vez de "Medicina").
   object-fit: cover ahora es un fallback para imágenes más altas que
   anchas (ej: portrait 3:4) — en ese caso cubre el ancho con crop vertical
   centrado, mejor que dejar bandas vacías. */
.card-image__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: #f1f5f9;
}
.card-image__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.card-image:hover .card-image__media img {
  transform: scale(1.04);
}.card-image__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}.card-image__emoji {
  font-size: 3rem;
  line-height: 1;
}

/* Tag overlay (esquina sup-izq) */.card-image__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--tipo-color, #3D7FCC);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Body — más compacto */.card-image__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  flex: 1;
}.card-image__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0c2444;
}
.card-image__title a {
  color: inherit;
  text-decoration: none;
}
.card-image__title a:hover {
  color: var(--tipo-color, #3D7FCC);
}

/* Rows (reusan patrón de card-info pero más compacto) */.card-image__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
}.card-image__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid #f1f5f9;
}
.card-image__row:first-child {
  border-top: none;
  padding-top: 2px;
}.card-image__icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tipo-color, #3D7FCC) 14;
  border-radius: 50%;
  font-size: 0.85rem;
  flex-shrink: 0;
}.card-image__row-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}.card-image__row-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #646970;
  font-weight: 600;
  line-height: 1.2;
}.card-image__row-value {
  font-size: 0.8rem;
  color: var(--tipo-color, #3D7FCC);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Forzar tamaño del <img class="emoji"> que WP inyecta */
.card-image__icon img,
.card-image__icon img.emoji {
  width: 14px;
  height: 14px;
  display: block;
}