/* =============================================================================
   TAKA DESIGN — RODAPÉ
   -----------------------------------------------------------------------------
   Carregue por último: é a última peça do documento, sem nenhuma dobra depois
   dela para consumir. Nenhum token novo de cor, tipografia, raio, sombra,
   espaçamento ou motion é criado — tudo vem do Design System PRISMA:
     · .spectrum-rule    → separa o CTA Final do rodapé, mesmo componente que
                           todas as outras costuras do site usam
     · .aurora            → SEM variante -warm/-cool: o rodapé não pertence a
                           nenhuma dobra temática, é o encerramento neutro
     · .t-label / .t-caption / .t-body

   CONTEÚDO, NÃO COMPOSIÇÃO
   -------------------------
   Logo mono + tagline, três colunas (Navegação, Contato, Legal) e uma linha
   final de copyright — o que um rodapé institucional precisa, sem inventar
   nenhuma seção nova. "Navegação" repete as âncoras do menu do cabeçalho,
   incluindo #contato: a decisão de deixar esse link apontando para uma seção
   que ainda não existe já foi tomada pelo usuário — não é para "resolver"
   aqui (ver memória do projeto).

   Itens sem valor real ainda (e-mail, Instagram, Termos/Privacidade) usam
   .site-footer__link--pending: um <span>, nunca um <a>, no MESMO padrão de
   .portfolio__link antes de existir URL real (portfolio.css) — nada de
   href="#", nada de link fictício. Ver perguntas-pendentes.md.
   ============================================================================= */

.site-footer {
  --footer-lead: clamp(3.5rem, 8vh, 5.5rem);
  --footer-gap-y: clamp(2.5rem, 6vh, 4rem);
  --footer-tail: clamp(1.75rem, 4vh, 2.5rem);

  position: relative;
  isolation: isolate;
  background: var(--ds-void);
  padding-top: var(--footer-lead);
  overflow: clip; /* contém a .aurora — mesma política das dobras anteriores */
}

/* --- Atmosfera ------------------------------------------------------------
   Teto de opacidade mais baixo que as dobras de conteúdo: o rodapé é
   encerramento, não deve competir com o CTA que acabou de aparecer acima. */
.site-footer__atmosphere {
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  z-index: 0;
  pointer-events: none;
}
.site-footer__aurora { opacity: .3; }

.site-footer__rule {
  position: relative;
  z-index: 1;
}

/* --- Grade ------------------------------------------------------------- */
.site-footer__grid {
  position: relative;
  z-index: 1;
  padding-top: var(--footer-gap-y);
  padding-bottom: var(--footer-gap-y);
  display: grid;
  grid-template-columns: minmax(14rem, 1.3fr) repeat(3, minmax(9rem, 1fr));
  gap: clamp(2rem, 4.5vw, 4rem);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(.75rem, 2vh, 1.125rem);
}
/* O lockup: monograma (o mesmo losango do favicon/cabeçalho) + wordmark. O
   rodapé é o único lugar do site em que a marca aparece sozinha, sem o
   cabeçalho por perto — os dois juntos é que fecham a identidade completa,
   nunca só o texto.

   MEDIDO CONTRA A NAVBAR — o espaçamento entre losango e texto
   -----------------------------------------------------------------------
   taka-logo-horizontal.png (o logo do cabeçalho) é UMA imagem só: o vão entre
   losango e wordmark já vem pronto nela, sem CSS nenhum. Medido por
   inspeção de pixel (alpha > 10, viewBox real do arquivo): losango visível =
   163px, vão = 83px, wordmark visível = 785px → o vão equivale a 0.509× a
   largura visível do losango. Essa é a proporção-alvo aqui.

   O problema: aqui o losango (taka-icon.svg) e o wordmark
   (taka-wordmark.png) são DOIS arquivos, cada um com sua própria margem
   transparente interna — o `gap` do flexbox mede da BORDA da caixa de cada
   imagem, não do desenho visível dentro dela. Sem correção, o `gap` soma-se
   às duas margens internas e o vão real fica bem maior que a proporção da
   navbar (era o que estava "errado" antes desta versão).

   A correção: cancelar a margem transparente do lado que toca o vão em cada
   arquivo (margin-right negativo no losango, margin-left negativo no
   wordmark — frações medidas abaixo), e só então aplicar o `gap` com o
   valor-alvo puro (0.509 × largura VISÍVEL do losango, já sem as margens). */
