/**
 * 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 {
  min-width: 13rem;
  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);
}

.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 {
  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%;
  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 {
  --umv-header-slide: 0.3s;
  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) {
  .umv-header--sticky {
    --umv-header-slide: 0s;
  }
}

/* ===== (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;
  width: 100%;
  max-width: var(--umv-header-width);
  margin: 0 auto;
  padding-inline: var(--umv-header-gutter);
}

.umv-topbar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.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: 0.55rem 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;
}

/* 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 {
  color: var(--umv-topbar-color);
  font-family: var(--umv-font-base);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
  text-decoration: none;
  transition: color 0.15s ease;
}

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

/* ===== (F) Barra principal ============================================= */
.umv-navbar {
  --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);
}

/* 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;
  }

  /* 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% + 0.5rem);
    right: 0;
    transform: none;
  }

  .umv-search--enhanced.is-open .umv-search__form {
    width: min(16rem, 72vw);
    padding: 0.35rem 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   (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-slate-500);
  --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);
}

.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 su titulo se pinta igual; en
   el diseno va apagado, no en el color de las demas columnas. */
.umv-footer__column--contact {
  --umv-link-column-title: var(--umv-footer-muted);
}

.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%;
}

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

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

.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;
}

.umv-button--sm {
  --umv-button-padding-block: 0.625rem;
  --umv-button-padding-inline: 0.875rem;
  --umv-button-size: var(--umv-paragraph-small-size);
}

.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);
  --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: clamp(13rem, 36vw, 43.25rem);
  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 */
  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);
}

.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;
}

/* --------------------------------------------------------------------------
   (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, no de un tope en rem. Con un tope, pasada
    cierta pantalla el ancho seguia creciendo y el alto no, asi que la foto
    cambiaba de forma segun el monitor. Asi la guarda a cualquier tamano.
    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. */
  --umv-stats-panel-height: calc(95vw * 0.5 * var(--umv-stats-panel-ratio));
  /* 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: 3.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 {
  min-height: var(--umv-stats-panel-height);
}

.umv-stats-panel__image {
  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);
}

@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;
}

.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__label {
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* 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);
  --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 que el diseno saca en dorado dentro del titular. */
.umv-finder__highlight {
  color: var(--umv-finder-spotlight);
}

/* ===== (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;
}

.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);
}

/* ===== (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;
  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);
  font-weight: var(--umv-weight-semibold);
  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 ============================================== */
.umv-finder__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  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;
  }
}

/* --------------------------------------------------------------------------
   (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);
}

.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. Cada foto se tine de
   azul marino al pasar el raton para avisar de que 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 velo que tine la foto al pasar el raton. */
  --umv-social-veil-color: var(--umv-color-brand-dark);
  --umv-social-veil-opacity: 0.9;
  --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;
  /* Aisla la mezcla del velo: se tine la foto, no la seccion. */
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 412 / 280;
}

.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 velo azul con el icono: aparece al pasar el raton y al llegar con el
   tabulador, para que tambien se vea sin raton. */
/* El velo no se desvanece entero a proposito: con opacidad menor que 1 el
  navegador lo pinta aparte y la mezcla deja de ver la foto, asi que durante la
  transicion se veia un azul plano y al final daba un salto. Lo que aparece es
  cada capa por su cuenta. */
.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 tinte va en una capa aparte: si se mezclara todo el velo, el icono blanco
   se perderia dentro del azul. */
.umv-social-post__veil::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--umv-social-veil-color);
  opacity: 0;
  /* `color` y no `multiply`: multiplicar con un azul tan oscuro apaga la foto
    sin llegar a tenirla. Con `color` la foto conserva su luz y solo toma el
    tono del velo, que es el duotono del diseno. Por eso tampoco hace falta
    quitarle el color aparte: este modo ya lo hace. */
  mix-blend-mode: color;
  transition: opacity 0.2s ease;
}

.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 {
  opacity: var(--umv-social-veil-opacity);
}


.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);
}

/* Las pestanas a la izquierda y el filtro a la derecha; cuando no caben, el
  filtro baja y ocupa el ancho entero. */
.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);
}

/* El componente de pestanas trae los colores de la seccion oscura de la
  portada, donde nacio. Aqui el fondo es claro, asi que se le pasan los suyos:
  sin esto las pestanas inactivas quedan blancas sobre blanco. El tamano
  tambien baja, que en esta pagina no son el titular de la seccion. */
