/* ==========================================================================
   UCAP — Componentes propios
   --------------------------------------------------------------------------
   Todo lo que el template Educino no trae o no resuelve como necesitamos.
   Consume ÚNICAMENTE los tokens de rol de ucap.css (capa 3): nunca HEX crudos.
   Escrito mobile-first (min-width), aunque el template sea desktop-first.
   Carga después de ucap.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

/* Sin este reset, todo min-height se SUMA al padding y al borde: el botón de
   48px medía 80px reales (48 + 2×14 de padding + 2×2 de borde) y el de 40px
   medía 64px. Es la causa raíz de los botones sobredimensionados. */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--uc-font-body);
  font-size: var(--uc-fs-base);
  line-height: var(--uc-lh-base);
  color: var(--uc-text);
  background: var(--uc-bg);
  /* Sin `-webkit-font-smoothing: antialiased`. Esa línea, que el template trae
     por costumbre, desactiva el subpixel rendering en macOS y adelgaza cada
     trazo: es la causa de fondo de que el texto se percibiera fino y costara
     leerlo. El renderizado por defecto del sistema devuelve el peso real de
     Inter. En pantallas oscuras (hero, banda, footer) sí conviene, porque ahí
     el subpixel engorda el texto claro sobre fondo oscuro. */
  text-rendering: optimizeLegibility;
}

.uc-hero, .uc-band, .uc-footer, .uc-cta-band, .uc-topbar {
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .uc-display {
  font-family: var(--uc-font-display);
  color: var(--uc-text);
  line-height: var(--uc-lh-tight);
  font-weight: var(--uc-fw-bold);
  letter-spacing: -.015em;   /* Playfair abre demasiado en tamaños grandes */
}

a { color: var(--uc-text-link); text-decoration: none; transition: color var(--uc-dur-fast) var(--uc-ease); }
a:hover { color: var(--uc-text-link-hover); }
img { max-width: 100%; height: auto; }

.uc-section { padding-block: var(--uc-section-y); }
.uc-section--subtle { background: var(--uc-bg-subtle); }
.uc-container { width: min(1290px, 100% - 2rem); margin-inline: auto; }

/* Cabecera de sección: un solo foco de atención por bloque */
.uc-section-head { margin-bottom: var(--uc-space-8); }
.uc-section-head--center { text-align: center; margin-inline: auto; max-width: 46rem; }
.uc-eyebrow {
  display: inline-flex; align-items: center; gap: var(--uc-space-2);
  font-family: var(--uc-font-body);
  font-size: var(--uc-fs-sm); font-weight: var(--uc-fw-bold);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--uc-cyan-600);
  margin-bottom: var(--uc-space-2);
}
.uc-eyebrow::before {
  content: ""; width: 28px; height: 2px;
  background: var(--uc-cyan-400); display: inline-block;
}
.uc-section-head--center .uc-eyebrow::after {
  content: ""; width: 28px; height: 2px;
  background: var(--uc-cyan-400); display: inline-block;
}
.uc-section-title { font-size: var(--uc-fs-3xl); margin: 0 0 var(--uc-space-3); }
/* 40rem ≈ 70 caracteres a 18px. Sin el tope, la línea llegaba a 88 caracteres
   y el ojo pierde el renglón al volver al margen izquierdo. */
.uc-section-sub {
  color: var(--uc-text-muted); font-size: var(--uc-fs-lg);
  line-height: var(--uc-lh-copy); margin: 0; max-width: 40rem;
}
.uc-section-head--center .uc-section-sub { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.uc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--uc-space-2);
  padding: .875rem 1.75rem;
  min-height: 48px;                     /* objetivo táctil mínimo */
  border: 2px solid transparent;
  border-radius: var(--uc-radius-pill);
  font-family: var(--uc-font-body);
  font-size: var(--uc-fs-base);
  font-weight: var(--uc-fw-bold);
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: background var(--uc-dur-fast) var(--uc-ease),
              color var(--uc-dur-fast) var(--uc-ease),
              border-color var(--uc-dur-fast) var(--uc-ease),
              transform var(--uc-dur-fast) var(--uc-ease),
              box-shadow var(--uc-dur-fast) var(--uc-ease);
}
/* Elevar sin proyectar sombra contradice la dirección de luz del sistema:
   el botón "flotaba" sin apoyarse en ningún lado. */
.uc-btn:hover { transform: translateY(-2px); box-shadow: var(--uc-shadow-md); }
.uc-btn:active { transform: translateY(0); box-shadow: none; }
.uc-btn[disabled], .uc-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none;
}

/* Iconos: 1em exacto para que el centro óptico coincida con el de la mayúscula */
.uc-btn i { font-size: 1em; line-height: 1; }
/* La flecha de los botones de navegación acompaña el gesto del cursor */
.uc-btn__arrow { transition: transform var(--uc-dur-fast) var(--uc-ease); }
.uc-btn:hover .uc-btn__arrow { transform: translateX(3px); }

.uc-btn--primary { background: var(--uc-cta); color: var(--uc-white); border-color: var(--uc-cta); }
.uc-btn--primary:hover { background: var(--uc-cta-hover); border-color: var(--uc-cta-hover); color: var(--uc-white); }

/* CTA de admisión en dorado: un botón azul sobre un header azul no se distingue.
   El fondo es gold-700 y no gold-600 porque el texto del botón es de 14-16px bold,
   que WCAG no considera "texto grande": con gold-600 quedaba en 4,15:1. */
.uc-btn--accent { background: var(--uc-cta-alt); color: var(--uc-white); border-color: var(--uc-cta-alt); }
.uc-btn--accent:hover { background: var(--uc-cta-alt-hover); border-color: var(--uc-cta-alt-hover); color: var(--uc-white); }

.uc-btn--ghost { background: transparent; color: var(--uc-white); border-color: rgba(255,255,255,.65); }
.uc-btn--ghost:hover { background: var(--uc-white); color: var(--uc-blue-500); border-color: var(--uc-white); }

.uc-btn--outline { background: transparent; color: var(--uc-cta); border-color: var(--uc-cta); }
.uc-btn--outline:hover { background: var(--uc-cta); color: var(--uc-white); }

.uc-btn--sm { padding: .625rem 1.125rem; min-height: 40px; font-size: var(--uc-fs-sm); }
.uc-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.uc-topbar {
  background: var(--uc-blue-700);
  color: rgba(255,255,255,.9);
  font-size: var(--uc-fs-sm);
  padding-block: var(--uc-space-2);
}
.uc-topbar a { color: rgba(255,255,255,.9); }
.uc-topbar a:hover { color: var(--uc-white); }
.uc-topbar-list {
  display: flex; flex-wrap: wrap; gap: var(--uc-space-4);
  list-style: none; margin: 0; padding: 0;
}
.uc-topbar-list i { color: var(--uc-cyan-300); margin-right: var(--uc-space-2); }
.uc-topbar-social { display: flex; gap: var(--uc-space-3); }
.uc-topbar-social a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.uc-topbar-social a:hover { background: rgba(255,255,255,.15); }

