/* ═══════════════════════════════════════════════════════════════════════════
   pie.css · Dream Life · plataforma — EL PIE, ESCRITO UNA SOLA VEZ (#55)

   ⭐Decisión de Raimundo (27-sep-2026, render `pie-opciones.png`, opción A): **la
   pirámide**. El logo Unión sin lema a 190 px, centrado, y debajo dos filas:
   «Términos · Privacidad» / «Reembolsos y saldo no reembolsable · Contacto», con
   un punto redondo entre cada par.

   🔴Por qué es un archivo propio: hasta #55 `.legales` estaba escrito **tres
   veces** —en `base.css`, en `documento.css` y en el `<style>` de `puerta`— y el
   pie venía en cuatro formas. Con la pirámide escrita en cada superficie, las dos
   copias habrían divergido el primer día que alguien tocara una (regla 1). Con un
   archivo, la divergencia entre producto y documento **no se vigila: no puede
   existir**. Lo vigila `calidad/verificar-pie.py` (P-reglas): ninguna regla fuera
   de esta hoja selecciona `.pie`, `.pie-fila`, `.pie-punto` ni `.legales`.

   ⚠️No trae ni un valor de color: consume `tokens.css`, que cada pantalla enlaza
   PRIMERO (diseño #55, §2.1 y el bloque del `<head>` de §4.1). Y todas sus reglas
   cuelgan de `.pie`, así que no le pega a nada fuera del pie.

   ⚠️§2.6b del diseño (27-sep, vuelta 2 del maquetador) manda sobre §2.6: el pie
   usa **`.pie-fila` y `.pie-punto`**, clases propias. `.fila` es de `base.css` y la
   usan cinco pantallas; `.punto` es de `portada`. Ninguna se renombra.

   Marcado canónico (lo compara `verificar-pie`, carácter por carácter normalizado):
     <footer class="pie">            (o `pie sobre-barra` en las 6 con barra inferior)
       <div class="columna">
         <img class="logotipo" src="../sistema/marca/pie-sin-lema.svg" alt="Dream Life">
         <nav class="legales" aria-label="Legales">
           <div class="pie-fila"> a · span.pie-punto[aria-hidden] · a </div>
           <div class="pie-fila"> a · span.pie-punto[aria-hidden] · a </div>
         </nav>
       </div>
     </footer>
   `puerta` lleva sólo el `nav` (ya tiene el logo vertical arriba).
   ═══════════════════════════════════════════════════════════════════════════ */

/* La caja: el `padding:32px … 40px` del aprobado. La línea sobre el pie es SÓLO
   este `border-top` — con el `<hr class="filete">` que precedía a `.pie-legal` en
   las cuatro legales eran dos (§2.6b). */
.pie{background:var(--fondo); border-top:1px solid var(--filete);
     padding:32px 0 calc(40px + env(safe-area-inset-bottom));
     text-align:center; align-self:stretch}

/* La única variante medida: las 6 pantallas con barra inferior reservan su alto
   (72 px) para que la barra fija no tape la última fila. Antes eran 17 copias de
   `.pie{…}` y 6 de `calc(48px + 72px + …)` en cada `<style>`. */
.pie.sobre-barra{padding-bottom:calc(40px + 72px + env(safe-area-inset-bottom))}

/* 🔴R-int #55 · `control-pie` midió el pie computando DISTINTO en producto y en
   documento (P-diverge ×70): la `.columna` de `base.css` le ponía `padding-inline:20px`
   y `min(460px,100%)`, y la de `documento.css` (y la de `puerta`) `max-width:360px`.
   Por eso el pie fija AQUÍ todo lo de la caja de su columna, y no hereda la de ninguna
   superficie: ancho, tope, margen y relleno. Sin relleno propio porque la pirámide va
   centrada (la canaleta sólo importaba si una fila partía) y en las legales el `body`
   ya trae la suya. Y el `footer` fija `text-align` y `align-self`: en `puerta` es hijo
   de un flex centrado que le encogía la caja y le heredaba el `center`. */
.pie .columna{display:flex; flex-direction:column; align-items:center; text-align:center;
              width:auto; max-width:var(--columna); margin-inline:auto; padding-inline:0}

/* El hueco hasta la primera fila lo pone `.legales` (24 px), no el logo: por eso
   `margin-bottom:0`, que anula los 48 px que copiaban 14 pantallas. */
/* R-int #55 · lo centra el `align-items` de la columna, no `margin-inline:auto`: el
   margen automático computaba 100 px en producto y 80 en las legales (su `body` trae
   canaleta), y `max-width` salía de `img{max-width:100%}` de `base.css`, que
   `documento.css` no tiene. Los dos quedan fijados acá. */
.pie .logotipo{display:block; width:190px; max-width:100%; height:auto; margin-inline:0; margin-bottom:0}

/* Geometría del aprobado: 24 px bajo el logo y filas de 44 px SIN hueco entre ellas.
   ⭐Historia que no hay que volver a pagar (venía de `documento.css`):
   D32 · con el eje vertical del `gap` en 0, al partirse la fila dos áreas de toque
   de 44 px compartían borde. D34 · D37 · un separador visible en una fila que
   ENVUELVE siempre queda huérfano por alguna punta, porque flexbox no sabe dónde va
   a cortar; medido en 22 de 60 casos. ⇒ La pirámide no envuelve entre enlaces: son
   DOS filas fijas y el punto va siempre ENTRE un par, nunca al borde de un renglón.
   Si un enlace no cabe, parte su propio texto dentro de sus 44 px. */
.pie .legales{display:flex; flex-direction:column; align-items:center; gap:0; margin:24px 0 0}

/* 8 + punto de 4 + 8 = 20 px entre palabras: el `margin:0 8px` del aprobado
   alrededor de su «•». */
.pie .pie-fila{display:flex; align-items:center; justify-content:center; gap:8px}

/* El punto se DIBUJA, como el rombo: el «•» de la tipografía cambia en cada
   teléfono. `aria-hidden` en el marcado: no es texto. */
.pie .pie-punto{width:4px; height:4px; border-radius:50%; background:var(--letra-3); flex:none}

/* §4 · golpeo de 44 px, y la fila mide 44 POR CONSTRUCCIÓN (§2.6b): `min-height`
   y no `line-height:44px`, que medía 45. Hasta #55 había dos geometrías —en
   producto `padding-block:12px` (100/44 medidos) y en las legales `min-height:44px`
   (~47/35)—; ahora es una sola. */
.pie .legales a{display:inline-flex; align-items:center; min-height:44px; line-height:1.2;
                color:var(--letra-2); font-size:13px; text-decoration:none}

/* D93 (de `base.css`) · D33 (de `documento.css`) · EL SUBRAYADO VA SOBRE LA
   PALABRA, NO SOBRE LA CAJA DE GOLPEO. Con el borde en el `<a>` de 44 px el
   filete quedaba flotando **14,79 px** bajo la letra —casi un renglón— y se leía
   como error de maquetación. El filete vive en un `<span>` interior; el área de
   toque no cambia. Por eso el `<span>` se queda.
   ⚠️27-sep-2026 (#55) · **sin subrayado en reposo, también en las legales**, que
   hasta hoy lo tenían visible: lo pidió Raimundo con la pirámide. En `:hover`, el
   acento como trazo, como en la demo 3.0.
   `line-height:1.2` explícito: `normal` cambia según la fuente del teléfono. */
.pie .legales a span{line-height:1.2; border-bottom:1px solid transparent}

.pie .legales a:hover span{border-bottom-color:var(--acento-letra)}