.umv-catalog__tabs {
  --umv-tabs-color: var(--umv-slate-500);
  --umv-tabs-active: var(--umv-color-primary);
  --umv-tabs-size: var(--umv-paragraph-default-size);
  --umv-tabs-line: 1.4;
  --umv-tabs-gap: 1.75rem;
  margin: 0;
}

.umv-catalog__filter {
  position: relative;
  flex: 0 1 20rem;
}

/* 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;
  clip-path: inset(50%);
  white-space: nowrap;
}

.umv-catalog__filter-input {
  width: 100%;
  padding: 0.6rem 2.75rem 0.6rem 1rem;
  border: 1px solid var(--umv-color-border);
  border-radius: 0.5rem;
  background: var(--umv-color-surface);
  color: inherit;
  font-family: var(--umv-font-base);
  font-size: var(--umv-paragraph-default-size);
}

.umv-catalog__filter-input:focus {
  outline: none;
  border-color: var(--umv-color-primary);
}

.umv-catalog__filter-icon {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  color: var(--umv-color-primary);
  transform: translateY(-50%);
  pointer-events: none;
}

.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;
}

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

.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: 0.5rem;
  background: var(--umv-color-surface);
  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);
}

.umv-program-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--umv-program-card-media);
  background: var(--umv-color-bg-alt);
}

.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 {
  font-size: var(--umv-paragraph-default-size);
  line-height: 1.25;
  font-weight: var(--umv-weight-bold);
}

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

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

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

  .umv-catalog__filter {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   (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;
}

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

/* --------------------------------------------------------------------------
   (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);
  --umv-split-media-height: clamp(14rem, 22vw, 26rem);
  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 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--umv-split-media-height);
  background: var(--umv-color-bg-alt);
}

.umv-split__image {
  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-color-surface);
}

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

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

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

/* El panel oscuro solo cambia colores: el boton se invierte con las variables
  que ya expone el atomo, sin reglas nuevas para el. */
.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. */
  --umv-program-hero-card: 40%;
  --umv-program-hero-mark-height: 3.25rem;
  --umv-program-hero-title-size: var(--umv-display-7-size);
  --umv-program-hero-title-line: var(--umv-display-7-line);
  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);
}

/* La foto ocupa la seccion entera y la tarjeta va encima. Por eso se saca del
  flujo: asi lo alto lo manda la seccion y no la imagen. */
.umv-program-hero__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

/* 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);
}

.umv-program-hero__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: var(--umv-program-hero-card);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--umv-color-surface);
  border-radius: 0.25rem;
}

.umv-program-hero__breadcrumb {
  margin-bottom: 0.25rem;
}

.umv-program-hero__heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

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

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

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

.umv-program-hero__actions {
  margin-top: 0.5rem;
}

@media (max-width: 767.98px) {
  /* La tarjeta pasa a ocupar el ancho entero: al 40% no cabria el nombre de un
    programa largo. La foto sigue detras. */
  .umv-program-hero__card {
    width: 100%;
  }
}

/* ============================================
  PROGRAM TABS
  ============================================ */

.umv-program-tabs {
  --umv-program-tabs-gap: 1rem;
  --umv-program-tabs-min: 13rem;
  --umv-program-tabs-active-bg: var(--umv-slate-500);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--umv-program-tabs-min), 1fr));
  gap: var(--umv-program-tabs-gap);
}

.umv-program-tabs__item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--umv-color-divider);
  border-radius: 0.25rem;
  background: var(--umv-color-surface);
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
  text-align: start;
  text-decoration: none;
}

/* El icono va en su recuadro, como en el diseno. Mientras no haya iconos de
  verdad se ve el marcador, que avisa de que falta. */
.umv-program-tabs__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);
}

.umv-program-tabs__item:hover {
  border-color: var(--umv-color-border);
}

/* La pestana abierta va rellena: se ve cual es sin tener que leerlas todas. */
.umv-program-tabs__item.active {
  background: var(--umv-program-tabs-active-bg);
  border-color: var(--umv-program-tabs-active-bg);
  color: var(--umv-color-on-dark);
}

.umv-program-tabs__item.active .umv-program-tabs__icon {
  border-color: var(--umv-color-on-dark);
  color: var(--umv-color-on-dark);
}

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

