/* ==========================================================================
   RODAPÉ — eco silencioso do cabeçalho.

   A página abre com marca à esquerda e navegação à direita; fecha com a
   mesma figura, em voz baixa. É a única ideia estrutural daqui — nada de
   colunas "Empresa / Links / Contato / Redes", que diriam menos ocupando
   mais espaço.

   Continuidade de cor com a seção de contato: os dois blocos são
   `--c-graphite-deep`, sem emenda. Quem marca a passagem é uma régua de
   1px em rgba(255,255,255,.1) — o mesmo tom que `.contact-details` e o
   `.footer-bottom` do design system já usam para régua secundária sobre
   grafite. As duas réguas ficam DENTRO do container: alinham com as
   bordas do mapa logo acima, em vez de cortarem a página de ponta a ponta.

   Nada é escondido por CSS. Sem JavaScript o rodapé nasce inteiro
   visível — quem revela é o assets/js/footer.js, e só depois de conferir
   que pode.
   ========================================================================== */

.site-footer {
  color: #fff;
  background: var(--c-graphite-deep);
}

/* ==========================================================================
   1. FAIXA PRINCIPAL — identidade à esquerda, navegação e canais à direita
   ========================================================================== */
/* Duas faixas horizontais, não quatro colunas:

     marca ················································ navegação
     CRN ··················································· canais

   Grade em vez de dois blocos empilhados lado a lado porque a linha de
   baixo precisa alinhar de verdade: com flex, a altura da marca (40px) e a
   do primeiro link (32px) empurravam CRN e canais para alturas diferentes
   por ~12px — perto demais de alinhar para ler como escolha. Aqui as duas
   linhas são linhas da grade, e o alinhamento deixa de depender de conta.

   A ordem no HTML é marca → CRN → navegação → canais, que é exatamente a
   ordem pedida para o mobile; quem monta as duas colunas do desktop é o
   posicionamento explícito abaixo, sem `order`. */
