/* ============================================================
   MODERN 2026 — Capa de modernización visual UTC
   Se carga DESPUÉS de style2026.css. Bootstrap 3 (grid/JS) +
   Tailwind prefijado tw-* (utilidades) conviven sin conflicto.
   Paleta institucional: teal #03A688 · naranja #F27405 · slate-50
   Contenido/estructura: intacto.
   ============================================================ */

:root {
  --m-teal: #03A688;
  --m-teal-d: #028a72;
  --m-teal-050: #ecfdf7;
  --m-teal-100: #d2f6ea;
  --m-orange: #F27405;
  --m-orange-d: #d96504;
  --m-orange-050: #fff4ea;
  --m-ink: #0f172a;
  --m-gray: #475569;
  --m-gray-2: #64748b;
  --m-line: #e2e8f0;
  --m-bg: #f8fafc;
  --m-card: #ffffff;
  --m-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --m-shadow: 0 6px 24px rgba(15, 23, 42, .07);
  --m-shadow-lg: 0 18px 45px rgba(15, 23, 42, .14);
  --m-shadow-teal: 0 12px 32px rgba(3, 166, 136, .18);
  --m-r-sm: 10px;
  --m-r: 16px;
  --m-r-lg: 22px;
  --m-ease: cubic-bezier(.22, .61, .36, 1);
  --m-nav-h: 64px;
}

/* ---------- 0. base ---------- */
html {
  scroll-behavior: smooth;
}

body {
  background-color:var(--m-bg);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--m-gray);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

/* títulos con presencia */
h1,
h2,
h3,
h4 {
  color: var(--m-ink);
  letter-spacing: -0.02em;
}

p {
  line-height: 1.7;
}

/* skip-link accesibilidad */
.mu-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background:var(--m-ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 12px 0;
  font-size: 14px;
}

.mu-skip-link:focus {
  left: 0;
}

/* ---------- 1. TOP BAR (correo/tel/redes) ---------- */
#mu-header {
  background:#fff;
  border-bottom: 1px solid var(--m-line);
}

#mu-header .mu-header-area {
  padding: 8px 0;
}

#mu-header .mu-top-email,
#mu-header .mu-top-phone {
  font-size: 13px;
  color: var(--m-gray-2);
}

#mu-header .mu-top-email a {
  color: var(--m-teal);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s var(--m-ease);
}

#mu-header .mu-top-email a:hover {
  color: var(--m-orange);
}

#mu-header .mu-top-email i,
#mu-header .mu-top-phone i {
  color: var(--m-orange);
  margin-right: 6px;
}

#mu-header .mu-top-social-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

#mu-header .mu-top-social-nav li {
  display: inline-block;
  float: none;
  margin: 0;
}

#mu-header .mu-top-social-nav li a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:var(--m-bg);
  color: var(--m-teal);
  transition: all .25s var(--m-ease);
  font-size: 13px;
}

#mu-header .mu-top-social-nav li a:hover {
  background:var(--m-teal);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--m-shadow-teal);
}

@media (max-width: 767px) {
  #mu-header {
    display: none;
  }
}

/* ---------- 2. NAVBAR sticky moderno ---------- */
#mu-menu {
  position: sticky;
  top: 0;
  z-index: 1030;
}

#mu-menu .navbar-default {
  background-color:rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: 0 1px 0 var(--m-line);
  transition: box-shadow .3s var(--m-ease);
}

#mu-menu .navbar-default::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background:linear-gradient(90deg, var(--m-teal) 0%, var(--m-teal) 70%, var(--m-orange) 100%);
  opacity: .9;
}

#mu-menu .navbar {
  min-height: var(--m-nav-h);
  border-bottom: none !important;
}

#mu-menu .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#mu-menu .navbar-header {
  float: none;
}

#mu-menu .navbar-collapse.collapse {
  display: flex !important;
  flex: 1;
  justify-content: flex-end;
}

@media (max-width: 1199px) {
  #mu-menu .navbar-collapse.collapse {
    display: none !important;
  }

  #mu-menu .navbar-collapse.collapse.in {
    display: block !important;
    width: 100%;
  }

  #mu-menu .container {
    display: block;
  }

  #mu-menu .navbar-toggle {
    display: block !important;
    float: right;
  }
}

#mu-menu .navbar-brand {
  padding: 10px 15px;
  height: auto;
  display: flex;
  align-items: center;
}

#mu-menu .mu-brand-logo {
  max-height: 46px;
  width: auto;
  border-radius: 8px;
}

/* items */
#mu-menu .navbar-nav>li>a {
  border-bottom: none;
  margin-bottom: 0;
  padding: 22px 12px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--m-gray) !important;
  position: relative;
  transition: color .25s var(--m-ease);
}

#mu-menu .navbar-nav>li>a::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  height: 3px;
  border-radius: 3px;
  background:var(--m-teal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s var(--m-ease);
}

#mu-menu .navbar-nav>li>a:not(.mu-btn):hover {
  color: var(--m-teal) !important;
  background:transparent;
}

/* FIX v4: los botones .mu-btn conservan su fondo al hover (la regla de arriba
   les aplicaba background:transparent y borraba el degradado => pastilla blanca) */
#mu-menu .navbar-nav>li>a.mu-btn:hover {
  background-color: transparent !important;
}

#mu-menu .navbar-nav>li>a:hover::before {
  transform: scaleX(1);
}

#mu-menu .navbar-nav>.active>a:not(.mu-btn),
#mu-menu .navbar-nav>.active>a:not(.mu-btn):focus,
#mu-menu .navbar-nav>.active>a:not(.mu-btn):hover,
#mu-menu .navbar-nav>li.active-parent>a {
  color: var(--m-teal) !important;
  background:transparent !important;
}

#mu-menu .navbar-nav>.active>a::before,
#mu-menu .navbar-nav>li.active-parent>a::before {
  transform: scaleX(1);
}

/* toggler móvil */
#mu-menu .navbar-toggle {
  border: 1px solid var(--m-line);
  border-radius: 10px;
  margin-top: 16px;
  padding: 10px;
  transition: background .2s;
}

#mu-menu .navbar-toggle .icon-bar {
  background-color:var(--m-teal);
  height: 2px;
  border-radius: 2px;
}

#mu-menu .navbar-toggle:hover {
  background:var(--m-teal-050);
}

/* ---------- 3. DROPDOWNS: tamaño + sombra correctos ---------- */
#mu-menu .dropdown-menu {
  min-width: 290px;
  background:#fff;
  border: 1px solid var(--m-line);
  border-radius: var(--m-r);
  box-shadow: var(--m-shadow-lg);
  padding: 8px;
  margin-top: 12px;
  opacity: 0;
  visibility: hidden;
  display: block;
  transform: translateY(10px);
  transition: opacity .25s var(--m-ease), transform .25s var(--m-ease), visibility .25s;
  font-size: 14px;
}

#mu-menu .navbar-nav>li:hover>.dropdown-menu,
#mu-menu .navbar-nav>li:focus-within>.dropdown-menu,
#mu-menu .navbar-nav>li.open>.dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#mu-menu .dropdown-menu li {
  border-radius: 10px;
}

#mu-menu .dropdown-menu li a {
  color: var(--m-gray) !important;
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 14px;
  border-radius: 10px;
  line-height: 1.4;
  white-space: normal;
  transition: background .18s var(--m-ease), color .18s var(--m-ease), padding-left .18s var(--m-ease);
}

#mu-menu .dropdown-menu li a:hover,
#mu-menu .dropdown-menu li a:focus {
  background:var(--m-teal-050) !important;
  color: var(--m-teal) !important;
  padding-left: 18px;
}

#mu-menu .dropdown-menu .divider {
  margin: 6px 8px;
  background:var(--m-line);
}

/* submenú anidado (Programa del área de Salud) */
#mu-menu .dropdown-menu .dropdown {
  position: relative;
}

#mu-menu .dropdown-menu .dropdown>a::after {
  content: '\203A';
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: var(--m-teal);
  font-weight: 800;
}

#mu-menu .dropdown-menu .dropdown>a {
  padding-right: 30px;
}

#mu-menu .dropdown-menu .dropdown>.dropdown-menu {
  border-left: 3px solid var(--m-orange);
}

#mu-menu .dropdown-menu .dropdown>.dropdown-menu {
  top: -9px;
  left: 100%;
  margin: 0 0 0 6px;
  box-shadow: var(--m-shadow-lg);
  transform: translateX(-6px);
  opacity: 0;
  visibility: hidden;
  display: block;
  position: absolute;
}

#mu-menu .dropdown-menu .dropdown:hover>.dropdown-menu,
#mu-menu .dropdown-menu .dropdown.open>.dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* dropdowns en móvil: colapsar comportamiento hover */
@media (max-width: 767px) {
  #mu-menu .dropdown-menu {
    min-width: 0;
    width: 100%;
    box-shadow: none;
    border: none;
    background:var(--m-bg);
    opacity: 1;
    visibility: visible;
    transform: none;
    margin-top: 0;
    display: none;
    padding: 4px 8px 8px;
  }

  #mu-menu .navbar-nav>li.open>.dropdown-menu {
    display: block;
  }

  #mu-menu .navbar-nav>li>a {
    padding: 14px 10px;
  }

  #mu-menu .navbar-nav>li>a::before {
    display: none;
  }

  #mu-menu .dropdown-menu .dropdown>.dropdown-menu {
    display: none;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    margin: 0 0 0 12px;
  }

  #mu-menu .dropdown-menu .dropdown.open>.dropdown-menu {
    display: block;
  }
}

/* ---------- 4. botones CTA del menú ---------- */
#mu-menu .navbar-nav>li>a.mu-btn {
  border-radius: 999px;
  padding: 9px 16px;
  margin: 16px 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff !important;
  transition: all .25s var(--m-ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#mu-menu .navbar-nav>li>a.mu-btn::before {
  display: none;
}

#mu-menu .navbar-nav>li>a.mu-btn:hover {
  transform: translateY(-2px);
}

#mu-menu .navbar-nav>li>a.mu-btn:active {
  transform: translateY(0) scale(.98);
}

#mu-menu a.mu-btn-orange {
  background:linear-gradient(135deg, var(--m-orange) 0%, var(--m-orange-d) 100%);
  box-shadow: 0 4px 14px rgba(242, 116, 5, .35);
}

#mu-menu a.mu-btn-orange:hover {
  box-shadow: 0 8px 20px rgba(242, 116, 5, .45);
}

#mu-menu a.mu-btn-teal {
  background:linear-gradient(135deg, var(--m-teal) 0%, var(--m-teal-d) 100%);
  box-shadow: 0 4px 14px rgba(3, 166, 136, .35);
}

#mu-menu a.mu-btn-teal:hover {
  box-shadow: 0 8px 20px rgba(3, 166, 136, .45);
}

#mu-menu a.mu-btn-outline {
  background:transparent;
  color: var(--m-teal) !important;
  border: 2px solid var(--m-teal);
}

#mu-menu a.mu-btn-outline:hover {
  background:var(--m-teal);
  color: #fff !important;
}

@media (max-width: 1199px) {
  #mu-menu .navbar-nav>li>a.mu-btn {
    margin: 6px 0;
    width: calc(100% - 20px);
    justify-content: center;
  }

  #mu-menu .navbar-nav {
    display: block;
  }

  #mu-menu .navbar-nav>li {
    float: none;
    width: 100%;
  }

  #mu-menu .navbar-nav>li>a {
    padding: 13px 10px;
  }

  #mu-menu .navbar-nav>li>a::before {
    display: none;
  }

  #mu-menu .dropdown-menu {
    position: static !important;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background:#f8fafc;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  #mu-menu .navbar-nav>li.open>.dropdown-menu,
  #mu-menu .navbar-nav>li:hover>.dropdown-menu {
    display: block;
  }

  #mu-menu .dropdown-menu .dropdown>.dropdown-menu {
    position: static !important;
    margin-left: 14px;
    display: none;
  }

  #mu-menu .dropdown-menu .dropdown.open>.dropdown-menu,
  #mu-menu .dropdown-menu .dropdown:hover>.dropdown-menu {
    display: block;
  }
}

/* buscador del menú */
#mu-menu .navbar-nav>li>a#mu-search-icon {
  padding: 22px 10px;
}

#mu-menu .navbar-nav>li>a#mu-search-icon i {
  font-size: 15px;
}

/* ---------- 5. BÚSQUEDA popup ---------- */
#mu-search .mu-search-area {
  background:rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#mu-search .mu-search-form input {
  background:rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  border-radius: 999px;
  padding: 16px 26px;
  font-size: 20px;
}

#mu-search .mu-search-form input::placeholder {
  color: rgba(255, 255, 255, .7);
}

#mu-search .mu-search-form input:focus {
  outline: none;
  border-color: var(--m-teal);
  box-shadow: 0 0 0 4px rgba(3, 166, 136, .25);
}

/* ---------- 6. HERO / CARRUSEL sin recortes ---------- */
#mu-slider {
  position: relative;
}

#mu-slider .slick-list,
#mu-slider .slick-track {
  height: auto;
}

.mu-slider-modern .mu-slider-single {
  position: relative;
}

