/* ==========================================================================
   13-footer.css — rodapé (SPEC §4.13 · D11 · BUILD_PLAN 13-footer)
   Célula branca única dentro do container fluido; colunas em 1136px já em 1440.
   ========================================================================== */

.ft { --ft-py: var(--sp-8); }                 /* 32 → 64 (md) → 120 (xl) */
@media (min-width: 769px)  { .ft { --ft-py: var(--sp-16); } }
@media (min-width: 1440px) { .ft { --ft-py: var(--sp-30); } }

.ft__cell { padding-inline: var(--sp-6); }

/* ---------- 1. Colunas de links ---------- */
.ft__cols {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  justify-content: center;
  max-width: var(--text-max);
  margin-inline: auto;
  padding-block: var(--ft-py);
}

/* min-width:min-content → a coluna encolhe na linha de 1136px, mas nunca
   abaixo da palavra mais longa (evita texto vazando para fora do bloco). */
.ft__col { display: grid; gap: var(--sp-8); align-content: start; min-width: min-content; }

.ft__title {
  font: var(--fw-semibold) var(--fs-body)/var(--lh-tight-ui) var(--font-display);
  letter-spacing: normal;
  color: var(--c-ink-800);
}

.ft__col ul { display: grid; gap: var(--sp-6); }

.ft__col a {
  position: relative;
  display: block;
  font: var(--fw-semibold) var(--fs-footer-link)/var(--lh-footer-link) var(--font-display);
  letter-spacing: var(--ls-footer);
  color: var(--c-ink-600);
  transition: color var(--dur-slow) var(--ease-default);
}
/* WCAG 2.5.5: o link do rodapé mede 24px de altura (20/24px) em todas as larguras. Pseudo
   transparente fora de fluxo amplia só a ÁREA DE TOQUE para 44px — nenhum pixel do render
   muda. Ele cresce 10px para cada lado e o vão entre links é 24px (--sp-6), então dois
   alvos vizinhos ainda ficam separados por 4px. */
.ft__col a::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
@media (hover: hover) { .ft__col a:hover { color: var(--c-green); } }
.ft__col a:focus-visible { outline-offset: 4px; }

/* ---------- 2. Divisor tracejado (bleed até as bordas da célula) ---------- */
.ft__rule {
  border-top: var(--border-dashed);
  margin-inline: calc(var(--sp-6) * -1);
}

/* ---------- 3. Logo ---------- */
.ft__logo { display: flex; justify-content: center; padding-top: var(--sp-6); }
.ft__logo a { display: block; }

/* ---------- 3b. Bloco legal (razão social · CNPJ · endereço) ----------
   <address> semântico, font-style normal. Tipografia --fs-small na cor --c-ink-600 (7,1:1
   sobre branco), acima do copyright. Em 390 a caixa tem 292px (--text-max): as duas linhas
   simplesmente reflowam — o token mais largo é "68.679.995/0001-00" (~112px), então nada
   estoura. text-wrap:pretty evita a última linha órfã de uma palavra só. */
.ft__address {
  font: var(--fw-medium) var(--fs-small)/1.6 var(--font-display);
  font-style: normal;
  color: var(--c-ink-600);
  text-align: center;
  text-wrap: pretty;
  max-width: var(--text-max);
  margin-inline: auto;
  padding-top: var(--sp-6);
}

/* ---------- 4. Copyright + sociais ---------- */
.ft__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  max-width: var(--text-max);
  margin-inline: auto;
  padding-block: var(--sp-6);
}

.ft__copy {
  font: var(--fw-semibold) var(--fs-body)/1.4 var(--font-display);
  color: var(--c-ink-600);
  text-align: center;
}

.ft__social { display: flex; align-items: center; gap: var(--sp-1); }

.ft__div { display: none; width: 1px; height: 19px; background: var(--c-hairline); }

.ft__social a {
  display: block;
  padding: var(--sp-2-5);
  color: var(--c-ink-600);
  transition: color var(--dur-base) var(--ease-default), transform var(--dur-base) var(--ease-default);
}
@media (hover: hover) {
  .ft__social a:hover { color: var(--c-green); transform: translateY(-4px); }
}
.ft__social a:focus-visible { outline-offset: 0; border-radius: var(--r-cell); }

/* ---------- 5. Responsivo ---------- */
@media (min-width: 769px) {
  .ft__bottom { flex-direction: row; justify-content: space-between; }
  .ft__copy { text-align: left; }
  .ft__address { text-align: left; }
  .ft__div { display: block; margin-right: var(--sp-2); }
}

/* O FAB de chat (64px, fixed bottom:20 right:20) cobre a fileira social no fim da
   página abaixo de 1025 — em 769 a sobreposição é real. Reserva a calha só ali. */
@media (max-width: 1024px) {
  .ft__bottom { padding-bottom: var(--sp-24); }
}

/* ---------- 6. Linha de colunas (xl) ----------
   Sete colunas (a "Legal" entrou como 7ª — ver nota abaixo) dentro dos 1136px de --text-max.
   As trilhas são as larguras mínimas reais de cada coluna, medidas no render em 1440:
     Conta 100 (cabe "Criar conta" numa linha, max-content 96,7)
     Suporte 240 ({{SUPPORT_EMAIL}} é um token indivisível de 239,7px — é ele que dita o resto)
     Produtos 114 · Para quem 122 · Website 138 · AI & Devs 152 (min-content de cada uma)
     Legal 126 (nenhum rótulo passa de 2 linhas: "Política de/privacidade",
               "Reembolso e/estorno", "Segurança da/informação")
   Soma 992 + 6 × 24 de gap = 1136 exatos. O gap desceu de 64 para 24 porque com 7 colunas
   e o e-mail de 240px não sobra mais que isso; como quase nenhum rótulo preenche a própria
   trilha, o vão ÓPTICO entre colunas continua bem acima de 24px.
   ≥1698 --text-max vai a 1312 e o gap volta a 48 (992 + 6 × 48 = 1280). */
@media (min-width: 1440px) {
  .ft__cols {
    display: grid;
    grid-template-columns: 150px 210px 230px 230px 250px;   /* PicPag: 5 colunas, links mais longos */
    column-gap: var(--sp-6);
    justify-content: center;
    align-items: start;
  }
}
@media (min-width: 1698px) {
  .ft__cols { column-gap: var(--sp-12); }
}

/* aviso institucional (PicPag) — logo abaixo do endereço */
.ft__address a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ft__col a{overflow-wrap:anywhere}
@media (min-width:769px){ .ft__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sp-8)} }
@media (min-width:1440px){ .ft__cols{grid-template-columns: 150px 210px 230px 230px 250px} }
.ft__disclaimer{margin:var(--sp-4) auto 0;max-width:var(--text-max);text-align:center;font:var(--fw-medium) var(--fs-micro)/1.6 var(--font-body);color:var(--c-ink-600)}
@media (min-width:769px){ .ft__disclaimer{text-align:left} }