/* ══════════════════════════════════════════════════════════════════════════
   EL PIE DE brokerdeguardia.es · hoja única
   ══════════════════════════════════════════════════════════════════════════
   Encargo de Toño (16-ago-2026): «procura crear una regla para tener siempre
   el mismo footer en todas las páginas».

   Antes había TRES pies distintos: el completo en 32 páginas, uno reducido en
   las cuatro legales y otro en `gracias.html`. Y no era descuido: las legales
   cargan sólo `_legal.css`, que no tiene los estilos del pie, así que pegarles
   el pie completo lo habría dejado sin estilo — el mismo tipo de fallo que la
   hoja de capa que se cargaba antes de tiempo.

   La regla, entonces, son DOS ficheros y ninguna excepción:
     · `_pie.html` — el marcado, idéntico en las 37 páginas.
     · `_pie.css`  — sus estilos, **autosuficientes**: no dependen de ninguna
       variable ni de ninguna regla de las otras hojas, y por eso funcionan
       igual sobre `_legal.css` que sobre `_sitio.css` + `_capa.css`.

   Todo va acotado bajo `footer` a propósito: así no puede pisar nada del
   resto de la página, ni al revés.

   Lo comprueba `pie_unico.py --revisar`, que forma parte del despliegue.
   ══════════════════════════════════════════════════════════════════════════ */

footer{
  /* Sus propias variables: `_legal.css` no define `--acento` y la del sello
     habría salido sin color. Un pie que depende de la hoja de al lado no es
     un pie único. */
  --pie-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --pie-acento:#d9884a;
  background:#0c2f2b;color:#93b0a6;padding:40px 0 34px;font-size:14px;margin-top:20px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6}
footer a{color:#c4d6cf}
footer b{color:#fff;display:block;margin-bottom:7px;font-size:14px}

/* la cabecera del pie: quién es la marca, y quién responde por ella */
footer .pie-cab{display:grid;gap:22px 40px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  align-items:start;padding-bottom:26px;margin-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,.13)}
footer .pie-quien b{display:block;color:#fff;font-size:13px;margin-bottom:7px}
footer .pie-quien p{margin:0;font-size:13.6px;line-height:1.7}
footer .pie-marca{display:flex;align-items:flex-start;gap:15px}
footer .pie-marca .pie-simbolo{width:40px;height:40px;flex:none;overflow:visible;margin-top:1px}
footer .pie-marca b{display:block;font-family:var(--pie-serif);font-size:1.18rem;color:#fff;
  margin-bottom:3px;line-height:1.2}
footer .pie-marca p{margin:0;max-width:46ch;font-size:14.4px;line-height:1.6}

/* Tres columnas exactas: con `auto-fit` la cuarta se descolgaba a una fila
   entera para ella sola, que era lo que hacía caótico el pie. */
footer .cols{display:grid;gap:24px 34px;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:26px}

/* el sello, con la relación declarada donde se ve */
footer .pie-sello{display:inline-flex;align-items:center;gap:10px;margin:10px 0 2px;
  padding:8px 12px;border-radius:10px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:inherit}
footer .pie-sello:hover{background:rgba(255,255,255,.11)}
footer .pie-sello svg{width:20px;height:20px;flex:none;color:var(--pie-acento)}
footer .pie-sello span{font-size:11.6px;line-height:1.45}
footer .pie-sello b{display:block;color:#fff;font-size:12.2px;margin-bottom:0}

/* la letra pequeña: el bloque del ICI, que va en TODAS las páginas */
footer .fine{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;
  font-size:12.8px;line-height:1.62}
footer .fine p{margin:0 0 .7em}
/* el sello vive ahora en la letra pequeña: entero en su columna */
footer .fine .pie-sello{display:flex;width:fit-content;margin:22px auto 0}
footer .fine .cierre{margin:18px 0 0;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.13)}

/* `footer b{display:block}` está pensado para los títulos de columna, pero
   alcanzaba también a las negritas dentro de la prosa legal y partía cada
   frase en cinco líneas. Se acota a lo que sí es un título. */
footer .fine b,
footer .pie-sello span b:not(:first-child),
footer .pie-marca p b,
footer .fine .cierre b{display:inline;margin:0;font-size:inherit}

/* La letra pequeña, a dos columnas: cinco párrafos seguidos a todo el ancho
   son un muro que nadie lee. */
/* La letra pequeña va a UNA columna (decisión de Toño, 21-ago):
   con el sello y el cierre debajo, las dos columnas descuadraban. */
@media(min-width:900px){
  /* el bloque, centrado en la pagina; el texto, alineado dentro */
  footer .fine{max-width:72ch;margin-left:auto;margin-right:auto}
}
@media(max-width:860px){
  footer .pie-cab{grid-template-columns:1fr;gap:20px}
  footer .pie-marca{gap:12px;padding-bottom:20px;margin-bottom:22px}
  footer .pie-marca .pie-simbolo{width:34px;height:34px}
  footer .pie-sello{margin:22px 0 2px}
  /* Zonas de toque. El dedo no es un ratón: 44 px es el mínimo cómodo, y el
     margen negativo devuelve el hueco — se toca más y se ve igual. */
  footer a{min-height:44px;display:inline-flex;align-items:center;padding:0 5px;margin:0 -5px}
  footer li a,footer p a{min-height:0;display:inline;margin:0;padding:0}
}
@media(max-width:820px){footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){footer .cols{grid-template-columns:1fr;gap:20px}}