.uc-header-bar {
  background: var(--uc-white);
  box-shadow: var(--uc-shadow-sm);
  transition: box-shadow var(--uc-dur-base) var(--uc-ease);
}
.uc-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--uc-space-4);
  min-height: var(--uc-header-h);
  transition: min-height var(--uc-dur-base) var(--uc-ease);
}
.uc-logo img {
  height: 46px; width: auto; display: block;
  transition: height var(--uc-dur-base) var(--uc-ease);
}
@media (min-width: 992px) { .uc-logo img { height: 54px; } }

/* Estado fijo. Antes el JS añadía .is-stuck y el CSS no tenía UNA sola regla
   para esa clase: el header se pegaba sin sombra, sin comprimirse y sin
   transición, así que el usuario percibía un salto, no un header fijo.
   Comprimido devuelve 61px de contenido visible (117,59px → 56px). */
.uc-header-bar.is-stuck {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--uc-z-header);
  box-shadow: var(--uc-shadow-md);
}
.uc-header-bar.is-stuck .uc-header-inner { min-height: var(--uc-header-h-stuck); }
.uc-header-bar.is-stuck .uc-logo img { height: 38px; }
@media (min-width: 992px) {
  .uc-header-bar.is-stuck .uc-logo img { height: 40px; }
  .uc-header-bar.is-stuck { --uc-nav-pad: var(--uc-space-4); }
}

