/** ==========================================================================
 * PieNavegacion — Footer 2026
 *
 * Figma: Web CEI 2026 → «HOME – V2» → «Sección 9 - Footer» (node 867-4242).
 * Reutiliza los tokens de cei-header-admin.css (se encola como dependencia):
 * la unidad --MenuNavegacion-espacio, la paleta Global y el grupo Font.
 * Estructura: claim + columnas de enlaces + centros / marca + newsletter /
 * barra legal entre dos filetes / bloque Omnes.
 * Breakpoints: ≥1200 tres zonas en fila · 768–1199 apilado ancho · <768 columna.
 * Formato SUITCSS: ComponentName-descendentName--modifierName
 * ========================================================================== */

.PieNavegacion {
  position: relative;
  z-index: 9990; /* por encima del contenido del tema; el header va aún más alto */
  /* Aire entre el contenido de la página y el gris del footer (60px) */
  margin-top: calc(var(--MenuNavegacion-espacio) * 7.5);
  background-color: var(--Global-Color-Grey);
  color: var(--Global-Color-Black);
  font-family: var(--MenuNavegacion-fuente);
  letter-spacing: var(--Font-Letter-spacing-2); /* tracking único; hereda a todo */
}

/*
 * Full-bleed defensivo: el footer debe ir suelto en el <body>, pero si el
 * contenido de una página tiene un <div> sin cerrar, el parser deja abierto
 * el #Content de la plantilla y el footer acaba anidado dentro. Ese contenedor
 * lleva padding lateral (--MenuNavegacion-margenPagina), así que el gris se
 * quedaba sin llegar a los bordes. Restamos exactamente ese mismo token: es
 * responsive por sí solo y, a diferencia de 100vw, no cuenta el ancho de la
 * barra de scroll (nada de scroll horizontal en Windows).
 * Ojo: esto es una red de seguridad, no un arreglo — el HTML mal cerrado hay
 * que corregirlo en el contenido de la página.
 */
body.cei-header-admin #Content .PieNavegacion {
  margin-left: calc(-1 * var(--MenuNavegacion-margenPagina, 0px));
  margin-right: calc(-1 * var(--MenuNavegacion-margenPagina, 0px));
}

/*
 * Reset defensivo: en la web real los estilos globales del tema (headings en
 * serif, márgenes de <p>) y el CSS del plugin de Brevo pisan el bloque.
 * :where() mantiene la especificidad a cero para que las clases de abajo
 * sigan mandando; el font-family con !important gana a cualquier override.
 */
.PieNavegacion :where(h3, p, ul, li, figure) {
  margin: 0;
  padding: 0;
}

.PieNavegacion :where(h3, p, a, li, span, label, input, button) {
  font-family: var(--MenuNavegacion-fuente);
  font-weight: var(--Font-Weight-400) !important; /* peso único del sistema */
  letter-spacing: var(--Font-Letter-spacing-2); /* tracking único del sistema */
}

/* Ningún hover del componente subraya (el a:hover del tema sí lo hace) */
.PieNavegacion a:hover,
.PieNavegacion a:focus-visible {
  text-decoration: none !important;
}

/**
 * Zona principal: claim + Programas/Escuela/redes + centros universitarios
 * Figma: claim 625 · columnas 692 · logos 347 sobre 1880 de contenido.
 */

/* Reparto del Figma (625/692/347) ajustado para que con el cuerpo de 19px
   las listas no se partan antes de tiempo en anchos intermedios */
.PieNavegacion-principal {
  display: grid;
  /* La zona de centros (max-content) nunca cede: sus títulos van en una línea */
  grid-template-columns: minmax(0, 560fr) minmax(0, 750fr) max-content;
  column-gap: calc(var(--MenuNavegacion-espacio) * 12);
  padding: calc(var(--MenuNavegacion-espacio) * 4) var(--MenuNavegacion-margenPagina) 0;
}