.site-footer__lockup {
  /* --fm-icon-w é a largura DA CAIXA do <img> do losango (viewBox 200×200,
     desenho visível = 168/200 = 84% dela — margem simétrica de 8% em cada
     lado, medida nos pontos do polígono em taka-icon.svg). */
  --fm-icon-w: clamp(1.75rem, 2.6vw, 2.25rem);
  display: flex;
  align-items: center;
  gap: calc(var(--fm-icon-w) * 0.84 * .509);
}

.site-footer__mark {
  width: var(--fm-icon-w);
  height: auto;
  flex: none;
  /* Cancela a margem transparente de 8% à direita do próprio SVG — sem
     isto o `gap` acima somaria essa margem ao vão real. */
  margin-right: calc(var(--fm-icon-w) * -0.08);
}

/* Tamanho generoso de propósito: o traço do wordmark é fino (é uma marca
   d'água tipográfica, não um bloco sólido), e na primeira versão — do mesmo
   tamanho do logo do cabeçalho — ficava fraco demais contra o fundo quase
   preto para ler como "a logo" à distância. Ela precisa segurar esse peso
   sozinha. */
.site-footer__logo {
  --fm-word-w: clamp(9rem, 12vw, 11.5rem);
  width: var(--fm-word-w);
  height: auto;
  /* Cancela a margem transparente à esquerda do PNG do wordmark (122/1215 =
     10,04% do canvas, medido por inspeção de pixel) — mesmo motivo do
     losango acima. */
  margin-left: calc(var(--fm-word-w) * -0.1004);
  opacity: 1;
}
.site-footer__tagline {
  color: rgba(255, 255, 255, .4);
}

.site-footer__col-title {
  margin: 0 0 clamp(1rem, 2.4vh, 1.375rem);
  /* .38 dava ~3,4:1 contra o fundo #020205 (auditoria 2026-09-08); .56
     cruza 4,5:1 preservando a hierarquia (mais escuro que o texto comum
     do rodapé, que fica em .6). */
  color: rgba(255, 255, 255, .56);
}

.site-footer__list {
  display: grid;
  gap: clamp(.625rem, 1.6vh, .875rem);
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: rgba(255, 255, 255, .6);
  font-size: .875rem;
  text-decoration: none;
  transition: color .35s var(--ds-ease);
}
a.site-footer__link:hover,
a.site-footer__link:focus-visible {
  color: #fff;
}

/* Ícone vazado (contorno, sem preenchimento) na cor de maior predominância
   do Design System — índigo é o acento-base do --ds-spectrum: primeiro
   stop do degradê, cor do primeiro badge numerado (Sobre), do foco de
   campo e do brilho padrão de .card-neon. Cor fixa mesmo no hover (o link
   já muda de cinza pra branco; o ícone não precisa acompanhar). */
.site-footer__link-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  color: var(--ds-indigo);
}

/* Placeholder não interativo — mesmo papel de .portfolio__link antes de
   existir URL real: estilizado só pela classe, sem cursor de link nem hover,
   para não prometer uma ação que ainda não existe. */
.site-footer__link--pending {
  /* .34 dava ~2,9:1 contra #020205 (auditoria 2026-09-08); .52 cruza 4,5:1. */
  color: rgba(255, 255, 255, .52);
  cursor: default;
}
.site-footer__link--pending .site-footer__link-icon { opacity: .55; }
.site-footer__pending-tag {
  /* .26 dava ~2,1:1; .46 cruza 4,5:1, mantendo o tom mais discreto do grupo. */
  color: rgba(255, 255, 255, .46);
}

/* --- Linha final --------------------------------------------------------- */
.site-footer__bottom {
  position: relative;
  z-index: 1;
  padding-bottom: var(--footer-tail);
}
.site-footer__bottom-rule {
  height: 1px;
  border: 0;
  margin: 0 0 clamp(1.25rem, 3vh, 1.75rem);
  background: rgba(255, 255, 255, .06);
}
.site-footer__copy {
  margin: 0;
  /* .3 dava ~2,5:1 contra #020205 (auditoria 2026-09-08); .49 cruza 4,5:1. */
  color: rgba(255, 255, 255, .49);
  text-align: center;
}

@media (max-width: 899px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 7vh, 2.75rem);
  }
  .site-footer__brand { align-items: flex-start; }

  /* Reserva espaço pro botão flutuante do WhatsApp (whatsapp-fab.css), que em
     telas estreitas fica sobre o canto inferior direito onde a linha de
     copyright, centralizada, também alcança. */
  .site-footer__bottom { padding-bottom: calc(var(--footer-tail) + 4.5rem); }
}