.mu-slider-modern .mu-slider-single .mu-slider-img {
  height: clamp(420px, 72vh, 680px);
  background:linear-gradient(160deg, #04211c 0%, #0a3a32 55%, #0f4a40 100%);
}

.mu-slider-modern .mu-slider-single .mu-slider-img figure {
  height: 100%;
}

.mu-slider-modern .mu-slider-single .mu-slider-img figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.mu-slider-modern .mu-slider-single .mu-slider-img:after {
  background:linear-gradient(90deg, rgba(4, 24, 20, .82) 0%, rgba(4, 24, 20, .55) 45%, rgba(4, 24, 20, .18) 100%);
}

.mu-slider-modern .mu-slider-single .mu-slider-content {
  top: 0 !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mu-slider-modern .mu-slider-card {
  background:rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--m-r-lg);
  padding: 34px 38px;
  box-shadow: 0 24px 60px rgba(2, 16, 13, .35);
  text-align: left;
  max-width: 620px;
}

.mu-slider-modern .mu-slider-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background:rgba(3, 166, 136, .92);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.mu-slider-modern .mu-slider-card h2 {
  color: #fff;
  font-size: clamp(1.55rem, 3.6vw, 2.55rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 12px;
}

.mu-slider-modern .mu-slider-card p {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(.98rem, 1.6vw, 1.15rem);
  line-height: 1.65;
  margin-bottom: 22px;
}

.mu-slider-modern .btn.mu-slider-btn,
.mu-slider-modern .btn.mu-slider-btn-outline {
  border-radius: 999px;
  padding: 11px 26px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .02em;
  transition: all .25s var(--m-ease);
  border: 2px solid transparent;
}

.mu-slider-modern .btn.mu-slider-btn {
  background:linear-gradient(135deg, var(--m-orange), var(--m-orange-d));
  color: #fff;
  box-shadow: 0 6px 18px rgba(242, 116, 5, .4);
}

.mu-slider-modern .btn.mu-slider-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(242, 116, 5, .5);
}

.mu-slider-modern .btn.mu-slider-btn-outline {
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
  background:rgba(255, 255, 255, .06);
}

.mu-slider-modern .btn.mu-slider-btn-outline:hover {
  background:#fff;
  color: var(--m-ink);
}

/* flechas */
#mu-slider .slick-prev,
#mu-slider .slick-next {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 10;
  transition: all .25s var(--m-ease);
}

#mu-slider .slick-prev {
  left: 26px;
}

#mu-slider .slick-next {
  right: 26px;
}

#mu-slider .slick-prev:hover,
#mu-slider .slick-next:hover {
  background:var(--m-teal);
  border-color: var(--m-teal);
  transform: scale(1.08);
}

#mu-slider .slick-prev:before,
#mu-slider .slick-next:before {
  color: #fff;
  font-size: 18px;
  opacity: 1;
}

/* dots */
#mu-slider .slick-dots {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  bottom: 18px;
}

#mu-slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}

#mu-slider .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
  background:rgba(255, 255, 255, .45);
}

#mu-slider .slick-dots li button:before {
  display: none;
}

#mu-slider .slick-dots li.slick-active button {
  background:var(--m-orange);
  width: 26px;
}

@media (max-width: 767px) {
  .mu-slider-modern .mu-slider-single .mu-slider-img {
    height: clamp(440px, 78vh, 560px);
  }

  .mu-slider-modern .mu-slider-single .mu-slider-content {
    padding: 0 12px !important;
  }

  .mu-slider-modern .mu-slider-card {
    padding: 24px 22px;
  }

  #mu-slider .slick-prev,
  #mu-slider .slick-next {
    display: none !important;
  }
}

/* ---------- 7. TÍTULOS DE SECCIÓN ---------- */
.mu-title {
  margin-bottom: 44px;
}

.mu-title h2 {
  color: var(--m-teal);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 800;
  position: relative;
  padding-bottom: 18px;
}

.mu-title h2::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 72px;
  height: 4px;
  border-radius: 4px;
  background:linear-gradient(90deg, var(--m-orange), var(--m-teal));
}

/* v2: barra UNICA solida teal bajo los titulos (antes el degradado bicolor
   se leia como dos barras). padding-bottom 26px = separacion de lectura */
/* v4: barra degradada NARANJA predominante que funde a verde (gusto del usuario) */
.mu-title h2::after {
  background:linear-gradient(90deg, var(--m-orange) 0%, var(--m-orange) 52%, var(--m-teal) 100%) !important;
}

/* v2: la barra del titulo SIEMPRE centrada bajo el texto */
:not(.text-center)>.mu-title h2::after,
.mu-title:not(.text-center) h2::after {
  left: 50%;
  transform: translateX(-50%);
}

.mu-title p {
  color: var(--m-gray-2);
  font-size: 15.5px;
  max-width: 640px;
  margin: 12px auto 0;
}

:not(.text-center)>.mu-title p,
.mu-title:not(.text-center) p {
  margin: 12px auto 0;
  text-align: center;
}

/* ---------- 8. SECCIONES genéricas ---------- */
#mu-service,
#mu-about-us,
#mu-features,
#mu-latest-courses,
#mu-our-teacher,
#mu-latest-news,
#mu-testimonial {
  padding: 72px 0;
}

#mu-latest-courses {
  background:#fff;
}

/* service strip (3 bloques) */
#mu-service {
  padding: 0;
  background:transparent;
}

#mu-service .mu-service-single {
  border-radius: 0 0 var(--m-r) var(--m-r);
  padding: 30px 24px 34px;
  margin-top: 0;
  transition: transform .3s var(--m-ease), box-shadow .3s var(--m-ease);
  box-shadow: var(--m-shadow);
}

#mu-service .mu-service-single:hover {
  transform: translateY(-5px);
  box-shadow: var(--m-shadow-lg);
}

#mu-service .mu-service-single h3 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 8px;
}

#mu-service .mu-service-single p {
  font-size: 13.5px;
  opacity: .92;
}

/* features */
.mu-single-feature {
  background:var(--m-card);
  border-radius: var(--m-r);
  padding: 30px 24px;
  box-shadow: var(--m-shadow-sm);
  border: 1px solid var(--m-line);
  transition: all .3s var(--m-ease);
  border-top: 4px solid transparent;
  margin-bottom: 24px;
}

.mu-single-feature:hover {
  border-top-color: var(--m-orange);
  transform: translateY(-4px);
  box-shadow: var(--m-shadow);
}

.mu-feature-icon {
  width: 64px;
  height: 64px;
  background:linear-gradient(135deg, var(--m-teal) 0%, var(--m-teal-d) 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: var(--m-shadow-teal);
  transition: transform .3s var(--m-ease);
}

.mu-single-feature:hover .mu-feature-icon {
  transform: scale(1.08) rotate(-4deg);
}

.mu-feature-icon i {
  font-size: 26px;
  color: #fff;
}

.mu-single-feature h4 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--m-ink);
  margin-bottom: 10px;
}

.mu-single-feature p {
  font-size: 13.5px;
  color: var(--m-gray-2);
  line-height: 1.65;
}

.mu-single-feature a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--m-teal);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all .2s var(--m-ease);
}

.mu-single-feature a:hover {
  color: var(--m-orange);
  border-bottom-color: var(--m-orange);
}

.mu-single-feature a::after {
  content: '\2192';
  font-size: 15px;
  transition: transform .2s var(--m-ease);
}

.mu-single-feature a:hover::after {
  transform: translateX(3px);
}

/* counter */
#mu-abtus-counter {
  background-color:var(--m-teal-d);
  background-blend-mode: multiply;
  position: relative;
}

#mu-abtus-counter::before {
  content: '';
  position: absolute;
  inset: 0;
  background:linear-gradient(120deg, rgba(2, 138, 114, .92) 0%, rgba(3, 166, 136, .82) 60%, rgba(242, 116, 5, .75) 100%);
}

#mu-abtus-counter .container {
  position: relative;
}

.mu-abtus-counter-single {
  text-align: center;
  padding: 24px 8px;
}

.mu-abtus-counter-single .fa {
  font-size: 30px !important;
  color: #fff;
  margin-bottom: 14px;
  width: 64px;
  height: 64px;
  line-height: 64px;
  border-radius: 50%;
  background:rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
}

.mu-abtus-counter-single h4 {
  color: #fff;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mu-abtus-counter-single p {
  color: rgba(255, 255, 255, .9);
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* teachers */
.mu-our-teacher-single {
  background:#fff;
  border-radius: var(--m-r);
  overflow: hidden;
  border: 1px solid var(--m-line);
  box-shadow: var(--m-shadow-sm);
  transition: all .3s var(--m-ease);
  margin-bottom: 24px;
}

.mu-our-teacher-single:hover {
  transform: translateY(-5px);
  box-shadow: var(--m-shadow);
}

.mu-our-teacher-img {
  border-radius: 0;
  margin: 0;
}

.mu-our-teacher-img img {
  transition: transform .4s var(--m-ease);
}

.mu-our-teacher-single:hover .mu-our-teacher-img img {
  transform: scale(1.04);
}

.mu-ourteacher-single-content {
  padding: 18px 20px 24px;
  text-align: center;
}

.mu-ourteacher-single-content span {
  display: inline-block;
  color: var(--m-teal);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--m-teal-100);
  padding-bottom: 4px;
}

.mu-ourteacher-single-content p {
  font-size: 13px;
  color: var(--m-gray-2);
  line-height: 1.6;
}

/* ---------- 9. CARDS DE PROGRAMAS (courses) ---------- */
.mu-latest-course-single {
  background:#fff;
  border-radius: var(--m-r);
  overflow: hidden;
  border: 1px solid var(--m-line);
  box-shadow: var(--m-shadow-sm);
  transition: all .3s var(--m-ease);
  height: 100%;
  margin-bottom: 24px;
}

.mu-latest-course-single:hover {
  transform: translateY(-6px);
  box-shadow: var(--m-shadow-teal);
  border-color: rgba(3, 166, 136, .35);
}

.mu-latest-course-img {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.mu-latest-course-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .45s var(--m-ease);
}

.mu-latest-course-single:hover .mu-latest-course-img img {
  transform: scale(1.06);
}

.mu-latest-course-imgcaption {
  position: static;
  background:transparent;
  padding: 16px 18px 4px;
}

.mu-latest-course-imgcaption a {
  color: var(--m-ink);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  display: block;
  text-decoration: none;
}

.mu-latest-course-imgcaption a:hover {
  color: var(--m-teal);
}

.mu-latest-course-single-content {
  padding: 6px 18px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mu-latest-course-single-content p {
  font-size: 13.5px;
  color: var(--m-gray-2);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mu-latest-course-single-contbottom {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--m-line);
}

.mu-course-details {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background:linear-gradient(135deg, var(--m-teal), var(--m-teal-d));
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--m-shadow-teal);
  transition: all .25s var(--m-ease);
}

.mu-course-details::after {
  content: '\2192';
}

.mu-course-details:hover {
  transform: translateY(-2px);
}

/* ---------- 10. landing hub / action cards (index) ---------- */
#mu-landing-welcome {
  clear: both;
  padding: 105px 0 50px !important;
  margin-top: 0 !important;
  background-color:#ffffff !important;
  position: relative;
  width: 100%;
}

/* ================================================
   ¡Hola, estudiante! — Glass Teal Institucional + CodePen Light Sweep Shine (10s ciclo)
   ================================================ */
.mu-landing-eyebrow {
  /* --- Variables Sweep --- */
  --sweep-width: 65px;

  /* --- Tipografía & Espaciado --- */
  color: #ffffff !important;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: .14em;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 36px;
  border-radius: 999px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);

  /* --- Cristal Teal Institucional (#03A688) --- */
  background:linear-gradient(135deg, rgba(3, 166, 136, 0.90) 0%, rgba(2, 138, 114, 0.84) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);

  /* --- Glow & Profundidad --- */
  box-shadow:
    0 8px 30px rgba(3, 166, 136, 0.38),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);

  /* --- Sweep setup --- */
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.mu-landing-eyebrow:hover {
  transform: scale(1.04) translateY(-2px);
  box-shadow:
    0 12px 36px rgba(3, 166, 136, 0.48),
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* --- Barra de brillo (CodePen Light Sweep Shine) que cruza cada 10s (desfasada de WhatsApp) --- */
.mu-landing-eyebrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  z-index: 2;
  width: var(--sweep-width);
  height: 100%;
  background:linear-gradient(105deg,
      transparent 0%,
      rgba(255, 255, 255, 0.15) 20%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 255, 255, 0.15) 80%,
      transparent 100%);
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.85),
    0 0 32px rgba(255, 255, 255, 0.45);
  transform: skewX(-25deg);
  animation: eyebrowCodePenSweep 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0s;
  pointer-events: none;
}

@keyframes eyebrowCodePenSweep {
  0% {
    left: -150%;
  }

  16% {
    left: 180%;
  }

  100% {
    left: 180%;
  }
}

#mu-landing-welcome .mu-landing-welcome-header {
  margin-top: 0 !important;
  margin-bottom: 38px !important;
}

.mu-landing-welcome-header h2 {
  color: var(--m-teal);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mu-landing-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background:#fff;
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-lg);
  padding: 30px 22px;
  margin-bottom: 24px;
  box-shadow: var(--m-shadow-sm);
  text-decoration: none;
  transition: all .3s var(--m-ease);
  position: relative;
  overflow: hidden;
}

.mu-landing-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background:linear-gradient(90deg, var(--m-teal), var(--m-orange));
  transform: scaleX(0);
  transition: transform .35s var(--m-ease);
}

.mu-landing-action-card:hover::before {
  transform: scaleX(1);
}

.mu-landing-action-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--m-shadow);
  text-decoration: none;
}

.mu-landing-action-icon {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background:var(--m-teal-050);
  color: var(--m-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
  transition: all .3s var(--m-ease);
}

.mu-landing-action-card:hover .mu-landing-action-icon {
  background:var(--m-teal);
  color: #fff;
  transform: rotate(-5deg) scale(1.06);
}

.mu-landing-action-card h3 {
  color: var(--m-ink);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}

.mu-landing-action-card p {
  color: var(--m-gray-2);
  font-size: 13.5px;
  margin-bottom: 14px;
}

.mu-landing-action-link {
  color: var(--m-orange);
  font-weight: 700;
  font-size: 13px;
}

.mu-landing-hub {
  padding: 40px 0 80px;
}

.mu-landing-hub-card {
  background:#fff;
  border: 1px solid var(--m-line);
  border-top: 4px solid transparent;
  border-radius: var(--m-r);
  padding: 26px 22px;
  margin-bottom: 24px;
  height: auto;
  box-shadow: var(--m-shadow-sm);
  transition: all .3s var(--m-ease);
}

.mu-landing-hub-card:hover,
.mu-landing-hub-card--highlight {
  transform: translateY(-4px);
  box-shadow: var(--m-shadow);
}

.mu-landing-hub-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 22px;
  background:var(--m-teal-050);
  color: var(--m-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.mu-landing-hub-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--m-ink);
}