.umv-program-body {
  --umv-program-body-width: 100%;
  --umv-program-body-gutter: 5%;
  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);
}

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

.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-gap: clamp(2.5rem, 5vw, 4rem);
  --umv-about-title-size: var(--umv-display-6-size);
  --umv-about-title-line: var(--umv-display-6-line);
  display: flex;
  flex-direction: column;
  gap: var(--umv-about-gap);
}

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

.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-slate-500);
  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;
}

.umv-about__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(12rem, 20vw, 18rem);
  overflow: hidden;
  background: var(--umv-color-bg-alt);
  border-radius: 0.25rem;
}

.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.6rem;
  color: var(--umv-color-muted);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
  text-align: end;
}

/* Borde punteado: es un hueco reservado, no contenido terminado. */
.umv-about__notice {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) 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;
}

.umv-about__footer {
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--umv-color-divider);
}

@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-6-size);
  --umv-feature-title-line: var(--umv-display-6-line);
}

.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;
}

.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-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-feature__items {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Las cifras van de dos en dos; los puntos de la lista, uno debajo de otro. */
.umv-feature--stats .umv-feature__items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.umv-feature__stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0;
  align-items: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--umv-color-divider);
  border-radius: 0.25rem;
}

/* El icono ocupa las dos filas: queda a la altura del bloque cifra + texto. */
.umv-feature__stat .umv-stat__icon {
  grid-row: 1 / span 2;
}

/* El icono y la cifra van en fila; el texto de la cifra, debajo de ella. */
.umv-feature__stat .umv-stat__value {
  display: block;
  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-feature__stat .umv-stat__label {
  display: block;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-small-size);
  line-height: var(--umv-paragraph-small-line);
}

.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);
}

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

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

.umv-feature-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.umv-feature-item__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);
}

.umv-feature-item__title {
  margin: 0 0 0.25rem;
  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-feature-item__text {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* ============================================
  PEOPLE CAROUSEL
  ============================================ */

.umv-people {
  --umv-people-who-width: 13rem;
  --umv-people-title-size: var(--umv-display-6-size);
  --umv-people-title-line: var(--umv-display-6-line);
}

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

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

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

.umv-people__controls {
  display: flex;
  flex: none;
  gap: 0.5rem;
}

/* Una persona por pantalla, arrastrable de lado. Sin JavaScript sigue
  funcionando: el navegador ya sabe desplazar esto. */
.umv-people__list {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  scrollbar-width: none;
}

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

.umv-person {
  display: grid;
  grid-template-columns: var(--umv-people-who-width) minmax(0, 1fr);
  gap: 2rem;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.umv-person__who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.umv-person__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--umv-color-bg-alt);
  color: var(--umv-slate-500);
}

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

.umv-person__name {
  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-person__role {
  margin: 0;
  color: var(--umv-color-muted);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-person__contact {
  margin-top: 0.5rem;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  text-decoration: underline;
}

.umv-person__contact:hover {
  color: var(--umv-color-link-hover);
}

.umv-person__quote {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-medium-size);
  line-height: var(--umv-paragraph-medium-line);
}

@media (max-width: 767.98px) {
  .umv-people__head {
    flex-direction: column;
  }

  .umv-person {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

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

.umv-plan {
  /* El acordeon acompana a la fila de pestanas de arriba: si se queda a la
    mitad, el lado derecho se ve vacio. */
  --umv-plan-width: 100%;
  /* El texto de entrada si lleva tope: a linea completa cuesta leerlo. */
  --umv-plan-text-width: 52rem;
  --umv-plan-title-size: var(--umv-display-6-size);
  --umv-plan-title-line: var(--umv-display-6-line);
  max-width: var(--umv-plan-width);
}

.umv-plan__intro {
  max-width: var(--umv-plan-text-width);
  margin-bottom: 2.5rem;
}

.umv-plan__title {
  margin: 0 0 0.75rem;
  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 {
  margin: 0;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* 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-color-divider);
  background: transparent;
}

.umv-plan__heading {
  margin: 0;
}

.umv-plan__toggle {
  padding: 1.1rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  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-plan__toggle:not(.collapsed) {
  background: transparent;
  box-shadow: none;
  color: var(--umv-color-brand-dark);
}

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

/* 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 {
  width: auto;
  height: auto;
  margin-left: auto;
  background-image: none;
  color: var(--umv-slate-500);
  content: '\2212';
  font-size: 1.25rem;
  line-height: 1;
  transform: none;
}

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

.umv-plan__body {
  padding: 0 0 1.25rem;
}

/* Sin rejilla a proposito: con `display: grid` los <li> dejan de pintar su
  vineta, y el diseno las lleva. */
.umv-plan__subjects {
  margin: 0;
  padding-left: 1.5rem;
  /* Explicito: el tema de base deja todas las listas sin vineta, y el diseno
    de esta si las lleva. */
  list-style: disc;
  color: var(--umv-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

.umv-plan__subject {
  margin-bottom: 0.4rem;
}

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

.umv-plan__subject::marker {
  color: var(--umv-slate-500);
}

.umv-plan__footer {
  margin-top: 2rem;
}

/* Boton neutro: el de descarga no compite con el azul de las acciones
  principales. Se hace con las variables que ya expone el atomo, sin reglas
  nuevas para el. */
.umv-plan__download {
  --umv-button-bg: var(--umv-color-surface);
  --umv-button-color: var(--umv-color-brand-dark);
  --umv-button-border: var(--umv-color-divider);
  --umv-button-hover-bg: var(--umv-color-bg-alt);
  --umv-button-hover-color: var(--umv-color-brand-dark);
}

.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;
}

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

.umv-community {
  /* Cuantas tarjetas se ven a la vez. Las columnas se reparten el ancho del
    componente, asi que no queda hueco a la derecha. */
  --umv-community-visible: 3;
  --umv-community-rows: 2;
  --umv-community-gap: 1.25rem;
  --umv-community-title-size: var(--umv-display-6-size);
  --umv-community-title-line: var(--umv-display-6-line);
}

.umv-community__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

.umv-community__title {
  margin: 0 0 0.5rem;
  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-slate-500);
  font-size: var(--umv-paragraph-default-size);
  line-height: var(--umv-paragraph-default-line);
}

/* El boton del perfil arriba y las flechas debajo, los dos pegados a la
  derecha, como en el diseno. */
.umv-community__tools {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-end;
}

.umv-community__controls {
  display: flex;
  gap: 0.5rem;
}

/* Las filas que haga falta, recorridas de lado. La rejilla se llena por
  columnas; de repartir cada origen en su fila se encarga la vista, que manda
  las tarjetas ya intercaladas. */
.umv-community__list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--umv-community-rows), auto);
  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;
}

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

.umv-social-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--umv-color-divider);
  border-radius: 0.25rem;
  background: var(--umv-color-surface);
}