.PieNavegacion-claim {
  color: var(--Global-Color-Black);
  font-size: var(--Font-Size-45);
  font-weight: var(--Font-Weight-400);
  /* Regla del sistema: Size-45 siempre con interlineado 1
     (= Font/Line-height-100 de Figma, 45px) */
  line-height: var(--Font-Line-height-100);
}

/* Las tres listas se reparten como en el Figma (huecos iguales de ~111px) */
.PieNavegacion-columnas {
  display: flex;
  justify-content: space-between;
  column-gap: calc(var(--MenuNavegacion-espacio) * 6);
  row-gap: calc(var(--MenuNavegacion-espacio) * 6);
}

.PieNavegacion-titulo {
  margin: 0 0 calc(var(--MenuNavegacion-espacio) * 2.5);
  color: var(--Global-Color-Black);
  font-size: var(--Font-Size-29);
  font-weight: var(--Font-Weight-400);
  line-height: var(--Font-Line-height-110); /* Figma: 110% */
}

.PieNavegacion-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Misma separación que las listas de los submenús del header */
.PieNavegacion-lista > li + li {
  margin-top: var(--MenuNavegacion-enlaceGap);
}

.PieNavegacion-enlace {
  display: inline-block;
  color: var(--Global-Color-Black);
  font-size: var(--Font-Size-19);
  line-height: normal; /* Figma: interlineado automatico */
  text-decoration: none;
  transition: color 0.15s ease;
}

/* Hover sin subrayado (siempre): la señal es el color destacado */
.PieNavegacion-enlace:hover,
.PieNavegacion-enlace:focus-visible {
  color: var(--Global-Destacado) !important;
  text-decoration: none;
}

/* Los enlaces cortos de Escuela y redes no se parten nunca: al ser
   min-content del flex, obligan a que sea la columna larga la que ceda */
.PieNavegacion-col--escuela .PieNavegacion-enlace,
.PieNavegacion-redes .PieNavegacion-enlace {
  white-space: nowrap;
}

/* Redes sociales: en cursiva, sin título y a ras con los títulos de columna */
.PieNavegacion-redes {
  font-style: italic;
}

.PieNavegacion-redes > li + li {
  margin-top: 0;
}

.PieNavegacion-redes .PieNavegacion-enlace {
  font-style: italic;
}

/* Centros universitarios (UDIMA y SABAL) */
.PieNavegacion-centros {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--MenuNavegacion-espacio) * 3);
}

/* Ancho fijado por el título en una sola línea; todo centrado */
.PieNavegacion-centro {
  flex: 0 0 auto;
  text-align: center;
}

.PieNavegacion-centroTitulo {
  margin: 0 0 calc(var(--MenuNavegacion-espacio) * 2);
  color: var(--Global-Color-Black);
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-400);
  line-height: normal; /* Figma: interlineado automatico */
  white-space: nowrap; /* el texto nunca se parte */
}

.PieNavegacion-centro > a {
  display: block;
}

/* Lockups verticales del Figma (134 × 199 y 139 × 212), a tamaño natural
   y centrados bajo su título */
.PieNavegacion-centro img {
  display: block;
  width: 90%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/**
 * Marca: el claim con el logotipo debajo, en la primera columna
 *
 * El logo estaba en una fila propia bajo las columnas de enlaces, con la
 * newsletter al otro lado (Eduardo, 08/09/2026): ahora acompaña al claim, que
 * es lo que nombra, y la newsletter baja a la fila de las sedes.
 */

.PieNavegacion-marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--MenuNavegacion-espacio) * 5);
}

/* Figma: 606 × 90 a 1920 de viewport */
.PieNavegacion-logo {
  display: block;
  width: auto;
  max-width: 440px; /* tope de ancho, a petición */
  height: clamp(44px, 4.7vw, 90px);
  object-fit: scale-down;
  /*
   * Pegado al fondo de su columna (Eduardo, 16/09/2026): la marca es un ítem de
   * la rejilla y se estira al alto de la fila, así que el `auto` empuja el
   * logotipo hasta abajo y queda a la altura del último enlace de las listas de
   * al lado —«Videojuegos»—. Antes colgaba del claim y se quedaba a media
   * altura, sin alinearse con nada.
   *
   * En móvil no hace nada: allí la columna mide lo que su contenido.
   */
  margin-top: auto;
}