.mu-landing-hub-card p {
  font-size: 13px;
  color: var(--m-gray-2);
}

.mu-landing-hub-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.mu-landing-hub-list li {
  padding: 7px 0 7px 22px;
  position: relative;
  border-top: 1px dashed var(--m-line);
  font-size: 13.5px;
}

.mu-landing-hub-list li:first-child {
  border-top: none;
}

.mu-landing-hub-list li::before {
  content: '\203A';
  position: absolute;
  left: 4px;
  top: 5px;
  color: var(--m-orange);
  font-weight: 800;
  font-size: 15px;
}

.mu-landing-hub-list a {
  color: var(--m-gray);
  text-decoration: none;
  transition: color .2s;
}

.mu-landing-hub-list a:hover {
  color: var(--m-teal);
}

/* ---------- 11. breadcrumb (subpáginas) ---------- */
#mu-page-breadcrumb {
  background:linear-gradient(120deg, var(--m-teal-d) 0%, var(--m-teal) 55%, #03A688 100%);
  padding: 52px 0;
  position: relative;
  overflow: hidden;
}

#mu-page-breadcrumb::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 240px;
  height: 240px;
  background:radial-gradient(circle, rgba(255, 255, 255, .16) 0%, transparent 65%);
  border-radius: 50%;
}

#mu-page-breadcrumb-area {
  position: relative;
  z-index: 1;
}

#mu-page-breadcrumb h2 {
  color: #fff !important;
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(2, 60, 50, .35);
}

#mu-page-breadcrumb .breadcrumb {
  background:rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 8px 18px;
  display: inline-block;
}

#mu-page-breadcrumb .breadcrumb>li+li:before {
  color: rgba(255, 255, 255, .6);
  padding: 0 8px;
}

#mu-page-breadcrumb .breadcrumb a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}

#mu-page-breadcrumb .breadcrumb a:hover {
  text-decoration: underline;
}

/* ---------- 12. videos ---------- */
.containervideo {
  padding: 12px 0 72px;
}

.video-overlay-wrapper {
  border-radius: var(--m-r-lg);
  overflow: hidden;
  box-shadow: var(--m-shadow-lg);
  position: relative;
}

.video-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: pointer;
  background:rgba(4, 24, 20, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s var(--m-ease);
}

.video-overlay:hover {
  background:rgba(4, 24, 20, .3);
}

.video-overlay-text {
  color: #fff;
  font-weight: 800;
  letter-spacing: .18em;
  font-size: 13px;
  text-transform: uppercase;
  padding: 18px 26px;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  position: relative;
}

.video-overlay-text::before {
  content: '\25B6';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-52%);
  font-size: 16px;
}

.video-overlay-text {
  padding-left: 34px;
}

.mu-responsive-video video {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 13. FOOTER ---------- */
#mu-footer {
  /* Separación entre el contenido de la página y el footer: antes era 0 y
     el footer quedaba pegado a la última sección. Se escala con el ancho
     para no dejar un hueco gigante en pantallas pequeñas. */
  margin-top: clamp(40px, 5vw, 64px);
}

.mu-footer-banner {
  width: 100%;
  display: block;
}

#mu-footer .mu-footer-top {
  background-color:var(--m-ink);
  padding: 56px 0 40px;
}

#mu-footer .mu-footer-top-area {
  color: #94a3b8;
}

#mu-footer .mu-footer-widget h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: 12px;
  margin-bottom: 16px;
  position: relative;
}

#mu-footer .mu-footer-widget h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background:var(--m-orange);
}

#mu-footer .mu-footer-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#mu-footer .mu-footer-widget ul li {
  padding: 0;
  margin-bottom: 4px;
}

#mu-footer .mu-footer-widget ul li a {
  color: #94a3b8;
  font-size: 13.5px;
  text-decoration: none;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  transition: color .2s var(--m-ease), transform .2s var(--m-ease);
}

#mu-footer .mu-footer-widget ul li a::before {
  content: '\203A';
  color: var(--m-teal);
  font-weight: 800;
}

#mu-footer .mu-footer-widget ul li a:hover {
  color: #fff;
  transform: translateX(3px);
}

#mu-footer .mu-footer-widget>p {
  font-size: 13.5px;
  color: #94a3b8;
}

#mu-footer address p {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.7;
}

#mu-footer .mu-subscribe-form {
  position: relative;
  margin-top: 6px;
}

#mu-footer .mu-subscribe-form input {
  width: 100%;
  background:rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 13px 16px;
  color: #fff;
  font-size: 13.5px;
  transition: border-color .2s, box-shadow .2s;
}

#mu-footer .mu-subscribe-form input::placeholder {
  color: #7c8ba1;
}

#mu-footer .mu-subscribe-form input:focus {
  outline: none;
  border-color: var(--m-teal);
  box-shadow: 0 0 0 3px rgba(3, 166, 136, .3);
}

#mu-footer .mu-subscribe-btn {
  margin-top: 10px;
  width: 100%;
  background:linear-gradient(135deg, var(--m-orange), var(--m-orange-d));
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 12px 18px;
  transition: all .25s var(--m-ease);
  cursor: pointer;
}

#mu-footer .mu-subscribe-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(242, 116, 5, .4);
}

#mu-footer .mu-footer-bottom {
  background:#0b1220;
}

#mu-footer .mu-footer-bottom-area p {
  color: #64748b;
  font-size: 12.5px;
  margin: 16px 0;
}

#mu-footer .mu-footer-bottom-area a {
  color: var(--m-teal);
  text-decoration: none;
}

#mu-footer .mu-footer-bottom-area a:hover {
  color: var(--m-orange);
}

/* ---------- 14. FORMULARIOS ---------- */
.mu-contact-form-wrapper input[type="text"],
.mu-contact-form-wrapper input[type="email"],
.mu-contact-form-wrapper input[type="tel"],
.mu-contact-form-wrapper input[type="subject"],
.mu-contact-form-wrapper textarea,
.mu-contact-form input[type="text"],
.mu-contact-form input[type="email"],
.mu-contact-form textarea,
.contact-form-wrapper input,
.contact-form-wrapper textarea,
#mu-contact input[type="text"],
#mu-contact input[type="email"],
#mu-contact textarea {
  background:#fff;
  border: 1.5px solid var(--m-line);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  color: var(--m-ink);
  transition: border-color .2s var(--m-ease), box-shadow .2s var(--m-ease);
  box-shadow: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--m-teal) !important;
  box-shadow: 0 0 0 4px rgba(3, 166, 136, .14) !important;
  outline: none !important;
}

label {
  font-weight: 600;
  color: var(--m-gray);
  font-size: 13.5px;
}

.form-control {
  border-radius: 12px;
  border: 1.5px solid var(--m-line);
  box-shadow: none;
  font-size: 14px;
  height: auto;
  padding: 12px 15px;
}

.form-control:focus {
  border-color: var(--m-teal);
  box-shadow: 0 0 0 4px rgba(3, 166, 136, .14);
}

/* botones genéricos del theme */
.btn,
a.btn,
button.btn {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: all .25s var(--m-ease);
}

.btn:active,
button:active {
  transform: scale(.98);
}

/* ---------- 15. TABLAS (directorio/contact info) ---------- */
.table {
  background:#fff;
  border-radius: var(--m-r);
  overflow: hidden;
  box-shadow: var(--m-shadow-sm);
}

.table>thead>tr>th {
  background:var(--m-teal);
  color: #fff;
  border: none !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
}

.table>tbody>tr>td {
  border-color: var(--m-line) !important;
  font-size: 13.5px;
  color: var(--m-gray);
}

.table-striped>tbody>tr:nth-of-type(odd) {
  background:var(--m-bg);
}

/* ---------- 16. galería ---------- */
#mu-gallery .mu-gallery-content {}

#mu-gallery .mu-gallery-content li .mu-gallery-img {
  border-radius: var(--m-r);
  overflow: hidden;
  position: relative;
  box-shadow: var(--m-shadow-sm);
  transition: all .3s var(--m-ease);
}

#mu-gallery .mu-gallery-content li .mu-gallery-img:hover {
  box-shadow: var(--m-shadow);
  transform: translateY(-3px);
}

#mu-gallery .mu-gallery-content li .mu-gallery-img img {
  transition: transform .28s var(--m-ease);
}

#mu-gallery .mu-gallery-content li .mu-gallery-img:hover img {
  transform: scale(1.07);
}

#mu-gallery .mu-gallery-img .mu-gallery-overlay,
#mu-gallery .mu-gallery-img a i {
  background:linear-gradient(135deg, rgba(3, 166, 136, .85), rgba(242, 116, 5, .85));
  border-radius: 50%;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: #fff;
}

/* filtros */
#mu-gallery .mu-gallery-nav li {
  margin: 0 6px 8px 0;
  float: none;
  display: inline-block;
}

#mu-gallery .mu-gallery-nav li a {
  background:#fff;
  color: var(--m-gray);
  border: 1px solid var(--m-line);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .02em;
  transition: all .2s var(--m-ease);
}

#mu-gallery .mu-gallery-nav li a:hover,
#mu-gallery .mu-gallery-nav .mixitup-control-active a,
#mu-gallery .mu-gallery-nav li.activeMix a {
  background:var(--m-teal);
  border-color: var(--m-teal);
  color: #fff;
}

/* ---------- 17. WhatsApp flotante / scroll top ---------- */
a.whatsapp-float {
  width: 58px;
  height: 58px;
  right: 22px;
  bottom: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 3px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, background 0.3s ease;
  z-index: 9999;
  position: fixed;
  overflow: visible;
}

a.whatsapp-float:hover {
  transform: scale(1.12) translateY(-3px);
  box-shadow: 0 16px 38px rgba(37, 211, 102, 0.58), 0 4px 12px rgba(0, 0, 0, 0.12);
  background:linear-gradient(135deg, #2ae06e 0%, #159b8b 100%);
}

.whatsapp-btn-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* --- CodePen Light Sweep Shine en WhatsApp (10s ciclo, desfasado 5s del saludo) --- */
.whatsapp-btn-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  z-index: 2;
  width: 48px;
  height: 100%;
  background:linear-gradient(105deg,
      transparent 0%,
      rgba(255, 255, 255, 0.2) 20%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 255, 255, 0.2) 80%,
      transparent 100%);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.9),
    0 0 28px rgba(255, 255, 255, 0.45);
  transform: skewX(-25deg);
  animation: whatsappCodePenSweep 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 5s;
  pointer-events: none;
}

@keyframes whatsappCodePenSweep {
  0% {
    left: -150%;
  }

  16% {
    left: 180%;
  }

  100% {
    left: 180%;
  }
}

a.whatsapp-float::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.45);
  animation: mu-pulse 2.2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  pointer-events: none;
}

@keyframes mu-pulse {
  0% {
    transform: scale(0.92);
    opacity: 0.85;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.scrollToTop {
  width: 44px;
  height: 44px;
  line-height: 42px;
  right: 24px;
  bottom: 92px;
  display: none;
  align-items: center;
  justify-content: center;
  background:linear-gradient(135deg, var(--m-teal) 0%, var(--m-teal-d) 100%) !important;
  color: #fff !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 24px rgba(3, 166, 136, 0.32), 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, background-color 0.25s ease !important;
  z-index: 999;
}

.scrollToTop i {
  font-size: 18px;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.25s ease;
}

.scrollToTop:hover {
  background:linear-gradient(135deg, var(--m-teal-d) 0%, #016856 100%) !important;
  transform: scale(1.1) translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(3, 166, 136, 0.48), 0 4px 10px rgba(0, 0, 0, 0.12);
}

.scrollToTop:hover i {
  transform: translateY(-2px);
}

/* ---------- 18. botones de grados flotantes (blogs) ---------- */
.float-grado {
  position: fixed;
  z-index: 990;
  width: 54px;
  height: 54px;
  right: 20px;
  bottom: 158px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:linear-gradient(135deg, var(--m-orange), var(--m-orange-d));
  box-shadow: 0 10px 26px rgba(242, 116, 5, .4);
  transition: transform .25s var(--m-ease);
}

.float-grado img {
  width: 40px;
  height: 40px;
}

.float-grado:hover {
  transform: scale(1.08);
}

/* ---------- 19. utilidades responsive generales ---------- */
@media (max-width: 991px) {
  .mu-slider-modern .mu-slider-card {
    max-width: 540px;
  }
}

@media (max-width: 767px) {

  #mu-service,
  #mu-about-us,
  #mu-features,
  #mu-latest-courses,
  #mu-our-teacher,
  #mu-latest-news,
  #mu-testimonial {
    padding: 48px 0;
  }

  #mu-service .mu-service-single {
    margin-bottom: 14px;
    border-radius: var(--m-r);
  }

  .mu-title {
    margin-bottom: 30px;
  }

  .mu-title h2 {
    font-size: 1.45rem;
  }

  #mu-page-breadcrumb {
    padding: 34px 0;
  }

  iframe {
    max-width: 100%;
  }

  .custom-container {
    padding: 0 12px;
  }

  .mu-latest-course-img img {
    height: 176px;
  }

  .mu-single-feature {
    margin-top: 0;
    padding: 24px 18px;
  }
}

/* tablas responsive en móvil (directorio) */
@media (max-width: 767px) {
  .table-responsive {
    border: none;
  }

  .table>thead>tr>th,
  .table>tbody>tr>td {
    font-size: 12.5px;
  }
}

/* focus visible teclado */
a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(242, 116, 5, .5);
  outline-offset: 2px;
  border-radius: 4px;
}

/* reduce movimiento (v3: apagar, NO acelerar a .01ms — causaba parpadeo) */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .12s !important;
    scroll-behavior: auto !important;
  }
}

/* impresión */
@media print {

  #mu-header,
  #mu-menu,
  .whatsapp-float,
  .scrollToTop,
  .float-grado,
  #mu-slider .slick-prev,
  #mu-slider .slick-next {
    display: none !important;
  }
}


