:root{
  --wrap:1120px;

  /* paleta com contraste melhorado */
  --ink:#0b1526;           /* texto principal */
  --mut:#57657a;           /* texto suave */
  --link:#0f4bd8;          /* link */
  --linkH:#0c3db1;         /* link hover */
  --bg:#f8fbff;            /* fundo claro */
  --br:#e5eaf4;            /* borda */
  --chip:#eef4ff;          /* botão claro */
  --chipBr:#d9e4ff;        /* borda do botão */
}

.hub-footer{
  background:var(--bg);
  color:var(--ink);
  border-top:1px solid var(--br);
  font-size:15px;
  line-height:1.6;
  letter-spacing:.1px;
}

.hub-footer .wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:34px 16px 22px;
}

.f-grid{
  display:grid;
  grid-template-columns:2fr 1.2fr 1.2fr 1.2fr;
  gap:26px 32px;
}

.f-col h4{
  margin:0 0 12px;
  font:800 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  text-transform:uppercase;
  letter-spacing:.55px;
  color:#0a1c37;
}

.brand-mini{display:flex;align-items:center;gap:12px;margin:-2px 0 10px}
.brand-mini img{height:90px;display:block}

.muted{color:var(--mut);}

.f-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.f-list a{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
}
.f-list a:hover{color:var(--linkH);text-decoration:underline;text-underline-offset:3px}

/* botões */
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 16px;border-radius:12px;
  background:var(--chip);border:1px solid var(--chipBr);
  color:var(--linkH);text-decoration:none;font-weight:700;
  box-shadow:0 1px 0 rgba(12,61,177,.05);
}
.btn-outline:hover{filter:brightness(.985)}
.btn-outline.is-disabled{pointer-events:none;opacity:.85;filter:grayscale(1);cursor:not-allowed}

/* links (não mudam quando visitados) */
.hub-footer a{color:var(--link);text-decoration:none}
.hub-footer a:hover{color:var(--linkH);text-decoration:underline;text-underline-offset:3px}
.hub-footer a:visited{color:var(--link)}
.hub-footer .muted a:visited{color:var(--link)}

/* barrinha inferior (segunda parte) */
.footbar{
  border-top:1px solid var(--br);
  margin-top:22px;padding-top:12px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  font-size:13px;color:var(--mut);
}
.footbar .foot-left{justify-self:start}
.footbar .foot-mid{justify-self:center}
.footbar .foot-right{justify-self:end}
.footbar strong{color:var(--ink)}
.heart{color:#ff4d87}

/* responsivo */
@media (max-width:920px){
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .f-grid{grid-template-columns:1fr}
  .brand-mini{display:none}
  .footbar{
    grid-template-columns:1fr;
    text-align:center;
    gap:6px;
  }
  .footbar .foot-left,
  .footbar .foot-mid,
  .footbar .foot-right{justify-self:center}
}
/* ===== Mobile ≤600px: centralizar topo do footer ===== */
@media (max-width:600px){
  /* já deixamos 1 coluna; agora centralizamos conteúdos */
  .f-col{ text-align:center; }
  .brand-mini{ justify-content:center; }    /* logo central */
  .f-list{ justify-items:center; }          /* itens dos menus */
  .f-list li{ width:100%; }                 /* evita quebre estranho */
  .btn-outline{ margin:0 auto; }            /* botão "em breve" central */
  .hub-footer .muted{ text-align:center; }  /* bloco de contatos */
}