/* ==========================================================================
   Rodapé
   Fecho editorial da página. Mesma gramática das seções — filete de 1px como
   estrutura, superfície chapada, nenhum card, nenhuma sombra em elemento de
   fluxo, nenhum gradiente decorativo.

   A superfície é --mist: um degrau abaixo do --surface-alt da última seção.
   É o mesmo recurso que a Apple usa para separar o rodapé do conteúdo sem
   precisar inverter para escuro — o site permanece 100% light mode.
   ========================================================================== */

.rodape {
  position: relative;
  background-color: var(--mist);
  /* Filete de topo em tinta cheia: o mesmo peso que abre cada bloco das
     seções. É o que separa o rodapé do conteúdo — não uma sombra. */
  border-top: 1px solid var(--ink);
  padding-top: var(--section-y);
  /* Respeita a barra de gestos do iPhone quando o rodapé encosta na base */
  padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
   Bloco 1 — Colofão: marca + colunas de navegação
   -------------------------------------------------------------------------- */

.rodape__colofao {
  display: grid;
  /* minmax(0, 1fr) em toda coluna: sem isso o rótulo do .btn (que é
     white-space: nowrap) define o min-content e estoura o container
     em 320 px. Mesma guarda usada nas demais seções. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
}

.rodape__marca .brand__img {
  height: 52px;
}

.rodape__assinatura {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  max-width: 42ch;
  text-wrap: pretty;
}

/* --- NAP: endereço, telefone e e-mail ---
   Empilhado e discreto. A seção Contato, logo acima, já entrega os canais
   com contexto e ação; aqui o papel é de identidade, não de conversão. */

.rodape__nap {
  display: grid;
  gap: 2px;
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-style: normal;
}

.rodape__nap-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  /* Alvo de toque confortável sem virar botão: o recuo negativo devolve o
     texto ao alinhamento da coluna. */
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  /* Endereço e e-mail são longos: quebram no lugar em vez de esticar
     a coluna e empurrar o grid. */
  overflow-wrap: anywhere;
  transition: color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.rodape__nap-item .icone {
  width: 16px;
  height: 16px;
  /* Alinha o ícone à altura-x da primeira linha do texto */
  margin-top: 0.2em;
  color: var(--green-600);
}

.rodape__nap-item:hover {
  color: var(--brand-navy);
  background-color: var(--white);
}

/* --- Colunas de links --- */

.rodape__colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
}

.rodape__coluna {
  min-width: 0;
}

.rodape__coluna-titulo {
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
}

.rodape__lista {
  display: grid;
  gap: 2px;
}

.rodape__link {
  display: block;
  /* Alvo de toque de 44 px sem parecer um botão: o padding vertical faz o
     trabalho e o recuo negativo mantém o texto alinhado à coluna. */
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  transition: color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.rodape__link:hover {
  color: var(--brand-navy);
  background-color: var(--white);
}

/* --------------------------------------------------------------------------
   Bloco 2 — Aviso técnico
   Mesma composição da nota de cobertura da seção Aplicações.
   -------------------------------------------------------------------------- */

.rodape__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--ink-3);
  max-width: 82ch;
  text-wrap: pretty;
}

.rodape__aviso .icone {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Bloco 3 — Palavra-marca + redes
   Fecha a página no mesmo registro em que o hero a abre.
   -------------------------------------------------------------------------- */

.rodape__fecho {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  margin-top: var(--sp-16);
}

.rodape__palavra {
  /* Escala com a viewport para ocupar ~85% da linha de 320 px a 1920 px.
     A folga de ~15% existe porque a métrica muda com a fonte do sistema
     (SF Pro é mais estreita que Segoe UI e Roboto). nowrap + clip é a
     rede de segurança: uma fonte muito mais larga corta o glifo, mas
     nunca gera barra de rolagem horizontal. */
  font-size: clamp(2.85rem, 15vw, 13rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-weight: var(--fw-semibold);
  color: var(--navy-200);
  white-space: nowrap;
  /* Só no eixo X: com line-height 0.86 a caixa é mais baixa que o glifo, e
     um clip vertical cortaria o topo das letras. */
  overflow-x: clip;
  user-select: none;
}

.rodape__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-self: start;
}

.rodape__rede {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  transition: color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.rodape__rede .icone {
  width: 19px;
  height: 19px;
}

.rodape__rede:hover {
  border-color: var(--brand-navy);
  background-color: var(--brand-navy);
  color: var(--ink-inverse);
}

/* --------------------------------------------------------------------------
   Bloco 4 — Barra legal
   -------------------------------------------------------------------------- */

.rodape__legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.rodape__legal-texto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--ink-3);
}

/* Copyright e CNPJ dividem a linha; o gap do flex já os separa. */
.rodape__copy,
.rodape__cnpj {
  text-wrap: pretty;
}

.rodape__cnpj {
  font-variant-numeric: tabular-nums;
}

.rodape__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.rodape__legal-link {
  color: var(--ink-3);
  transition: color var(--dur-base) var(--ease-out);
}

.rodape__legal-link:hover {
  color: var(--brand-navy);
}

/* Voltar ao topo — âncora nativa, sem uma linha de JavaScript */
.rodape__topo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  justify-self: start;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
  transition: color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.rodape__topo .icone {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-base) var(--ease-out);
}

.rodape__topo:hover {
  border-color: var(--brand-navy);
  background-color: var(--brand-navy);
  color: var(--ink-inverse);
}

.rodape__topo:hover .icone {
  transform: translate3d(0, -2px, 0);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Mobile estreito: o botão de topo ocupa a linha inteira — em 320 px o
   rótulo em caixa alta não cabe confortavelmente numa pílula curta. */
@media (max-width: 479px) {
  .rodape__topo {
    justify-content: center;
    width: 100%;
  }
}

/* Tablet — as três colunas entram de uma vez.
   Um estágio intermediário de duas colunas foi testado e descartado: com
   três listas, a terceira fica órfã em meia largura e os rótulos longos
   ("Segmentos atendidos") quebram em duas linhas, desalinhando os filetes
   de uma coluna para a outra. Empilhado, o celular lê melhor. */
@media (min-width: 768px) {
  .rodape__colunas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-8);
  }

  /* As redes encostam na margem direita; a palavra-marca segue com a
     linha inteira logo abaixo. */
  .rodape__redes {
    justify-self: end;
  }

  .rodape__legal {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-8);
  }
}

/* Desktop — a marca ganha a coluna de metadados das seções (20rem) */
@media (min-width: 1024px) {
  .rodape__colofao {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--sp-16);
  }
}

/* Large */
@media (min-width: 1440px) {
  .rodape__colofao {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  }

  .rodape__colunas {
    gap: var(--sp-12);
  }
}

/* --------------------------------------------------------------------------
   Movimento reduzido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rodape__topo:hover .icone {
    transform: none;
  }
}