/* ============================================================
   FIXES v2 (tras revisión visual desktop + móvil)
   ============================================================ */

/* ---- overflow horizontal en móvil ---- */
html,
body {
  overflow-x: clip;
}

/* ---- tarjetas del hero: nunca más anchas que el viewport ---- */
.mu-slider-modern .mu-slider-card {
  width: 100%;
  max-width: 620px;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .mu-slider-modern .mu-slider-single .mu-slider-content {
    padding: 0 14px !important;
  }

  .mu-slider-modern .mu-slider-card {
    padding: 22px 18px;
    border-radius: var(--m-r);
  }

  .mu-slider-modern .mu-slider-card h2 {
    font-size: clamp(1.22rem, 5.6vw, 1.55rem);
    line-height: 1.28;
  }

  .mu-slider-modern .mu-slider-card p {
    font-size: .92rem;
    line-height: 1.55;
    margin-bottom: 16px;
  }

  .mu-slider-modern .mu-slider-badge {
    font-size: 10px;
    letter-spacing: .06em;
    padding: 5px 11px;
  }

  .mu-slider-modern .btn.mu-slider-btn,
  .mu-slider-modern .btn.mu-slider-btn-outline {
    padding: 9px 16px;
    font-size: 12px;
  }
}

/* ---- títulos de sección: sin desbordes en pantallas chicas ---- */
.mu-title p {
  max-width: 640px;
  padding: 0 6px;
}

/* ---- NAVBAR: que los items quepan (768-1599) y si no, envuelvan limpio ---- */
#mu-menu .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

#mu-menu .navbar-nav>li {
  float: none;
}

#mu-menu .navbar-brand {
  padding: 12px 12px 12px 6px;
}

@media (min-width: 768px) and (max-width: 1599px) {
  #mu-menu .navbar-nav>li>a#mu-search-icon {
    padding: 20px 8px;
  }

  #mu-menu .navbar-nav>li>a.mu-btn {
    margin: 14px 3px;
    padding: 8px 11px;
    font-size: 11px;
    gap: 4px;
  }

  #mu-menu .mu-brand-logo {
    max-height: 40px;
  }

  #mu-menu .navbar-nav>li>a::before {
    left: 7px;
    right: 7px;
    bottom: 14px;
  }
}

@media (min-width: 1600px) {
  #mu-menu .navbar-nav>li>a.mu-btn {
    padding: 9px 16px;
    margin: 16px 6px;
    font-size: 12.5px;
  }
}

/* ---- video overlay: bloque gris plano -> pieza de diseño ---- */
.mu-responsive-video.video-overlay-wrapper {
  background:linear-gradient(135deg, #04211c, #0b4038);
  border: 1px solid var(--m-line);
}

.video-overlay {
  background:radial-gradient(ellipse at center, rgba(3, 166, 136, .28) 0%, transparent 62%),
    rgba(4, 24, 20, .5);
}

.video-overlay-text {
  border: 0;
  padding: 18px 30px 18px 52px;
  background:rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.video-overlay-text::before {
  content: '\25B6';
  left: 20px;
  color: var(--m-orange);
  font-size: 17px;
}

.video-overlay:hover .video-overlay-text {
  background:rgba(242, 116, 5, .18);
  box-shadow: 0 14px 36px rgba(242, 116, 5, .25), inset 0 0 0 1px rgba(255, 255, 255, .5);
}

/* ---- dropdown más ancho y con aire (según petición del usuario) ---- */
#mu-menu .dropdown-menu {
  min-width: 300px;
  padding: 10px;
}

#mu-menu .dropdown-menu li a {
  padding: 12px 14px;
  font-size: 13.5px;
}

/* ---- landing hub en móvil: listas respiran ---- */
@media (max-width: 767px) {
  .mu-landing-hub-list a {
    display: block;
    padding: 2px 0;
  }

  #mu-landing-welcome {
    padding: 48px 0 28px;
  }

  #mu-landing-hub {
    padding: 24px 0 56px;
  }
}


/* ---- botón ghost (Plataforma Q10): aspecto inequívoco de botón ---- */
#mu-menu a.mu-btn-ghost {
  background:#eef2f7;
  color: var(--m-ink) !important;
  border: 2px solid #dbe3ec;
}

#mu-menu a.mu-btn-ghost:hover {
  background:#fff;
  border-color: var(--m-teal);
  color: var(--m-teal) !important;
}

/* ---- separación clara entre los 3 CTAs del menú ---- */
#mu-menu .navbar-nav>li>a.mu-btn {
  margin-left: 5px;
  margin-right: 5px;
}

#mu-menu .navbar-nav>li>a#mu-search-icon {
  padding-left: 8px;
}

@media (min-width: 768px) and (max-width: 1599px) {
  #mu-menu .navbar-nav>li>a.mu-btn {
    margin-left: 3px;
    margin-right: 3px;
    padding: 8px 10px;
  }
}

/* ---- los dropdowns CTA del menú: altura consistente ---- */
#mu-menu .navbar-nav>li {
  display: flex;
  align-items: stretch;
}

#mu-menu .navbar-nav>li>a {
  display: flex;
  align-items: center;
}

#mu-menu .navbar-nav>li.dropdown {
  position: relative;
}


/* ---- FIX v3: aire derecho del navbar + separación Q10 / lupa ---- */
#mu-menu .navbar {
  padding-right: 4px;
}

#mu-menu .navbar-nav {
  margin-right: 0;
}

#mu-menu .navbar-nav>li:last-child>a#mu-search-icon {
  margin-left: 10px;
  padding: 20px 14px 20px 8px;
  min-width: 42px;
  justify-content: center;
}

@media (min-width: 768px) and (max-width: 1599px) {
  #mu-menu .navbar-nav>li:last-child>a#mu-search-icon {
    padding: 18px 10px 18px 4px;
    margin-left: 4px;
  }

  #mu-menu .navbar-nav>li>a.mu-btn {
    margin-left: 3px;
    margin-right: 2px;
    padding: 7px 9px;
    font-size: 10.5px;
  }

  #mu-menu .navbar-nav>li>a {
    font-size: 11.5px;
    padding: 20px 6px;
  }

  #mu-menu .navbar-nav>li>a::before {
    left: 6px;
    right: 6px;
  }

  #mu-menu .dropdown-menu li a {
    font-size: 12.5px;
    padding: 10px 12px;
  }

  #mu-menu .dropdown-menu {
    min-width: 264px;
  }
}

/* botones del menú siempre centrados verticalmente (misma línea base) */
#mu-menu .navbar-nav>li>a.mu-btn,
#mu-menu .navbar-nav>li>a#mu-search-icon {
  align-self: center;
}


/* ---- FIX v6: contenedor ancho real para el menú ---- */
/* BS3 fija .container a 1170px; el menú UTC necesita más aire */
@media (min-width: 1200px) {
  #mu-menu .container {
    width: calc(100% - 32px);
    max-width: 1560px;
  }

  #mu-menu .navbar-nav>li>a {
    padding: 20px 9px;
    font-size: 12.5px;
  }

  #mu-menu .navbar-nav>li>a::before {
    left: 9px;
    right: 9px;
    bottom: 15px;
  }

  #mu-menu .navbar-nav>li>a.mu-btn {
    margin: 15px 4px;
    padding: 8px 13px;
    font-size: 11.5px;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  #mu-menu .navbar-nav>li>a {
    padding: 18px 5px;
    font-size: 11.5px;
  }

  #mu-menu .navbar-nav>li>a::before {
    left: 5px;
    right: 5px;
    bottom: 13px;
  }

  #mu-menu .navbar-nav>li>a.mu-btn {
    margin: 14px 2px;
    padding: 7px 9px;
    font-size: 10.5px;
    gap: 4px;
  }

  #mu-menu .mu-brand-logo {
    max-height: 42px;
  }

  #mu-menu .navbar-brand {
    padding: 12px 10px;
  }
}

@media (min-width: 1440px) {
  #mu-menu .container {
    width: calc(100% - 48px);
  }
}

/* el bloque de 1600 que borramos, restaurar tipografía cómoda */
@media (min-width: 1600px) {
  #mu-menu .navbar-nav>li>a {
    padding: 22px 11px;
    font-size: 13.5px;
  }

  #mu-menu .navbar-nav>li>a.mu-btn {
    padding: 9px 16px;
    margin: 16px 6px;
    font-size: 12.5px;
  }
}


/* ---- FIX v7: en móvil/tablet el <li> no puede ser flex (rompe columnas) ---- */
@media (max-width: 1199px) {
  #mu-menu .navbar-nav>li {
    display: block;
  }

  #mu-menu .navbar-nav>li.dropdown {
    position: static;
  }

  #mu-menu .dropdown-menu {
    overflow: visible;
  }

  #mu-menu .dropdown-menu li a {
    white-space: normal;
    word-break: normal;
  }

  /* submenú anidado en móvil: bloquea el absolute */
  #mu-menu .dropdown-menu .dropdown>.dropdown-menu {
    left: 0;
    top: auto;
  }
}


/* ---- FIX v8: navbar movil -> logo izquierda, hamburguesa derecha ---- */
@media (max-width: 1199px) {
  #mu-menu .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    float: none;
  }

  #mu-menu .navbar-brand {
    float: left;
  }

  #mu-menu .navbar-toggle {
    display: inline-block !important;
    float: none !important;
    margin: 12px 0 !important;
  }

  #mu-menu .navbar-collapse.collapse.in {
    clear: both;
  }
}


/* ---- FIX v9: orden flex en navbar-header (logo 1ro, hamburguesa 2da) ---- */
@media (max-width: 1199px) {
  #mu-menu .navbar-header {
    flex-direction: row;
  }

  #mu-menu .navbar-header .navbar-brand {
    order: 1;
    float: none;
  }

  #mu-menu .navbar-header .navbar-toggle {
    order: 2;
  }
}


/* ---- FIX v10: centrado vertical del toggle en móvil ---- */
@media (max-width: 1199px) {
  #mu-menu .navbar-header {
    min-height: 64px;
    padding: 4px 0;
  }

  #mu-menu .navbar-toggle {
    margin: auto 0 !important;
  }
}

@media (max-width: 420px) {
  #mu-menu .mu-brand-logo {
    max-height: 38px;
  }

  #mu-menu .navbar-brand {
    padding: 8px 8px 8px 2px;
  }
}


/* ---- FIX v11: placeholder elegante para imágenes institucionales aún no subidas ---- */
/* Mientras el cliente restaura los archivos reales, la caja rota se ve diseñada, no fea */
img[src^="assets/img/administrativo/"],
img[src^="assets/img/contabilidad/"],
img[src^="assets/img/electromecanica/"],
img[src^="assets/img/enfermeria/"],
img[src^="assets/img/farmacia/"],
img[src^="assets/img/juridico/"],
img[src^="assets/img/mercadeo/"],
img[src^="assets/img/seguridad/"],
img[src^="assets/img/blog/banner-rethus.png"],
img[src^="assets/img/blog/banner-rotacionessedes.png"] {
  min-height: 170px;
  border: 1.5px dashed #b9cdc9;
  border-radius: 14px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='%2303A688' stroke-width='1.2' opacity='0.5'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='9' cy='10' r='1.6'/><path d='M4 17l5-5 3.5 3.5L16 12l4 5'/></svg>") center 40%/54px 54px no-repeat, linear-gradient(135deg, #f1f7f6 0%, #e6f0ee 100%);
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  object-fit: cover;
}

/* el alt "img" no dice nada -> texto amable vía attr(alt) solo si es genérico: usamos ::before en Chrome para broken */
img[src^="assets/img/administrativo/"]::before,
img[src^="assets/img/contabilidad/"]::before,
img[src^="assets/img/electromecanica/"]::before,
img[src^="assets/img/enfermeria/"]::before,
img[src^="assets/img/farmacia/"]::before,
img[src^="assets/img/juridico/"]::before,
img[src^="assets/img/mercadeo/"]::before,
img[src^="assets/img/seguridad/"]::before {
  content: "Fotografía del programa · pronto";
  display: block;
  margin-top: auto;
  padding: 8px 4px 0;
  color: #47706a;
}


/* ============================================================
   AJUSTES v2 (2026-09-02) — feedback del usuario
   ============================================================ */

/* ---- 1. Botón Q10 (ghost): sin cuadro blanco en hover ---- */
#mu-menu .navbar-nav>li>a.mu-btn-ghost:hover,
#mu-menu .navbar-nav>li>a.mu-btn-ghost:focus,
#mu-menu .navbar-default .navbar-nav li>a.mu-btn-ghost:hover,
#mu-menu .navbar-default .navbar-nav li>a.mu-btn-ghost:focus {
  background:#eef2f7 !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

#mu-menu a.mu-btn-ghost .fa {
  display: inline-block;
  transition: transform .25s var(--m-ease);
}

#mu-menu a.mu-btn-ghost:hover {
  transform: translateY(-2px);
}

#mu-menu a.mu-btn-ghost:hover .fa {
  transform: scale(1.28);
  filter: drop-shadow(0 3px 6px rgba(3, 166, 136, .55));
}

/* badge de sede: una sola linea */
.mu-slider-badge {
  white-space: nowrap;
}

/* guion decorativo de los h2 del hero: solid teal */
.mu-landing-welcome-header .mu-title h2::after,
.mu-landing-hub .mu-title h2::after {
  background:linear-gradient(90deg, var(--m-orange) 0%, var(--m-orange) 52%, var(--m-teal) 100%) !important;
}

/* ---- 2. Barra de título: UNA sola, más separada del texto ---- */
.mu-title h2 {
  padding-bottom: 26px;
  margin-bottom: 10px;
}

.mu-title h2::after {
  width: 64px;
  height: 4px;
  bottom: 0;
}