/**
 * Newsletter: cabecera (título + texto), campo con flecha y línea de acepto
 */

/* El ancho lo da su columna de la rejilla de sedes. */
.PieNavegacion-news {
  min-width: 0;
}

.PieNavegacion-newsCabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--MenuNavegacion-espacio) * 2);
}

.PieNavegacion-newsTitulo {
  color: var(--Global-Color-Black);
  font-size: var(--Font-Size-19) !important;
  line-height: normal; /* Figma: interlineado automatico */
}

.PieNavegacion-newsTexto {
  color: var(--Global-Gris-Texto-Pie); /* AA sobre el pie: ver cei-tokens.css */
  font-size: var(--Font-Size-14) !important;
  font-style: italic;
  line-height: normal; /* Figma: interlineado automatico */
}

/*
 * Formulario del shortcode de Brevo ([sibwp_form id=1]): se recoloca con grid
 * para clavar el diseño — el campo de email ocupa toda la fila y el botón de
 * envío se superpone en su borde derecho como una flecha; la línea legal del
 * checkbox (obligatoria) va debajo en letra pequeña. Su título propio se
 * oculta porque el bloque ya lleva la cabecera «Newsletter».
 */
.PieNavegacion-news .sib_signup_box_inside_1 {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: calc(var(--MenuNavegacion-espacio) * 1.5);
  margin-top: var(--MenuNavegacion-espacio); /* pegado a «Newsletter / Recibe…» */
  align-items: center;
}

.PieNavegacion-news .p_3san {
  display: none;
}

.PieNavegacion-news p.sib-email-area {
  grid-area: 1 / 1 / 2 / -1;
  margin: 0;
}

.PieNavegacion-news .flex_suscribe {
  display: contents;
}

.PieNavegacion-news .flex_suscribe > p {
  margin: 0;
}

.PieNavegacion-news .flex_suscribe > p:has(input[type="submit"]) {
  grid-area: 1 / 2;
  z-index: 1;
  justify-self: end;
  align-self: center;
}

.PieNavegacion-news .flex_suscribe > p:has(input[type="checkbox"]) {
  grid-area: 2 / 1 / auto / -1;
  color: var(--Global-Color-Black);
  font-size: var(--Font-Size-14) !important;
  line-height: normal; /* Figma: interlineado automatico */
}

/* Casilla con el estilo nativo del navegador (a petición) */
.PieNavegacion-news input[type="checkbox"],
.PieNavegacion-acepto input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0 calc(var(--MenuNavegacion-espacio) * 0.75) 0 0;
  vertical-align: -2px;
  cursor: pointer;
}

.PieNavegacion-news .flex_suscribe a {
  color: inherit;
  text-decoration: underline;
  transition: color 0.15s ease;
}

.PieNavegacion-news .flex_suscribe a:hover {
  color: var(--Global-Destacado);
}

/*
 * La casilla y su frase van en una misma etiqueta: pulsar la frase marca la
 * casilla. El «Consúltalos» va detras, aparte (functions.php,
 * cei_newsletter_acepto(); Eduardo, 24/09/2026).
 */
.PieNavegacion-news .PieNavegacion-aceptoFrase {
  display: inline;
  margin: 0;
  font-size: inherit;
  hyphens: manual; /* partia «condi-ciones» */
  cursor: pointer;
}

.PieNavegacion-news .PieNavegacion-aceptoEnlace {
  margin-left: calc(var(--MenuNavegacion-espacio) * 0.75);
  white-space: nowrap;
}

/* Mensajes de estado del plugin (error/éxito) */
.PieNavegacion-news .sib_msg_disp {
  grid-column: 1 / -1;
  font-size: var(--Font-Size-14) !important;
  line-height: normal; /* Figma: interlineado automatico */
}