.uc-nav { display: none; }
@media (min-width: 992px) {
  .uc-nav { display: block; }
  .uc-nav > ul { display: flex; gap: var(--uc-space-8); list-style: none; margin: 0; padding: 0; }
  .uc-nav > ul > li { position: relative; }
  /* line-height 24px + 2×24px de padding = 72px exactos: la altura declarada en
     --uc-header-h deja de ser una aproximación (antes el header medía 73,59px). */
  .uc-nav > ul > li > a {
    display: block; padding-block: var(--uc-nav-pad); line-height: 24px;
    font-weight: var(--uc-fw-medium); color: var(--uc-text);
    transition: padding var(--uc-dur-base) var(--uc-ease);
  }
  .uc-nav > ul > li > a:hover,
  .uc-nav > ul > li.is-active > a { color: var(--uc-text-link); }
  /* cyan-400 daba 2,97:1 sobre blanco, por debajo del 3:1 que WCAG 1.4.11 exige
     a un indicador no textual. cyan-600 da 4,90:1. */
  .uc-nav > ul > li.is-active > a::after {
    content: ""; position: absolute; left: 0; right: 0;
    bottom: calc(var(--uc-nav-pad) - 4px);
    height: 3px; background: var(--uc-cyan-600); border-radius: 2px;
    transition: bottom var(--uc-dur-base) var(--uc-ease);
  }
  /* Chevron de los ítems que abren submenú: sin él, nada distingue "Carreras"
     de "Noticias" hasta que el puntero pasa por encima. */
  .uc-nav__caret {
    display: inline-block; margin-left: var(--uc-space-1);
    font-size: .625em; color: var(--uc-gray-400);
    transition: transform var(--uc-dur-fast) var(--uc-ease),
                color var(--uc-dur-fast) var(--uc-ease);
  }
  .uc-nav > ul > li:hover > a .uc-nav__caret,
  .uc-nav > ul > li:focus-within > a .uc-nav__caret {
    transform: rotate(180deg); color: var(--uc-cyan-600);
  }

  /* Submenú: resuelve el problema de las carreras a 4 niveles de profundidad */
  .uc-nav ul ul {
    position: absolute; top: 100%; left: 0; z-index: var(--uc-z-header);
    min-width: 268px; padding: var(--uc-space-3) var(--uc-space-4); margin: 0;
    list-style: none; background: var(--uc-white);
    border-radius: var(--uc-radius-md); box-shadow: var(--uc-shadow-lg);
    border-top: 3px solid var(--uc-cyan-400);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    /* Segunda barrera contra el hit-testing del panel cerrado: si mañana algún
       descendiente vuelve a forzar visibility, esto lo sigue dejando inerte. */
    pointer-events: none;
    transition: opacity var(--uc-dur-fast) var(--uc-ease),
                transform var(--uc-dur-fast) var(--uc-ease),
                visibility var(--uc-dur-fast);
  }
  /* Línea guía vertical que enhebra las viñetas, como en el submenú del
     template base: convierte una lista suelta en una columna con eje. */
  .uc-nav ul ul::before {
    content: ""; position: absolute;
    left: calc(var(--uc-space-4) + 9.5px);
    top: var(--uc-space-6); bottom: var(--uc-space-6);
    width: 1px; background: var(--uc-border);
  }
  .uc-nav li:hover > ul,
  .uc-nav li:focus-within > ul {
    opacity: 1; visibility: visible; transform: translateY(0);
    pointer-events: auto;
  }
  .uc-nav ul ul a {
    position: relative; display: block;
    padding: var(--uc-space-2) var(--uc-space-3) var(--uc-space-2) var(--uc-space-8);
    border-radius: var(--uc-radius-sm);
    color: var(--uc-text); font-size: 0.9375rem;   /* 15px: es navegación primaria, no metadata */
    font-weight: var(--uc-fw-small);
    transition: padding-left var(--uc-dur-fast) var(--uc-ease),
                background var(--uc-dur-fast) var(--uc-ease),
                color var(--uc-dur-fast) var(--uc-ease);
  }
  /* Viñeta hueca sobre la línea guía; el fondo blanco la "corta" */
  .uc-nav ul ul a::before {
    content: ""; position: absolute; left: 5px; top: 50%;
    width: 10px; height: 10px; margin-top: -5px;
    border-radius: 50%; background: var(--uc-white);
    box-shadow: inset 0 0 0 2px var(--uc-border-strong);
    transition: box-shadow var(--uc-dur-fast) var(--uc-ease);
  }
  .uc-nav ul ul a:hover {
    background: var(--uc-blue-50); color: var(--uc-text-link);
    padding-left: calc(var(--uc-space-8) + var(--uc-space-2));   /* el texto avanza 8px */
  }
  .uc-nav ul ul a:hover::before { box-shadow: inset 0 0 0 5px var(--uc-cyan-500); }
  .uc-nav .uc-megamenu {
    left: 50%; transform: translate(-50%, 10px);
    width: min(920px, 92vw);
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--uc-space-6); padding: var(--uc-space-6);
  }
  .uc-nav li:hover > .uc-megamenu,
  .uc-nav li:focus-within > .uc-megamenu { transform: translate(-50%, 0); }

  /* CRÍTICO. `.uc-nav ul ul` (0-1-2) también alcanzaba las listas internas de
     cada columna del megamenú, y `.uc-megamenu ul` (0-1-1) perdía la cascada:
     las 16 carreras quedaban absolutas, opacity 0 y visibility hidden. El
     megamenú abierto mostraba solo los 4 títulos de facultad. Aquí se devuelven
     al flujo normal de la columna. */
  .uc-nav .uc-megamenu > li > ul {
    position: static; opacity: 1; transform: none;
    min-width: 0; padding: 0; background: none;
    box-shadow: none; border-top: 0; border-radius: 0;
    transition: none;
    /* `inherit`, NUNCA `visible`: un descendiente visible dentro de un padre
       oculto vuelve a ser visible y clickeable. Con `visible` fijo, los 19
       enlaces seguían capturando el puntero sobre un rectángulo de 920×382px
       encima del hero: al pasar el mouse por el titular, el <li> de Carreras
       entraba en :hover y el megamenú se abría solo. */
    visibility: inherit;
  }
  /* El eje vertical funciona en una columna única; en cuatro columnas ensucia */
  .uc-nav .uc-megamenu::before { content: none; }

  /* padding lateral compensado con margin negativo: el fondo del hover existe
     como superficie, pero el texto sigue alineado con el título de la columna */
  .uc-nav .uc-megamenu > li > ul a {
    padding: var(--uc-space-1) var(--uc-space-2);
    margin-inline: calc(var(--uc-space-2) * -1);
    border-radius: var(--uc-radius-sm);
  }
  /* Aquí la viñeta es un filete que crece desde cero: en una grilla de cuatro
     columnas un punto en cada ítem satura, un trazo solo marca el que se apunta. */
  .uc-nav .uc-megamenu > li > ul a::before {
    left: var(--uc-space-2); margin-top: -1px;
    width: 0; height: 2px; border-radius: 0;
    background: var(--uc-cyan-500); box-shadow: none;
    transition: width var(--uc-dur-fast) var(--uc-ease);
  }
  .uc-nav .uc-megamenu > li > ul a:hover {
    padding-left: calc(var(--uc-space-6) + var(--uc-space-1));
  }
  .uc-nav .uc-megamenu > li > ul a:hover::before { width: 12px; box-shadow: none; }

  /* Pie a todo el ancho: cierra el megamenú con la salida completa a la oferta */
  .uc-nav .uc-megamenu__foot {
    grid-column: 1 / -1;
    margin-top: var(--uc-space-2); padding-top: var(--uc-space-4);
    border-top: 1px solid var(--uc-border);
  }
  .uc-nav .uc-megamenu__foot a {
    display: inline-flex; align-items: center; gap: var(--uc-space-2);
    padding: 0; margin: 0; background: none;
    font-size: var(--uc-fs-sm); font-weight: var(--uc-fw-bold);
    color: var(--uc-text-link);
  }
  .uc-nav .uc-megamenu__foot a::before { content: none; }
  .uc-nav .uc-megamenu__foot a i { transition: transform var(--uc-dur-fast) var(--uc-ease); }
  .uc-nav .uc-megamenu__foot a:hover { color: var(--uc-cyan-700); }
  .uc-nav .uc-megamenu__foot a:hover i { transform: translateX(4px); }

  .uc-megamenu h3 {
    font-family: var(--uc-font-body);
    font-size: var(--uc-fs-xs); font-weight: var(--uc-fw-bold);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--uc-cyan-700);
    padding-bottom: var(--uc-space-3); margin-bottom: var(--uc-space-3);
    /* Reserva dos líneas: "Contables y Administrativas" ocupa dos y las otras
       tres una, con lo que sus enlaces arrancaban 14px más arriba. El texto se
       alinea ABAJO, contra el filete: así el aire sobrante queda arriba —donde
       nadie lo lee— en vez de abrir un hueco entre el rótulo y su línea. */
    min-height: 3.4em;
    display: flex; align-items: flex-end; gap: var(--uc-space-2);
    position: relative;
  }
  .uc-megamenu h3 i { color: var(--uc-cyan-500); font-size: 1.1em; margin-top: -1px; }
  /* Filete partido: segmento corto en celeste + línea larga en gris. Es el
     gesto del título de columna del mega menú del template base, recogido
     con los colores del sistema. */
  .uc-megamenu h3::before {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 16px; height: 2px; background: var(--uc-cyan-500);
  }
  .uc-megamenu h3::after {
    content: ""; position: absolute; left: 22px; right: 0; bottom: 0;
    height: 1px; background: var(--uc-border);
  }
  .uc-megamenu ul { list-style: none; margin: 0; padding: 0; }
}

.uc-header-actions { display: flex; align-items: center; gap: var(--uc-space-3); }
.uc-header-actions .uc-btn { display: none; }
@media (min-width: 768px) { .uc-header-actions .uc-btn { display: inline-flex; } }

.uc-burger {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: var(--uc-blue-50); color: var(--uc-blue-500);
  border: 0; border-radius: var(--uc-radius-sm);
  font-size: 1.25rem; cursor: pointer;
}
@media (min-width: 992px) { .uc-burger { display: none; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.uc-hero { position: relative; isolation: isolate; color: var(--uc-white); }
.uc-hero__media { position: absolute; inset: 0; z-index: -2; }
.uc-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.uc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--uc-grad-hero);
}
.uc-hero__inner { padding-block: clamp(3.5rem, 2rem + 12vw, 8rem); max-width: 44rem; }
.uc-hero h1 {
  font-size: var(--uc-fs-4xl); color: var(--uc-white);
  margin: 0 0 var(--uc-space-4);
}
.uc-hero h1 em { font-style: normal; color: var(--uc-gold-300); }
/* max-width 40rem ≈ 70 caracteres. Sin el tope la primera línea llegaba a 80. */
.uc-hero p {
  font-size: var(--uc-fs-lg); color: rgba(255,255,255,.92);
  margin: 0 0 var(--uc-space-8); max-width: 40rem;
}
.uc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--uc-space-3); }
.uc-hero__badge {
  display: inline-flex; align-items: center; gap: var(--uc-space-2);
  padding: var(--uc-space-2) var(--uc-space-4);
  margin-bottom: var(--uc-space-4);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--uc-radius-pill);
  font-size: var(--uc-fs-sm); font-weight: var(--uc-fw-medium);
  backdrop-filter: blur(6px);
}
.uc-hero__badge i { color: var(--uc-gold-300); }