/* ---- 3. Dots de AMBOS carruseles: borde vacío, activo relleno verde ---- */
#mu-slider .slick-dots li button,
#mu-programas-carousel .slick-dots li button,
#mu-latest-courses .mu-latest-courses-content .slick-dots li,
#mu-latest-courses .mu-latest-courses-content .slick-dots li button {
  background:transparent !important;
  border-radius: 999px !important;
  width: 11px !important;
  height: 11px !important;
}

#mu-slider .slick-dots li button {
  border: 2px solid rgba(255, 255, 255, .8);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  display: block !important;
  padding: 0 !important;
}

#mu-slider .slick-dots li.slick-active button {
  background:#22c55e !important;
  border-color: #22c55e !important;
  width: 11px !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
}

/* Carrusel PROGRAMAS: el tema base oculta el <button>, así que el punto ES el <li> */
#mu-latest-courses .slick-dots li,
#mu-programas-carousel .slick-dots li {
  background:transparent !important;
  border: 2px solid var(--m-teal) !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 7px !important;
  border-radius: 999px !important;
  transition: background .25s var(--m-ease), box-shadow .25s var(--m-ease);
}

#mu-latest-courses .slick-dots li button,
#mu-programas-carousel .slick-dots li button {
  display: none !important;
}

#mu-latest-courses .slick-dots li:hover {
  background:rgba(3, 166, 136, .25) !important;
}

#mu-latest-courses .slick-dots li.slick-active,
#mu-programas-carousel .slick-dots li.slick-active {
  background:#22c55e !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
}

/* ---- 4. Videos: overlay CRISTAL moderno con información visible ---- */
.video-overlay {
  background:linear-gradient(160deg, rgba(2, 38, 32, .38) 0%, rgba(2, 60, 50, .30) 100%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
  backdrop-filter: blur(6px) saturate(1.15);
  transition: backdrop-filter .3s ease, background .3s ease;
}

.video-overlay:hover {
  background:linear-gradient(160deg, rgba(2, 38, 32, .30) 0%, rgba(2, 60, 50, .22) 100%) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.25);
  backdrop-filter: blur(3px) saturate(1.25);
}

.video-overlay-text {
  background:rgba(255, 255, 255, .14) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .45) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  font-size: 12.5px !important;
}

.video-overlay-text::after {
  content: 'Haz clic para reproducir';
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .85;
  margin-top: 4px;
}

/* solo al video de Icontec (player) no al de PORQUEUTC; se controla por data-video */
.video-overlay[data-video="player2"] .video-overlay-text::after {
  content: 'Por qué estudiar en la UTC';
}

.video-overlay[data-video="player"] .video-overlay-text::after {
  content: 'Certificación de calidad Icontec';
}

/* ---- 5. Features "Somos UTC": box con sombra + Leer Más naranja con zoom ---- */
#mu-features .mu-single-feature {
  background:var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r);
  box-shadow: 0 10px 28px rgba(3, 166, 136, .14), 0 2px 8px rgba(15, 23, 42, .06);
  padding: 30px 22px;
  transition: box-shadow .3s var(--m-ease), transform .3s var(--m-ease);
}

#mu-features .mu-single-feature:hover {
  box-shadow: 0 18px 40px rgba(3, 166, 136, .22), 0 4px 12px rgba(15, 23, 42, .08);
  transform: translateY(-4px);
}

#mu-features .mu-features-area .mu-features-content .mu-single-feature h4:after {
  display: none !important;
}

#mu-features .mu-features-area .mu-features-content .mu-single-feature a {
  color: var(--m-orange) !important;
  font-weight: 800;
  border: none;
  display: inline-flex;
  transform-origin: center;
  transition: transform .25s var(--m-ease);
}

#mu-features .mu-single-feature a:hover {
  transform: scale(1.12);
  color: var(--m-orange-d) !important;
}

/* ---- 6. Hub cards: íconos con sombra para no perderse con el fondo ---- */
.mu-landing-hub-card-icon,
.mu-service-single .mu-feature-icon {
  box-shadow: 0 8px 20px rgba(3, 166, 136, .28);
}

.mu-feature-icon {
  box-shadow: 0 8px 20px rgba(242, 116, 5, .32) !important;
}

/* ---- 7. Item activo de subpáginas: igual que index (teal + línea) ---- */
#mu-menu .navbar-nav>li.active-parent>a {
  color: var(--m-teal) !important;
}

#mu-menu .navbar-nav>li.active-parent>a::before {
  transform: scaleX(1);
}

#mu-menu .navbar-default .navbar-nav .active-parent>a,
#mu-menu .navbar-default .navbar-nav .active-parent>a:hover,
#mu-menu .navbar-default .navbar-nav .active-parent>a:focus {
  color: var(--m-teal) !important;
}

/* ---- 8. Contacto: tipografía más grande y legible ---- */
#mu-contact {
  font-size: 16px;
}

#mu-contact .mu-contact-info-title {
  font-size: 30px !important;
  line-height: 1.25;
}

#mu-contact .mu-contact-info-subtitle {
  font-size: 17px !important;
  line-height: 1.65;
  margin-bottom: 34px !important;
}

#mu-contact .mu-info-content h4 {
  font-size: 15px !important;
}

#mu-contact .mu-info-content p,
#mu-contact .mu-info-content a {
  font-size: 16.5px !important;
}

#mu-contact .mu-info-card {
  padding: 22px 20px !important;
}

#mu-contact .mu-contact-social h4 {
  font-size: 16px !important;
}

#mu-contact .mu-form-header h3 {
  font-size: 25px !important;
}

#mu-contact .mu-form-header .mu-form-badge {
  font-size: 13px !important;
}

#mu-contact .mu-form-group label {
  font-size: 15.5px !important;
}

#mu-contact .mu-form-group input,
#mu-contact .mu-form-group textarea {
  font-size: 16px !important;
  padding: 19px 16px 13px 16px !important;
}

#mu-contact .mu-form-privacy {
  font-size: 13.5px !important;
}

#mu-contact .mu-submit-btn {
  font-size: 16px !important;
  padding: 16px 36px !important;
}

#mu-contact .mu-map-header h3 {
  font-size: 23px !important;
}

#mu-contact .mu-map-header p {
  font-size: 16px !important;
}

#mu-contact .mu-map-badge {
  font-size: 14.5px !important;
}

@media (min-width: 992px) {
  #mu-contact .mu-contact-info-wrapper {
    padding: 10px 26px 10px 6px;
  }

  #mu-contact .mu-contact-form-wrapper {
    padding: 34px 32px;
  }
}

#mu-menu .dropdown-menu>.active>a,
#mu-menu .dropdown-menu>.active>a:hover,
#mu-menu .dropdown-menu>.active>a:focus,
#mu-menu .navbar-nav .open .dropdown-menu>.active>a,
#mu-menu .navbar-nav .open .dropdown-menu>.active>a:hover {
  background:transparent !important;
  color: var(--m-teal) !important;
  font-weight: 700 !important;
}

#mu-menu .navbar-default .navbar-nav .open>a,
#mu-menu .navbar-default .navbar-nav .open>a:hover,
#mu-menu .navbar-default .navbar-nav .open>a:focus,
#mu-menu .navbar-default .navbar-nav .dropdown.open>a {
  background:transparent !important;
  color: var(--m-teal) !important;
}

/* v2 final: los titulos de seccion van centrados (jerarquia uniforme en las 24 pag) */
.mu-title {
  text-align: center !important;
}


/* ============================================================
   AJUSTES v3 (2026-09-02 22h)
   ============================================================ */

/* ---- Q10 legible: la regla general de .mu-btn (color:#fff !important)
   ganaba por especificidad y dejaba texto blanco sobre pastilla gris.
   Especificidad >= 1,2,2 para vencerla ---- */
#mu-menu .navbar-nav>li>a.mu-btn-ghost,
#mu-menu .navbar-nav>li>a.mu-btn-ghost:hover,
#mu-menu .navbar-nav>li>a.mu-btn-ghost:focus,
#mu-menu .navbar-nav>li>a.mu-btn-ghost:active {
  background:#eef2f7 !important;
  color: var(--m-ink) !important;
  border: 1.5px solid #d5deea !important;
  box-shadow: none !important;
}

#mu-menu .navbar-nav>li>a.mu-btn-ghost .fa,
#mu-menu .navbar-nav>li>a.mu-btn-ghost i {
  color: var(--m-teal) !important;
  opacity: 1;
}

#mu-menu .navbar-nav>li>a.mu-btn-ghost:hover .fa {
  color: var(--m-teal-d) !important;
}

/* ---- UNA sola linea bajo el item activo del menu
   (mataba el border-bottom legado del theme: era la SEGUNDA linea) ---- */
#mu-menu .navbar-nav>.active>a,
#mu-menu .navbar-nav>li.active-parent>a,
#mu-menu .navbar-default .navbar-nav>.active>a,
#mu-menu .navbar-default .navbar-nav>li.active-parent>a {
  border-bottom: none !important;
}

/* la linea activa (teal) mas separada del texto */
#mu-menu .navbar-nav>li>a::before {
  bottom: 10px;
}

#mu-menu .navbar-nav>li.active-parent>a::before {
  transform: scaleX(1);
}

/* ---- breadcrumb de subpaginas: items CENTRADOS y blancos ---- */
#mu-page-breadcrumb .mu-page-breadcrumb-area {
  text-align: center;
}

#mu-page-breadcrumb .breadcrumb {
  text-align: center;
  display: inline-flex !important;
  flex-wrap: wrap;
  justify-content: center;
}

#mu-page-breadcrumb .breadcrumb>li {
  display: inline-block;
  float: none !important;
}

#mu-page-breadcrumb .breadcrumb li,
#mu-page-breadcrumb .breadcrumb li a {
  color: #fff !important;
}

#mu-page-breadcrumb .breadcrumb li.active {
  color: rgba(255, 255, 255, .85) !important;
  font-weight: 700;
}

/* ---- iconos de features: aire dentro del box (no tocando el borde) ---- */
#mu-features .mu-single-feature {
  padding: 38px 26px 30px;
}

#mu-features .mu-feature-icon {
  margin-top: 6px;
  margin-bottom: 22px;
}

/* ---- overlay de video: pulso SUAVE y formal (1 ciclo lento, no estroboscopico) ---- */
.video-overlay-text {
  animation: m-glass-breathe 3.2s ease-in-out infinite;
}

@keyframes m-glass-breathe {

  0%,
  100% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .25);
  }

  50% {
    box-shadow: 0 14px 40px rgba(3, 166, 136, .45), inset 0 0 0 1px rgba(255, 255, 255, .5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-overlay-text {
    animation: none !important;
  }
}

.video-overlay.hidden {
  display: none !important;
}

/* ---- numeracion de contadores con fuente tabular (estable al animar) ---- */
#mu-abtus-counter .counter {
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  display: inline-block;
}

/* ============================================================
   AJUSTES v4 (2026-09-02 23h) — feedback del usuario
   ============================================================ */

/* ---- v5-T: Tipografía self-hosted — Outfit (títulos) +
   Plus Jakarta Sans (cuerpo). Variables WOFF2 descargadas de
   Google Fonts y alojadas localmente en /assets/fonts/. ---- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span,
button,
input,
select,
textarea,
label,
figcaption,
address,
.btn,
.breadcrumb,
.mu-search-form input {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---- v4-H: barra degradada (naranja→verde) también bajo los títulos
   de banda teal de subpáginas (breadcrumb) ---- */
#mu-page-breadcrumb .mu-page-breadcrumb-area h2 {
  position: relative;
  padding-bottom: 16px;
}

#mu-page-breadcrumb .mu-page-breadcrumb-area h2::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background:linear-gradient(90deg, #ffffff 0%, #ffffff 45%, var(--m-orange) 100%);
}

/* ---- v4-D: captions de blog — jerarquía moderna, legible, con barra ---- */
.mu-blog-single-item .mu-blog-single-img .mu-blog-caption {
  padding: 26px 15px 10px;
}

.mu-blog-caption h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.55rem) !important;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 18px;
  text-transform: none;
  letter-spacing: 0;
}

.mu-blog-caption h2 a {
  color: var(--m-teal) !important;
  text-decoration: none;
}

.mu-blog-caption h2::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background:linear-gradient(90deg, var(--m-orange) 0%, var(--m-orange) 52%, var(--m-teal) 100%);
}

.mu-blog-caption h3,
.mu-blog-caption H3 {
  font-size: 1.05rem !important;
  font-weight: 700;
  color: var(--m-ink);
  margin: 24px 0 10px;
  line-height: 1.5;
  text-transform: none;
}

.mu-blog-caption p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--m-gray);
  margin-bottom: 12px;
}

/* ---- v4-E: tarjetas de descarga (fp-) compartidas y MÁS GRANDES ---- */
.fp-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  padding: 36px 0 48px;
}

.fp-download-card {
  flex: 1 1 300px;
  max-width: 380px;
  background:#fff;
  border: 1px solid var(--m-line);
  border-radius: var(--m-r);
  padding: 42px 30px 36px;
  text-align: center;
  box-shadow: var(--m-shadow-sm);
  transition: transform .25s var(--m-ease), box-shadow .25s var(--m-ease);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fp-download-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--m-shadow);
}

.fp-download-card .fp-icon {
  font-size: 2.9rem;
  color: var(--m-teal);
  margin-bottom: 20px;
}

.fp-download-card h3 {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--m-ink);
  line-height: 1.5;
  margin: 0 0 24px;
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* ---- v4-J: piso de legibilidad (nada de texto diminuto) ---- */
.mu-landing-hub-list li,
.mu-landing-hub-card p {
  font-size: 14.5px;
}

.mu-landing-action-card p {
  font-size: 14.5px;
}

#mu-footer p,
#mu-footer address p,
#mu-footer li a {
  font-size: 14px;
  line-height: 1.7;
}

#mu-footer .mu-footer-widget h4 {
  margin-bottom: 18px;
}



/* ============================================================
   PROGRAMAS (blog-*): tarjetas de contenido — unificado 2026
   Lenguaje visual coherente con el hero (glass blanco translúcido,
   borde suave, sombra teal, iconos). Aplica a info-card,
   feature-card y mu-program-body (los 8 programas).
   ============================================================ */