.footer-main {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  /* Entrelinha curta de propósito: à esquerda ela cola o CRN na marca,
     para que marca + profissão + registro leiam como um bloco
     institucional só; à direita ela aproxima os canais da navegação, que
     antes pareciam uma terceira composição solta. A mesma medida serve às
     duas colunas — é o que mantém as faixas alinhadas sem conta nenhuma. */
  gap: clamp(6px, .7vw, 10px) clamp(40px, 6vw, 96px);
  /* A seção de contato já termina com respiro grande (o `padding-block`
     dela chega a 160px). O topo daqui não precisa dobrar essa aposta: o
     bastante para a régua respirar, não tanto que vire um vazio. */
  padding-block: clamp(52px, 6vw, 80px) clamp(44px, 5vw, 68px);
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.site-footer .brand { grid-area: 1 / 1; }
.footer-crn         { grid-area: 2 / 1; }
.footer-nav         { grid-area: 1 / 2; }
.footer-channels    { grid-area: 2 / 2; }

/* --------------------------------------------------------------------------
   1.1 Identidade

   A marca é o componente `.brand` da navbar, sem uma linha de override: o
   `.brand-mark` é uma máscara que herda `currentColor`, então aqui ele já
   nasce branco sobre o grafite. É a assinatura do fecho, não um link — o
   "Início" logo ao lado faz esse trabalho.
   -------------------------------------------------------------------------- */
.footer-crn {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* .5 é valor do design system (`.modal-principles span`) e resolve também
   o contraste: os .44 de `.contact-detail dt` dão 4.2:1 sobre grafite,
   abaixo do mínimo de 4.5 do WCAG para texto pequeno; .5 sobe para 5.0:1. */
.footer-crn-label { color: rgba(255, 255, 255, .5); }
.footer-crn-value { color: rgba(255, 255, 255, .82); }

/* --------------------------------------------------------------------------
   1.2 Navegação e canais

   Alinhados à direita: a navegação corre em uma linha só enquanto couber e
   quebra sozinha quando não couber mais, deixando a borda esquerda
   irregular — a mesma leitura editorial do resto do site.
   -------------------------------------------------------------------------- */
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px clamp(18px, 2.4vw, 34px);
}

/* Mesma receita de hover da `.menu-link` do cabeçalho — sublinhado que
   cresce da esquerda, opacidade que fecha em 1 — mas escrita aqui em vez
   de reaproveitar a classe: em telas ≤900px a `.menu-link` vira item do
   painel mobile (bloco, recuo de 26px, sublinhado desligado), e essas
   regras não fazem sentido nenhum no rodapé.

   `--pad-y` é o que mantém o sublinhado colado ao texto quando a área de
   toque cresce no mobile: o `::after` é posicionado pelo mesmo valor do
   padding, então ele acompanha a base da linha, não a base do botão. */
.footer-nav a,
.footer-channels a {
  --pad-y: 7px;
  --pad-x: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: var(--pad-y) var(--pad-x);
  /* A margem negativa cancela o padding horizontal no layout: a caixa que
     responde ao toque cresce, a posição do texto não anda um pixel — o
     mesmo recurso que os links da seção de contato já usam. */
  margin-inline: calc(var(--pad-x) * -1);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .78;
  transition: opacity var(--speed-fast) ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-channels a:hover,
.footer-channels a:focus-visible { opacity: 1; }

/* No item de navegação o sublinhado cobre o link inteiro; no canal ele
   cobre só a palavra, porque a seta ao lado não é texto. */
.footer-nav a::after,
.footer-channels a > span::after {
  content: '';
  position: absolute;
  left: var(--pad-x, 0px);
  bottom: var(--pad-y);
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .34s var(--ease-out);
}

/* O sublinhado cobre o texto, não a área de toque: desconta o padding
   horizontal que só existe para o dedo. */
.footer-nav a:hover::after,
.footer-nav a:focus-visible::after { width: calc(100% - 2 * var(--pad-x)); }

.footer-channels a:hover > span::after,
.footer-channels a:focus-visible > span::after { width: 100%; }

/* Alinhados pela ESQUERDA da navegação, não pela direita. A coluna da
   grade é dimensionada pela navegação (o item mais largo), então começar
   os canais em `flex-start` faz as duas bordas esquerdas coincidirem
   exatamente — uma segunda régua vertical invisível, além da do container.
   Alinhados à direita eles ficavam pendurados na ponta de uma linha bem
   mais longa, lendo como composição avulsa. */
.footer-channels {
  display: flex;
  justify-content: flex-start;
  gap: clamp(20px, 2.6vw, 36px);
}

.footer-channels a > span {
  position: relative;
  display: inline-block;
}

/* O sublinhado do canal é medido a partir da própria palavra, então aqui
   ele encosta na base dela, não na do link. */
.footer-channels a > span::after { bottom: -2px; }

/* --------------------------------------------------------------------------
   Marcas de WhatsApp e Instagram

   `fill: currentColor` é o que faz a versão em negativa: as duas marcas
   herdam o branco do rodapé, sem cor de origem e sem fundo próprio. Elas
   também herdam a opacidade do link, então acendem junto com o texto no
   hover — nenhuma animação exclusiva para elas.

   Sobre a forma: os ícones do design system são de traço (Lucide, 1.5).
   Estas duas são sólidas de propósito. Marca registrada de terceiro não se
   redesenha para caber no estilo da casa, e em 15px o telefone do WhatsApp
   em contorno viraria borrão. O que as amarra ao sistema é o resto: mesmo
   viewBox 24×24 dos ícones Lucide, mesma `currentColor`, mesmo eixo óptico
   do texto ao lado.

   A seta `arrow-up-right` que ocupava este lugar saiu: a marca já diz que
   o link vai para fora, e duas insígnias no mesmo link seriam ruído. Quem
   avisa que abre em nova aba para leitor de tela é o `aria-label`.
   -------------------------------------------------------------------------- */
.footer-glyph {
  flex: none;
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* ==========================================================================
   2. LINHA LEGAL

   Receita tipográfica do `.footer-bottom` do design system: Space Mono,
   caixa alta, entreletra .11em, cor branca rebaixada. Os dois valores
   numéricos vêm de outros pontos do mesmo design system, não de fora dele:

   - 11px é o tamanho mais recorrente do DS inteiro (12 ocorrências), e
     nesta linha é texto legal — não o metadado decorativo de 9px que o
     `.footer-bottom` do DS carrega. Em 9px vira microtexto.
   - .5 é a opacidade branca de `.modal-principles span`. Os .4 do
     `.footer-bottom` dão 3.7:1 sobre grafite, reprovado no WCAG AA para
     texto pequeno; .5 leva a 5.0:1 sem mudar a leitura.

   A hierarquia se mantém pelo que não mudou: é a única linha em Space
   Mono, a mais apagada e a mais espaçada da página.
   ========================================================================== */
.footer-bottom {
  padding-block: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .5);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* Rápido respiro entre copyright e créditos: o espaço de uma linha de texto,
   sem virar um vazio. Eles leem como um único bloco de informações legais. */
.footer-bottom p:not(:first-child) {
  margin-top: 9px;
}

.footer-bottom a {
  color: rgba(255, 255, 255, .5);
  transition: color var(--speed-fast) ease;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: rgba(255, 255, 255, .8);
}

/* Rótulo dos créditos com destaque reduzido: mais apagado que o copyright,
   mas deixando os nomes (links) com contraste suficiente para indicar que
   são interativos. Estabelece uma clara hierarquia onde os créditos são
   secundários em relação ao copyright. */
.footer-credits-label {
  color: rgba(255, 255, 255, .32);
}

/* ==========================================================================
   3. RESPONSIVO
   ========================================================================== */

/* Mesmo ponto de virada da seção de contato: as duas dobras finais passam
   a uma coluna juntas, e a passagem entre elas continua sem costura. */
@media (max-width: 960px) {
  /* Uma coluna: as quatro peças voltam a seguir a ordem do HTML — marca,
     CRN, navegação, canais. */
  .footer-main {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    row-gap: 0;
  }

  .site-footer .brand,
  .footer-crn,
  .footer-nav,
  .footer-channels { grid-area: auto; }

  .footer-crn { margin-top: 16px; }
  .footer-nav { margin-top: clamp(30px, 4.5vw, 44px); }
  .footer-channels { margin-top: clamp(22px, 3.4vw, 32px); }

  .footer-nav ul { justify-content: flex-start; }
  .footer-channels { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .footer-main { padding-block: clamp(44px, 10vw, 60px) clamp(36px, 8vw, 48px); }

  /* Duas colunas, três linhas: mantém a ordem de leitura pedida (Início,
     Sobre, Método, Depoimentos, FAQ, Contato) com área de toque de 44px
     em cada item, sem esticar o rodapé por 260px de lista empilhada. */
  .footer-nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(16px, 4vw, 28px);
  }

  .footer-channels { flex-direction: column; gap: 0; }

  /* 11px × 1.6 de altura de linha + 2 × 14px de padding ≈ 46px de alvo. */
  .footer-nav a,
  .footer-channels a { --pad-y: 14px; }

  /* Na horizontal, o item mais curto ("FAQ") tem só 27px de texto — acima
     do mínimo de 24px do WCAG, abaixo dos 44px recomendados. Os 10px de
     cada lado levam todos os alvos a ≥44px nas duas dimensões. */
  .footer-nav a { --pad-x: 10px; }

  /* Os links já carregam 14px de padding próprio: o afastamento entre os
     blocos desconta isso para o ritmo não inchar no mobile. */
  .footer-nav { margin-top: clamp(18px, 4vw, 28px); }
  .footer-channels { margin-top: clamp(10px, 2.4vw, 18px); }
}