/* Buscador de carreras, montado sobre el borde inferior del hero.
   Se sube con margin-top negativo (afecta el flujo) en vez de transform
   (que no lo afecta): con transform + margin-bottom negativo, la sección
   siguiente se le montaba encima y tapaba su propio título. */
.uc-finder {
  position: relative; z-index: 2;
  background: var(--uc-white);
  border-radius: var(--uc-radius-lg);
  box-shadow: var(--uc-shadow-lg);
  padding: var(--uc-space-6);
  margin-top: calc(var(--uc-space-12) * -1);
  margin-bottom: var(--uc-section-y);
}
.uc-finder h2 { font-size: var(--uc-fs-xl); margin: 0 0 var(--uc-space-4); }
.uc-finder__row { display: grid; gap: var(--uc-space-3); }
@media (min-width: 768px) { .uc-finder__row { grid-template-columns: 2fr 1.5fr auto; align-items: end; } }
.uc-field label {
  display: block; font-size: var(--uc-fs-sm); font-weight: var(--uc-fw-semi);
  color: var(--uc-gray-700); margin-bottom: var(--uc-space-1);
}
.uc-field input, .uc-field select {
  width: 100%; min-height: 48px;
  padding: 0 var(--uc-space-4);
  font-family: var(--uc-font-body); font-size: var(--uc-fs-base);
  color: var(--uc-text); background: var(--uc-white);
  border: 1px solid var(--uc-border-strong);
  border-radius: var(--uc-radius-sm);
}
.uc-field input:focus, .uc-field select:focus { border-color: var(--uc-cyan-600); outline: none; box-shadow: 0 0 0 3px var(--uc-cyan-50); }

/* Estados del campo. Un componente de formulario sin estado de error está
   incompleto, aunque esta maqueta todavía no valide nada. */
.uc-field--error input, .uc-field--error select { border-color: var(--uc-danger); }
.uc-field--error input:focus, .uc-field--error select:focus { box-shadow: 0 0 0 3px rgba(179,38,30,.14); }
.uc-field--success input, .uc-field--success select { border-color: var(--uc-success); }
.uc-field__msg {
  display: flex; align-items: center; gap: var(--uc-space-2);
  margin-top: var(--uc-space-1); font-size: var(--uc-fs-sm);
}
/* Nunca solo color: el mensaje siempre lleva icono (identidad-visual §6) */
.uc-field--error .uc-field__msg { color: var(--uc-danger); }
.uc-field--success .uc-field__msg { color: var(--uc-success); }
.uc-field input:disabled, .uc-field select:disabled {
  background: var(--uc-bg-subtle); color: var(--uc-text-muted); cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Accesos rápidos
   -------------------------------------------------------------------------- */
.uc-quick { display: grid; gap: var(--uc-space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .uc-quick { grid-template-columns: repeat(4, 1fr); } }
.uc-quick__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--uc-space-3);
  padding: var(--uc-space-6) var(--uc-space-4);
  text-align: center;
  background: var(--uc-white);
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius-md);
  color: var(--uc-text);
  box-shadow: var(--uc-shadow-sm);
  transition: border-color var(--uc-dur-fast) var(--uc-ease),
              box-shadow var(--uc-dur-fast) var(--uc-ease),
              transform var(--uc-dur-fast) var(--uc-ease);
}
.uc-quick__item:hover {
  border-color: var(--uc-cyan-400); box-shadow: var(--uc-shadow-md);
  transform: translateY(-3px); color: var(--uc-text);
}
.uc-quick__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; background: var(--uc-blue-50);
  color: var(--uc-blue-500); font-size: 1.25rem;
}
.uc-quick__item strong { font-size: var(--uc-fs-lg); font-weight: var(--uc-fw-bold); line-height: var(--uc-lh-snug); }
.uc-quick__item span { font-size: var(--uc-fs-sm); font-weight: var(--uc-fw-small); color: var(--uc-text-muted); }

/* --------------------------------------------------------------------------
   Cards de carrera
   -------------------------------------------------------------------------- */
/* 1fr y no auto: sin esto cada FILA toma la altura de su contenido y la
   segunda fila quedaba 22px más baja que la primera. Con 1fr todas las filas
   miden lo mismo y la grilla se lee como una retícula, no como un mosaico. */
.uc-grid { display: grid; gap: var(--uc-space-6); grid-auto-rows: 1fr; }
.uc-grid--2 { grid-template-columns: 1fr; }
.uc-grid--3 { grid-template-columns: 1fr; }
.uc-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px) { .uc-grid--2, .uc-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) {
  .uc-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .uc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.uc-card {
  display: flex; flex-direction: column;
  background: var(--uc-white);
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius-md);
  overflow: hidden;
  height: 100%;
  /* Escala de elevación coherente: sm en reposo, md en hover. lg queda
     reservado a lo que realmente flota (dropdown, buscador, offcanvas). */
  box-shadow: var(--uc-shadow-sm);
  transition: box-shadow var(--uc-dur-base) var(--uc-ease),
              transform var(--uc-dur-base) var(--uc-ease),
              border-color var(--uc-dur-base) var(--uc-ease);
}
.uc-card:hover { box-shadow: var(--uc-shadow-md); transform: translateY(-4px); border-color: var(--uc-cyan-200); }
.uc-card__media { position: relative; aspect-ratio: 41 / 33; overflow: hidden; background: var(--uc-gray-100); }
/* Las fotos de noticia son 630×350 (inventario-imagenes.md), no 410×330 como
   las de carrera: con el ratio de carrera el recorte inflaba la card 85px en
   mobile y estiraba de más el carrusel. */
.uc-card--news .uc-card__media { aspect-ratio: 63 / 35; }
.uc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--uc-dur-base) var(--uc-ease); }
.uc-card:hover .uc-card__media img { transform: scale(1.05); }
/* Chip de facultad tintado, no blanco: sobre el placeholder claro un chip
   blanco se separaba del fondo 1,05:1 y desaparecía. Sólido funciona igual
   sobre el placeholder y sobre la foto definitiva. */
.uc-card__tag {
  position: absolute; top: var(--uc-space-3); left: var(--uc-space-3);
  padding: var(--uc-space-1) var(--uc-space-3);
  background: var(--uc-bg-brand); color: var(--uc-white);   /* 9,31:1 */
  border-radius: var(--uc-radius-pill);
  font-size: var(--uc-fs-xs); font-weight: var(--uc-fw-bold);
  letter-spacing: .04em;
  box-shadow: var(--uc-shadow-sm);
}

