/* ══════════════════════════════════════════════════════════════════
   EL PIE de plainplay.dev — UNO SOLO para todas las páginas del sitio:
   el estudio (`/es/`, `/en/`), la landing de dixo (`/[lang]/dixo`),
   Proyecto Stop (`/[lang]/stop`) y las dos legales de dixo
   (`/dixo/privacy`, `/dixo/delete-account`). El marcado lo emite
   `src/components/PieNav.astro`; aquí vive el cromo.

   ⭐ EXISTE PORQUE «IGUAL» NO PUEDE DEPENDER DE VARIAS COPIAS. En la web
   anterior de dixo el pie se escribió tres veces, se midió contra la
   portada dos veces, y aun así el filete acabó en tres anchos y dos
   alturas distintos: la portada medía en `rem` ESCALADOS (1rem =
   ancho/39) y las legales en px fijos, así que coincidían solo a 390 px
   de ancho, que es donde se midieron.
   ⛔ Por eso el pie NO vuelve a cada fichero. Si hay que cambiarlo, se
   cambia aquí y cambia en todas a la vez.

   ── LO QUE ES IGUAL EN TODAS, Y NO SE NEGOCIA ──────────────────────
   · El FILETE va A SANGRE: de borde a borde de la ventana, a cualquier
     ancho. Es la única regla que da el MISMO ancho en páginas cuyas
     columnas de texto miden distinto. (Es, además, LIENZO vs COLUMNA del
     juego: lo anclado a un borde llega al borde.)
   · Las medidas, en PÍXELES FIJOS y no en rem: 13/20 de cuerpo, 12 px de
     aire bajo el filete, 4 px entre renglones, 28 px del fondo.
   · TRES RENGLONES, siempre, porque el componente los emite siempre:
     estudio y juegos con el idioma · legales · correo. Con tres renglones
     el filete queda a 109 px del fondo (12 + 3×20 + 2×4 + 28 + 1): esa es
     LA invariante que la landing de dixo reserva en `--pie-h` y las dos
     legales en su `padding-bottom`. Si cambia aquí, cambia allí.
   · `--sab` (el inset de la barra de gestos) lo suman todas. ⚠️ Cada
     página declara el token; aquí solo se consume. Medir con insets a 0
     esconde el fallo: la portada antigua caía 34 px por debajo de las
     legales en un iPhone y en Chrome headless no se veía.

   ── FIJO, EN TODAS ─────────────────────────────────────────────────
   · Clavado al fondo de la VENTANA, no al final del documento: siempre a
     la vista, no se mueve al navegar entre páginas, y en `/dixo/privacy`
     —URL DE SOPORTE declarada en App Store Connect— la salida está ahí
     sin scrollear. ⚠️ Cada página reserva su alto abajo (`--pie-h` en la
     landing y en `global.css`, el `padding-bottom` de las legales), o la
     última línea queda tapada.

   ── LA COLUMNA DEL SITIO, Y LO QUE CADA PÁGINA PONE ────────────────
   · El texto empieza en LA MISMA COLUMNA en todas las páginas, aunque
     sus textos midan distinto, y la cabecera (`cabecera.css`) usa la
     misma: `--columna`, declarada aquí en `:root`. Es la hoja de la
     landing de dixo traducida de sus rem escalados (39rem de hoja con
     2.2rem de guarda y 1rem = min(100vw/39, 11.52px), o sea, 5.641vw
     de guarda hasta 449 px de ancho y, por encima, hoja de 449.28 px
     con 25.34 de guarda). ⛔ Ninguna página la redeclara.
   · `html{scrollbar-gutter:stable}` en las siete páginas: si no, la que
     tiene scroll mide 15 px menos en escritorio y el pie salta 7 px al
     pasar de una a otra.
   · Los tokens (`--paper`, `--ink`, `--muted`, `--blue`, `--rule`,
     `--sab`). El estudio los declara como alias de los suyos en
     `global.css`. Si este fichero no cargara, el pie se queda sin cromo
     pero la página sigue entera: ⛔ ninguna otra pieza puede depender de
     él.
   ══════════════════════════════════════════════════════════════════ */
:root{ --columna:max(5.641vw, calc((100% - 449.28px) / 2 + 25.34px)); }
.pie{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:flex; flex-direction:column; gap:4px;
  background:var(--paper);
  border-top:1px solid var(--rule);
  padding:12px var(--columna) calc(28px + var(--sab, 0px));
  font-size:13px; line-height:20px; color:var(--muted);
}
/* Cada renglón reparte sus grupos a los dos extremos de la columna. Si un
   renglón no cabe (320 px con 24 px de guarda), envuelve y el pie crece un
   renglón: se asume, antes que encoger el texto o recortar la diana. */
.pie-fila{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; }
.pie-grupo{ display:flex; flex-wrap:wrap; gap:4px 12px; }
.pie a{ text-decoration:none; color:var(--muted); transition:color .16s; }
.pie a:hover{ color:var(--blue); }
/* El activo —la página en la que estás, el idioma que lees— en TINTA, nunca
   en azul: el azul es el único acento y se gasta entero en el hover. */
.pie [aria-current]{ color:var(--ink); }