.info-card,
.feature-card,
.mu-program-body>.container .info-card,
.mu-program-body .info-card {
  background:rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 28px 26px;
  margin-bottom: 1.4rem;
  box-shadow: 0 18px 44px rgba(2, 90, 80, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform .25s ease, box-shadow .25s ease;
}

.info-card:hover,
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 54px rgba(2, 90, 80, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.info-card h3,
.feature-card h3,
.mu-program-body h3 {
  color: #F27405;
  /* naranja de marca */
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  text-transform: none;
  letter-spacing: .2px;
}

.info-card p,
.feature-card p {
  color: #2c3e50;
  line-height: 1.75;
  margin-bottom: .5rem;
}

.info-card ul,
.feature-card ul {
  padding-left: 0;
  list-style: none;
  margin: .75rem 0 0;
  color: #2c3e50;
}

.info-card ul li,
.feature-card ul li {
  margin-bottom: .65rem;
  padding-left: 1.85rem;
  position: relative;
  line-height: 1.6;
}

.info-card ul li::before,
.feature-card ul li::before {
  content: "\f26b";
  /* bi-check-circle-fill */
  font-family: "bootstrap-icons";
  color: #03A688;
  /* teal de marca */
  position: absolute;
  left: 0;
  top: .05em;
  font-size: 1.05rem;
}

.info-card ul li strong,
.feature-card ul li strong {
  color: #025a50;
}

/* Tarjetas con ícono superior (info-card) */
.mu-program-body .info-card h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.mu-program-body .info-card h3::before {
  font-family: "bootstrap-icons";
  font-size: 1.3rem;
  color: #F27405;
}

/* ============================================================
   mu-program-body (contabilidad, farmacia): encuadre grade
   ============================================================ */
.mu-program-body {
  padding: 10px 0 30px;
}

.mu-program-body h2,
.mu-program-body .container h2 {
  color: #025a50;
  font-weight: 800;
  position: relative;
  padding-bottom: .55rem;
  margin-bottom: 1.5rem;
}

.mu-program-body h2::after,
.mu-program-body .container h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background:linear-gradient(90deg, #F27405, #03A688);
}

.mu-program-body p {
  color: #2c3e50;
  line-height: 1.75;
}

.mu-program-body ul:not(.mu-requisitos) {
  padding-left: 0;
  list-style: none;
}

.mu-program-body ul:not(.mu-requisitos) li {
  margin-bottom: .65rem;
  padding-left: 1.85rem;
  position: relative;
  line-height: 1.6;
  color: #2c3e50;
}

.mu-program-body ul:not(.mu-requisitos) li::before {
  content: "\f26b";
  font-family: "bootstrap-icons";
  color: #03A688;
  position: absolute;
  left: 0;
  top: .05em;
  font-size: 1.05rem;
}

.mu-program-body ul li strong {
  color: #025a50;
}

/* Secciones de contenido (heading con acento) */
.mu-content-area h2,
.mu-our-teacher-contenido h2,
.mu-our-teacher-contenido1 h2,
#mu-our-teacher-contenido h2,
#mu-our-teacher-contenido1 h2 {
  color: #025a50;
  font-weight: 800;
  position: relative;
  padding-bottom: .55rem;
  margin-bottom: 1.4rem;
}

.mu-content-area h2::after,
.mu-our-teacher-contenido h2::after,
.mu-our-teacher-contenido1 h2::after,
#mu-our-teacher-contenido h2::after,
#mu-our-teacher-contenido1 h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background:linear-gradient(90deg, #F27405, #03A688);
}

.mu-content-area p,
.mu-our-teacher-contenido p,
.mu-our-teacher-contenido1 p {
  color: #2c3e50;
  line-height: 1.75;
}

.mu-content-area ul,
.mu-our-teacher-contenido ul,
.mu-our-teacher-contenido1 ul {
  padding-left: 0;
  list-style: none;
}

.mu-content-area ul li,
.mu-our-teacher-contenido ul li,
.mu-our-teacher-contenido1 ul li {
  margin-bottom: .65rem;
  padding-left: 1.85rem;
  position: relative;
  line-height: 1.6;
  color: #2c3e50;
}

.mu-content-area ul li::before,
.mu-our-teacher-contenido ul li::before,
.mu-our-teacher-contenido1 ul li::before {
  content: "\f26b";
  font-family: "bootstrap-icons";
  color: #03A688;
  position: absolute;
  left: 0;
  top: .05em;
  font-size: 1.05rem;
}

.mu-content-area ul li strong,
.mu-our-teacher-contenido ul li strong,
.mu-our-teacher-contenido1 ul li strong {
  color: #025a50;
}

/* responsive tarjetas */
@media (max-width: 768px) {

  .info-card,
  .feature-card,
  .mu-program-body .info-card {
    padding: 22px 18px;
    border-radius: 16px;
  }

  .info-card h3,
  .feature-card h3,
  .mu-program-body h3 {
    font-size: 1.15rem;
  }
}

/* ============================================================
   CTA interior de inscripción (todos los programas)
   ============================================================ */
/* El bloque vive dentro de un .col-xs-12, que en Bootstrap 3 lleva
   float:left. Sin limpiar el float, el <h2> siguiente ("Perfil del
   egresado") quedaba con su caja transparente ENCIMA del botón y se
   tragaba los clics: el botón no era pulsable. Al limpiar el float la
   caja del h2 ya no lo pisa, sin cambiar nada de sitio. */
.mu-program-cta-wrap {
  float: none;
  width: auto;
  clear: both;
}

.mu-program-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin: 10px 0 30px;
  padding: 26px 30px;
  border-radius: 20px;
  background:linear-gradient(135deg, rgba(2, 90, 80, 0.92), rgba(3, 166, 136, 0.88));
  box-shadow: 0 20px 48px rgba(2, 90, 80, 0.30);
  color: #fff;
}

.mu-program-cta-text {
  flex: 1 1 260px;
}

.mu-program-cta-kicker {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #b9f0df;
  margin-bottom: .25rem;
}

.mu-program-cta-text h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff !important;
  margin: 0 0 .3rem;
}

.mu-program-cta-text p {
  color: rgba(255, 255, 255, .92);
  margin: 0;
  line-height: 1.5;
}

.mu-program-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  background:linear-gradient(135deg, #F27405, #e26308);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 10px 26px rgba(242, 116, 5, .4), 0 0 0 1px rgba(255, 255, 255, .18) inset;
  transition: transform .25s cubic-bezier(.34, 1.3, .64, 1),
              box-shadow .25s ease,
              background-color .25s ease;
}

/* Destello que recorre el botón al pasar el ratón (o al enfocarlo con teclado) */
.mu-program-cta-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -70%;
  width: 45%;
  height: 320%;
  background:linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateY(-50%) skew(-22deg);
  pointer-events: none;
  opacity: 0;
}

.mu-program-cta-btn:hover,
.mu-program-cta-btn:focus-visible {
  transform: translateY(-3px) scale(1.025);
  background:linear-gradient(135deg, #ff8a1f, #e26308);
  color: #fff;
  box-shadow: 0 18px 40px rgba(242, 116, 5, .55),
              0 6px 16px rgba(0, 0, 0, .18),
              0 0 0 4px rgba(242, 116, 5, .18);
}

.mu-program-cta-btn:hover::after,
.mu-program-cta-btn:focus-visible::after {
  animation: mu-cta-shine .75s ease-out;
}

@keyframes mu-cta-shine {
  0%   { left: -70%; opacity: 1; }
  100% { left: 130%; opacity: 1; }
}

.mu-program-cta-btn:active {
  transform: translateY(-1px) scale(.99);
  box-shadow: 0 8px 20px rgba(242, 116, 5, .45);
}

.mu-program-cta-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.mu-program-cta-btn i {
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.mu-program-cta-btn:hover i,
.mu-program-cta-btn:focus-visible i {
  transform: scale(1.18) rotate(-5deg);
}

@media (max-width: 768px) {
  .mu-program-cta {
    padding: 20px 18px;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 16px;
  }

  /* En columna, el "1 1 260px" de .mu-program-cta-text se aplicaba al ALTO:
     reservaba 260px verticales aunque el texto mida ~75px, y la tarjeta se
     estiraba hasta los 370px. Con flex:none la tarjeta mide lo que ocupa. */
  .mu-program-cta-text {
    flex: none;
  }

  .mu-program-cta-btn {
    justify-content: center;
  }
}

/* ============================================================
   Modal de malla curricular
   Se construye desde JS (assets/js/malla-modal2026.js).
   La imagen ocupa el 80% de la ventana; al tocarla se cierra y
   el usuario vuelve a la sección donde estaba.
   ============================================================ */
.mu-malla-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background:rgba(1, 20, 17, .9);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}

.mu-malla-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.mu-malla-figure {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 80vw;
  max-height: 80vh;
  transform: scale(.94);
  transition: transform .34s cubic-bezier(.34, 1.3, .64, 1);
}

.mu-malla-modal.is-open .mu-malla-figure {
  transform: scale(1);
}

/* La imagen ocupa hasta el 80% del ancho y del alto de la ventana */
.mu-malla-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 80vw;
  max-height: 80vh;
  border-radius: 14px;
  background:#fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6),
              0 0 0 1px rgba(255, 255, 255, .14);
  cursor: zoom-out;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Botón de cierre: fijo en la esquina, nunca queda fuera de pantalla */
.mu-malla-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:#fff;
  color: #025a50;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}

.mu-malla-close:hover {
  background:#F27405;
  color: #fff;
  transform: scale(1.08) rotate(90deg);
}

.mu-malla-close:focus-visible {
  outline: 3px solid #F27405;
  outline-offset: 3px;
}

.mu-malla-hint {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 18px;
  border-radius: 999px;
  background:rgba(0, 0, 0, .45);
  color: rgba(255, 255, 255, .92);
  font-size: .82rem;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 768px) {
  .mu-malla-modal {
    padding: 2vh 2vw;
  }

  .mu-malla-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }

  .mu-malla-hint {
    bottom: 14px;
    font-size: .76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mu-malla-modal,
  .mu-malla-figure,
  .mu-malla-close,
  .mu-program-cta-btn,
  .mu-program-cta-btn i {
    transition: none;
  }

  .mu-malla-figure {
    transform: none;
  }

  .mu-program-cta-btn:hover::after,
  .mu-program-cta-btn:focus-visible::after {
    animation: none;
  }

  .mu-program-cta-btn:hover,
  .mu-program-cta-btn:hover i {
    transform: none;
  }
}

/* ============================================================
   glass-requisitos: efecto glassmorphism en los contenedores de
   requisitos de admisión. El TÍTULO ("Requisitos de admisión")
   y los ICONOS <i class="bi"> se quedan FUERA del efecto —
   solo el texto de los <li> se ve dentro del cristal.
   ============================================================ */
.glass-requisitos {
  /* Fondo gris azulado translúcido */
  background:rgba(160, 180, 200, 0.25);
  /* Vidrio borroso */
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  /* Borde blanco translúcido */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 28px 30px 24px;
  /* Sombra exterior suave */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  /* Tinte verde #03a688 (marca) en el borde interno */
  /* La sombra inset verde se superpone al borde blanco */
  /* Sombra interior sutil (brillo superior del cristal) */
  /* + acento naranja (marca) en highlight superior */
}

.glass-requisitos {
  /* Aplicado como box-shadow adicional para el tinte verde #03A688 */
  /* Nota: se usa inset para el border verde de marca */
}

.glass-requisitos::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  /* Tinte verde #03a688 (marca) */
  box-shadow: inset 0 0 0 1px rgba(3, 166, 136, 0.15);
}

.glass-requisitos {
  position: relative;
  /* Sombra interior sutil (brillo superior del cristal) */
  /* + acento naranja (marca) en highlight superior */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    /* exterior suave */
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    /* brillo superior del cristal */
    inset 0 0 0 1px rgba(3, 166, 136, 0.15);
  /* borde verde de marca */
}

.glass-requisitos::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 16px 16px 0 0;
  /* Acabo naranja #F27405 (marca): highlight superior sutil */
  background:linear-gradient(90deg,
      rgba(242, 116, 5, 0.25) 0%,
      rgba(242, 116, 5, 0.10) 50%,
      transparent 100%);
  pointer-events: none;
}

.glass-requisitos ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.glass-requisitos li {
  margin-bottom: 0.75rem;
  padding-left: 1.85rem;
  position: relative;
  line-height: 1.6;
  color: #ffffff;
  /* Legibilidad: text-shadow sobre fondo glass */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.glass-requisitos li:last-child {
  margin-bottom: 0;
}

/* Los iconos Bootstrap que ya existen se mantienen nítidos — NO reciben glass */
.glass-requisitos i {
  color: #03A688;
  /* verde de marca */
  text-shadow: none;
  /* anula el text-shadow del li para iconos */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.10));
}

/* Responsive: padding reducido en móvil */
@media (max-width: 768px) {
  .glass-requisitos {
    padding: 20px 22px 18px;
  }

  .glass-requisitos li {
    padding-left: 1.5rem;
    line-height: 1.55;
  }
}

/* ============================================================
   CONTROL ESTÉTICO DE IMÁGENES RESPONSIVAS (2026-09-14)
   Aplica object-fit: cover y alturas controladas para que las
   imágenes no roben espacio vertical en PC ni móviles.
   EXCEPTUADOS: Portadas de programas (.mu-program-hero img).
   ============================================================ */

/* 1. Tarjetas de Cursos / Programas en inicio y listados */
.mu-latest-course-img img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px 12px 0 0;
  transition: transform 0.4s var(--m-ease);
}

.mu-latest-course-single:hover .mu-latest-course-img img {
  transform: scale(1.03);
}

/* 2. Fotos de Profesores */
.mu-our-teacher-img img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  transition: transform 0.4s var(--m-ease);
}

.mu-our-teacher-single:hover .mu-our-teacher-img img {
  transform: scale(1.03);
}