/* Jerarquía interna en cuatro escalones netos:
   TÍTULO 20-22px display · BAJADA 16px/1,55 gris 600 · DATOS 14px medium · CTA.
   Cada salto cambia tamaño, peso Y color a la vez. Variando uno solo la lectura
   queda plana, que era exactamente el problema: todo pesaba lo mismo. */
/* Todo escala con el viewport. En la grilla de 2 columnas de un celular de
   390px la card mide 159px de ancho: con los tamaños fijos de escritorio
   alcanzaba 582px de alto —un ratio de 1:3,7— y la bajada sola se comía 149px
   en siete renglones de once caracteres. */
.uc-card__body {
  padding: clamp(1rem, .6rem + 1.6vw, 1.5rem);
  display: flex; flex-direction: column; gap: var(--uc-space-2); flex: 1;
}
.uc-card__title {
  font-size: clamp(1.0625rem, .9rem + .7vw, 1.375rem);   /* 17px → 22px */
  line-height: var(--uc-lh-snug);
  letter-spacing: -.01em; margin: 0;
}
.uc-card__title a { color: var(--uc-text); }
.uc-card__title a:hover { color: var(--uc-text-link); }
.uc-card__excerpt {
  font-size: clamp(.90625rem, .86rem + .22vw, 1rem);     /* 14,6px → 16px */
  line-height: var(--uc-lh-copy);
  color: var(--uc-text-muted); margin: 0;
  /* Tope de tres renglones: las cards de una grilla tienen que quedar parejas
     y el detalle completo vive en la ficha de la carrera, no en la vitrina.
     El título NO se trunca nunca: es el nombre de la carrera. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden;
}
.uc-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--uc-space-2) var(--uc-space-4);
  font-size: clamp(.8125rem, .78rem + .15vw, .875rem);   /* 13px → 14px */
  font-weight: var(--uc-fw-small);
  color: var(--uc-text-muted);
  margin-top: auto; padding-top: var(--uc-space-3);
  border-top: 1px solid var(--uc-border);
}
.uc-card__meta i { color: var(--uc-cyan-700); margin-right: var(--uc-space-1); }

/* CTA de la card. No es un <a>: el enlace real es el título, estirado sobre
   toda la superficie con ::after. Así toda la card es clickeable y un lector de
   pantalla encuentra UN destino, no dos idénticos seguidos. */
.uc-card { position: relative; }
.uc-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.uc-card__cta {
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--uc-space-2);
  /* Regla propia y no solo aire: el CTA es una acción, no la última línea de
     los datos. Sin la línea, "Ver la carrera" se leía pegado a la metadata. */
  margin-top: var(--uc-space-3); padding-top: var(--uc-space-3);
  border-top: 1px solid var(--uc-border);
  font-size: var(--uc-fs-sm); font-weight: var(--uc-fw-bold);
  color: var(--uc-text-link);
}
.uc-card__cta i { transition: transform var(--uc-dur-fast) var(--uc-ease); }
.uc-card:hover .uc-card__cta { color: var(--uc-cyan-700); }
.uc-card:hover .uc-card__cta i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Filtros (chips)
   -------------------------------------------------------------------------- */
.uc-filters {
  display: flex; flex-wrap: wrap; gap: var(--uc-space-2);
  margin-bottom: var(--uc-space-8);
}
.uc-chip {
  padding: var(--uc-space-2) var(--uc-space-4);
  min-height: 40px; display: inline-flex; align-items: center;
  background: var(--uc-white); color: var(--uc-text);
  border: 1px solid var(--uc-border-strong);
  border-radius: var(--uc-radius-pill);
  font-family: var(--uc-font-body); font-size: var(--uc-fs-sm);
  font-weight: var(--uc-fw-medium); cursor: pointer;
  transition: all var(--uc-dur-fast) var(--uc-ease);
}
.uc-chip:hover { border-color: var(--uc-cyan-600); color: var(--uc-text-link); }
.uc-chip[aria-pressed="true"] {
  background: var(--uc-cta); color: var(--uc-white); border-color: var(--uc-cta);
}

/* --------------------------------------------------------------------------
   Carrusel
   --------------------------------------------------------------------------
   Motor: scroll-snap nativo. El deslizamiento táctil, la inercia y el rebote
   los pone el sistema operativo, no una librería: en un celular de gama media
   eso es la diferencia entre 60fps y un carrusel que arrastra. El JS solo
   calcula páginas, mueve el scroll y pinta los puntos.
   -------------------------------------------------------------------------- */
/* El escenario es el que ancla las flechas: no puede tener overflow, porque
   el viewport que scrollea recortaría cualquier hijo posicionado fuera. */
.uc-carousel__stage { position: relative; }

.uc-carousel__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  /* Aire para que la sombra y el -4px del hover de la card no queden cortados */
  padding-block: var(--uc-space-3);
  margin-block: calc(var(--uc-space-3) * -1);
}
.uc-carousel__viewport::-webkit-scrollbar { display: none; }
.uc-carousel__track { display: flex; align-items: stretch; gap: var(--uc-space-6); }
/* height:auto es imprescindible: el height:100% de la card le fijaba altura
   propia y anulaba el estirado del flex, así que la tarjeta con el texto más
   corto quedaba 27px más baja que sus vecinas. */
.uc-carousel__track > * { flex: 0 0 100%; scroll-snap-align: start; align-self: stretch; height: auto; }
@media (min-width: 576px) {
  .uc-carousel__track > * { flex-basis: calc((100% - var(--uc-space-6)) / 2); }
}
@media (min-width: 992px) {
  .uc-carousel__track > * { flex-basis: calc((100% - var(--uc-space-6) * 2) / 3); }
}

/* Flechas en su lugar convencional: sobre los flancos del carrusel y centradas
   en vertical. Donde el contenedor deja margen (≥1400px) salen hacia afuera y
   no tapan nada; por debajo se apoyan sobre el borde de la tarjeta. */
.uc-carousel__nav {
  /* 25% y no 50%: hasta 1399px la flecha se apoya sobre la tarjeta, y a media
     altura tapaba el badge y la primera línea del título. Al 25% cae siempre
     dentro de la franja de la imagen —que ocupa entre el 42% y el 53% de la
     card— donde no hay texto que estorbar. */
  position: absolute; top: 25%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--uc-white); color: var(--uc-cta);
  border: 2px solid var(--uc-cta); border-radius: 50%;
  font-size: var(--uc-fs-base); cursor: pointer;
  box-shadow: var(--uc-shadow-md);
  transition: background var(--uc-dur-fast) var(--uc-ease),
              color var(--uc-dur-fast) var(--uc-ease),
              box-shadow var(--uc-dur-fast) var(--uc-ease);
}
.uc-carousel__nav--prev { left: -6px; }
.uc-carousel__nav--next { right: -6px; }
/* Desde 1400px el contenedor deja margen suficiente: la flecha sale del todo
   hacia afuera, no toca la tarjeta y puede volver al centro vertical. */