.umv-social-card__head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.umv-social-card__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--umv-color-brand-dark);
  color: var(--umv-color-on-dark);
  font-size: 0.8rem;
}

.umv-social-card__account {
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  font-weight: var(--umv-weight-bold);
}

.umv-social-card__verified {
  color: var(--umv-color-highlight);
  font-size: 0.85rem;
}

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

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

/* Dibujo, no botones: por eso no cambian al pasar el raton. */
.umv-social-card__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  color: var(--umv-slate-500);
  font-size: 1rem;
}

.umv-social-card__save {
  margin-left: auto;
}

/* ============================================
  STUDENT VOICES
  ============================================ */

.umv-voices {
  --umv-voices-media: 13rem;
  /* Separacion entre la tarjeta y las flechas. */
  --umv-voices-gap: clamp(1rem, 4vw, 3rem);
  --umv-voices-arrow-size: 2.25rem;
  --umv-voices-title-size: var(--umv-display-6-size);
  --umv-voices-title-line: var(--umv-display-6-line);
}

.umv-voices__title {
  margin: 0 0 1.75rem;
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-voices-title-size);
  line-height: var(--umv-voices-title-line);
  font-weight: var(--umv-weight-bold);
}

/* Las flechas a los lados de la tarjeta. Los dos botones vienen juntos en su
  caja porque es lo que espera el carrusel; `display: contents` la deshace para
  que cada uno caiga en su columna sin tocar el HTML. */
.umv-voices__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--umv-voices-gap);
  align-items: center;
}

.umv-voices__controls {
  display: contents;
}

/* Las tres piezas van en la misma fila. Hay que decirlo: al colocarlas, la
  rejilla llega a la tercera columna con las flechas y manda la tarjeta a una
  fila nueva, que es como acababan una encima de la otra. */
.umv-voices__arrow--prev {
  grid-row: 1;
  grid-column: 1;
}