.PieNavegacion-news .sib_msg_disp:empty {
  display: none;
}

/*
 * Campo de email: píldora con la flecha dentro.
 * Se incluyen los selectores propios del plugin de Brevo
 * (form#sib_signup_form_1 …): al llevar un ID ganan a nuestras clases
 * aunque ambas usen !important, así que hay que igualar su especificidad.
 */
.PieNavegacion-input,
.PieNavegacion .PieNavegacion-news input[type="email"],
.PieNavegacion .PieNavegacion-news input[type="text"],
.PieNavegacion form#sib_signup_form_1 input[type="text"],
.PieNavegacion form#sib_signup_form_1 input[type="email"],
.PieNavegacion form#sib_signup_form_1 select {
  appearance: none;
  -webkit-appearance: none;
  width: 100% !important;
  min-width: 0;
  height: 40px !important; /* Figma: 362 × 39 */
  margin: 0 !important;
  padding: 0 52px 0 calc(var(--MenuNavegacion-espacio) * 2.5) !important;
  background-color: transparent !important; /* sin fondo, a petición */
  border: 1px solid var(--Global-Borde-Campo) !important; /* #bbb, a petición */
  border-radius: 999px !important;
  font-family: var(--MenuNavegacion-fuente);
  box-shadow: none !important;
  color: var(--Global-Color-Black) !important;
  font-size: var(--Font-Size-14) !important;
  letter-spacing: var(--Font-Letter-spacing-2); /* los inputs no lo heredan */
  line-height: normal !important; /* el alto lo da height: 40px, no el interlineado */
}

.PieNavegacion-input::placeholder,
.PieNavegacion-news input::placeholder {
  color: var(--Global-Gris-Seccion);
}

/*
 * Botón de envío del shortcode: el input con value="Enviar" no permite
 * cambiar el texto, así que se oculta (color transparente) y se pinta la
 * flecha como background-image encima del borde derecho del campo.
 */
.PieNavegacion .PieNavegacion-news button,
.PieNavegacion .PieNavegacion-news input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px !important;
  height: 36px !important;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M2 9h13M10.5 4.5 15 9l-4.5 4.5' fill='none' stroke='%23000000' stroke-width='1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
  overflow: hidden;
  cursor: pointer;
}

.PieNavegacion .PieNavegacion-news button:hover,
.PieNavegacion .PieNavegacion-news input[type="submit"]:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M2 9h13M10.5 4.5 15 9l-4.5 4.5' fill='none' stroke='%23e43713' stroke-width='1.5'/%3E%3C/svg%3E") !important;
}

/* Variante estática (si el shortcode de Brevo no existe) */
.PieNavegacion-campo {
  position: relative;
  margin-top: var(--MenuNavegacion-espacio); /* pegado a «Newsletter / Recibe…» */
}

.PieNavegacion-boton {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 44px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--Global-Color-Black);
  font-size: var(--Font-Size-19);
  cursor: pointer;
  transition: color 0.15s ease;
}

.PieNavegacion-boton:hover {
  color: var(--Global-Destacado);
}

/* La flecha es el mismo glifo ↓ de Inter girado -90° (regla del sistema) */
.PieNavegacion-boton span {
  display: inline-block;
  rotate: -90deg;
}

.PieNavegacion-acepto {
  display: block;
  margin-top: calc(var(--MenuNavegacion-espacio) * 1.5);
  color: var(--Global-Color-Black);
  font-size: var(--Font-Size-14);
  line-height: normal; /* Figma: interlineado automatico */
}

/**
 * Sedes
 *
 * Vienen del footer anterior, donde estaban tras un selector de pestanas.
 * Aqui se ven las cuatro a la vez: cuatro columnas que se reparten el ancho y
 * caben en dos, y luego en una, segun encoja la pantalla.
 *
 * El nombre de la ciudad va a Size-19 y el resto a Size-14, que es la misma
 * escala con la que el pie separa titulo y letra pequena.
 */
