/* ===== EL PIE DEL SITIO, UNO SOLO PARA TODAS (Mafe, 21 ago 2026) =====
   Vivia copiado dentro de 32 paginas, asi que cada retoque habia que repetirlo 32
   veces y siempre se quedaba alguna atras. Ahora vive aqui y todas lo enlazan, igual
   que /menu.js con el menu. Para cambiar un color, un aire o el interletrado de los
   rotulos, se toca este archivo y ya esta en todo el sitio.

   La lista de enlaces del pie sigue escrita en cada pagina, que es HTML y los
   buscadores tienen que verlo. Eso se cambia con el script de trabajo/docs/pie/.

   Colores, y no hay mas: Dust Grey #D6CEC4 arriba, tinta #021212 abajo y en los
   enlaces, vino #3B161F en los rotulos, marfil #FBF8F1 en la firma. */

#maqueta-footer{font-family:var(--f-title);margin-top:44px}
#maqueta-footer .mf-top{background:#D6CEC4}
#maqueta-footer .mf-top-in{max-width:1200px;margin:0 auto;padding:46px 26px 40px}
#maqueta-footer .mf-brand{font-family:var(--f-title);font-size:1rem;font-weight:700;letter-spacing:.05em;color:#021212;margin:0 0 32px}
#maqueta-footer .mf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
#maqueta-footer .mf-col h4{font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#3B161F;margin:0 0 15px}
#maqueta-footer .mf-col a{display:block;width:max-content;max-width:100%;font-family:var(--f-head);font-size:0.875rem;color:#021212;text-decoration:none;margin:0 0 11px;line-height:1.4;transition:color .15s}
#maqueta-footer .mf-col a:hover{color:#3B161F}
#maqueta-footer .mf-bottom{background:#021212}
#maqueta-footer .mf-bottom-in{max-width:1200px;margin:0 auto;padding:20px 26px}
#maqueta-footer .mf-c1{font-family:var(--f-head);font-size:0.75rem;color:#FBF8F1;line-height:1.55;margin:0}
#maqueta-footer .mf-c1 b{color:#ffffff;font-weight:700;font-family:var(--f-title)}
#maqueta-footer .mf-c2{font-family:var(--f-head);font-size:0.6875rem;color:#D6CEC4;line-height:1.5;margin:5px 0 0}
/* En el telefono el pie medía 827 px, más de una pantalla entera, porque por debajo
   de 430 px caía a una sola columna y los doce enlaces quedaban en fila india (Mafe
   lo cazó el 21 ago 2026). Se queda en DOS columnas hasta el celular más estrecho, y
   de paso se aprietan los aires, que en pantalla chica sobran. */
@media(max-width:760px){
  #maqueta-footer .mf-top-in{padding:32px 20px 26px}
  #maqueta-footer .mf-brand{margin:0 0 22px}
  #maqueta-footer .mf-cols{grid-template-columns:repeat(2,1fr);gap:22px 16px}
  #maqueta-footer .mf-col h4{margin:0 0 11px}
  #maqueta-footer .mf-col a{margin:0 0 9px}
  #maqueta-footer .mf-bottom-in{padding:16px 20px}
}