/* El credito de la agencia: una linea al pie de cada pagina, menos el portal.
 *
 * NO va en `index.html` a pedido de Axel: el portal son las dos puertas a pantalla completa y
 * cualquier banda abajo las tapa. La decision esta verificada en `tests/pie.test.mjs`, que falla
 * si alguna vez aparece ahi.
 *
 * ## Por que el isotipo es una mascara y no un <img>
 *
 * El archivo es uno solo y sirve para las dos paredes: la mascara toma el alfa del SVG y el color
 * sale de `currentColor`, asi que el mismo isotipo sale hueso sobre la noche de Paint, Mind y
 * Talleres, y tinta sobre la pared clara del 404. Con un `<img>` harian falta dos copias
 * coloreadas y ninguna de las dos podria seguir al enlace cuando se le pasa el mouse.
 *
 * ## Por que el fondo se pinta en Paint y no en Mind
 *
 * En Paint el cierre es la noche y el `body` es la pared clara: sin fondo propio el pie saldria
 * como una franja crema justo despues de la seccion oscura. En Mind el `body` YA es la noche y el
 * humo es una capa fija detras del contenido, asi que pintar la noche aca lo cortaria en una linea
 * recta a la altura del pie.
 *
 * Necesita tokens.css, tipografia.css y paint.css antes (usa --margen, --salida y las lineas). */

.pie-storf {
  /* El humo de Mind es fijo a z-index 0 y `main` sube a 1. El pie es hermano de `main`: sin esto
     queda por debajo del humo. */
  position: relative;
  z-index: 1;
  background: var(--c-noche);
  color: var(--c-hueso);
  /* Cuanta tinta lleva el credito. Es un numero medido, no elegido a ojo: a 10.5 px WCAG pide
     4.5:1, y el MISMO porcentaje no da lo mismo en las dos paredes porque la crema esta mucho
     mas cerca del gris medio que la noche. 54% sobre la noche da 4.91:1; sobre la pared daba
     3.76:1 y hay que subirlo. Lo mide tests/pie.test.mjs con la misma cuenta que paleta.mjs. */
  --pie-tono: 54%;
  border-top: 1px solid var(--linea-oscura);
  padding: clamp(1.5rem, 4vh, 2.4rem) var(--margen);
  display: flex;
  justify-content: center;
}

.mind-pagina .pie-storf { background: none; }

/* El 404 es la unica pagina que termina en la pared clara. */
.pie-storf--claro {
  background: none;
  color: var(--c-tinta);
  --pie-tono: 62%;
  border-top-color: var(--linea-clara);
}

.pie-storf__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  text-decoration: none;
  font-family: var(--tipo-texto);
  font-size: clamp(0.66rem, 0.78vw, 0.76rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Es un credito, no una llamada a la accion: vive por debajo del copy de la pagina y sube al
     pasar el mouse. */
  color: color-mix(in oklch, currentColor var(--pie-tono), transparent);
  transition: color 240ms var(--salida);
}

.pie-storf__enlace:hover,
.pie-storf__enlace:focus-visible { color: inherit; }

/* Cuadrado porque el viewBox del archivo se ajusto a la caja justa del dibujo, que es cuadrada.
   En `em` para que siga al texto cuando la linea escala. */
.pie-storf__isotipo {
  flex: none;
  width: 2em;
  height: 2em;
  background-color: currentColor;
  -webkit-mask: url('/assets/img/marca/storf-isotipo.svg') no-repeat center / contain;
  mask: url('/assets/img/marca/storf-isotipo.svg') no-repeat center / contain;
}

/* La linea entera no llega a 30 caracteres: parte antes que el isotipo se separe del texto. */
@media (max-width: 420px) {
  .pie-storf { padding-inline: 1rem; }
  .pie-storf__enlace { letter-spacing: 0.1em; }
}