/*
 * Solo margen lateral, sin relleno. El resto de bloques del pie separan su
 * contenido del borde con padding; aqui hace falta margen para que el filete
 * empiece y acabe en el carril en vez de ir de lado a lado. Poniendo los dos
 * —que es como estaba— el contenido se iba al doble que el de sus vecinos.
 */
/*
 * Las cuatro sedes y la newsletter, en cinco columnas (Eduardo, 08/09/2026).
 *
 * La lista conserva su etiqueta y ocupa cuatro columnas con una rejilla propia
 * del mismo hueco, en vez de disolverse con `display: contents`: asi las cinco
 * columnas miden exactamente igual y la lista sigue siendo una lista para quien
 * navega con lector de pantalla.
 */
.PieNavegacion-sedes {
  --PieNavegacion-sedesHueco: calc(var(--MenuNavegacion-espacio) * 3);

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--PieNavegacion-sedesHueco);
  /* Aire sobre el filete (Eduardo, 08/09/2026). Lo daba la fila del logotipo,
     que estaba en medio y ya no esta: sin el, la linea quedaba pegada al final
     de las listas de enlaces. Es el mismo valor que separaba aquella fila. */
  margin-top: calc(var(--MenuNavegacion-espacio) * 7.5);
  padding-top: calc(var(--MenuNavegacion-espacio) * 4);
  border-top: 1px solid var(--Global-Filete);
  margin-inline: var(--MenuNavegacion-margenPagina);
  margin-bottom: calc(var(--MenuNavegacion-espacio) * 5);
}

.PieNavegacion-sedesLista {
  grid-column: span 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--PieNavegacion-sedesHueco);
  margin: 0;
  padding: 0;
  list-style: none;
}

.PieNavegacion-sede {
  display: flex;
  flex-direction: column;
  gap: 0; /* el aire lo da el alto mínimo de cada enlace, más abajo */
  font-size: var(--Font-Size-14);
}

.PieNavegacion-sedeCiudad {
  margin: 0 0 4px;
  font-family: var(--MenuNavegacion-fuente);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
}

/*
 * El tamano se nombra, no se hereda.
 *
 * Estos dos enlaces heredaban el tamano de su contenedor —14 en el bloque de
 * la sede, 19 en la linea de la ciudad—, asi que la MISMA clase
 * .PieNavegacion-enlace salia a dos tamanos distintos dentro del footer y a un
 * tercero en la fila legal, sin que ninguna regla lo dijera. Los valores no
 * cambian: son los que ya se veian. Lo que cambia es que ahora estan escritos,
 * y con el token de la escala, asi que se mueven con ella por breakpoint.
 *
 * El interlineado de 17px se va con ellos: sobre Size-14 son 1.21, o sea
 * `normal`, pero clavado en px se queda en 1.31 cuando el token baja a 13 en
 * movil.
 */
.PieNavegacion-sede .PieNavegacion-enlace {
  font-size: var(--Font-Size-14);
  line-height: normal;
  /*
   * Dirección, teléfono y correo medían 15,5px de alto con 4px entre uno y
   * otro, por debajo de los 24px que pide WCAG 2.2 para tocarlos con el dedo
   * (PageSpeed, 05/10/2026). Con 24px de alto y sin hueco, el texto queda a la
   * misma distancia de antes más unos 4px.
   */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.PieNavegacion-sedeCiudad .PieNavegacion-enlace {
  font-size: var(--Font-Size-19);
  line-height: normal;
}

@media (max-width: 1199.98px) {
  /* Cinco columnas no caben: las sedes de dos en dos y la newsletter debajo. */
  .PieNavegacion-sedes {
    grid-template-columns: minmax(0, 1fr);
  }

  .PieNavegacion-sedesLista {
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .PieNavegacion-sedesLista {
    grid-template-columns: minmax(0, 1fr);
  }
}

/**
 * Barra legal: una sola fila entre dos filetes
 */

.PieNavegacion-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--MenuNavegacion-espacio) * 2) calc(var(--MenuNavegacion-espacio) * 4);
  padding: calc(var(--MenuNavegacion-espacio) * 2) var(--MenuNavegacion-margenPagina);
  border-top: 1px solid var(--Global-Color-Black);
  border-bottom: 1px solid var(--Global-Color-Black);
}

