/*
 * CHROME de la web pública: el PIE que cierra todas las páginas y la
 * PÁGINA DE ERROR de marca.
 * ---------------------------------------------------------------------
 * Es CSS plano —no utilidades de Tailwind— por dos motivos:
 *
 *  1. El bundle `web/tailwind.web.compiled.css` está VERSIONADO en git y
 *     se recompila a mano (`bin/tailwind-build --web`). Un pie nuevo
 *     pide una docena de utilidades que hoy no están compiladas, y
 *     recompilar aquí chocaría con las ramas que están tocando el mismo
 *     fichero en paralelo.
 *  2. `web/web.css` —donde vive el resto del vocabulario `web-*`— está
 *     también en manos de otra rama. Este fichero usa sus mismos tokens
 *     y su misma convención de nombres (`bloque__elemento`), así que
 *     fundirlo dentro de `web.css` cuando amaine es un corta y pega.
 *
 * Lo carga `layouts/public.twig` en TODAS las páginas públicas: el pie
 * no es de una pantalla concreta.
 */

/* =====================================================================
   PIE
   ===================================================================== */

.web-foot {
  border-top: 1px solid var(--border);
  background-color: var(--background);
}

.web-foot__inner {
  margin-inline: auto;
  max-width: 80rem;
  padding: 3.5rem 1rem 2rem;
}

@media (min-width: 640px) {
  .web-foot__inner {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .web-foot__inner {
    padding-inline: 2rem;
  }
}

/*
 * Rejilla del pie. Móvil: una sola columna, cada grupo debajo del
 * anterior. 640 px: dos columnas. 1024 px: seis, de las que la columna
 * de marca ocupa dos — con cuatro columnas de enlaces al lado, los
 * títulos quedan alineados y ninguna lista se parte.
 */
.web-foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
}

@media (min-width: 640px) {
  .web-foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .web-foot__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .web-foot__brand {
    grid-column: span 2 / span 2;
  }
}

.web-foot__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.web-foot__logo img {
  height: 1.75rem;
  width: auto;
}

.web-foot__claim {
  max-width: 26ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--foreground-body);
  text-wrap: pretty;
}

/*
 * Selector de idioma. Mismo aspecto que el de la barra superior
 * (`.web-nav__lang`) para que se lea como el mismo control y no como un
 * enlace suelto que hace algo parecido.
 */
.web-foot__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.875rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 0.45rem);
  /* Sans, igual que su gemelo de la navbar (`.web-nav__lang`): son el
     mismo control en dos sitios y en dos tipografías cantaba. */
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--foreground-muted-soft);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.web-foot__lang:hover {
  color: var(--foreground);
  background-color: var(--muted);
}

.web-foot__title {
  margin-bottom: 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground);
}

.web-foot__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-foot__link {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--foreground-muted-soft);
  transition: color var(--duration-fast) var(--ease-standard);
}

.web-foot__link:hover,
.web-foot__link:focus-visible {
  color: var(--foreground);
}

/* Línea final: copyright a un lado, autoría al otro. */
.web-foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.web-foot__copy {
  font-size: 0.75rem;
  color: var(--foreground-muted-soft);
}

/* =====================================================================
   PÁGINA DE ERROR
   ===================================================================== */

.web-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.web-error__inner {
  margin-inline: auto;
  max-width: 44rem;
  padding: 4rem 1rem 5rem;
  text-align: center;
}

/*
 * El código, grande, en la mono del sitio. Es el dato que busca quien
 * llega aquí: si dice 404 no hace falta leer nada más para saber que la
 * URL está mal escrita.
 */
.web-error__code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 2.5rem + 7vw, 9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

.web-error__title {
  margin-top: 1rem;
}

.web-error__body {
  margin-top: 0.875rem;
  margin-inline: auto;
  max-width: 34rem;
}

/* Enlaces de salida. Sin buscador: en un sitio de nueve páginas y 74
   URLs, cuatro enlaces resuelven más rápido que una caja de texto. */
.web-error__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.web-error__link {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--foreground-body);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.web-error__link:hover,
.web-error__link:focus-visible {
  color: var(--foreground);
  border-color: var(--foreground-muted-soft);
  background-color: var(--muted);
}

/* Referencia del incidente: sólo aparece en los 500, y sólo para que
   quien escriba a soporte pueda pegarla. */
.web-error__ref {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--foreground-muted-soft);
  overflow-wrap: anywhere;
}