@media (min-width: 1400px) {
  .uc-carousel__nav { top: 50%; width: 48px; height: 48px; }
  .uc-carousel__nav--prev { left: -24px; }
  .uc-carousel__nav--next { right: -24px; }
}
.uc-carousel__nav:hover { background: var(--uc-cta); color: var(--uc-white); box-shadow: var(--uc-shadow-lg); }
.uc-carousel__nav:disabled { opacity: .35; cursor: default; background: var(--uc-white); color: var(--uc-cta); }

.uc-carousel__dots {
  display: flex; align-items: center; justify-content: center;
  gap: var(--uc-space-2);
  margin-top: var(--uc-space-6);
}
/* El punto mide 10px pero el botón 24px: el área de toque no puede ser el
   tamaño del gráfico. */
.uc-carousel__dot {
  width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.uc-carousel__dot::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--uc-border-strong);
  transition: background var(--uc-dur-fast) var(--uc-ease),
              width var(--uc-dur-fast) var(--uc-ease);
}
.uc-carousel__dot:hover::before { background: var(--uc-cyan-500); }
/* El punto activo se alarga: se distingue por forma además de por color */
.uc-carousel__dot[aria-current="true"]::before { background: var(--uc-cta); width: 24px; border-radius: var(--uc-radius-pill); }

/* Una sola página: ni flechas ni puntos. Controles inertes son ruido. */
.uc-carousel--static .uc-carousel__nav,
.uc-carousel--static .uc-carousel__dots { display: none; }

/* --------------------------------------------------------------------------
   Noticias
   -------------------------------------------------------------------------- */
.uc-news__date {
  display: inline-flex; align-items: center; gap: var(--uc-space-2);
  font-size: var(--uc-fs-sm); font-weight: var(--uc-fw-small); color: var(--uc-text-muted);
}
.uc-badge {
  display: inline-block;
  /* Dentro del cuerpo de la card (flex column) el estiramiento por defecto le
     daba el ancho completo de la columna: la píldora se volvía una barra. */
  align-self: flex-start;
  padding: var(--uc-space-1) var(--uc-space-3);
  border-radius: var(--uc-radius-pill);
  font-size: var(--uc-fs-xs); font-weight: var(--uc-fw-bold);
  letter-spacing: .04em;
}
.uc-badge--institucional { background: var(--uc-blue-50);  color: var(--uc-blue-600); }
.uc-badge--academico     { background: var(--uc-cyan-50);  color: var(--uc-cyan-700); }
.uc-badge--vacancia      { background: var(--uc-success-bg); color: var(--uc-success); }
.uc-badge--licitacion    { background: var(--uc-gold-100); color: var(--uc-gold-700); }

/* --------------------------------------------------------------------------
   Vacancias
   -------------------------------------------------------------------------- */
.uc-vacancy {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--uc-space-4);
  padding: var(--uc-space-6);
  background: var(--uc-white);
  border: 1px solid var(--uc-border);
  border-left: 4px solid var(--uc-cyan-400);
  border-radius: var(--uc-radius-md);
  box-shadow: var(--uc-shadow-sm);
  transition: box-shadow var(--uc-dur-fast) var(--uc-ease), border-left-color var(--uc-dur-fast) var(--uc-ease);
}
.uc-vacancy:hover { box-shadow: var(--uc-shadow-md); border-left-color: var(--uc-gold-500); }
.uc-vacancy__main { flex: 1 1 16rem; }
/* Inter, no Playfair. Una vacancia es una fila de datos administrativos: el
   serif editorial la volvía ajena al resto de la fila (badge, meta, botón, todo
   en sans) y desentonaba con el sistema. Playfair queda para titulares de
   sección y para las cards, que sí son piezas editoriales con imagen. */
.uc-vacancy__title {
  font-family: var(--uc-font-body);
  font-size: 1.0625rem; font-weight: var(--uc-fw-semi);
  line-height: var(--uc-lh-snug); letter-spacing: -.005em;
  margin: var(--uc-space-2) 0;
}
.uc-vacancy__meta { display: flex; flex-wrap: wrap; gap: var(--uc-space-2) var(--uc-space-4); font-size: var(--uc-fs-sm); font-weight: var(--uc-fw-small); color: var(--uc-text-muted); }
.uc-vacancy__meta i { color: var(--uc-cyan-700); margin-right: var(--uc-space-1); }

/* --------------------------------------------------------------------------
   Cifras institucionales — el template no trae contador, se construye acá
   -------------------------------------------------------------------------- */
.uc-stats {
  display: grid; gap: var(--uc-space-6);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 992px) { .uc-stats { grid-template-columns: repeat(4, 1fr); } }
.uc-stat__num {
  font-family: var(--uc-font-display);
  /* Escalón propio, entre 3xl y 4xl: la cifra es el dato protagonista de la
     banda y competía de igual a igual con el título de la sección. */
  font-size: clamp(2.375rem, 1.7rem + 3vw, 3.375rem);
  font-weight: var(--uc-fw-bold);
  color: var(--uc-gold-300); line-height: 1;
  display: block; margin-bottom: var(--uc-space-2);
  /* Sin cifras de ancho fijo, los segundos del countdown cambian de ancho en
     cada tick y toda la columna vibra. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.uc-stat__label { font-size: var(--uc-fs-base); font-weight: var(--uc-fw-small); color: rgba(255,255,255,.88); margin: 0; letter-spacing: .01em; line-height: var(--uc-lh-snug); }
.uc-band { background: var(--uc-bg-brand-deep); color: var(--uc-white); }
.uc-band h2, .uc-band .uc-section-title { color: var(--uc-white); }
.uc-band .uc-section-sub { color: rgba(255,255,255,.8); }
.uc-band .uc-eyebrow { color: var(--uc-cyan-300); }

/* --------------------------------------------------------------------------
   Redes sociales
   -------------------------------------------------------------------------- */
.uc-social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--uc-space-3); }
@media (min-width: 576px) { .uc-social-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .uc-social-grid { grid-template-columns: repeat(6, 1fr); } }
.uc-social-item {
  position: relative; display: block; aspect-ratio: 1;
  border-radius: var(--uc-radius-sm); overflow: hidden;
  /* Con el placeholder claro, seis cuadros sin borde sobre fondo blanco se
     leían como un hueco. El borde los devuelve como piezas de una grilla. */
  border: 1px solid var(--uc-border);
}
.uc-social-item img { width: 100%; height: 100%; object-fit: cover; }
.uc-social-item::after {
  content: "\f16d"; font-family: "Font Awesome 5 Brands"; font-weight: 400;
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,68,148,.72); color: var(--uc-white); font-size: 1.5rem;
  opacity: 0; transition: opacity var(--uc-dur-fast) var(--uc-ease);
}
.uc-social-item:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.uc-cta-band {
  background: var(--uc-grad-brand);
  color: var(--uc-white);
  border-radius: var(--uc-radius-lg);
  padding: clamp(2rem, 1rem + 5vw, 4rem);
  text-align: center;
}
.uc-cta-band h2 { color: var(--uc-white); font-size: var(--uc-fs-3xl); margin: 0 0 var(--uc-space-3); }
.uc-cta-band p { color: rgba(255,255,255,.9); font-size: var(--uc-fs-lg); margin: 0 auto var(--uc-space-8); max-width: 40rem; }
.uc-cta-band .uc-hero__actions { justify-content: center; }