.PieNavegacion-copy {
  margin: 0;
  color: var(--Global-Color-Black);
  font-size: var(--Font-Size-14);
  line-height: normal; /* Figma: interlineado automatico */
}

.PieNavegacion-legalEnlaces {
  display: flex;
  gap: calc(var(--MenuNavegacion-espacio) * 5);
}

.PieNavegacion-legalEnlaces .PieNavegacion-enlace {
  font-size: var(--Font-Size-14);
  line-height: normal; /* Figma: interlineado automatico */
}

/**
 * Bloque Omnes Education
 */

.PieNavegacion-omnes {
  padding: calc(var(--MenuNavegacion-espacio) * 2) var(--MenuNavegacion-margenPagina) calc(var(--MenuNavegacion-espacio) * 3);
}

.PieNavegacion-omnesTexto {
  margin: 0 auto;
  color: var(--Global-Color-Black);
  font-size: var(--Font-Size-14);
  line-height: normal; /* Figma: interlineado automatico */
  text-align: center;
}

.PieNavegacion-omnesLogo {
  display: block;
  width: fit-content;
  margin: calc(var(--MenuNavegacion-espacio) * 2) auto 0;
}

.PieNavegacion-omnesLogo img {
  display: block;
  width: auto;
  height: 68px; /* Figma: 160 × 68 */
}

/**
 * Responsive
 */

@media (max-width: 1199.98px) {
  /* menos aire exterior donde la pantalla es más corta */
  .PieNavegacion {
    margin-top: calc(var(--MenuNavegacion-espacio) * 4);
  }

  .PieNavegacion-principal {
    grid-template-columns: 1fr;
    row-gap: calc(var(--MenuNavegacion-espacio) * 6);
    padding-top: calc(var(--MenuNavegacion-espacio) * 6);
  }

}

@media (max-width: 767.98px) {
  /*
   * Orden móvil: claim · «Programas | Escuela» · logos en horizontal ·
   * redes sociales debajo de los logos. La <nav> se disuelve con
   * display:contents para que sus columnas sean celdas del grid principal;
   * las filas explícitas permiten sacar las redes de su orden en el DOM.
   */
  .PieNavegacion-columnas {
    display: contents;
  }

  .PieNavegacion-principal {
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--MenuNavegacion-espacio);
  }

  /*
   * El envoltorio de la marca se disuelve para que el claim y el logo sean
   * celdas del grid principal y puedan colocarse por fila, como el resto.
   */
  .PieNavegacion-marca {
    display: contents;
  }

  .PieNavegacion-claim {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .PieNavegacion-logo {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Programas y Escuela comparten fila, mitad y mitad */
  .PieNavegacion-col {
    grid-column: span 3;
    grid-row: 3;
  }

  /*
   * Cada centro cuelga de su columna de texto: UDIMA bajo «Programas» y
   * SABAL bajo «Escuela», con el mismo borde izquierdo que sus títulos
   * (justify-self: start mantiene la caja al ancho del título, así el logo
   * conserva su tamaño y sigue centrado debajo).
   */
  .PieNavegacion-centros {
    display: contents;
  }

  .PieNavegacion-centro {
    grid-row: 4;
    justify-self: start;
  }

  .PieNavegacion-centro:first-child {
    grid-column: 1 / span 3;
  }

  .PieNavegacion-centro:last-child {
    grid-column: 4 / span 3;
  }

  /* Redes sociales, debajo de los logos */
  .PieNavegacion-redes {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .PieNavegacion-logo {
    height: 44px;
  }

  .PieNavegacion-legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .PieNavegacion-enlace,
  .PieNavegacion-boton {
    transition: none;
  }
}