/* 3. Imágenes de Noticias y Blog General (excluyendo mu-program-hero) */
.mu-news-single-img img,
.mu-blog-single-img img:not(.mu-program-hero img) {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

/* 3b. Fotos de blog-single: altura 540px y sin recorte — se estiran a la caja (fill) */
.mu-blog-single-img img:not(.mu-program-hero img) {
  height: 540px;
  object-fit: fill;
}

/* 4. Galerías */
.mu-gallery-body img,
.mu-single-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  transition: transform 0.4s var(--m-ease);
}

/* 5. Imágenes Generales con clase custom-img */
img.custom-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
}

/* 6. Banners de Encabezado de Página (ej: Matrículas Abiertas, Galería, Siluetas de Sede)
   Usa object-fit: CONTAIN para NUNCA cortar texto de la imagen (como "Matrículas Abiertas")
   y max-width para que la imagen se vea 100% COMPLETA sin ocupar toda la pantalla vertical. */
.mu-programas-banner,
img[src*="MATRICULAS"],
img[src*="galery.png"],
img[src*="galeria.png"],
img[src*="GIRON-SILUETA"] {
  width: 95%;
  max-width: 1240px;
  height: 380px;
  max-height: 45vh;
  object-fit: fill;
  object-position: center;
  background-color:var(--m-bg);
  margin: 20px auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* Reglas de Altura para Pantallas Móviles (< 768px) */
@media (max-width: 767px) {
  .mu-latest-course-img img {
    height: 180px;
  }

  .mu-our-teacher-img img {
    height: 220px;
  }

  .mu-news-single-img img {
    height: 180px;
  }

  .mu-gallery-body img,
  .mu-single-gallery img {
    height: 160px;
  }

  img.custom-img {
    max-height: 240px;
  }

  .mu-programas-banner,
  img[src*="MATRICULAS"],
  img[src*="galery.png"],
  img[src*="galeria.png"],
  img[src*="GIRON-SILUETA"] {
    width: 100%;
    height: 220px;
    max-height: 35vh;
    margin: 12px auto;
    border-radius: 12px;
  }
}


/* ============================================================
   ENCUADRE COMPLETO DE IMÁGENES Y VIDEO — SOLO MÓVIL
   (revisión 2026-09-15)
   ------------------------------------------------------------
   Diagnóstico medido en navegador: en móvil había 41 casos donde la caja
   obligaba a la imagen a una proporción distinta de la suya, con
   object-fit: cover (recortaba, hasta un 172%) o fill (deformaba, hasta
   un 111%). EN ESCRITORIO NO SE TOCA NADA.
   Criterio: el ALTO pasa a auto (manda la proporción real de la imagen)
   y el ANCHO se mantiene en porcentaje. Ni recorte ni deformación.
   ============================================================ */
@media (max-width: 991px) {

  /* 1. SLIDER PRINCIPAL DE INICIO
     La caja era más alta que la foto (proporción 1.79) y recortaba los
     lados: en móvil se perdía el 19% del encuadre. Con 16/9 la desviación
     baja a menos del 1%. El min-height cubre las pantallas muy estrechas
     (≤360px), donde en 16/9 el hero quedaría más bajo que su tarjeta de
     texto; ahí el contain deja la foto completa sobre el degradado. */
  #mu-slider.mu-slider-modern .mu-slider-single .mu-slider-img {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 210px;
  }

  #mu-slider.mu-slider-modern .mu-slider-single .mu-slider-img figure img {
    object-fit: contain;
  }

  /* 2. IMAGEN DE ENCABEZADO DE ARTÍCULO (blog, ReTHUS, rotaciones…)
     Forzada a 540px con object-fit: fill: estiraba las bandas de
     proporción 2.36 hasta un 111%. Ahora manda la imagen. */
  .mu-news-single-img img,
  .mu-blog-single-img img:not(.mu-program-hero img) {
    height: auto;
    max-height: 540px;
    object-fit: contain;
  }

  /* 3. BANNERS DE ENCABEZADO DE PÁGINA (Matrículas, galería, silueta) */
  .mu-programas-banner,
  img[src*="MATRICULAS"],
  img[src*="galery.png"],
  img[src*="galeria.png"],
  img[src*="GIRON-SILUETA"] {
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /* 4. FOTO DE SEDES DEL PIE DE PÁGINA */
  .mu-footer-banner {
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /* 5. FOTO DE PROFESOR / DIRECTORIO */
  .mu-our-teacher-card .card-img-wrap img,
  .card-img-wrap img {
    height: auto;
    object-fit: contain;
  }

  /* 6. CUADRÍCULA DE GALERÍA
     En móvil la rejilla es de una sola columna: cada foto puede mandar
     sin dejar huecos ni desalinear filas. */
  #mu-gallery .mu-gallery-area .mu-gallery-content .mu-gallery-body ul li .mu-single-gallery .mu-single-gallery-item .mu-single-gallery-img {
    height: auto;
    min-height: 0;
  }

  #mu-gallery .mu-gallery-area .mu-gallery-content .mu-gallery-body ul li .mu-single-gallery .mu-single-gallery-item .mu-single-gallery-img img {
    height: auto;
    object-fit: contain;
  }

  /* 7. IMAGEN DE LA PÁGINA 404
     En 404.html lleva el atributo height="464", que en móvil deformaba
     una foto de proporción 1.5. El CSS gana al atributo, así que solo se
     corrige aquí (escritorio se queda con sus 464px de siempre). */
  .mu-about-us-right img {
    height: auto;
  }
}


/* ============================================================
   COVER DE VIDEO CON GESTO "TAP TO PLAY"  (2026-09-15)
   ------------------------------------------------------------
   Antes el overlay no se veía: el video tiene z-index:10 !important
   (style2026) y el overlay z-index:5, así que el video lo tapaba y
   solo se veía el fotograma, sin ninguna pista de que se podía
   reproducir. Ahora el cover queda por encima y muestra:
     - botón PLAY naranja con anillo que se expande
     - texto glass "TAP TO PLAY"
     - una mano animada que baja, toca el botón y se retira
   El clic sigue gestionándolo assets/js/video2026.js (ya funcionaba).
   ============================================================ */
.video-overlay {
  z-index: 20;                 /* antes 5: quedaba debajo del video */
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

/* El botón de play */
.video-overlay-play {
  position: relative;
  width: 86px;
  height: 86px;
  flex: 0 0 auto;
  border-radius: 50%;
  background:linear-gradient(135deg, #F27405 0%, #e26308 100%);
  box-shadow: 0 16px 40px rgba(242, 116, 5, .45),
              inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .3s cubic-bezier(.34, 1.3, .64, 1), box-shadow .3s ease;
}

/* triángulo blanco centrado */
.video-overlay-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px 0 0 -9px;
  width: 0;
  height: 0;
  border-left: 26px solid #fff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

/* anillo que se expande hacia afuera */
.video-overlay-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(242, 116, 5, .8);
  animation: mu-video-ring 2.8s ease-out infinite;
}

@keyframes mu-video-ring {
  0%   { transform: scale(1);    opacity: .85; }
  70%  { transform: scale(1.8);  opacity: 0; }
  100% { transform: scale(1.8);  opacity: 0; }
}

/* La mano que "toca": entra desde abajo a la derecha, toca el botón y se va */
.video-overlay-tap {
  position: absolute;
  /* La yema del dedo es la parte ALTA del icono: con este anclaje queda
     justo sobre la mitad inferior del botón, como un toque real. */
  right: 4px;
  bottom: -13px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
  pointer-events: none;
  animation: mu-video-tap 2.8s cubic-bezier(.45, 0, .25, 1) infinite;
}

@keyframes mu-video-tap {
  /* Ciclo de 2.8s: entra, TOCA el botón, se queda visible un momento y se retira.
     La mano se ve ~68% del ciclo para que el gesto se entienda de un vistazo. */
  0%, 8%    { transform: translate(14px, 14px) scale(.80); opacity: 0; }
  22%       { transform: translate(14px, 14px) scale(.85); opacity: 1; }
  40%       { transform: translate(0, 0) scale(1);         opacity: 1; }
  48%       { transform: translate(0, 0) scale(.86);       opacity: 1; }   /* el toque */
  56%       { transform: translate(0, 0) scale(1);         opacity: 1; }
  78%       { transform: translate(0, 0) scale(1);         opacity: 1; }   /* se queda visible */
  92%, 100% { transform: translate(14px, 14px) scale(.80); opacity: 0; }
}

/* La etiqueta de cristal: quita el triangulito pequeño (ya hay botón) */
.video-overlay-text {
  padding: 14px 26px !important;
  padding-left: 26px !important;
  font-size: 13px !important;
  letter-spacing: .16em !important;
}

.video-overlay-text::before {
  content: none !important;
}

/* Feedback al pulsar */
.video-overlay:hover .video-overlay-play {
  transform: scale(1.06);
  box-shadow: 0 20px 46px rgba(242, 116, 5, .55),
              inset 0 1px 0 rgba(255, 255, 255, .4);
}

.video-overlay:focus-visible {
  outline: 3px solid #F27405;
  outline-offset: -3px;
}

/* En móvil el botón y la mano se reducen un poco */
@media (max-width: 767px) {
  .video-overlay {
    gap: 12px;
  }

  .video-overlay-play {
    width: 66px;
    height: 66px;
  }

  .video-overlay-play::before {
    margin: -11px 0 0 -7px;
    border-left-width: 20px;
    border-top-width: 11px;
    border-bottom-width: 11px;
  }

  .video-overlay-tap {
    right: 3px;
    bottom: -10px;
    width: 34px;
    height: 34px;
    font-size: 24px;
  }

  .video-overlay-text {
    padding: 11px 20px !important;
    font-size: 11.5px !important;
  }
}

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .video-overlay-play::after,
  .video-overlay-tap {
    animation: none !important;
  }

  .video-overlay-tap {
    transform: translate(6px, 6px) scale(.9);
    opacity: .9;
  }

  .video-overlay-play {
    transition: none;
  }
}


/* ==========================================================================
   SISTEMA DE DISEÑO — ESCALA MODULAR, RITMO VERTICAL E ICONOGRAFÍA
   Actualización visual 2026-09-16
   --------------------------------------------------------------------------
   SOLO tipografía, espaciado e iconografía.
   NO se altera ningún contenido, la paleta institucional (#03A688 / #F27405)
   ni las dimensiones de imágenes o reproductores de video.
   ========================================================================== */

/* ---------- A. TOKENS: escala tipográfica modular (base 16px, Major Third 1.25) ---------- */
:root {
  /* OJO: bootstrap2026.css fija html{font-size:10px}, así que 1rem = 10px y no 16px.
     Por eso la escala va en px absolutos: son los valores exactos del sistema. */
  --fs-display: clamp(35px, 4.5vw, 51px);
  --fs-h2:      clamp(28px, 3vw, 36px);
  --fs-h3:      20px;
  --fs-h4:      16.8px;
  --fs-h3-mod:  18px;      /* Bloques 2 y 4 del plan: tarjetas de acceso y modulos */
  --fs-eyebrow: 12.5px;
  --fs-body:    16px;
  --fs-meta:    13.6px;

  --lh-display: 1.15;
  --lh-heading: 1.22;
  --lh-card:    1.3;
  --lh-body:    1.65;

  --measure: 70ch;          /* longitud de línea cómoda de lectura */

  --sp-section: 80px;
  --sp-block:   36px;
  --sp-gap:     24px;
  --sp-card:    26px;

  --ic-top:     15px;
  --ic-nav:     17px;
  --ic-quick:   27px;
  --ic-feature: 34px;
  --ic-chevron: 13px;
}

@media (max-width: 991px) {
  :root {
    --fs-display: 33.6px;  --fs-h2: 26.4px;  --fs-h3: 18.4px;  --fs-h4: 16px;
    --fs-h3-mod: 17.2px;
    --fs-eyebrow: 12px;    --fs-body: 15.2px; --fs-meta: 13px;
    --sp-section: 60px;    --sp-block: 28px;  --sp-gap: 20px;     --sp-card: 22px;
    --ic-quick: 26px;      --ic-feature: 30px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-display: 26.4px;  --fs-h2: 22.4px;  --fs-h3: 17.6px;  --fs-h4: 15.2px;
    --fs-h3-mod: 16.6px;
    --fs-eyebrow: 11.5px;  --fs-body: 14.7px; --fs-meta: 12.8px;
    --sp-section: 44px;    --sp-block: 24px;  --sp-gap: 16px;     --sp-card: 20px;
    --ic-quick: 26px;      --ic-feature: 26px;
  }
}

/* ---------- B. TIPOGRAFÍA ---------- */

/* B1. Héroe del slider
   El selector lleva el ID porque style2026 fija
   #mu-slider ... .mu-slider-content h2 { font-size: 18px } en <=480px y ganaba por especificidad. */
#mu-slider.mu-slider-modern .mu-slider-single .mu-slider-content h2 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* B2. Títulos de sección (incluye el título de las subpáginas)
   Los selectores con ID son necesarios porque varias páginas traen su propio
   <style> inline DESPUÉS de este archivo (course.html 32px, Pagoenlinea.html
   32px, directorio.html 36px) y ganaban por orden de documento. */
.mu-title h2,
.mu-title h3,
#mu-our-asesores .mu-title h2,
#mu-pago-moderno .mu-title h2,
#mu-our-teacher.modern .mu-title h2,
#mu-page-breadcrumb .mu-page-breadcrumb-area h2,
#mu-page-breadcrumb .mu-page-breadcrumb-area h2 span {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* B3. Títulos de tarjeta / módulo
   .cdx-card-head h3 va con ID: course-detail.html lo fija a 17.5px en su
   propio <style> inline, que va después de este archivo. */