/* --------------------------------------------------------------------------
   Cabecera de páginas internas
   -------------------------------------------------------------------------- */
.uc-pagehead { position: relative; isolation: isolate; color: var(--uc-white); text-align: center; }
.uc-pagehead__media { position: absolute; inset: 0; z-index: -2; }
.uc-pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.uc-pagehead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--uc-grad-hero); }
.uc-pagehead__inner { padding-block: clamp(2.5rem, 1.5rem + 7vw, 5rem); }
.uc-pagehead h1 { color: var(--uc-white); font-size: var(--uc-fs-4xl); margin: 0 0 var(--uc-space-3); }
.uc-breadcrumb {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--uc-space-2);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--uc-fs-sm); color: rgba(255,255,255,.85);
}
.uc-breadcrumb a { color: rgba(255,255,255,.85); }
.uc-breadcrumb a:hover { color: var(--uc-white); }
.uc-breadcrumb li + li::before { content: "/"; margin-right: var(--uc-space-2); opacity: .6; }

/* --------------------------------------------------------------------------
   Pasos numerados (proceso de admisión)
   -------------------------------------------------------------------------- */
.uc-steps { display: grid; gap: var(--uc-space-6); counter-reset: paso; }
@media (min-width: 768px) { .uc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .uc-steps { grid-template-columns: repeat(4, 1fr); } }
.uc-step {
  position: relative;
  padding: var(--uc-space-8) var(--uc-space-6) var(--uc-space-6);
  background: var(--uc-white);
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius-md);
}
.uc-step::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; top: calc(var(--uc-space-6) * -1); left: var(--uc-space-6);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--uc-cta); color: var(--uc-white);
  border: 4px solid var(--uc-white);
  border-radius: 50%;
  font-family: var(--uc-font-display); font-size: var(--uc-fs-xl); font-weight: var(--uc-fw-bold);
}
.uc-step h3 { font-size: var(--uc-fs-lg); margin: var(--uc-space-3) 0 var(--uc-space-2); }
.uc-step p { font-size: var(--uc-fs-sm); color: var(--uc-text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Tabla de datos
   -------------------------------------------------------------------------- */
.uc-table-wrap { overflow-x: auto; border: 1px solid var(--uc-border); border-radius: var(--uc-radius-md); }
.uc-table { width: 100%; border-collapse: collapse; min-width: 30rem; }
.uc-table th, .uc-table td { padding: var(--uc-space-4); text-align: left; border-bottom: 1px solid var(--uc-border); }
.uc-table th { background: var(--uc-bg-subtle); font-size: var(--uc-fs-sm); font-weight: var(--uc-fw-bold); color: var(--uc-text); }
.uc-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.uc-footer { background: var(--uc-blue-900); color: rgba(255,255,255,.86); padding-top: var(--uc-section-y); }
.uc-footer h3 {
  color: var(--uc-white); font-family: var(--uc-font-body);
  font-size: var(--uc-fs-base); font-weight: var(--uc-fw-bold);
  letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 var(--uc-space-4);
}
.uc-footer a { color: rgba(255,255,255,.86); }
.uc-footer a:hover { color: var(--uc-cyan-300); }
.uc-footer__grid { display: grid; gap: var(--uc-space-8); grid-template-columns: 1fr; }
@media (min-width: 576px) { .uc-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .uc-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.uc-footer__logo img { height: 52px; width: auto; margin-bottom: var(--uc-space-4); }
.uc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--uc-space-2); }
.uc-footer__contact li { display: flex; gap: var(--uc-space-3); font-size: var(--uc-fs-sm); font-weight: var(--uc-fw-small); line-height: var(--uc-lh-copy); }
.uc-footer__contact i { color: var(--uc-cyan-300); margin-top: .25rem; }
.uc-footer__social { display: flex; gap: var(--uc-space-3); margin-top: var(--uc-space-4); }
.uc-footer__social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(255,255,255,.1); border-radius: 50%; color: var(--uc-white);
  transition: background var(--uc-dur-fast) var(--uc-ease);
}
.uc-footer__social a:hover { background: var(--uc-cyan-600); color: var(--uc-white); }
.uc-footer__bottom {
  margin-top: var(--uc-space-12);
  padding-block: var(--uc-space-6);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--uc-fs-sm);
  display: flex; flex-wrap: wrap; gap: var(--uc-space-4);
  justify-content: space-between; align-items: center;
}

/* --------------------------------------------------------------------------
   WhatsApp flotante
   El <a> es solo el contenedor: lleva la posición fija y la flotación. El
   círculo es un hijo, así el hover puede escalarlo sin pelearse con la
   animación del padre (una animación gana siempre sobre el transform del
   hover, y el botón se quedaba quieto).
   -------------------------------------------------------------------------- */
.uc-whatsapp {
  position: fixed; right: var(--uc-space-4); bottom: var(--uc-space-4);
  z-index: var(--uc-z-float);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--uc-space-2);
  color: var(--uc-white);
  animation: uc-float 3.2s var(--uc-ease) infinite;
  transition: opacity var(--uc-dur-base) var(--uc-ease),
              visibility var(--uc-dur-base);
}
.uc-whatsapp__tip {
  padding: var(--uc-space-1) var(--uc-space-3);
  background: var(--uc-white); color: var(--uc-blue-500);   /* 9,31:1 */
  border-radius: var(--uc-radius-pill);
  box-shadow: var(--uc-shadow-md);
  font-size: var(--uc-fs-sm); font-weight: var(--uc-fw-bold);
  white-space: nowrap;
}
.uc-whatsapp__btn {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--uc-whatsapp); color: var(--uc-white);
  border-radius: 50%; font-size: 1.65rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform var(--uc-dur-fast) var(--uc-ease);
}
.uc-whatsapp:hover { color: var(--uc-white); }
.uc-whatsapp:hover .uc-whatsapp__btn { transform: scale(1.08); }
.uc-whatsapp__btn::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 2px solid var(--uc-whatsapp);
  animation: uc-pulse 2.4s ease-out infinite;
}
/* Flotación de 3px: presencia sin manotazo. Con prefers-reduced-motion la
   regla global de ucap.css la reduce a nada y el botón queda quieto. */
