/**
 * Landing - Componentes.
 *
 * Aqui viven los estilos de los atomos, moleculas y organismos de la landing.
 * Los valores salen de las variables de /css/landing.css (color y tipografia);
 * ademas cada componente publica sus propias variables, para poder cambiar una
 * barra concreta sin tocar el resto:
 *
 *   <nav class="umv-navbar" style="--umv-navbar-bg: #fff; --umv-navbar-color: #1e293b">
 *
 * Secciones:
 *   (A) Boton de icono   - /atoms/icon-button.ejs
 *   (B) Menu             - /molecules/landing/nav-menu.ejs
 *   (C) Buscador         - /molecules/landing/nav-search.ejs
 *   (D) Encabezado       - /organisms/landing/header.ejs
 *   (E) Barra superior   - /organisms/landing/topbar.ejs
 *   (F) Barra principal  - /organisms/landing/navbar.ejs
 */

/* ===== (A) Boton de icono ============================================== */
.umv-icon-button {
  --umv-icon-button-size: 2.5rem;
  --umv-icon-button-color: currentColor;
  --umv-icon-button-hover: var(--umv-color-accent);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--umv-icon-button-size);
  height: var(--umv-icon-button-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--umv-icon-button-color);
  font-size: 1.125rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.umv-icon-button--sm {
  --umv-icon-button-size: 2rem;
  font-size: 1rem;
}

.umv-icon-button--lg {
  --umv-icon-button-size: 3rem;
  font-size: 1.375rem;
}

.umv-icon-button:hover,
.umv-icon-button:focus-visible {
  color: var(--umv-icon-button-hover);
}

.umv-icon-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.umv-icon-button--solid {
  background: var(--umv-color-primary);
  color: var(--umv-color-on-primary);
}

.umv-icon-button--solid:hover,
.umv-icon-button--solid:focus-visible {
  background: var(--umv-color-primary-hover);
  color: var(--umv-color-on-primary);
}

.umv-icon-button--outline {
  border: 1px solid currentColor;
}

/* ===== (B) Menu ======================================================== */
.umv-nav {
  --umv-nav-color: currentColor;
  --umv-nav-hover: var(--umv-color-accent);
  --umv-nav-gap: 1.75rem;
  --umv-nav-size: var(--umv-paragraph-default-size);
  --umv-nav-line: var(--umv-paragraph-default-line);
  --umv-nav-weight: var(--umv-weight-semibold);
  --umv-nav-caret: currentColor;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--umv-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-nav__item {
  position: relative;
}

.umv-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--umv-nav-color);
  font-family: var(--umv-font-base);
  font-size: var(--umv-nav-size);
  line-height: var(--umv-nav-line);
  font-weight: var(--umv-nav-weight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}

.umv-nav__link:hover,
.umv-nav__link:focus-visible,
.umv-nav__link.is-active,
.umv-nav__link[aria-expanded="true"] {
  color: var(--umv-nav-hover);
}

.umv-nav__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* La flecha lleva su propio color: el texto puede ir en blanco y ella no. */
.umv-nav__caret {
  color: var(--umv-nav-caret);
  font-size: 1rem;
  transition: transform 0.15s ease;
}

.umv-nav__link[aria-expanded="true"] .umv-nav__caret {
  transform: rotate(180deg);
}

.umv-nav__submenu {
  /* Se estira con el nombre mas largo y se para a los 20rem: los centros
    llevan su nombre entero y partido en cuatro renglones no se leia. */
  width: max-content;
  min-width: 13rem;
  max-width: 20rem;
  padding: 0.35rem;
  border: 1px solid var(--umv-color-border);
  border-radius: 0.65rem;
  background: var(--umv-color-surface);
  box-shadow: 0 12px 28px rgba(17, 13, 48, 0.18);
}

/* ===== El panel ancho de la oferta ===================================== */
/* Va de lado a lado de la barra, asi que quien posiciona es la barra y no la
  opcion que lo abre. */
.umv-nav__item--mega {
  position: static;
}

.umv-nav__item--mega .umv-nav__link--toggle {
  position: relative;
}

/* Con el panel abierto la marca es la barra de abajo, asi que el recuadro del
  foco sobra: al pulsar con el raton se veia un rectangulo alrededor del
  nombre. Quien llega con el teclado sigue viendo la barra. */
.umv-nav__item--mega .umv-nav__link--toggle[aria-expanded='true']:focus-visible {
  outline: none;
}

/* Abierto el panel, la opcion lleva su barra en el azul de la marca, pegada
  al borde de abajo de la barra: la opcion se estira a lo alto del renglon y
  la marca baja lo que la barra tiene de relleno (1.5rem). */
.umv-nav__item--mega .umv-nav__link--toggle[aria-expanded='true']::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1.5rem;
  left: 0;
  height: 3px;
  background: var(--umv-color-highlight);
}

.umv-nav__mega {
  /* Debajo de la barra entera y de lado a lado, no colgando de la opcion:
    asi no se come los logos ni el resto del menu. */
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  width: auto;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--umv-color-surface);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.umv-nav__mega-inner {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  max-width: var(--umv-header-width);
  margin: 0 auto;
  padding: 2.75rem var(--umv-header-gutter) 3rem;
}

/* La tarjeta que lleva al catalogo entero. */
.umv-nav__mega-card {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.75rem;
  width: 20rem;
  padding: 1.75rem;
  border-radius: 0.75rem;
  background: var(--umv-sand-50);
  color: var(--umv-color-brand-dark);
  text-decoration: none;
}

.umv-nav__mega-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--umv-display-6-size);
  line-height: 2rem;
  font-weight: var(--umv-weight-bold);
  text-decoration: underline;
}

.umv-nav__mega-card-title .bi {
  font-size: 1.25rem;
  text-decoration: none;
}

.umv-nav__mega-card-text {
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-nav__mega-card:hover .umv-nav__mega-card-title,
.umv-nav__mega-card:focus-visible .umv-nav__mega-card-title {
  color: var(--umv-color-highlight);
}

.umv-nav__mega-column {
  flex: 1 1 0;
  min-width: 0;
}

/* El nombre del nivel, con su linea debajo. */
.umv-nav__mega-title {
  margin: 0 0 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--umv-gray-200);
  color: var(--umv-color-brand-dark);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  font-weight: var(--umv-weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.umv-nav__mega-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-nav__mega-link {
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.5rem;
  text-decoration: none;
}

/* El programa que se senala se marca en el azul de la marca, como en el
  diseno. */
.umv-nav__mega-link:hover,
.umv-nav__mega-link:focus-visible {
  color: var(--umv-color-highlight);
  font-weight: var(--umv-weight-semibold);
}

@media (max-width: 991.98px) {
  /* Aqui el menu es el desplegable de la hamburguesa, no una fila: el panel
    deja de colgar de la barra y se abre dentro del menu, debajo de su opcion,
    empujando a las de abajo. Colgado de la barra aparecia lejos de lo que se
    acababa de pulsar y encima de la pagina. */
  .umv-nav__mega {
    position: static;
    box-shadow: none;
  }

  /* La marca de la opcion abierta se apoyaba en el borde de la barra, que
    aqui queda muy lejos: cruzaba por encima de la opcion siguiente. */
  .umv-nav__item--mega .umv-nav__link--toggle[aria-expanded='true']::after {
    display: none;
  }

  /* Lo mismo para los submenus de siempre: dentro del menu y debajo de su
    opcion, en vez de flotando fuera de la caja que se recorre. */
  .umv-nav__submenu {
    position: static;
    width: 100%;
  }

  /* Apilado: en el menu desplegable del telefono las columnas van una debajo
    de otra y la tarjeta ocupa el ancho. */
  .umv-nav__mega-inner {
    flex-direction: column;
    gap: 1.5rem;
    padding-block: 1.5rem;
    /* Dentro del menu el margen del encabezado ya lo pone la barra. */
    padding-inline: 1rem;
  }

  .umv-nav__mega-card {
    width: 100%;
  }
}

.umv-nav__sublink {
  border-radius: 0.45rem;
  color: var(--umv-color-heading);
  font-family: var(--umv-font-base);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  white-space: normal;
}

.umv-nav__sublink:hover,
.umv-nav__sublink:focus-visible {
  background: var(--umv-color-bg-alt);
  color: var(--umv-color-primary);
}

/* Titulo de un grupo dentro del desplegable "Mas". */
.umv-nav__subheader {
  color: var(--umv-color-muted);
  font-family: var(--umv-font-base);
  font-size: var(--umv-paragraph-small-size);
  font-weight: var(--umv-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ===== (C) Buscador ==================================================== */
/* Sin JavaScript el formulario se queda a la vista y funciona igual; al
   iniciar, /js/landing-header.js agrega `umv-search--enhanced` y entonces el
   campo se guarda detras del icono y se abre hacia la izquierda. */
.umv-search {
  /* Lo que baja el campo cuando se abre debajo de la barra y lo que mide
    abierto. Las dos las usan el campo y la lista de resultados: la lista va
    justo debajo del campo, asi que tienen que salir de la misma cuenta. */
  --umv-search-drop: 0.5rem;
  --umv-search-field: 2.85rem;
  --umv-search-width: min(16rem, 72vw);
  position: relative;
  display: flex;
  align-items: center;
}

.umv-search__form {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.umv-search__input {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: var(--umv-font-base);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-search__input::placeholder {
  color: inherit;
  opacity: 0.6;
}

.umv-search__input:focus {
  outline: none;
  border-bottom-color: var(--umv-color-accent);
}

/* Abierto, el campo se monta sobre lo que tenga al lado (el menu), asi que
   lleva fondo propio para taparlo. Quien lo use dice de que color:
   `--umv-search-bg` (la barra principal le pasa el suyo). */
.umv-search--enhanced .umv-search__form {
  position: absolute;
  top: 50%;
  right: 100%;
  /* Por encima de la barra principal: en un telefono el campo se abre debajo
    de la barra de accesos y, sin esto, la de abajo -que viene despues en el
    documento y tambien va posicionada- lo tapa y no se puede ni escribir. */
  z-index: 30;
  width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--umv-search-bg, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: width 0.25s ease, opacity 0.2s ease;
}

.umv-search--enhanced.is-open .umv-search__form {
  width: min(20rem, 45vw);
  padding: 0.25rem 0.75rem;
  box-shadow: 0 10px 24px rgba(17, 13, 48, 0.28);
  opacity: 1;
  visibility: visible;
}

/* Resultados de la busqueda. Cuelgan debajo del campo y se alinean con el,
  por eso repiten su ancho y su borde derecho. */
.umv-search__results {
  --umv-search-results-bg: var(--umv-color-surface);
  --umv-search-results-text: var(--umv-color-brand-dark);
  position: absolute;
  top: calc(50% + 1.6rem);
  right: 100%;
  z-index: 20;
  width: min(20rem, 45vw);
  max-height: min(60vh, 24rem);
  margin: 0;
  padding: 0.25rem 0;
  overflow-y: auto;
  border-radius: 0.75rem;
  background: var(--umv-search-results-bg);
  box-shadow: 0 10px 24px rgb(17 13 48 / 28%);
  color: var(--umv-search-results-text);
  list-style: none;
}

.umv-search__results[hidden] {
  display: none;
}

.umv-search__result {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.9rem;
  color: inherit;
  text-decoration: none;
}

.umv-search__result:hover,
.umv-search__result:focus-visible {
  background: var(--umv-color-bg-alt);
}

.umv-search__result-text {
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.3;
}

/* El nombre de la seccion va debajo y mas apagado: dice donde esta el
  resultado sin competir con el resultado en si. */
.umv-search__result-section {
  color: var(--umv-color-text-muted, var(--umv-slate-500));
  font-size: var(--umv-paragraph-small-size);
  line-height: 1.2;
}

.umv-search__empty {
  padding: 0.6rem 0.9rem;
  color: var(--umv-color-text-muted, var(--umv-slate-500));
  font-size: var(--umv-paragraph-small-size);
}

/* ===== (D) Encabezado (las dos barras juntas) ========================== */
/* Con `sticky` se queda arriba el bloque entero, no solo la barra principal:
   asi la barra de accesos no desaparece al bajar. */
.umv-header--sticky {
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: transform var(--umv-header-slide) ease;
}

/* Al bajar por la pagina el encabezado se recoge hacia arriba. Lo pone y lo
   quita /js/landing-header.js; sin JavaScript el encabezado se queda fijo. */
.umv-header--hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --umv-header-slide: 0s;
  }
}

/* Fila de pestanas que se queda pegada arriba mientras se recorre la pestana
  abierta: los paneles son largos y sin esto hay que volver al principio para
  cambiar de pestana. Se detiene debajo del encabezado y baja a ras de pantalla
  cuando se recoge, siguiendolo con la misma animacion; el hueco lo apunta
  /js/landing-header.js en `--umv-header-offset`.

  Va por atributo y no por clase porque es lo mismo que buscan los dos guiones
  que la acompanan: asi la pagina declara una sola cosa.

  Se marca la franja entera, no la fila, para que el fondo tape de lado a lado
  lo que pasa por debajo; cada seccion dice de que color con
  `--umv-sticky-tabs-bg` si no es el de la pagina. Queda por debajo del
  encabezado (1030) para que, cuando los dos esten arriba, el encabezado mande.

  Lo que se pega tiene que ser hijo directo de lo que incluye sus paneles: la
  caja de un elemento pegado es la de su padre, y si solo contiene la fila se
  despega nada mas empezar. */
[data-umv-sticky-tabs] {
  /* La linea sobre la que se apoyan las pestanas, la misma en todas las
    paginas: cruza de lado a lado porque va en la franja y no en la fila. */
  border-bottom: 1px solid var(--umv-color-divider);
  position: sticky;
  /* Debajo del encabezado y, si la pagina tiene otra franja pegada por encima
    (la de la ficha de un programa), debajo tambien de ella: sin eso la fila se
    detendria donde ya hay algo y se leeria por detras. Lo que ocupa esa otra
    franja lo apunta quien la pone, en `--umv-sticky-extra`. */
  top: calc(var(--umv-header-offset, 0px) + var(--umv-sticky-extra, 0px));
  z-index: 1020;
  /* El fondo es lo que tapa lo que pasa por debajo, y el hueco de abajo lo
    que evita que el texto se lea pegado a la linea de la fila. */
  padding-bottom: 1.5rem;
  background: var(--umv-sticky-tabs-bg, var(--umv-color-bg));
  transition: top var(--umv-header-slide, 0s) ease;
}

/* De 992px para abajo las pestanas de alguna de estas paginas ya no caben en
  una linea y la fila pasa a dos o tres renglones: pegada arriba se comeria
  media pantalla, asi que ahi se queda donde estaba y se recorre como el resto
  de la pagina. El corte es el mismo para todas para que se porten igual. */
@media (max-width: 991.98px) {
  [data-umv-sticky-tabs] {
    position: static;
  }
}

/* La caja que junta la franja de pestanas con sus paneles. No pinta nada: esta
  para ponerle nombre al limite donde la fila se despega, que es donde acaban
  sus paneles. La necesitan las paginas que tienen las dos cosas sueltas; donde
  ya cuelgan de la misma seccion, esa seccion hace de caja. */
.umv-tabbed {
  display: block;
}

/* ===== (E) Barra superior ============================================== */
.umv-topbar {
  /* Ancho del contenido y margen lateral del encabezado. Por defecto va de lado
    a lado con un respiro del 5%; con `--umv-header-width: 1200px` se centra en
    una caja. Las dos barras usan lo mismo para quedar alineadas. */
  --umv-header-width: 100%;
  --umv-header-gutter: 5%;
  --umv-topbar-bg: var(--umv-navy-900);
  --umv-topbar-color: var(--umv-color-highlight);
  --umv-topbar-hover: var(--umv-color-on-dark);
  background: var(--umv-topbar-bg);
  color: var(--umv-topbar-color);
}

.umv-topbar__inner {
  display: flex;
  align-items: center;
  /* 36px entre los accesos, la linea y el buscador, como en el diseno. */
  gap: 2.25rem;
  width: 100%;
  max-width: var(--umv-header-width);
  margin: 0 auto;
  padding-inline: var(--umv-header-gutter);
}

/* Los accesos se quedan con el hueco libre y se van a la derecha; lo que
  viene detras -la linea y el buscador- cierra la barra. */
.umv-topbar__nav {
  flex: 1 1 auto;
  min-width: 0;
}

/* Abierto, el campo se monta sobre los accesos: lleva el color de la barra
  para taparlos, como hace el de la barra principal. */
.umv-topbar__search {
  --umv-search-bg: var(--umv-topbar-bg);
}

.umv-topbar__divider {
  width: 1px;
  height: 1.25rem;
  background: var(--umv-white-30);
}

.umv-topbar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem;
  /* Ocupa todo el ancho de la barra: sin esto la lista se encoge al tamano de
    su contenido y no habria hueco al que empujar los accesos de la derecha. */
  flex: 1 1 auto;
  margin: 0;
  padding: 1rem 0;
  list-style: none;
}

/* Accesos que van al otro extremo de la barra. El margen automatico se come el
  hueco libre, asi que funciona con uno o con varios. */
.umv-topbar__item--end {
  margin-inline-start: auto;
}

/* Todos los accesos juntos a la derecha. Es `justify-content` y no un margen
  automatico porque el margen separaria al ultimo de los demas, que es justo lo
  contrario de agruparlos. */
.umv-topbar__links--end {
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  /* En un telefono los tres accesos y la lupa no caben con el aire del
    diseno: se juntan y el texto baja un punto para que quepan en el renglon
    en vez de partirse en dos. */
  .umv-topbar__inner {
    gap: 0.75rem;
  }

  .umv-topbar__links {
    gap: 0.875rem;
  }

  .umv-topbar__link {
    font-size: var(--umv-paragraph-default-size);
  }
}

/* Apilados en pantallas estrechas no hay extremo al que ir: el margen
  automatico dejaria el enlace suelto a la derecha de su propia linea. */
@media (width <= 32rem) {
  .umv-topbar__item--end {
    margin-inline-start: 0;
  }
}

.umv-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--umv-topbar-color);
  font-family: var(--umv-font-base);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.25rem;
  font-weight: var(--umv-weight-semibold);
  text-decoration: none;
  transition: color 0.15s ease;
}

.umv-topbar__arrow {
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

/* Abierto el menu, la flecha apunta arriba: ensena que lo que toca es
  cerrarlo. */
.umv-topbar__link--toggle[aria-expanded='true'] .umv-topbar__arrow {
  transform: rotate(180deg);
}

/* El acceso que despliega es un boton, pero se lee igual que los enlaces. */
.umv-topbar__link--toggle {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* El desplegable: una tarjeta blanca colgando de la barra, con las esquinas
  de abajo redondeadas, como en el diseno. */
.umv-topbar__submenu {
  --umv-topbar-submenu-width: 18.75rem;
  min-width: var(--umv-topbar-submenu-width);
  margin-top: 0;
  padding: 0.75rem 0.625rem 1rem;
  border: 0;
  border-radius: 0 0 0.75rem 0.75rem;
  background: var(--umv-color-surface);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.umv-topbar__sublink {
  padding: 0.6875rem 1rem;
  border-radius: 0.5rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.5rem;
  white-space: normal;
}

/* El que se senala con el raton o el teclado se marca con el crema de la
  marca, como el primero del diseno. */
.umv-topbar__sublink:hover,
.umv-topbar__sublink:focus-visible,
.umv-topbar__sublink.active {
  background: var(--umv-sand-50);
  color: var(--umv-color-brand-dark);
  font-weight: var(--umv-weight-semibold);
}

.umv-topbar__link:hover,
.umv-topbar__link:focus-visible,
.umv-topbar__link.is-active {
  color: var(--umv-topbar-hover);
}

/* ===== (F) Barra principal ============================================= */
.umv-navbar {
  /* El panel de la oferta se coloca respecto a la barra, asi que esta es la
    que manda donde empieza. */
  position: relative;
  --umv-header-width: 100%;
  --umv-header-gutter: 5%;
  --umv-navbar-bg: var(--umv-color-bg-dark);
  --umv-navbar-color: var(--umv-color-on-dark);
  --umv-navbar-hover: var(--umv-color-highlight);
  --umv-navbar-icon: var(--umv-color-highlight);
  --umv-navbar-height: 4.5rem;
  background: var(--umv-navbar-bg);
  color: var(--umv-navbar-color);
}

.umv-navbar--sticky {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.umv-navbar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: var(--umv-header-width);
  min-height: var(--umv-navbar-height);
  margin: 0 auto;
  padding-block: 1.5rem;
  padding-inline: var(--umv-header-gutter);
  flex-wrap: wrap;
}

.umv-navbar__brand {
  margin-right: auto;
}

.umv-navbar__menu {
  order: 3;
  width: 100%;
}

.umv-navbar__nav {
  --umv-nav-color: var(--umv-navbar-color);
  --umv-nav-hover: var(--umv-navbar-hover);
  --umv-nav-size: var(--umv-paragraph-default-size);
  --umv-nav-line: var(--umv-paragraph-medium-line);
  --umv-nav-weight: var(--umv-weight-regular);
  --umv-nav-caret: var(--umv-navbar-icon);
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.5rem 0 0.75rem;
}

.umv-navbar__nav .umv-nav__item {
  width: 100%;
}

.umv-navbar__nav .umv-nav__link {
  width: 100%;
  justify-content: space-between;
  padding: 0.6rem 0;
}

.umv-navbar__tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--umv-navbar-color);
}

.umv-navbar__tools .umv-icon-button {
  --umv-icon-button-color: var(--umv-navbar-icon);
  --umv-icon-button-hover: var(--umv-navbar-hover);
}

/* El buscador abierto tapa el menu con el color de la barra. */
.umv-navbar__tools .umv-search {
  --umv-search-bg: var(--umv-navbar-bg);
}

/* El boton que cierra la barra: de contorno, en el azul de la marca. */
.umv-navbar__action {
  --umv-button-bg: transparent;
  --umv-button-color: var(--umv-color-highlight);
  --umv-button-border: var(--umv-color-highlight);
  --umv-button-hover-bg: var(--umv-color-highlight);
  --umv-button-hover-color: var(--umv-color-on-dark);
  --umv-button-radius: 0;
  --umv-button-padding-block: 0.625rem;
  --umv-button-padding-inline: 1.125rem;
  --umv-button-shadow: none;
  white-space: nowrap;
}

/* El menu desplegado no puede ser mas alto que la pantalla: el encabezado va
  pegado arriba, asi que lo que se saliera quedaria fuera del alcance -la
  pagina de detras ya no lo sube-. Se recorre por dentro, que es lo que hace
  falta cuando se abre la oferta academica, que trae el catalogo entero.
  El sitio que le queda lo mide /js/landing-header.js, que es quien sabe donde
  acaban las barras de arriba; sin el vale lo que diga el respaldo. */
@media (max-width: 991.98px) {
  .umv-navbar__menu.collapse.show,
  .umv-navbar__menu.collapsing {
    max-height: var(--umv-navbar-menu-space, 70vh);
    overflow-y: auto;
  }
}

/* A partir de pantallas medianas el menu se queda siempre visible y el boton
   de hamburguesa desaparece. */
@media (min-width: 992px) {
  .umv-navbar__inner {
    flex-wrap: nowrap;
  }

  .umv-navbar__menu.collapse {
    display: flex !important;
    order: 0;
    width: auto;
    /* Puede encogerse: es lo que permite saber cuando una opcion ya no cabe. */
    min-width: 0;
  }

  /* La opcion de la oferta se estira a lo alto del renglon para que su marca
    pueda quedarse en el borde de la barra. */
  .umv-navbar__menu.collapse,
  .umv-navbar__nav,
  .umv-nav__item--mega,
  .umv-nav__item--mega .umv-nav__link--toggle {
    align-self: stretch;
  }

  .umv-navbar__nav,
  .umv-nav__item--mega .umv-nav__link--toggle {
    height: 100%;
  }

  /* El menu nunca se parte en dos lineas: lo que no cabe se va al desplegable
     "Mas" que arma /js/landing-header.js. */
  .umv-navbar__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--umv-nav-gap);
    min-width: 0;
    padding: 0;
  }

  .umv-navbar__nav .umv-nav__item,
  .umv-navbar__nav .umv-nav__link {
    width: auto;
  }

  .umv-navbar__nav .umv-nav__link {
    padding: 0;
  }

  .umv-navbar__toggle {
    display: none;
  }
}

/* En pantallas chicas el buscador se abre debajo de la barra, no hacia el
   lado: no hay espacio a la izquierda. */
@media (max-width: 767.98px) {
  .umv-search--enhanced .umv-search__form {
    top: calc(100% + var(--umv-search-drop));
    right: 0;
    transform: none;
  }

  .umv-search--enhanced.is-open .umv-search__form {
    width: var(--umv-search-width);
    padding: 0.35rem 0.75rem;
  }

  /* Los resultados siguen al campo: debajo de el y con su mismo ancho. Con la
    colocacion de pantalla grande -al lado de la lupa- caian justo donde ya
    estaba el campo abierto, que al llevar fondo propio los tapaba. */
  .umv-search__results {
    top: calc(100% + var(--umv-search-drop) + var(--umv-search-field));
    right: 0;
    width: var(--umv-search-width);
  }
}

/* --------------------------------------------------------------------------
   (G) MARCA
   Uno o varios logotipos juntos. Las medidas salen de variables para que la
   misma marca sirva en el encabezado, en el pie o donde haga falta.
   -------------------------------------------------------------------------- */
.umv-brand {
  --umv-brand-gap: 1.25rem;
  --umv-brand-logo-height: 56px;
  /* La linea va a la altura de los logotipos. Para dejarla mas corta que
    ellos, como estaba antes, basta multiplicarla: calc(... * 0.8). */
  --umv-brand-divider-height: var(--umv-brand-logo-height);
  --umv-brand-divider-color: currentColor;
  --umv-brand-divider-opacity: 0.35;
  display: inline-flex;
  align-items: center;
  gap: var(--umv-brand-gap);
  color: inherit;
  text-decoration: none;
}

/* La altura de cada logotipo llega en su propia variable; `--umv-brand-scale`
   los encoge a todos a la vez sin perder la proporcion entre ellos. */
.umv-brand__logo {
  display: block;
  width: auto;
  height: calc(var(--umv-brand-logo-height) * var(--umv-brand-scale, 1));
}

/* Un logotipo de color se vuelve blanco para los fondos oscuros. */
.umv-brand__logo--invert {
  filter: brightness(0) invert(1);
}

.umv-brand__divider {
  align-self: center;
  width: 1px;
  height: var(--umv-brand-divider-height);
  background: var(--umv-brand-divider-color);
  opacity: var(--umv-brand-divider-opacity);
}

@media (max-width: 575.98px) {
  .umv-brand {
    --umv-brand-gap: 0.75rem;
    --umv-brand-scale: 0.7;
  }
}

/* --------------------------------------------------------------------------
   (H) PIE DE PAGINA
   Marca y descripcion, las columnas de enlaces con el contacto, y el aviso
   legal. Los colores y las medidas salen de variables para poder cambiar el
   pie entero sin tocar cada regla.
   -------------------------------------------------------------------------- */
.umv-footer {
  --umv-footer-width: 100%;
  --umv-footer-gutter: 5%;
  --umv-footer-bg: var(--umv-color-bg-dark);
  --umv-footer-color: var(--umv-color-on-dark);
  --umv-footer-title: var(--umv-color-highlight);
  --umv-footer-muted: var(--umv-white);
  --umv-footer-line: rgba(255, 255, 255, 0.14);
  --umv-footer-link: var(--umv-color-on-dark);
  --umv-footer-link-hover: var(--umv-color-highlight);
  --umv-footer-columns: 4;
  --umv-footer-watermark-width: 45%;
  --umv-footer-watermark-opacity: 1;
  position: relative;
  overflow: hidden;
  background: var(--umv-footer-bg);
  color: var(--umv-footer-color);
}

/* Marca de agua: pegada a la derecha y recortada por el borde del pie. */
.umv-footer__watermark {
  position: absolute;
  top: 0;
  right: 0;
  /* Es un vector: crece con el alto de la franja sin recortarse ni repetirse.
     El ancho lo pone su propia proporcion, con un tope para que no invada el
     contenido en pantallas cortas y anchas. */
  width: auto;
  height: 100%;
  max-width: var(--umv-footer-watermark-width);
  object-fit: contain;
  object-position: top right;
  /* Se funde con el fondo en vez de taparlo: asi es marca de agua y no dibujo. */
  mix-blend-mode: soft-light;
  opacity: var(--umv-footer-watermark-opacity);
  pointer-events: none;
}

.umv-footer__inner {
  position: relative; /* por encima de la marca de agua */
  max-width: var(--umv-footer-width);
  margin: 0 auto;
  padding-block: 3.5rem;
  padding-inline: var(--umv-footer-gutter);
}

.umv-footer__top {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--umv-footer-line);
}

.umv-footer__brand {
  --umv-brand-logo-height: 54px;
}

.umv-footer__description {
  /* max-width: 44rem; */
  margin: 1.75rem 0 0;
  color: var(--umv-footer-color);
}

/* Las redes, debajo de la marca: el nombre del bloque y los tres dibujos en
  su circulo. */
.umv-footer__social {
  margin-top: 1.75rem;
}

.umv-footer__social-title {
  margin: 0 0 0.875rem;
  color: var(--umv-color-highlight);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.375rem;
  font-weight: var(--umv-weight-semibold);
}

.umv-footer__social-list {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-footer__social-link {
  --umv-icon-button-size: 2.75rem;
  --umv-icon-button-color: var(--umv-color-on-dark);
  --umv-icon-button-hover: var(--umv-color-highlight);
  font-size: 1.375rem;
}

/* Los dibujos de las redes vienen a 22px, que es como estan en el diseno. */
.umv-footer__social-link .umv-icon-button__image {
  width: 1.375rem;
  height: 1.375rem;
}

.umv-footer__columns {
  display: grid;
  grid-template-columns: repeat(var(--umv-footer-columns), minmax(0, 1fr));
  gap: 2rem;
  padding-block: 2.75rem;
  border-bottom: 1px solid var(--umv-footer-line);
}

/* El contacto no es una lista de enlaces, pero se pinta igual que las demas
  columnas: su titulo en el azul de la marca y los datos en blanco, del mismo
  color y el mismo peso el nombre del dato y el dato. El titulo lo toma del
  pie porque, al no colgar de .umv-link-column, no le llega su variable. */
.umv-footer .umv-footer__contact-title {
  color: var(--umv-footer-title);
}

.umv-footer .umv-contact__label,
.umv-footer .umv-contact__value {
  color: var(--umv-color-on-dark);
  font-weight: var(--umv-weight-regular);
  opacity: 1;
}

.umv-footer__legal {
  padding-top: 2rem;
  text-align: center;
}

.umv-footer__legal-text {
  margin: 0;
  color: var(--umv-footer-color);
}

.umv-footer__legal-separator {
  margin-inline: 0.5rem;
  color: var(--umv-footer-line);
}

.umv-footer__legal-link {
  color: var(--umv-footer-link-hover);
  text-decoration: underline;
}

.umv-footer__legal-link:hover,
.umv-footer__legal-link:focus-visible {
  color: var(--umv-footer-color);
}

@media (max-width: 991.98px) {
  .umv-footer {
    --umv-footer-columns: 2;
    --umv-footer-watermark-opacity: 0.5;
  }
}

@media (max-width: 575.98px) {
  .umv-footer {
    --umv-footer-columns: 1;
  }

  .umv-footer__inner {
    padding-block: 2.5rem;
  }
}

/* ===== (I) Columna de enlaces ========================================== */
.umv-link-column {
  /* Si se llega por un enlace #id, que el encabezado fijo no tape el titulo. */
  scroll-margin-top: 8rem;
  --umv-link-column-font: var(--umv-font-ui);
  --umv-link-column-title-size: var(--umv-paragraph-medium-size);
  --umv-link-column-title-line: var(--umv-paragraph-medium-line);
  --umv-link-column-link-size: var(--umv-paragraph-default-size);
  --umv-link-column-link-line: var(--umv-paragraph-default-line);
  --umv-link-column-title: var(--umv-footer-title, var(--umv-color-accent));
  --umv-link-column-link: var(--umv-footer-link, var(--umv-color-text));
  --umv-link-column-hover: var(--umv-footer-link-hover, var(--umv-color-accent));
  --umv-link-column-gap: 1rem;
}

.umv-link-column__title {
  margin: 0 0 1.5rem;
  color: var(--umv-link-column-title, var(--umv-color-accent));
  font-family: var(--umv-link-column-font, var(--umv-font-ui));
  font-size: var(--umv-link-column-title-size, var(--umv-paragraph-medium-size));
  line-height: var(--umv-link-column-title-line, var(--umv-paragraph-medium-line));
  font-weight: var(--umv-weight-semibold);
}

.umv-link-column__list {
  display: flex;
  flex-direction: column;
  gap: var(--umv-link-column-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-link-column__link {
  color: var(--umv-link-column-link, var(--umv-color-text));
  font-size: var(--umv-link-column-link-size, var(--umv-paragraph-default-size));
  line-height: var(--umv-link-column-link-line, var(--umv-paragraph-default-line));
  text-decoration: none;
  transition: color 0.15s ease;
}

.umv-link-column__link:hover,
.umv-link-column__link:focus-visible {
  color: var(--umv-link-column-hover, var(--umv-color-accent));
}

/* ===== (J) Datos de contacto =========================================== */
.umv-contact {
  --umv-contact-font: var(--umv-font-ui);
  --umv-contact-size: var(--umv-paragraph-default-size);
  --umv-contact-line: var(--umv-paragraph-default-line);
  --umv-contact-icon-bg: var(--umv-color-surface);
  --umv-contact-icon-color: var(--umv-color-heading);
  --umv-contact-icon-size: 2.75rem;
  --umv-contact-label: var(--umv-footer-muted, var(--umv-color-muted));
  --umv-contact-value: var(--umv-footer-muted, var(--umv-color-muted));
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-contact__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.umv-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--umv-contact-icon-size);
  height: var(--umv-contact-icon-size);
  border-radius: 0.5rem;
  background: var(--umv-contact-icon-bg);
  color: var(--umv-contact-icon-color);
  font-size: 1.25rem;
}

/* Con icono propio el recuadro viene dibujado en el SVG: aqui solo se reserva
   el hueco y se deja ver la imagen entera. */
.umv-contact__icon--image {
  background: none;
  border-radius: 0;
}

.umv-contact__icon img {
  display: block;
  width: 100%;
  height: 100%;
  /* Los dibujos no son todos cuadrados; asi entran enteros en su hueco en vez
    de estirarse. */
  object-fit: contain;
}

.umv-contact__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.umv-contact__label {
  color: var(--umv-white);
  font-family: var(--umv-contact-font);
  font-size: var(--umv-contact-size);
  line-height: var(--umv-contact-line);
  opacity: 0.4;
}

.umv-contact__value {
  color: var(--umv-contact-value);
  font-family: var(--umv-contact-font);
  font-size: var(--umv-contact-size);
  line-height: var(--umv-contact-line);
  font-weight: var(--umv-weight-semibold);
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.umv-contact__value:hover,
a.umv-contact__value:focus-visible {
  color: var(--umv-footer-link-hover, var(--umv-color-accent));
}

/* --------------------------------------------------------------------------
   (K) BOTONES
   Un solo boton con dos acabados: relleno y contorno. Todo lo que cambia entre
   uno y otro (fondo, texto, borde) son variables, asi que una seccion con otros
   colores solo las redefine en su bloque.
   -------------------------------------------------------------------------- */
.umv-button {
  --umv-button-bg: var(--umv-color-highlight);
  --umv-button-color: var(--umv-color-on-dark);
  --umv-button-border: transparent;
  --umv-button-hover-bg: var(--umv-cyan-500);
  --umv-button-hover-color: var(--umv-button-color);
  --umv-button-radius: 0;
  --umv-button-padding-block: 0.875rem;
  --umv-button-padding-inline: 1.125rem;
  --umv-button-size: var(--umv-paragraph-default-size);
  --umv-button-line: 1.25rem;
  --umv-button-shadow: 0 1px 4px rgba(25, 33, 61, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  padding: var(--umv-button-padding-block) var(--umv-button-padding-inline);
  border: 1px solid var(--umv-button-border);
  border-radius: var(--umv-button-radius);
  background: var(--umv-button-bg);
  color: var(--umv-button-color);
  box-shadow: var(--umv-button-shadow);
  font-family: var(--umv-font-base);
  font-size: var(--umv-button-size);
  line-height: var(--umv-button-line);
  font-weight: var(--umv-weight-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.umv-button:hover,
.umv-button:focus-visible {
  background: var(--umv-button-hover-bg);
  color: var(--umv-button-hover-color);
}

/* El contorno no tiene fondo: al pasar el raton se rellena con su propio color. */
.umv-button--outline {
  --umv-button-bg: transparent;
  --umv-button-color: var(--umv-color-highlight);
  --umv-button-border: var(--umv-color-highlight);
  --umv-button-hover-bg: var(--umv-color-highlight);
  --umv-button-hover-color: var(--umv-color-on-dark);
  --umv-button-shadow: none;
}

/* Como enlace y no como boton: sin caja, subrayado y con la flecha pequena al
  lado, que es como lo pide el diseno en las secciones que no llevan un boton
  de verdad. */
.umv-button--link {
  --umv-button-bg: transparent;
  --umv-button-color: var(--umv-navy-800);
  --umv-button-border: transparent;
  --umv-button-hover-bg: transparent;
  --umv-button-hover-color: var(--umv-color-highlight);
  --umv-button-padding-block: 0.9375rem;
  --umv-button-padding-inline: 0;
  --umv-button-line: 1.25rem;
  --umv-button-shadow: none;
  text-decoration: underline;
}

.umv-button--link .umv-button__icon {
  font-size: 0.75rem;
}

.umv-button--lg {
  --umv-button-padding-block: 1.125rem;
  --umv-button-padding-inline: 1.5rem;
  --umv-button-size: var(--umv-paragraph-medium-size);
}

.umv-button--block {
  width: 100%;
}

.umv-button__icon {
  font-size: 0.875em;
  line-height: 1;
}

/* ===== (L) Fila de botones ============================================= */
.umv-button-group {
  --umv-button-group-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--umv-button-group-gap);
}

.umv-button-group--center {
  justify-content: center;
}

.umv-button-group--end {
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   (M) FRANJA DE IMAGEN
   La imagen ocupa todo el ancho y se le redondea una esquina de arriba; por ese
   hueco se ve el fondo oscuro de la marca. La altura y el radio crecen con la
   pantalla para que en un telefono no quede una tira aplastada.
   -------------------------------------------------------------------------- */
.umv-media-band {
  --umv-media-band-bg: var(--umv-color-bg-dark);
  --umv-media-band-height: clamp(13rem, 36vw, 32.25rem);
  /* Lo alto que se ve la foto. Lo manda el diseno y no la forma de la foto:
    si no, una foto mas cuadrada estira la franja. Se recorta, que para eso
    lleva `cover`. */
  --umv-media-band-image: clamp(13rem, 36vw, 43.25rem);
  --umv-media-band-radius: clamp(2.5rem, 10.4vw, 9.375rem);
  /* Franja de fondo por encima de la imagen: al bajar por la pagina lo que
     asoma detras del encabezado es este color y no el blanco de la pagina. */
  --umv-media-band-space-top: 1rem;
  /* La imagen no llega hasta la orilla del lado de la esquina redondeada: deja
     ver el fondo, alineada con el margen del resto de la pagina. */
  --umv-media-band-inset: 5%;
  display: block;
  padding-top: var(--umv-media-band-space-top);
  background: var(--umv-media-band-bg);
  line-height: 0; /* sin el hueco que deja la linea base debajo de la imagen */
}

.umv-media-band--right {
  padding-right: var(--umv-media-band-inset);
}

.umv-media-band--left {
  padding-left: var(--umv-media-band-inset);
}

.umv-media-band__image {
  display: block;
  width: 100%;
  height: var(--umv-media-band-image);
  object-fit: cover;
  object-position: center;
}

.umv-media-band--right .umv-media-band__image {
  border-top-right-radius: var(--umv-media-band-radius);
}

.umv-media-band--left .umv-media-band__image {
  border-top-left-radius: var(--umv-media-band-radius);
}

/* --------------------------------------------------------------------------
   (N) TITULAR DE SECCION
   Titular grande sobre fondo crema, con los botones debajo y la linea que
   cierra la franja.
   -------------------------------------------------------------------------- */
.umv-headline {
  --umv-headline-width: 100%;
  --umv-headline-gutter: 5%;
  --umv-headline-bg: var(--umv-color-bg-soft);
  --umv-headline-color: var(--umv-color-brand-dark);
  --umv-headline-line: var(--umv-color-border-soft);
  --umv-headline-gap: 1.5rem;
  display: block;
  background: var(--umv-headline-bg);
  color: var(--umv-headline-color);
}

.umv-headline--divided {
  border-bottom: 1px solid #b0afb750; /* 1px solid var(--umv-headline-line); */
}

.umv-headline__inner {
  max-width: var(--umv-headline-width);
  margin: 0 auto;
  padding-block: 3.25rem;
  padding-inline: var(--umv-headline-gutter);
}

.umv-headline__title {
  color: var(--umv-headline-color);
}

.umv-headline__description {
  max-width: 44rem;
  margin: 1rem 0 0;
}

.umv-headline__actions {
  margin-top: var(--umv-headline-gap);
}

@media (max-width: 575.98px) {
  .umv-headline__inner {
    padding-block: 2.25rem;
  }

  /* En un telefono los botones lucen mejor completos que a medio renglon. */
  .umv-headline__actions .umv-button {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   (O) ENTRADA DE SECCION
   Nombre de la seccion, la frase que la resume y el boton que lleva al detalle.
   -------------------------------------------------------------------------- */
.umv-intro {
  --umv-intro-width: 100%;
  --umv-intro-gutter: 5%;
  --umv-intro-bg: var(--umv-color-bg-soft);
  --umv-intro-color: var(--umv-color-brand-dark);
  --umv-intro-eyebrow-color: var(--umv-color-brand-dark);
  --umv-intro-eyebrow-opacity: 0.6;
  --umv-intro-gap: 2.5rem;
  --umv-intro-text-width: 58.5rem; /* 936px del diseno */
  /* Lo mas ancho que se le deja al dibujo; si mide menos, manda lo que mida. */
  --umv-intro-figure: 69.125rem;
  display: block;
  background: var(--umv-intro-bg);
  color: var(--umv-intro-color);
}

.umv-intro__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--umv-intro-gap);
  max-width: var(--umv-intro-width);
  margin: 0 auto;
  padding-block: 3.25rem;
  padding-inline: var(--umv-intro-gutter);
}

/* El dibujo que explica la seccion: en su propio renglon, debajo del texto y
  centrado, sin pasar de lo que mide de verdad. */
.umv-intro__figure {
  flex: 1 1 100%;
  margin: 0;
  text-align: center;
}

/* A su tamano, sin estirarse: es un dibujo, y agrandado se ve borroso. En una
  pantalla angosta encoge con la seccion. */
.umv-intro__image {
  max-width: min(100%, var(--umv-intro-figure));
  height: auto;
}

.umv-intro__content {
  flex: 1 1 32rem;
  min-width: 0;
  max-width: var(--umv-intro-text-width);
}

.umv-intro__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--umv-font-helvetica);
  color: var(--umv-intro-eyebrow-color);
  opacity: var(--umv-intro-eyebrow-opacity);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-intro__text {
  margin: 0;
  color: var(--umv-intro-color);
}

/* Parrafos de cuerpo bajo la frase de entrada. Van en el ancho de lectura
  comodo, no en el de la frase: un parrafo largo a todo lo ancho se sigue mal. */
.umv-intro__body {
  --umv-intro-body-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: var(--umv-intro-body-width);
  margin-top: 1.75rem;
}

.umv-intro__paragraph {
  margin: 0;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-intro__actions {
  flex: 0 0 auto;
}

/* Sobre el blanco de la pagina, sin la franja clara. */
.umv-intro--plain {
  --umv-intro-bg: var(--umv-color-bg);
}

/* La entrada partida en dos: a un lado el nombre de la seccion y su titular,
  al otro el texto que la explica. Las medidas son las del diseno: 104 de aire
  arriba y abajo, 440 la columna del titular, 80 entre las dos y 38/44 el
  encabezado. */
.umv-intro--split {
  --umv-intro-head: 27.5rem;
  --umv-intro-gap: 5rem;
  --umv-intro-text-width: 100%;
  --umv-intro-title-size: 2.375rem;
  --umv-intro-title-line: 2.75rem;
}

.umv-intro--split .umv-intro__inner {
  padding-block: clamp(3.5rem, 7.2vw, 6.5rem);
}

.umv-intro--split .umv-intro__content {
  display: grid;
  grid-template-columns: minmax(0, var(--umv-intro-head)) minmax(0, 1fr);
  /* El texto de al lado cruza los dos renglones y es mas alto que el titular.
    Con los dos renglones libres se repartirian su altura y el titular se
    separaria del antetitulo; asi el primero mide lo que mide el antetitulo y
    lo que sobra se lo queda el segundo. */
  grid-template-rows: auto 1fr;
  column-gap: var(--umv-intro-gap);
  align-items: start;
  flex-basis: 100%;
}

.umv-intro--split .umv-intro__eyebrow,
.umv-intro--split .umv-intro__text {
  grid-column: 1;
}

/* El antetitulo: el mismo de las demas secciones del centro, sin el gris
  rebajado que trae la entrada de serie. */
.umv-intro--split .umv-intro__eyebrow {
  color: var(--umv-slate-500);
  opacity: 1;
}

.umv-intro--split .umv-intro__text {
  font-size: var(--umv-intro-title-size);
  line-height: var(--umv-intro-title-line);
}

/* El texto arranca un poco mas abajo que el titular, como en el diseno. */
.umv-intro--split .umv-intro__body {
  --umv-intro-body-width: 100%;
  grid-row: 1 / span 2;
  grid-column: 2;
  gap: 1.125rem;
  margin-top: 0;
  padding-top: 1.75rem;
}

.umv-intro--split .umv-intro__paragraph {
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.7;
}

/* El titular y su texto no caben uno al lado del otro. */
@media (max-width: 991.98px) {
  .umv-intro--split .umv-intro__content {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }

  .umv-intro--split .umv-intro__body {
    grid-row: auto;
    grid-column: 1;
    padding-top: 0;
  }
}

@media (max-width: 575.98px) {
  .umv-intro--split {
    --umv-intro-title-size: var(--umv-display-7-size);
    --umv-intro-title-line: var(--umv-display-7-line);
  }
}

/* En columna: el boton debajo del texto en vez de al lado. El texto va en la
  misma medida que el resto de los parrafos del sitio -la de .umv-intro__body-:
  mas estrecho, el de los cursos se hacia una tira alta con media franja vacia
  al lado. */
.umv-intro--stacked {
  --umv-intro-narrow: 44rem;
}

.umv-intro--stacked .umv-intro__inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}

.umv-intro--stacked .umv-intro__content {
  flex: 0 1 auto;
  max-width: var(--umv-intro-narrow);
}

.umv-intro--stacked .umv-intro__body {
  --umv-intro-body-width: var(--umv-intro-narrow);
}

/* Cierra la entrada con una linea. No es el borde del bloque, que llegaria de
  filo a filo de la ventana: va metida en el margen lateral para que empiece y
  acabe donde el texto, como en el diseno. */
.umv-intro--divided .umv-intro__inner {
  position: relative;
}

.umv-intro--divided .umv-intro__inner::after {
  content: "";
  position: absolute;
  inset-inline: var(--umv-intro-gutter);
  bottom: 0;
  border-bottom: 1px solid var(--umv-color-divider);
}

/* --------------------------------------------------------------------------
   (P) PANEL DE CIFRAS
   Foto a un lado y, al otro, el titulo con las cifras. La esquina de arriba del
   lado de la foto va redondeada.
   -------------------------------------------------------------------------- */
.umv-stats-panel {
  --umv-stats-panel-width: 100%;
  --umv-stats-panel-gutter: 5%;
  --umv-stats-panel-bg: var(--umv-color-bg-soft);
  --umv-stats-panel-card-bg: var(--umv-color-surface);
  --umv-stats-panel-color: var(--umv-color-brand-dark);
  --umv-stats-panel-radius: clamp(2.5rem, 7vw, 6.25rem);
  --umv-stats-panel-media: 50%;
  /* Alto de la foto respecto a su ancho: por debajo de 1 queda apaisada. */
  --umv-stats-panel-ratio: 0.75;
  /* El alto sale de la proporcion de la foto: la tarjeta ocupa el ancho de la
    pagina menos el margen de la derecha, y la foto se queda con
    --umv-stats-panel-media de eso. A partir de 1440 se planta, porque en un
    monitor grande la seccion se comia la pantalla entera; pasado ese punto la
    foto se recorta -lleva `cover`- en vez de seguir creciendo. */
  --umv-stats-panel-height: min(calc(95vw * 0.5 * var(--umv-stats-panel-ratio)), 32rem);
  /* Arriba respira como en el diseno; abajo cierra corto, porque las cifras
     mandan la altura de la tarjeta. */
  --umv-stats-panel-padding-top: clamp(2.5rem, 6vw, 5.625rem);
  --umv-stats-panel-padding-bottom: clamp(2rem, 3vw, 2.5rem);
  --umv-stats-panel-padding-inline: clamp(1.5rem, 7vw, 5.6875rem);
  --umv-stats-panel-gap: clamp(2.5rem, 9vw, 8rem);
  display: block;
  background: var(--umv-stats-panel-bg);
  color: var(--umv-stats-panel-color);
}

.umv-stats-panel__inner {
  max-width: var(--umv-stats-panel-width);
  margin: 0 auto;
  padding-bottom: 7.25rem;
  padding-inline: var(--umv-stats-panel-gutter);
}

/* Una sola foto llega al borde de la pagina, igual que la portada y la seccion
  de "Vive un dia". Se quita el hueco del lado de la foto y el otro se queda,
  para que las cifras sigan alineadas con el resto de la pagina. */
.umv-stats-panel--bleed-start .umv-stats-panel__inner {
  padding-inline-start: 0;
}

.umv-stats-panel--bleed-end .umv-stats-panel__inner {
  padding-inline-end: 0;
}

.umv-stats-panel__card {
  display: grid;
  grid-template-columns: var(--umv-stats-panel-media) minmax(0, 1fr);
  background: var(--umv-stats-panel-card-bg);
  overflow: hidden;
}

.umv-stats-panel__card--left {
  border-top-left-radius: var(--umv-stats-panel-radius);
}

.umv-stats-panel__card--left-none {
  border-top-left-radius: unset;
}

/* Con la foto a la derecha se invierte el orden y la esquina que se redondea. */
.umv-stats-panel__card--right {
  border-top-right-radius: var(--umv-stats-panel-radius);
}

.umv-stats-panel__card--right .umv-stats-panel__media {
  order: 2;
}

.umv-stats-panel__media {
  position: relative;
  min-height: var(--umv-stats-panel-height);
}

/* La foto va colocada sobre su mitad y no dentro de la fila: asi el alto lo
  manda la medida de arriba y no lo que mida la foto, que en una pantalla
  grande estiraba la tarjeta mucho mas de lo pedido. Se recorta, que para eso
  lleva `cover`. */
.umv-stats-panel__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.umv-stats-panel__body {
  display: flex;
  flex-direction: column;
  /* Centrado: con la foto mas alta, el sobrante se reparte arriba y abajo en
    vez de amontonarse al pie y dejar la columna coja. */
  justify-content: center;
  gap: var(--umv-stats-panel-gap);
  padding: var(--umv-stats-panel-padding-top) var(--umv-stats-panel-padding-inline)
           var(--umv-stats-panel-padding-bottom);
}

.umv-stats-panel__title {
  margin: 0;
  color: var(--umv-stats-panel-color);
}

/* Con las cifras en renglones el titulo va pegado al primero: la linea de
  arriba ya separa lo uno de lo otro, y el hueco de la rejilla sobra. */
.umv-stats-panel--rows .umv-stats-panel__body {
  gap: 1.25rem;
}

@media (max-width: 767.98px) {
  /* Apilada, la foto ocupa todo el ancho de la tarjeta: sangrar un solo lado
    la dejaria descuadrada respecto al resto de la pagina. */
  .umv-stats-panel--bleed-start .umv-stats-panel__inner,
  .umv-stats-panel--bleed-end .umv-stats-panel__inner {
    padding-inline: var(--umv-stats-panel-gutter);
  }

  /* La foto pasa arriba y las cifras debajo. */
  .umv-stats-panel__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-stats-panel__card--right .umv-stats-panel__media {
    order: 0;
  }

  .umv-stats-panel__media {
    min-height: clamp(12rem, 55vw, 18rem);
  }
}

/* ===== (Q) Cifras ====================================================== */
.umv-stats {
  --umv-stats-columns: 2;
  --umv-stats-gap: 2.5rem;
  /* Las columnas se reparten el ancho disponible. Estuvieron clavadas a los
    260px del diseno y dejaban un hueco a su derecha cuando la tarjeta crecia:
    la seccion se veia cargada del lado de la foto. */
  display: grid;
  grid-template-columns: repeat(var(--umv-stats-columns), minmax(0, 1fr));
  gap: var(--umv-stats-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-stat {
  /* El diseno pide 40px, que no esta en la escala de titulares. */
  --umv-stat-value-size: 2.5rem;
  --umv-stat-value-line: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* Un dato que lleva a algun sitio. El enlace va vacio y cubre el renglon
  entero, asi que se puede pulsar la cifra o lo que significa; el renglon se
  aclara un poco al pasar por encima para que se note que lleva a algo. */
.umv-stat--link {
  position: relative;
  transition: opacity 0.15s ease;
}

.umv-stat__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0.25rem;
}

.umv-stat--link:hover {
  opacity: 0.85;
  cursor: pointer;
}

.umv-stat--link:has(.umv-stat__link:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 0.25rem;
}

.umv-stat__link:focus-visible {
  outline: none;
}

/* La cifra y su unidad, una debajo de otra y centradas entre si: son un solo
  dato. */
.umv-stat__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.umv-stat__value {
  font-size: var(--umv-stat-value-size);
  line-height: var(--umv-stat-value-line);
  font-weight: var(--umv-weight-bold);
}

.umv-stat__unit {
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.5rem;
  font-weight: var(--umv-weight-semibold);
}

.umv-stat__label {
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* ===== En renglones ==================================================== */
/* Un dato por renglon, con la cifra a la izquierda y lo que significa al
  lado, y una linea entre uno y otro. Es la misma cifra de siempre: solo
  cambia como se reparten. */
.umv-stats--rows {
  --umv-stats-columns: 1;
  /* 110px para la cifra, que es lo que ocupa en el diseno. */
  --umv-stats-figure: 6.875rem;
  gap: 0;
  border-top: 1px solid var(--umv-color-divider);
}

.umv-stats--rows .umv-stat {
  display: grid;
  grid-template-columns: var(--umv-stats-figure) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--umv-color-divider);
}

.umv-stats--rows .umv-stat__label {
  color: var(--umv-color-text);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.5rem;
}

@media (max-width: 575.98px) {
  /* En un telefono la cifra pasa encima de su texto: dos columnas dejan el
    texto en renglones de dos palabras. */
  .umv-stats--rows .umv-stat {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .umv-stats--rows .umv-stat__figure {
    align-items: flex-start;
  }
}

/* El hueco del icono, mientras no haya iconos de verdad: se ve que falta. */
.umv-stat__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--umv-color-border);
  border-radius: 0.25rem;
  color: var(--umv-color-border);
}

/* Entre tableta chica y mediana la foto sigue al lado y la columna de cifras
   queda estrecha: ahi tambien van en una sola columna. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .umv-stats {
    --umv-stats-columns: 1;
  }
}

@media (max-width: 575.98px) {
  .umv-stats {
    --umv-stats-columns: 1;
    --umv-stats-gap: 2rem;
  }
}

/* --------------------------------------------------------------------------
   (R) BUSCADOR DE PROGRAMAS
   Franja oscura con el titular, las pestanas de cada tipo de oferta, la lista
   de programas y la nota de abajo.
   -------------------------------------------------------------------------- */
.umv-finder {
  --umv-finder-width: 100%;
  --umv-finder-gutter: 5%;
  --umv-finder-bg: var(--umv-color-bg-dark);
  --umv-finder-color: var(--umv-color-on-dark-soft);
  --umv-finder-spotlight: var(--umv-color-spotlight);
  --umv-finder-eyebrow-opacity: 0.6;
  /* 36/48 del diseno: el tamano esta en la escala, el interlineado no. */
  --umv-finder-title-size: var(--umv-display-8-size);
  --umv-finder-title-line: 3rem;
  --umv-finder-line: rgba(241, 243, 247, 0.2);
  /* Las pestanas y lo que cuelga de ellas entran un poco respecto al titular,
    como en el diseno: 48px, que a ese tamano de letra es el ancho de las dos
    primeras del titulo. */
  --umv-finder-indent: 3rem;
  --umv-finder-watermark-width: 45%;
  --umv-finder-watermark-opacity: 1;
  position: relative;
  overflow: hidden;
  background: var(--umv-finder-bg);
  color: var(--umv-finder-color);
}

.umv-finder__watermark {
  position: absolute;
  top: 0;
  right: 0;
  /* Igual que en el pie: el vector crece con el alto, sin recortarse. */
  width: auto;
  height: 100%;
  max-width: var(--umv-finder-watermark-width);
  object-fit: contain;
  object-position: top right;
  /* Igual que en el pie: fundida con el fondo, no encima de el. */
  mix-blend-mode: soft-light;
  opacity: var(--umv-finder-watermark-opacity);
  pointer-events: none;
}

.umv-finder__inner {
  position: relative; /* por encima de la marca de agua */
  max-width: var(--umv-finder-width);
  margin: 0 auto;
  padding-block: 4rem;
  padding-inline: var(--umv-finder-gutter);
}

.umv-finder__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--umv-font-helvetica);
  opacity: var(--umv-finder-eyebrow-opacity);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-finder__title {
  margin: 0;
  /* La plantilla del proyecto le pone color a los titulos: hay que decirlo
     aqui o el titular sale oscuro sobre el fondo oscuro. */
  color: var(--umv-finder-color);
  font-size: var(--umv-finder-title-size);
  line-height: var(--umv-finder-title-line);
  font-weight: var(--umv-weight-bold);
}

/* La palabra del final del titular. Va del color del titulo, como en el
  diseno de la portada; quien quiera sacarla en dorado cambia esta variable. */
.umv-finder__highlight {
  color: var(--umv-finder-highlight-color, inherit);
}

/* Las pestanas y los paneles del buscador entran respecto al titular. El
  margen lo pone el buscador, no las pestanas, que fuera de aqui van pegadas a
  su titulo. */
.umv-finder .umv-tabs,
.umv-finder__panels {
  margin-left: var(--umv-finder-indent);
}

/* ===== (S) Pestanas ==================================================== */
.umv-tabs {
  --umv-tabs-color: var(--umv-color-on-dark);
  --umv-tabs-active: var(--umv-color-highlight);
  --umv-tabs-size: var(--umv-display-5-size);
  --umv-tabs-line: var(--umv-display-5-line);
  --umv-tabs-gap: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--umv-tabs-gap);
  margin: 2.5rem 0 1.75rem;
  padding: 0;
  list-style: none;
}

/* En columna: las pestanas quedan al lado de lo que abren, no encima. */
.umv-tabs--stacked {
  flex-direction: column;
  align-items: start;
  flex-wrap: nowrap;
}

.umv-tabs__link {
  padding: 0 0 0.375rem;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--umv-tabs-color);
  font-family: var(--umv-font-base);
  font-size: var(--umv-tabs-size);
  line-height: var(--umv-tabs-line);
  font-weight: var(--umv-weight-regular);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.umv-tabs__link:hover,
.umv-tabs__link:focus-visible {
  color: var(--umv-tabs-active);
}

.umv-tabs__link.active {
  border-bottom-color: var(--umv-tabs-active);
  color: var(--umv-tabs-active);
  font-weight: var(--umv-weight-bold);
}

/* Las filas de pestanas de todo el sitio se ven igual, y lo dicen aqui: el
  aire de arriba, el que va del nombre a su raya, el grosor de la raya de la
  que esta abierta y el color del texto. La referencia es la ficha de un
  programa, que es donde quedo el diseno; lo propio de cada pagina -el ancho,
  el fondo, donde se apoya- se queda en la pagina.

  La linea sobre la que se apoyan va en la franja que se pega arriba
  ([data-umv-sticky-tabs]), no en la fila: cruza la pagina entera y la fila se
  queda en el ancho del contenido. */
.umv-program-body__tabs,
.umv-admissions__tabs,
.umv-about-body__tabs,
.umv-catalog__tabs {
  --umv-tabs-color: var(--umv-color-brand-dark);
  --umv-tabs-active: var(--umv-color-highlight);
  --umv-tabs-size: var(--umv-display-2-line);
  --umv-tabs-line: var(--umv-paragraph-medium-line);
  --umv-tabs-gap: 2rem;
  margin: 0;
  padding-top: 1.75rem;
}

.umv-program-body__tabs .umv-tabs__link,
.umv-admissions__tabs .umv-tabs__link,
.umv-about-body__tabs .umv-tabs__link,
.umv-catalog__tabs .umv-tabs__link {
  display: block;
  padding: 0 0 1rem;
  border-bottom-width: 3px;
  font-weight: var(--umv-weight-regular);
}

.umv-program-body__tabs .umv-tabs__link.active,
.umv-admissions__tabs .umv-tabs__link.active,
.umv-about-body__tabs .umv-tabs__link.active,
.umv-catalog__tabs .umv-tabs__link.active {
  font-weight: var(--umv-weight-bold);
}

/* ===== (T) Lista de opciones =========================================== */
/* En columnas, no en rejilla: asi la lista se llena hacia abajo y luego pasa a
   la siguiente columna, como en el diseno, con las opciones que haya. */
.umv-options {
  --umv-options-columns: 2;
  --umv-options-gap-x: 1.5rem;
  --umv-options-gap-y: 0.5rem;
  columns: var(--umv-options-columns);
  column-gap: var(--umv-options-gap-x);
  margin: 0 0 calc(-1 * var(--umv-options-gap-y));
  padding: 0;
  list-style: none;
}

.umv-option-item {
  margin-bottom: var(--umv-options-gap-y);
  break-inside: avoid;
}

.umv-option {
  --umv-option-bg: var(--umv-color-bg-soft);
  --umv-option-color: var(--umv-color-brand-dark);
  --umv-option-active-bg: var(--umv-color-highlight);
  --umv-option-active-color: var(--umv-color-on-dark);
  --umv-option-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* 12px y 16px del diseno, con el renglon de 28: el recuadro mide 52. */
  padding: 0.75rem 1rem;
  border-radius: var(--umv-option-radius);
  background: var(--umv-option-bg);
  color: var(--umv-option-color);
  font-size: var(--umv-paragraph-medium-size);
  /* Normal; la marcada es la unica en semi negrita, mas abajo. */
  font-weight: var(--umv-weight-regular);
  line-height: var(--umv-paragraph-large-line);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.umv-option:hover,
.umv-option:focus-visible,
.umv-option.is-active {
  background: var(--umv-option-active-bg);
  color: var(--umv-option-active-color);
}

/* La marcada va en semi negrita; al pasar el raton solo cambia el color. */
.umv-option.is-active {
  font-weight: var(--umv-weight-semibold);
}

.umv-option__label {
  min-width: 0;
}

.umv-option__icon {
  flex: none;
  font-size: 0.875em;
}

/* ===== (U) Nota de cierre ============================================== */
/* La nota y el boton van juntos al final del renglon, no uno en cada orilla:
  asi se leen como una sola frase con su salida. */
.umv-finder__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  margin-left: var(--umv-finder-indent);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--umv-finder-line);
}

.umv-finder__note-title,
.umv-finder__note-text {
  margin: 0;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-finder__note-title,
.umv-finder__note-text {
  color: var(--umv-color-on-dark);
}

.umv-finder__note-title {
  font-weight: var(--umv-weight-bold);
}

@media (max-width: 767.98px) {
  .umv-options {
    --umv-options-columns: 1;
  }

  .umv-finder__inner {
    padding-block: 3rem;
  }

  /* En pantalla chica no hay sitio para la sangria: se pierde mas de lo que
    ordena. */
  .umv-finder {
    --umv-finder-indent: 0;
  }

  /* Apilados, la nota y el boton empiezan por la izquierda: pegados a la
    derecha quedaban desalineados con todo lo de arriba. */
  .umv-finder__foot {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   (V) VOCES
   Fila de testimonios: foto con la esquina redondeada, la cita y quien la dice.
   -------------------------------------------------------------------------- */
.umv-testimonials {
  --umv-testimonials-width: 100%;
  --umv-testimonials-gutter: 5%;
  --umv-testimonials-bg: var(--umv-color-bg-soft);
  --umv-testimonials-columns: 3;
  --umv-testimonials-gap: 1.5rem;
  display: block;
  background: var(--umv-testimonials-bg);
}

.umv-testimonials__inner {
  max-width: var(--umv-testimonials-width);
  margin: 0 auto;
  padding-bottom: 4rem;
  padding-inline: var(--umv-testimonials-gutter);
}

.umv-testimonials__list {
  display: grid;
  grid-template-columns: repeat(var(--umv-testimonials-columns), minmax(0, 1fr));
  gap: var(--umv-testimonials-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-testimonial {
  --umv-testimonial-color: var(--umv-color-brand-dark);
  --umv-testimonial-mark: var(--umv-color-highlight);
  --umv-testimonial-role: var(--umv-color-highlight);
  --umv-testimonial-radius: 6.25rem; /* clamp(2rem, 4.5vw, 4rem); */
  --umv-testimonial-media-ratio: 412 / 360;
  /* Velo azul al pie de la foto, que se desvanece hacia arriba. */
  --umv-testimonial-tint: var(--umv-color-highlight);
  --umv-testimonial-tint-height: 32%;
  color: var(--umv-testimonial-color);
}

.umv-testimonial__figure {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  margin: 0;
}

.umv-testimonial__media {
  position: relative;
  /* Aisla la mezcla: el velo se funde con la foto, no con el fondo. */
  isolation: isolate;
  overflow: hidden;
}

.umv-testimonial__media--right {
  border-top-right-radius: 0px;
  /* border-top-right-radius: var(--umv-testimonial-radius); */
}

.umv-testimonial__media--left {
  border-top-left-radius: var(--umv-testimonial-radius);
}

.umv-testimonial__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: var(--umv-testimonial-tint-height);
  background: auto;
  /* background: linear-gradient(180deg, rgba(0, 161, 234, 0) 34%, var(--umv-testimonial-tint) 110%); */
  mix-blend-mode: multiply;
  pointer-events: none;
}

.umv-testimonial__image {
  display: block;
  width: 100%;
  aspect-ratio: var(--umv-testimonial-media-ratio);
  object-fit: cover;
  object-position: center;
}

.umv-testimonial__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* La comilla va al margen, con el texto alineado a su derecha. */
.umv-testimonial__quote {
  display: flex;
  gap: 0.75rem;
  margin: 0;
}

.umv-testimonial__mark {
  flex: none;
  color: var(--umv-testimonial-mark);
  font-size: 1.5rem;
  line-height: 1;
}

/* El nombre y la carrera van pegados, separados del resto de la cita. */
.umv-testimonial__author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.umv-testimonial__text,
.umv-testimonial__name,
.umv-testimonial__role {
  margin: 0;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-testimonial__name {
  font-weight: var(--umv-weight-semibold  );
}

.umv-testimonial__role {
  color: var(--umv-testimonial-role);
}

/* La cuenta de columnas viene en la seccion; aqui se pisa en la propia lista,
   que es otro elemento, para que gane sobre lo que traiga la seccion. */
@media (max-width: 991.98px) {
  .umv-testimonials__list {
    --umv-testimonials-columns: 2;
  }
}

@media (max-width: 575.98px) {
  .umv-testimonials__list {
    --umv-testimonials-columns: 1;
    --umv-testimonials-gap: 2.5rem;
  }

  .umv-testimonials__inner {
    padding-bottom: 3rem;
  }
}

/* --------------------------------------------------------------------------
   (W) INVITACION
   Foto grande a un lado, pegada a la orilla, y al otro el mensaje con su boton.
   La foto lleva el mismo velo azul al pie que las de las voces del campus.
   -------------------------------------------------------------------------- */
.umv-showcase {
  --umv-showcase-bg: var(--umv-color-bg-dark);
  --umv-showcase-color: var(--umv-color-on-dark-soft);
  --umv-showcase-spotlight: var(--umv-color-spotlight);
  --umv-showcase-gutter: 5%;
  --umv-showcase-media: 64.5%;
  --umv-showcase-height: clamp(16rem, 42vw, 37.5rem);
  --umv-showcase-radius: 6.25rem;
  /* Franja de fondo por encima de la foto, como en la portada. */
  --umv-showcase-space-top: 3.5rem;
  --umv-showcase-gap: clamp(2rem, 4vw, 3.5rem);
  /* Ancho del mensaje: es lo que hace que el titular parta en dos lineas. */
  --umv-showcase-body-width: 22.5rem;
  --umv-showcase-tint: var(--umv-color-highlight);
  --umv-showcase-tint-height: 32%;
  display: block;
  padding-top: var(--umv-showcase-space-top);
  background: var(--umv-showcase-bg);
  color: var(--umv-showcase-color);
}

.umv-showcase__grid {
  display: grid;
  grid-template-columns: var(--umv-showcase-media) minmax(0, 1fr);
  align-items: center;
  gap: var(--umv-showcase-gap);
}

.umv-showcase__media {
  position: relative;
  /* Aisla la mezcla: el velo se funde con la foto, no con el fondo. */
  isolation: isolate;
  overflow: hidden;
  min-height: var(--umv-showcase-height);
}

.umv-showcase__media--right {
  border-top-right-radius: var(--umv-showcase-radius);
}

.umv-showcase__media--left {
  border-top-left-radius: var(--umv-showcase-radius);
}

.umv-showcase__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: var(--umv-showcase-tint-height);
  /* Velo azul retirado por ahora. Vuelve devolviendo esta linea. */
  background: auto;
  /* background: linear-gradient(180deg, rgba(0, 161, 234, 0) 34%, var(--umv-showcase-tint) 110%); */
  mix-blend-mode: multiply;
  pointer-events: none;
}

.umv-showcase__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Con la foto a la derecha se invierte el orden y el margen del texto. */
.umv-showcase__grid--right .umv-showcase__media {
  order: 2;
}

.umv-showcase__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding-block: 2rem;
  padding-right: var(--umv-showcase-gutter);
}

.umv-showcase__grid--right .umv-showcase__body {
  padding-right: 0;
  padding-left: var(--umv-showcase-gutter);
}

.umv-showcase__title {
  max-width: var(--umv-showcase-body-width);
  margin: 0;
  /* Reparte el titular entre sus lineas en vez de dejar una casi vacia. */
  text-wrap: balance;
  color: var(--umv-showcase-color);
  font-size: var(--umv-display-8-size);
  line-height: 3rem;
  font-weight: var(--umv-weight-bold);
}

.umv-showcase__highlight {
  color: var(--umv-showcase-spotlight);
}

.umv-showcase__text {
  max-width: var(--umv-showcase-body-width);
  margin: 0;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* Varias fotos en el hueco de la foto: los puntos van centrados y cerca del
  borde, y el de la que se ve en el azul de la marca. */
/* Las dos clases juntas: el aspecto de la galeria se declara mas abajo en
  este mismo archivo y, a igual peso, ganaria la ultima. */
.umv-gallery.umv-showcase__gallery {
  --umv-gallery-dot-active: var(--umv-color-highlight);
  --umv-gallery-dot: var(--umv-white);
  --umv-gallery-dot-bottom: 1.25rem;
}

.umv-showcase__gallery .umv-gallery__dots {
  left: 0;
  right: 0;
  justify-content: center;
}

/* Los datos sueltos de la visita: van marcados y seguidos, debajo del
  parrafo. */
.umv-showcase__notes {
  margin: 0;
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.625rem;
  font-weight: var(--umv-weight-semibold);
}

.umv-showcase__actions {
  margin-top: 0.75rem;
}

@media (max-width: 767.98px) {
  /* La foto arriba y el mensaje debajo. */
  .umv-showcase__grid,
  .umv-showcase__grid--right {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-showcase__grid--right .umv-showcase__media {
    order: 0;
  }

  .umv-showcase__media {
    min-height: clamp(14rem, 60vw, 20rem);
  }

  .umv-showcase__body,
  .umv-showcase__grid--right .umv-showcase__body {
    padding-inline: var(--umv-showcase-gutter);
    padding-bottom: 3rem;
  }
}

/* --------------------------------------------------------------------------
   (X) MURO DE LA RED SOCIAL
   Fila de publicaciones que se recorre con las flechas. Al pasar el raton por
   una foto aparecen el simbolo de la red, dentro de un cuadro dorado en medio,
   y una linea del mismo dorado abajo: avisan de que la foto lleva a la
   publicacion.
   -------------------------------------------------------------------------- */
.umv-social {
  --umv-social-width: 100%;
  --umv-social-gutter: 5%;
  --umv-social-bg: var(--umv-color-bg-soft);
  --umv-social-color: var(--umv-color-brand-dark);
  --umv-social-accent: var(--umv-color-highlight);
  --umv-social-eyebrow-opacity: 0.6;
  /* El distintivo que aparece sobre la foto al pasar el raton, con la linea
    de abajo del mismo color. */
  --umv-social-mark-color: var(--umv-color-spotlight);
  --umv-social-mark-size: 3.375rem;
  --umv-social-mark-radius: 1rem;
  --umv-social-mark-line: 0.5rem;
  --umv-social-gap: 1.5rem;
  --umv-social-columns: 3;
  --umv-social-radius: 6.25rem;
  display: block;
  background: var(--umv-social-bg);
  color: var(--umv-social-color);
}

.umv-social__inner {
  max-width: var(--umv-social-width);
  margin: 0 auto;
  padding-block: 4rem;
  padding-inline: var(--umv-social-gutter);
}

.umv-social__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--umv-font-helvetica);
  opacity: var(--umv-social-eyebrow-opacity);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-social__title {
  margin: 0;
  color: var(--umv-social-color);
  font-size: var(--umv-display-8-size);
  line-height: var(--umv-display-7-line);
  font-weight: var(--umv-weight-bold);
}

.umv-social__text {
  max-width: 44rem;
  margin: 1rem 0 0;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* La fila se recorre sola: las flechas solo la empujan. */
.umv-social__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--umv-social-columns) - 1) * var(--umv-social-gap)) / var(--umv-social-columns));
  gap: var(--umv-social-gap);
  margin: 2.5rem 0 0;
  padding: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  list-style: none;
  scrollbar-width: none;
}

.umv-social__list::-webkit-scrollbar {
  display: none;
}

.umv-social-post {
  scroll-snap-align: start;
}

.umv-social-post__link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 412 / 280;
}

/* La linea de abajo. Va dentro de la foto y no debajo para que la tarjeta no
  cambie de alto al pasar el raton y la fila no de un salto. */
.umv-social-post__link::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: var(--umv-social-mark-line);
  background: var(--umv-social-mark-color);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.umv-social-post__link--right {
  border-top-right-radius: 0px;
  /* border-top-right-radius: var(--umv-social-radius); */
}

.umv-social-post__link--left {
  border-top-left-radius: var(--umv-social-radius);
}

.umv-social-post__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* El cuadro con el simbolo: aparece al pasar el raton y al llegar con el
   tabulador, para que tambien se vea sin raton. */
.umv-social-post__veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--umv-color-on-dark);
  font-size: 2.25rem;
  pointer-events: none;
}

/* El cuadro va en una capa aparte, detras del simbolo. Con `inset: 0` y los
  margenes automaticos queda en el centro sin depender de como se ordenen los
  hijos. */
.umv-social-post__veil::before {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--umv-social-mark-size);
  height: var(--umv-social-mark-size);
  margin: auto;
  border-radius: var(--umv-social-mark-radius);
  background: var(--umv-social-mark-color);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Encima del cuadro: sin esto el fondo lo tapa. */
.umv-social-post__icon {
  position: relative;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.umv-social-post__link:hover .umv-social-post__veil::before,
.umv-social-post__link:focus-visible .umv-social-post__veil::before,
.umv-social-post__link:hover::after,
.umv-social-post__link:focus-visible::after,
.umv-social-post__link:hover .umv-social-post__icon,
.umv-social-post__link:focus-visible .umv-social-post__icon {
  opacity: 1;
}

.umv-social__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
}

.umv-social__account {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--umv-social-accent);
  text-decoration: none;
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-paragraph-medium-line);
  font-weight: var(--umv-weight-bold);
}

.umv-social__account-icon {
  font-size: 1.5rem;
}

.umv-social__account:hover,
.umv-social__account:focus-visible {
  color: var(--umv-color-brand-dark);
}

.umv-social__controls {
  display: flex;
  gap: 0.75rem;
}

/* Las flechas son cuadradas, como en el diseno: la de volver en claro y la de
   avanzar en el azul de la marca. */
.umv-social__arrow {
  --umv-icon-button-size: 2.75rem;
  --umv-icon-button-color: var(--umv-color-brand-dark);
  --umv-icon-button-hover: var(--umv-social-accent);
  border-radius: 0;
  background: var(--umv-sky-50);
}

/* El relleno azul marca hacia donde queda algo por ver: adelante mientras
  queden fotos, y al llegar al final salta a la flecha de volver. Lo pone el JS
  con `is-primary`, asi que no esta atado a una flecha concreta. El azul fuerte
  se reserva para el hover. */
.umv-social__arrow.is-primary {
  --umv-icon-button-color: var(--umv-color-on-dark);
  --umv-icon-button-hover: var(--umv-color-on-dark);
  background: var(--umv-social-accent);
}

/* Al pasar el raton se rellenan de azul las dos, no solo la activa: la blanca
  pasa al azul de la seccion y la que ya estaba azul sube al tono fuerte. Las
  apagadas no reaccionan, que si no parecerian pulsables. */
.umv-social__arrow:not([disabled]):hover,
.umv-social__arrow:not([disabled]):focus-visible {
  --umv-icon-button-hover: var(--umv-color-on-dark);
  background: var(--umv-social-accent);
}

.umv-social__arrow.is-primary:not([disabled]):hover,
.umv-social__arrow.is-primary:not([disabled]):focus-visible {
  background: var(--umv-cyan-500);
}

.umv-social__arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}

@media (max-width: 991.98px) {
  .umv-social {
    --umv-social-columns: 2;
  }
}

@media (max-width: 575.98px) {
  .umv-social {
    --umv-social-columns: 1;
  }

  .umv-social__inner {
    padding-block: 3rem;
  }
}

/* --------------------------------------------------------------------------
   (Y) CATALOGO DE PROGRAMAS
   Pestanas arriba, campo de filtro a la derecha y una rejilla de tarjetas.
   -------------------------------------------------------------------------- */
.umv-catalog {
  --umv-catalog-width: 100%;
  --umv-catalog-gutter: 5%;
  --umv-catalog-gap: 1.5rem;
  --umv-catalog-columns: 3;
  background: var(--umv-color-bg-soft);
  color: var(--umv-color-brand-dark);
}

.umv-catalog__inner {
  max-width: var(--umv-catalog-width);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--umv-catalog-gutter) clamp(3rem, 7vw, 5rem);
}

/* El parrafo que presenta la oferta. Corta antes que la rejilla -como el
  resto de los textos largos de la pagina- y deja su aire con las pestanas. */
.umv-catalog__lead {
  max-width: 62.5rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-large-line);
}

/* Las pestanas a la izquierda y el filtro a la derecha; cuando no caben, el
  filtro baja y ocupa el ancho entero. La linea de abajo cruza la fila entera y
  no solo las pestanas, que es como se ve en admisiones. */
.umv-catalog__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--umv-color-divider);
}

/* Lo propio del catalogo: las pestanas se apoyan en el suelo de su fila, que
  es donde esta la linea, mientras el filtro se queda centrado. El resto de su
  aspecto es el de todas las filas de pestanas. */
.umv-catalog__tabs {
  align-self: flex-end;
  padding-top: 0;
}

/* Una sola pastilla: el texto a la izquierda y el cuadro del simbolo pegado a
  la derecha. Se encoge con la fila y, cuando el filtro baja de linea, ocupa el
  ancho entero. */
.umv-catalog__filter {
  display: flex;
  flex: 0 1 25.5625rem;
  gap: 0.25rem;
  /* Del suelo de la fila, pero sin llegar a apoyarse en la linea: en el diseno
    queda a la altura del nombre de las pestanas, no pegado a la raya. */
  align-self: flex-end;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.125rem;
  border-radius: 0.5rem;
  background: var(--umv-sky-50);
}

/* La etiqueta existe para los lectores de pantalla; a la vista basta el texto
  de dentro del campo. */
.umv-catalog__filter-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sin caja propia: la caja es la pastilla. */
.umv-catalog__filter-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--umv-color-brand-dark);
  font-family: var(--umv-font-base);
  font-size: var(--umv-paragraph-default-size);
}

.umv-catalog__filter-input::placeholder {
  color: var(--umv-slate-500);
  opacity: 1;
}

/* El foco se marca en la pastilla entera, que es lo que se ve como campo. */
.umv-catalog__filter-input:focus {
  outline: none;
}

.umv-catalog__filter:focus-within {
  outline: 2px solid var(--umv-color-highlight);
  outline-offset: 2px;
}

/* Adorno, no boton: el filtro va solo segun se escribe, asi que no hay nada
  que pulsar. */
.umv-catalog__filter-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.0625rem;
  height: 2.0625rem;
  border-radius: 0.25rem;
  background: var(--umv-color-highlight);
  color: var(--umv-color-on-dark);
  font-size: 0.75rem;
}

.umv-catalog__empty {
  margin: 2rem 0 0;
  color: var(--umv-slate-500);
}

.umv-program-grid {
  display: grid;
  grid-template-columns: repeat(var(--umv-catalog-columns), minmax(0, 1fr));
  gap: var(--umv-catalog-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La linea de encima de la lista: de que es el grupo y cuantos son. */
.umv-catalog__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.umv-catalog__eyebrow,
.umv-catalog__count {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-catalog__eyebrow {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Los programas sin foto: renglones en dos columnas. Del diseno, 16px entre
  uno y otro y 24px entre columnas. Se llenan por columnas -los cuatro
  primeros a la izquierda y los siguientes a la derecha- para que el orden
  alfabetico se lea de arriba abajo. */
.umv-program-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--umv-program-list-rows, 4), auto);
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-program-card {
  --umv-program-card-media: 18.5rem;
  display: flex;
}

/* Un renglon: pastilla crema de 80px con el nombre a la izquierda y la flecha
  a la derecha, como la pinta el diseno. */
.umv-program-card--row .umv-program-card__link {
  /* La tarjeta normal apila foto y nombre; el renglon los pone en linea. */
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  min-height: 5rem;
  padding: 1rem 2rem;
  border-radius: 1rem;
  background: var(--umv-sand-50);
}

.umv-program-card--row .umv-program-card__footer {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
  background: none;
}

.umv-program-card--row .umv-program-card__label {
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
  font-weight: var(--umv-weight-extrabold);
}

@media (max-width: 767.98px) {
  /* En un telefono los renglones van uno debajo de otro, en su orden. */
  .umv-program-list {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}

.umv-program-card[hidden] {
  display: none;
}

/* El enlace ocupa la tarjeta entera: el area para pulsar es toda la tarjeta,
  que en movil es la diferencia entre acertar y no. */
.umv-program-card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--umv-sand-50);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.umv-program-card__link:hover,
.umv-program-card__link:focus-visible {
  box-shadow: 0 12px 24px rgb(17 13 48 / 12%);
  transform: translateY(-2px);
}

/* Sin fondo propio: los programas que todavia no tienen foto ensenan el de la
  tarjeta, que es lo que toca mientras llegan. */
.umv-program-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--umv-program-card-media);
}

.umv-program-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.umv-program-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--umv-color-border);
  border-radius: 0.4rem;
  color: var(--umv-color-border);
  font-size: 1.4rem;
}

.umv-program-card__footer {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem 1.25rem;
}

.umv-program-card__label {
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.25;
  font-weight: var(--umv-weight-extrabold);
}

.umv-program-card__arrow {
  flex: 0 0 auto;
  color: var(--umv-color-highlight);
}

/* Por aqui las pestanas y el campo ya no caben en la misma linea. Bajando, el
  campo se queda solo en la suya, asi que la ocupa entera en vez de dejar medio
  renglon vacio a su derecha. */
@media (max-width: 1199.98px) {
  .umv-catalog__filter {
    flex: 1 1 100%;
  }
}

@media (max-width: 991.98px) {
  .umv-catalog {
    --umv-catalog-columns: 2;
  }
}

@media (max-width: 575.98px) {
  .umv-catalog {
    --umv-catalog-columns: 1;
  }
}

/* --------------------------------------------------------------------------
   (Z) AVISO CENTRADO
   Franja con unas lineas y su boton, centrados. La usa la pagina de oferta
   academica debajo del catalogo.
   -------------------------------------------------------------------------- */
.umv-callout {
  --umv-callout-bg: var(--umv-color-bg-alt);
  --umv-callout-color: var(--umv-slate-500);
  --umv-callout-width: 44rem;
  --umv-callout-gutter: 5%;
  background: var(--umv-callout-bg);
  color: var(--umv-callout-color);
}

.umv-callout__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  max-width: calc(var(--umv-callout-width) + var(--umv-callout-gutter) * 2);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--umv-callout-gutter);
  text-align: center;
}

.umv-callout__text {
  margin: 0;
  font-size: var(--umv-display-6-size);
  line-height: 1.35;
  font-weight: var(--umv-weight-bold);
  /* Reparte las lineas para que no quede una palabra suelta al final. */
  text-wrap: balance;
}

/* La explicacion del titular: mismo sitio, pero en tamano de parrafo, para que
  el titular siga siendo lo que se lee primero. */
.umv-callout__lead {
  margin: -0.75rem 0 0;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  text-wrap: balance;
}

.umv-callout__actions {
  justify-content: center;
}

/* ===== El aviso que cierra la portada ================================== */
/* Sobre el azul marino, con el titular grande y las tres salidas debajo. */
.umv-callout--closing {
  --umv-callout-bg: var(--umv-color-bg-dark);
  --umv-callout-color: var(--umv-color-on-dark);
  /* 620px del diseno: lo que mide la frase de debajo del titular. */
  --umv-callout-width: 38.75rem;
}

.umv-callout--closing .umv-callout__inner {
  gap: 1.25rem;
  padding-block: 4.5rem;
}

.umv-callout--closing .umv-callout__text {
  font-size: var(--umv-display-8-size);
  line-height: var(--umv-display-8-line);
}

.umv-callout--closing .umv-callout__lead {
  margin: 0;
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.625rem;
}

/* ===== El aviso con la cara de la franja de la frase =================== */
/* El que cierra "Vida universitaria" va sobre el mismo degradado y con las
  mismas medidas que .umv-quote-band -su fondo, su margen y sus tamanos-, de
  modo que las dos franjas oscuras de la pagina se lean igual. Lo que no
  comparte es el boton, que aqui si lo hay. */
.umv-callout--quote {
  /* Los mismos de .umv-quote-band: 200px de margen a 1440 y el aire de arriba
    y abajo de la franja. */
  --umv-callout-gutter: clamp(1.5rem, 13.9vw, 12.5rem);
  --umv-callout-space: clamp(3.5rem, 7.8vw, 7rem);
  /* El texto llega de margen a margen: lo que lo estrecha es el margen de la
    franja, no una medida suya. */
  --umv-callout-width: 100%;
  --umv-callout-bg: linear-gradient(180deg, var(--umv-navy-750) 0%, var(--umv-color-brand-dark) 100%);
  --umv-callout-color: var(--umv-color-on-dark);
}

.umv-callout--quote .umv-callout__inner {
  gap: 1.25rem;
  padding: var(--umv-callout-space) var(--umv-callout-gutter);
}

/* 34px del diseno, el de la frase de la franja: no esta en la escala de
  titulares porque va entre el de 30 y el de 36. */
.umv-callout--quote .umv-callout__text {
  font-size: 2.125rem;
  line-height: 2.75rem;
  font-weight: var(--umv-weight-semibold);
}

.umv-callout--quote .umv-callout__lead {
  margin: 0;
  color: var(--umv-lilac-200);
  font-size: 1.0625rem;
  line-height: 1.75rem;
}

/* La salida de en medio va de contorno blanco, y la de WhatsApp con el verde
  de su marca. La primera se queda con el azul de siempre. */
.umv-callout__button--ghost {
  --umv-button-bg: transparent;
  --umv-button-color: var(--umv-color-on-dark);
  --umv-button-border: var(--umv-color-on-dark);
  --umv-button-hover-bg: var(--umv-color-on-dark);
  --umv-button-hover-color: var(--umv-color-brand-dark);
}

.umv-callout__button--whatsapp {
  --umv-button-bg: var(--umv-whatsapp-500);
  --umv-button-color: var(--umv-color-brand-dark);
  --umv-button-hover-bg: var(--umv-whatsapp-500);
  --umv-button-hover-color: var(--umv-color-brand-dark);
}

/* --------------------------------------------------------------------------
   (AA) PANELES PARTIDOS
   Foto a un lado y texto al otro. Cada panel elige el lado y si su mitad de
   texto va clara u oscura.
   -------------------------------------------------------------------------- */
.umv-split {
  /* El mismo ancho y margen que el catalogo de tarjetas: las dos secciones van
    seguidas, asi que si una se queda mas estrecha se nota el escalon. */
  --umv-split-width: 100%;
  --umv-split-gutter: 5%;
  --umv-split-gap: clamp(2rem, 4vw, 3rem);
  /* Lo alto del panel lo manda esta medida, no la forma de la foto: crece con
    la ventana hasta 28rem y ahi se planta. Sin el tope, en una pantalla muy
    grande la foto se estiraba a lo alto y el panel se comia la pagina. */
  --umv-split-media-height: clamp(14rem, 31vw, 28rem);
  background: var(--umv-color-bg);
  color: var(--umv-color-brand-dark);
}

.umv-split__inner {
  display: flex;
  flex-direction: column;
  gap: var(--umv-split-gap);
  max-width: var(--umv-split-width);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--umv-split-gutter);
}

.umv-split__panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  /* border: 1px solid var(--umv-color-divider); */
  border-radius: 0.25rem;
}

/* Con la foto a la derecha se invierte el orden visual, pero en el HTML la foto
  sigue yendo primero: asi en movil siempre queda arriba, que es como se lee. */
.umv-split__panel--media-right .umv-split__media {
  order: 2;
}

.umv-split__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--umv-split-media-height);
  background: var(--umv-color-bg-alt);
}

/* La foto va colocada sobre su mitad y no dentro de la fila: asi lo alto sale
  de la medida de arriba y la foto se recorta, que para eso lleva `cover`. En
  la fila, una foto de 3x2 estiraba el panel hasta donde diera de si. */
.umv-split__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.umv-split__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--umv-color-border);
  border-radius: 0.4rem;
  color: var(--umv-color-border);
  font-size: 1.4rem;
}

.umv-split__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--umv-sand-50);
}

.umv-split__title {
  margin: 0;
  color: inherit;
  font-size: var(--umv-display-8-size);
  line-height: var(--umv-display-8-line);
  font-weight: var(--umv-weight-bold);
}

.umv-split__text {
  margin: 0;
  /* Del color del titulo, no gris: en el diseno los dos renglones del panel
    son del mismo azul y el texto se lee a la par del titulo. */
  color: inherit;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* El parrafo de las practicas es el unico panel que se lee de corrido: con la
  medida de los demas -que cuentan dos cosas en tres renglones- se veia
  pequeno al lado de su titulo. Aqui va un punto mas grande, mas suelto y con
  tope de ancho, que es lo que lo hace legible de corrido. */
.umv-split--outreach .umv-split__text {
  max-width: 56.25rem;
  margin: 0 0 1.25rem;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.7;
}

.umv-split__actions {
  margin-top: 0.75rem;
}

/* De contorno, pero con el fondo blanco y no el crema del panel: asi el boton
  se despega del fondo, que es como se ve en el diseno. */
.umv-split__body .umv-button--outline {
  --umv-button-bg: var(--umv-color-surface);
  --umv-button-hover-bg: var(--umv-color-highlight);
}

.umv-split__eyebrow {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
  font-weight: var(--umv-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* El recuadro de lo que todavia no esta escrito: se ve que falta, con lo que
  ira dentro apuntado. El borde va punteado y del color de los bordes del tema
  (--umv-color-border), como el aviso de las secciones que aun no tienen su
  diseno (.umv-pending-note): asi los dos pendientes se leen igual, sin que la
  forma del recuadro diga que ya hay contenido detras. */
.umv-split__note {
  align-self: stretch;
  padding: 1.25rem;
  border: 1px dashed var(--umv-color-border);
  border-radius: 0.375rem;
  background: var(--umv-sky-50);
}

.umv-split__note-title {
  margin: 0 0 0.375rem;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-semibold);
}

.umv-split__note-text {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.65;
}

/* ===== La forma de la vinculacion ====================================== */
/* El texto a un lado y el hueco de la foto al otro, con aire entre los dos y
  sin el crema de los demas paneles: aqui la seccion va sobre el blanco. Las
  medidas son las del diseno: 112 de aire arriba y abajo, 80 entre las dos
  mitades, 620x440 el hueco de la foto y 20 entre lo que se lee. */
.umv-split--outreach {
  --umv-split-gap: 5rem;
  --umv-split-media: 38.75rem;
  --umv-split-media-height: 27.5rem;
  --umv-split-title-size: 2.375rem;
  --umv-split-title-line: 2.75rem;
}

.umv-split--outreach .umv-split__inner {
  padding-block: clamp(3.5rem, 7.8vw, 7rem);
}

.umv-split--outreach .umv-split__panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--umv-split-media));
  gap: var(--umv-split-gap);
  overflow: visible;
  align-items: center;
}

.umv-split--outreach .umv-split__body {
  gap: 1.25rem;
  padding: 0;
  background: none;
}

/* El antetitulo: el mismo de las demas secciones del centro. */
.umv-split--outreach .umv-split__eyebrow {
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
}

.umv-split--outreach .umv-split__title {
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-split-title-size);
  line-height: var(--umv-split-title-line);
  font-weight: var(--umv-weight-bold);
}

/* El recuadro de lo que falta por escribir: la linea va punteada, como en los
  demas pendientes de la pagina, y su nombre en cian encima. */
.umv-split--outreach .umv-split__note {
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--umv-lilac-225);
  border-radius: 0.5rem;
}

.umv-split--outreach .umv-split__note-title {
  margin-bottom: 0.375rem;
  color: var(--umv-cyan-500);
  font-size: var(--umv-paragraph-small-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.umv-split--outreach .umv-split__note-text {
  color: var(--umv-navy-600);
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

/* El hueco de la foto, mientras no la haya. */
.umv-split--outreach .umv-split__media {
  border-radius: 0;
  background: var(--umv-lilac-150);
}

.umv-split--outreach .umv-split__placeholder {
  width: 3.375rem;
  height: 3.375rem;
  border-color: var(--umv-slate-500);
  border-radius: 0.25rem;
  background: var(--umv-color-surface);
  color: var(--umv-slate-500);
}

/* El boton va un poco mas separado que el resto: el diseno le deja 8 de mas. */
.umv-split--outreach .umv-split__actions {
  margin-top: 0.5rem;
}

.umv-split--outreach .umv-split__actions .umv-button {
  --umv-button-bg: var(--umv-color-surface);
  --umv-button-color: var(--umv-cyan-500);
  --umv-button-border: var(--umv-cyan-500);
  --umv-button-hover-bg: var(--umv-cyan-500);
  --umv-button-hover-color: var(--umv-color-on-dark);
  --umv-button-radius: 0.25rem;
  --umv-button-padding-block: 0.75rem;
  --umv-button-padding-inline: 1.375rem;
  --umv-button-size: var(--umv-paragraph-default-size);
  --umv-button-line: 1.25rem;
  --umv-button-shadow: none;
  gap: 0.5rem;
  font-weight: var(--umv-weight-semibold);
}

/* Apilado, el hueco de la foto vuelve a ocupar el ancho entero: con dos
  columnas se quedaba sin sitio y desaparecia. */
@media (max-width: 991.98px) {
  .umv-split--outreach .umv-split__panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .umv-split--outreach {
    --umv-split-title-size: var(--umv-display-7-size);
    --umv-split-title-line: var(--umv-display-7-line);
  }
}

/* ===== La forma del programa de idiomas ================================ */
/* El hueco de la foto pegado a la orilla izquierda y, al otro lado, lo que
  ofrece el programa. Las medidas son las del diseno: 80 de aire arriba, abajo
  y a la derecha, 602x460 la foto y 80 entre las dos mitades. */
.umv-split--program {
  --umv-split-gap: 5rem;
  --umv-split-media: 37.625rem;     /* 602px */
  --umv-split-media-height: 28.75rem; /* 460px */
  --umv-split-title-size: 2.375rem;
  --umv-split-title-line: 2.75rem;
  background: var(--umv-sand-75);
}

/* Sin margen a la izquierda: la foto llega al borde de la pagina, como en el
  diseno. */
.umv-split--program .umv-split__inner {
  padding: 5rem var(--umv-split-gutter) 5rem 0;
}

.umv-split--program .umv-split__panel {
  grid-template-columns: minmax(0, var(--umv-split-media)) minmax(0, 1fr);
  gap: var(--umv-split-gap);
  overflow: visible;
  align-items: center;
}

.umv-split--program .umv-split__body {
  gap: 1.125rem;
  padding: 0;
  background: none;
}

/* El antetitulo: el mismo de las demas secciones del centro. */
.umv-split--program .umv-split__eyebrow {
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
}

.umv-split--program .umv-split__title {
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-split-title-size);
  line-height: var(--umv-split-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-split--program .umv-split__text {
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.7;
}

/* El hueco de la foto, mientras no la haya. */
.umv-split--program .umv-split__media {
  border-radius: 0;
  background: var(--umv-lilac-150);
}

.umv-split--program .umv-split__placeholder {
  width: 3.375rem;
  height: 3.375rem;
  border-color: var(--umv-slate-500);
  border-radius: 0.25rem;
  background: var(--umv-color-surface);
  color: var(--umv-slate-500);
}

/* Las etiquetas de este panel van sobre el crema: en blanco, redondas del
  todo y con el borde que pide el diseno. */
.umv-split--program .umv-split__tags {
  padding-top: 0.25rem;
}

.umv-split--program .umv-split__tag {
  padding: 0.625rem 1.125rem;
  border-color: var(--umv-sand-250);
  border-radius: 999px;
  background: var(--umv-color-surface);
  color: var(--umv-color-brand-dark);
  font-weight: var(--umv-weight-medium);
}

/* Apilado, el hueco de la foto vuelve a ocupar el ancho entero: con dos
  columnas se quedaba sin sitio. Y recupera el margen de la izquierda, que
  solo tiene sentido mientras la foto esta al lado. */
@media (max-width: 991.98px) {
  .umv-split--program .umv-split__inner {
    padding-left: var(--umv-split-gutter);
  }

  .umv-split--program .umv-split__panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .umv-split--program {
    --umv-split-title-size: var(--umv-display-7-size);
    --umv-split-title-line: var(--umv-display-7-line);
  }
}

/* ===== Lo que ofrece un panel ========================================== */
/* Una linea por punto, con su marca delante. Las medidas son las del diseno:
  12 entre puntos, 12 entre la marca y lo que dice, y el texto a 16/27. */
.umv-split__points {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-split__point {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.6875rem;
}

.umv-split__point-icon {
  flex: none;
  /* A la altura del primer renglon, no en medio del punto: con dos renglones
    la marca se quedaba flotando a media frase. */
  margin-top: 0.21875rem;
  color: var(--umv-color-highlight);
  font-size: 1.25rem;
}

/* Las etiquetas del final del texto: las mismas del resto del sitio, que se
  reparten solas y pasan de renglon cuando no caben. */
.umv-split__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-split__tag {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--umv-gray-250);
  border-radius: 2.125rem;
  background: var(--umv-sky-50);
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-semibold);
}

/* El panel oscuro solo cambia colores: el boton se invierte con las variables
  que ya expone el atomo, sin reglas nuevas para el. */
/* El panel alterno: el mismo bloque sobre el azul claro de la marca. */
.umv-split__panel--sky .umv-split__body {
  background: var(--umv-sky-100);
}

/* Sobre el crema o el azul claro, el boton va en blanco con su borde cian,
  no transparente: asi se despega del fondo. */
.umv-split__panel--light .umv-split__body .umv-button--outline,
.umv-split__panel--sky .umv-split__body .umv-button--outline {
  --umv-button-bg: var(--umv-color-surface);
  --umv-button-hover-bg: var(--umv-color-highlight);
  --umv-button-hover-color: var(--umv-color-on-dark);
}

/* Lo que el diseno destaca dentro del parrafo. */
.umv-split__strong {
  font-weight: var(--umv-weight-bold);
}

.umv-split__panel--dark .umv-split__body {
  background: var(--umv-color-bg-dark);
  color: var(--umv-color-on-dark);
}

.umv-split__panel--dark .umv-split__text {
  color: var(--umv-color-on-dark);
  opacity: 0.85;
}

.umv-split__panel--dark .umv-split__body .umv-button {
  --umv-button-bg: var(--umv-color-surface);
  --umv-button-color: var(--umv-color-brand-dark);
  --umv-button-hover-bg: var(--umv-color-bg-alt);
  --umv-button-hover-color: var(--umv-color-brand-dark);
}

@media (max-width: 767.98px) {
  /* Apilados: la foto arriba y el texto debajo, tambien cuando iba a la
    derecha. Se anula el orden invertido para que no quede el texto primero. */
  .umv-split__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-split__panel--media-right .umv-split__media {
    order: 0;
  }
}

/* ============================================
  BREADCRUMB
  ============================================ */

.umv-breadcrumb {
  --umv-breadcrumb-color: var(--umv-slate-500);
  --umv-breadcrumb-gap: 0.4rem;
  --umv-breadcrumb-separator: '>';
  color: var(--umv-breadcrumb-color);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--umv-breadcrumb-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-breadcrumb__item {
  display: flex;
  gap: var(--umv-breadcrumb-gap);
  align-items: center;
}

/* El separador se pinta y no se escribe en el HTML: asi no se lee en voz alta
  un "mayor que" entre cada paso. */
.umv-breadcrumb__item + .umv-breadcrumb__item::before {
  content: var(--umv-breadcrumb-separator);
  opacity: 0.7;
}

.umv-breadcrumb__link {
  color: inherit;
  text-decoration: none;
}

.umv-breadcrumb__link:hover,
.umv-breadcrumb__link:focus-visible {
  color: var(--umv-color-link-hover);
  text-decoration: underline;
}

/* ============================================
  PROGRAM HERO
  ============================================ */

.umv-program-hero {
  /* El mismo ancho y margen que el resto de las secciones de la pagina. */
  --umv-program-hero-width: 100%;
  --umv-program-hero-gutter: 5%;
  /* Lo alto de la seccion. La foto se estira a lo que diga esta medida, asi
    que subirla o bajarla es cambiar este valor y nada mas. */
  --umv-program-hero-height: clamp(24rem, 34vw, 32rem);
  /* La tarjeta ocupa poco menos de la mitad, pegada a la izquierda. En las
    pantallas de en medio ese tanto por ciento la deja tan estrecha que el
    nombre de un posgrado se parte en cuatro renglones y los botones en dos, y
    la seccion se estira para taparlo: por eso tiene un ancho del que no baja,
    aunque le coma algo mas de foto.

    562px es el del diseno, y es el que se usa salvo que el nombre pida mas:
    el de una especialidad no cabe en lo que cabe "en Derecho", y apretandolo
    acababa partido por la mitad. Quien lo pide es la propia ficha, con lo
    justo y sin pasar de 640 (ver /config/titleMetrics). */
  --umv-program-hero-card: 35.125rem;  /* 562px del diseno */
  --umv-program-hero-card-min: 35.125rem;
  /* El simbolo cubre los dos renglones del titulo, como en el diseno. */
  --umv-program-hero-mark-height: 4.5rem;
  --umv-program-hero-mark-width: 6.5rem;
  /* Los mismos textos que la tarjeta de admisiones: el titular grande y la
    ruta de arriba en Helvetica, que es como estan en el diseno. */
  --umv-program-hero-title-size: var(--umv-display-9-size);
  --umv-program-hero-title-line: var(--umv-display-9-line);
  /* El color del nombre del programa. Cada carrera manda el suyo desde los
    datos; el de aqui es el que se ve mientras no llegue. */
  --umv-program-hero-accent: var(--umv-slate-500);
  position: relative;
  /* La franja de color se ve mientras no haya foto, y asegura que el texto
    nunca quede sobre un fondo en blanco si la imagen tarda o falla. */
  background: var(--umv-color-bg-alt);
  color: var(--umv-color-brand-dark);
}

/* El hueco ocupa la seccion entera cuando no hay foto. Por eso se saca del
  flujo: asi lo alto lo manda la seccion y no lo que haya dentro. */
.umv-program-hero__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* El mismo hueco que en las demas secciones: se ve que falta la foto, no se
  disimula con un fondo liso. */
.umv-program-hero__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--umv-color-border);
  border-radius: 0.4rem;
  color: var(--umv-color-border);
  font-size: 1.4rem;
}

.umv-program-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--umv-program-hero-height);
  max-width: var(--umv-program-hero-width);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) var(--umv-program-hero-gutter);
}

/* Con foto la tarjeta va encima, como en las paginas interiores. Se queda ahi
  mientras le quepa al lado de algo de foto; debajo de este ancho ya ocupa el
  ancho entero, asi que baja y la franja se ve completa. */
@media (min-width: 768px) {
  /* Las dos comparten celda en vez de sacar la tarjeta del flujo: asi va
    encima igual, y donde la tarjeta sea la mas alta de las dos la seccion
    crece con ella en lugar de dejarla colgando sobre lo de abajo. */
  .umv-program-hero--photo {
    display: grid;
  }

  .umv-program-hero--photo > * {
    grid-area: 1 / 1;
  }

  /* Y la franja se estira con ella, para no dejar una tira de fondo debajo de
    la foto. La foto no se deforma: es `object-fit: cover`, asi que lo que hace
    es recortarse. */
  .umv-program-hero--photo .umv-program-hero__band {
    display: flex;
    flex-direction: column;
  }

  /* Con `height: auto` el alto salia de la forma de la foto, no del diseno: una
    de 3x2 se veia casi el doble de alta que una apaisada. El alto de partida lo
    dice el diseno, el mismo de las demas franjas, y de ahi para arriba la foto
    solo crece si la tarjeta es mas alta que ella. `min-height: 0` hace falta
    para que el alto natural de la imagen no vuelva a mandar por la puerta de
    atras, que es el minimo que se le pone solo a lo que va en una fila flex. */
  .umv-program-hero--photo .umv-media-band__image {
    flex: 1 1 var(--umv-media-band-image);
    height: var(--umv-media-band-image);
    min-height: 0;
  }

  /* El ancho va dicho: de celda, su `margin: 0 auto` dejaria de estirarlo y la
    tarjeta se iria al centro. */
  .umv-program-hero--photo .umv-program-hero__inner {
    width: 100%;
    min-height: 0;
  }
}

/* Las medidas son las del diseno: 562 de ancho, 36 de aire arriba, 60 a los
  lados y 70 abajo, que es lo que deja sitio a la franja del reconocimiento. */
.umv-program-hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: min(100%, max(var(--umv-program-hero-card), var(--umv-program-hero-card-min)));
  padding: 2.25rem 3.75rem 4.375rem;
  /* Blanco que deja ver la foto detras, como en las demas paginas. */
  background: var(--umv-color-surface-veil);
}

/* La ruta: chica y en gris, con el escalon donde uno esta en el color del
  titulo para que se distinga de los de antes. */
.umv-program-hero__breadcrumb {
  --umv-breadcrumb-color: var(--umv-navy-525);
  --umv-breadcrumb-gap: 0.5rem;
  margin-bottom: 0;
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
}

.umv-program-hero__breadcrumb .umv-breadcrumb__current[aria-current='page'] {
  color: var(--umv-color-brand-dark);
  font-weight: var(--umv-weight-semibold);
}

/* Arriba y no al centro: con un nombre de cuatro renglones, como el de algunas
  maestrias, el simbolo centrado se queda flotando a media tarjeta.

  `align-self` porque la tarjeta alinea a la izquierda, y sin esto el renglon
  se mide por lo que ocupa su texto en vez de por lo que da la tarjeta: un
  nombre largo se salia por el lado derecho. */
.umv-program-hero__heading {
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  gap: 0.75rem;
}

/* El simbolo va a un ancho tope aunque el dibujo de la carrera sea mas
  apaisado: lo que le sobra se lo quita al titulo, y lo que le quede al titulo
  tiene que ser lo mismo en todas las fichas, que de ahi sale el tamano de la
  letra (ver /config/titleMetrics). */
.umv-program-hero__mark {
  flex: none;
  width: auto;
  max-width: var(--umv-program-hero-mark-width);
  height: var(--umv-program-hero-mark-height);
  object-fit: contain;
}

.umv-program-hero__title {
  /* Sin esto el titulo no se encoge por debajo de su palabra mas larga y se
    sale de la tarjeta: hay nombres de posgrado con palabras de catorce letras
    que en un telefono no caben al lado del simbolo. */
  min-width: 0;
  margin: 0;
  /* Red por si llega un nombre mas largo que los de hoy: una palabra que no
    quepa de ninguna manera se parte en vez de salirse de la tarjeta. Sin
    guiones automaticos, que parten palabras que si cabian. */
  overflow-wrap: break-word;
  font-family: var(--umv-font-display);
  font-size: var(--umv-program-hero-title-size);
  line-height: var(--umv-program-hero-title-line);
  font-weight: var(--umv-weight-extrabold);
}

/* Los dos renglones del nombre: el nivel y, debajo, el programa de su color. */
.umv-program-hero__level,
.umv-program-hero__name {
  display: block;
}

.umv-program-hero__name {
  color: var(--umv-program-hero-accent);
}

.umv-program-hero__text {
  /* 442px del diseno: el resumen se para antes del borde de la tarjeta. */
  max-width: 27.625rem;
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.625rem;
}

.umv-program-hero__actions {
  --umv-button-group-gap: 1rem;
  margin-top: 0.25rem;
}

/* Los dos botones de la ficha: en esquina viva y con su simbolo delante, como
  en el diseno. */
.umv-program-hero__actions .umv-button {
  --umv-button-radius: 0;
  --umv-button-padding-block: 0.625rem;
  --umv-button-padding-inline: 1.25rem;
  --umv-button-line: 1.25rem;
  --umv-button-shadow: none;
  gap: 0.5rem;
}

.umv-program-hero__actions .umv-button--outline {
  --umv-button-bg: var(--umv-color-surface);
  --umv-button-border: var(--umv-color-highlight);
  --umv-button-color: var(--umv-color-highlight);
}

/* El reconocimiento oficial: la franja blanca que cierra la tarjeta, a todo
  su ancho y pegada al borde de abajo. */
.umv-program-hero__rvoe {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.625rem 3.125rem;
  background: var(--umv-color-surface);
}

/* El escudo que entrego la disenadora, 22px del diseno. Trae su color dentro,
  asi que aqui solo se le da el tamano. */
.umv-program-hero__rvoe-icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
}

.umv-program-hero__rvoe-text {
  flex: 1;
  color: var(--umv-navy-525);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
}

.umv-program-hero__rvoe-code {
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.25rem;
  font-weight: var(--umv-weight-bold);
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  /* La tarjeta pasa a ocupar el ancho entero, y con menos relleno: los 60 de
    los lados del diseno dejan el texto en una columna de dos palabras. */
  .umv-program-hero__card {
    width: 100%;
    padding: 1.75rem 1.5rem 4rem;
  }

  .umv-program-hero__rvoe {
    padding-inline: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  /* En un telefono el simbolo se pone encima y no al lado: al lado le quita al
    nombre el ancho que necesita y palabras como "Arquitectura" se acaban
    partiendo a la mitad. */
  .umv-program-hero {
    --umv-program-hero-mark-height: 3.25rem;
  }

  .umv-program-hero__heading {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* En un telefono la tarjeta mide lo que la pantalla, asi que el tamano
    elegido para la de 562px se queda grande: se le pone tope segun lo ancha
    que sea. Es un tope, no un tamano: un nombre corto se queda con el suyo. */
  .umv-program-hero__title {
    font-size: min(var(--umv-program-hero-title-size), 7.5vw);
    line-height: 1.05;
  }
}

/* ============================================
  PROGRAM BAR
  ============================================ */

/* La apertura resumida, pegada arriba. Las medidas son las del diseno: 160 de
  alto, la columna de la flecha de 90 y el simbolo a 130 del borde, que es la
  columna de la flecha mas 40.

  Va `fixed` y no `sticky` a proposito: escondida no tiene que ocupar sitio en
  la pagina, porque apareciendo empujaria 160px de contenido hacia abajo justo
  mientras se esta leyendo. Por eso tampoco cuelga de la seccion de las
  pestanas -que recorta lo que se sale por los lados, y eso recortaria tambien
  a lo que va fijo- sino de la pagina. Lo que ocupa se apunta aparte, en
  `--umv-sticky-extra`, para que la fila de pestanas se detenga debajo. */
.umv-program-bar {
  --umv-program-bar-height: 10rem;        /* 160px del diseno */
  --umv-program-bar-back: 5.625rem;       /* 90px del diseno */
  --umv-program-bar-gap: 2.5rem;          /* hasta los 130px del simbolo */
  --umv-program-bar-mark: 3.25rem;        /* 52px del diseno */
  /* Lo que deja ver la foto a traves del color. */
  --umv-program-bar-photo: 0.3;
  /* El color de la franja: el de la carrera. Cada ficha manda el suyo; el de
    aqui es el que se ve mientras no llegue. */
  --umv-program-bar-accent: var(--umv-color-primary);
  position: fixed;
  top: var(--umv-header-offset, 0px);
  right: 0;
  left: 0;
  z-index: 1021;
  display: flex;
  align-items: stretch;
  height: var(--umv-program-bar-height);
  /* Alta fija: lo que no quepa se corta antes que estirar la franja, que esta
    pegada arriba y creciendo taparia lo que se esta leyendo. */
  overflow: hidden;
  /* El color va debajo y la foto encima, multiplicada: sin aislar, la mezcla
    buscaria tambien lo que haya detras de la franja. */
  isolation: isolate;
  background: var(--umv-program-bar-accent);
  color: var(--umv-color-on-dark);
  /* Escondida arriba del todo: entra y sale deslizandose bajo el encabezado,
    que es quien la tapa mientras llega. */
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform var(--umv-header-slide, 0s) ease,
    visibility var(--umv-header-slide, 0s) ease,
    top var(--umv-header-slide, 0s) ease;
}

.umv-program-bar.is-shown {
  visibility: visible;
  transform: translateY(0);
}

/* La misma foto de la apertura, tenida del color de la carrera. */
.umv-program-bar__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--umv-program-bar-photo);
  mix-blend-mode: multiply;
}

/* La columna de la flecha: un poco mas oscura que el resto de la franja, como
  en el diseno, para que se lea como un sitio al que se pulsa. */
.umv-program-bar__back {
  display: flex;
  flex: 0 0 var(--umv-program-bar-back);
  align-items: center;
  justify-content: center;
  width: var(--umv-program-bar-back);
  background: var(--umv-navy-15);
  color: inherit;
  font-size: var(--umv-display-6-size);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.umv-program-bar__back:hover,
.umv-program-bar__back:focus-visible {
  background: var(--umv-white-30);
  color: inherit;
}

/* El simbolo y el nombre, centrados en lo alto de la franja. */
.umv-program-bar__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding-right: var(--umv-program-bar-gap);
  padding-left: var(--umv-program-bar-gap);
  min-width: 0;
}

.umv-program-bar__mark {
  flex: none;
  width: auto;
  height: var(--umv-program-bar-mark);
}

/* Los dos renglones del diseno: el nivel arriba y el nombre debajo, los dos en
  blanco -aqui el color ya lo lleva la franja entera. */
.umv-program-bar__title {
  display: block;
  min-width: 0;
  font-size: var(--umv-display-7-size);
  font-weight: var(--umv-weight-medium);
  line-height: var(--umv-display-6-line);
}

/* Cada uno en su renglon, como en el diseno. El nombre de un diplomado es
  largo y en las pantallas de en medio no cabe en uno solo: entonces pasa al
  siguiente -caben tres en la franja- en vez de quedarse cortado, que el nombre
  de la carrera es justo lo que se viene a ver aqui. */
.umv-program-bar__level,
.umv-program-bar__name {
  display: block;
}

/* De aqui para abajo la fila de pestanas tampoco se queda pegada, asi que esta
  franja no tendria con quien turnarse; y 160px sobre una pantalla de telefono
  tapan justo lo que se esta leyendo. */
@media (max-width: 991.98px) {
  .umv-program-bar {
    display: none;
  }
}

/* ============================================
  PROGRAM BODY
  ============================================ */

.umv-program-body {
  --umv-program-body-width: 100%;
  --umv-program-body-gutter: 5%;
  /* Recorta lo que se sale por los lados, que es lo que hacen las franjas de
    color al estirarse hasta el borde de la ventana. Sin esto asomaria una
    barra de desplazamiento abajo. */
  overflow-x: clip;
  background: var(--umv-color-bg);
}

.umv-program-body__inner {
  max-width: var(--umv-program-body-width);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) var(--umv-program-body-gutter);
}

/* La franja de las pestanas: la linea va aqui y no en la fila para que llegue
  de lado a lado, aunque las pestanas se queden alineadas con el contenido. */
.umv-program-body__bar {
  border-bottom: 1px solid var(--umv-color-divider);
}

/* Las pestanas a un lado y los botones de compartir al otro, apoyados los dos
  en la linea de abajo. */
.umv-program-body__bar .umv-program-body__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  padding-block: 0;
}

/* Se apoyan en la misma linea que las pestanas, un poco por encima de ella. */
.umv-program-body__share {
  padding-bottom: 1.25rem;
}

/* En pantalla chica la fila de pestanas ya se recorre de lado; los botones se
  van debajo en vez de robarle sitio. */
@media (max-width: 767.98px) {
  .umv-program-body__share {
    padding-top: 0.5rem;
  }
}

/* La tarjeta de precios y la fila de becas son las mismas de admisiones, que
  es una pagina sin nada alrededor: alla cada una pone su propio margen a los
  lados y su propio respiro arriba y abajo. Dentro de una pestana eso ya lo
  pone el panel, asi que aqui se les quita entero.

  A los lados, porque si no los costos empezaban 64px mas adentro que el resto
  de la ficha. Y arriba y abajo, porque entre las dos secciones se juntaban
  tres huecos -86 debajo de los precios, 56 encima de las becas y el del panel
  entre bloques- y dejaban 206px de blanco en medio. Asi queda uno solo: el que
  separa todo lo demas de la ficha. */
.umv-program-body .umv-prices,
.umv-program-body .umv-grants {
  padding: 0;
}

.umv-program-body__panels {
  margin-top: clamp(0.5rem, 2vw, 1rem);
}

.umv-program-body__pending {
  margin: 0;
  padding: clamp(2.5rem, 5vw, 4rem) 1rem;
  border: 1px dashed var(--umv-color-border);
  border-radius: 0.25rem;
  color: var(--umv-color-muted);
  font-size: var(--umv-paragraph-default-size);
  text-align: center;
}

/* ============================================
  PROGRAM ABOUT
  ============================================ */

.umv-about {
  --umv-about-title-size: var(--umv-display-7-line);
  --umv-about-title-line: var(--umv-display-6-line);
  /* La esquina redondeada del video, la misma idea que la franja de la
    portada: crece con la pantalla para que no quede un pico en un telefono. */
  --umv-about-media-radius: clamp(1.5rem, 4vw, 3.5rem);
  --umv-about-play-size: clamp(3.25rem, 5vw, 4.25rem);
}

.umv-about__lead {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

/* El nombre de la seccion, igual que el de las demas aperturas. */
.umv-about__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

.umv-about__title {
  margin: 0 0 1rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-about-title-size);
  line-height: var(--umv-about-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-about__paragraph {
  margin: 0 0 1rem;
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-about__paragraph:last-child {
  margin-bottom: 0;
}

.umv-about__figure {
  margin: 0;
}

/* La proporcion es la del video, asi que el recuadro no cambia de alto al
  pasar del cartel al reproductor. */
.umv-about__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--umv-color-bg-alt);
  border-radius: 0.25rem;
  border-top-right-radius: var(--umv-about-media-radius);
}

/* El reproductor, sea el marco de YouTube o el video de un archivo nuestro. */
.umv-about__frame {
  width: 100%;
  height: 100%;
  border: 0;
}

/* El boton de reproducir, en medio del cartel. */
.umv-about__play {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--umv-about-play-size);
  height: var(--umv-about-play-size);
  border-radius: 50%;
  background: var(--umv-color-highlight);
  color: var(--umv-color-on-dark);
  font-size: calc(var(--umv-about-play-size) * 0.5);
  line-height: 1;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.umv-about__play:hover,
.umv-about__play:focus-visible {
  background: var(--umv-cyan-500);
  color: var(--umv-color-on-dark);
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .umv-about__play {
    transition: none;
  }

  .umv-about__play:hover,
  .umv-about__play:focus-visible {
    transform: none;
  }
}

.umv-about__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.umv-about__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--umv-color-border);
  border-radius: 0.4rem;
  color: var(--umv-color-border);
  font-size: 1.4rem;
}

/* El nombre sobre la foto. Lleva sombra por debajo para que se lea tambien
  sobre una foto clara, que es lo unico que no se puede dar por sentado. */
.umv-about__overlay {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--umv-color-on-dark);
  text-align: end;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.umv-about__overlay-name {
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
  font-weight: var(--umv-weight-bold);
  letter-spacing: 0.02em;
}

.umv-about__overlay-role {
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
}

.umv-about__caption {
  margin-top: 0.9rem;
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}


@media (max-width: 767.98px) {
  .umv-about__lead {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================
  SPLIT FEATURE
  ============================================ */

.umv-feature {
  --umv-feature-gap: clamp(2rem, 4vw, 3.5rem);
  --umv-feature-title-size: var(--umv-display-7-line);
  --umv-feature-title-line: var(--umv-display-6-line);
  /* El hueco entre tarjetas: en el diseno se ve el fondo entre una y otra. */
  --umv-feature-card-gap: clamp(0.75rem, 1.5vw, 1rem);
}

/* La variante con franja de fondo. El fondo se sale a los bordes de la ventana
  con el pseudoelemento, porque el panel donde vive esto tiene su margen y el
  diseno pide que el color llegue de lado a lado. */
.umv-feature--banded {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.umv-feature--banded::before {
  content: '';
  position: absolute;
  /* De la mitad hacia los lados, media ventana a cada lado. Lo que se salga lo
    recorta el `overflow-x` de la seccion, asi que no aparece barra abajo. */
  inset: 0 calc(50% - 50vw);
  background: var(--umv-sky-50);
}

/* El contenido va por encima del fondo que acaba de ponerse. */
.umv-feature--banded .umv-feature__inner {
  position: relative;
}

/* El velo de color al pie de la columna del texto, como en el diseno: tine el
  fondo de abajo arriba en vez de pintarse encima, por eso el modo de mezcla.
  Es un adorno, asi que no se anuncia ni ocupa sitio. */
.umv-feature--banded .umv-feature__intro {
  position: relative;
}

.umv-feature--banded .umv-feature__intro::after {
  content: '';
  position: absolute;
  inset: auto 0 -2.5rem;
  height: 2.5rem;
  mix-blend-mode: color;
  background: linear-gradient(180deg, rgb(0 161 234 / 0%) 0%, var(--umv-color-highlight) 100%);
}

/* El nombre de la seccion, igual que el de las demas aperturas. */
.umv-feature__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  color: var(--umv-color-brand-dark);
}

.umv-feature__inner {
  display: grid;
  /* La columna del texto se queda fija y el detalle ocupa el resto, como en el
    diseno: si las dos crecieran, el titulo se separaria de su parrafo. */
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: var(--umv-feature-gap);
  align-items: start;
}

/* Debajo de este ancho las dos columnas no caben una al lado de la otra: el
  titulo se queda arriba y las tarjetas debajo, a todo lo ancho. */
@media (max-width: 767.98px) {
  .umv-feature__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.umv-feature__title {
  margin: 0 0 0.75rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-feature-title-size);
  line-height: var(--umv-feature-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-feature__text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* Las tarjetas van de dos en dos como mucho, y se bajan a una sola columna en
  cuanto dejen de caber. Pidiendo que cada una ocupe al menos la mitad nunca
  salen tres, por ancha que sea la pantalla, y el corte lo pone el ancho de la
  tarjeta y no una medida de pantalla elegida a dedo. */
/* Los renglones numerados se tocan de arriba abajo: lo que los separa es su
  propia linea, no un hueco. A los lados si hay aire entre las dos columnas, y
  ese es el valor que entra en la cuenta de las columnas. */
.umv-feature--numbered .umv-feature__items {
  --umv-feature-card-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: 0;
  align-items: start;
}

.umv-feature__items {
  display: grid;
  /* El `min(100%, ...)` es el que impide que el ancho minimo de la tarjeta se
    salga cuando la columna es mas estrecha que el, que es lo que pasa en un
    telefono. */
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(17rem, (100% - var(--umv-feature-card-gap)) / 2)), 1fr)
  );
  gap: var(--umv-feature-card-gap);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}



/* ============================================
  NUMBERED ITEM
  ============================================ */

/* Un renglon numerado: el numero a la izquierda y la frase al lado, con la
  linea que lo separa del siguiente. */
.umv-numbered {
  display: flex;
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
  align-items: baseline;
  padding-block: clamp(0.85rem, 1.5vw, 1.15rem);
  border-bottom: 1px solid var(--umv-color-divider);
}

.umv-numbered__number {
  flex: none;
  color: var(--umv-color-highlight);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
  font-weight: var(--umv-weight-bold);
  font-variant-numeric: tabular-nums;
}

.umv-numbered__text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-medium-line);
}

/* ============================================
  FEATURE ITEM
  ============================================ */

/* Cada punto es una tarjeta blanca con su palomita al lado del texto. El
  tamano del cuadro va en em para que crezca con la letra de la tarjeta. */
.umv-feature-item {
  --umv-feature-item-check: 1.5em;
  display: flex;
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
  align-items: center;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--umv-color-surface);
}

.umv-feature-item__check {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--umv-feature-item-check);
  height: var(--umv-feature-item-check);
  border-radius: 0.375rem;
  background: var(--umv-color-highlight);
  color: var(--umv-color-on-dark);
  font-size: 0.875rem;
  line-height: 1;
}

/* El dibujo del punto, cuando lo trae: viene con su circulo dentro, asi que
  aqui solo se le da la medida. */
.umv-feature-item__icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}

.umv-feature-item__text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
}

/* ============================================
  OUTCOME GRID
  ============================================ */

.umv-outcomes {
  /* 35px del diseno, tanto entre tarjetas como dentro de ellas. */
  --umv-outcomes-gap: clamp(1.25rem, 2.5vw, 2.1875rem);
  /* 40px del diseno. */
  --umv-outcomes-number: 2.5rem;
  --umv-outcomes-title-size: var(--umv-display-8-size);
  --umv-outcomes-title-line: var(--umv-display-9-line);
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  color: var(--umv-color-on-dark);
}

/* El fondo se sale a los bordes de la ventana, porque el panel donde vive esto
  tiene su margen y el diseno pide que el color llegue de lado a lado. Lo que
  se salga lo recorta el `overflow-x` de la seccion. */
.umv-outcomes::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--umv-color-bg-dark);
}

.umv-outcomes__inner {
  position: relative;
}

/* Las dos franjas de color van pegadas: el hueco que el bloque pone entre sus
  secciones dejaria una tira blanca entre dos fondos, que no esta en el diseno.
  Se quita solo aqui, no en todo el bloque, porque entre las demas secciones si
  tiene que haber aire. */
.umv-feature--banded + .umv-outcomes {
  margin-top: calc(var(--umv-details-gap) * -1);
}

.umv-outcomes__intro {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.umv-outcomes__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

.umv-outcomes__title {
  margin: 0 0 0.75rem;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-outcomes-title-size);
  line-height: var(--umv-outcomes-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-outcomes__text {
  /* 416px del diseno: el parrafo se corta antes que el ancho de la pagina. */
  max-width: 36rem;
  margin: 0;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-medium-line);
}

/* Tres de ancho como mucho, y menos cuando dejen de caber: pidiendo que cada
  una ocupe al menos un tercio nunca salen cuatro, y el corte lo pone lo que
  mide una tarjeta y no una medida de pantalla elegida a dedo. */
.umv-outcomes__list {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(18rem, (100% - var(--umv-outcomes-gap) * 2) / 3)), 1fr)
  );
  gap: var(--umv-outcomes-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-outcome {
  display: flex;
  flex-direction: column;
  gap: var(--umv-outcomes-gap);
  padding: var(--umv-outcomes-gap);
  background: var(--umv-color-surface-dark);
}

.umv-outcome__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* El circulo del numero, tal y como lo entrego la disenadora: 40px de dorado
  con el numero en azul marino. Es el mismo dorado que el del plan de estudios
  y el mismo que lleva el nombre corto de aqui al lado. */
.umv-outcome__number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--umv-outcomes-number);
  height: var(--umv-outcomes-number);
  border-radius: 50%;
  background: var(--umv-color-spotlight);
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-6-line);
  font-weight: var(--umv-weight-extrabold);
}

/* El nombre corto de la competencia, en el dorado del circulo. No lleva la
  transparencia de los demas nombres de seccion: aqui el color es el dato, y
  rebajarlo lo apagaria contra el fondo oscuro. */
.umv-outcome__tag {
  color: var(--umv-color-spotlight);
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: end;
}

.umv-outcome__text {
  margin: 0;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-medium-line);
}

/* ============================================
  PROGRAM DETAILS
  ============================================ */

.umv-details {
  --umv-details-gap: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: var(--umv-details-gap);
}

/* ============================================
  PHOTO MOSAIC
  ============================================ */

.umv-mosaic {
  /* 46px: el renglon del titulo del diseno, que no es el de ningun tamano. */
  --umv-mosaic-title-line: 2.875rem;
  /* El parrafo lleva tope: a linea completa cuesta leerlo. */
  --umv-mosaic-text-width: 40rem;
  --umv-mosaic-gap: 1rem;
}

.umv-mosaic__intro {
  margin-bottom: 2.5rem;
}

.umv-mosaic__eyebrow {
  margin: 0 0 0.875rem;
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--umv-slate-500);
}

.umv-mosaic__title {
  margin: 0 0 1rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-8-size);
  line-height: var(--umv-mosaic-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-mosaic__text {
  max-width: var(--umv-mosaic-text-width);
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-large-size);
  /* 26px: la entrada se lee mas suelta que el resto de los parrafos. */
  line-height: 1.625rem;
}

/* El mosaico del diseno: la primera foto ocupa las dos filas de la izquierda y
  las otras cuatro se reparten la derecha. Las medidas van en proporcion
  (640 y 304 de ancho por 440 de alto) para que el bloque entero se estire sin
  deformar las fotos, que se recortan. */
.umv-mosaic__grid {
  display: grid;
  grid-template-columns: minmax(0, 640fr) minmax(0, 304fr) minmax(0, 304fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--umv-mosaic-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  aspect-ratio: 1280 / 440;
}

.umv-mosaic__item {
  position: relative;
  overflow: hidden;
  background: var(--umv-lilac-150);
}

.umv-mosaic__item--lead {
  grid-row: span 2;
}

/* Con menos de cuatro fotos no se deja medio mosaico en hueco: se reparte el
  sitio entre las que hay. Las dos columnas de la derecha se juntan en una
  -624 son los 304 de cada una mas el hueco de en medio-, asi que la grande
  sigue midiendo lo mismo y el bloque entero guarda su proporcion.

  Con tres, las otras dos se apilan una encima de la otra; con dos, la segunda
  ocupa esa columna de arriba abajo; con una, la grande es el mosaico. */
.umv-mosaic__grid--3,
.umv-mosaic__grid--2 {
  grid-template-columns: minmax(0, 640fr) minmax(0, 624fr);
}

.umv-mosaic__grid--2 .umv-mosaic__item:not(.umv-mosaic__item--lead) {
  grid-row: span 2;
}

.umv-mosaic__grid--1 {
  grid-template-columns: minmax(0, 1fr);
}

.umv-mosaic__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hueco a proposito mientras no llegue la foto: se ve que falta. */
.umv-mosaic__placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--umv-slate-500);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  opacity: 0.5;
}

.umv-mosaic__pending {
  margin: 1rem 0 0;
  color: var(--umv-color-muted);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* En un telefono las cinco fotos no caben en el mosaico: pasan a dos columnas
  y la grande se queda con el renglon de arriba. */
@media (max-width: 575.98px) {
  .umv-mosaic__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    aspect-ratio: auto;
  }

  .umv-mosaic__item {
    aspect-ratio: 304 / 212;
  }

  .umv-mosaic__item--lead {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 640 / 440;
  }
}

/* ============================================
  DIRECTOR MESSAGE
  ============================================ */

.umv-director {
  /* 64px entre las dos columnas y 96px de aire arriba y abajo, como el
    diseno. Las columnas van en la proporcion que el pide (420 y 716), no en
    anchos fijos: asi la franja sirve igual en una pantalla mas angosta. */
  --umv-director-gap: clamp(2rem, 4vw, 4rem);
  --umv-director-pad: clamp(3rem, 6vw, 6rem);
  --umv-director-avatar: 5rem;
  --umv-director-title-size: var(--umv-display-8-size);
  /* 46px: el renglon del titulo del diseno, que no es el de ningun tamano. */
  --umv-director-title-line: 2.875rem;
  /* 30px: el parrafo de la cita se lee mas suelto que el de las demas
    secciones, que es un texto largo y seguido. */
  --umv-director-text-line: 1.875rem;
  position: relative;
  padding-block: var(--umv-director-pad);
}

/* La franja crema se sale a los bordes de la ventana, porque el panel donde
  vive esto tiene su margen y el diseno pide que el color llegue de lado a
  lado. Lo que se salga lo recorta el `overflow-x` de la seccion. */
.umv-director::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--umv-sand-25);
}

.umv-director__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 420fr) minmax(0, 716fr);
  gap: var(--umv-director-gap);
  align-items: start;
}

.umv-director__eyebrow {
  margin: 0 0 0.875rem;
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--umv-slate-500);
}

.umv-director__title {
  margin: 0 0 2rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-director-title-size);
  line-height: var(--umv-director-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-director__person {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

/* Sin retrato se queda el monigote gris, que ya trae su propio circulo. */
.umv-director__avatar {
  flex: none;
  width: var(--umv-director-avatar);
  height: var(--umv-director-avatar);
  overflow: hidden;
  border-radius: 50%;
}

.umv-director__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.umv-director__who {
  min-width: 0;
}

.umv-director__name {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-4-size);
  /* 26px: el nombre va mas suelto que el renglon de 18px de la pagina. */
  line-height: 1.625rem;
  font-weight: var(--umv-weight-bold);
}

.umv-director__role {
  margin: 0.25rem 0 0;
  color: var(--umv-navy-525);
  font-size: var(--umv-display-2-size);
  line-height: var(--umv-display-2-line);
}

/* El enlace y su tarjeta: el `relative` es lo que hace que la tarjeta se
  cuelgue justo debajo del enlace y no de la pagina entera. */
.umv-director__contact-wrap {
  position: relative;
  margin-top: 0.5rem;
}

.umv-director__contact {
  padding: 0;
  border: 0;
  background: none;
  color: var(--umv-color-highlight);
  font-size: var(--umv-display-2-size);
  line-height: var(--umv-display-2-line);
  font-weight: var(--umv-weight-semibold);
  text-decoration: underline;
  cursor: pointer;
}

/* La tarjeta flota sobre lo que hay debajo: asi abrirla y cerrarla no mueve de
  sitio el resto de la pagina. */
.umv-director__card {
  position: absolute;
  z-index: 3;
  top: calc(100% + 0.75rem);
  left: 0;
  /* 520px del diseno, y lo que quepa cuando la pantalla sea mas angosta. */
  width: min(32.5rem, calc(100vw - 2rem));
}

.umv-director__panel {
  padding: 2.5rem;
  background: var(--umv-color-surface);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 25%);
}

.umv-director__card-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.umv-director__card-eyebrow {
  margin: 0 0 0.375rem;
  color: var(--umv-navy-525);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.umv-director__card-title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-6-size);
  line-height: var(--umv-display-6-line);
  font-weight: var(--umv-weight-bold);
}

.umv-director__close {
  display: flex;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--umv-lilac-150);
  border-radius: 50%;
  background: none;
  color: var(--umv-color-brand-dark);
  cursor: pointer;
}

.umv-director__card-person {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.75rem;
}

.umv-director__card-avatar {
  flex: none;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border-radius: 50%;
}

.umv-director__card-name {
  margin: 0;
  color: var(--umv-color-brand-dark);
  /* 17px: el nombre dentro de la tarjeta, un punto menor que fuera. */
  font-size: 1.0625rem;
  line-height: var(--umv-display-4-line);
  font-weight: var(--umv-weight-bold);
}

.umv-director__card-role {
  margin: 0.125rem 0 0;
  color: var(--umv-navy-525);
  font-size: var(--umv-display-2-size);
  line-height: var(--umv-display-2-line);
}

.umv-director__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada dato entre dos lineas: la de arriba solo la lleva el primero, que la de
  los demas es la de abajo del anterior. */
.umv-director__row {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-block: 1rem;
  border-bottom: 1px solid var(--umv-lilac-150);
}

.umv-director__row:first-child {
  border-top: 1px solid var(--umv-lilac-150);
}

.umv-director__icon {
  display: flex;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--umv-sky-100);
  color: var(--umv-color-highlight);
}

/* El dibujo ya viene con su circulo, asi que aqui solo se le da el tamano. */
.umv-director__icon--image {
  background: none;
}

.umv-director__icon-mark {
  width: 100%;
  height: 100%;
}

.umv-director__data {
  min-width: 0;
}

.umv-director__label {
  margin: 0;
  color: var(--umv-navy-525);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
}

.umv-director__value {
  display: block;
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
  font-weight: var(--umv-weight-semibold);
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.umv-director__value:hover {
  text-decoration: underline;
}

.umv-director__quote {
  margin: 0;
}

/* Las comillas del diseno, que son el caracter y no un dibujo: van grandes y
  pegadas al texto que abren. */
.umv-director__mark {
  display: block;
  color: var(--umv-color-highlight);
  font-size: var(--umv-display-11-size);
  line-height: var(--umv-display-11-line);
  font-weight: var(--umv-weight-extrabold);
}

.umv-director__text {
  margin: 0.5rem 0 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-4-size);
  line-height: var(--umv-director-text-line);
}

/* El boton cierra la columna de la cita, debajo del texto. */
.umv-director__actions {
  margin-top: 1.75rem;
}

/* Sobre la franja crema el boton va blanco, que transparente se perderia. */
.umv-director .umv-button--outline {
  --umv-button-bg: var(--umv-color-surface);
}

@media (max-width: 767.98px) {
  .umv-director__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* La tarjeta se queda pegada al borde del contenido: colgada del enlace se
    saldria de la pantalla. */
  .umv-director__card {
    left: 50%;
    transform: translateX(-50%);
  }

  .umv-director__panel {
    padding: 1.5rem;
  }
}

/* ============================================
  PROGRAM CURRICULUM
  ============================================ */

.umv-plan {
  /* La proporcion del diseno: 840 del plan por 384 de la tarjeta del PDF, con
    40px entre las dos. Van en proporcion y no con el ancho escrito, que
    plantadas en 1264px dejaban un hueco a la derecha en una pantalla grande y
    la tarjeta se veia chica al lado del plan. */
  --umv-plan-main: 840fr;
  --umv-plan-aside: 384fr;
  --umv-plan-gap: 2.5rem;
  /* El texto de entrada lleva tope aparte: a linea completa cuesta leerlo. */
  --umv-plan-text-width: 40rem;
  /* 46px: el renglon del titulo del diseno, que no es el de ningun tamano. */
  --umv-plan-title-size: var(--umv-display-8-size);
  --umv-plan-title-line: 2.875rem;
  /* El circulo del numero del semestre, tal y como lo entrego la disenadora:
    32px de dorado con el numero en azul marino. El mismo dorado marca las
    materias. */
  --umv-plan-mark-size: 2rem;
  --umv-plan-mark-bg: var(--umv-gold-450);
  /* Lo que el renglon del semestre se separa del borde, y lo que respira por
    arriba y por abajo. El fondo del abierto llega hasta ese borde. */
  --umv-plan-term-gutter: 1.25rem;
  --umv-plan-term-pad: 1.375rem;
  /* Donde empiezan las materias: pasado el circulo del numero, alineadas con
    el nombre del semestre. */
  --umv-plan-subject-indent: 4.25rem;
  /* Las dos columnas crecen y encogen juntas, guardando su proporcion. */
  display: grid;
  grid-template-columns: minmax(0, var(--umv-plan-main)) minmax(0, var(--umv-plan-aside));
  gap: var(--umv-plan-gap);
  align-items: start;
}

/* La tarjeta del PDF: la misma caja blanca con su linea y su sombra del
  diseno, con el dibujo del archivo arriba. */
.umv-plan__aside {
  padding: 2rem;
  border: 1px solid var(--umv-lilac-150);
  background: var(--umv-color-surface);
  box-shadow: 0 0.5rem 1.5rem rgb(26 23 51 / 8%);
}

.umv-plan__file-icon {
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--umv-sky-100);
  color: var(--umv-color-highlight);
  font-size: var(--umv-display-5-size);
}

.umv-plan__file-title {
  margin: 0 0 0.5rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
  font-weight: var(--umv-weight-bold);
}

.umv-plan__file-text {
  margin: 0 0 1.5rem;
  color: var(--umv-navy-525);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* El boton llena la tarjeta y va un punto mas bajo que los de la pagina, como
  en el diseno. */
.umv-plan__download {
  --umv-button-padding-block: 0.75rem;
  --umv-button-padding-inline: 1.25rem;
  gap: 0.5rem;
}

.umv-plan__intro {
  margin-bottom: 2rem;
}

/* El nombre de la seccion, igual que el de las demas aperturas. */
.umv-plan__eyebrow {
  margin: 0 0 0.875rem;
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--umv-slate-500);
}

.umv-plan__title {
  margin: 0 0 1rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-plan-title-size);
  line-height: var(--umv-plan-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-plan__lead {
  max-width: var(--umv-plan-text-width);
  margin: 0;
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-large-size);
  /* 26px: la entrada se lee mas suelta que el resto de los parrafos. */
  line-height: 1.625rem;
}

/* Las cifras del plan a un lado y el enlace que los abre todos al otro. La
  linea de abajo es la que abre la lista de semestres, asi que no lleva hueco
  debajo. En pantalla chica el enlace se va al renglon siguiente. */
.umv-plan__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--umv-lilac-150);
}

.umv-plan__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La cifra y la palabra en el mismo renglon y apoyadas en la misma linea, como
  en el diseno: "8 semestres" se lee de corrido. */
.umv-plan__stat {
  /* 36/44 del diseno, que no esta en la escala de titulares. */
  --umv-stat-value-size: var(--umv-display-8-size);
  --umv-stat-value-line: 2.75rem;
  flex-direction: row;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--umv-color-brand-dark);
}

.umv-plan__stat .umv-stat__label {
  color: var(--umv-navy-525);
  font-size: var(--umv-display-2-size);
  /* 28px: lo que deja la palabra apoyada en la cifra. */
  line-height: 1.75rem;
  font-weight: var(--umv-weight-regular);
}

/* El enlace que abre y cierra todos los semestres de una vez. Nace escondido
  y lo ensena /js/landing-plan-terms.js. */
.umv-plan__toggle-all {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--umv-color-highlight);
  font-size: var(--umv-display-2-size);
  line-height: var(--umv-display-2-line);
  font-weight: var(--umv-weight-semibold);
  cursor: pointer;
}

.umv-plan__toggle-all-icon {
  font-size: var(--umv-paragraph-small-size);
  transition: transform 0.2s ease;
}

/* Con todos abiertos la flecha mira hacia arriba, que es lo que hara el
  enlace al pulsarlo. */
.umv-plan__toggle-all--open .umv-plan__toggle-all-icon {
  transform: rotate(180deg);
}

/* Bootstrap lleva y cierra los semestres, pero su acordeon viene con tarjetas,
  bordes y sombras. Aqui se le quita todo eso y se deja la linea de separacion,
  que es como va en el diseno. */
.umv-plan__term {
  border: 0;
  border-bottom: 1px solid var(--umv-lilac-150);
  background: transparent;
}

/* El semestre abierto se pinta sobre el crema de las secciones claras. El
  fondo va en el semestre entero -nombre y materias- y por eso se pide aqui y
  no en el boton: asi es un solo cuadro y no dos pegados. */
.umv-plan__term:has(.umv-plan__toggle:not(.collapsed)) {
  background: var(--umv-sand-25);
}

.umv-plan__heading {
  margin: 0;
}

.umv-plan__toggle {
  gap: 1rem;
  padding: var(--umv-plan-term-pad) var(--umv-plan-term-gutter);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-4-size);
  /* 26px: el nombre del semestre va mas suelto que el renglon de 18px. */
  line-height: 1.625rem;
  font-weight: var(--umv-weight-semibold);
}

.umv-plan__toggle:not(.collapsed) {
  background: transparent;
  box-shadow: none;
  color: var(--umv-color-brand-dark);
}

.umv-plan__toggle:focus {
  box-shadow: none;
}

/* El numero del semestre, en su circulo. */
.umv-plan__number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--umv-plan-mark-size);
  height: var(--umv-plan-mark-size);
  border-radius: 50%;
  background: var(--umv-plan-mark-bg);
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-2-size);
  /* Uno: lo que centra el numero en el circulo es la caja flex, no el
    interlineado. */
  line-height: 1;
  font-weight: var(--umv-weight-bold);
}

/* Cuantas materias trae el semestre, pegado al otro extremo del renglon. No
  encoge: lo que cede sitio es el nombre, que puede partirse en dos renglones
  sin perder nada. */
.umv-plan__count {
  flex: none;
  margin-left: auto;
  color: var(--umv-navy-525);
  font-size: var(--umv-display-2-size);
  line-height: var(--umv-display-2-line);
  font-weight: var(--umv-weight-regular);
  white-space: nowrap;
}

/* El signo de abrir y cerrar. Se escribe desde el CSS, no en el HTML: es parte
  del dibujo del boton, no algo que haya que leer en voz alta. Bootstrap pone
  ahi su propia flecha, asi que primero se quita. */
.umv-plan__toggle::after {
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  background-image: none;
  color: var(--umv-color-highlight);
  content: '\2212';
  font-size: 1.25rem;
  line-height: 1;
  transform: none;
}

.umv-plan__toggle.collapsed::after {
  content: '\002B';
}

/* Con el semestre abierto Bootstrap vuelve a poner su flecha y le da media
  vuelta, con una regla mas fuerte que la de arriba, y acaban dibujadas las
  dos cosas. Se le repite el peso para quitarsela. */
.umv-plan__toggle:not(.collapsed)::after {
  background-image: none;
  transform: none;
}

/* El nombre es lo que cede sitio cuando el renglon se queda corto: sin esto
  una caja flex no deja encoger a sus hijos y la cuenta se saldria. */
.umv-plan__name {
  min-width: 0;
}

.umv-plan__body {
  padding: 0.25rem var(--umv-plan-term-gutter) 1.75rem var(--umv-plan-subject-indent);
}

/* Las materias, cada una con su punto dorado. El punto se dibuja aqui y no con
  la vineta de la lista porque el diseno lo pide de 8px, y el tamano de una
  vineta no se puede pedir. */
.umv-plan__subjects {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-medium-line);
}

.umv-plan__subject {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.umv-plan__subject::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  /* Medio renglon: deja el punto a la altura de la primera linea del texto. */
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--umv-plan-mark-bg);
}

/* Por debajo de esto las dos columnas se quedan tan estrechas que el nombre
  del semestre empieza a partirse: la tarjeta se va debajo del plan. */
@media (max-width: 991.98px) {
  .umv-plan {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-plan__aside {
    max-width: 24rem;
  }
}

@media (max-width: 575.98px) {
  .umv-plan {
    --umv-plan-term-gutter: 0.75rem;
    --umv-plan-subject-indent: 3rem;
  }
}

.umv-plan__empty,
.umv-plan__pending {
  margin: 0;
  color: var(--umv-color-muted);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-plan__pending {
  padding: clamp(2rem, 4vw, 3rem) 1rem;
  border: 1px dashed var(--umv-color-border);
  border-radius: 0.25rem;
  text-align: center;
}

/* En el telefono las dos cifras se reparten el ancho y el boton se va al
  renglon de abajo, a lo ancho: encogido se le cortaria el texto. */
@media (max-width: 575.98px) {
  .umv-plan__meta {
    align-items: stretch;
  }

  .umv-plan__stats {
    width: 100%;
  }

  .umv-plan__stat {
    flex: 1;
  }
}

/* ============================================
  CTA SPLIT
  ============================================ */

.umv-cta-split {
  --umv-cta-split-width: 100%;
  --umv-cta-split-gutter: 5%;
  /* Medidas del diseno: 254px de alto, 48px a los lados de cada mitad y 32px
    entre la frase y su boton. */
  --umv-cta-split-height: 15.875rem;
  --umv-cta-split-pad: 3rem;
  --umv-cta-split-gap: 2rem;
  /* El tope del texto es lo que parte la frase en dos renglones donde la parte
    el diseno, en vez de dejarla llegar al borde de su mitad. */
  --umv-cta-split-text: 26rem;
  --umv-cta-split-title-size: var(--umv-display-7-size);
  --umv-cta-split-title-line: var(--umv-display-7-line);
  padding: 0 var(--umv-cta-split-gutter) clamp(2.5rem, 5vw, 4rem);
}

/* Las dos mitades se reparten el ancho a partes iguales, sean dos o tres. */
.umv-cta-split__inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  max-width: var(--umv-cta-split-width);
  margin: 0 auto;
}

.umv-cta-split__panel {
  display: flex;
  flex-direction: column;
  gap: var(--umv-cta-split-gap);
  align-items: flex-start;
  justify-content: center;
  min-height: var(--umv-cta-split-height);
  padding: var(--umv-cta-split-gap) var(--umv-cta-split-pad);
}

.umv-cta-split__panel--light {
  background: var(--umv-sand-50);
}

.umv-cta-split__panel--primary {
  background: var(--umv-color-highlight);
}

.umv-cta-split__title {
  max-width: var(--umv-cta-split-text);
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-family: var(--umv-font-ui);
  font-size: var(--umv-cta-split-title-size);
  line-height: var(--umv-cta-split-title-line);
  font-weight: var(--umv-weight-extrabold);
}

/* El trozo del medio de la frase. Sobre el crema va en cian y sobre el cian en
  blanco: es el mismo recurso, cambiando al color que se ve en cada fondo. */
.umv-cta-split__panel--light .umv-cta-split__highlight {
  color: var(--umv-color-highlight);
}

.umv-cta-split__panel--primary .umv-cta-split__highlight {
  color: var(--umv-color-on-dark);
}

/* Boton de contorno sobre fondo blanco, no transparente: sobre el cian de la
  mitad derecha un boton transparente se perderia. */
.umv-cta-split__action {
  --umv-button-bg: var(--umv-color-surface);
  --umv-button-color: var(--umv-color-highlight);
  --umv-button-border: var(--umv-color-highlight);
  --umv-button-hover-bg: var(--umv-color-highlight);
  --umv-button-hover-color: var(--umv-color-on-dark);
  --umv-button-padding-block: 0.9375rem;
  --umv-button-shadow: none;
}

/* Una debajo de otra: dos frases de este tamano no caben al lado. */
@media (max-width: 767.98px) {
  .umv-cta-split {
    --umv-cta-split-height: auto;
    --umv-cta-split-pad: 1.75rem;
  }

  .umv-cta-split__inner {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  .umv-cta-split__panel {
    padding-block: clamp(2rem, 8vw, 3rem);
  }
}

/* ============================================
  COMMUNITY FEED
  ============================================ */

.umv-community {
  /* Cuantas tarjetas se ven a la vez. Con el medio de mas la siguiente asoma
    por el borde, que es lo que avisa de que la fila sigue. */
  --umv-community-visible: 3.5;
  --umv-community-gap: 1.5rem;
  /* 28/38 del diseno, que no es el de ningun tamano de la escala. */
  --umv-community-title-size: 1.75rem;
  --umv-community-title-line: 2.375rem;
  /* 80px arriba y 96px abajo, como el diseno. */
  --umv-community-pad-top: clamp(2.5rem, 5vw, 5rem);
  --umv-community-pad-bottom: clamp(3rem, 6vw, 6rem);
  position: relative;
  padding-top: var(--umv-community-pad-top);
  padding-bottom: var(--umv-community-pad-bottom);
}

/* La franja crema se sale a los bordes de la ventana, porque el panel donde
  vive esto tiene su margen y el diseno pide que el color llegue de lado a
  lado. Lo que se salga lo recorta el `overflow-x` de la seccion. */
.umv-community::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--umv-sand-25);
}

/* Todo lo demas va por encima del fondo que acaba de ponerse. */
.umv-community > * {
  position: relative;
}

/* El enlace a la cuenta se alinea por abajo con el texto de la izquierda, no
  por arriba: asi queda a la altura del ultimo renglon, como en el diseno. */
.umv-community__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
}

/* El texto de la izquierda se para antes del enlace a la cuenta: 764px del
  diseno. */
.umv-community__intro {
  max-width: 47.75rem;
}

/* El nombre de la seccion, igual que el de las demas aperturas. */
.umv-community__eyebrow {
  margin: 0 0 0.625rem;
  color: var(--umv-slate-500);
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-community__title {
  margin: 0 0 0.625rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-community-title-size);
  line-height: var(--umv-community-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-community__line {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  /* 24px: el parrafo de entrada se lee mas suelto que el renglon de 14px. */
  line-height: 1.5rem;
}

/* El nombre de la cuenta con el simbolo de Instagram delante. Es un enlace y
  no un boton porque lleva fuera del sitio. El subrayado va siempre puesto, no
  solo al pasar por encima: es lo que lo distingue del texto de al lado. */
.umv-community__account {
  --umv-community-account-size: 1.25rem;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--umv-color-highlight);
  /* La raya la pone el nombre, no el enlace entero: en el diseno llega hasta
    donde acaba el texto y no pasa por debajo del simbolo. */
  text-decoration: none;
}

.umv-community__account:hover,
.umv-community__account:focus-visible {
  color: var(--umv-cyan-500);
}

.umv-community__account-mark {
  font-size: var(--umv-community-account-size);
  line-height: 1;
}

.umv-community__account-name {
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-large-line);
  font-weight: var(--umv-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Debajo de la fila y pegadas a la derecha, como en el diseno. */
.umv-community__controls {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* Rellenas, no sueltas: la palida para la que no lleva a ningun lado y la cian
  para la que si. De cual es cual se encarga el carrusel, que pone `is-primary`
  en la que todavia puede hacer algo. */
.umv-community__arrow {
  --umv-icon-button-size: 2.5rem;
  --umv-icon-button-color: var(--umv-slate-500);
  --umv-icon-button-hover: var(--umv-slate-500);
  border-radius: 0;
  background: var(--umv-color-surface);
}

.umv-community__arrow.is-primary {
  --umv-icon-button-color: var(--umv-color-on-dark);
  --umv-icon-button-hover: var(--umv-color-on-dark);
  background: var(--umv-color-highlight);
}

.umv-community__arrow:not([disabled]):hover,
.umv-community__arrow:not([disabled]):focus-visible {
  background: var(--umv-cyan-500);
  color: var(--umv-color-on-dark);
}

/* La que ya no lleva a ningun lado se apaga, pero sigue ahi: si desapareciera,
  la de al lado daria un salto. */
.umv-community__arrow[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* Una sola fila, recorrida de lado. Todas las tarjetas miden igual de alto
  aunque sus pies tengan distinto largo, que es lo que hace la rejilla. */
.umv-community__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--umv-community-visible) - 1) * var(--umv-community-gap)) / var(--umv-community-visible)
  );
  gap: var(--umv-community-gap);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.umv-community__list::-webkit-scrollbar {
  display: none;
}

/* ============================================
  SHARE LINKS
  ============================================ */

/* Los tres botones de compartir, con su rotulo delante. */
.umv-share {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}

.umv-share__label {
  color: var(--umv-navy-525);
  font-size: var(--umv-display-2-size);
  line-height: var(--umv-display-2-line);
}

/* Redondos, blancos y con su linea, como en el diseno. */
.umv-share__button {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--umv-lilac-150);
  border-radius: 50%;
  background: var(--umv-color-surface);
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-large-size);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

/* 18px del diseno. Los dibujos traen su color dentro. */
.umv-share__icon {
  width: 1.125rem;
  height: 1.125rem;
}

.umv-share__button:hover,
.umv-share__button:focus-visible {
  background: var(--umv-sky-100);
  color: var(--umv-color-highlight);
}

/* La palomita espera apagada y sale al copiar, en lugar del dibujo. */
.umv-share__done {
  display: none;
}

.umv-share__button.is-done {
  border-color: var(--umv-color-highlight);
  background: var(--umv-sky-100);
  color: var(--umv-color-highlight);
}

.umv-share__button.is-done .umv-share__icon {
  display: none;
}

.umv-share__button.is-done .umv-share__done {
  display: block;
}

/* ============================================
  SOCIAL CARD
  ============================================ */

.umv-social-card {
  /* Medidas del diseno: 352px de ancho, 20px de hueco por dentro y la foto
    cuadrada con lo que queda. */
  --umv-social-card-avatar: 1.875rem;
  --umv-social-card-mark: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
  padding: 1.5rem 1.25rem;
  border-radius: 1rem;
  background: var(--umv-color-surface);
}

.umv-social-card__head {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.umv-social-card__who {
  display: flex;
  min-width: 0;
  gap: 0.375rem;
  align-items: center;
}

.umv-social-card__avatar {
  flex: none;
  width: var(--umv-social-card-avatar);
  height: var(--umv-social-card-avatar);
  border-radius: 50%;
  object-fit: cover;
  background: var(--umv-color-brand-dark);
}

.umv-social-card__account {
  overflow: hidden;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cuando se publico. Hoy llega vacio -no hay publicaciones de verdad de las
  que sacarlo- y entonces no ocupa nada. */
.umv-social-card__date {
  flex: none;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-medium-line);
}

.umv-social-card__link {
  display: block;
  overflow: hidden;
  border-radius: 0.625rem;
}

.umv-social-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--umv-color-bg-alt);
}

/* El pie se queda abajo del todo aunque la foto de al lado sea mas corta: las
  tarjetas miden igual y los pies tienen que quedar a la misma altura. */
.umv-social-card__foot {
  display: flex;
  gap: 0.375rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
}

/* Tres renglones como mucho, y el resto se corta con puntos suspensivos: el
  texto que escribe quien publica puede ser larguisimo y descuadrar la fila. */
.umv-social-card__caption {
  display: -webkit-box;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
}

/* El simbolo de Instagram, con sus colores: son los de la marca, no los de la
  paleta del sitio, y por eso llegan de una variable aparte. */
.umv-social-card__mark {
  flex: none;
  background: var(--umv-instagram-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: var(--umv-social-card-mark);
  line-height: 1;
  -webkit-text-fill-color: transparent;
}

.umv-program-body__block {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* El hueco de arriba separa una seccion de la de antes, asi que a la primera
  de la pestana le sobra: debajo de la fila de pestanas no hay nada de lo que
  separarse. Se nota en las fichas que no ensenan todas las secciones -los
  diplomados abren "Vida universitaria" directamente con el muro-, donde ese
  hueco queda en blanco contra la fila. */
.umv-program-body__panel > .umv-program-body__block:first-child {
  margin-top: 0;
}

/* Las secciones que tambien viven sueltas en una pagina traen su propio hueco
  a los lados y arriba. Dentro de una pestana eso ya lo pone el panel, asi que
  se lo quitamos: de otro modo el texto entra el doble y la seccion se separa
  el doble de la de antes. */
.umv-program-body .umv-voice-show {
  --umv-voice-show-gutter: 0;
  --umv-voice-show-space: 0;
}

@media (max-width: 991.98px) {
  .umv-community {
    --umv-community-visible: 2.2;
  }
}

@media (max-width: 767.98px) {
  .umv-community {
    --umv-community-visible: 1.15;
  }

}

/* ============================================
  BAND HERO
  ============================================ */

/* La apertura de las paginas que no abren con foto: una franja azul marino de
  lado a lado, el dibujo de la marca detras y el texto encima, a la izquierda.
  Las medidas son las del diseno sobre 1440px. */
.umv-band-hero {
  --umv-band-hero-bg: var(--umv-color-bg-dark);
  --umv-band-hero-color: var(--umv-color-on-dark);
  /* El lila de los textos de apoyo sobre azul marino: el antetitulo y la
    entrada, que no compiten con el titular. */
  --umv-band-hero-soft: var(--umv-lilac-200);
  /* 80px de los 1440px del diseno, sin bajar de 1.5rem en un telefono. */
  --umv-band-hero-gutter: clamp(1.5rem, 5.56vw, 5rem);
  --umv-band-hero-space: 3.5rem;            /* 56px */
  --umv-band-hero-gap: 1rem;                /* 16px */
  --umv-band-hero-title-size: clamp(2rem, 3.6vw, 3.25rem); /* 52px */
  --umv-band-hero-title-line: 1.16;         /* 60px sobre 52px */
  --umv-band-hero-title-width: 47.5rem;     /* 760px */
  --umv-band-hero-text-size: 1.125rem;      /* 18px */
  --umv-band-hero-text-line: 1.8125rem;     /* 29px */
  --umv-band-hero-text-width: 40rem;        /* 640px */
  position: relative;
  display: block;
  /* Encierra al dibujo del fondo: se queda detras del texto de esta franja y
    no se mete debajo de lo que venga despues. */
  isolation: isolate;
  background: var(--umv-band-hero-bg);
  color: var(--umv-band-hero-color);
}

/* A la derecha y al alto de la franja, como viene del diseno. Lo que no quepa
  se sale por la derecha: el dibujo esta pensado para asomar, no para verse
  entero. */
.umv-band-hero__watermark {
  position: absolute;
  inset-block: 0;
  right: 0;
  z-index: -1;
  width: auto;
  height: 100%;
  /* Es decoracion: no se deja tocar ni arrastrar. */
  pointer-events: none;
}

.umv-band-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--umv-band-hero-gap);
  padding-block: var(--umv-band-hero-space);
  padding-inline: var(--umv-band-hero-gutter);
}

/* El nombre de la seccion, igual que el de las demas aperturas. */
.umv-band-hero__eyebrow {
  margin: 0;
  color: var(--umv-band-hero-soft);
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-band-hero__title {
  max-width: var(--umv-band-hero-title-width);
  margin: 0;
  color: var(--umv-band-hero-color);
  font-size: var(--umv-band-hero-title-size);
  line-height: var(--umv-band-hero-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-band-hero__text {
  max-width: var(--umv-band-hero-text-width);
  margin: 0;
  color: var(--umv-band-hero-soft);
  font-size: var(--umv-band-hero-text-size);
  line-height: var(--umv-band-hero-text-line);
}

@media (max-width: 767.98px) {
  .umv-band-hero {
    --umv-band-hero-space: 2.5rem;
    --umv-band-hero-text-size: 1rem;
    --umv-band-hero-text-line: 1.625rem;
  }
}

/* ============================================
  NEWS BOARD
  ============================================ */

/* El tablero de la pagina de noticias: la fila de categorias con el buscador
  y, debajo, la rejilla de publicaciones. Las medidas son las del diseno sobre
  1440px. */
.umv-news {
  /* El mismo margen lateral que la apertura de la pagina: las dos franjas son
    de la misma vista y arrancan en la misma linea. */
  --umv-news-gutter: clamp(1.5rem, 5.56vw, 5rem); /* 80px */
  --umv-news-bar-space: 2.5rem;       /* 40px */
  --umv-news-bar-gap: 1.25rem;        /* 20px */
  --umv-news-row-gap: 2rem;           /* 32px */
  --umv-news-chip-gap: 0.625rem;      /* 10px */
  --umv-news-grid-space: 2rem;        /* 32px */
  --umv-news-foot-space: clamp(2rem, 4vw, 3rem);  /* 48px */
  --umv-news-end-space: clamp(3rem, 7vw, 5rem);   /* 80px */
  --umv-news-gap: 1.5rem;             /* 24px */
  --umv-news-columns: 3;
  --umv-news-search-width: 21.25rem;  /* 340px */
  padding-bottom: var(--umv-news-end-space);
  background: var(--umv-color-bg-soft);
  color: var(--umv-color-brand-dark);
}

.umv-news__bar {
  display: flex;
  flex-direction: column;
  gap: var(--umv-news-bar-gap);
  padding: var(--umv-news-bar-space) var(--umv-news-gutter) 0;
}

/* Las categorias a la izquierda y el campo a la derecha; cuando no caben las
  dos cosas, el campo baja y ocupa el ancho entero. */
.umv-news__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem var(--umv-news-row-gap);
  align-items: center;
}

.umv-news__chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--umv-news-chip-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-news__chip {
  padding: 0.625rem 1.125rem; /* 10px 18px */
  border: 1px solid var(--umv-lilac-150);
  border-radius: 999px;
  background: var(--umv-color-surface);
  color: var(--umv-color-brand-dark);
  font-family: var(--umv-font-base);
  font-size: var(--umv-display-2-size);
  line-height: var(--umv-display-2-line);
  font-weight: var(--umv-weight-medium);
  cursor: pointer;
}

.umv-news__chip:hover,
.umv-news__chip:focus-visible {
  border-color: var(--umv-color-brand-dark);
}

/* La categoria que se esta viendo: el relleno oscuro del diseno. */
.umv-news__chip.is-active {
  border-color: var(--umv-color-brand-dark);
  background: var(--umv-color-brand-dark);
  color: var(--umv-color-on-dark);
  font-weight: var(--umv-weight-semibold);
}

/* Una sola pastilla con el campo dentro y el simbolo pegado a la derecha, la
  misma del filtro del catalogo de programas: en el diseno son el mismo
  componente. */
.umv-news__search {
  display: flex;
  flex: 0 1 var(--umv-news-search-width);
  gap: 0.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0.5rem 1.125rem;
  border-radius: 0.5rem;
  background: var(--umv-sky-50);
}

/* La etiqueta existe para los lectores de pantalla; a la vista basta el texto
  de dentro del campo. */
.umv-news__search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sin caja propia: la caja es la pastilla. */
.umv-news__search-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--umv-color-brand-dark);
  font-family: var(--umv-font-base);
  font-size: var(--umv-paragraph-default-size);
}

.umv-news__search-input::placeholder {
  color: var(--umv-slate-500);
  opacity: 1;
}

/* El foco se marca en la pastilla entera, que es lo que se ve como campo. */
.umv-news__search-input:focus {
  outline: none;
}

.umv-news__search:focus-within {
  outline: 2px solid var(--umv-color-highlight);
  outline-offset: 2px;
}

/* Adorno, no boton: la rejilla se acota segun se escribe, asi que no hay nada
  que pulsar. */
.umv-news__search-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.0625rem;  /* 33px */
  height: 2.0625rem;
  border-radius: 0.25rem;
  background: var(--umv-color-highlight);
  color: var(--umv-color-on-dark);
  font-size: 0.75rem;
}

/* El recuento, separado por la linea que cruza la franja entera. */
.umv-news__meta {
  padding-top: 1rem;
  border-top: 1px solid var(--umv-lilac-150);
}

.umv-news__count {
  margin: 0;
  color: var(--umv-navy-550);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* El aire de abajo lo pone la seccion, que es la que sabe si debajo viene el
  pie o se acaba ahi. */
.umv-news__board {
  padding: var(--umv-news-grid-space) var(--umv-news-gutter) 0;
}

.umv-news__grid {
  display: grid;
  grid-template-columns: repeat(var(--umv-news-columns), minmax(0, 1fr));
  gap: var(--umv-news-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-news__empty {
  margin: 2rem 0 0;
  color: var(--umv-slate-500);
}

/* Cuantas se llevan vistas y el boton que trae las siguientes, centrados
  debajo de la rejilla. */
.umv-news__foot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  padding: var(--umv-news-foot-space) var(--umv-news-gutter) 0;
}

/* Nace oculto y lo ensena el JavaScript: sin esto la fila ganaria al atributo
  y se veria igual. */
.umv-news__foot[hidden] {
  display: none;
}

.umv-news__seen {
  margin: 0;
  color: var(--umv-navy-550);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* El boton de contorno de siempre, con el relleno y el tamano que pide el
  diseno aqui. */
.umv-news__more {
  --umv-button-padding-inline: 1.75rem; /* 28px */
  --umv-button-size: 0.9375rem;         /* 15px */
}

/* Una publicacion: la foto arriba, con el simbolo de su red encima, y el
  cuerpo debajo. Las tarjetas de una fila miden lo mismo porque la rejilla las
  estira; lo que sobra queda debajo del enlace, como en el diseno. */
.umv-news-card {
  --umv-news-card-bg: var(--umv-sand-75);
  --umv-news-card-radius: 1rem;        /* 16px */
  /* La foto del diseno: 411 de ancho por 405 de alto. En proporcion y no en
    pixeles, para que siga siendo esa foto cuando la columna se encoge. */
  --umv-news-card-media: 411 / 405;
  --umv-news-card-badge: 2.25rem;      /* 36px */
  --umv-news-card-inset: 1rem;         /* 16px */
  --umv-news-card-pad: 1.5rem;         /* 24px */
  --umv-news-card-pad-top: 1.25rem;    /* 20px */
  --umv-news-card-gap: 0.75rem;        /* 12px */
  --umv-news-card-text-size: 0.9375rem; /* 15px */
  --umv-news-card-text-line: 1.5rem;   /* 24px */
  --umv-news-card-date-size: 0.8125rem; /* 13px */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--umv-news-card-radius);
  background: var(--umv-news-card-bg);
}

.umv-news-card__media {
  position: relative;
  aspect-ratio: var(--umv-news-card-media);
  overflow: hidden;
}

/* Con la publicacion dentro, el hueco de arriba deja de tener la forma de la
  foto: lo alto lo manda el marco, para que todas las tarjetas de una fila
  midan lo mismo. */
.umv-news-card__media--embed {
  aspect-ratio: auto;
  height: var(--umv-news-card-embed, 32rem);
  background: var(--umv-color-bg-alt);
}

.umv-news-card__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.umv-news-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El simbolo de la red y la etiqueta de video, a la misma altura: uno a cada
  orilla de la foto. No se dejan tocar: debajo esta el enlace. */
.umv-news-card__badges {
  position: absolute;
  inset: var(--umv-news-card-inset) var(--umv-news-card-inset) auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.umv-news-card__network {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--umv-news-card-badge);
  height: var(--umv-news-card-badge);
  border-radius: 50%;
  background: var(--umv-color-brand-dark);
  color: var(--umv-color-on-dark);
  font-size: 1.375rem; /* 22px */
}

.umv-news-card__flag {
  flex: none;
  margin-left: auto;
  padding: 0.375rem 0.75rem; /* 6px 12px */
  border-radius: 999px;
  background: var(--umv-color-brand-dark);
  color: var(--umv-color-on-dark);
  font-size: var(--umv-display-1-size);
  line-height: var(--umv-display-1-line);
  font-weight: var(--umv-weight-semibold);
}

.umv-news-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--umv-news-card-gap);
  padding: var(--umv-news-card-pad-top) var(--umv-news-card-pad) var(--umv-news-card-pad);
}

.umv-news-card__head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

/* La categoria en blanco sobre la crema de la tarjeta, como en el diseno. */
.umv-news-card__tag {
  margin: 0;
  padding: 0.25rem 0.625rem; /* 4px 10px */
  border-radius: 999px;
  background: var(--umv-color-surface);
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-1-size);
  line-height: var(--umv-display-1-line);
  font-weight: var(--umv-weight-semibold);
}

.umv-news-card__date {
  flex: none;
  color: var(--umv-slate-500);
  font-size: var(--umv-news-card-date-size);
}

/* El titular de una noticia escrita en el panel. Las publicaciones de una red
  no lo traen, asi que la tarjeta solo lo pinta cuando existe. */
.umv-news-card__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-3-size);
  line-height: var(--umv-display-3-line);
  font-weight: var(--umv-weight-semibold);
}

.umv-news-card__text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-news-card-text-size);
  line-height: var(--umv-news-card-text-line);
}

/* El pie de la tarjeta. Es un enlace cuando lleva a una red y un boton cuando
  abre la ventana, y los dos se ven igual: sin el relieve ni el fondo gris que
  el navegador le pone a un boton por su cuenta. */
.umv-news-card__link {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--umv-color-highlight);
  /* Un boton no hereda la tipografia de la pagina; hay que dársela. */
  font-family: var(--umv-font-base);
  font-size: var(--umv-display-2-size);
  line-height: var(--umv-display-2-line);
  font-weight: var(--umv-weight-semibold);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.umv-news-card__link:hover,
.umv-news-card__link:focus-visible {
  color: var(--umv-cyan-500);
  text-decoration: underline;
}

/* La flecha, un punto por debajo del texto y centrada con el: a su tamano
  natural queda gorda al lado de una linea de 14px. Es la misma proporcion que
  usan las flechas de los botones del sitio. */
.umv-news-card__link .bi {
  flex: none;
  font-size: 0.875em;
  line-height: 1;
  /* Al pasar el raton la flecha avanza, como en el resto del sitio. */
  transition: transform 0.15s ease;
}

.umv-news-card__link:hover .bi,
.umv-news-card__link:focus-visible .bi {
  transform: translateX(0.125rem);
}

@media (prefers-reduced-motion: reduce) {
  .umv-news-card__link .bi {
    transition: none;
  }

  .umv-news-card__link:hover .bi,
  .umv-news-card__link:focus-visible .bi {
    transform: none;
  }
}

@media (max-width: 991.98px) {
  .umv-news {
    --umv-news-columns: 2;
  }
}

@media (max-width: 767.98px) {
  /* El campo ya no cabe al lado de las categorias: baja entero debajo. */
  .umv-news__search {
    flex-basis: 100%;
  }
}

@media (max-width: 575.98px) {
  .umv-news {
    --umv-news-columns: 1;
  }
}

/* La ventana donde se lee una noticia de la propia pagina. Se presenta como
  una publicacion de red social -quien publica arriba, el texto y la foto
  debajo-, que es como se lee esto en todas partes. Los colores y la sombra son
  los de las demas ventanas del sitio (.umv-modal). */
.umv-post {
  /* 640px: el ancho de una publicacion. Es suyo y no el de las demas ventanas
    (--umv-modal-width) para que no dependa de cual de las dos reglas gane. */
  --umv-post-width: 40rem;
  --umv-post-pad: 1.25rem;           /* 20px */
  --umv-post-gap: 0.75rem;           /* 12px */
  --umv-post-avatar: 2.5rem;         /* 40px */
}

.umv-post__dialog {
  max-width: var(--umv-post-width);
}

.umv-post__panel {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--umv-modal-radius);
  background: var(--umv-color-surface);
  box-shadow: var(--umv-modal-shadow);
}

/* Quien publica: el simbolo, el nombre y, debajo, la fecha con su categoria.
  El hueco de la derecha es para que el nombre no pase por debajo del boton de
  cerrar. */
.umv-post__head {
  display: flex;
  gap: var(--umv-post-gap);
  align-items: center;
  padding: var(--umv-post-pad) 4rem var(--umv-post-pad) var(--umv-post-pad);
  border-bottom: 1px solid var(--umv-modal-line);
}

.umv-post__avatar {
  flex: none;
  width: var(--umv-post-avatar);
  height: var(--umv-post-avatar);
  object-fit: contain;
  border-radius: 50%;
  background: var(--umv-color-bg-dark);
  padding: 0.375rem;
}

.umv-post__who {
  min-width: 0;
}

.umv-post__name {
  margin: 0;
  color: var(--umv-modal-ink);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-semibold);
}

.umv-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  color: var(--umv-modal-muted);
  font-size: var(--umv-display-1-size);
  line-height: var(--umv-display-1-line);
}

.umv-post__body {
  padding: var(--umv-post-pad);
}

.umv-post__article {
  display: flex;
  flex-direction: column;
  gap: var(--umv-post-gap);
}

.umv-post__title {
  margin: 0;
  color: var(--umv-modal-ink);
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
  font-weight: var(--umv-weight-bold);
}

.umv-post__lead {
  margin: 0;
  color: var(--umv-modal-ink);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
}

/* El cuerpo de la noticia, que llega con el formato que se le puso en el
  panel: parrafos, titulos, listas, citas y enlaces. Lo de aqui es para que
  todo eso se lea igual que el resto del sitio. */
.umv-post__text {
  color: var(--umv-color-text);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
}

.umv-post__text > *:first-child {
  margin-top: 0;
}

.umv-post__text > *:last-child {
  margin-bottom: 0;
}

.umv-post__text p,
.umv-post__text ul,
.umv-post__text ol,
.umv-post__text blockquote {
  margin: 0 0 0.75rem;
}

.umv-post__text h2,
.umv-post__text h3 {
  margin: 1.25rem 0 0.5rem;
  color: var(--umv-modal-ink);
  font-size: var(--umv-display-4-size);
  line-height: var(--umv-display-4-line);
  font-weight: var(--umv-weight-semibold);
}

/* La plantilla del proyecto les quita los puntos a todas las listas; aqui son
  los de una lista de verdad, que es lo que se escribio en el panel. */
.umv-post__text ul,
.umv-post__text ol {
  padding-left: 1.25rem;
  list-style: revert;
}

.umv-post__text li {
  list-style: inherit;
}

.umv-post__text blockquote {
  padding-left: 1rem;
  border-left: 3px solid var(--umv-modal-line);
  color: var(--umv-modal-muted);
}

.umv-post__text a {
  color: var(--umv-color-highlight);
}

/* La foto, de orilla a orilla de la ventana como en una publicacion. */
.umv-post__media {
  margin: 0.25rem calc(var(--umv-post-pad) * -1) 0;
}

.umv-post__image {
  display: block;
  width: 100%;
  height: auto;
}

.umv-post__author {
  margin: 0;
  color: var(--umv-modal-muted);
  font-size: var(--umv-display-1-size);
  line-height: var(--umv-display-1-line);
}

.umv-post__link {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  align-self: flex-start;
  color: var(--umv-color-highlight);
  font-size: var(--umv-display-2-size);
  line-height: var(--umv-display-2-line);
  font-weight: var(--umv-weight-semibold);
  text-decoration: none;
}

.umv-post__link:hover,
.umv-post__link:focus-visible {
  color: var(--umv-cyan-500);
  text-decoration: underline;
}

/* Mientras llega la noticia y cuando no llega. */
.umv-post__note {
  margin: 0 0 var(--umv-post-gap);
  color: var(--umv-modal-muted);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-post__note--error {
  color: var(--umv-color-danger);
}

/* ============================================
  PAGE HERO
  ============================================ */

.umv-page-hero {
  /* El mismo margen lateral que el resto de la pagina, para que la tarjeta
    arranque donde arranca el contenido de abajo. */
  --umv-page-hero-gutter: 5%;
  /* Medidas del diseno: la tarjeta y, dentro, el ancho al que se parte el
    texto. */
  --umv-page-hero-card: 33.8rem;      /* 541px */
  --umv-page-hero-text: 27.875rem;    /* 446px */
  /* 64px y 48px del diseno. La tarjeta tiene ancho fijo, asi que el relleno
    tambien: lo que se encoge es la version de pantalla chica, mas abajo. */
  --umv-page-hero-pad-block: 4rem;
  --umv-page-hero-pad-inline: 3rem;
  /* El aire entre la tarjeta y las orillas de la foto cuando es la tarjeta la
    que manda lo alto: es el mismo que deja el diseno a 1440, donde la foto es
    56px mas alta que la tarjeta. */
  --umv-page-hero-space: 1.75rem;
  position: relative;
  /* La foto y la tarjeta comparten una sola celda: se ven una encima de la
    otra y, a la vez, lo alto de la franja es el de la mas alta de las dos. */
  display: grid;
}

/* La tarjeta va encima de la foto, no al lado. */
.umv-page-hero__band,
.umv-page-hero__inner {
  grid-area: 1 / 1;
}

/* La foto llena la celda, asi que crece con la tarjeta cuando esta pide mas
  alto del que trae la franja -un titular largo, dos renglones de botones- en
  vez de dejar que se desborde por abajo. Nunca mide menos de lo que manda el
  diseno. */
.umv-page-hero__band {
  display: flex;
  flex-direction: column;
}

.umv-page-hero__band .umv-media-band__image {
  flex: 1 1 var(--umv-media-band-image);
  height: var(--umv-media-band-image);
}

.umv-page-hero__inner {
  display: flex;
  align-items: center;
  padding: var(--umv-page-hero-space) var(--umv-page-hero-gutter);
}

.umv-page-hero--end .umv-page-hero__inner {
  justify-content: flex-end;
}

.umv-page-hero__card {
  width: min(100%, var(--umv-page-hero-card));
  padding: var(--umv-page-hero-pad-block) var(--umv-page-hero-pad-inline);
  /* Blanco que deja ver la foto detras, como en el diseno. */
  background: var(--umv-color-surface-veil);
  color: var(--umv-color-brand-dark);
}

.umv-page-hero__breadcrumb {
  margin-bottom: 0.75rem;
}

/* El segundo renglon del titular: el nombre que lleva el centro. */
.umv-page-hero__subtitle {
  max-width: var(--umv-page-hero-text);
  margin: -0.5rem 0 1rem;
  color: var(--umv-navy-500);
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
  font-weight: var(--umv-weight-semibold);
}

.umv-page-hero__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

.umv-page-hero__title {
  max-width: var(--umv-page-hero-text);
  margin: 0 0 1rem;
  /* El atomo trae el color de los titulares; aqui manda el de la tarjeta. */
  color: inherit;
}

.umv-page-hero__text {
  max-width: var(--umv-page-hero-text);
  margin: 0;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-page-hero__actions {
  margin-top: 1.5rem;
}

/* La apertura del centro de idiomas. La tarjeta es mas ancha que la de las
  demas aperturas y trae las medidas del diseno del centro: 700 de ancho,
  56/40 de relleno y el aire de dentro en pasos de 40 y 32. */
.umv-page-hero--language {
  --umv-page-hero-card: 43.75rem;   /* 700px */
  --umv-page-hero-text: 36.75rem;   /* 588px */
  --umv-page-hero-pad-block: 2.5rem;
  --umv-page-hero-pad-inline: 3.5rem;
}

/* La ruta, del color del titular y no en gris: en esta tarjeta el diseno la
  pone a la par del resto del texto. */
.umv-page-hero--language .umv-page-hero__breadcrumb {
  margin-bottom: 2.5rem;
  color: var(--umv-color-brand-dark);
  letter-spacing: 0.06em;
}

.umv-page-hero--language .umv-page-hero__title {
  margin-bottom: 2rem;
  font-size: 2.75rem;
  line-height: 3.125rem;
  font-weight: var(--umv-weight-extrabold);
}

.umv-page-hero--language .umv-page-hero__text {
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
}

.umv-page-hero--language .umv-page-hero__actions {
  --umv-button-group-gap: 0.75rem;
  margin-top: 2rem;
}

/* Los dos botones del centro: mas bajos que los de siempre y con la esquina
  redondeada que pide el diseno. */
.umv-page-hero--language .umv-button {
  --umv-button-radius: 0.25rem;
  --umv-button-padding-block: 0.75rem;
  --umv-button-padding-inline: 1.375rem;
  --umv-button-line: 1.25rem;
  --umv-button-shadow: none;
  gap: 0.5rem;
}

/* El de las sesiones va sobre blanco y no sobre la foto: asi se lee igual de
  bien que el otro. */
.umv-page-hero--language .umv-button--outline {
  --umv-button-bg: var(--umv-color-surface);
  --umv-button-border: var(--umv-cyan-500);
  --umv-button-color: var(--umv-cyan-500);
}

/* El nombre del centro al tamano del diseno deja una palabra por renglon en un
  telefono: baja un paso, como hace el resto del sitio. */
@media (max-width: 767.98px) {
  .umv-page-hero--language .umv-page-hero__title {
    font-size: var(--umv-display-8-size);
    line-height: var(--umv-display-8-line);
  }
}

/* La apertura del CUFRI: la tarjeta es mas ancha que la de las demas y trae
  sus propias medidas, las del diseno del centro. */
.umv-page-hero--cufri {
  --umv-page-hero-card: 43.75rem;   /* 700px */
  --umv-page-hero-text: 36.75rem;   /* 588px */
}

.umv-page-hero--cufri .umv-page-hero__card {
  /* Arriba y abajo no miden lo mismo, asi que van aqui y no en la medida
    comun de las aperturas. */
  padding: 2.25rem 3.5rem 2.5rem;
  background: rgba(255, 255, 255, 0.9);
}

/* La ruta: mas chica que en las demas aperturas, y el escalon donde uno esta
  -el centro- en el color del titular, para que se distinga de los de antes. */
.umv-page-hero--cufri .umv-page-hero__breadcrumb {
  margin-bottom: 1.125rem;
  color: var(--umv-navy-500);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
}

.umv-page-hero--cufri .umv-breadcrumb__current[aria-current='page'] {
  color: var(--umv-color-brand-dark);
  font-weight: var(--umv-weight-semibold);
}

.umv-page-hero--cufri .umv-page-hero__title {
  margin-bottom: 0.5rem;
  font-size: var(--umv-display-8-size);
  line-height: 2.875rem;
  font-weight: var(--umv-weight-bold);
}

.umv-page-hero--cufri .umv-page-hero__subtitle {
  margin: 0 0 1rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-4-size);
  line-height: 1.625rem;
}

.umv-page-hero--cufri .umv-page-hero__text {
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.625rem;
}

.umv-page-hero--cufri .umv-page-hero__actions {
  margin-top: 1.5rem;
}

/* Los dos botones del centro: mas bajos que los de siempre y con su simbolo
  separado del texto, como en el diseno. */
.umv-page-hero--cufri .umv-button {
  --umv-button-padding-block: 0.625rem;
  --umv-button-padding-inline: 1.25rem;
  --umv-button-line: 1.25rem;
  gap: 0.5rem;
}

/* El del telefono va sobre blanco y no sobre la foto: asi el numero se lee
  igual de bien que el otro boton. */
.umv-page-hero--cufri .umv-button--outline {
  --umv-button-bg: var(--umv-color-surface);
}

.umv-page-hero--cufri .umv-button__icon {
  font-size: 1.125rem;
}

/* En un telefono el nombre del centro al tamano del diseno deja una palabra
  por renglon: baja un paso, como hace el resto del sitio. */
@media (max-width: 767.98px) {
  .umv-page-hero--cufri .umv-page-hero__title {
    font-size: var(--umv-display-7-size);
    line-height: var(--umv-display-7-line);
  }

  .umv-page-hero--cufri .umv-page-hero__card {
    padding: 2rem 1.5rem;
  }
}

/* Debajo de este ancho la tarjeta ya tapa la foto entera, asi que se baja y la
  franja se ve completa. */
@media (max-width: 991.98px) {
  .umv-page-hero {
    display: block;
  }

  .umv-page-hero__inner {
    padding: 0;
  }

  .umv-page-hero__card {
    width: 100%;
    --umv-page-hero-pad-block: 2rem;
    --umv-page-hero-pad-inline: 1.5rem;
  }
}

/* ============================================
  ACCESS STRIP
  ============================================ */

/* La franja de accesos: dos atajos repartidos a lo ancho, separados por una
  raya, y otra raya que cierra la franja por abajo. Las medidas son las del
  diseno: 20 de aire arriba y abajo, el dibujo en un circulo de 44 y 32 de
  separacion entre la raya y el segundo atajo. */
.umv-access {
  --umv-access-gutter: 5%;
  --umv-access-line: var(--umv-lilac-150);
  --umv-access-space: 1.25rem;
  --umv-access-mark: 2.75rem;
  background: var(--umv-color-surface);
  border-bottom: 1px solid var(--umv-access-line);
}

.umv-access__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 var(--umv-access-gutter);
  list-style: none;
}

/* Los atajos se reparten el ancho por igual; si no caben, el que sobre pasa
  al renglon de abajo con el mismo trato. */
.umv-access__item {
  flex: 1 1 20rem;
  min-width: 0;
}

.umv-access__item + .umv-access__item {
  border-left: 1px solid var(--umv-access-line);
}

/* El renglon entero es el enlace: se puede pulsar en cualquier parte, no solo
  en el titulo. */
.umv-access__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  padding: var(--umv-access-space) 1.5rem var(--umv-access-space) 0;
  color: var(--umv-color-brand-dark);
  text-decoration: none;
}

.umv-access__item + .umv-access__item .umv-access__link {
  padding-left: 2rem;
}

.umv-access__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--umv-access-mark);
  height: var(--umv-access-mark);
  margin-right: 0.875rem;
  border-radius: 50%;
  background: var(--umv-sky-100);
  color: var(--umv-color-highlight);
  font-size: 1.375rem;
}

.umv-access__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.umv-access__title {
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
  font-weight: var(--umv-weight-semibold);
}

.umv-access__text {
  color: var(--umv-navy-525);
  font-size: 0.8125rem;
  line-height: 1.1875rem;
}

.umv-access__chevron {
  flex: none;
  color: var(--umv-color-highlight);
  font-size: 1.125rem;
}

.umv-access__link:hover .umv-access__title,
.umv-access__link:focus-visible .umv-access__title {
  color: var(--umv-color-highlight);
}

/* Apilados, la raya que los separa deja de ir al lado y pasa a ir arriba. */
@media (max-width: 767.98px) {
  .umv-access__item {
    flex: 1 1 100%;
  }

  .umv-access__item + .umv-access__item {
    border-left: 0;
    border-top: 1px solid var(--umv-access-line);
  }

  .umv-access__link,
  .umv-access__item + .umv-access__item .umv-access__link {
    padding-right: 0;
    padding-left: 0;
  }
}

/* ============================================
  INFO STRIP
  ============================================ */

/* La franja de datos del centro: a que hora abre y donde esta, y al final el
  enlace al mapa. Las medidas son las del diseno: 110px de alto y 56px entre
  un dato y el siguiente. */
.umv-facts {
  --umv-facts-gutter: 5%;
  --umv-facts-gap: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem var(--umv-facts-gap);
  /* 110px de alto en el diseno, con 33px de aire arriba y abajo. */
  min-height: 6.875rem;
  padding: 2.0625rem var(--umv-facts-gutter);
  background: var(--umv-gray-150);
}

.umv-facts__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem var(--umv-facts-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-facts__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.umv-facts__icon {
  flex: none;
  color: var(--umv-color-highlight);
  font-size: 1.375rem;
}

.umv-facts__body {
  display: flex;
  flex-direction: column;
}

.umv-facts__label {
  color: var(--umv-navy-500);
  font-size: var(--umv-paragraph-small-size);
  line-height: 1rem;
}

.umv-facts__value {
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.25rem;
  font-weight: var(--umv-weight-semibold);
}

.umv-facts__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--umv-color-highlight);
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.25rem;
  font-weight: var(--umv-weight-semibold);
  text-decoration: underline;
}

.umv-facts__link:hover,
.umv-facts__link:focus-visible {
  color: var(--umv-cyan-500);
}

.umv-facts__chevron {
  font-size: 1rem;
}

/* En un telefono los dos datos no caben uno al lado del otro. */
@media (max-width: 767.98px) {
  .umv-facts {
    --umv-facts-gap: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .umv-facts__list {
    flex-direction: column;
  }
}

/* ============================================
  VENN PANEL
  ============================================ */

/* Lo que hace el centro a un lado y el dibujo de sus tres labores al otro.
  Las medidas son las del diseno: 80px de aire, 80px entre las dos columnas y
  38/44 el encabezado. */
.umv-venn-panel {
  --umv-venn-panel-space: clamp(3rem, 5.6vw, 5rem);
  --umv-venn-panel-gutter: 5%;
  --umv-venn-panel-gap: 5rem;
  --umv-venn-panel-title-size: 2.375rem;
  --umv-venn-panel-title-line: 2.75rem;
  padding: var(--umv-venn-panel-space) var(--umv-venn-panel-gutter);
  background: var(--umv-color-surface);
}

.umv-venn-panel__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--umv-venn-panel-gap);
}

.umv-venn-panel__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* El antetitulo: el mismo de las demas secciones, en la medida que pide este
  diseno. El color sale del azul de la marca rebajado, que es ese gris. */
.umv-venn-panel__eyebrow {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-venn-panel__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-venn-panel-title-size);
  line-height: var(--umv-venn-panel-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-venn-panel__text {
  margin: 0;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.6875rem;
}

/* El dibujo: tres circulos que se cruzan, sus nombres encima y el centro en
  medio. Se mide en tanto por ciento de su propia caja, asi que encoge entero
  cuando la pantalla no da para los 629px del diseno. */
.umv-venn {
  --umv-venn-ring: 46.1%;
  position: relative;
  flex: none;
  width: min(100%, 39.3125rem);
  aspect-ratio: 629 / 550;
  overflow: hidden;
  background: linear-gradient(0deg, var(--umv-sand-50) 0%, var(--umv-color-surface) 100%);
  /* Los textos de dentro se miden contra esta caja y no contra la pantalla:
    asi el dibujo se encoge de una pieza. */
  container-type: inline-size;
}

.umv-venn__ring {
  position: absolute;
  top: 10.5%;
  width: var(--umv-venn-ring);
  aspect-ratio: 1;
  border-radius: 50%;
}

.umv-venn__ring--1 {
  left: 13.5%;
  background: rgba(11, 155, 227, 0.1);
}

.umv-venn__ring--2 {
  left: 40.5%;
  background: rgba(247, 168, 58, 0.16);
}

.umv-venn__ring--3 {
  top: 36.9%;
  left: 27%;
  background: rgba(28, 25, 54, 0.06);
}

/* Cada nombre va en el hueco libre de su circulo, no en su centro: ahi es
  donde el diseno los pone para que no se pisen con los cruces. */
.umv-venn__label {
  position: absolute;
  width: 24%;
  transform: translateX(-50%);
  text-align: center;
}

.umv-venn__label--1 {
  top: 28.7%;
  left: 25.3%;
}

.umv-venn__label--2 {
  top: 28.7%;
  left: 72%;
}

.umv-venn__label--3 {
  top: 68.2%;
  left: 49.3%;
}

.umv-venn__name {
  margin: 0 0 0.25rem;
  color: var(--umv-color-brand-dark);
  font-size: 1.125rem;
  font-size: clamp(0.875rem, 2.9cqw, 1.125rem);
  line-height: 1.3;
  font-weight: var(--umv-weight-bold);
}

.umv-venn__note {
  margin: 0;
  color: var(--umv-navy-500);
  font-size: 0.875rem;
  font-size: clamp(0.75rem, 2.3cqw, 0.875rem);
  line-height: 1.4;
}

/* El centro, donde se cruzan las tres. */
.umv-venn__badge {
  position: absolute;
  top: 37.3%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16.5%;
  aspect-ratio: 1;
  margin: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--umv-color-brand-dark);
  color: var(--umv-color-on-dark);
  font-size: 1.25rem;
  font-size: clamp(0.875rem, 3.2cqw, 1.25rem);
  font-weight: var(--umv-weight-extrabold);
}

/* El dibujo no cabe al lado de un texto que se lea: pasa debajo. */
@media (max-width: 991.98px) {
  .umv-venn-panel__inner {
    flex-direction: column;
    gap: 2.5rem;
  }

  .umv-venn {
    align-self: center;
  }
}

@media (max-width: 767.98px) {
  .umv-venn-panel {
    --umv-venn-panel-title-size: var(--umv-display-7-size);
    --umv-venn-panel-title-line: var(--umv-display-7-line);
  }
}

/* ============================================
  STEP LIST
  ============================================ */

.umv-steps {
  --umv-steps-width: 100%;
  --umv-steps-gutter: 5%;
  /* 20px del diseno: en el son dos bordes blancos de 10px entre tarjeta y
    tarjeta, que aqui es el hueco de la rejilla. */
  --umv-steps-gap: 1.25rem;
  /* Los cuatro pasos del proceso, en una sola fila: asi se lee de un vistazo
    que son cuatro y en que orden van. Mas abajo se reparten cuando dejan de
    caber. */
  --umv-steps-columns: 4;
  --umv-steps-title-size: var(--umv-display-8-size);
  --umv-steps-title-line: var(--umv-display-7-line);
  max-width: var(--umv-steps-width);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--umv-steps-gutter);
}

.umv-steps__intro {
  margin-bottom: 2.25rem;
}

.umv-steps__title {
  margin: 0 0 0.75rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-steps-title-size);
  line-height: var(--umv-steps-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-steps__lead {
  max-width: 48rem;
  margin: 0;
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* Lo que se destaca dentro de la entrada. El peso se dice aqui y no se deja al
  navegador, que lo elige segun la fuente y no tiene por que ser el del resto
  de las negritas del sitio. */
.umv-steps__lead-strong {
  font-weight: var(--umv-weight-bold);
}

.umv-steps__list {
  display: grid;
  grid-template-columns: repeat(var(--umv-steps-columns), minmax(0, 1fr));
  gap: var(--umv-steps-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================
  STEP CARD
  ============================================ */

/* La celda de la rejilla: la tarjeta y, debajo, el boton del paso cuando lo
  lleva. Sin boton no se nota que esta aqui. */
.umv-step-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 20px del diseno entre la tarjeta y su boton. */
  gap: 1.25rem;
}

.umv-step {
  /* Medidas del diseno: tarjeta de 350px, insignia de 60px a 35px del borde de
    arriba y pegada al de la izquierda, y el titulo a 84px (60 + 24 de hueco). */
  --umv-step-bg: var(--umv-sand-50);
  --umv-step-number-bg: var(--umv-gold-450);
  --umv-step-number-size: 3.75rem;
  --umv-step-number-top: 2.1875rem;
  --umv-step-gap: 1.5rem;
  --umv-step-height: 21.875rem;
  --umv-step-pad-end: 1.5rem;
  /* Con las cuatro tarjetas en fila cada una es mas estrecha que en el
    diseno de tres, asi que el titulo baja un escalon para seguir cabiendo en
    dos renglones. Cuando se reparten en dos columnas vuelve a su tamano. */
  --umv-step-title-size: var(--umv-display-4-size);
  --umv-step-title-line: var(--umv-display-4-line);
  position: relative;
  display: flex;
  flex-direction: column;
  /* Alto fijo, no minimo: con alto automatico la tarjeta suma el tamano
    natural de la foto y se pasa de largo. */
  height: var(--umv-step-height);
  overflow: hidden;
  background: var(--umv-step-bg);
}

/* La insignia va pegada al borde izquierdo, fuera del margen del texto; por eso
  el encabezado la coloca aparte y el cuerpo se separa con el hueco. */
.umv-step__head {
  /* Por encima de la foto: la foto ocupa la tarjeta entera y algunas asoman
    hasta arriba. */
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--umv-step-gap);
  align-items: flex-start;
  padding: var(--umv-step-number-top) var(--umv-step-pad-end) 0 0;
}

.umv-step__number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--umv-step-number-size);
  height: var(--umv-step-number-size);
  /* Redondeada solo del lado derecho: nace pegada al borde de la tarjeta. */
  border-radius: 0 2.5rem 2.5rem 0;
  background: var(--umv-step-number-bg);
  /* El numero va en el crema de la tarjeta, no en blanco. */
  color: var(--umv-sand-50);
  font-size: var(--umv-display-6-size);
  line-height: var(--umv-display-6-line);
  font-weight: var(--umv-weight-extrabold);
}

.umv-step__body {
  min-width: 0;
}

.umv-step__title {
  /* El diseno lo baja un poco respecto a la insignia. */
  margin: 0 0 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-step-title-size);
  line-height: var(--umv-step-title-line);
  font-weight: var(--umv-weight-extrabold);
  width: 90%;
}

/* El boton de debajo: pegado al borde izquierdo de su tarjeta, no estirado,
  para que se lea como lo que es, un apunte de ese paso. */
.umv-step__action {
  align-self: flex-start;
}

.umv-step__text {
  margin: 0.75rem 0 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* La foto cierra la tarjeta por abajo y se pega a sus bordes. Ocupa lo que
  sobre, asi que todas las tarjetas acaban a la misma altura aunque sus titulos
  ocupen renglones distintos. */
/* La caja de la foto cubre la tarjeta entera, no solo lo que sobra debajo del
  titulo. Asi cada foto se coloca contra la tarjeta, que es el marco con el que
  vienen medidas del diseno, y puede asomar igual por arriba que por abajo. */
.umv-step__media {
  position: absolute;
  inset: 0;
}

/* Las imagenes del diseno son ilustraciones con fondo transparente, no fotos
  de recorte: se ven enteras (`contain`) y apoyadas en el borde de abajo de la
  tarjeta. Con `cover` se llenaria el ancho pero se recortaria la ilustracion
  por arriba (la ficha de registro pierde mas de un tercio). */
/* Anclada a la esquina de abajo a la derecha. Se coloca en absoluto para poder
  asomar por fuera de la tarjeta, que es como va en el diseno; lo que sobresale
  lo recorta el `overflow` de la caja de arriba. Cada foto ajusta estas tres
  variables desde la vista, porque el diseno coloca cada una por su cuenta. */
.umv-step__image {
  /* Se mide por el ALTO de la tarjeta, no por el ancho: el alto es fijo y el
    ancho cambia con la columna, asi que midiendola por el ancho la foto se
    estiraba en las tarjetas anchas. El ancho sale solo de su proporcion. */
  --umv-step-image-height: 100%;
  --umv-step-image-right: 0;
  --umv-step-image-bottom: 0;
  position: absolute;
  right: var(--umv-step-image-right);
  bottom: var(--umv-step-image-bottom);
  display: block;
  width: auto;
  height: var(--umv-step-image-height);
  max-width: none;
}

.umv-step__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: auto;
  border: 2px solid var(--umv-color-border);
  border-radius: 0.4rem;
  color: var(--umv-color-border);
  font-size: 1.4rem;
}

.umv-step__media .umv-step__placeholder {
  height: 100%;
  width: 100%;
  border: 0;
}

/* Por debajo de esto las cuatro columnas dejan al titulo en un hilo de texto,
  asi que se parten en dos filas de dos antes que seguir estrechandose. */
@media (max-width: 1199.98px) {
  .umv-steps {
    --umv-steps-columns: 2;
  }

  /* En dos columnas la tarjeta es ancha otra vez y el titulo recupera su
    tamano. */
  .umv-step {
    --umv-step-title-size: var(--umv-display-5-size);
    --umv-step-title-line: var(--umv-display-5-line);
  }
}

@media (max-width: 575.98px) {
  .umv-steps {
    --umv-steps-columns: 1;
  }

  /* A una columna el titulo puede ocupar mas renglones; aqui la tarjeta crece
    en vez de recortarlo. */
  .umv-step {
    height: auto;
    min-height: var(--umv-step-height);
  }
}

/* ============================================
  ADMISSIONS
  ============================================ */

.umv-admissions {
  --umv-admissions-width: 100%;
  --umv-admissions-gutter: 5%;
  background: var(--umv-color-bg);
}

.umv-admissions__inner {
  max-width: var(--umv-admissions-width);
  margin: 0 auto;
  padding-inline: var(--umv-admissions-gutter);
}

/* La fila nace para fondo oscuro; aqui va sobre blanco, asi que solo cambian
  los colores que el propio componente deja sueltos. La linea de abajo cruza
  toda la pagina, por eso vive aqui y no en la fila. */
/* Lo que va debajo de los pasos: cada bloque trae su propio hueco por abajo y
  el ultimo cierra la pestana con uno mas grande. */
.umv-admissions__block {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.umv-admissions__block:last-child {
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* ============================================
  CHECK LIST
  ============================================ */

.umv-checklist {
  --umv-checklist-width: 100%;
  --umv-checklist-gutter: 5%;
  --umv-checklist-gap: 0.75rem;
  --umv-checklist-icon: var(--umv-color-highlight);
  --umv-checklist-icon-size: 1rem;
  --umv-checklist-title-size: var(--umv-display-4-size);
  --umv-checklist-title-line: var(--umv-display-4-line);
  max-width: var(--umv-checklist-width);
  margin-inline: auto;
  padding: 0 var(--umv-checklist-gutter);
}

.umv-checklist__title {
  margin: 0 0 1rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-checklist-title-size);
  line-height: var(--umv-checklist-title-line);
  font-weight: var(--umv-weight-extrabold);
}

.umv-checklist__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-checklist__item {
  display: flex;
  align-items: start;
  gap: var(--umv-checklist-gap);
  padding-block: 0.3125rem;
}

/* La palomita no crece ni se encoge con el renglon: los textos largos que dan
  la vuelta siguen alineados con el primero. */
.umv-checklist__icon {
  flex: none;
  color: var(--umv-checklist-icon);
  font-size: var(--umv-checklist-icon-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-bold);
}
.umv-checklist__icon::before {
  font-weight: 800 !important;
}

.umv-checklist__text {
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-default-line);
}

/* ============================================
  DATA TABLE
  ============================================ */

.umv-table {
  --umv-table-width: 100%;
  --umv-table-gutter: 5%;
  /* La tabla no se estira hasta el borde: en el diseno ocupa poco mas de la
    mitad del ancho y deja el resto en blanco. Va en proporcion, no en pixeles,
    para que esa mitad siga siendo una mitad en cualquier pantalla. */
  --umv-table-grid-width: 64%;
  --umv-table-head-bg: var(--umv-color-bg-dark);
  --umv-table-head-color: var(--umv-color-on-dark);
  --umv-table-border: var(--umv-color-divider);
  --umv-table-pad-x: 1.0625rem;
  --umv-table-pad-y: 0.8125rem;
  --umv-table-watermark-width: 35%;
  --umv-table-watermark-opacity: 0.35;
  --umv-table-title-size: var(--umv-display-4-size);
  --umv-table-title-line: var(--umv-display-4-line);
  max-width: var(--umv-table-width);
  margin-inline: auto;
  padding: 0 var(--umv-table-gutter);
}

.umv-table__title {
  margin: 0 0 1rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-table-title-size);
  line-height: var(--umv-table-title-line);
  font-weight: var(--umv-weight-extrabold);
}

/* El marco recorta la marca de agua: la parte que se sale del encabezado no
  se ve. */
.umv-table__frame {
  position: relative;
  max-width: var(--umv-table-grid-width);
  overflow: hidden;
}

.umv-table__watermark {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--umv-table-watermark-width);
  opacity: var(--umv-table-watermark-opacity);
  pointer-events: none;
}

.umv-table__grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* La marca de agua queda entre este fondo y el texto: el fondo no esta
  posicionado, la imagen si, y los titulos tambien pero vienen despues. */
.umv-table__head {
  background: var(--umv-table-head-bg);
}

.umv-table__heading {
  position: relative;
  padding: var(--umv-table-pad-y) var(--umv-table-pad-x);
  color: var(--umv-table-head-color);
  font-size: var(--umv-display-1-line);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-extrabold);
  text-align: start;
}

.umv-table__cell {
  padding: var(--umv-table-pad-y) var(--umv-table-pad-x);
  border: 1px solid var(--umv-table-border);
  color: var(--umv-color-text);
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-default-line);
}

/* Dos columnas de texto no caben en media pantalla de telefono: ahi la tabla
  se queda con todo el ancho. */
@media (max-width: 767.98px) {
  .umv-table {
    --umv-table-grid-width: 100%;
  }
}

/* ============================================
  FORM FIELD
  ============================================ */

/* Medidas del diseno: campo de 56px (18px de aire arriba y abajo mas el
  renglon), 16px a los lados, esquinas rectas y un borde apenas visible. */
.umv-field {
  --umv-field-bg: var(--umv-color-surface);
  --umv-field-color: var(--umv-color-text);
  --umv-field-label: var(--umv-color-on-dark);
  --umv-field-hint: var(--umv-white-60);
  --umv-field-border: var(--umv-gray-150);
  --umv-field-shadow: 0 1px 4px rgba(25, 33, 61, 0.08);
  --umv-field-height: 3.5rem;
  --umv-field-radius: 0;
  --umv-field-pad: 1rem;
  --umv-field-label-gap: 0.75rem;
}

.umv-field__label {
  display: block;
  margin-bottom: var(--umv-field-label-gap);
  color: var(--umv-field-label);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-field__control {
  width: 100%;
  height: var(--umv-field-height);
  padding-inline: var(--umv-field-pad);
  border: 1px solid var(--umv-field-border);
  border-radius: var(--umv-field-radius);
  background: var(--umv-field-bg);
  box-shadow: var(--umv-field-shadow);
  color: var(--umv-field-color);
  font-family: inherit;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-field__control::placeholder {
  color: var(--umv-slate-500);
}

/* La lista cerrada enseña su primera opcion, que aqui hace de texto gris; en
  cuanto se elige una carrera el color pasa al del resto de los campos. */
.umv-field__control--select:has(option[value='']:checked) {
  color: var(--umv-slate-500);
}

.umv-field__control--select option {
  color: var(--umv-field-color);
}

.umv-field__control:focus-visible {
  outline: 2px solid var(--umv-color-focus);
  outline-offset: 2px;
}

.umv-field__hint {
  margin: var(--umv-field-label-gap) 0 0;
  color: var(--umv-field-hint);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
  font-style: italic;
  font-weight: var(--umv-weight-light);
}

/* ============================================
  IMAGE CAROUSEL
  ============================================ */

.umv-gallery {
  --umv-gallery-dot-size: 0.625rem;
  --umv-gallery-dot-gap: 0.625rem;
  --umv-gallery-dot: var(--umv-white);
  --umv-gallery-dot-active: var(--umv-color-spotlight);
  --umv-gallery-dot-bottom: 2.5rem;
  /* En el diseno los puntos no van centrados en la foto: arrancan a poco mas
    de un tercio de su ancho. */
  --umv-gallery-dot-start: 39.5%;
  height: 100%;
}

.umv-gallery__inner,
.umv-gallery__item {
  height: 100%;
}

/* Se puede arrastrar con el raton (js/landing-gallery.js), y el cursor lo
  dice: la mano abierta invita, la cerrada acompana al gesto. */
.umv-gallery[data-umv-gallery] {
  cursor: grab;
}

.umv-gallery.is-dragging {
  cursor: grabbing;
}

/* Al arrastrar, el navegador marca la foto como si fuera texto seleccionado. */
.umv-gallery.is-dragging .umv-gallery__image {
  user-select: none;
}

.umv-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bootstrap pone sus puntos como rayas; aqui son circulos y se quedan en el
  centro de la foto. */
.umv-gallery__dots {
  left: var(--umv-gallery-dot-start);
  right: auto;
  bottom: var(--umv-gallery-dot-bottom);
  margin: 0;
  gap: var(--umv-gallery-dot-gap);
  justify-content: flex-start;
}

/* El nombre de la galeria delante para pasar por encima de los puntos de
  Bootstrap, que los pinta como rayas de 30x3 y gana por ser mas concreto. */
.umv-gallery .umv-gallery__dot {
  width: var(--umv-gallery-dot-size);
  height: var(--umv-gallery-dot-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--umv-gallery-dot);
  opacity: 1;
}

.umv-gallery .umv-gallery__dot.active {
  background: var(--umv-gallery-dot-active);
}

/* ============================================
  VISIT BOOKING
  ============================================ */

/* Medidas del diseno (franja de 1439 x 870): el texto arranca a 102px del
  borde y mide 519 de ancho, la foto ocupa 725 pegada a la derecha y baja 80
  desde arriba. Los anchos van en porcentaje para que la proporcion aguante
  cualquier pantalla. */
.umv-visit {
  --umv-visit-bg: var(--umv-color-bg-dark);
  --umv-visit-gutter: 7.09%;
  /* El parrafo, el horario y el formulario van en proporcion de su columna
    (519 y 528 de los 612 que mide en el diseno) para que crezcan con la
    pantalla en vez de quedarse chicos contra la izquierda. */
  --umv-visit-content: 84.8%;
  --umv-visit-note-width: 86.3%;
  /* El titular no: su letra mide siempre 36, asi que su caja tambien se queda
    fija y corta donde corta el diseno, despues de "experiencia". */
  --umv-visit-title-width: 24.75rem;
  --umv-visit-media-width: 50.38%;
  --umv-visit-media-top: 5rem;
  --umv-visit-media-bottom: 0;
  --umv-visit-media-radius: 3rem;
  --umv-visit-top: 6.25rem;
  --umv-visit-bottom: 4.5rem;
  --umv-visit-title-size: var(--umv-display-8-size);
  --umv-visit-title-line: 3rem;
  --umv-visit-dot: var(--umv-green-400);
  background: var(--umv-visit-bg);
}

/* El margen de la izquierda es una columna vacia y no un relleno: asi mide lo
  que dice el diseno respecto a la franja entera, no respecto a la mitad del
  texto, que es mas angosta. */
.umv-visit__grid {
  display: grid;
  grid-template-columns: var(--umv-visit-gutter) minmax(0, 1fr) var(--umv-visit-media-width);
  align-items: stretch;
}

.umv-visit__body {
  grid-column: 2;
  padding-block: var(--umv-visit-top) var(--umv-visit-bottom);
}

.umv-visit__media {
  grid-column: 3;
}

.umv-visit__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--umv-lilac-300);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Mas angosto que el resto para que corte donde lo corta el diseno, despues de
  "experiencia". */
.umv-visit__title {
  max-width: var(--umv-visit-title-width);
  margin: 0 0 1.5rem;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-visit-title-size);
  line-height: var(--umv-visit-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-visit__highlight {
  color: var(--umv-color-spotlight);
}

.umv-visit__text {
  max-width: var(--umv-visit-content);
  margin: 0 0 1.25rem;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-visit__note {
  display: flex;
  align-items: start;
  gap: 0.5rem;
  max-width: var(--umv-visit-note-width);
  margin: 0;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* Centrado con el primer renglon, no con el parrafo entero: cuando el horario
  da la vuelta el punto se queda arriba, que es donde empieza la frase. */
.umv-visit__dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.375rem;
  border-radius: 50%;
  background: var(--umv-visit-dot);
}

.umv-visit__form {
  max-width: var(--umv-visit-content);
  margin-top: 4.6875rem;
}

/* El aviso ocupa el sitio del formulario y lleva el borde de los campos, que
  es el material de esta mitad de la franja. */
.umv-visit__notice {
  --umv-notice-border: var(--umv-gray-150);
  max-width: var(--umv-visit-content);
  margin-top: 4.6875rem;
}

/* Cuando el aviso sale encima del formulario, el hueco grande ya lo puso el; el
  formulario solo necesita separarse de el. */
.umv-visit__notice:not([hidden]) ~ .umv-visit__form {
  margin-top: 1.5rem;
}

/* Dos columnas para poder poner email y telefono en el mismo renglon; los
  demas campos ocupan las dos. */
.umv-visit__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.umv-visit__fields > .umv-field {
  grid-column: 1 / -1;
}

.umv-visit__fields > .umv-field--half {
  grid-column: auto;
}

.umv-visit__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.umv-visit__duration {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
}

.umv-visit__clock {
  color: var(--umv-color-highlight);
  font-size: var(--umv-display-6-size);
}

/* El boton ya nace cian, recto y con la tipografia del diseno; lo unico suyo
  es el ancho minimo. */
.umv-visit__submit {
  min-width: 10.5rem;
}

/* La foto se pega a la orilla derecha y solo se redondea la esquina que da al
  texto, que es la que se ve. */
/* Va colocada, no en el flujo: si no, el alto natural de la imagen (que crece
  con el ancho de la columna) estiraba la franja entera y dejaba un hueco vacio
  debajo del boton. Asi quien manda sobre el alto es el texto y la foto se
  acomoda a lo que hay. */
.umv-visit__media {
  position: relative;
}

.umv-visit__gallery {
  position: absolute;
  /* `auto` para que manden los cuatro lados: el 100% que el carrusel trae de
    serie pisaria el de abajo y la foto se saldria de la franja. */
  inset: var(--umv-visit-media-top) 0 var(--umv-visit-media-bottom) 0;
  height: auto;
  overflow: hidden;
  border-start-start-radius: var(--umv-visit-media-radius);
}

/* Antes de llegar al movil la columna del texto se queda corta para un
  formulario: la foto cede ancho y el margen se estrecha. */
@media (max-width: 1399.98px) {
  .umv-visit {
    --umv-visit-gutter: 5%;
    --umv-visit-media-width: 44%;
  }
}

@media (max-width: 991.98px) {
  .umv-visit {
    --umv-visit-top: 2.5rem;
    --umv-visit-bottom: 2.5rem;
  }

  /* A una columna la foto pasa arriba y pierde el pico redondeado: ahi ya no
    hay texto al lado del que separarse. */
  .umv-visit__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-visit__media {
    grid-column: 1;
    order: -1;
    height: 18rem;
  }

  .umv-visit__gallery {
    inset: 0;
    border-start-start-radius: 0;
  }

  .umv-visit__body {
    grid-column: 1;
    padding-inline: var(--umv-visit-gutter);
  }

  .umv-visit__form {
    margin-top: 2.5rem;
  }

  .umv-visit__title,
  .umv-visit__text,
  .umv-visit__note,
  .umv-visit__form {
    max-width: 100%;
  }
}

/* ============================================
  NOTICE
  ============================================ */

/* Nace para fondo claro. Sobre oscuro se le cambian los colores desde donde se
  use, como hace la franja de la visita. */
.umv-notice {
  --umv-notice-bg: var(--umv-color-surface);
  --umv-notice-border: var(--umv-color-divider);
  --umv-notice-icon: var(--umv-color-highlight);
  --umv-notice-title: var(--umv-color-brand-dark);
  --umv-notice-text: var(--umv-color-text);
  --umv-notice-radius: 0;
  --umv-notice-pad: 1.125rem 1rem;
  display: flex;
  align-items: start;
  gap: 0.75rem;
  padding: var(--umv-notice-pad);
  border: 1px solid var(--umv-notice-border);
  border-radius: var(--umv-notice-radius);
  background: var(--umv-notice-bg);
  box-shadow: 0 1px 4px rgba(25, 33, 61, 0.08);
}

.umv-notice--warning {
  --umv-notice-icon: var(--umv-color-accent);
}

.umv-notice--error {
  --umv-notice-icon: var(--umv-color-danger);
}

.umv-notice__icon {
  flex: none;
  color: var(--umv-notice-icon);
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-notice__title {
  margin: 0;
  color: var(--umv-notice-title);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-bold);
}

.umv-notice__text {
  margin: 0.25rem 0 0;
  color: var(--umv-notice-text);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* ============================================
  PRICE PLANS
  ============================================ */

/* Medidas del diseno: el bloque arranca en el margen de la pagina y llega al
  80% de su ancho; dentro, la columna de pestanas mide lo que midan sus
  palabras y la tarjeta se queda con el resto. */
.umv-prices {
  --umv-prices-width: 100%;
  --umv-prices-gutter: 5%;
  --umv-prices-inner: 80.4%;
  --umv-prices-gap: 3.5rem;
  --umv-prices-space: clamp(3rem, 6vw, 5.625rem);
  --umv-prices-title-size: var(--umv-display-8-size);
  --umv-prices-title-line: var(--umv-display-7-line);
  max-width: var(--umv-prices-width);
  margin-inline: auto;
  padding: var(--umv-prices-space) var(--umv-prices-gutter);
}

.umv-prices__intro {
  margin-bottom: 2.25rem;
}

.umv-prices__title {
  margin: 0 0 0.75rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-prices-title-size);
  line-height: var(--umv-prices-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-prices__lead {
  max-width: 48rem;
  margin: 0;
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-prices__grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--umv-prices-gap);
  align-items: start;
  max-width: var(--umv-prices-inner);
}

/* Sin pestanas que poner al lado, la tarjeta se queda con la fila entera. */
.umv-prices__grid--single {
  grid-template-columns: minmax(0, 1fr);
}

/* La columna nace para fondo oscuro; aqui va sobre blanco, asi que solo
  cambian los colores que el propio componente deja sueltos. */
.umv-prices__tabs {
  --umv-tabs-color: var(--umv-color-brand-dark);
  --umv-tabs-active: var(--umv-color-highlight);
  --umv-tabs-size: var(--umv-display-1-line);
  --umv-tabs-line: var(--umv-paragraph-medium-line);
  --umv-tabs-gap: 1.25rem;
  margin: 0;
}

/* ============================================
  PRICE CARD
  ============================================ */

.umv-price {
  --umv-price-bg: var(--umv-color-surface);
  --umv-price-border: var(--umv-gray-150);
  --umv-price-head-bg: var(--umv-color-bg-dark);
  --umv-price-head-color: var(--umv-color-on-dark);
  --umv-price-pad: 1.25rem;
  --umv-price-row-gap: 2.875rem;
  --umv-price-watermark-width: 35%;
  --umv-price-watermark-opacity: 0.35;
  border: 1px solid var(--umv-price-border);
  background: var(--umv-price-bg);
}

/* Recorta la marca de agua, que se sale del encabezado. La marca queda entre
  este fondo y el texto: el fondo no esta posicionado, la imagen si, y los
  textos tambien pero vienen despues. */
.umv-price__head {
  position: relative;
  padding: var(--umv-price-pad);
  overflow: hidden;
  background: var(--umv-price-head-bg);
}

.umv-price__watermark {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--umv-price-watermark-width);
  opacity: var(--umv-price-watermark-opacity);
  pointer-events: none;
}

.umv-price__title {
  position: relative;
  margin: 0;
  color: var(--umv-price-head-color);
  font-size: var(--umv-display-4-size);
  line-height: var(--umv-display-4-line);
  font-weight: var(--umv-weight-bold);
}

.umv-price__text {
  position: relative;
  margin: 0.375rem 0 0;
  color: var(--umv-price-head-color);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-small-line);
}

.umv-price__list {
  margin: 0;
  padding: 0 var(--umv-price-pad);
  list-style: none;
}

/* Las tres columnas se miden solas y, al ser una rejilla, el ancho sale igual
  en todos los renglones: los importes quedan alineados sin fijar medidas. */
.umv-price__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  column-gap: var(--umv-price-row-gap);
  align-items: center;
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--umv-color-divider);
}

.umv-price__row:last-child {
  border-bottom: 0;
}

.umv-price__label {
  color: var(--umv-color-heading);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-semibold);
}

.umv-price__note {
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  text-align: end;
}

.umv-price__amount {
  color: var(--umv-color-heading);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  text-align: end;
}

/* A partir de aqui no caben las pestanas al lado: pasan arriba, en fila, y la
  tarjeta se queda con todo el ancho. */
@media (max-width: 767.98px) {
  .umv-prices {
    --umv-prices-inner: 100%;
    --umv-prices-gap: 1.5rem;
    --umv-price-row-gap: 1rem;
  }

  .umv-prices__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-prices__tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  /* Con poco ancho los tres datos no caben en un renglon: el concepto se queda
    arriba y debajo van el importe y como se paga. */
  .umv-price__row {
    grid-template-columns: minmax(0, 1fr) max-content;
    row-gap: 0.375rem;
  }

  .umv-price__label {
    grid-column: 1 / -1;
  }

  .umv-price__note {
    text-align: start;
  }
}

/* ============================================
  GRANT LIST
  ============================================ */

.umv-grants {
  --umv-grants-width: 100%;
  --umv-grants-gutter: 5%;
  --umv-grants-gap: 0.875rem;
  /* 353px es lo que mide en el diseno, y es el minimo. En una pantalla grande
    las tarjetas se ensanchan, asi que el alto crece con ellas para que no
    queden cuadradas. */
  --umv-grants-height: clamp(22.0625rem, 32cqw, 40rem);
  --umv-grants-space: clamp(2rem, 4vw, 3.5rem);
  --umv-grants-title-size: var(--umv-display-7-line);
  --umv-grants-title-line: var(--umv-display-7-line);
  max-width: var(--umv-grants-width);
  margin-inline: auto;
  padding: var(--umv-grants-space) var(--umv-grants-gutter) 0;
}

/* El texto ocupa su renglon y las flechas el suyo, debajo y a la derecha: no
  van al lado, que ahi el parrafo se quedaria estrecho. */
.umv-grants__head {
  margin-bottom: 1.5rem;
}

.umv-grants__eyebrow {
  margin: 0 0 0.625rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
  font-weight: var(--umv-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.umv-grants__title {
  margin: 0 0 0.75rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-grants-title-size);
  line-height: var(--umv-grants-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-grants__lead {
  max-width: 54rem;
  margin: 0;
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-small-line);
}

.umv-grants__controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

/* Cuadradas, como las del muro: la de volver en claro y la de avanzar en el
  cian de la marca. El relleno lo pone el JS con `is-primary` segun hacia donde
  quede algo por ver. */
.umv-grants__arrow {
  --umv-icon-button-size: 2.25rem;
  --umv-icon-button-color: var(--umv-color-brand-dark);
  --umv-icon-button-hover: var(--umv-color-on-dark);
  border-radius: 0;
  background: var(--umv-sky-50);
}

.umv-grants__arrow.is-primary {
  --umv-icon-button-color: var(--umv-color-on-dark);
  background: var(--umv-color-highlight);
}

.umv-grants__arrow:not([disabled]):hover,
.umv-grants__arrow:not([disabled]):focus-visible {
  background: var(--umv-color-highlight);
}

.umv-grants__arrow.is-primary:not([disabled]):hover,
.umv-grants__arrow.is-primary:not([disabled]):focus-visible {
  background: var(--umv-cyan-500);
}

.umv-grants__arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* ===== La forma de los tipos de terapia ================================ */
/* El mismo carrusel de las becas con las medidas de su diseno: el encabezado
  en el gris azulado de la pagina del centro y las flechas mas grandes. */
.umv-grants--therapy {
  --umv-grants-gap: 1rem;
  --umv-grants-space: clamp(3rem, 5.4vw, 4.875rem);
  /* 560px del diseno: con los de las becas el texto de los recursos no cabia
    y la tarjeta abierta salia con barra de recorrido. */
  --umv-grants-height: 35rem;
  padding-bottom: clamp(2.5rem, 4.2vw, 3.75rem);
}

/* Aqui el parrafo se queda corto a proposito, asi que las flechas caben a su
  lado en vez de ocupar un renglon propio. */
.umv-grants--therapy .umv-grants__head {
  position: relative;
  padding-right: 8.5rem;
}

/* Colocadas y no en la rejilla: asi se apoyan en el pie del texto sea cual sea
  lo que ocupe, sin que haga falta envolverlo. */
.umv-grants--therapy .umv-grants__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: 0;
}

/* Las tarjetas del centro: esquinas redondeadas, mas aire por dentro y la
  foto mas tapada arriba, que es donde va el nombre. */
.umv-grants--therapy .umv-grant {
  --umv-grant-pad: 2.25rem;
  --umv-grant-veil: linear-gradient(
    180deg,
    rgba(28, 25, 54, 0.96) 0%,
    rgba(28, 25, 54, 0.35) 55%,
    rgba(28, 25, 54, 0) 100%
  );
  border-radius: 0.5rem;
}

/* El nombre del area va en el dorado de la marca. */
.umv-grants--therapy .umv-grant__eyebrow {
  color: var(--umv-gold-500);
  font-size: var(--umv-paragraph-small-size);
  letter-spacing: 0.08em;
  opacity: 1;
}

.umv-grants--therapy .umv-grant__title {
  font-size: 1.5rem;
  line-height: 1.875rem;
  font-weight: var(--umv-weight-extrabold);
}

.umv-grants--therapy .umv-grant.is-open .umv-grant__title {
  font-size: 1.625rem;
  line-height: 2rem;
}

.umv-grants--therapy .umv-grant__text {
  color: var(--umv-lilac-200);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.625rem;
}

.umv-grants--therapy .umv-grant__requirements-title {
  margin-top: 1.75rem;
  font-size: var(--umv-paragraph-default-size);
  font-weight: var(--umv-weight-semibold);
  letter-spacing: 0.03em;
}

/* Los recursos van en dos columnas, con su punto dorado: son muchos para un
  solo renglon por linea y asi caben sin estirar la tarjeta. */
.umv-grants--therapy .umv-grant__requirements {
  columns: 2;
  column-gap: 1.5rem;
  margin-top: 0.875rem;
  padding-left: 0;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  list-style: none;
}

.umv-grants--therapy .umv-grant__requirements li {
  position: relative;
  padding-left: 1rem;
  break-inside: avoid;
}

.umv-grants--therapy .umv-grant__requirements li + li {
  margin-top: 0.75rem;
}

.umv-grants--therapy .umv-grant__requirements li::before {
  position: absolute;
  top: 0.5625rem;
  left: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--umv-gold-500);
  content: "";
}

@media (max-width: 991.98px) {
  /* Sin sitio al lado, las flechas vuelven a su renglon. */
  .umv-grants--therapy .umv-grants__head {
    padding-right: 0;
  }

  .umv-grants--therapy .umv-grants__controls {
    position: static;
    margin-top: 1.5rem;
  }
}

/* El encabezado y su entrada, con las medidas y los colores del diseno del
  centro: 38/44 el titulo y la entrada parada a los 720px. */
.umv-grants--therapy .umv-grants__title {
  color: var(--umv-color-brand-dark);
  font-size: 2.375rem;
  line-height: 2.75rem;
  font-weight: var(--umv-weight-bold);
}

.umv-grants--therapy .umv-grants__lead {
  max-width: 45rem;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.7;
}

@media (max-width: 767.98px) {
  .umv-grants--therapy .umv-grants__title {
    font-size: var(--umv-display-7-size);
    line-height: var(--umv-display-7-line);
  }
}

/* Las flechas del diseno: cuadradas, la de volver en el azul mas claro del
  sitio y la de seguir rellena en el cian de la marca. */
.umv-grants--therapy .umv-grants__arrow {
  --umv-icon-button-size: 2.5rem;
  --umv-icon-button-color: var(--umv-slate-500);
  border-radius: 0;
  background: var(--umv-sky-50);
  font-size: 1.125rem;
}

.umv-grants--therapy .umv-grants__arrow.is-primary {
  --umv-icon-button-color: var(--umv-color-on-dark);
  background: var(--umv-color-highlight);
}

.umv-grants--therapy .umv-grants__arrow:not([disabled]):hover,
.umv-grants--therapy .umv-grants__arrow:not([disabled]):focus-visible {
  --umv-icon-button-color: var(--umv-slate-700);
  background: var(--umv-gray-150);
}

.umv-grants--therapy .umv-grants__arrow.is-primary:not([disabled]):hover,
.umv-grants--therapy .umv-grants__arrow.is-primary:not([disabled]):focus-visible {
  --umv-icon-button-color: var(--umv-color-on-dark);
  background: var(--umv-cyan-500);
}

/* La fila se recorre arrastrando aunque no haya JavaScript.

  `container-type` la convierte en la medida de referencia: las tarjetas se
  miden contra ella, no contra la pantalla ni contra si mismas. Hace falta
  porque el texto de dentro de una tarjeta cerrada tiene que medir lo que mide
  una abierta, y eso no se puede decir en porcentaje de la propia tarjeta. */
.umv-grants__list {
  container-type: inline-size;
  display: flex;
  gap: var(--umv-grants-gap);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.umv-grants__list::-webkit-scrollbar {
  display: none;
}

/* La franja es hermana de la seccion, no hija, asi que no hereda sus medidas:
  lleva la suya. Antes usaba la de la seccion, que aqui no existe, y el hueco
  se quedaba en nada. */
.umv-grants__stats {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* ============================================
  GRANT CARD
  ============================================ */

.umv-grant {
  /* Proporcion de la fila, sin unidad, para poder escribirla en % cuando es el
    ancho de la tarjeta y en cqw cuando es el del texto de dentro. Son las del
    diseno: 177 y 368 de los 870 que mide la fila. Con cuatro becas la cuarta
    asoma cortada por la derecha, que es como esta en el diseno y lo que hace
    falta para que las flechas tengan sentido. */
  --umv-grant-closed: 20.34;
  --umv-grant-open: 42.3;
  --umv-grant-width: calc(var(--umv-grant-closed) * 1%);
  --umv-grant-width-open: calc(var(--umv-grant-open) * 1%);
  --umv-grant-bg: var(--umv-color-bg-dark);
  /* Oscuro arriba para que se lea el nombre y transparente abajo para que se
    vea de que es la foto. */
  --umv-grant-veil: linear-gradient(180deg, rgba(26, 22, 49, 0.85) 0%, rgba(26, 22, 49, 0.15) 55%);
  --umv-grant-pad: 1rem;
  --umv-grant-speed: 0.35s;
  position: relative;
  /* Crecen si sobra sitio y nunca se encogen. Con una abierta la suma pasa del
    ancho de la fila, asi que no sobra nada y la ultima asoma cortada, como en
    el diseno; con todas cerradas si sobra, y se reparten lo que queda en vez
    de dejar un hueco en blanco a la derecha. */
  flex: 1 0 var(--umv-grant-width);
  height: var(--umv-grants-height);
  overflow: hidden;
  background: var(--umv-grant-bg);
  /* Cerrada se pulsa entera para abrirla; abierta ya no hay nada que pulsar
    salvo la cruz, que tiene su propio cursor. */
  cursor: pointer;
  transition: flex-basis var(--umv-grant-speed) ease;
}

.umv-grant.is-open {
  cursor: auto;
}

/* El hueco mientras no hay foto: el mismo cuadro con el dibujo que usan las
  salas y los servicios, en medio de la tarjeta cerrada. Abierta estorba, asi
  que se apaga. */
.umv-grant__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: auto;
  border: 1px solid var(--umv-slate-500);
  border-radius: 0.25rem;
  background: var(--umv-color-surface);
  color: var(--umv-slate-500);
  font-size: 1.5rem;
}

.umv-grant.is-open .umv-grant__placeholder {
  display: none;
}

.umv-grant__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Abierta el velo se vuelve opaco: ahi lo que importa es el texto, no la foto.
  Es un cambio de token y no de regla, asi que ninguna version pisa a la otra
  por especificidad. */
.umv-grant__veil {
  position: absolute;
  inset: 0;
  background: var(--umv-grant-veil);
  transition: background var(--umv-grant-speed) ease;
}

/* El cuerpo mide lo que mide la tarjeta, asi que el nombre siempre se lee
  entero: si no cabe de ancho, da la vuelta. */
.umv-grant__body {
  position: relative;
  width: 100%;
  max-height: 100%;
  padding: var(--umv-grant-pad);
}

/* Si lo que cuenta la beca no cabe en la tarjeta, se desplaza dentro en vez de
  quedarse cortado. Solo en la abierta: en la cerrada el texto esta ahi pero no
  se ve, y una barra de desplazamiento para algo invisible no dice nada. */
.umv-grant.is-open .umv-grant__body {
  overflow: hidden auto;
  scrollbar-width: thin;
}

.umv-grant__eyebrow {
  margin: 0 0 0.375rem;
  color: var(--umv-color-spotlight);
  font-size: var(--umv-display-2-size);
  line-height: var(--umv-display-1-line);
  font-weight: var(--umv-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.umv-grant__heading {
  margin: 0;
}

/* El nombre es el boton que abre la tarjeta, pero se ve como lo que es: un
  titulo. Lo de boton solo lo nota quien la pulsa o llega con el teclado. */
.umv-grant__toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--umv-color-on-dark);
  font-family: var(--umv-font-base);
  font-size: var(--umv-display-4-line);
  line-height: var(--umv-display-4-line);
  font-weight: var(--umv-weight-extrabold);
  text-align: start;
  cursor: pointer;
}

/* Mide lo que mide la tarjeta, como el resto del cuerpo. Se penso en dejarlo
  fijo al ancho de la tarjeta abierta para que al abrirse no se recolocara, pero
  entonces se salia de lado en cuanto aparecia la barra de desplazamiento. Como
  el texto aparece desvaneciendose, que se recoloque no se nota. */
.umv-grant__details {
  width: 100%;
  margin-top: 1.5rem;
  opacity: 0;
  transition: opacity var(--umv-grant-speed) ease;
}

.umv-grant__text,
.umv-grant__requirements-title {
  margin: 0;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-small-line);
}

/* Las becas que se explican en varios parrafos: un respiro entre uno y otro,
  que si no se leen como un bloque. */
.umv-grant__text + .umv-grant__text {
  margin-top: 0.75rem;
}

.umv-grant__requirements-title {
  margin-top: 1.25rem;
}

.umv-grant__requirements {
  margin: 0.375rem 0 0;
  padding-left: 1.125rem;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-small-line);
  /* El tema de la plantilla quita las viñetas a todas las listas; aqui el
    diseno las pide. */
  list-style: disc;
}

.umv-grant__close {
  --umv-icon-button-size: 1.75rem;
  --umv-icon-button-color: var(--umv-color-on-dark);
  --umv-icon-button-hover: var(--umv-color-spotlight);
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  opacity: 0;
  transition: opacity var(--umv-grant-speed) ease;
  pointer-events: none;
}

/* ===== Abierta ========================================================= */

.umv-grant.is-open {
  flex-basis: var(--umv-grant-width-open);
}

.umv-grant.is-open {
  --umv-grant-veil: var(--umv-grant-bg);
}

.umv-grant.is-open .umv-grant__details,
.umv-grant.is-open .umv-grant__close {
  opacity: 1;
}

.umv-grant.is-open .umv-grant__close {
  pointer-events: auto;
}

/* Quien pide menos movimiento se queda con el cambio, pero sin el deslizamiento. */
@media (prefers-reduced-motion: reduce) {
  .umv-grant {
    --umv-grant-speed: 0s;
  }
}

/* En el telefono no cabe una tarjeta abierta al lado de las cerradas, asi que
  ahi no hay acordeon: una tarjeta por pantalla, abierta, y se pasa a la
  siguiente arrastrando o con las flechas. Basta con cambiar las dos medidas,
  que es de donde sale todo lo demas. */
@media (max-width: 575.98px) {
  .umv-grant {
    --umv-grant-closed: 100;
    --umv-grant-open: 100;
    --umv-grant-veil: var(--umv-grant-bg);
    height: auto;
    min-height: var(--umv-grants-height);
  }

  .umv-grant__details {
    opacity: 1;
  }

  /* Cerrar no significa nada cuando todas estan abiertas. */
  .umv-grant__close {
    display: none;
  }
}

/* ============================================
  STATS BAND
  ============================================ */

.umv-stats-band {
  --umv-stats-band-width: 100%;
  --umv-stats-band-gutter: 5%;
  --umv-stats-band-bg: var(--umv-sand-50);
  --umv-stats-band-divider: var(--umv-sand-200);
  --umv-stats-band-value: var(--umv-color-spotlight);
  --umv-stats-band-label: var(--umv-color-brand-dark);
  max-width: var(--umv-stats-band-width);
  margin-inline: auto;
  padding-inline: var(--umv-stats-band-gutter);
}

.umv-stats-band__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  background: var(--umv-stats-band-bg);
  list-style: none;
}

/* La linea separa, asi que va entre cifra y cifra y no en los extremos. */
.umv-stats-band__item + .umv-stats-band__item {
  border-left: 1px solid var(--umv-stats-band-divider);
}

.umv-stats-band__item {
  --umv-stat-value-size: var(--umv-display-8-line);
  --umv-stat-value-line: var(--umv-display-7-line);
  align-items: center;
  gap: 0.75rem;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  text-align: center;
}

.umv-stats-band__item .umv-stat__value {
  color: var(--umv-stats-band-value);
}

.umv-stats-band__item .umv-stat__label {
  max-width: 14rem;
  color: var(--umv-stats-band-label);
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-small-line);
  font-weight: var(--umv-weight-semibold);
}

@media (max-width: 767.98px) {
  .umv-stats-band__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 2rem;
  }

  /* En columna la linea separa por arriba, no por el lado. */
  .umv-stats-band__item + .umv-stats-band__item {
    padding-top: 2rem;
    border-left: 0;
    border-top: 1px solid var(--umv-stats-band-divider);
  }
}

/* ============================================
  CONTACT PANEL
  ============================================ */

/* La franja oscura que cierra la pagina del centro: lo que se pide para la
  cita a un lado, la foto al otro y, al pie, como llamar o llegar. Las medidas
  son las del diseno: 96/80 de aire, 519px de formulario y la esquina de la
  foto redondeada en grande. */
.umv-contact-panel {
  /* 102px del diseno, medidos contra la pagina y no contra la columna: en
    tanto por ciento el relleno se mide contra la caja de dentro, que aqui es
    la mitad, y el texto se quedaba a la mitad de camino. */
  --umv-contact-gutter: clamp(1.5rem, 7.08vw, 6.375rem);
  --umv-contact-space-top: clamp(3.5rem, 6.7vw, 6rem);
  --umv-contact-space-bottom: clamp(3rem, 5.6vw, 5rem);
  --umv-contact-form: 32.4375rem;
  --umv-contact-radius: 6rem;
  --umv-contact-line: rgba(255, 255, 255, 0.15);
  background: var(--umv-color-bg-dark);
  color: var(--umv-color-on-dark);
}

.umv-contact-panel__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.umv-contact-panel__body {
  padding: var(--umv-contact-space-top) 2rem var(--umv-contact-space-bottom)
    var(--umv-contact-gutter);
}

.umv-contact-panel__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--umv-lilac-175);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.umv-contact-panel__title {
  max-width: var(--umv-contact-form);
  margin: 0 0 1rem;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-display-8-size);
  line-height: 3rem;
  font-weight: var(--umv-weight-bold);
}

.umv-contact-panel__text {
  max-width: var(--umv-contact-form);
  margin: 0 0 1rem;
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.3125rem;
}

/* El horario, con el punto verde de "hay alguien" delante. */
.umv-contact-panel__hours {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  max-width: var(--umv-contact-form);
  margin: 0 0 2.5rem;
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.3125rem;
}

.umv-contact-panel__dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.3125rem;
  border-radius: 50%;
  background: var(--umv-green-400);
}

/* Las pastillas de elegir una: se ven como botones, pero por dentro son
  botones de radio. El redondel propio del radio se quita y lo que marca la
  elegida es la pastilla entera. */
.umv-contact-panel__choice {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  border: 0;
}

.umv-contact-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.75rem;
}

.umv-contact-panel__chip {
  position: relative;
  display: inline-flex;
}

.umv-contact-panel__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.umv-contact-panel__chip-label {
  padding: 0.5625rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 1.25rem;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.umv-contact-panel__radio:checked + .umv-contact-panel__chip-label {
  border-color: var(--umv-color-highlight);
  background: var(--umv-color-highlight);
  color: var(--umv-color-on-dark);
}

/* El mismo contorno que deja el navegador al llegar con el teclado: sin esto
  no se ve por donde va quien no usa el raton. */
.umv-contact-panel__radio:focus-visible + .umv-contact-panel__chip-label {
  outline: 2px solid var(--umv-color-highlight);
  outline-offset: 2px;
}

/* El aviso de como acabo el envio, encima del formulario y de su ancho. */
.umv-contact-panel__notice {
  max-width: var(--umv-contact-form);
  margin: 0 0 1.5rem;
}

.umv-contact-panel__form {
  max-width: var(--umv-contact-form);
}

/* Los campos: el nombre y el servicio a lo ancho, el telefono y el correo a
  medias. */
.umv-contact-panel__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.umv-contact-panel__fields .umv-field {
  grid-column: 1 / -1;
}

.umv-contact-panel__fields .umv-contact-panel__field--half {
  grid-column: auto;
}

/* Las etiquetas van sobre el oscuro, y los campos en blanco, como en el
  diseno. */
.umv-contact-panel__form .umv-field__label {
  color: var(--umv-color-on-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.25rem;
  font-weight: var(--umv-weight-regular);
}

.umv-contact-panel__form .umv-field__control {
  height: 2.875rem;
  padding: 0 1rem;
  border: 1px solid var(--umv-gray-200);
  border-radius: 0;
  background: var(--umv-color-surface);
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
}

/* El recuadro del mensaje: mas alto que un campo de un renglon. */
.umv-contact-panel__form .umv-field__control--long {
  height: 6rem;
  padding: 0.8125rem 1rem;
  resize: vertical;
}

.umv-contact-panel__form .umv-field__hint {
  color: var(--umv-lilac-175);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
  font-style: italic;
  font-weight: var(--umv-weight-light);
}

/* El aviso de los datos y el boton, a los dos lados del mismo renglon. */
.umv-contact-panel__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

.umv-contact-panel__note {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
}

.umv-contact-panel__note-icon {
  color: var(--umv-color-highlight);
  font-size: 1.375rem;
}

.umv-contact-panel__submit {
  --umv-button-padding-block: 0.625rem;
  --umv-button-padding-inline: 1.25rem;
  --umv-button-line: 1.25rem;
  gap: 0.5rem;
}

/* La foto llega al borde de la pagina y baja un poco, de modo que la esquina
  redonda se vea contra el fondo oscuro. */
.umv-contact-panel__media {
  padding-top: var(--umv-contact-space-bottom);
}

.umv-contact-panel__image {
  width: 100%;
  height: 100%;
  border-top-left-radius: var(--umv-contact-radius);
  object-fit: cover;
}

/* El hueco de la foto, mientras no la haya: la misma esquina redonda, para
  que la franja se vea como se va a ver. */
.umv-contact-panel__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  border-top-left-radius: var(--umv-contact-radius);
  background: var(--umv-lilac-150);
  color: var(--umv-lilac-300);
  font-size: 2.75rem;
}

/* El pie: los datos para llamar o llegar, separados de lo de arriba por una
  linea del mismo blanco rebajado. */
.umv-contact-panel__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem var(--umv-contact-list-gap, 7.5rem);
  margin: 0;
  padding: 2rem var(--umv-contact-gutter);
  border-top: 1px solid var(--umv-contact-line);
  list-style: none;
}

.umv-contact-panel__item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.umv-contact-panel__icon {
  flex: none;
  color: var(--umv-color-highlight);
  font-size: 1.5rem;
}

.umv-contact-panel__data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.umv-contact-panel__label {
  color: var(--umv-lilac-175);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
}

.umv-contact-panel__value {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: var(--umv-weight-semibold);
}

/* Lo que todavia no se sabe: en cursiva y del color de la etiqueta, para que
  no se lea como un dato bueno. */
.umv-contact-panel__value--pending {
  color: var(--umv-lilac-175);
  font-style: italic;
  font-weight: var(--umv-weight-light);
}

.umv-contact-panel__link {
  flex: none;
  align-self: flex-end;
  color: var(--umv-color-highlight);
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.25rem;
  font-weight: var(--umv-weight-semibold);
  text-decoration: underline;
}

.umv-contact-panel__link:hover,
.umv-contact-panel__link:focus-visible {
  color: var(--umv-cyan-500);
}

/* Cuatro datos al pie piden menos aire entre ellos y que el enlace vaya
  debajo de su dato, no a su lado. */
.umv-contact-panel--wide {
  --umv-contact-list-gap: 2rem;
}

/* Los cuatro datos repartidos a lo ancho y no amontonados a la izquierda, y
  una raya abajo que separa la franja del pie del sitio. */
.umv-contact-panel--wide .umv-contact-panel__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  column-gap: var(--umv-contact-list-gap);
  border-bottom: 1px solid var(--umv-contact-line);
}

/* El dibujo a un lado y, en la otra columna, el dato y su enlace uno debajo
  de otro. */
.umv-contact-panel--wide .umv-contact-panel__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 0.875rem;
}

.umv-contact-panel--wide .umv-contact-panel__icon {
  margin-top: 0.125rem;
}

.umv-contact-panel--wide .umv-contact-panel__data {
  max-width: 15.625rem;  /* 250px del diseno */
  gap: 0.125rem;
}

.umv-contact-panel--wide .umv-contact-panel__link {
  grid-column: 2;
  justify-self: start;
  margin-top: 0.375rem;
}

/* La foto no cabe al lado de un formulario que se pueda llenar: pasa debajo,
  y entonces la esquina redonda deja de tener sentido. */
@media (max-width: 991.98px) {
  .umv-contact-panel {
    --umv-contact-gutter: 5%;
  }

  .umv-contact-panel__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-contact-panel__body {
    padding-right: var(--umv-contact-gutter);
  }

  .umv-contact-panel__media {
    padding-top: 0;
  }

  .umv-contact-panel__image {
    height: 20rem;
    border-top-left-radius: 0;
  }
}

@media (max-width: 575.98px) {
  .umv-contact-panel__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-contact-panel__fields .umv-contact-panel__field--half {
    grid-column: 1 / -1;
  }

  .umv-contact-panel__item {
    flex-wrap: wrap;
  }
}

/* ============================================
  CONTACT BAR
  ============================================ */

.umv-contact-bar {
  --umv-contact-bar-width: 100%;
  --umv-contact-bar-gutter: 5%;
  --umv-contact-bar-space: clamp(3rem, 6vw, 5.5rem);
  --umv-contact-bar-divider: var(--umv-color-divider);
  --umv-contact-bar-title-size: var(--umv-display-7-line);
  --umv-contact-bar-title-line: var(--umv-display-7-line);
  --umv-contact-bar-watermark-width: 18.6875rem;
  --umv-contact-bar-watermark-top: 0;
  --umv-contact-bar-watermark-right: 0;
  position: relative;
  max-width: var(--umv-contact-bar-width);
  margin-inline: auto;
  padding: var(--umv-contact-bar-space) var(--umv-contact-bar-gutter) 0;
}

/* Queda detras de todo, pegada a la orilla derecha. Ya viene con su
  transparencia dentro del dibujo, asi que aqui solo se coloca.

  La seccion no la recorta a proposito: es mas alta que ella y tiene que seguir
  bajando hasta la franja de la foto, que es donde se corta sola porque esa
  franja se pinta encima. */
.umv-contact-bar__watermark {
  position: absolute;
  top: var(--umv-contact-bar-watermark-top);
  right: var(--umv-contact-bar-watermark-right);
  width: var(--umv-contact-bar-watermark-width);
  pointer-events: none;
}

.umv-contact-bar__title,
.umv-contact-bar__list {
  position: relative;
}

.umv-contact-bar__title {
  margin: 0 0 2rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-contact-bar-title-size);
  line-height: var(--umv-contact-bar-title-line);
  font-weight: var(--umv-weight-bold);
  text-align: center;
}

/* La lista nace en columna para el pie; aqui va en fila y centrada. Los colores
  los deja sueltos el propio componente, asi que solo hay que decir cuales. */
.umv-contact-bar__list {
  --umv-contact-icon-bg: transparent;
  --umv-contact-icon-color: var(--umv-color-highlight);
  --umv-contact-icon-size: 2.5rem;
  --umv-contact-label: var(--umv-slate-500);
  --umv-contact-value: var(--umv-color-brand-dark);
  flex-direction: row;
  /* Sin envolver: cuando no caben, lo que cede es la direccion, que da la
    vuelta en su sitio. Si la fila se partiera en dos renglones se perderia la
    linea de separacion entre datos, que es la que los ordena. */
  flex-wrap: nowrap;
  /* Todos del mismo alto, no cada uno del suyo: la linea que los separa es el
    borde del dato, asi que con alturas distintas salia una linea mas larga que
    las otras. */
  align-items: stretch;
  justify-content: center;
  gap: 0;
}

/* La linea separa, asi que va entre dato y dato y no en los extremos. */
/* Cada dato ocupa lo suyo y no cede. */
.umv-contact-bar__item {
  flex: none;
  min-width: 0;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}

/* Salvo el que este marcado: ese es el que da la vuelta cuando falta sitio. */
.umv-contact-bar__item--wrap {
  flex: 0 1 auto;
}

.umv-contact-bar__item + .umv-contact-bar__item {
  border-left: 1px solid var(--umv-contact-bar-divider);
}

/* En la fila el dato va sobre claro, no sobre el azul marino del pie: la
  etiqueta se pinta en gris y a plena opacidad, que en blanco sobre blanco no
  se leia. */
.umv-contact-bar__item .umv-contact__label {
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-small-line);
  opacity: 1;
}

.umv-contact-bar__item .umv-contact__value {
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-semibold);
}

/* Por debajo de esto la direccion se queda tan estrecha que da cinco vueltas en
  una sola fila. Antes de llegar a eso, los cuatro datos se reparten en dos
  columnas: en una pantalla de esta anchura queda sitio de sobra y en columna se
  veria medio vacia. */
@media (max-width: 1199.98px) and (min-width: 576px) {
  .umv-contact-bar__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 48rem;
    margin-inline: auto;
    row-gap: 2rem;
  }

  /* Aqui la linea separa las dos columnas, asi que la lleva el de la derecha. */
  .umv-contact-bar__item:nth-child(odd) {
    padding-inline-start: 0;
    border-left: 0;
  }

  .umv-contact-bar__item:nth-child(even) {
    border-left: 1px solid var(--umv-contact-bar-divider);
  }
}

/* Ya en el telefono no caben dos, asi que van uno debajo de otro y sin lineas:
  el hueco entre ellos ya los separa. */
@media (max-width: 575.98px) {
  .umv-contact-bar__list {
    flex-direction: column;
    align-items: start;
    gap: 1.25rem;
  }

  .umv-contact-bar__item {
    padding-inline: 0;
  }

  .umv-contact-bar__item + .umv-contact-bar__item {
    border-left: 0;
  }
}

/* ============================================
  CTA BAND
  ============================================ */

.umv-cta-band {
  --umv-cta-band-width: 100%;
  --umv-cta-band-gutter: 5%;
  --umv-cta-band-space: clamp(2.5rem, 5vw, 4.5rem);
  --umv-cta-band-bg: var(--umv-color-bg-dark);
  --umv-cta-band-height: 13.125rem;
  /* La proporcion de la foto (photo.png mide 433x254). El hueco se calcula a
    partir de ella y del alto, no como un porcentaje de la franja: asi la foto
    entra entera y no hay que recortarla por arriba y por abajo. Cambiar la foto
    por otra de distinta forma es cambiar este numero. */
  --umv-cta-band-ratio: 1.705;
  --umv-cta-band-media: calc(var(--umv-cta-band-height) * var(--umv-cta-band-ratio));
  --umv-cta-band-pad: clamp(1.5rem, 3.5vw, 2.625rem);
  /* La esquina redondeada del lado de la foto. Sale de la proporcion del
    diseno: el radio es dos quintos del alto de la franja. */
  --umv-cta-band-radius: 5rem;
  --umv-cta-band-title-size: var(--umv-display-7-size);
  --umv-cta-band-title-line: var(--umv-display-6-line);
  max-width: var(--umv-cta-band-width);
  margin-inline: auto;
  padding: var(--umv-cta-band-space) var(--umv-cta-band-gutter);
}

/* De lado a lado, sin el margen de la pagina ni el aire de arriba y abajo: en
  la oferta academica la franja cruza entera, no va metida en una caja. */
.umv-cta-band--flush {
  --umv-cta-band-space: 0;
  --umv-cta-band-gutter: 0;
  /* Cruzando la pagina entera, un alto fijo la aplana: en una pantalla ancha
    queda una tira con la letra enorme y la foto hecha un sello. El diseno la
    tiene cinco veces mas ancha que alta, asi que el alto va con el ancho de la
    ventana, con suelo y techo para que no se desmadre. */
  --umv-cta-band-height: clamp(13.125rem, 20.3vw, 24.375rem);
  /* Aqui la foto no llega a las orillas: baja del techo de la franja y se para
    antes del borde derecho, a la altura del margen de la pagina. Lo que ocupa
    su columna es la foto mas ese margen. */
  --umv-cta-band-drop: 2.25rem;
  --umv-cta-band-inset: 5vw;
  /* La esquina, mas abierta que la de admisiones: es la misma de las demas
    fotos redondeadas del sitio. */
  --umv-cta-band-radius: 6.25rem;
  --umv-cta-band-media: calc(
    (var(--umv-cta-band-height) - var(--umv-cta-band-drop)) * var(--umv-cta-band-ratio)
    + var(--umv-cta-band-inset)
  );
  /* Y la frase, mas chica que en admisiones: ahi es el titular de la franja y
    aqui convive con mucho mas aire. */
  --umv-cta-band-title-size: var(--umv-display-5-size);
  --umv-cta-band-title-line: var(--umv-display-5-line);
}

/* La franja de la pagina de noticias: mas alta, con la esquina mas abierta y
  metida en el margen de esa pagina. El aire de arriba lo deja el tablero de
  publicaciones, asi que aqui solo se pone el de abajo, antes del pie. */
.umv-cta-band--news {
  --umv-cta-band-space: 0;
  --umv-cta-band-gutter: clamp(1.5rem, 5.56vw, 5rem); /* 80px */
  --umv-cta-band-height: 18rem;                       /* 288px */
  --umv-cta-band-radius: 6.25rem;                     /* 100px */
  /* La forma de su foto (vive-experiencia-news.png mide 433x288): de ahi sale
    lo que ocupa su columna. */
  --umv-cta-band-ratio: 1.504;
  /* 80px y 52px del diseno, que es lo que miden a 1440; en un telefono ese
    relleno se comeria el texto, asi que encogen con la ventana. */
  --umv-cta-band-pad: clamp(2rem, 5.56vw, 5rem) clamp(1.5rem, 3.6vw, 3.25rem);
  --umv-cta-band-gap: 2rem;                           /* 32px */
  --umv-cta-band-intro-gap: 0.75rem;                  /* 12px */
  --umv-cta-band-text: 38.75rem;                      /* 620px */
  --umv-cta-band-title-line: var(--umv-display-7-line);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

/* El titular de esta franja va en la fuente de interfaz y en el peso mas
  gordo, como lo pide su diseno. */
.umv-cta-band--news .umv-cta-band__title {
  font-family: var(--umv-font-ui);
  font-weight: var(--umv-weight-extrabold);
}

/* La esquina redondeada se la queda la foto, que es la que ya no toca el borde
  de la franja. */
.umv-cta-band--flush .umv-cta-band__inner {
  border-top-right-radius: 0;
}

/* Los huecos van en el margen de la celda y no en los bordes de la foto: la
  foto esta colocada, y una imagen colocada con los cuatro bordes puestos se
  queda en su tamano natural en vez de estirarse, asi que al estrecharse la
  pantalla se salia de su columna. Encogiendo la celda, la foto la sigue
  llenando y no hay nada que se desborde. */
.umv-cta-band--flush .umv-cta-band__media {
  margin: var(--umv-cta-band-drop) var(--umv-cta-band-inset) 0 0;
}

.umv-cta-band--flush .umv-cta-band__image {
  border-top-right-radius: var(--umv-cta-band-radius);
}

/* Sin el margen de la pagina por fuera, el texto quedaria pegado al borde de
  la pantalla. El diseno lo mete bastante mas adentro que el resto del
  contenido -un 9% del ancho, medido del boceto- para que se vea franja oscura
  a su alrededor y no parezca pegado. Va en `vw` porque se mide contra la
  ventana, no contra la franja. */
.umv-cta-band--flush .umv-cta-band__body {
  padding-left: 9vw;
}

/* Colocada para que se pinte por encima de la marca de agua de la seccion de
  arriba, que baja hasta aqui. */
.umv-cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--umv-cta-band-media);
  min-height: var(--umv-cta-band-height);
  /* Recorta la foto contra la esquina redondeada. */
  overflow: hidden;
  border-top-right-radius: var(--umv-cta-band-radius);
  background: var(--umv-cta-band-bg);
}

/* Con la foto a la izquierda, la esquina se va con ella. */
.umv-cta-band__inner--left {
  grid-template-columns: var(--umv-cta-band-media) minmax(0, 1fr);
  border-top-right-radius: 0;
  border-top-left-radius: var(--umv-cta-band-radius);
}

.umv-cta-band__inner--left .umv-cta-band__media {
  order: -1;
}

.umv-cta-band__body {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: var(--umv-cta-band-gap, 1.25rem);
  padding: var(--umv-cta-band-pad);
}

.umv-cta-band__intro {
  display: flex;
  flex-direction: column;
  gap: var(--umv-cta-band-intro-gap, 0.75rem);
}

/* La entrada, en el tamano del texto corrido: no es otro renglon del titulo. */
.umv-cta-band__text {
  max-width: var(--umv-cta-band-text, 38.75rem);
  margin: 0;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-large-line);
}

.umv-cta-band__title {
  margin: 0;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-cta-band-title-size);
  line-height: var(--umv-cta-band-title-line);
  font-weight: var(--umv-weight-bold);
}

/* Cada frase en su renglon: el diseno las parte donde acaba la idea, no donde
  acabe el ancho. */
.umv-cta-band__line {
  display: block;
}

.umv-cta-band__highlight {
  color: var(--umv-color-spotlight);
}

/* Claro sobre el fondo oscuro, al reves que el resto de los botones. */
.umv-cta-band__action {
  --umv-button-bg: var(--umv-sky-50);
  --umv-button-color: var(--umv-color-highlight);
  --umv-button-hover-bg: var(--umv-color-highlight);
  --umv-button-hover-color: var(--umv-color-on-dark);
}

/* La foto va colocada, no en el flujo: si no, su alto natural (que crece con
  el ancho de la columna) estiraba la franja y en una pantalla grande se hacia
  el doble de alta de lo que dice el diseno. Asi el alto lo manda la franja y la
  foto se acomoda a el. */
.umv-cta-band__media {
  position: relative;
}

.umv-cta-band__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  /* A una columna la foto pasa arriba y la frase debajo. */
  .umv-cta-band__inner,
  .umv-cta-band__inner--left {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A una columna la foto ocupa el ancho y el alto sale de su proporcion, que
    es lo que la deja entera tambien aqui. */
  .umv-cta-band__media {
    order: -1;
    aspect-ratio: var(--umv-cta-band-ratio);
  }

  /* Y sin los huecos de la version ancha: aqui no tiene franja al lado de la
    que separarse. */
  .umv-cta-band--flush .umv-cta-band__media {
    margin: 0;
  }
}

/* ============================================
  ABOUT BODY
  ============================================ */

/* La franja donde vive la fila de pestanas de "Sobre nosotros". Solo ella: lo
  que abre cada pestana va fuera, porque unas secciones cruzan la pantalla
  entera y otras no, y aqui dentro todas heredarian el mismo margen. */
.umv-about-body {
  --umv-about-body-width: 100%;
  --umv-about-body-gutter: 5%;
  background: var(--umv-color-bg);
}

.umv-about-body__inner {
  max-width: var(--umv-about-body-width);
  margin: 0 auto;
  padding-inline: var(--umv-about-body-gutter);
}

/* La fila nace para fondo oscuro; aqui va sobre blanco, asi que solo cambian
  los colores que el propio componente deja sueltos. Son los mismos de
  admisiones y de la ficha, para que las tres paginas tengan las pestanas
  iguales. */
/* La fila del centro de idiomas lleva a las secciones de la propia pagina,
  pero se ve como todas las demas: lo suyo lo pone la regla comun de las filas
  de pestanas, asi que aqui no queda nada que decir. */

/* La fila del centro de especialidad lleva a cada seccion de la propia
  pagina, como la del centro de idiomas, y se ve igual que las demas: lo suyo
  lo pone la regla comun de las filas de pestanas. */

/* El aviso de la seccion que todavia no tiene su diseno: se ve que falta, no
  se disimula. */
.umv-pending-note {
  margin: 0;
  padding: clamp(2.5rem, 5vw, 4rem) 1rem;
  border: 1px dashed var(--umv-color-border);
  border-radius: 0.25rem;
  color: var(--umv-color-muted);
  font-size: var(--umv-paragraph-default-size);
  text-align: center;
}

/* ============================================
  VISIT INFO
  ============================================ */

/* Antes de la cita: el horario en su tarjeta y, al lado, las notas. Las
  medidas son las del diseno: 104/112 de aire, 38/44 el encabezado, 416px la
  tarjeta del horario y 24px entre tarjetas. */
.umv-visit-info {
  --umv-visit-width: 100%;
  --umv-visit-gutter: 5%;
  --umv-visit-space-top: clamp(3.5rem, 7.2vw, 6.5rem);
  --umv-visit-space-bottom: clamp(3.5rem, 7.8vw, 7rem);
  --umv-visit-card: 26rem;
  --umv-visit-gap: 1.5rem;
  --umv-visit-note-gap: 1.5rem;
  --umv-visit-pad: 1.75rem;
  --umv-visit-title-size: 2.375rem;
  --umv-visit-title-line: 2.75rem;
  --umv-visit-line: var(--umv-sand-150);
  background: var(--umv-sand-50);
}

.umv-visit-info__inner {
  max-width: var(--umv-visit-width);
  margin: 0 auto;
  padding: var(--umv-visit-space-top) var(--umv-visit-gutter) var(--umv-visit-space-bottom);
}

/* El antetitulo: el mismo de las demas secciones, en la medida que pide este
  diseno. El color sale del azul de la marca rebajado, que es ese gris. */
.umv-visit-info__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-visit-info__title {
  margin: 0 0 3rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-visit-title-size);
  line-height: var(--umv-visit-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-visit-info__grid {
  display: grid;
  grid-template-columns: minmax(0, var(--umv-visit-card)) minmax(0, 1fr);
  align-items: start;
  gap: var(--umv-visit-gap);
}

/* La tarjeta del horario: la cabecera oscura y, debajo, un renglon por dia
  separado por una linea. */
.umv-visit-info__card {
  background: var(--umv-color-surface);
  /* Con `outline` y no con `border` para que la raya no mueva los renglones
    de dentro ni un pixel. */
  outline: 1px solid var(--umv-visit-line);
  outline-offset: -1px;
}

.umv-visit-info__card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem var(--umv-visit-pad) 1.25rem;
  background: var(--umv-color-brand-dark);
  color: var(--umv-color-on-dark);
}

.umv-visit-info__card-icon {
  flex: none;
  color: var(--umv-cyan-500);
  font-size: 1.375rem;
}

.umv-visit-info__card-title {
  margin: 0;
  /* Sobre la cabecera oscura: el color de los titulares de la pagina se
    perderia aqui. */
  color: var(--umv-color-on-dark);
  font-size: var(--umv-display-4-size);
  line-height: 1.5rem;
  font-weight: var(--umv-weight-bold);
}

.umv-visit-info__schedule {
  width: 100%;
  border-collapse: collapse;
}

.umv-visit-info__row {
  border-top: 1px solid var(--umv-visit-line);
}

.umv-visit-info__day,
.umv-visit-info__hours {
  padding: 1rem var(--umv-visit-pad);
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.umv-visit-info__day {
  color: var(--umv-color-brand-dark);
  font-weight: var(--umv-weight-medium);
  text-align: start;
}

.umv-visit-info__hours {
  color: var(--umv-navy-600);
  font-weight: var(--umv-weight-regular);
  text-align: end;
}

/* El dia que no abre: en gris, que es lo que lo distingue de un horario. */
.umv-visit-info__row--closed .umv-visit-info__hours {
  color: var(--umv-lilac-300);
}

/* Las notas: dos al lado y la tercera a lo ancho, debajo. */
.umv-visit-info__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--umv-visit-note-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-visit-info__note {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: var(--umv-visit-pad);
  background: var(--umv-color-surface);
  outline: 1px solid var(--umv-visit-line);
  outline-offset: -1px;
}

/* La que cruza las dos columnas: el aviso, en crema y con el dibujo al lado
  en vez de encima. */
.umv-visit-info__note--wide {
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  grid-column: 1 / -1;
  background: var(--umv-sand-100);
  outline: 0;
}

.umv-visit-info__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--umv-sky-100);
  color: var(--umv-cyan-500);
  font-size: 1.375rem;
}

.umv-visit-info__note--wide .umv-visit-info__mark {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--umv-color-surface);
  color: var(--umv-gold-450);
  font-size: 1.625rem;
}

/* Con dibujo propio la caja no pinta nada: el circulo viene dentro del
  archivo. */
.umv-visit-info__mark--image {
  background: none;
}

.umv-visit-info__icon {
  width: 100%;
  height: 100%;
}

.umv-visit-info__note-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.umv-visit-info__note-title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: 1.1875rem;
  line-height: 1.625rem;
  font-weight: var(--umv-weight-bold);
}

.umv-visit-info__note--wide .umv-visit-info__note-title {
  font-size: var(--umv-display-4-size);
}

.umv-visit-info__note-text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

/* El horario no cabe al lado de las notas: pasa arriba y las notas debajo. */
@media (max-width: 991.98px) {
  .umv-visit-info__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .umv-visit-info {
    --umv-visit-title-size: var(--umv-display-7-size);
    --umv-visit-title-line: var(--umv-display-7-line);
  }

  .umv-visit-info__notes {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sin sitio al lado, el dibujo del aviso vuelve encima del texto. */
  .umv-visit-info__note--wide {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
  TAG LIST
  ============================================ */

/* La frase con sus etiquetas. Va del color de la seccion de arriba para que
  las dos se lean como una sola franja. */
.umv-tags {
  --umv-tags-width: 100%;
  --umv-tags-gutter: 5%;
  --umv-tags-space-top: 1.5rem;
  --umv-tags-space-bottom: 5.375rem;
  /* Lo mas ancho que se dejan correr las etiquetas: mas alla se leen a saltos
    de un lado de la pantalla al otro. */
  --umv-tags-list: 45rem;
  --umv-tags-gap: 0.875rem;
  --umv-tags-bg: var(--umv-sky-50);
  background: var(--umv-tags-bg);
}

.umv-tags__inner {
  max-width: var(--umv-tags-width);
  margin: 0 auto;
  padding: var(--umv-tags-space-top) var(--umv-tags-gutter) var(--umv-tags-space-bottom);
}

/* Pegadas a la franja de servicios: su mismo crema y las pastillas en el
  color de arena del diseno. */
.umv-tags--service {
  --umv-tags-bg: var(--umv-sand-75);
  --umv-tags-gap: 0.75rem;
  --umv-tags-space-top: 0.5rem;
  /* En renglon, de lado a lado: el diseno las quiere seguidas y no partidas a
    media pagina. Las que no quepan bajan solas. */
  --umv-tags-list: 100%;
}

.umv-tags--service .umv-tags__title {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: var(--umv-weight-semibold);
}

.umv-tags--service .umv-tags__item {
  padding: 0.625rem 1.125rem;
  border: 0;
  border-radius: 999px;
  background: var(--umv-sand-200);
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  font-weight: var(--umv-weight-medium);
}

.umv-tags__title {
  margin: 0 0 1.125rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
  font-weight: var(--umv-weight-bold);
}

.umv-tags__text {
  margin: 0 0 1.125rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.6;
}

.umv-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--umv-tags-gap);
  max-width: var(--umv-tags-list);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-tags__item {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--umv-gray-250);
  border-radius: 2.125rem;
  background: var(--umv-color-surface);
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-semibold);
}

@media (max-width: 767.98px) {
  .umv-tags {
    --umv-tags-space-bottom: 3rem;
  }
}

/* ============================================
  FACILITY STRIP
  ============================================ */

/* Las salas del centro: el encabezado y, debajo, una tarjeta por sala con su
  foto arriba. Las medidas son las del diseno: 104/112 de aire, 38/44 el
  encabezado, 24px entre tarjetas y 260px de foto. */
.umv-facilities {
  --umv-facilities-width: 100%;
  --umv-facilities-gutter: 5%;
  --umv-facilities-space-top: clamp(3.5rem, 7.2vw, 6.5rem);
  --umv-facilities-space-bottom: clamp(3.5rem, 7.8vw, 7rem);
  --umv-facilities-gap: 1.5rem;
  --umv-facilities-columns: 3;
  --umv-facilities-title-size: 2.375rem;
  --umv-facilities-title-line: 2.75rem;
  /* Medidas del diseno: la foto de cada sala y el aire de su pie. */
  --umv-facilities-media: 16.25rem;
  --umv-facilities-pad-block: 1.5rem;
  --umv-facilities-pad-inline: 1.75rem;
  --umv-facilities-line: var(--umv-sand-150);
  background: var(--umv-color-surface);
}

.umv-facilities__inner {
  max-width: var(--umv-facilities-width);
  margin: 0 auto;
  padding: var(--umv-facilities-space-top) var(--umv-facilities-gutter)
    var(--umv-facilities-space-bottom);
}

/* El antetitulo: el mismo de las demas secciones, en la medida que pide este
  diseno. El color sale del azul de la marca rebajado, que es ese gris. */
.umv-facilities__eyebrow {
  margin: 0 0 1.75rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-facilities__title {
  margin: 0 0 1.25rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-facilities-title-size);
  line-height: var(--umv-facilities-title-line);
  font-weight: var(--umv-weight-bold);
}

/* La entrada se queda corta a proposito: el diseno la para antes del borde
  para que no cruce la pagina de lado a lado. */
.umv-facilities__text {
  max-width: 56.25rem;
  margin: 0 0 1.25rem;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.7;
}

.umv-facilities__list {
  display: grid;
  grid-template-columns: repeat(var(--umv-facilities-columns), minmax(0, 1fr));
  gap: var(--umv-facilities-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Todas del mismo alto aunque una tenga el nombre mas largo que otra. */
.umv-facilities__item {
  display: flex;
  flex-direction: column;
  background: var(--umv-color-surface);
  /* Con `outline` y no con `border` para que la raya no mueva nada de dentro
    ni un pixel. */
  outline: 1px solid var(--umv-facilities-line);
  outline-offset: -1px;
}

/* La foto va arriba y a lo ancho de la tarjeta; mientras no haya, queda el
  hueco gris, que avisa de lo que falta. */
.umv-facilities__media {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: var(--umv-facilities-media);
  overflow: hidden;
  background: var(--umv-lilac-150);
}

.umv-facilities__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.umv-facilities__placeholder {
  color: var(--umv-slate-500);
  font-size: 1.75rem;
  opacity: 0.5;
}

.umv-facilities__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--umv-facilities-pad-block) var(--umv-facilities-pad-inline) 1.75rem;
}

/* Cual de las salas es: va encima del nombre y en el cian de la marca. */
.umv-facilities__label {
  margin: 0;
  color: var(--umv-cyan-500);
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.umv-facilities__name {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
  font-weight: var(--umv-weight-bold);
}

/* Tres salas no caben al lado en una pantalla de portatil estrecha. */
@media (max-width: 991.98px) {
  .umv-facilities {
    --umv-facilities-columns: 2;
  }
}

@media (max-width: 575.98px) {
  .umv-facilities {
    --umv-facilities-columns: 1;
    --umv-facilities-title-size: var(--umv-display-7-size);
    --umv-facilities-title-line: var(--umv-display-7-line);
  }
}

/* ============================================
  TOPIC CARDS
  ============================================ */

/* Los temas de "Mision y vision": tres tarjetas en renglon, cada una con su
  cabecera blanca -el dibujo y el nombre- y, debajo, lo que cuenta sobre
  crema. */
.umv-topic-cards {
  --umv-topic-cards-width: 100%;
  --umv-topic-cards-gutter: 5%;
  --umv-topic-cards-space: clamp(2.5rem, 5vw, 4rem);
  /* Las medidas del diseno: 44/52 el encabezado, 24px entre tarjetas y 40px
    de la cabecera al texto. */
  --umv-topic-cards-title-size: 2.75rem;
  --umv-topic-cards-title-line: 3.25rem;
  --umv-topic-cards-gap: 1.5rem;
  --umv-topic-cards-inner: 2.5rem;
  --umv-topic-cards-pad: 1.5rem;
  --umv-topic-cards-name-size: var(--umv-display-5-size);
  --umv-topic-cards-name-line: var(--umv-display-5-line);
  --umv-topic-cards-text-size: 0.9375rem;
  --umv-topic-cards-text-line: 1.5625rem;
  --umv-topic-cards-dot: 0.375rem;
  max-width: var(--umv-topic-cards-width);
  margin-inline: auto;
  padding: var(--umv-topic-cards-space) var(--umv-topic-cards-gutter);
}

.umv-topic-cards__intro {
  margin-bottom: 2.5rem;
}

/* El antetitulo: el mismo de las demas secciones, en la medida que pide este
  diseno. El color sale del azul de la marca rebajado, que es ese gris. */
.umv-topic-cards__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-topic-cards__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-topic-cards-title-size);
  line-height: var(--umv-topic-cards-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-topic-cards__lead {
  max-width: 48rem;
  margin: 0.75rem 0 0;
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* Todas del mismo alto aunque una cuente mas que otra: en renglon, una corta
  al lado de una larga deja un escalon que se ve de inmediato. */
.umv-topic-cards__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--umv-topic-cards-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-topic-card {
  display: flex;
  flex-direction: column;
  gap: var(--umv-topic-cards-inner);
  padding-bottom: 2rem;
  border: 1px solid var(--umv-sand-200);
  background: var(--umv-sand-50);
}

/* La cabecera va en blanco sobre el crema de la tarjeta, de borde a borde. */
.umv-topic-card__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: var(--umv-topic-cards-inner) var(--umv-topic-cards-pad);
  background: var(--umv-color-surface);
}

/* El dibujo llega con su caja dorada dentro del archivo, asi que aqui solo se
  le da su sitio y no se deja encoger cuando el nombre ocupa dos renglones. */
.umv-topic-card__icon {
  flex: none;
  width: 3rem;
  height: 3rem;
}

.umv-topic-card__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-topic-cards-name-size);
  line-height: var(--umv-topic-cards-name-line);
  font-weight: var(--umv-weight-bold);
}

.umv-topic-card__body {
  padding-inline: var(--umv-topic-cards-pad);
}

.umv-topic-card__text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-topic-cards-text-size);
  line-height: var(--umv-topic-cards-text-line);
}

.umv-topic-card__text + .umv-topic-card__text {
  margin-top: 0.625rem;
}

.umv-topic-card__list {
  margin: 0.625rem 0 0;
  padding: 0;
  list-style: none;
}

/* El punto se dibuja aqui y no con una vineta del navegador: el diseno lo pide
  redondo, en cian y a la altura del primer renglon, no del centro. */
.umv-topic-card__item {
  position: relative;
  padding-left: 1rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-topic-cards-text-size);
  line-height: var(--umv-topic-cards-text-line);
}

.umv-topic-card__item::before {
  position: absolute;
  top: 0.5625rem;
  left: 0;
  width: var(--umv-topic-cards-dot);
  height: var(--umv-topic-cards-dot);
  border-radius: 50%;
  background: var(--umv-cyan-400);
  content: "";
}

.umv-topic-card__item + .umv-topic-card__item {
  margin-top: 0.625rem;
}

/* En tableta no caben tres: con ese ancho el nombre de cada tema se parte en
  tres renglones y el texto se lee a trompicones. Mejor una debajo de otra. */
@media (max-width: 991.98px) {
  .umv-topic-cards__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* En un telefono el encabezado del diseno (44px) deja dos palabras por
  renglon, asi que baja un paso. De tableta para arriba se queda como lo pide
  el diseno. */
@media (max-width: 767.98px) {
  .umv-topic-cards {
    --umv-topic-cards-title-size: var(--umv-display-7-size);
    --umv-topic-cards-title-line: var(--umv-display-7-line);
  }
}

/* ============================================
  INVITE BAND
  ============================================ */

/* La franja crema que invita a venir: el texto a un lado y el boton al otro,
  con las medidas del diseno (88px de aire y 40/48 la invitacion). */
.umv-invite {
  --umv-invite-space: clamp(3rem, 6.1vw, 5.5rem);
  --umv-invite-gutter: 5%;
  --umv-invite-title-size: 2.5rem;
  --umv-invite-title-line: 3rem;
  --umv-invite-text-width: 32.5rem;
  padding: var(--umv-invite-space) var(--umv-invite-gutter);
  background: var(--umv-sand-25);
}

.umv-invite__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.umv-invite__body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* El antetitulo: el mismo de las demas secciones, en la medida que pide este
  diseno. El color sale del azul de la marca rebajado, que es ese gris. */
.umv-invite__eyebrow {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-invite__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-invite-title-size);
  line-height: var(--umv-invite-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-invite__text {
  max-width: var(--umv-invite-text-width);
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: 1.0625rem;
  line-height: 1.6875rem;
}

.umv-invite__actions {
  flex: none;
}

.umv-invite__button {
  --umv-button-padding-block: 0.875rem;
  --umv-button-padding-inline: 1.5rem;
  --umv-button-size: 0.9375rem;
  --umv-button-line: 1.375rem;
  gap: 0.625rem;
}

.umv-invite__button .umv-button__icon {
  font-size: 1.125rem;
}

/* El boton no cabe al lado de una frase de este tamano: pasa debajo. */
@media (max-width: 991.98px) {
  .umv-invite__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .umv-invite {
    --umv-invite-title-size: var(--umv-display-7-size);
    --umv-invite-title-line: var(--umv-display-7-line);
  }
}

/* ============================================
  QUOTE BOARD
  ============================================ */

/* "Quienes te acompanan": el encabezado de la seccion y, debajo, lo que
  cuentan los docentes, con la tarjeta oscura del organigrama al final del
  renglon. La franja va de lado a lado en el azul mas claro del sitio. */
.umv-quotes {
  /* Las medidas del diseno: 96px de aire arriba y abajo, 44/52 el encabezado,
    24px entre tarjetas y 604px de ancho para la entrada. */
  --umv-quotes-space: clamp(3rem, 6.7vw, 6rem);
  --umv-quotes-gutter: 5%;
  --umv-quotes-gap: 1.5rem;
  --umv-quotes-title-size: 2.75rem;
  --umv-quotes-title-line: 3.25rem;
  --umv-quotes-lead-width: 37.75rem;
  --umv-quotes-pad: 2rem;
  --umv-quotes-media: 12.5rem;
  --umv-quotes-text-size: 0.9375rem;
  --umv-quotes-text-line: 1.5625rem;
  padding: var(--umv-quotes-space) var(--umv-quotes-gutter);
  background: var(--umv-sky-50);
}

.umv-quotes__intro {
  margin-bottom: 1.5rem;
}

/* El antetitulo: el mismo de las demas secciones, en la medida que pide este
  diseno. El color sale del azul de la marca rebajado, que es ese gris. */
.umv-quotes__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-quotes__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-quotes-title-size);
  line-height: var(--umv-quotes-title-line);
  font-weight: var(--umv-weight-bold);
}

/* La entrada se queda corta a proposito: el diseno la para antes de la mitad
  de la pagina para que no compita con el encabezado. */
.umv-quotes__lead {
  max-width: var(--umv-quotes-lead-width);
  margin: 1.25rem 0 0;
  color: var(--umv-navy-550);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-quotes__subtitle {
  margin: 0 0 var(--umv-quotes-gap);
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-6-size);
  line-height: var(--umv-display-6-line);
  font-weight: var(--umv-weight-bold);
}

/* Todas del mismo alto aunque una cuente mas que otra: en renglon, una corta
  al lado de una larga deja un escalon que se ve de inmediato. */
/* Las columnas las cuenta quien la pinta: el diseno trae tres, pero el
  renglon tiene que seguir cerrado cuando llega una cita mas. */
.umv-quotes__list {
  display: grid;
  grid-template-columns: repeat(var(--umv-quotes-columns, 3), minmax(0, 1fr));
  gap: var(--umv-quotes-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-quote {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--umv-lilac-150);
  background: var(--umv-color-surface);
}

/* Mientras no haya retrato queda la banda gris, que avisa de lo que falta en
  vez de disimularlo. */
.umv-quote__media {
  flex: none;
  height: var(--umv-quotes-media);
  background: var(--umv-gray-225);
}

.umv-quote__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La cita arriba y quien la dice abajo: asi, en un renglon de varias
  tarjetas, todos los nombres quedan a la misma altura. */
.umv-quote__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 1.75rem var(--umv-quotes-pad);
}

.umv-quote__block {
  margin: 0;
}

.umv-quote__mark {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--umv-color-highlight);
  font-size: 1.5rem;
  line-height: 1;
}

.umv-quote__text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-quotes-text-size);
  line-height: var(--umv-quotes-text-line);
}

.umv-quote__author {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--umv-lilac-150);
}

.umv-quote__name {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-quotes-text-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-bold);
}

.umv-quote__role {
  margin: 0.125rem 0 0;
  color: var(--umv-blue-650);
  font-size: 0.8125rem;
  line-height: 1.125rem;
}

/* El correo, al pie del todo. Va en el gris del texto de apoyo y no en el azul
  del cargo: el cargo dice quien es y esto es un dato para escribirle, que no
  tiene por que pesar lo mismo. */
.umv-quote__contact {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.125rem;
}

.umv-quote__mail {
  color: var(--umv-color-muted);
  text-decoration: none;
  /* El correo es largo y la tarjeta estrecha: antes de desbordarse, se parte. */
  overflow-wrap: anywhere;
}

.umv-quote__mail:hover,
.umv-quote__mail:focus-visible {
  color: var(--umv-color-link-hover);
  text-decoration: underline;
}

/* La tarjeta oscura del final: el boton se queda pegado al pie aunque el
  texto sea mas corto que el de las citas de al lado. */
.umv-promo {
  display: flex;
  flex-direction: column;
  padding: 2.25rem var(--umv-quotes-pad);
  background: var(--umv-color-brand-dark);
}

.umv-promo__eyebrow {
  margin: 0 0 1rem;
  color: var(--umv-gold-450);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  font-weight: var(--umv-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.umv-promo__title {
  margin: 0;
  color: var(--umv-color-on-dark);
  font-size: 1.625rem;
  line-height: 2.125rem;
  font-weight: var(--umv-weight-bold);
}

.umv-promo__text {
  margin: 1rem 0 0;
  color: var(--umv-lilac-175);
  font-size: var(--umv-quotes-text-size);
  line-height: var(--umv-quotes-text-line);
}

/* Abajo del todo: lo que sobre de la tarjeta queda encima del boton. */
.umv-promo__action {
  margin-top: auto;
  padding-top: 1.5rem;
}

.umv-promo__button {
  --umv-button-padding-block: 0.8125rem;
  --umv-button-padding-inline: 1.375rem;
  --umv-button-size: var(--umv-quotes-text-size);
  --umv-button-line: 1.375rem;
  gap: 0.625rem;
}

.umv-promo__button .umv-button__icon {
  font-size: 1.125rem;
}

/* En tableta no caben tres: con ese ancho la cita se parte en renglones de
  tres palabras. Mejor una debajo de otra, con la oscura al final. */
@media (max-width: 991.98px) {
  .umv-quotes__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* En un telefono el encabezado del diseno (44px) deja dos palabras por
  renglon, asi que baja un paso. De tableta para arriba se queda como lo pide
  el diseno. */
@media (max-width: 767.98px) {
  .umv-quotes {
    --umv-quotes-title-size: var(--umv-display-7-size);
    --umv-quotes-title-line: var(--umv-display-7-line);
    --umv-quotes-pad: 1.5rem;
  }
}

/* ============================================
  FEATURE CARDS
  ============================================ */

.umv-features {
  --umv-features-width: 100%;
  --umv-features-gutter: 5%;
  --umv-features-space: clamp(2.5rem, 5vw, 4rem);
  --umv-features-gap: 1.5rem;
  --umv-features-columns: 3;
  --umv-features-card-min: 15rem;
  --umv-features-title-size: var(--umv-display-6-size);
  --umv-features-title-line: var(--umv-display-6-line);
  /* Cuanto de la frase del pie queda dentro del color; lo que falta hasta el
    100% es lo que asoma sobre el blanco. A la mitad queda partida en dos por
    la linea donde se tocan las dos secciones. */
  --umv-features-overlap: 50%;
  /* El blanco que queda debajo de la frase antes de lo que venga despues. */
  --umv-features-tail: clamp(2.5rem, 5vw, 4rem);
  --umv-features-bg: var(--umv-sky-50);
  padding-bottom: var(--umv-features-tail);
}

/* Sin franja: el bloque se queda sobre el blanco de la pagina. */
.umv-features--plain {
  --umv-features-bg: var(--umv-color-bg);
}

/* El color llega de lado a lado y se acaba aqui: la frase del pie va fuera,
  para poder montarse en el borde. */
.umv-features__band {
  background: var(--umv-features-bg);
}

/* Solo cuando lleva marca de agua: recortarla es lo que la deja asomar por el
  borde, y la frase del pie -que se monta por fuera a proposito- se quedaria
  cortada si esto valiera siempre. */
.umv-features__band--marked {
  position: relative;
  overflow: hidden;
}

/* Pegada al lado derecho y mas alta que la franja, de modo que se sale por
  arriba y por abajo. */
.umv-features__watermark {
  position: absolute;
  top: 50%;
  right: 0;
  height: 115%;
  transform: translateY(-50%);
  pointer-events: none;
}

.umv-features__inner {
  position: relative;
  max-width: var(--umv-features-width);
  margin: 0 auto;
  padding: var(--umv-features-space) var(--umv-features-gutter);
}

/* En un telefono la marca de agua se come las tarjetas: fuera. */
@media (max-width: 767.98px) {
  .umv-features__watermark {
    display: none;
  }
}

/* Sin hueco arriba ni abajo: lo que envuelve tiene que medir lo mismo que la
  frase para que el degradado la corte por donde se pidio. */
.umv-features__inner--flush {
  padding-block: 0;
}

.umv-features__outro {
  background: linear-gradient(
    to bottom,
    var(--umv-features-bg) var(--umv-features-overlap),
    var(--umv-color-bg) var(--umv-features-overlap)
  );
}

.umv-features__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  color: var(--umv-color-brand-dark);
}

.umv-features__title {
  margin: 0 0 0.75rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-features-title-size);
  line-height: var(--umv-features-title-line);
  font-weight: var(--umv-weight-bold);
}

/* El renglon que el diseno parte a mano. */
.umv-features__title-line {
  display: block;
}

.umv-features__lead {
  max-width: 48rem;
  margin: 0;
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-features__subtitle {
  margin: clamp(2rem, 4vw, 3rem) 0 1.25rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-large-line);
  font-weight: var(--umv-weight-bold);
}

/* Cuando el bloque no lleva subtitulo, las tarjetas se pegarian al parrafo:
  el hueco que pondria aquel lo pone la rejilla. */
.umv-features__intro + .umv-features__list {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Tres tarjetas a lo ancho y las que quepan cuando no hay sitio, sin pedirle
  permiso a ninguna media query: el minimo de cada columna es el mayor entre lo
  que mide una tarjeta comoda y el tercio del ancho, y el min(100%, ...) impide
  que ese minimo desborde en una pantalla angosta. */
.umv-features__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--umv-features-card-min),
    (100% - (var(--umv-features-columns) - 1) * var(--umv-features-gap)) / var(--umv-features-columns))), 1fr));
  gap: var(--umv-features-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--umv-color-divider);
  border-radius: 0.25rem;
  background: var(--umv-color-surface);
  text-align: center;
}

/* El cuadro del dibujo. Mientras no haya icono ensena el hueco gris, que es lo
  que avisa de que falta. */
.umv-feature-card__mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--umv-color-divider);
  border-radius: 0.5rem;
  color: var(--umv-color-muted);
  font-size: 1.25rem;
}

.umv-feature-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.umv-feature-card__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-large-line);
  font-weight: var(--umv-weight-bold);
}

.umv-feature-card__text {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* La franja del pie: la frase a un lado y el boton al otro. Cuando no caben
  los dos en un renglon, el boton se va abajo. */
.umv-features__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem);
  background: var(--umv-color-divider);
}

.umv-features__note-text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-bold);
}

.umv-features__note-actions {
  margin: 0;
}

/* ===== La forma de los servicios ======================================= */
/* La franja de "Conoce nuestros servicios": el bloque de tarjetas de siempre
  con las medidas y los colores de su diseno -crema, tarjetas blancas sin
  borde y el dibujo en un circulo dorado-. */
.umv-features--service {
  --umv-features-gap: 1.5rem;
  --umv-features-card-min: 14rem;
  --umv-features-bg: var(--umv-sand-75);
  --umv-features-title-size: 2.375rem;
  --umv-features-title-line: 2.75rem;
  /* La franja acaba donde acaban las tarjetas: aqui no hay frase al pie que
    montar en el borde. */
  --umv-features-tail: 0;
}

.umv-features--service .umv-features__band .umv-features__inner {
  padding-top: clamp(3rem, 5.6vw, 5rem);
  padding-bottom: 2.5rem;
}

.umv-features--service .umv-features__eyebrow {
  margin-bottom: 0.75rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  opacity: 1;
}

.umv-features--service .umv-features__title {
  margin-bottom: 0;
  color: var(--umv-color-brand-dark);
  font-weight: var(--umv-weight-bold);
}

/* La entrada de esta franja va pegada a su encabezado, asi que el hueco lo
  pone ella y no el titulo. Se queda corta a proposito: el diseno la para
  antes de la mitad de la pagina. */
.umv-features--service .umv-features__lead {
  max-width: 39.25rem;
  margin-top: 0.75rem;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.7;
}

.umv-features--service .umv-features__intro + .umv-features__list {
  margin-top: 3rem;
}

/* La tarjeta: blanca, sin borde y con lo suyo alineado a la izquierda. */
.umv-features--service .umv-feature-card {
  align-items: flex-start;
  gap: 0.75rem;
  padding: 2rem;
  border: 0;
  border-radius: 0;
  text-align: start;
}

/* El dibujo llega con su circulo dorado dentro del archivo, asi que aqui solo
  se le da su sitio: sin caja, sin borde y sin color propio. */
.umv-features--service .umv-feature-card__mark {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.25rem;
  border: 0;
  background: none;
}

.umv-features--service .umv-feature-card__title {
  color: var(--umv-color-brand-dark);
  font-size: 1.1875rem;
  line-height: 1.625rem;
  font-weight: var(--umv-weight-bold);
}

.umv-features--service .umv-feature-card__text {
  color: var(--umv-navy-600);
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

/* ===== La forma de los pacientes ======================================= */
/* Lo que cuenta quien se atendio aqui: la foto arriba de la ficha, la comilla
  grande y, al pie, quien lo dice. Las medidas son las del diseno: 104/112 de
  aire, 38/44 el encabezado y 24px entre fichas. */
.umv-features--patient {
  --umv-features-gap: 1.5rem;
  --umv-features-card-min: 16rem;
  --umv-features-bg: var(--umv-color-surface);
  --umv-features-space: clamp(3.5rem, 7.2vw, 6.5rem);
  --umv-features-title-size: 2.375rem;
  --umv-features-title-line: 2.75rem;
  --umv-features-tail: 0;
  --umv-features-line: var(--umv-sand-150);
}

.umv-features--patient .umv-features__band .umv-features__inner {
  padding-bottom: clamp(3.5rem, 7.8vw, 7rem);
}

/* El encabezado a un lado y la entrada al otro, apoyada en su pie, como en el
  diseno. */
.umv-features--patient .umv-features__intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  column-gap: 5rem;
}

.umv-features--patient .umv-features__eyebrow,
.umv-features--patient .umv-features__title {
  grid-column: 1;
}

.umv-features--patient .umv-features__lead {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: end;
}

/* El antetitulo: el mismo de las demas secciones del centro. */
.umv-features--patient .umv-features__eyebrow {
  margin-bottom: 0.75rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  opacity: 1;
}

.umv-features--patient .umv-features__title {
  margin-bottom: 0;
  color: var(--umv-color-brand-dark);
  font-weight: var(--umv-weight-bold);
}

.umv-features--patient .umv-features__lead {
  color: var(--umv-navy-500);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.7;
}

.umv-features--patient .umv-features__intro + .umv-features__list {
  margin-top: 3rem;
}

/* La ficha: la foto arriba, a lo ancho, y lo que se cuenta debajo. El relleno
  lo pone el cuerpo, no la ficha, para que la foto llegue a los bordes. */
.umv-features--patient .umv-voice-card {
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0.5rem;
  outline: 1px solid var(--umv-features-line);
  outline-offset: -1px;
}

.umv-features--patient .umv-voice-card__figure {
  gap: 0;
  height: 100%;
}

/* La foto, o el hueco gris mientras no la haya. */
/* El retrato del paciente, mas alto que el de las demas tarjetas: estas fotos
  vienen de pie y en una banda baja solo se veia una franja del cuerpo. */
.umv-features--patient .umv-voice-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(20rem, 30vw, 30rem);
  border-radius: 0;
  background: var(--umv-lilac-150);
  color: var(--umv-slate-500);
  font-size: 1.75rem;
  opacity: 1;
}

.umv-features--patient .umv-voice-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lo que se cuenta, con la comilla grande encima: es parte del dibujo, asi
  que se pinta aqui y no se escribe en el texto. */
.umv-features--patient .umv-voice-card__quote {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: 1.75rem 1.75rem 0;
}

.umv-features--patient .umv-voice-card__quote::before {
  color: var(--umv-cyan-500);
  font-size: 3rem;
  line-height: 1.8rem;
  font-weight: var(--umv-weight-extrabold);
  content: "\201C";
}

.umv-features--patient .umv-voice-card__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-5-size);
  line-height: 1.6875rem;
  font-weight: var(--umv-weight-bold);
}

.umv-features--patient .umv-voice-card__text {
  margin: 0;
  color: var(--umv-navy-500);
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

/* Quien lo dice, al pie y pasada una linea. */
.umv-features--patient .umv-voice-card__person {
  gap: 0.125rem;
  margin: 1.75rem 1.75rem 0;
  padding: 1rem 0 1.75rem;
  border-top: 1px solid var(--umv-features-line);
}

.umv-features--patient .umv-voice-card__name {
  color: var(--umv-color-brand-dark);
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: var(--umv-weight-bold);
}

.umv-features--patient .umv-voice-card__role {
  color: var(--umv-cyan-500);
  font-size: 0.8125rem;
  line-height: 1.125rem;
}

/* El encabezado y su entrada no caben uno al lado del otro. */
@media (max-width: 991.98px) {
  .umv-features--patient .umv-features__intro {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }

  .umv-features--patient .umv-features__lead {
    grid-row: auto;
    grid-column: 1;
  }
}

@media (max-width: 767.98px) {
  .umv-features--patient .umv-features__title {
    font-size: var(--umv-display-7-size);
    line-height: var(--umv-display-7-line);
  }
}

/* ===== La forma de los docentes ======================================== */
/* La franja va en crema, el parrafo al lado del titulo y las fichas llevan el
  retrato y el nombre en renglon, con lo que cuentan debajo. */
.umv-features--teacher {
  --umv-features-bg: var(--umv-sand-50);
  --umv-features-space: clamp(3rem, 6.1vw, 5.5rem);
  --umv-features-gap: 1rem;
  --umv-features-title-size: 2.375rem;
  --umv-features-title-line: 2.75rem;
  /* La franja oscura del pie se queda dentro del crema en vez de montarse en
    su borde, asi que el color no se parte. */
  --umv-features-overlap: 100%;
  --umv-features-tail: 0;
}

/* Entre las fichas y la franja del pie, y debajo de ella, el mismo crema. */
.umv-features--teacher .umv-features__band .umv-features__inner {
  padding-bottom: 3rem;
}

.umv-features--teacher .umv-features__outro {
  padding-bottom: var(--umv-features-space);
}

.umv-features--teacher .umv-features__eyebrow,
.umv-features--voice .umv-features__eyebrow {
  margin-bottom: 0.6875rem;
  color: var(--umv-navy-500);
  font-family: var(--umv-font-base);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-small-line);
  letter-spacing: 0.08em;
  opacity: 1;
}

/* El titulo a la izquierda y el parrafo al lado, a su altura, no debajo. */
.umv-features--teacher .umv-features__intro {
  display: grid;
  grid-template-columns: minmax(0, 39.5%) minmax(0, 1fr);
  align-items: start;
}

.umv-features--teacher .umv-features__eyebrow,
.umv-features--teacher .umv-features__title {
  grid-column: 1;
}

.umv-features--teacher .umv-features__title {
  margin-bottom: 0;
}

.umv-features--teacher .umv-features__lead {
  grid-column: 2;
  grid-row: 2;
  max-width: 40rem;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.7;
}

.umv-features--teacher .umv-features__subtitle {
  margin: 2.75rem 0 1.25rem;
  font-size: 1.375rem;
  line-height: 1.36;
}

.umv-features--teacher .umv-voice-card {
  padding: 1.75rem;
  border: 0;
  border-radius: 0;
}

/* El retrato y el nombre en el mismo renglon, y lo que cuenta cruzando los
  dos debajo. */
.umv-features--teacher .umv-voice-card__figure {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.875rem;
  row-gap: 1.25rem;
  align-items: center;
}

.umv-features--teacher .umv-voice-card__mark {
  grid-column: 1;
  grid-row: 1;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--umv-gray-150);
}

.umv-features--teacher .umv-voice-card__person {
  grid-column: 2;
  grid-row: 1;
  gap: 0.125rem;
  margin-top: 0;
  padding-top: 0;
}

.umv-features--teacher .umv-voice-card__quote {
  grid-column: 1 / -1;
  grid-row: 2;
}

.umv-features--teacher .umv-voice-card__name {
  font-size: 0.9375rem;
  line-height: 1.33;
}

.umv-features--teacher .umv-voice-card__role {
  color: var(--umv-cyan-500);
  font-size: 0.8125rem;
  line-height: 1.38;
}

.umv-features--teacher .umv-voice-card__text {
  color: var(--umv-navy-600);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* La franja del pie: oscura, con la frase en blanco y el boton de color. */
.umv-features--teacher .umv-features__note {
  padding: 1.25rem 1.75rem;
  background: var(--umv-color-bg-dark);
}

.umv-features--teacher .umv-features__note-text {
  color: var(--umv-color-on-dark);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
  font-weight: var(--umv-weight-semibold);
}

/* En un telefono el titulo baja un paso y el parrafo vuelve debajo. */
@media (max-width: 767.98px) {
  .umv-features--teacher {
    --umv-features-title-size: var(--umv-display-7-size);
    --umv-features-title-line: var(--umv-display-7-line);
  }

  .umv-features--teacher .umv-features__intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-features--teacher .umv-features__lead {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0.75rem;
  }
}

/* ============================================
  IMPACT PANEL
  ============================================ */

/* La franja oscura del impacto: el encabezado, lo que cuenta y, al pie, la
  tarjeta de la red. Las medidas son las del diseno: 80px de aire, 44/52 el
  encabezado y 56px de la entrada a la tarjeta. */
.umv-impact {
  --umv-impact-width: 100%;
  --umv-impact-gutter: 5%;
  --umv-impact-space: clamp(3rem, 5.6vw, 5rem);
  --umv-impact-gap: 3.5rem;
  --umv-impact-title-size: 2.75rem;
  --umv-impact-title-line: 3.25rem;
  /* El encabezado se parte despues de "en", como en el diseno; lo que lo
    decide es hasta donde llega el renglon. */
  --umv-impact-title-width: 30rem;
  --umv-impact-lead-width: 59.9375rem;
  --umv-impact-pad: 3rem;
  --umv-impact-brand: 37.5rem;
  --umv-impact-line: var(--umv-navy-650);
  /* La marca de agua asoma por la esquina de arriba y el resto se queda
    fuera, asi que la seccion la recorta. */
  --umv-impact-mark: 28.375rem;
  position: relative;
  overflow: hidden;
  background: var(--umv-color-bg-dark);
  color: var(--umv-color-on-dark);
}

/* Arriba a la derecha, pegada al borde: es la que trae el diseno y se sale
  por la esquina. */
.umv-impact__watermark {
  position: absolute;
  top: 0;
  right: 0;
  height: var(--umv-impact-mark);
  pointer-events: none;
}

.umv-impact__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--umv-impact-gap);
  max-width: var(--umv-impact-width);
  margin: 0 auto;
  padding: var(--umv-impact-space) var(--umv-impact-gutter);
}

.umv-impact__intro {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.umv-impact__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* El antetitulo sobre oscuro: el gris claro del diseno, que se lee sin
  competir con el encabezado. */
.umv-impact__eyebrow {
  margin: 0;
  color: var(--umv-gray-250);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-impact__title {
  max-width: var(--umv-impact-title-width);
  margin: 0;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-impact-title-size);
  line-height: var(--umv-impact-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-impact__accent {
  color: var(--umv-gold-450);
}

.umv-impact__lead {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  max-width: var(--umv-impact-lead-width);
}

/* La frase que abre: mas grande y en crema, que es lo que la separa del resto
  de lo que se cuenta. */
.umv-impact__strong {
  margin: 0;
  color: var(--umv-sand-50);
  font-size: var(--umv-display-6-size);
  line-height: var(--umv-display-6-line);
  font-weight: var(--umv-weight-bold);
}

.umv-impact__text {
  margin: 0;
  color: var(--umv-lilac-175);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.6875rem;
}

/* La tarjeta de la red: la marca a un lado y la invitacion al otro, separadas
  por la misma linea que la encuadra. */
.umv-impact__card {
  display: grid;
  grid-template-columns: minmax(0, var(--umv-impact-brand)) minmax(0, 1fr);
  background: var(--umv-navy-750);
  /* Con `outline` y no con `border` para que la raya no mueva la rejilla de
    dentro ni un pixel. */
  outline: 1px solid var(--umv-impact-line);
  outline-offset: -1px;
}

.umv-impact__brand,
.umv-impact__pitch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
  padding: var(--umv-impact-pad);
}

.umv-impact__pitch {
  border-left: 1px solid var(--umv-impact-line);
}

.umv-impact__label {
  margin: 0;
  color: var(--umv-lilac-175);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  font-weight: var(--umv-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.umv-impact__frame {
  display: flex;
  align-self: stretch;
  justify-content: center;
  padding: 1.75rem 2rem;
  background: var(--umv-color-surface);
}

.umv-impact__image {
  width: 100%;
  max-width: 27.5rem;
  height: auto;
}

.umv-impact__pitch-title {
  margin: 0;
  color: var(--umv-color-on-dark);
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: var(--umv-weight-bold);
}

.umv-impact__pitch-text {
  margin: 0;
  color: var(--umv-lilac-175);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.6875rem;
}

.umv-impact__button {
  --umv-button-padding-block: 0.875rem;
  --umv-button-padding-inline: 1.5rem;
  --umv-button-size: 0.9375rem;
  --umv-button-line: 1.375rem;
  gap: 0.625rem;
}

.umv-impact__button .umv-button__icon {
  font-size: 1.125rem;
}

/* La tarjeta no cabe en dos columnas: la marca arriba y la invitacion debajo,
  con la linea cruzada en vez de de pie. */
@media (max-width: 991.98px) {
  .umv-impact__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-impact__pitch {
    border-top: 1px solid var(--umv-impact-line);
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .umv-impact {
    --umv-impact-title-size: var(--umv-display-7-size);
    --umv-impact-title-line: var(--umv-display-7-line);
    --umv-impact-pad: 1.5rem;
  }

  /* En un telefono la marca de agua se come el encabezado: fuera. */
  .umv-impact__watermark {
    display: none;
  }
}

/* ============================================
  VOICE CARD
  ============================================ */

/* El bloque de voces: el titulo a la izquierda, el parrafo al lado a su altura
  y, debajo, las fichas con la foto arriba y lo que cuenta cada quien debajo. */
.umv-features--voice {
  --umv-features-space: clamp(3rem, 6.6vw, 6rem);
  --umv-features-gap: 1rem;
  --umv-features-title-size: 2.375rem;
  --umv-features-title-line: 2.75rem;
  /* Las medidas de la ficha: lo alto de la foto, lo que el texto se separa del
    borde y la esquina redondeada de la foto. */
  --umv-voice-media: 19.40625rem;
  --umv-voice-pad: 1.8125rem;
  --umv-voice-corner: 3.5rem;
  --umv-voice-line: var(--umv-sand-150);
}

.umv-features--voice .umv-features__intro {
  display: grid;
  grid-template-columns: minmax(0, 30.2%) minmax(0, 1fr);
  column-gap: 9.3%;
}

.umv-features--voice .umv-features__eyebrow,
.umv-features--voice .umv-features__title {
  grid-column: 1;
}

.umv-features--voice .umv-features__title {
  margin-bottom: 0;
}

/* El parrafo se apoya en el pie del titulo, no en su techo. */
.umv-features--voice .umv-features__lead {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 44rem;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.7;
}

.umv-features--voice .umv-features__intro + .umv-features__list {
  margin-top: 2.3125rem;
}

.umv-features--voice .umv-voice-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  /* Con `outline` la raya no se come un pixel de la foto, que va pegada a los
    bordes de la ficha. */
  outline: 1px solid var(--umv-voice-line);
  outline-offset: -1px;
}

.umv-features--voice .umv-voice-card__figure {
  gap: 0.875rem;
}

/* La foto, de lado a lado de la ficha y con la esquina de arriba redondeada.
  Mientras no haya fotos se ve el hueco, que es lo que avisa de que falta. */
.umv-features--voice .umv-voice-card__mark {
  width: auto;
  height: var(--umv-voice-media);
  margin-bottom: 0.875rem;
  border-radius: 0 var(--umv-voice-corner) 0 0;
  background: var(--umv-sky-50);
  font-size: 2rem;
}

.umv-features--voice .umv-voice-card__quote {
  padding-inline: var(--umv-voice-pad);
}

/* La comilla de la cita. Es adorno: lo que se lee es la frase de debajo. */
.umv-features--voice .umv-voice-card__quote::before {
  content: '\201C';
  display: block;
  margin-bottom: 0.875rem;
  color: var(--umv-cyan-500);
  font-size: var(--umv-display-9-size);
  line-height: 0.6;
  font-weight: var(--umv-weight-extrabold);
}

.umv-features--voice .umv-voice-card__title {
  margin: 0 0 0.875rem;
  font-size: var(--umv-display-5-size);
  line-height: 1.35;
}

.umv-features--voice .umv-voice-card__text {
  color: var(--umv-navy-500);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Quien habla, al pie y separado por una linea que no llega a los bordes. */
.umv-features--voice .umv-voice-card__person {
  gap: 0.125rem;
  margin: auto var(--umv-voice-pad) 0;
  padding: 0.9375rem 0 var(--umv-voice-pad);
  border-top: 1px solid var(--umv-voice-line);
}

.umv-features--voice .umv-voice-card__name {
  font-size: 0.9375rem;
  line-height: 1.33;
}

.umv-features--voice .umv-voice-card__role {
  color: var(--umv-cyan-500);
  font-size: 0.8125rem;
  line-height: 1.38;
}

/* En un telefono el titulo baja un paso y el parrafo vuelve debajo. */
@media (max-width: 767.98px) {
  .umv-features--voice {
    --umv-features-title-size: var(--umv-display-7-size);
    --umv-features-title-line: var(--umv-display-7-line);
  }

  .umv-features--voice .umv-features__intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-features--voice .umv-features__lead {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0.75rem;
  }
}

.umv-voice-card {
  display: flex;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--umv-color-divider);
  border-radius: 0.25rem;
  background: var(--umv-color-surface);
}

/* La ficha entera: retrato, frase y quien la dice, de arriba abajo y con el
  nombre pegado al fondo aunque una frase sea mas corta que las demas. */
.umv-voice-card__figure {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin: 0;
}

.umv-voice-card__mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--umv-gray-100);
  color: var(--umv-color-muted);
  font-size: 1.25rem;
}

.umv-voice-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.umv-voice-card__quote {
  margin: 0;
}

.umv-voice-card__title {
  margin: 0 0 0.75rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-large-line);
  font-weight: var(--umv-weight-bold);
}

.umv-voice-card__text {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* Quien habla, al pie de la tarjeta: el hueco de arriba crece hasta empujarlo
  abajo, asi que las tres fichas lo alinean aunque sus frases midan distinto. */
.umv-voice-card__person {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: auto;
  padding-top: 1rem;
}

.umv-voice-card__name {
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-bold);
}

.umv-voice-card__role {
  color: var(--umv-color-muted);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* ============================================
  STORY SPLIT
  ============================================ */

/* Lo que cuenta la seccion a un lado y su foto al otro, pegada al borde de la
  pagina. Las medidas son las del diseno: 96px de aire, 600px de texto y 88px
  entre las dos columnas. */
.umv-story {
  --umv-story-space: clamp(3rem, 6.7vw, 6rem);
  --umv-story-gutter: 5%;
  --umv-story-gap: 5.5rem;
  --umv-story-body: 37.5rem;
  --umv-story-radius: 6.25rem;
  --umv-story-media: 35rem;
  --umv-story-title-size: 2.75rem;
  --umv-story-title-line: 3.25rem;
  display: flex;
  align-items: center;
  gap: var(--umv-story-gap);
  padding: var(--umv-story-space) 0 var(--umv-story-space) var(--umv-story-gutter);
  overflow: hidden;
  background: var(--umv-color-surface);
}

.umv-story__body {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 1.375rem;
  width: var(--umv-story-body);
  max-width: 100%;
}

/* El antetitulo: el mismo de las demas secciones, en la medida que pide este
  diseno. El color sale del azul de la marca rebajado, que es ese gris. */
.umv-story__eyebrow {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-story__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-story-title-size);
  line-height: var(--umv-story-title-line);
  font-weight: var(--umv-weight-bold);
}

/* El parrafo que abre va un paso por encima del que cierra: es lo que dice
  que se lea primero. */
.umv-story__lead {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: 1.1875rem;
  line-height: 1.9375rem;
}

.umv-story__text {
  margin: 0;
  color: var(--umv-navy-550);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.6875rem;
}

/* La foto llega hasta el borde de la pagina: el hueco del lado derecho se
  quita, como en el diseno. */
.umv-story__media {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: var(--umv-story-media);
  /* La esquina de adentro, la que da al texto, redondeada como la de la
    invitacion de la portada. Lo de dentro se recorta con ella: sin esto la
    foto pasaria por encima y la esquina no se veria. */
  border-top-left-radius: var(--umv-story-radius);
  overflow: hidden;
  background: var(--umv-lilac-100);
}

.umv-story__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Varias fotos en el hueco de la foto. Los puntos van centrados y en blanco,
  como los de la invitacion de la portada: las dos secciones ensenan fotos a
  sangre y tienen que moverse igual.

  Las dos clases juntas porque el aspecto de la galeria se declara mas abajo
  en este mismo archivo y, a igual peso, ganaria la ultima. */
.umv-gallery.umv-story__gallery {
  --umv-gallery-dot-active: var(--umv-color-highlight);
  --umv-gallery-dot: var(--umv-white);
  --umv-gallery-dot-bottom: 1.25rem;
  width: 100%;
  height: 100%;
}

.umv-story__gallery .umv-gallery__dots {
  left: 0;
  right: 0;
  justify-content: center;
}

/* Hueco a proposito: se ve que falta la foto. */
.umv-story__note {
  margin: 0;
  padding: 1rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  text-align: center;
}

/* La foto no cabe al lado de un texto de este ancho: pasa debajo, y entonces
  el texto recupera su hueco de la derecha. */
@media (max-width: 991.98px) {
  .umv-story {
    --umv-story-media: 20rem;
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
    padding-right: var(--umv-story-gutter);
  }

  .umv-story__body {
    width: auto;
  }
}

@media (max-width: 767.98px) {
  .umv-story {
    --umv-story-title-size: var(--umv-display-7-size);
    --umv-story-title-line: var(--umv-display-7-line);
  }
}

/* ============================================
  VALUE LIST
  ============================================ */

/* Los valores: lo que la seccion cuenta a un lado y, al otro, uno debajo de
  otro. Las medidas son las del diseno: 96px de aire, 400px de texto y 96px
  entre las dos columnas. */
.umv-values {
  --umv-values-space: clamp(3rem, 6.7vw, 6rem);
  --umv-values-gutter: 5%;
  --umv-values-gap: 6rem;
  --umv-values-intro: 25rem;
  --umv-values-title-size: 2.75rem;
  --umv-values-title-line: 3.25rem;
  --umv-values-mark: 3rem;
  --umv-values-line: var(--umv-lilac-150);
  display: flex;
  align-items: flex-start;
  gap: var(--umv-values-gap);
  padding: var(--umv-values-space) var(--umv-values-gutter);
  background: var(--umv-color-surface);
}

.umv-values__intro {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 1.125rem;
  width: var(--umv-values-intro);
  max-width: 100%;
}

/* El antetitulo: el mismo de las demas secciones, en la medida que pide este
  diseno. El color sale del azul de la marca rebajado, que es ese gris. */
.umv-values__eyebrow {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-values__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-values-title-size);
  line-height: var(--umv-values-title-line);
  font-weight: var(--umv-weight-bold);
}

/* La linea en cian: es lo que dice de que van los valores de al lado. */
.umv-values__subtitle {
  margin: 0;
  color: var(--umv-color-highlight);
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
  font-weight: var(--umv-weight-bold);
}

.umv-values__lead {
  margin: 0;
  color: var(--umv-navy-550);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.6875rem;
}

.umv-values__list {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La linea va donde se tocan dos valores, asi que la lleva cada uno menos el
  ultimo. */
.umv-value {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--umv-values-line);
}

.umv-value:last-child {
  border-bottom: 0;
}

/* El circulo espera su dibujo: mientras no llegue se queda el celeste solo,
  que es como lo trae el diseno. */
.umv-value__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--umv-values-mark);
  height: var(--umv-values-mark);
  border-radius: 50%;
  background: var(--umv-sky-100);
}

/* Dentro del circulo de 3rem. Los dibujos que mando la universidad son de
  trazo fino y con detalle, asi que a la mitad del circulo se leian chicos: se
  les deja el circulo casi entero, con su respiro alrededor. */
.umv-value__icon {
  width: 2rem;
  height: 2rem;
}

.umv-value__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.umv-value__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
  font-weight: var(--umv-weight-bold);
}

.umv-value__text {
  margin: 0;
  color: var(--umv-navy-550);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.625rem;
}

/* No caben los dos lados: la lista pasa debajo de lo que cuenta. */
@media (max-width: 991.98px) {
  .umv-values {
    flex-direction: column;
    gap: 2.5rem;
  }

  .umv-values__intro {
    width: auto;
  }

  .umv-values__list {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .umv-values {
    --umv-values-title-size: var(--umv-display-7-size);
    --umv-values-title-line: var(--umv-display-7-line);
  }
}

/* ============================================
  CAMPUS NETWORK
  ============================================ */

/* Las universidades de la red: el encabezado y, debajo, una tarjeta por cada
  una. Las medidas son las del diseno: 96px de aire, 44/52 el encabezado y
  24px entre tarjetas. */
.umv-network {
  --umv-network-space: clamp(3rem, 6.7vw, 6rem);
  --umv-network-gutter: 5%;
  --umv-network-gap: 1.5rem;
  --umv-network-columns: 4;
  --umv-network-title-size: 2.75rem;
  --umv-network-title-line: 3.25rem;
  --umv-network-title-width: 33.3125rem;
  --umv-network-lead-width: 55.6875rem;
  --umv-network-pad: 1.75rem;
  padding: var(--umv-network-space) var(--umv-network-gutter);
  background: var(--umv-sky-50);
}

.umv-network__inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.umv-network__intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* El antetitulo: el mismo de las demas secciones, en la medida que pide este
  diseno. El color sale del azul de la marca rebajado, que es ese gris. */
.umv-network__eyebrow {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-network__title {
  max-width: var(--umv-network-title-width);
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-network-title-size);
  line-height: var(--umv-network-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-network__lead {
  max-width: var(--umv-network-lead-width);
  margin: 0.75rem 0 0;
  color: var(--umv-color-brand-dark);
  font-size: 1.0625rem;
  line-height: 1.75rem;
}

/* Todas del mismo alto aunque una tenga el nombre mas largo que otra. */
.umv-network__list {
  display: grid;
  grid-template-columns: repeat(var(--umv-network-columns), minmax(0, 1fr));
  gap: var(--umv-network-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-campus {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: var(--umv-network-pad);
  background: var(--umv-color-surface);
}

/* La de esta pagina: en el cian de la marca, para que se vea cual es sin
  tener que leer el aviso. */
.umv-campus--current {
  background: var(--umv-color-highlight);
  color: var(--umv-color-on-dark);
}

/* La que todavia no esta confirmada: solo su contorno. */
.umv-campus--pending {
  background: none;
  outline: 1px solid var(--umv-lilac-300);
  outline-offset: -1px;
}

/* El hueco de la marca: mientras no llegue se queda con la palabra dentro,
  como en el diseno. */
.umv-campus__logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 3.75rem;
  /* La misma esquina que el resto de las cajas del sitio: con marcas de
    verdad dentro, el rectangulo a escuadra se veia pegado. */
  border-radius: 0.5rem;
  background: var(--umv-lilac-100);
}

/* Con marca de verdad el hueco se estira a lo ancho de la tarjeta: las
  marcas de la red son apaisadas -cinco veces mas anchas que altas- y en el
  recuadro del diseno, pensado para la palabra "Logo", el nombre de la
  universidad no se leeria. Lo alto no cambia. */
.umv-campus__logo--mark {
  width: 100%;
  padding: 0.5rem 0.75rem;
}

/* La marca que trae su propio fondo dentro del archivo -la de Monterrey, que
  es el sello sobre amarillo y el nombre sobre gris- va sin recuadro: el gris
  de las demas le quedaba como un marco de otro color y la dejaba chica. Se
  queda sola, a lo alto del hueco y pegada a la izquierda, como las otras
  marcas. */
.umv-campus__logo--fill {
  justify-content: flex-start;
  padding: 0;
  background: none;
}

.umv-campus__logo--fill .umv-campus__image {
  width: auto;
  /* El tope de las demas marcas es el alto del recuadro; esta no lo lleva. */
  max-height: none;
  /* Un poco mas alta que el hueco, que sin recuadro se le ve el aire de
    sobra. Lo que crece se lo come el margen negativo, de modo que la tarjeta
    mide lo mismo que las demas y los nombres siguen a la misma altura. */
  height: 4.5rem;
  margin-block: -0.375rem;
}

/* La nuestra, con mas aire: va sobre el azul oscuro y pegada a los bordes no
  se veia el recuadro, solo la marca. */
.umv-campus--current .umv-campus__logo--mark {
  padding: 0.75rem 1.25rem;
}

/* En la nuestra la marca es la del encabezado: el nombre va en blanco y el
  final en cian, asi que ni sobre blanco ni sobre el cian de la tarjeta se
  leeria entera. El hueco se pinta del azul oscuro del encabezado, que es
  donde esa marca esta hecha para verse. */
.umv-campus--current .umv-campus__logo {
  background: var(--umv-color-brand-dark);
}

.umv-campus__image {
  max-width: 100%;
  max-height: 100%;
}

.umv-campus__pending {
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-small-size);
}

.umv-campus__name {
  margin: 0;
  font-size: var(--umv-display-4-size);
  line-height: 1.625rem;
  font-weight: var(--umv-weight-bold);
}

.umv-campus__city {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-campus--current .umv-campus__name,
.umv-campus--current .umv-campus__city {
  color: var(--umv-color-on-dark);
}

/* El enlace y el aviso van al pie, asi que lo que sobra queda encima. */
.umv-campus__link,
.umv-campus__here {
  margin: auto 0 0;
}

.umv-campus__link {
  color: var(--umv-color-highlight);
  font-size: var(--umv-paragraph-default-size);
  font-weight: var(--umv-weight-semibold);
  text-decoration: none;
}

.umv-campus__link:hover,
.umv-campus__link:focus-visible {
  text-decoration: underline;
}

/* Mientras no haya direccion no se puede pulsar, y se nota. */
.umv-campus__link--muted {
  opacity: 0.55;
}

.umv-campus__here {
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  background: var(--umv-sand-50);
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-small-size);
  font-weight: var(--umv-weight-bold);
}

/* No es una universidad, asi que no lleva tarjeta: solo el aviso de que falta
  la marca de la red. */
.umv-network__note {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--umv-network-pad) 1.5rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  text-align: center;
}

@media (max-width: 1199.98px) {
  .umv-network {
    --umv-network-columns: 2;
  }
}

@media (max-width: 575.98px) {
  .umv-network {
    --umv-network-columns: 1;
    --umv-network-title-size: var(--umv-display-7-size);
    --umv-network-title-line: var(--umv-display-7-line);
  }
}

/* ============================================
  STATEMENT BAND
  ============================================ */

/* La franja donde la universidad dice lo suyo: la frase a un lado y lo que la
  explica al otro, pasada una linea. Las medidas son las del diseno: 112px de
  aire, 640px de frase y 42/54 su tamano. */
.umv-statement {
  --umv-statement-space: clamp(3.5rem, 7.8vw, 7rem);
  --umv-statement-gutter: 5%;
  --umv-statement-gap: 2.5rem;
  --umv-statement-head: 40rem;
  --umv-statement-title-size: 2.625rem;
  --umv-statement-title-line: 3.375rem;
  --umv-statement-line: var(--umv-navy-650);
  position: relative;
  overflow: hidden;
  background: var(--umv-color-bg-dark);
  color: var(--umv-color-on-dark);
}

/* Pegada al lado de la frase y mas alta que la franja: se sale por arriba y
  por abajo, que es como la trae el diseno. */
.umv-statement__watermark {
  position: absolute;
  top: 50%;
  left: 0;
  height: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}

.umv-statement__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--umv-statement-gap);
  padding: var(--umv-statement-space) var(--umv-statement-gutter);
}

.umv-statement__head {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 1.25rem;
  width: var(--umv-statement-head);
  max-width: 100%;
}

/* El antetitulo sobre oscuro: el lila claro del diseno, que se lee sin
  competir con la frase. */
.umv-statement__eyebrow {
  margin: 0;
  color: var(--umv-lilac-200);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-statement__title {
  margin: 0;
  color: var(--umv-color-on-dark);
  font-size: var(--umv-statement-title-size);
  line-height: var(--umv-statement-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-statement__accent {
  color: var(--umv-gold-450);
}

/* La explicacion arranca un poco mas abajo que la frase, como en el diseno. */
.umv-statement__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.75rem;
  min-width: 0;
  padding-top: 2.25rem;
  padding-left: 2.5rem;
  border-left: 1px solid var(--umv-statement-line);
}

.umv-statement__text {
  margin: 0;
  color: var(--umv-lilac-200);
  font-size: 1.0625rem;
  line-height: 1.8125rem;
}

/* No caben los dos lados: la explicacion pasa debajo y la linea se cruza. */
@media (max-width: 991.98px) {
  .umv-statement__inner {
    flex-direction: column;
  }

  .umv-statement__head {
    width: auto;
  }

  .umv-statement__body {
    padding-top: 1.75rem;
    padding-left: 0;
    border-top: 1px solid var(--umv-statement-line);
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .umv-statement {
    --umv-statement-title-size: var(--umv-display-7-size);
    --umv-statement-title-line: var(--umv-display-7-line);
  }

  /* En un telefono la marca de agua se come la frase: fuera. */
  .umv-statement__watermark {
    display: none;
  }
}

/* ============================================
  TRAIT ROW
  ============================================ */

/* Los rasgos de la identidad marista: el encabezado y, debajo, los siete en
  renglon, separados por una linea. */
.umv-traits {
  --umv-traits-space: clamp(3rem, 6.7vw, 6rem);
  --umv-traits-gutter: 5%;
  --umv-traits-gap: 3.5rem;
  /* Lo que necesita un rasgo para leerse. Mientras quepan siguen en renglon y,
    cuando ya no, bajan los que sobran: el diseno los quiere en linea. */
  --umv-traits-min: 9.5rem;
  --umv-traits-pad: 1.375rem;
  --umv-traits-mark: 2.5rem;
  --umv-traits-title-size: 2.75rem;
  --umv-traits-title-line: 3.25rem;
  --umv-traits-line: var(--umv-sand-200);
  padding: var(--umv-traits-space) var(--umv-traits-gutter);
  background: var(--umv-sand-75);
}

.umv-traits__inner {
  display: flex;
  flex-direction: column;
  gap: var(--umv-traits-gap);
  /* Recorta la linea del primer rasgo de cada renglon, que se sale por la
    izquierda. Ver .umv-traits__list. */
  overflow: hidden;
}

.umv-traits__intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* El antetitulo: el mismo de las demas secciones, en la medida que pide este
  diseno. El color sale del azul de la marca rebajado, que es ese gris. */
.umv-traits__eyebrow {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-traits__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-traits-title-size);
  line-height: var(--umv-traits-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-traits__lead {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: 1.0625rem;
  line-height: 1.75rem;
}

/* Se reparten solos: caben los que caben y los demas bajan al renglon
  siguiente, sin cortes fijos por ancho de pantalla. La fila entera se corre a
  la izquierda lo que mide el hueco de un rasgo mas su linea, de modo que el
  primero de cada renglon queda a ras del encabezado y su linea se recorta. */
.umv-traits__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--umv-traits-min), 1fr));
  row-gap: 2rem;
  margin: 0 0 0 calc(-1 * (var(--umv-traits-pad) + 1px));
  padding: 0;
  list-style: none;
}

/* La linea va donde se tocan dos rasgos. */
.umv-trait {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.25rem var(--umv-traits-pad) 0;
  border-left: 1px solid var(--umv-traits-line);
}

.umv-trait__number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--umv-traits-mark);
  height: var(--umv-traits-mark);
  border-radius: 50%;
  background: var(--umv-gold-450);
  color: var(--umv-color-on-dark);
  font-size: var(--umv-display-4-size);
  font-weight: var(--umv-weight-bold);
}

.umv-trait__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.5rem;
  font-weight: var(--umv-weight-bold);
}

.umv-trait__text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

@media (max-width: 575.98px) {
  .umv-traits {
    /* En un telefono no cabe ni uno al lado de otro: cada rasgo a su renglon,
      y sin lineas, que ahi no separan nada. */
    --umv-traits-min: 100%;
    --umv-traits-title-size: var(--umv-display-7-size);
    --umv-traits-title-line: var(--umv-display-7-line);
  }

  .umv-traits__list {
    margin-left: 0;
  }

  .umv-trait {
    padding-left: 0;
    border-left: 0;
  }
}

/* ============================================
  PANEL GRID
  ============================================ */

.umv-panels {
  --umv-panels-width: 100%;
  --umv-panels-gutter: 5%;
  --umv-panels-space: clamp(2.5rem, 5vw, 4rem);
  --umv-panels-gap: 1.25rem;
  --umv-panels-pad: clamp(1.25rem, 2.5vw, 2rem);
  --umv-panels-radius: 0.75rem;
  --umv-panels-media: clamp(9rem, 18vw, 12rem);
  /* La tarjeta ancha es mas alta que las de una columna, que es lo que deja
    ver el texto apoyado en el fondo. */
  --umv-panels-media-wide: clamp(12rem, 20vw, 17rem);
  --umv-panels-title-size: var(--umv-display-6-size);
  --umv-panels-title-line: var(--umv-display-6-line);
}

.umv-panels__inner {
  max-width: var(--umv-panels-width);
  margin: 0 auto;
  padding: var(--umv-panels-space) var(--umv-panels-gutter);
}

.umv-panels__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  color: var(--umv-color-brand-dark);
}

.umv-panels__title {
  margin: 0 0 0.75rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-panels-title-size);
  line-height: var(--umv-panels-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-panels__lead {
  max-width: 48rem;
  margin: 0;
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-panels__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--umv-panels-gap);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.umv-panel {
  display: flex;
  flex-direction: column;
  /* La foto llega hasta el filo de la tarjeta, asi que lo que sobresalga se
    recorta con su misma esquina redondeada. */
  overflow: hidden;
  border: 1px solid var(--umv-color-divider);
  border-radius: var(--umv-panels-radius);
  background: var(--umv-color-surface);
}

/* A lo ancho de la rejilla: entonces las dos piezas van una al lado de la otra
  y el texto se apoya en el fondo, como en el diseno. */
.umv-panel--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.umv-panel__body {
  padding: var(--umv-panels-pad);
}

.umv-panel--wide .umv-panel__body {
  align-self: end;
}

.umv-panel__mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--umv-color-divider);
  border-radius: 0.5rem;
  color: var(--umv-color-muted);
  font-size: 1.25rem;
}

.umv-panel__title {
  margin: 0 0 0.5rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-large-line);
  font-weight: var(--umv-weight-bold);
}

.umv-panel__text {
  margin: 0;
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* En la tarjeta de una columna la foto se queda dentro del margen; en la
  ancha ocupa su mitad de filo a filo. */
.umv-panel__media {
  display: grid;
  place-items: center;
  min-height: var(--umv-panels-media);
  margin: 0 var(--umv-panels-pad) var(--umv-panels-pad);
  border-radius: calc(var(--umv-panels-radius) / 2);
  background: var(--umv-gray-100);
}

.umv-panel--wide .umv-panel__media {
  min-height: var(--umv-panels-media-wide);
  margin: 0;
  border-radius: 0;
}

/* La foto, o lo que cuenta, primero. Se cambia el orden y no el marcado para
  que lo que se lee siga llegando en el mismo orden a quien escucha la pagina. */
.umv-panel--media-start .umv-panel__body {
  order: 2;
}

.umv-panel--media-start .umv-panel__media {
  order: 1;
  margin: var(--umv-panels-pad) var(--umv-panels-pad) 0;
}

.umv-panel--wide.umv-panel--media-start .umv-panel__media {
  margin: 0;
}

/* Las tarjetas de una columna crecen hasta el alto de su fila, asi que la foto
  se queda con lo que sobra y las dos acaban a la misma altura. */
.umv-panel:not(.umv-panel--wide) .umv-panel__media {
  flex: 1;
}

.umv-panel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.umv-panel__placeholder {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--umv-color-border);
  border-radius: 0.5rem;
  background: var(--umv-color-surface);
  color: var(--umv-color-muted);
  font-size: 1.125rem;
}

@media (max-width: 767.98px) {
  /* A una columna: cada tarjeta ocupa el ancho y la foto se va debajo de lo
    que cuenta, que es el orden en que se lee. */
  .umv-panels__list,
  .umv-panel--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-panel--wide .umv-panel__media,
  .umv-panel--wide.umv-panel--media-start .umv-panel__media {
    margin: 0 var(--umv-panels-pad) var(--umv-panels-pad);
    border-radius: calc(var(--umv-panels-radius) / 2);
  }

  .umv-panel--media-start .umv-panel__body {
    order: 0;
  }

  .umv-panel--media-start .umv-panel__media {
    order: 0;
    margin: 0 var(--umv-panels-pad) var(--umv-panels-pad);
  }
}

.umv-feature-card__image_top {
  object-position: top;
}

/* ============================================
  SPOTLIGHT
  ============================================ */

.umv-spotlight {
  --umv-spotlight-width: 100%;
  --umv-spotlight-gutter: 5%;
  --umv-spotlight-space: clamp(2.5rem, 5vw, 4rem);
  --umv-spotlight-gap: clamp(2rem, 5vw, 4rem);
  --umv-spotlight-list: 20rem;
  --umv-spotlight-title-size: var(--umv-display-6-size);
  --umv-spotlight-title-line: var(--umv-display-6-line);
}

.umv-spotlight__inner {
  max-width: var(--umv-spotlight-width);
  margin: 0 auto;
  padding: var(--umv-spotlight-space) var(--umv-spotlight-gutter);
}

.umv-spotlight__title {
  margin: 0 0 1.25rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-spotlight-title-size);
  line-height: var(--umv-spotlight-title-line);
  font-weight: var(--umv-weight-bold);
}

/* La entrada va a dos columnas, como en el diseno; cuando no caben, se apilan
  solas sin pedirle permiso a ninguna media query. */
.umv-spotlight__intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--umv-spotlight-gap);
}

.umv-spotlight__text {
  margin: 0;
  color: var(--umv-navy-800);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* Dos mitades, como en el diseno: la foto mide lo mismo que la columna de la
  lista, y no lo que sobre. Si se le diera el resto del ancho, en una pantalla
  grande saldria una foto enorme que no se parece en nada a lo entregado. */
.umv-spotlight__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--umv-spotlight-gap);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* La lista: un renglon por deporte, separados por una linea, y el abierto en
  negrita con su flecha. */
.umv-spotlight__tabs {
  --umv-tabs-color: var(--umv-slate-500);
  --umv-tabs-active: var(--umv-color-brand-dark);
  --umv-tabs-size: var(--umv-paragraph-default-size);
  --umv-tabs-line: var(--umv-paragraph-default-line);
  --umv-tabs-gap: 0;
  align-items: stretch;
  /* Los renglones no se estiran con la columna: miden lo que el diseno, y sus
    lineas acaban con ellos. */
  max-width: var(--umv-spotlight-list);
  margin: 0;
}

.umv-spotlight__tabs .umv-tabs__item + .umv-tabs__item {
  border-top: 1px solid var(--umv-color-divider);
}

/* El renglon ocupa el ancho y deja sitio a la flecha a la derecha: asi el
  nombre no se mueve al cambiar de deporte. */
.umv-spotlight__tabs .umv-tabs__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.875rem 0;
  border-bottom: 0;
  text-align: left;
}

/* La flecha del renglon abierto. Es adorno -lo que dice cual esta abierto es
  `aria-selected`-, asi que se pinta con el tipo de iconos y no con un elemento
  que un lector de pantalla tendria que ignorar. */
.umv-spotlight__tabs .umv-tabs__link.active::after {
  content: "\f138";
  font-family: bootstrap-icons, sans-serif;
  font-size: 1rem;
  line-height: 1;
}

.umv-photo-note {
  /* De pie, que es como va al lado de una lista; quien la use a lo ancho
    cambia esta proporcion y nada mas. */
  --umv-photo-note-ratio: 0.9;
  /* La proporcion manda mientras la foto sea chica, pero en una pantalla
    grande crecer a lo alto sin tope la convierte en un muro: a partir de aqui
    deja de subir y solo se ensancha. */
  --umv-photo-note-max: 30rem;
  position: relative;
  display: grid;
  place-items: center;
  /* El ancho se pide a parte para que mandar el alto no la encoja tambien de
    lado: con el ancho fijado, la proporcion solo decide el alto y el tope lo
    recorta. */
  width: 100%;
  aspect-ratio: var(--umv-photo-note-ratio);
  max-height: var(--umv-photo-note-max);
  overflow: hidden;
  margin: 0;
  background: var(--umv-gray-100);
}

.umv-photo-note__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.umv-photo-note__placeholder {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--umv-color-border);
  border-radius: 0.5rem;
  background: var(--umv-color-surface);
  color: var(--umv-color-muted);
  font-size: 1.25rem;
}

/* El velo que hace legible la frase sobre la foto. Va de transparente a oscuro
  para que la mitad de arriba se siga viendo entera. */
.umv-photo-note__text {
  position: relative;
  align-self: end;
  width: 100%;
  padding: clamp(3rem, 10vw, 6rem) clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(to bottom, transparent, rgba(10, 4, 47, 0.85));
  color: var(--umv-color-on-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* La foto sola va a lo ancho del contenido, asi que se tumba: con la
  proporcion de las de la lista saldria una columna altisima. */
.umv-spotlight__media {
  --umv-photo-note-ratio: 1.8;
  --umv-photo-note-max: 32rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 767.98px) {
  /* A una columna: la lista se queda arriba y la foto debajo. */
  .umv-spotlight__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Tan estrecha, una foto apaisada se queda en una tira: se endereza. */
  .umv-spotlight__media {
    --umv-photo-note-ratio: 1.1;
  }
}

/* ============================================
  QUOTE BAND
  ============================================ */

/* La frase que cierra una seccion, centrada sobre el degradado. La franja
  cruza la pantalla de lado a lado y lo que se queda en su medida es el
  texto. */
.umv-quote-band {
  /* 200px de margen a 1440, que es lo que deja el diseno para que la frase no
    cruce la pantalla de orilla a orilla. */
  --umv-quote-band-gutter: clamp(1.5rem, 13.9vw, 12.5rem);
  --umv-quote-band-space: clamp(3.5rem, 7.8vw, 7rem);
  /* La frase y su linea llegan de margen a margen: lo que las estrecha es el
    margen de la franja, no una medida suya. */
  --umv-quote-band-quote: 100%;
  --umv-quote-band-note: 100%;
  background: linear-gradient(180deg, var(--umv-navy-750) 0%, var(--umv-color-brand-dark) 100%);
  color: var(--umv-color-on-dark);
  /* La marca de agua va colocada sobre la franja y lo que sobresalga se
    recorta aqui, que es lo que la deja asomar por el borde de arriba. */
  position: relative;
  overflow: hidden;
}

.umv-quote-band__inner {
  /* Por delante de la marca de agua. El `z-index` no sobra: la marca va
    colocada y el texto no, y entre esos dos el navegador pinta primero el
    texto y encima lo colocado, por mucho que la marca vaya antes en el HTML.
    Sin esto el dibujo se ve POR ENCIMA de la frase y le ensucia el blanco. */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: var(--umv-quote-band-space) var(--umv-quote-band-gutter);
  text-align: center;
}

/* La marca de agua: detras del texto, centrada y tan alta como la franja. Es
  adorno, asi que no se lee ni se puede pulsar. */
.umv-quote-band__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  /* Detras del texto, no delante. */
  z-index: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.umv-quote-band__quote {
  max-width: var(--umv-quote-band-quote);
  margin: 0;
}

/* 34px del diseno, que no esta en la escala de titulares: la frase va entre
  el de 30 y el de 36. */
.umv-quote-band__text {
  margin: 0;
  font-size: 2.125rem;
  line-height: 2.75rem;
  font-weight: var(--umv-weight-semibold);
}

.umv-quote-band__note {
  max-width: var(--umv-quote-band-note);
  margin: 0;
  color: var(--umv-lilac-200);
  font-size: 1.0625rem;
  line-height: 1.75rem;
}

@media (max-width: 767.98px) {
  /* En un telefono el margen del diseno deja la frase en una columna muy
    angosta: vuelve al del resto de la pagina. */
  .umv-quote-band {
    --umv-quote-band-gutter: 5%;
  }

  /* Tan alta como la franja, la marca se sale a lo ancho de la pantalla y se
    come la frase: aqui manda el ancho. */
  .umv-quote-band__mark {
    width: 100%;
    height: auto;
  }

  .umv-quote-band__text {
    font-size: var(--umv-display-6-size);
    line-height: var(--umv-display-6-line);
  }
}

/* ============================================
  COURSE LIST
  ============================================ */

/* La oferta de cursos: el encabezado y, debajo, cada grupo con su nombre a la
  izquierda y sus tarjetas a la derecha. Las medidas son las del diseno: 104
  de aire arriba y abajo, 40 entre bloques, 260 la columna del nombre y 48
  hasta las tarjetas. */
.umv-courses {
  --umv-courses-width: 100%;
  --umv-courses-gutter: 5%;
  --umv-courses-space: clamp(3.5rem, 7.2vw, 6.5rem);
  --umv-courses-label: 16.25rem;
  --umv-courses-aside: 3rem;
  --umv-courses-gap: 1rem;
  --umv-courses-columns: 4;
  --umv-courses-head: 49.125rem;  /* 786px */
  --umv-courses-title-size: 2.375rem;
  --umv-courses-title-line: 2.75rem;
  --umv-courses-line: var(--umv-sand-150);
  background: var(--umv-color-bg);
}

.umv-courses__inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: var(--umv-courses-width);
  margin: 0 auto;
  padding: var(--umv-courses-space) var(--umv-courses-gutter);
}

/* El encabezado se queda corto a proposito: el diseno lo para antes del borde
  para que no cruce la pagina de lado a lado. */
.umv-courses__head {
  max-width: var(--umv-courses-head);
}

/* El antetitulo: el mismo de las demas secciones del centro. */
.umv-courses__eyebrow-section {
  margin: 0 0 0.75rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-courses__title {
  margin: 0 0 0.75rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-courses-title-size);
  line-height: var(--umv-courses-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-courses__text {
  margin: 0;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.7;
}

.umv-courses__group {
  display: grid;
  grid-template-columns: var(--umv-courses-label) minmax(0, 1fr);
  gap: var(--umv-courses-aside);
}

.umv-courses__group-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.umv-courses__group-label {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: var(--umv-weight-bold);
}

.umv-courses__group-text {
  margin: 0;
  color: var(--umv-navy-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-courses__grid {
  display: grid;
  grid-template-columns: repeat(var(--umv-courses-columns), minmax(0, 1fr));
  gap: var(--umv-courses-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Los programas especializados van de dos en dos: su tarjeta es ancha. */
.umv-courses__grid--wide {
  --umv-courses-columns: 2;
}

/* La tarjeta del taller: el dibujo del idioma y, debajo, como se llama. */
.umv-courses__card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.5rem;
  background: var(--umv-color-surface);
  /* Con `outline` y no con `border` para que la raya no mueva nada de dentro
    ni un pixel. */
  outline: 1px solid var(--umv-courses-line);
  outline-offset: -1px;
}

/* La del programa: la foto a la izquierda, a toda la altura, y el texto al
  lado sobre el azul casi blanco. */
.umv-courses__card--wide {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  min-height: 15.625rem;  /* 250px del diseno */
  padding: 0;
  background: var(--umv-sky-50);
  outline: 0;
}

.umv-courses__icon {
  width: 2.75rem;
  height: 2.75rem;
}

/* El hueco del dibujo del curso: el mismo recuadro con el que se avisa en el
  resto del sitio de que la imagen todavia no esta. */
.umv-courses__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--umv-slate-500);
  border-radius: 0.25rem;
  background: var(--umv-color-surface);
  color: var(--umv-slate-500);
  font-size: 1.25rem;
}

/* En la tarjeta ancha el hueco no es un recuadro al lado del texto, sino la
  franja de la foto: va pegada a la orilla y ocupa todo el alto. */
.umv-courses__card--wide .umv-courses__mark {
  flex: none;
  width: 9.375rem;  /* 150px del diseno */
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--umv-lilac-150);
}

.umv-courses__card--wide .umv-courses__icon {
  flex: none;
  width: 9.375rem;
  height: auto;
  object-fit: cover;
}

.umv-courses__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.umv-courses__card--wide .umv-courses__body {
  flex: 1;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
}

.umv-courses__lead {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.umv-courses__eyebrow {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
  font-weight: var(--umv-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.umv-courses__name {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-4-size);
  line-height: var(--umv-display-4-line);
  font-weight: var(--umv-weight-bold);
}

.umv-courses__card--wide .umv-courses__name {
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
}

.umv-courses__note {
  margin: 0;
  color: var(--umv-navy-600);
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

/* Lo que todavia esta por definir del programa: en cursiva y en su recuadro,
  para que se vea que falta y no se lea como un dato mas. */
.umv-courses__details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0.625rem 0.875rem;
  background: var(--umv-sky-50);
  outline: 1px solid var(--umv-lilac-175);
  outline-offset: -1px;
  list-style: none;
}

.umv-courses__detail {
  color: var(--umv-navy-525);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-style: italic;
  font-weight: var(--umv-weight-light);
}

/* La nota de la oferta y el boton, separados del ultimo grupo por la linea. */
.umv-courses__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--umv-courses-line);
}

.umv-courses__fineprint {
  margin: 0;
  color: var(--umv-navy-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-style: italic;
}

.umv-courses__actions .umv-button {
  --umv-button-radius: 0.25rem;
  --umv-button-padding-block: 0.75rem;
  --umv-button-padding-inline: 1.375rem;
  --umv-button-line: 1.25rem;
  --umv-button-shadow: none;
  gap: 0.5rem;
  font-weight: var(--umv-weight-semibold);
}

@media (max-width: 1199.98px) {
  .umv-courses {
    --umv-courses-columns: 3;
  }
}

@media (max-width: 991.98px) {
  /* El nombre del grupo pasa encima de sus tarjetas: a esta anchura, una
    columna entera para dos palabras deja las tarjetas sin sitio. */
  .umv-courses__group {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .umv-courses {
    --umv-courses-columns: 2;
  }
}

@media (max-width: 575.98px) {
  .umv-courses {
    --umv-courses-columns: 1;
    --umv-courses-title-size: var(--umv-display-7-size);
    --umv-courses-title-line: var(--umv-display-7-line);
  }

  .umv-courses__grid--wide {
    --umv-courses-columns: 1;
  }

  /* La foto del programa no cabe al lado del texto: pasa arriba. */
  .umv-courses__card--wide {
    flex-direction: column;
  }

  .umv-courses__card--wide .umv-courses__mark,
  .umv-courses__card--wide .umv-courses__icon {
    width: 100%;
    height: 8rem;
  }
}

/* ============================================
  CERTIFICATION BOARD
  ============================================ */

/* Las certificaciones del centro: el encabezado y, debajo, los tres bloques
  que las cuentan. El aire entre ellos lo pone la seccion, no cada bloque. Las
  medidas son las del diseno: 104/112 de aire y 72 entre bloques. */
.umv-cert-board {
  --umv-cert-board-width: 100%;
  --umv-cert-board-gutter: 5%;
  --umv-cert-board-space-top: clamp(3.5rem, 7.2vw, 6.5rem);
  --umv-cert-board-space-bottom: clamp(3.5rem, 7.8vw, 7rem);
  --umv-cert-board-gap: 4.5rem;
  --umv-cert-board-title-size: 2.375rem;
  --umv-cert-board-title-line: 2.75rem;
  --umv-cert-board-line: var(--umv-sand-150);
  background: var(--umv-sand-75);
}

.umv-cert-board__inner {
  display: flex;
  flex-direction: column;
  gap: var(--umv-cert-board-gap);
  max-width: var(--umv-cert-board-width);
  margin: 0 auto;
  padding: var(--umv-cert-board-space-top) var(--umv-cert-board-gutter)
    var(--umv-cert-board-space-bottom);
}

/* El antetitulo: el mismo de las demas secciones del centro. */
.umv-cert-board__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-cert-board__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-cert-board-title-size);
  line-height: var(--umv-cert-board-title-line);
  font-weight: var(--umv-weight-bold);
}

/* ===== Lo que acredita al centro ======================================== */

/* De que va a la izquierda y, a la derecha, el ano y los reconocimientos. */
.umv-credential {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 38.75rem);  /* 620px */
  align-items: center;
  gap: 4rem;
}

.umv-credential__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.umv-credential__eyebrow {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-credential__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: 1.625rem;
  line-height: 2.125rem;
  font-weight: var(--umv-weight-bold);
}

.umv-credential__text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.7;
}

/* El ano y las notas se reparten la mitad derecha. */
.umv-credential__aside {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
}

/* El ano, sobre el dorado de la marca y con su marca de agua detras. */
.umv-credential__mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.625rem;
  margin: 0;
  padding: 2.5rem 2rem;
  /* La marca de agua va colocada sobre la tarjeta y lo que sobresalga se
    recorta aqui. */
  position: relative;
  overflow: hidden;
  background: var(--umv-gold-450);
  color: var(--umv-color-on-dark);
}

/* Detras del dato, no delante: va antes en el HTML, pero entre un elemento
  colocado y texto normal el navegador pinta el texto primero. */
.umv-credential__watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  pointer-events: none;
}

.umv-credential__lead,
.umv-credential__value,
.umv-credential__mark-label {
  position: relative;
  z-index: 1;
}

.umv-credential__lead {
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
  font-weight: var(--umv-weight-semibold);
}

.umv-credential__value {
  color: var(--umv-sand-50);
  font-size: 4rem;
  line-height: 4rem;
  font-weight: var(--umv-weight-extrabold);
}

.umv-credential__mark-label {
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
  font-weight: var(--umv-weight-semibold);
}

.umv-credential__notes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-credential__note {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--umv-color-surface);
  /* Con `outline` y no con `border` para que la raya no mueva nada de dentro
    ni un pixel. */
  outline: 1px solid var(--umv-cert-board-line);
  outline-offset: -1px;
}

.umv-credential__note-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.umv-credential__note-title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-4-size);
  line-height: var(--umv-display-4-line);
  font-weight: var(--umv-weight-bold);
}

.umv-credential__note-text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

@media (max-width: 1199.98px) {
  /* El texto y lo que lo acredita, uno debajo de otro: en esta anchura el
    parrafo se quedaba en una columna de dos palabras por renglon. */
  .umv-credential {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 767.98px) {
  .umv-credential__aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Las certificaciones que aplica =================================== */

.umv-certs__title {
  margin: 0 0 0.75rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-5-size);
  line-height: 1.75rem;
  font-weight: var(--umv-weight-semibold);
}

.umv-certs__list {
  display: grid;
  /* Las dos del logotipo se reparten lo que sobra y la de las sesiones mide
    los 396px del diseno. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 24.75rem);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-certs__card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 2rem;
  background: var(--umv-color-surface);
  outline: 1px solid var(--umv-cert-board-line);
  outline-offset: -1px;
}

/* La del logotipo: el dibujo arriba, lo que falta por definir en medio y la
  descripcion al pie, repartidos a lo alto como en el diseno. */
.umv-certs__card--logo {
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2.25rem;
  outline-color: var(--umv-sand-200);
}

.umv-certs__logo {
  width: 10.0625rem;  /* 161px del diseno */
  height: auto;
}

/* El nombre lo dice el logotipo: se deja para quien escucha la pagina, pero
  no se ve. */
.umv-certs__name--quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.umv-certs__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--umv-sky-100);
  color: var(--umv-color-highlight);
  font-size: 1.25rem;
}

.umv-certs__eyebrow {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
  font-weight: var(--umv-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.umv-certs__name {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
  font-weight: var(--umv-weight-bold);
}

.umv-certs__text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.7;
}

.umv-certs__card--light .umv-certs__text {
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

/* Lo que todavia esta por definir: en cursiva y en su recuadro, para que se
  vea que falta y no se lea como un dato mas. */
.umv-certs__details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-radius: 0.25rem;
  background: var(--umv-sky-50);
  outline: 1px solid var(--umv-lilac-175);
  outline-offset: -1px;
  list-style: none;
}

.umv-certs__detail {
  color: var(--umv-navy-525);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-style: italic;
  font-weight: var(--umv-weight-light);
}

.umv-certs__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.625rem;
  padding-top: 0.375rem;
}

.umv-certs__button {
  --umv-button-bg: var(--umv-color-surface);
  --umv-button-color: var(--umv-cyan-500);
  --umv-button-border: var(--umv-cyan-500);
  --umv-button-hover-bg: var(--umv-cyan-500);
  --umv-button-hover-color: var(--umv-color-on-dark);
  --umv-button-radius: 0.25rem;
  --umv-button-padding-block: 0.75rem;
  --umv-button-padding-inline: 1.375rem;
  --umv-button-size: var(--umv-paragraph-default-size);
  --umv-button-line: 1.25rem;
  --umv-button-shadow: none;
  gap: 0.5rem;
  justify-content: flex-start;
  font-weight: var(--umv-weight-semibold);
}

@media (max-width: 991.98px) {
  .umv-certs__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Las certificaciones que prepara ================================== */

.umv-credential-strip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* El aire de arriba lo pone la seccion; aqui no hace falta linea. */
.umv-credential-strip--divided {
  padding-top: 0.5rem;
}

.umv-credential-strip__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: 1.625rem;
  line-height: 2.125rem;
  font-weight: var(--umv-weight-bold);
}

.umv-credential-strip__text {
  /* La medida del diseno: la frase se para antes del borde. */
  max-width: 51.25rem;
  margin: 0;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.7;
}

/* Todos en una sola tarjeta, con la linea entre uno y otro: el ultimo no la
  lleva, que si no se ve un borde doble con el de la tarjeta. */
.umv-credential-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-self: stretch;
  margin: 0.5rem 0 0;
  padding: 2.25rem 0;
  background: var(--umv-color-surface);
  outline: 1px solid var(--umv-cert-board-line);
  outline-offset: -1px;
  list-style: none;
}

.umv-credential-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding-inline: 1.5rem;
  border-left: 1px solid var(--umv-cert-board-line);
  text-align: center;
}

.umv-credential-strip__item:first-child {
  border-left: 0;
}

.umv-credential-strip__logo {
  width: 15rem;  /* 240px del diseno */
  max-width: 100%;
  height: auto;
}

/* El nombre lo dice el logotipo: se deja para quien escucha la pagina, pero
  no se ve. */
.umv-credential-strip__name--quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.umv-credential-strip__name {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
  font-weight: var(--umv-weight-bold);
}

/* Lo que el logotipo no dice: al pie y arrimado a la derecha, como en el
  diseno. */
.umv-credential-strip__caption {
  align-self: stretch;
  margin: 0;
  color: var(--umv-ink-900);
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-bold);
  text-align: end;
}

.umv-credential-strip__note {
  margin: 0;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* Lo que queda por decidir de este bloque: en cursiva y en su recuadro. */
.umv-credential-strip__pending {
  align-self: stretch;
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--umv-sky-50);
  outline: 1px solid var(--umv-lilac-175);
  outline-offset: -1px;
  color: var(--umv-navy-525);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-style: italic;
  font-weight: var(--umv-weight-light);
}

@media (max-width: 767.98px) {
  /* De dos en dos: cuatro logotipos en una pantalla de telefono se quedan sin
    sitio. La linea pasa a separar renglones. */
  .umv-credential-strip__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 0;
  }

  .umv-credential-strip__item:nth-child(2n+1) {
    border-left: 0;
  }
}

@media (max-width: 575.98px) {
  .umv-cert-board {
    --umv-cert-board-title-size: var(--umv-display-7-size);
    --umv-cert-board-title-line: var(--umv-display-7-line);
  }

  .umv-credential-strip__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-credential-strip__item {
    border-left: 0;
  }
}

/* ============================================
  DATA TABLE - EN TARJETA
  ============================================ */

/* La tabla de los resultados: en una tarjeta blanca sobre el blanco de la
  pagina, con el encabezado en azul marino. Es la misma tabla, solo cambia de
  ropa. Las medidas son las del diseno: 104 de aire arriba y abajo, 40 entre
  bloques y 32 de relleno en cada renglon. */
.umv-table--plain {
  --umv-table-grid-width: 100%;
  --umv-table-head-bg: var(--umv-color-brand-dark);
  --umv-table-head-color: var(--umv-color-on-dark);
  --umv-table-border: var(--umv-sand-150);
  /* 24 entre columnas, que es la mitad a cada lado, y 32 en los dos bordes
    de la tarjeta. */
  --umv-table-pad-x: 0.75rem;
  --umv-table-edge: 2rem;
  --umv-table-pad-y: 1rem;
  --umv-table-title-size: 2.375rem;
  --umv-table-title-line: 2.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  padding-block: clamp(3.5rem, 7.2vw, 6.5rem);
  background: var(--umv-color-bg);
}

/* El encabezado a un lado y su frase al otro, apoyados en el mismo pie. */
.umv-table--plain .umv-table__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 33.6875rem);  /* 539px */
  align-items: end;
  align-self: stretch;
  column-gap: 5rem;
}

.umv-table--plain .umv-table__lead {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* El antetitulo: el mismo de las demas secciones del centro. */
.umv-table--plain .umv-table__eyebrow {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-table--plain .umv-table__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-weight: var(--umv-weight-bold);
}

.umv-table__text {
  margin: 0;
  color: var(--umv-navy-600);
  font-size: var(--umv-paragraph-medium-size);
  line-height: 1.7;
}

/* El aviso de antes de la tabla: en su pastilla azul claro, del ancho de lo
  que dice y no de la pagina. */
.umv-table__note {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.875rem 1.25rem;
  border-radius: 0.25rem;
  background: var(--umv-sky-100);
  color: var(--umv-color-brand-dark);
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: var(--umv-weight-medium);
}

.umv-table__note-icon {
  flex: none;
  color: var(--umv-color-highlight);
  font-size: 1.25rem;
}

.umv-table--plain .umv-table__frame {
  align-self: stretch;
  border-radius: 0.5rem;
  background: var(--umv-color-surface);
  outline: 1px solid var(--umv-table-border);
  outline-offset: -1px;
}

.umv-table--plain .umv-table__grid {
  table-layout: auto;
}

.umv-table--plain .umv-table__heading {
  padding: 1.5rem var(--umv-table-pad-x) 1.25rem;
  white-space: nowrap;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-semibold);
}

.umv-table--plain .umv-table__cell {
  padding: var(--umv-table-pad-y) var(--umv-table-pad-x);
  border: 0;
  border-top: 1px solid var(--umv-table-border);
  color: var(--umv-navy-500);
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

/* Los dos bordes de la tarjeta respiran mas que el hueco entre columnas. */
.umv-table--plain .umv-table__heading:first-child,
.umv-table--plain .umv-table__cell:first-child {
  padding-left: var(--umv-table-edge);
}

.umv-table--plain .umv-table__heading:last-child,
.umv-table--plain .umv-table__cell:last-child {
  padding-right: var(--umv-table-edge);
}

/* El nombre de la sesion, que es de lo que va el renglon, va mas marcado que
  la fecha, como en el diseno. */
.umv-table--plain .umv-table__cell:first-child {
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-medium-size);
  font-weight: var(--umv-weight-medium);
}

.umv-table__action {
  --umv-button-bg: var(--umv-color-surface);
  --umv-button-color: var(--umv-cyan-500);
  --umv-button-border: var(--umv-cyan-500);
  --umv-button-hover-bg: var(--umv-cyan-500);
  --umv-button-hover-color: var(--umv-color-on-dark);
  --umv-button-radius: 0.25rem;
  --umv-button-padding-block: 0.5625rem;
  --umv-button-padding-inline: 1rem;
  --umv-button-size: var(--umv-paragraph-default-size);
  --umv-button-line: 1.25rem;
  --umv-button-shadow: none;
  gap: 0.5rem;
  font-weight: var(--umv-weight-semibold);
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  /* El encabezado y su frase no caben uno al lado del otro. */
  .umv-table--plain .umv-table__intro {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }
}

@media (max-width: 767.98px) {
  .umv-table--plain {
    --umv-table-edge: 1.25rem;
    --umv-table-title-size: var(--umv-display-7-size);
    --umv-table-title-line: var(--umv-display-7-line);
  }

  /* Tres columnas no caben en un telefono. En vez de recortar el renglon -el
    boton se quedaba fuera de la tarjeta-, la tabla se desplaza de lado dentro
    de ella, y se le da el foco para poder hacerlo tambien con el teclado. */
  .umv-table--plain .umv-table__frame {
    overflow-x: auto;
  }

  /* Y la tabla no se encoge para caber: sus renglones se quedan en una linea
    y lo que sobra se recorre de lado. */
  .umv-table--plain .umv-table__grid {
    min-width: 34rem;
  }
}

/* ============================================
  VOICE CAROUSEL
  ============================================ */

/* Las voces del campus, de una en una: el encabezado con sus flechas, la foto
  de quien habla junto a lo que cuenta, y la fila con todos al pie. */
.umv-voice-show {
  --umv-voice-show-width: 100%;
  --umv-voice-show-gutter: 5%;
  --umv-voice-show-space: 4rem;
  --umv-voice-show-gap: 2rem;
  /* 300x375 del diseno, y 56px entre la foto y lo que se cuenta. */
  --umv-voice-show-media: 18.75rem;
  --umv-voice-show-media-height: 23.4375rem;
  --umv-voice-show-media-gap: 3.5rem;
  --umv-voice-show-lead-width: 52.8125rem;
  background: var(--umv-color-bg);
  color: var(--umv-color-brand-dark);
}

.umv-voice-show__inner {
  display: flex;
  flex-direction: column;
  gap: var(--umv-voice-show-gap);
  max-width: var(--umv-voice-show-width);
  margin: 0 auto;
  padding: var(--umv-voice-show-space) var(--umv-voice-show-gutter);
}

/* El encabezado y su entrada: se separan 14px entre si, menos que del resto
  de la seccion. */
.umv-voice-show__top {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* La entrada se queda corta a proposito: el diseno la para antes del borde
  para que no cruce la pagina de lado a lado. */
.umv-voice-show__lead {
  max-width: var(--umv-voice-show-lead-width);
  margin: 0;
  font-size: var(--umv-paragraph-large-size);
  line-height: 1.625rem;
}

.umv-voice-show__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.umv-voice-show__intro {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.umv-voice-show__eyebrow {
  margin: 0;
  color: var(--umv-slate-700);
  opacity: 0.6;
  font-family: var(--umv-font-helvetica);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-voice-show__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-8-size);
  line-height: var(--umv-display-8-line);
  font-weight: var(--umv-weight-bold);
}

/* Las dos flechas: la de volver en claro y la de seguir en el azul de la
  marca, como en el diseno. */
.umv-voice-show__controls {
  display: flex;
  flex: none;
  gap: 1rem;
}

.umv-voice-show__arrow {
  --umv-icon-button-size: 2.5rem;
  --umv-icon-button-color: var(--umv-slate-500);
  --umv-icon-button-hover: var(--umv-slate-700);
  /* Cuadradas, como en el diseno: el boton de icono las trae redondas. */
  border-radius: 0;
  background: var(--umv-sky-50);
  font-size: 1rem;
}

.umv-voice-show__arrow:hover,
.umv-voice-show__arrow:focus-visible {
  background: var(--umv-gray-150);
}

.umv-voice-show__arrow--next {
  --umv-icon-button-color: var(--umv-color-on-dark);
  --umv-icon-button-hover: var(--umv-color-on-dark);
  background: var(--umv-color-highlight);
}

.umv-voice-show__arrow--next:hover,
.umv-voice-show__arrow--next:focus-visible {
  background: var(--umv-cyan-500);
}

/* Cada voz: la foto a la izquierda y lo que cuenta al lado. */
.umv-voice-show__slide {
  display: grid;
  grid-template-columns: var(--umv-voice-show-media) minmax(0, 1fr);
  align-items: center;
  gap: var(--umv-voice-show-media-gap);
}

/* Bootstrap esconde los paneles que no tocan; el que toca vuelve a la
  rejilla, que `display: block` lo dejaria en una sola columna. */
.umv-voice-show__slide.active.show {
  display: grid;
}

.umv-voice-show__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--umv-voice-show-media-height);
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--umv-gray-250);
}

.umv-voice-show__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hueco a proposito: se ve que falta la foto. */
.umv-voice-show__placeholder {
  color: var(--umv-slate-500);
  font-size: 2.5rem;
  opacity: 0.5;
}

.umv-voice-show__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin: 0;
}

/* 72px del diseno, con el renglon corto para que la comilla no deje un hueco
  encima de lo que se cuenta. */
.umv-voice-show__mark {
  color: var(--umv-color-highlight);
  font-size: 4.5rem;
  line-height: 2.75rem;
  font-weight: var(--umv-weight-bold);
}

.umv-voice-show__quote {
  margin: 0;
  font-size: var(--umv-display-5-size);
  line-height: 2rem;
}

.umv-voice-show__who {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.umv-voice-show__name {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: var(--umv-weight-bold);
}

.umv-voice-show__role {
  color: var(--umv-color-highlight);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* Los puntos van debajo de lo que se cuenta, no de la foto. */
.umv-voice-show__dots {
  display: flex;
  gap: 0.625rem;
  margin: 0 0 0 calc(var(--umv-voice-show-media) + var(--umv-voice-show-media-gap));
}

.umv-voice-show__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--umv-gray-250);
}

.umv-voice-show__dot.is-active {
  background: var(--umv-gold-450);
}

/* La fila de abajo: todos los que hablan, para ir a cualquiera de un salto. */
.umv-voice-show__people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-voice-show__person-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 0.5rem 0.875rem 0;
  border: 0;
  border-top: 1px solid var(--umv-gray-250);
  background: none;
  color: inherit;
  text-align: start;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.umv-voice-show__person-button:hover,
.umv-voice-show__person-button:focus-visible {
  opacity: 1;
}

/* La que se esta leyendo: su linea de arriba en el azul de la marca. */
.umv-voice-show__person-button.active {
  border-top: 3px solid var(--umv-color-highlight);
  padding-top: 0.75rem;
  opacity: 1;
}

.umv-voice-show__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--umv-gray-250);
  color: var(--umv-slate-500);
  font-size: 1.25rem;
}

.umv-voice-show__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.umv-voice-show__person-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.umv-voice-show__person-name {
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.375rem;
  font-weight: var(--umv-weight-semibold);
}

.umv-voice-show__person-program {
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
}

@media (max-width: 991.98px) {
  /* La foto pasa arriba y lo que se cuenta debajo, y los puntos vuelven al
    margen porque ya no hay columna a la izquierda. */
  .umv-voice-show__slide,
  .umv-voice-show__slide.active.show {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-voice-show__dots {
    margin-left: 0;
  }

  .umv-voice-show__people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .umv-voice-show {
    --umv-voice-show-space: 2.5rem;
  }

  .umv-voice-show__head {
    flex-wrap: wrap;
  }

  .umv-voice-show__people {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================
  HIGHLIGHT BAND
  ============================================ */

/* La cifra que se quiere que se vea, con lo que significa al lado y la salida
  al final del renglon, sobre la franja crema. */
.umv-highlight-band {
  --umv-highlight-band-width: 100%;
  --umv-highlight-band-gutter: 5%;
  --umv-highlight-band-space: 3rem;
  /* 190px de alto y los 100/80 de relleno del diseno. */
  --umv-highlight-band-height: 11.875rem;
  --umv-highlight-band-pad-start: clamp(1.5rem, 7vw, 6.25rem);
  --umv-highlight-band-pad-end: clamp(1.5rem, 5.5vw, 5rem);
  --umv-highlight-band-gap: 2.5rem;
  background: var(--umv-color-bg);
}

.umv-highlight-band__inner {
  max-width: var(--umv-highlight-band-width);
  margin: 0 auto;
  padding: var(--umv-highlight-band-space) var(--umv-highlight-band-gutter);
}

.umv-highlight-band__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--umv-highlight-band-gap);
  min-height: var(--umv-highlight-band-height);
  overflow: hidden;
  padding: 1.5rem var(--umv-highlight-band-pad-end) 1.5rem var(--umv-highlight-band-pad-start);
  background: var(--umv-sand-50);
  color: var(--umv-color-brand-dark);
}

/* Asoma por la derecha y se recorta con la franja, como en el diseno. */
.umv-highlight-band__watermark {
  position: absolute;
  top: 50%;
  right: 80px;
  width: 27.375rem;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.3;
}

.umv-highlight-band__value {
  position: relative;
  flex: none;
  margin: 0;
  color: var(--umv-gold-450);
  font-size: 4rem;
  line-height: 1.1;
  font-weight: var(--umv-weight-extrabold);
}

.umv-highlight-band__body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.umv-highlight-band__title {
  margin: 0;
  color: inherit;
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: var(--umv-weight-bold);
}

.umv-highlight-band__text {
  margin: 0;
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-highlight-band__button {
  position: relative;
  flex: none;
  --umv-button-bg: transparent;
  --umv-button-color: var(--umv-color-brand-dark);
  --umv-button-border: var(--umv-color-brand-dark);
  --umv-button-hover-bg: var(--umv-color-brand-dark);
  --umv-button-hover-color: var(--umv-color-on-dark);
  --umv-button-radius: 0;
  --umv-button-padding-block: 1rem;
  --umv-button-padding-inline: 1.75rem;
  --umv-button-size: var(--umv-paragraph-medium-size);
  --umv-button-line: 1.25rem;
  --umv-button-shadow: 0 1px 4px rgba(25, 33, 61, 0.08);
  font-weight: var(--umv-weight-semibold);
}

.umv-highlight-band__button .umv-button__icon {
  font-size: 0.75rem;
}

@media (max-width: 991.98px) {
  /* Una debajo de otra: en esta anchura la cifra, el texto y el boton en fila
    dejaban el texto en una columna de dos palabras. */
  .umv-highlight-band__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    min-height: 0;
    padding: 2rem 1.5rem;
  }

  .umv-highlight-band__watermark {
    display: none;
  }
}

/* ============================================
  FLOATING CONTACT
  ============================================ */

/* El WhatsApp que acompana la pagina: quieto a la derecha y a media altura,
  con la pastilla y el circulo verde uno al lado del otro. */
.umv-chat {
  /* Debajo del encabezado y con su respiro, no a media pantalla: al bajar se
    queda ahi, sin taparse con las barras de arriba. Lo bastante abajo para
    dejar ver los botones de compartir de la ficha, que viven en la fila de
    pestanas y le quedaban justo detras. */
  --umv-chat-top: 15.5rem;
  position: fixed;
  top: var(--umv-chat-top);
  right: 1.75rem;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Mientras no le llega el turno espera al pie de la segunda seccion, en su
  sitio de la pagina; /js/landing-chat.js dice a que altura. Sin ese archivo
  se queda pegado desde el principio, que tambien sirve. */
.umv-chat--parked {
  position: absolute;
}

/* Alcanzado por el recorrido, se despega y acompana. */
.umv-chat--parked.is-stuck {
  position: fixed;
  top: var(--umv-chat-top);
}

.umv-chat__label {
  padding: 0.6875rem 1.125rem;
  border-radius: 1.5rem;
  background: var(--umv-color-surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.375rem;
  font-weight: var(--umv-weight-semibold);
  white-space: nowrap;
}

.umv-chat__badge {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--umv-whatsapp-500);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: var(--umv-color-surface);
  font-size: 1.75rem;
}

.umv-chat__badge img {
  width: 2rem;
  height: 2rem;
}

@media (max-width: 767.98px) {
  /* En un telefono solo el circulo: la pastilla se comia media pantalla. */
  .umv-chat {
    --umv-chat-top: 8.5rem;
    right: 1rem;
  }

  .umv-chat__label {
    display: none;
  }
}

/* ============================================
  ORG CHART MODAL
  ============================================ */

/* La ventana del organigrama: las mismas medidas que la vista previa del
  panel (css/dashboard.css, .org-preview__dialog), porque es el mismo visor y
  lo que se ve aqui tiene que ser lo que se vio alli. Ocupa casi la pantalla:
  dentro va un arbol, no un formulario. Las dos clases juntas para ganarle a
  la medida de las ventanas normales, que se escribe despues. */
.umv-modal.umv-org-modal {
  --umv-modal-width: 90rem;
  --umv-modal-height: 52rem;
  --umv-modal-pad: 0;
  --umv-modal-radius: 0.75rem;
}

.umv-org-modal__dialog {
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  max-width: var(--umv-modal-width);
  max-height: var(--umv-modal-height);
}

/* El visor se encarga de su propio recorrido, asi que la tarjeta no crece: lo
  que sobra se mueve dentro del dibujo. */
.umv-org-modal__panel {
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* Mientras se arma el dibujo: el aviso en medio de la tarjeta y lo de debajo
  escondido, que verlo armarse parece que algo va mal. */
.umv-org-modal__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--umv-color-surface);
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
}

.umv-org-modal.is-loading .umv-org-modal__loading {
  display: flex;
}

.umv-org-modal.is-loading .umv-org-modal__body {
  visibility: hidden;
}

.umv-org-modal__body,
.umv-org-modal__body .org-view,
.umv-org-modal__viewer {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

/* El encabezado del visor es oscuro y el titulo de la pagina es azul marino:
  sin esto el nombre se perderia sobre su propia franja. */
.umv-org-modal__body .org-viewer__heading {
  color: inherit;
}

/* Encima de la franja oscura del visor: el morado y el crema del diseno, y
  algo mas grande que el de las demas ventanas. Las dos clases juntas porque
  el cerrar de las ventanas normales se escribe despues. */
.umv-org-modal .umv-org-modal__close {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1.375rem;
  background: var(--umv-navy-575);
  color: var(--umv-sand-50);
  font-size: 1.25rem;
}

.umv-org-modal .umv-org-modal__close:hover,
.umv-org-modal .umv-org-modal__close:focus-visible {
  background: var(--umv-navy-550);
  color: var(--umv-sand-50);
}

/* ============================================
  REQUEST MODAL
  ============================================ */

/* La ventana de informes: el velo delante de la pagina y, encima, la tarjeta
  blanca con el formulario. Las medidas son las del diseno: 560px de ancho,
  40px de aire por dentro y 18px entre un bloque y el siguiente. */
.umv-modal {
  --umv-modal-width: 35rem;
  --umv-modal-pad: 2.5rem;
  --umv-modal-gap: 1.125rem;
  --umv-modal-radius: 0.75rem;
  --umv-modal-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
  --umv-modal-ink: var(--umv-navy-800);
  --umv-modal-muted: var(--umv-slate-500);
  --umv-modal-line: var(--umv-lilac-150);
  --umv-modal-border: var(--umv-lilac-250);
  /* 28px es el titular de la ventana; no esta en la escala porque solo se usa
    aqui. El renglon va al mismo paso que los demas titulares de ese tamano. */
  --umv-modal-title-size: 1.75rem;
  --umv-modal-title-line: 2.25rem;
}

/* Bootstrap pinta el velo aparte, fuera de la ventana, asi que el color se le
  pasa por sus propias variables. */
.modal-backdrop {
  --bs-backdrop-bg: var(--umv-color-veil);
  --bs-backdrop-opacity: 0.7;
}

.umv-modal__dialog {
  max-width: var(--umv-modal-width);
}

.umv-modal__panel {
  position: relative;
  padding: var(--umv-modal-pad);
  border: 0;
  border-radius: var(--umv-modal-radius);
  background: var(--umv-color-surface);
  box-shadow: var(--umv-modal-shadow);
}

/* El circulo de cerrar va en la esquina, encima de todo lo demas. */
.umv-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--umv-sand-25);
  color: var(--umv-modal-ink);
  font-size: 1rem;
}

.umv-modal__close:hover,
.umv-modal__close:focus-visible {
  background: var(--umv-lilac-100);
  color: var(--umv-modal-ink);
}

.umv-modal__form,
.umv-modal__done {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--umv-modal-gap);
}

.umv-modal__intro {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.umv-modal__title {
  margin: 0;
  color: var(--umv-modal-ink);
  font-size: var(--umv-modal-title-size);
  line-height: var(--umv-modal-title-line);
  font-weight: var(--umv-weight-extrabold);
}

.umv-modal__title--center {
  text-align: center;
}

.umv-modal__text {
  margin: 0;
  color: var(--umv-modal-ink);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-modal__lead {
  margin: 0;
  color: var(--umv-modal-ink);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
  text-align: center;
}

/* Los campos son los de siempre; aqui cambian de medida y de color, que es lo
  unico que los distingue en la ventana. */
.umv-modal__field {
  --umv-field-label: var(--umv-modal-ink);
  --umv-field-border: var(--umv-modal-border);
  --umv-field-shadow: none;
  --umv-field-height: 3rem;
  --umv-field-radius: 0.25rem;
  --umv-field-label-gap: 0.375rem;
}

.umv-modal__field .umv-field__label {
  font-weight: var(--umv-weight-semibold);
}

.umv-modal__label {
  float: none;
  width: auto;
  margin: 0 0 0.5rem;
  padding: 0;
  color: var(--umv-modal-ink);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-semibold);
}

.umv-modal__choice {
  margin: 0;
  padding: 0;
  border: 0;
}

.umv-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Cada pastilla es un boton de radio de verdad: el circulo no se ve, pero se
  elige con el teclado y viaja con el formulario. */
.umv-modal__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.umv-modal__chip-label {
  display: inline-flex;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--umv-modal-border);
  border-radius: 1.25rem;
  background: var(--umv-color-surface);
  color: var(--umv-modal-ink);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  cursor: pointer;
}

.umv-modal__radio:checked + .umv-modal__chip-label {
  border-color: var(--umv-modal-ink);
  background: var(--umv-modal-ink);
  color: var(--umv-color-on-dark);
  font-weight: var(--umv-weight-semibold);
}

.umv-modal__radio:focus-visible + .umv-modal__chip-label {
  outline: 2px solid var(--umv-color-focus);
  outline-offset: 2px;
}

.umv-modal__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.umv-modal__check {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: 1.5px solid var(--umv-modal-ink);
  border-radius: 0.25rem;
  accent-color: var(--umv-modal-ink);
}

.umv-modal__consent-label {
  color: var(--umv-modal-ink);
  /* 13px: entre la nota al pie y el texto normal, como lo pide el diseno. */
  font-size: 0.8125rem;
  line-height: 1.125rem;
}

.umv-modal__submit {
  --umv-button-size: var(--umv-paragraph-medium-size);
}

.umv-modal__note {
  margin: 0;
  color: var(--umv-modal-muted);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  text-align: center;
}

/* El acuse: el mismo panel, con el sello arriba y todo centrado. */
.umv-modal__done {
  align-items: center;
  gap: 1.875rem;
}

.umv-modal__seal {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--umv-cyan-100);
  color: var(--umv-color-highlight);
  font-size: 2.25rem;
}

.umv-modal__done .umv-modal__intro {
  align-self: stretch;
}

.umv-modal__rule {
  align-self: stretch;
  height: 1px;
  background: var(--umv-modal-line);
}

/* El boton de cerrar el acuse va en el azul marino del texto, no en el cian
  de los botones de accion: no lleva a ningun sitio, solo despide. */
.umv-modal__dismiss {
  --umv-button-color: var(--umv-modal-ink);
  --umv-button-border: var(--umv-modal-ink);
  --umv-button-hover-bg: var(--umv-modal-ink);
  --umv-button-hover-color: var(--umv-color-on-dark);
  --umv-button-size: var(--umv-paragraph-medium-size);
}

@media (max-width: 575.98px) {
  /* En un telefono la ventana se queda con el aire justo. */
  .umv-modal {
    --umv-modal-pad: 1.5rem;
  }

  .umv-modal__close {
    top: 0.75rem;
    right: 0.75rem;
  }
}

/* ============================================
  DATE GRID
  ============================================ */

/* Las fechas de una convocatoria: el titular, su linea, la convocatoria mas
  proxima en grande sobre fondo oscuro, las demas en tarjetas y la nota.
  Medidas del diseno: bloque oscuro de 420px, tres columnas con 16px de hueco
  y 24px entre el bloque y la rejilla. */
.umv-dates {
  --umv-dates-columns: 3;
  --umv-dates-gap: 1rem;
  --umv-dates-next-width: 26.25rem;
  --umv-dates-title-size: var(--umv-display-5-size);
  --umv-dates-title-line: var(--umv-display-5-line);
  /* El mismo encuadre que los demas bloques de la pestana (la lista de
    documentos, los pasos): el margen lateral lo pone cada seccion. */
  --umv-dates-width: 100%;
  --umv-dates-gutter: 5%;
  max-width: var(--umv-dates-width);
  margin-inline: auto;
  padding: 0 var(--umv-dates-gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 24px hasta la nota del final; el aire entre el encabezado y las fechas lo
    pone `.umv-dates__body`, que el diseno lo quiere mas suelto (36px). */
  gap: 1.5rem;
}

.umv-dates__head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-self: stretch;
}

.umv-dates__body {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  align-self: stretch;
  margin-top: 0.75rem;
}

/* La convocatoria mas proxima. El bloque se estira hasta donde llegue la
  rejilla de al lado, asi que sus datos se quedan arriba. */
.umv-dates__next {
  flex: none;
  width: var(--umv-dates-next-width);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 2.25rem;
  background: var(--umv-navy-800);
  color: var(--umv-white);
}

.umv-dates__eyebrow,
.umv-dates__label {
  margin: 0;
  /* 14px con la letra separada, como los rotulos del diseno. */
  font-size: var(--umv-display-2-size);
  line-height: var(--umv-display-3-line);
  letter-spacing: 0.0525rem;
  text-transform: uppercase;
}

.umv-dates__eyebrow {
  color: var(--umv-cyan-400);
}

.umv-dates__label {
  color: var(--umv-slate-500);
}

.umv-dates__next-day {
  margin: 0;
  /* 72px: el numero es lo primero que se busca aqui, y no esta en la escala
    porque no se usa en ningun otro sitio. */
  font-size: 4.5rem;
  line-height: 1.1;
  font-weight: var(--umv-weight-extrabold);
}

.umv-dates__next-month {
  margin: 0;
  /* 26px, entre el display 6 y el 7 del sistema. */
  font-size: 1.625rem;
  line-height: 2rem;
  font-weight: var(--umv-weight-semibold);
}

.umv-dates__next-weekday {
  margin: 0;
  /* Apagado a proposito: acompana a la fecha, no compite con ella. */
  opacity: 0.8;
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-display-6-line);
}

.umv-dates__rest {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.umv-dates__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-dates-title-size);
  line-height: var(--umv-dates-title-line);
  font-weight: var(--umv-weight-extrabold);
}

.umv-dates__text {
  /* El diseno lo corta antes que la rejilla: un renglon de 1000px se lee de
    una pasada, uno de 1280 ya obliga a recorrer la pantalla. */
  max-width: 62.5rem;
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-large-line);
}

.umv-dates__list {
  display: grid;
  grid-template-columns: repeat(var(--umv-dates-columns), minmax(0, 1fr));
  gap: var(--umv-dates-gap);
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-dates__note {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-display-2-line);
}

/* ===== Tarjeta de una fecha ============================================ */
.umv-date {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  background: var(--umv-sky-50);
}

.umv-date__month {
  color: var(--umv-cyan-400);
  /* 12px con la letra bien separada, como el diseno. */
  font-size: var(--umv-display-1-size);
  line-height: var(--umv-display-1-line);
  font-weight: var(--umv-weight-bold);
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.umv-date__day {
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-6-size);
  line-height: var(--umv-display-6-line);
  font-weight: var(--umv-weight-extrabold);
}

@media (max-width: 991.98px) {
  /* El bloque oscuro y la rejilla no caben de lado: la convocatoria proxima
    pasa arriba, a todo lo ancho. */
  .umv-dates__body {
    flex-direction: column;
  }

  .umv-dates__next {
    width: auto;
    align-self: stretch;
  }
}

@media (max-width: 575.98px) {
  .umv-dates {
    --umv-dates-columns: 2;
  }

  /* En un telefono la tarjeta mide la mitad de la pantalla y una fecha de
    tres dias ("2, 16 y 30") no cabe en un renglon: el numero baja un escalon
    en vez de partirse. */
  .umv-date__day {
    font-size: var(--umv-display-6-size);
    line-height: var(--umv-display-6-line);
  }
}

/* ============================================
  REQUIREMENT LIST
  ============================================ */

/* Los requisitos de una convocatoria: titular, su linea, los puntos en dos
  columnas y el boton. Mismo encuadre que los demas bloques de una pestana. */
.umv-rules {
  --umv-rules-width: 100%;
  --umv-rules-gutter: 5%;
  /* 80px entre columnas y 20px entre un punto y el siguiente, del diseno. */
  --umv-rules-column-gap: 5rem;
  --umv-rules-row-gap: 1.25rem;
  --umv-rules-columns: 2;
  --umv-rules-title-size: var(--umv-display-6-size);
  --umv-rules-title-line: 1.75rem;
  max-width: var(--umv-rules-width);
  margin-inline: auto;
  padding: 0 var(--umv-rules-gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.umv-rules__title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-rules-title-size);
  line-height: var(--umv-rules-title-line);
  font-weight: var(--umv-weight-extrabold);
}

.umv-rules__text {
  /* Como en el resto de la pagina, el texto corta antes que la rejilla. */
  max-width: 62.5rem;
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-large-line);
}

.umv-rules__list {
  display: grid;
  grid-template-columns: repeat(var(--umv-rules-columns), minmax(0, 1fr));
  gap: var(--umv-rules-row-gap) var(--umv-rules-column-gap);
  /* Primero la columna de la izquierda entera y despues la otra, que es como
    se leen los numeros en el diseno. */
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.umv-rules__note {
  max-width: 62.5rem;
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-display-2-line);
}

/* ===== Un punto con su insignia ======================================== */
.umv-badge-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.umv-badge-item__number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--umv-color-spotlight);
  color: var(--umv-color-on-dark);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
  font-weight: var(--umv-weight-extrabold);
}

.umv-badge-item__text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
}

@media (max-width: 991.98px) {
  /* En una columna los puntos se leen seguidos, de arriba abajo. */
  .umv-rules {
    --umv-rules-columns: 1;
  }

  .umv-rules__list {
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}

/* ============================================
  SECTION NAV
  ============================================ */

/* La fila que lleva a cada seccion. Se ve como las pestanas -comparte sus
  clases- pero no esconde nada: lo unico suyo es el hueco que deja arriba
  cuando se salta a una seccion, para que la fila pegada no la tape.

  El hueco se les da a las secciones que vienen con la fila: la que la lleva
  dentro y las que van despues de ella. */
.umv-section-nav__target,
.umv-admissions [id],
.umv-admissions ~ [id],
.umv-about-body--cufri ~ [id],
.umv-about-body--language ~ [id] {
  scroll-margin-top: calc(var(--umv-header-offset, 0px) + 6rem);
}

@media (max-width: 767.98px) {
  /* En un telefono las entradas no caben de una vez. En tres renglones la
    fila pegada se come media pantalla, asi que se quedan en una sola que se
    arrastra de lado. */
  .umv-section-nav .umv-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Sin barra a la vista: se arrastra con el dedo. */
    scrollbar-width: none;
  }

  .umv-section-nav .umv-tabs::-webkit-scrollbar {
    display: none;
  }

  .umv-section-nav .umv-tabs__item {
    flex: none;
  }
}

/* ============================================
  FAQ LIST
  ============================================ */

/* Las preguntas frecuentes: el titular y los renglones que se abren. La lista
  corta antes que el titular -1000px del diseno- porque una pregunta de punta
  a punta de la pantalla se lee mal. */
.umv-faq {
  --umv-faq-width: 100%;
  --umv-faq-gutter: 5%;
  --umv-faq-list-width: 62.5rem;
  --umv-faq-line: var(--umv-gray-250);
  --umv-faq-sign: var(--umv-gray-150);
  --umv-faq-title-size: var(--umv-display-8-size);
  --umv-faq-title-line: var(--umv-display-9-line);
  max-width: var(--umv-faq-width);
  margin-inline: auto;
  padding: 0 var(--umv-faq-gutter);
}

.umv-faq__title {
  margin: 0 0 2rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-faq-title-size);
  line-height: var(--umv-faq-title-line);
  font-weight: var(--umv-weight-bold);
}

.umv-faq__list {
  max-width: var(--umv-faq-list-width);
}

/* Cada renglon lleva su linea abajo; el primero ademas la de arriba, para que
  la lista quede cerrada por los dos lados. */
.umv-faq__item {
  border-bottom: 1px solid var(--umv-faq-line);
}

.umv-faq__item:first-child {
  border-top: 1px solid var(--umv-faq-line);
}

.umv-faq__heading {
  margin: 0;
}

/* Se pulsa el renglon entero, no solo el signo. */
.umv-faq__toggle {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  border: 0;
  background: none;
  color: var(--umv-color-brand-dark);
  text-align: left;
}

.umv-faq__toggle:focus-visible {
  outline: 2px solid var(--umv-color-focus);
  outline-offset: 2px;
}

.umv-faq__question {
  flex: 1 1 auto;
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
  font-weight: var(--umv-weight-bold);
}

/* El signo se dibuja con dos rayas: la de pie desaparece al abrirse y queda
  el menos. Asi no hace falta cambiar de icono desde el JavaScript. */
.umv-faq__sign {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--umv-faq-sign);
}

.umv-faq__sign::before,
.umv-faq__sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--umv-color-highlight);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

.umv-faq__sign::before {
  width: 0.75rem;
  height: 2px;
}

.umv-faq__sign::after {
  width: 2px;
  height: 0.75rem;
  transition: opacity 0.2s ease;
}

.umv-faq__toggle[aria-expanded='true'] .umv-faq__sign::after {
  opacity: 0;
}

.umv-faq__text {
  margin: 0;
  padding-bottom: 1.5rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-large-size);
  line-height: var(--umv-paragraph-large-line);
}

@media (max-width: 575.98px) {
  /* En un telefono la pregunta ocupa varios renglones; con el tamano de
    escritorio se come la pantalla. */
  .umv-faq {
    --umv-faq-title-size: var(--umv-display-7-size);
    --umv-faq-title-line: var(--umv-display-7-line);
  }

  .umv-faq__question {
    font-size: var(--umv-display-4-size);
    line-height: var(--umv-display-4-line);
  }
}

/* ===== Catalogo en modo busqueda ======================================= */

/* Con algo escrito, la fila de pestanas se cambia por el recuento de cada
  grupo y los resultados se ensenan todos juntos. */
.umv-catalog__scopes .umv-tabs__link {
  font-weight: var(--umv-weight-regular);
}

.umv-catalog__scopes .umv-tabs__link.active {
  font-weight: var(--umv-weight-bold);
}

/* Un grupo sin resultados se queda a media luz: sigue diciendo que esta, pero
  no hay nada que abrir. */
.umv-catalog__scopes .umv-tabs__link.is-empty {
  opacity: 0.5;
  cursor: default;
}

.umv-catalog__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.umv-catalog__summary-text {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
}

/* Deshacer la busqueda: un enlace, no un boton de caja. */
.umv-catalog__summary-clear {
  padding: 0;
  border: 0;
  background: none;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-display-2-line);
  font-weight: var(--umv-weight-semibold);
  text-decoration: underline;
}

/* La cruz del campo, al lado de la lupa. */
.umv-catalog__filter-clear {
  position: absolute;
  top: 50%;
  right: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--umv-slate-500);
  /* Del tamano del texto del campo: mas chica se pierde al lado del boton de
    buscar. */
  font-size: 1rem;
  transform: translateY(-50%);
}

.umv-catalog__filter-clear:hover,
.umv-catalog__filter-clear:focus-visible {
  color: var(--umv-color-brand-dark);
}

@media (max-width: 767.98px) {
  /* En un telefono los cuatro recuentos no caben de una vez; en tres
    renglones empujan los resultados fuera de la pantalla, asi que se quedan
    en una linea que se arrastra de lado. */
  .umv-catalog__scopes {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .umv-catalog__scopes::-webkit-scrollbar {
    display: none;
  }

  .umv-catalog__scopes .umv-tabs__item {
    flex: none;
  }
}

/* Buscando se ven varios grupos a la vez, asi que los paneles dejan de
  turnarse: se ensena el de cada grupo que tenga resultados. */
.umv-catalog.is-searching .umv-catalog__panel {
  display: none;
}

.umv-catalog.is-searching .umv-catalog__panel.is-shown {
  display: block;
  opacity: 1;
}

/* Entre una tanda y la siguiente, aire suficiente para que se lean como dos
  grupos y no como una lista larga. El hueco va en todas menos en la primera,
  que puede ser cualquiera segun lo que se encuentre. */
.umv-catalog.is-searching .umv-catalog__panel.is-shown {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.umv-catalog.is-searching .umv-catalog__panel.is-shown.is-first {
  margin-top: 0;
}

/* ============================================
  LEGAL DOCUMENT
  ============================================ */

/* Los documentos legales -terminos y condiciones, aviso de privacidad-: a un
  lado el indice, que se queda pegado mientras se lee, y al otro el texto.

  El documento no cruza la pantalla entera aunque haya sitio: un renglon de
  mil pixeles de ancho no se lee, se escanea. Las dos columnas se quedan en su
  medida y se centran, que es como se lee un documento. */
.umv-legal {
  --umv-legal-gutter: 5%;
  --umv-legal-index: 17rem;
  --umv-legal-doc: 46rem;
  --umv-legal-gap: clamp(2.5rem, 5vw, 4.5rem);
  --umv-legal-space: clamp(3rem, 6vw, 5rem);
  background: var(--umv-color-bg);
  padding-block: var(--umv-legal-space);
}

.umv-legal__inner {
  display: grid;
  /* El indice arranca en el margen de siempre -el mismo 5% de la tarjeta de
    la apertura- y el documento se queda en su medida: lo que sobra a la
    derecha se deja vacio antes que estirar el renglon. */
  grid-template-columns: minmax(0, var(--umv-legal-index)) minmax(0, var(--umv-legal-doc));
  justify-content: start;
  gap: var(--umv-legal-gap);
  padding-inline: var(--umv-legal-gutter);
}

/* ===== El indice ======================================================= */

/* Se queda a la vista todo el documento, debajo del encabezado. Lo alto se lo
  pone el propio indice: si llega a ser mas largo que la pantalla se recorre
  por dentro en vez de empujar lo de abajo fuera de la vista. */
.umv-legal__index {
  position: sticky;
  top: calc(var(--umv-header-offset, 0px) + 2rem);
  max-height: calc(100vh - var(--umv-header-offset, 0px) - 4rem);
  overflow-y: auto;
  /* Sin barra a la vista: el indice es corto y la barra lo ensuciaria. */
  scrollbar-width: none;
}

.umv-legal__index::-webkit-scrollbar {
  display: none;
}

.umv-legal__index-title {
  margin: 0;
  color: var(--umv-color-muted);
  font-size: var(--umv-display-1-size);
  line-height: var(--umv-display-1-line);
  font-weight: var(--umv-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Son las pestanas del resto del sitio puestas en columna: solo cambian los
  colores y el tamano, que el componente deja sueltos. */
.umv-legal__index-list {
  --umv-tabs-color: var(--umv-color-text);
  --umv-tabs-active: var(--umv-color-primary);
  --umv-tabs-size: var(--umv-paragraph-default-size);
  --umv-tabs-line: var(--umv-paragraph-default-line);
  --umv-tabs-gap: 0.25rem;
  margin: 1rem 0 0;
}

.umv-legal__index-list .umv-tabs__item {
  width: 100%;
}

/* En vertical la marca del apartado que se esta leyendo va al costado y no
  debajo: subrayar el renglon entero lo haria parecer un enlace recien
  pulsado. */
.umv-legal__index-link {
  display: flex;
  gap: 0.625rem;
  align-items: baseline;
  width: 100%;
  padding: 0.375rem 0 0.375rem 0.75rem;
  border-bottom: 0;
  border-inline-start: 2px solid var(--umv-color-divider);
  text-align: start;
  text-decoration: none;
}

.umv-legal__index-link.active {
  border-inline-start-color: var(--umv-tabs-active);
}

.umv-legal__index-number {
  flex: none;
  color: var(--umv-color-muted);
  font-size: var(--umv-display-1-size);
  font-weight: var(--umv-weight-bold);
}

.umv-legal__index-link.active .umv-legal__index-number {
  color: var(--umv-tabs-active);
}

/* ===== El documento ==================================================== */

.umv-legal__doc {
  min-width: 0;
}

/* La entrada: el mismo texto del documento pero un punto mas grande, que es
  lo que la separa de los apartados sin ponerle un titulo que no tiene. */
.umv-legal__intro {
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--umv-color-divider);
}

.umv-legal__paragraph {
  margin: 0;
  color: var(--umv-color-text);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-large-line);
}

.umv-legal__paragraph + .umv-legal__paragraph {
  margin-top: 1rem;
}

.umv-legal__paragraph--intro {
  color: var(--umv-color-heading);
}

/* La frase que abre un apartado antes de su lista. Se separa de ella -pegada
  parece el primer renglon de la lista y no lo es- y va del color de los
  titulos; en negrita pesaria mas que los terminos de la propia lista, que son
  los que hay que ver. */
.umv-legal__paragraph--lead {
  margin-bottom: 1rem;
  color: var(--umv-color-heading);
}

.umv-legal__notice {
  margin-top: 1.5rem;
  padding-block: 1.5rem;
  text-align: start;
}

.umv-legal__action {
  margin: 1.5rem 0 0;
}

.umv-legal__action-link {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--umv-color-link);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  font-weight: var(--umv-weight-semibold);
  text-decoration: none;
}

.umv-legal__action-link:hover,
.umv-legal__action-link:focus-visible {
  color: var(--umv-color-link-hover);
  text-decoration: underline;
}

.umv-legal__section {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.umv-legal__section-title {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  margin: 0 0 1.25rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-6-size);
  line-height: var(--umv-display-6-line);
  font-weight: var(--umv-weight-bold);
}

/* El numero del apartado, en su circulo: el mismo de los semestres del plan
  de estudios, para que los dos documentos largos del sitio se numeren igual. */
.umv-legal__section-number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--umv-lilac-100);
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-2-size);
  /* Uno: lo que centra el numero en el circulo es la caja flex, no el
    interlineado. */
  line-height: 1;
  font-weight: var(--umv-weight-bold);
}

.umv-legal__section-name {
  min-width: 0;
}

/* Los incisos. El de la letra ("a)") la lleva en su columna, de modo que el
  texto de varios renglones queda alineado bajo si mismo y no bajo la letra. */
.umv-legal__items {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.umv-legal__item {
  display: flex;
  gap: 0.75rem;
  color: var(--umv-color-text);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-large-line);
}

/* Sin letra el renglon lleva su punto, que es lo que lo ata a la lista. */
.umv-legal__item:not(:has(.umv-legal__item-mark))::before {
  content: '';
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.6875rem;
  border-radius: 50%;
  background: var(--umv-color-primary);
}

.umv-legal__item-mark {
  flex: none;
  color: var(--umv-color-primary);
  font-weight: var(--umv-weight-bold);
}

.umv-legal__item-text {
  min-width: 0;
}

.umv-legal__item-title {
  color: var(--umv-color-heading);
  font-weight: var(--umv-weight-semibold);
}

/* ===== La tarjeta del pie ============================================== */

/* Los datos de contacto del documento. Van en tarjeta y no de corrido porque
  no son texto que se lea: son para escribir o llamar. */
.umv-legal__contact {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border: 1px solid var(--umv-color-border-soft);
  border-radius: 1rem;
  background: var(--umv-sand-50);
}

.umv-legal__contact-title {
  margin: 0;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-display-5-size);
  line-height: var(--umv-display-5-line);
  font-weight: var(--umv-weight-bold);
}

.umv-legal__contact-text {
  margin: 0.5rem 0 0;
  color: var(--umv-color-text);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* La lista de datos nace para el pie oscuro; aqui va sobre crema, asi que se
  le cambian los colores que deja sueltos y el del rotulo, que los trae
  puestos. */
.umv-legal__contact-list {
  --umv-contact-icon-bg: var(--umv-color-surface);
  --umv-contact-icon-color: var(--umv-color-primary);
  --umv-contact-value: var(--umv-color-heading);
  margin-top: 1.5rem;
  gap: 1rem;
}

.umv-legal__contact-list .umv-contact__label {
  color: var(--umv-color-muted);
  opacity: 1;
}

.umv-legal__contact-list a.umv-contact__value:hover,
.umv-legal__contact-list a.umv-contact__value:focus-visible {
  color: var(--umv-color-link-hover);
}

/* En pantallas medianas el indice ya no cabe al lado: pasa arriba, deja de
  estar pegado -tapaba media pantalla- y el documento se queda con el ancho
  entero. */
@media (max-width: 991.98px) {
  .umv-legal__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-legal__index {
    position: static;
    max-height: none;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--umv-color-divider);
  }
}

/* ============================================
  MOSAIC PAGES AND VIEWER
  ============================================ */

/* Las vueltas del mosaico. Con una sola esto no pinta nada: el envoltorio esta
  ahi igual para que el mosaico no cambie de forma segun cuantas fotos haya. */
.umv-mosaic__pages {
  position: relative;
}

/* El renglon de debajo del mosaico: los puntos al centro y las flechas al
  extremo, que es donde las lleva el resto del sitio. Las flechas miden lo
  mismo a los dos lados para que los puntos queden centrados de verdad. */
.umv-mosaic__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  margin-top: 1.25rem;
}

.umv-mosaic__arrows {
  display: flex;
  gap: 1rem;
  grid-column: 3;
  justify-content: flex-end;
}

/* Las mismas del muro de la portada: la palida para atras y la cian para
  adelante. Alla el fondo de la seccion es crema y la palida se ve sola; aqui
  es blanco, asi que lleva linea para que se note que hay un boton. */
.umv-mosaic__arrow {
  --umv-icon-button-size: 2.5rem;
  --umv-icon-button-color: var(--umv-slate-500);
  --umv-icon-button-hover: var(--umv-slate-500);
  border: 1px solid var(--umv-color-divider);
  border-radius: 0;
  background: var(--umv-color-surface);
}

.umv-mosaic__arrow.is-primary {
  --umv-icon-button-color: var(--umv-color-on-dark);
  --umv-icon-button-hover: var(--umv-color-on-dark);
  border-color: transparent;
  background: var(--umv-color-highlight);
}

.umv-mosaic__arrow:hover,
.umv-mosaic__arrow:focus-visible {
  background: var(--umv-cyan-500);
  color: var(--umv-color-on-dark);
}

/* Los puntos de las vueltas: debajo del mosaico y no encima, que encima
  taparian una foto. Por eso no se usan los del carrusel de la portada, que
  van dentro de la imagen. */
.umv-mosaic__dots {
  grid-column: 2;
  position: static;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Las dos clases juntas: Bootstrap dibuja sus puntos como rayas con una
  regla de dos clases, y a menos peso ganaria ella. */
.umv-mosaic__dots .umv-mosaic__dot {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--umv-lilac-225);
  opacity: 1;
  /* Bootstrap los sangra para esconder su texto; aqui no llevan ninguno. */
  text-indent: 0;
  transition: background-color 0.15s ease;
}

.umv-mosaic__dots .umv-mosaic__dot.active {
  background-color: var(--umv-color-highlight);
}

/* La foto que se puede abrir. El boton no se ve: lo que se ve es la foto, y
  el unico aviso de que se puede pulsar es que crece un punto al pasar por
  encima. */
.umv-mosaic__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.umv-mosaic__open .umv-mosaic__photo {
  transition: transform 0.3s ease;
}

.umv-mosaic__open:hover .umv-mosaic__photo,
.umv-mosaic__open:focus-visible .umv-mosaic__photo {
  transform: scale(1.04);
}

/* Quien pide menos movimiento en su sistema no tiene por que ver el zoom. */
@media (prefers-reduced-motion: reduce) {
  .umv-mosaic__open .umv-mosaic__photo {
    transition: none;
  }

  .umv-mosaic__open:hover .umv-mosaic__photo,
  .umv-mosaic__open:focus-visible .umv-mosaic__photo {
    transform: none;
  }
}

/* ===== El visor =======================================================  */

/* La foto grande, encima de la pagina. La ventana se queda en lo que mide la
  foto: aqui no hay nada mas que ensenar. */
.umv-viewer__dialog {
  max-width: min(72rem, 92vw);
}

.umv-viewer__panel {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0.75rem;
  background: var(--umv-color-brand-dark);
}

.umv-viewer__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Alto tope para que una foto de pie no se salga de la pantalla. */
  max-height: 80vh;
  min-height: 18rem;
}

.umv-viewer__image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

/* Las flechas, una a cada lado de la foto y por encima de ella. */
.umv-viewer__controls {
  position: absolute;
  inset: 50% 1rem auto;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.umv-viewer__arrow {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--umv-white-90);
  color: var(--umv-color-brand-dark);
  font-size: 1.125rem;
  /* Las flechas si se pulsan aunque su fila deje pasar el raton. */
  pointer-events: auto;
}

.umv-viewer__arrow:hover,
.umv-viewer__arrow:focus-visible {
  background: var(--umv-white);
  color: var(--umv-color-primary);
}

@media (max-width: 767.98px) {
  /* En un telefono las flechas se comen la foto: ahi se pasa arrastrando. */
  .umv-viewer__controls {
    display: none;
  }

  .umv-viewer__stage {
    min-height: 12rem;
  }
}

/* ============================================
  ENCABEZADOS DE SECCION PRESTADOS
  ============================================ */

/* Mientras "Vida universitaria" no trae su propio diseno, sus secciones se
  leen como las de "Sobre nosotros": el antetitulo en versalitas grises, el
  titular de 44/52 -el de .umv-quotes y las demas de aquella pagina- y el
  texto de debajo en el navy suave, que lo separa del titular.

  La clase va en la seccion y sirve para los dos componentes con los que esta
  montada la pagina, asi que se pone una vez por seccion y nada mas. El dia
  que llegue el diseno de la pagina se quita de ahi y cada componente vuelve
  a sus medidas. */
.umv-heading--about {
  --umv-intro-eyebrow-color: var(--umv-slate-500);
  --umv-intro-eyebrow-opacity: 1;
  --umv-spotlight-title-size: 2.75rem;
  --umv-spotlight-title-line: 3.25rem;
}

/* El titular del intro lo pinta el atomo con su tamano de la escala, y 44/52
  no esta en ella: se le dice aqui, que es donde ya esta dicho para que lado
  va esta pagina. */
.umv-heading--about .umv-intro__text {
  font-size: 2.75rem;
  line-height: 3.25rem;
}

.umv-heading--about .umv-intro__paragraph,
.umv-heading--about .umv-spotlight__text {
  color: var(--umv-navy-550);
}

@media (max-width: 767.98px) {
  /* Igual que alla: en un telefono el titular de 44px deja dos palabras por
    renglon, asi que baja un paso de la escala. */
  .umv-heading--about {
    --umv-spotlight-title-size: var(--umv-display-7-size);
    --umv-spotlight-title-line: var(--umv-display-7-line);
  }

  .umv-heading--about .umv-intro__text {
    font-size: var(--umv-display-7-size);
    line-height: var(--umv-display-7-line);
  }
}

/* ============================================
  RESULTADOS DE BUSQUEDA
  ============================================ */

/* La pagina a la que manda el buscador de la barra. Toma las medidas y los
  colores de la de noticias -son la misma franja azul arriba y la misma lista
  debajo-, con su propia caja de busqueda porque aqui si se envia. */
.umv-results {
  --umv-results-gutter: clamp(1.5rem, 5.56vw, 5rem);
  --umv-results-space: 2.5rem;
  --umv-results-end: clamp(3rem, 7vw, 5rem);
  --umv-results-search: 28rem;
  padding: var(--umv-results-space) var(--umv-results-gutter) var(--umv-results-end);
  background: var(--umv-color-bg-soft);
  color: var(--umv-color-brand-dark);
}

.umv-results__inner {
  max-width: var(--umv-page-width, 100%);
  margin: 0 auto;
}

/* La misma pastilla de la busqueda de noticias, con su boton al final: aqui
  hay que enviarla, asi que el simbolo si se pulsa. */
.umv-results__form {
  display: flex;
  flex: 0 1 var(--umv-results-search);
  gap: 0.25rem;
  align-items: center;
  justify-content: space-between;
  max-width: var(--umv-results-search);
  padding: 0.5rem 0.5rem 0.5rem 1.125rem;
  border-radius: 0.5rem;
  background: var(--umv-sky-50);
}

.umv-results__form:focus-within {
  outline: 2px solid var(--umv-color-highlight);
  outline-offset: 2px;
}

/* La etiqueta existe para los lectores de pantalla; a la vista basta el texto
  de dentro del campo. */
.umv-results__label,
.umv-results__submit-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  white-space: nowrap;
}

.umv-results__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--umv-color-brand-dark);
  font-family: var(--umv-font-base);
  font-size: var(--umv-paragraph-default-size);
}

.umv-results__input::placeholder {
  color: var(--umv-slate-500);
  opacity: 1;
}

.umv-results__input:focus {
  outline: none;
}

.umv-results__submit {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.0625rem;
  height: 2.0625rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: var(--umv-color-highlight);
  color: var(--umv-color-on-dark);
  font-size: 0.75rem;
  cursor: pointer;
}

/* El recuento y los avisos, separados por la linea que cruza la franja. */
.umv-results__count,
.umv-results__note {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--umv-lilac-150);
  color: var(--umv-navy-550);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-results__hint {
  margin: 0.5rem 0 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-results__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* Cada resultado es una tarjeta que se pulsa entera. */
.umv-results__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--umv-color-border);
  border-radius: 0.5rem;
  background: var(--umv-color-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.umv-results__link:hover,
.umv-results__link:focus-visible {
  border-color: var(--umv-color-highlight);
  box-shadow: 0 4px 12px rgba(26, 22, 49, 0.08);
}

/* De donde sale el resultado: lo primero que se lee, porque el mismo termino
  puede estar en sitios muy distintos. */
.umv-results__section {
  grid-column: 1;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-small-size, 0.875rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.umv-results__text {
  grid-column: 1;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-results__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--umv-color-highlight);
}

@media (max-width: 575.98px) {
  /* En un telefono la caja ocupa el ancho: no hay sitio para dejarla corta. */
  .umv-results__form {
    max-width: none;
  }
}