#mu-course-content .cdx-card-head h3,
.mu-latest-course-content h3,
.mu-blog-single-item h3,
.mu-blog-single-item .mu-blog-caption h3,
.mu-single-feature h3,
.mu-single-service h3,
.info-card h3,
.feature-card h3,
.cdx-card-head h3,
.cdx-hero-body .cdx-title,
.mu-programa-card h3,
.mu-our-teacher-content h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-card);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* B3b. Títulos de los módulos compactos (Bloques 2 y 4 del plan: H3 a 18px).
   Un escalón por debajo del H3 de contenido para no competir con él. */
.mu-landing-action-card h3,
.mu-landing-hub-card h3,
.mu-service-single h3,
.mu-single-service h3,
.mu-landing-welcome-card h3 {
  font-size: var(--fs-h3-mod);
  line-height: var(--lh-card);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* B4. Subtítulos
   El h4 del pie va con ID porque modern2026 ya lo fija a 15px con #mu-footer ... */
#mu-footer .mu-footer-widget h4,
.mu-content-area h4,
.mu-program-body h4 {
  font-size: var(--fs-h4);
  line-height: 1.35;
  font-weight: 600;
}

/* B5. Cuerpo de lectura: interlineado e longitud de línea */
.mu-content-area p,
.mu-program-body p,
.mu-blog-single-item p,
.mu-about-us-area p,
#mu-service p,
#mu-features p,
.mu-our-teacher-content p,
.cdx-card p,
.mu-landing-welcome p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* El límite de línea sólo donde el texto va a ancho completo */
.mu-content-area > .container > .row > [class*="col-"] > p,
.mu-program-body > .container > .row > [class*="col-"] > p,
.mu-content-area > .container > p,
.mu-program-body > .container > p {
  max-width: var(--measure);
}

/* B6. Micro-etiquetas / eyebrow / badges
   .mu-slider-modern .mu-slider-badge y #mu-course-content .cdx-kicker ya
   estaban fijados con más especificidad dentro de este mismo archivo / inline. */
.mu-landing-eyebrow,
.mu-slider-modern .mu-slider-badge,
.mu-program-cta-kicker,
.mu-gallery-cat,
#mu-course-content .cdx-kicker {
  font-size: var(--fs-eyebrow);
  letter-spacing: .05em;
  font-weight: 700;
}

/* B7. Metadatos (fechas, teléfonos, créditos)
   Con ID porque este mismo archivo fija #mu-footer .mu-footer-bottom-area p a 12.5px. */
#mu-footer .mu-footer-bottom-area p,
.mu-footer-bottom-area p,
.mu-blog-meta,
.mu-blog-meta a,
.mu-top-email,
.mu-top-phone,
.mu-top-email a,
.mu-top-phone span {
  font-size: var(--fs-meta);
  line-height: 1.4;
  font-weight: 500;
}

/* ---------- C. RITMO VERTICAL (8-point grid) ---------- */

/* C1. Secciones principales */
#mu-service, #mu-about-us, #mu-features, #mu-latest-courses,
#mu-our-teacher, #mu-from-blog, #mu-gallery, #mu-contact, #mu-error,
#mu-course-content, #mu-testimonial, #mu-page-breadcrumb,
#mu-programas-tecnicos, #mu-programas-pago, .mu-content-area {
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
}

/* C2. Encabezado de sección -> cuadrícula de tarjetas */
.mu-title {
  margin-bottom: var(--sp-block);
}

/* C3. Separación de tarjetas */
.mu-latest-courses-area .row,
.mu-our-teacher-area .row,
#mu-features .row,
#mu-from-blog .row {
  row-gap: var(--sp-gap);
}

/* C4. Relleno interno de tarjetas */
.mu-single-feature,
.mu-latest-course-content,
.mu-blog-single-item .mu-blog-caption,
.cdx-card,
.mu-programa-card {
  padding: var(--sp-card);
}

/* ---------- D. ICONOGRAFÍA NORMALIZADA ---------- */

/* D1. Barra superior y metadatos */
.mu-top-email i, .mu-top-phone i, .mu-top-social-nav a {
  font-size: var(--ic-top);
}

/* D2. Navegación */
#top-menu > li > a i,
#top-menu .dropdown-menu i,
.navbar-toggle i {
  font-size: var(--ic-nav);
}

/* D3. Accesos rápidos (bienvenida / hub) */
.mu-landing-hub-card .mu-landing-hub-icon,
.mu-landing-welcome .mu-landing-welcome-icon,
.mu-hub-card-icon {
  font-size: var(--ic-quick);
}

/* D4. Módulos feature / servicios */
.mu-single-feature .mu-feature-icon i,
.mu-single-service .mu-service-icon i {
  font-size: var(--ic-feature);
}

/* D5. Chevrons y flechas de acompañamiento */
.mu-blog-more i,
.mu-latest-course-content .mu-read-more i,
.cdx-btn i,
.mu-slider-actions i {
  font-size: var(--ic-chevron);
}

/* ---------- E. ÁREAS TÁCTILES (WCAG 2.5.5 / Apple HIG / Material) ---------- */
@media (max-width: 991px) {
  /* Enlaces de navegación del menú: altura cómoda para el dedo */
  #top-menu > li > a {
    min-height: 46px;
    display: flex;
    align-items: center;
  }

  /* Enlaces del pie: línea de 34px como pide el plan */
  #mu-footer .mu-footer-widget ul li a {
    line-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Botones e iconos sueltos: 44px mínimos */
  .mu-top-social-nav a,
  .whatsapp-float,
  .scrollToTop {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Los enlaces dentro de un párrafo quedan exentos (excepción inline de WCAG) */
.mu-content-area p a,
.mu-program-body p a {
  min-height: 0;
}


/* ---------- F. AJUSTES POR BLOQUE (plan §3) ---------- */

/* F1 · Bloque 1 — Cabecera y navegación principal.
   Sólo ≥992px: en móvil/tablet el menú es el acordeón de Bootstrap y no se toca. */
@media (min-width: 992px) {
  #mu-menu,
  #mu-menu .navbar-collapse {
    min-height: 72px;
  }
  #top-menu > li > a {
    font-size: 14.5px;
    font-weight: 600;
    padding-left: 13px;
    padding-right: 13px;
  }
  #top-menu > li > .dropdown-toggle .bi {
    font-size: 12px;
    margin-left: 4px;
    vertical-align: 1px;
  }
  #mu-menu .mu-btn,
  #mu-menu .mu-btn-orange,
  #mu-menu .mu-campus-virtual {
    padding: 9px 16px;
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  #mu-menu .mu-btn i,
  #mu-menu .mu-btn-orange i,
  #mu-menu .mu-campus-virtual i {
    font-size: 16px;
    line-height: 1;
  }
}

/* F2 · Bloque 2 — Tarjeta flotante del slider */
.mu-slider-modern .mu-slider-actions {
  gap: 12px;
}
.mu-slider-modern .mu-slider-btn,
.mu-slider-modern .mu-slider-btn-outline {
  font-size: 14.5px;
  font-weight: 600;
}
@media (min-width: 992px) {
  .mu-slider-modern .mu-slider-card {
    padding: 32px;
    border-radius: 16px;
  }
}
@media (max-width: 767px) {
  .mu-slider-modern .mu-slider-card {
    padding: 20px;
    border-radius: 16px;
  }
}

/* F3 · Bloque 5 — Píldora "Tap to Play" de los videos locales */
.video-overlay-text {
  font-size: 13px;
  letter-spacing: .08em;
  font-weight: 700;
}

/* F4 · Bloque 7 — Equipo institucional y docente.
   El rol va en un <span> dentro de .mu-ourteacher-single-content. */
.mu-ourteacher-single-content span {
  font-size: 14px;
  font-weight: 600;
  /* teal oscuro institucional: con #03A688 este texto daba 3.08:1 */
  color: #03A688;
}

/* F5 · Bloque 8 — Formulario del boletín informativo del pie */
.mu-subscribe-form input,
.mu-subscribe-form .mu-subscribe-btn {
  height: 44px;
  font-size: 14px;
  box-sizing: border-box;
}
.mu-subscribe-form input {
  padding-left: 14px;
  padding-right: 14px;
}


/* F6 · Áreas táctiles del menú móvil (Bloque 1: 46px mínimos en acordeón).
   En móvil el menú se despliega, así que TODOS sus enlaces y botones
   necesitan el mismo alto cómodo para el dedo, no sólo los <li>. */
@media (max-width: 991px) {
  #mu-menu .mu-btn,
  #mu-menu .mu-btn-orange,
  #mu-menu .mu-campus-virtual,
  #top-menu .dropdown-menu > li > a {
    min-height: 46px;
    display: flex;
    align-items: center;
  }
}

/* F7 · Puntos del slider: el punto se ve EXACTAMENTE igual, pero el área de toque
   pasa a 44px. Sin esto medían 11x11px, muy por debajo de WCAG 2.5.5 en móvil.
   OJO: el punto lo dibuja el propio <button> con !important (L2670-2688), así que
   aquí sólo se agranda el <li> y se centra el botón dentro. NO añadir ::after:
   duplicaría el punto. */
@media (max-width: 991px) {
  #mu-slider .slick-dots li {
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
  }
  /* El boton es quien recibe el clic en slick, asi que el AREA debe ser el boton.
     Se hace 44x44 transparente y el punto se dibuja con ::after, replicando
     exactamente el estilo de L2670-2688 (borde vacio / activo verde relleno). */
  #mu-slider .slick-dots li button {
    width: 44px !important;
    height: 44px !important;
    background:transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: relative;
    margin: 0 !important;
  }
  /* El punto visible lo dibuja el ::after, NO el boton. Hay que apagarle el
     fondo al boton en TODOS sus estados: la regla vieja del activo
     (li.slick-active button, L2688) pinta un fondo verde con !important y, al
     agrandar el area a 44px, se veia un CUADRADO verde enorme en vez del punto. */
  #mu-slider .slick-dots li button::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .8);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    box-sizing: border-box;
    pointer-events: none;
  }
  #mu-slider .slick-dots li.slick-active button::after {
    background:#22c55e;
    border-color: #22c55e;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  }
  /* El punto ACTIVO tiene su propia regla con !important y mas especificidad
     (L2688): hay que anularla igualando el selector. Mismo tamano 11px que el
     carrusel de programas tecnicos. */
  #mu-slider .slick-dots li.slick-active button {
    width: 44px !important;
    background:transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  /* Un ::before heredado (15px verde) tambien pintaba sobre el punto. */
  #mu-slider .slick-dots li button::before {
    content: none !important;
    display: none !important;
  }
}

/* F8 · Botones de acción del slider en móvil: 44px de alto (WCAG 2.5.5).
   En escritorio el plan los deja con su padding actual. */
@media (max-width: 991px) {
  .mu-slider-modern .mu-slider-btn,
  .mu-slider-modern .mu-slider-btn-outline {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Botón hamburguesa del menú (medía 44x36) */
  #mu-menu .navbar-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ---------- G. BLOQUES 3 y 4 DEL PLAN ---------- */

/* G1 · Bloque 3 — Tarjetas del hub (Eventos / Calendario / Noticias)
   Igualar la altura: la fila pasa a flex. Se usa :has() para no depender de la
   clase del contenedor, que cambia entre páginas. Bootstrap 3 usaba float. */
.row:has(> [class*="col-"] > .mu-landing-hub-card) {
  display: flex;
  flex-wrap: wrap;
}
.row:has(> [class*="col-"] > .mu-landing-hub-card) > [class*="col-"] {
  display: flex;
}
.mu-landing-hub-card {
  width: 100%;
  height: 100%;
}

/* Círculo del icono: 44px con el icono de 22px centrado (plan Bloque 3) */
.mu-landing-hub-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mu-landing-hub-card-icon i {
  font-size: 22px;
  line-height: 1;
}

/* Listado de enlaces internos.
   OJO: el diseno YA trae un chevron naranja en .mu-landing-hub-list li::before
   (content '\203A') y separadores de borde punteado, y la <li> reserva 22px de
   padding-left para el chevron. NO hay que anadir otra vineta ni quitar ese
   padding: la primera version de esta regla hacia las dos cosas y dejaba
   doble marcador con el texto montado encima. Aqui solo se afina el ritmo. */
.mu-landing-hub-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.mu-landing-hub-list li {
  margin: 0;
  padding: 8px 0 8px 22px;
}
.mu-landing-hub-list li a {
  font-size: 14px;
  line-height: 1.5;
  display: block;
  transition: color .25s var(--m-ease), padding-left .25s var(--m-ease);
}
.mu-landing-hub-list li a:hover,
.mu-landing-hub-list li a:focus-visible {
  color: var(--m-teal);
  padding-left: 3px;
}

/* G2 · Bloque 4 — Módulos de beneficios
   Misma altura de tarjeta y mismo círculo de icono en las 6. */
.row:has(> [class*="col-"] > .mu-single-feature) {
  display: flex;
  flex-wrap: wrap;
}
.row:has(> [class*="col-"] > .mu-single-feature) > [class*="col-"] {
  display: flex;
}
.mu-single-feature {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.mu-single-feature .mu-feature-icon {
  width: 64px;
  height: 64px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mu-single-feature .mu-feature-icon i {
  font-size: 26px;
  line-height: 1;
  color: #fff;
}
.mu-single-feature h4 {
  font-size: var(--fs-h3-mod);
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 10px;
}
/* Enlace "Leer más": botón de texto con micro-flecha alineada */
.mu-single-feature a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  align-self: flex-start;
  transition: gap .25s var(--m-ease), color .25s var(--m-ease);
}
.mu-single-feature a::after {
  content: "\2192";
  font-size: var(--ic-chevron);
  line-height: 1;
  transition: transform .25s var(--m-ease);
}
.mu-single-feature a:hover::after,
.mu-single-feature a:focus-visible::after {
  transform: translateX(3px);
}


/* ---------- H. CONTRASTE ---------- */

/* H1 · #mu-service. El contenedor declara `color: #fff` sobre el relleno
   institucional, pero los <h3> heredaban el color global de titulo (#0f172a).
   Se les devuelve el blanco que el propio contenedor define. */
.mu-service-single h2,
.mu-service-single h3,
.mu-service-single h4 {
  color: inherit;
}