@keyframes uc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes uc-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.6); opacity: 0;  }
}
/* En mobile el flotante se superponía al campo del buscador de carreras, que
   es el control más importante de la página: se retira mientras está en
   pantalla. Sin transform, que es de la animación. */
.uc-whatsapp.is-hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
}
@media (min-width: 768px) {
  .uc-whatsapp { right: var(--uc-space-6); bottom: var(--uc-space-6); }
  .uc-whatsapp__btn { width: 62px; height: 62px; }
}

/* --------------------------------------------------------------------------
   Menú mobile (offcanvas propio — no usar el de Bootstrap)
   -------------------------------------------------------------------------- */
.uc-mobile-menu {
  position: fixed; inset: 0 auto 0 0; z-index: 1200;
  width: min(320px, 86vw);
  background: var(--uc-white);
  box-shadow: var(--uc-shadow-lg);
  transform: translateX(-100%);
  /* visibility (no solo transform) saca el panel cerrado del orden de tabulación.
     Sin esto, un usuario de teclado recorre 8 enlaces de un menú invisible antes
     de llegar al contenido de la página. */
  visibility: hidden;
  transition: transform var(--uc-dur-base) var(--uc-ease),
              visibility var(--uc-dur-base);
  overflow-y: auto;
  padding: var(--uc-space-6);
}
.uc-mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.uc-mobile-backdrop {
  position: fixed; inset: 0; z-index: 1150;
  background: rgba(0,23,51,.6);
  opacity: 0; visibility: hidden;
  transition: opacity var(--uc-dur-base) var(--uc-ease), visibility var(--uc-dur-base);
}
.uc-mobile-backdrop.is-open { opacity: 1; visibility: visible; }
.uc-mobile-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--uc-space-4); margin-bottom: var(--uc-space-4);
  border-bottom: 1px solid var(--uc-border);
}
.uc-mobile-menu__head img { height: 42px; }
.uc-mobile-close {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--uc-bg-subtle); color: var(--uc-text);
  border: 0; border-radius: var(--uc-radius-sm); font-size: 1.1rem; cursor: pointer;
}
.uc-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.uc-mobile-menu > ul > li { border-bottom: 1px solid var(--uc-border); }
/* :not(.uc-btn) — sin esta exclusión la regla ganaba por especificidad al
   botón "Inscribite" del panel: lo volvía display:block, le quitaba el padding
   lateral y le pintaba el texto en gris 900 sobre dorado (3,4:1). El CTA del
   menú móvil dejaba de parecer y de leerse como botón. */
.uc-mobile-menu a:not(.uc-btn) {
  display: block; padding: var(--uc-space-3) 0;
  color: var(--uc-text); font-weight: var(--uc-fw-medium);
}
/* Dos niveles bien diferenciados: el primero pesa 17px/600 en tinta plena, el
   segundo 15px en gris 600 y con un guion celeste que marca la dependencia.
   Con la sola diferencia de tamaño los dos niveles se leían casi igual. */
.uc-mobile-menu > ul > li > a:not(.uc-btn) { font-size: 1.0625rem; font-weight: var(--uc-fw-semi); }
.uc-mobile-menu ul ul { padding-left: var(--uc-space-4); padding-bottom: var(--uc-space-2); }
/* Especificidad por encima de `.uc-mobile-menu a:not(.uc-btn)` (0,2,1): con
   `ul ul a` (0,1,3) perdía el padding y el guion caía encima de la primera letra. */
.uc-mobile-menu .uc-mobile-sub a:not(.uc-btn) {
  position: relative; display: block;
  font-size: 0.9375rem; font-weight: var(--uc-fw-normal);
  color: var(--uc-text-muted);
  padding: var(--uc-space-2) 0 var(--uc-space-2) var(--uc-space-4);
}
.uc-mobile-menu .uc-mobile-sub a:not(.uc-btn)::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: 7px; height: 2px; background: var(--uc-cyan-500);
}
.uc-mobile-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: var(--uc-space-3) 0; background: none; border: 0;
  font-family: var(--uc-font-body); font-size: 1.0625rem; font-weight: var(--uc-fw-semi);
  color: var(--uc-text); cursor: pointer;
}
.uc-mobile-toggle i { transition: transform var(--uc-dur-fast) var(--uc-ease); color: var(--uc-cyan-600); }
.uc-mobile-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.uc-mobile-sub { display: none; }
.uc-mobile-sub.is-open { display: block; }

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */
.uc-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.uc-is-hidden { display: none !important; }
.uc-hide-sm { display: none; }
@media (min-width: 576px) { .uc-hide-sm { display: block; } }

.uc-text-center { text-align: center; }
.uc-text-muted { color: var(--uc-text-muted); }
.uc-text-sm { font-size: var(--uc-fs-sm); }

/* Escala de espaciado completa, con el mismo nombre que el token que consumen */
.uc-mt-4  { margin-top: var(--uc-space-4); }
.uc-mt-6  { margin-top: var(--uc-space-6); }
.uc-mt-8  { margin-top: var(--uc-space-8); }
.uc-mt-12 { margin-top: var(--uc-space-12); }
.uc-mb-4  { margin-bottom: var(--uc-space-4); }
.uc-mb-6  { margin-bottom: var(--uc-space-6); }
.uc-mb-8  { margin-bottom: var(--uc-space-8); }
.uc-mb-12 { margin-bottom: var(--uc-space-12); }
.uc-mb-16 { margin-bottom: var(--uc-space-16); }

/* Fila con extremos separados: se apila en mobile sin media query */
.uc-split {
  display: flex; flex-wrap: wrap; gap: var(--uc-space-4);
  justify-content: space-between; align-items: center;
}
.uc-split--bottom { align-items: flex-end; }

/* Pila vertical simple */
.uc-stack { display: grid; gap: var(--uc-space-4); }

/* Sección sin aire superior: encadena con la sección previa */
.uc-section--flush-top { padding-top: 0; }