.umv-voices__arrow--next {
  grid-row: 1;
  grid-column: 3;
}

/* El boton va relleno, no suelto: el palido para el que no lleva a ningun
  lado y el oscuro para el que si. De cual es cual se encarga el carrusel, que
  pone `is-primary` en el que puede hacer algo. */
.umv-voices__arrow {
  --umv-icon-button-size: var(--umv-voices-arrow-size);
  --umv-icon-button-color: var(--umv-slate-500);
  --umv-icon-button-hover: var(--umv-slate-500);
  border-radius: 0.35rem;
  background: var(--umv-color-bg-alt);
}

.umv-voices__arrow.is-primary {
  --umv-icon-button-color: var(--umv-color-on-dark);
  --umv-icon-button-hover: var(--umv-color-on-dark);
  background: var(--umv-slate-500);
}

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

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

.umv-voices__list {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  scrollbar-width: none;
}

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

.umv-voice {
  display: grid;
  grid-template-columns: var(--umv-voices-media) minmax(0, 1fr);
  gap: 1.5rem;
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 1.25rem;
  border: 1px solid var(--umv-color-divider);
  border-radius: 0.25rem;
}

.umv-voice__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11rem;
  overflow: hidden;
  border-radius: 0.25rem;
  background: var(--umv-color-bg-alt);
}

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

.umv-voice__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.4rem;
  color: var(--umv-color-border);
  font-size: 1.4rem;
}

.umv-voice__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  margin: 0;
}

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

.umv-voice__who {
  display: flex;
  flex-direction: column;
}

.umv-voice__name {
  color: var(--umv-color-brand-dark);
  font-size: var(--umv-paragraph-default-size);
  font-weight: var(--umv-weight-bold);
}

.umv-voice__role {
  color: var(--umv-color-muted);
  font-size: var(--umv-paragraph-default-size);
}

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

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

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

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

  /* Las flechas no caben a los lados en pantalla chica: se quedan debajo. */
  .umv-voices__stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .umv-voices__list {
    grid-column: 1;
    order: -1;
  }

  .umv-voices__arrow--prev,
  .umv-voices__arrow--next {
    grid-column: 1;
    justify-self: center;
  }
}

/* ============================================
  CALLOUT SPLIT
  ============================================ */

.umv-cta-split {
  /* Las mitades se reparten el ancho solas, asi que agregar una tercera no
    obliga a tocar nada de aqui. */
  --umv-cta-split-min-height: clamp(13rem, 20vw, 17.5rem);
  --umv-cta-split-text-width: 26rem;
  --umv-cta-split-title-size: var(--umv-display-5-size);
  --umv-cta-split-title-line: var(--umv-display-5-line);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.umv-cta-split__half {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
  min-height: var(--umv-cta-split-min-height);
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  text-align: center;
}

.umv-cta-split__text {
  max-width: var(--umv-cta-split-text-width);
  margin: 0;
  font-size: var(--umv-cta-split-title-size);
  line-height: var(--umv-cta-split-title-line);
  font-weight: var(--umv-weight-bold);
}

/* La mitad clara: el boton relleno en gris azulado, que es el unico color
  fuerte que hay de este lado. */
.umv-cta-split__half--light {
  background: var(--umv-color-bg-alt);
  color: var(--umv-slate-500);
}

.umv-cta-split__half--light .umv-button {
  --umv-button-bg: var(--umv-slate-500);
  --umv-button-color: var(--umv-color-on-dark);
  --umv-button-hover-bg: var(--umv-color-brand-dark);
  --umv-button-hover-color: var(--umv-color-on-dark);
}

/* La mitad oscura invierte: el fondo toma el color y el boton se aclara. Se
  hace con las variables que ya expone el atomo, sin reglas nuevas para el. */
.umv-cta-split__half--dark {
  background: var(--umv-slate-500);
  color: var(--umv-color-on-dark);
}

.umv-cta-split__half--dark .umv-button {
  --umv-button-bg: var(--umv-color-bg-alt);
  --umv-button-color: var(--umv-slate-500);
  --umv-button-hover-bg: var(--umv-color-surface);
  --umv-button-hover-color: var(--umv-color-brand-dark);
}

@media (max-width: 767.98px) {
  /* Apiladas: a media pantalla no cabe ninguna de las dos preguntas. */
  .umv-cta-split {
    grid-auto-flow: row;
  }
}