/* =========================================================
   RODAPÉ — frame "footer" (96:113) do Figma, 1440×771.
   Usado por home/about/trabalhos/blog. Tudo medido em --fu
   (1px do Figma escalado pela largura do rodapé), então a
   1440px bate 1:1 com o frame.
   ========================================================= */
.footer-stage{
  /* escala pela largura (até 1440) E pela altura (771): o frame
     sempre cabe na tela */
  --fu:min(calc(min(100cqw, var(--page-max, 1440px)) / 1440), calc(100cqh / 771));
  /* o cartão branco acompanha a largura da tela (margens do Figma:
     52 à esquerda e 30 à direita de 1440, proporcionais); o conteúdo
     dentro dele NÃO estica — fica na escala --fu, preso nas bordas */
  --pl:max(calc(52 * var(--fu)), calc(100cqw * 52 / 1440));
  --pr:max(calc(30 * var(--fu)), calc(100cqw * 30 / 1440));
  /* conteúdo preso na base: embaixo do cartão sobra só a mesma
     margem da lateral direita; o espaço extra vai pro céu acima do gato */
  --fy:calc(100cqh - 691 * var(--fu) - var(--pr));
  position:relative;
  width:100%;
  height:100svh;
  container-type:size;
  background:var(--blue);
  color:var(--blue);
  font-family:var(--font-mono);
}

@supports not (width:1cqw){ .footer-stage{ --fu:min(calc(min(100vw, 1440px) / 1440), calc(100svh / 771)); --fy:calc(100svh - 691 * var(--fu) - max(calc(30 * var(--fu)), calc(100vw * 30 / 1440))); --pl:max(calc(52 * var(--fu)), calc(100vw * 52 / 1440)); --pr:max(calc(30 * var(--fu)), calc(100vw * 30 / 1440)) } }

/* gato espiando (96:149): 494×219, 6px antes da borda esquerda do cartão */
.footer__cat{
  position:absolute;
  left:calc(var(--pl) - 6 * var(--fu)); top:calc(var(--fy) + 138 * var(--fu));
  width:calc(494 * var(--fu)); height:calc(219 * var(--fu));
  overflow:hidden; pointer-events:none;
  z-index:2;
}
.footer__cat img{
  position:absolute; max-width:none;
  left:-28.54%; top:-96.42%; width:156.48%; height:196.42%;
}

/* cartão branco (96:116): altura 350, largura = tela menos as margens */
.footer__panel{
  position:absolute;
  left:var(--pl); right:var(--pr); top:calc(var(--fy) + 341 * var(--fu));
  height:calc(350 * var(--fu));
  background:var(--paper);
  overflow:hidden;
  z-index:1;
}
/* "dae" mascarado (96:117): tamanho do Figma, centralizado no cartão
   (não estica quando o cartão alarga) */
.footer__watermark{
  position:absolute; top:0; left:50%;
  width:calc(1358 * var(--fu)); height:calc(350 * var(--fu));
  transform:translateX(-50%);
  pointer-events:none;
}

/* colunas (96:129) em (42,28) do cartão, gap 34 */
.footer__nav{
  position:absolute;
  left:calc(42 * var(--fu)); top:calc(28 * var(--fu));
  display:flex; align-items:flex-start; gap:calc(34 * var(--fu));
}
.footer__col{ display:flex; flex-direction:column; gap:calc(4 * var(--fu)) }
.footer__col--news{ min-width:calc(113 * var(--fu)); gap:calc(3 * var(--fu)) }
.footer__col--nav, .footer__col--legal{ min-width:calc(240.5 * var(--fu)) }
.footer__title{
  margin:0;
  font-size:max(22px, calc(40 * var(--fu)));
  font-weight:600; line-height:normal;
}
.footer__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:calc(3 * var(--fu)) }
.footer__col--legal .footer__links{ gap:calc(4 * var(--fu)) }

.footer__links a, .footer__social a, .footer__email{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--blue);
  font-size:max(14px, calc(16 * var(--fu)));
  line-height:normal;
  text-decoration:none;
  transition:transform .3s cubic-bezier(.34,1.7,.5,1);
}
.footer__col--legal .footer__links a{ text-decoration:underline; text-underline-position:from-font }
/* seta (Union) 8.5×8.5, girada -90° como no Figma */
.footer__arrow{ width:8.5px; height:8.5px; flex:none; rotate:-90deg }
.footer__links a:hover, .footer__links a:focus-visible,
.footer__social a:hover, .footer__social a:focus-visible{ transform:translateX(5px); outline:none }

/* caixa de contato (124:80): 243×192, presa à direita do cartão (25 da borda) */
.footer__contact{
  position:absolute;
  right:calc(25 * var(--fu)); top:calc(29 * var(--fu));
  width:calc(243 * var(--fu)); min-height:calc(192 * var(--fu));
  border:1px solid var(--blue);
  padding:calc(10 * var(--fu)) calc(5 * var(--fu));
  display:flex; flex-direction:column; align-items:flex-end; gap:calc(12 * var(--fu));
}
/* balão "diga oi!" (kit) à esquerda da caixa de contato, rabicho
   virado pra ela */
.footer__hello{
  position:absolute; z-index:1;
  right:calc(282 * var(--fu)); top:calc(29 * var(--fu));
  width:calc(150 * var(--fu)); min-width:110px;
  color:var(--blue);
  transform:scaleX(-1);
}
.footer__hello > b{ transform:scaleX(-1); color:var(--paper); font-size:max(14px, calc(18 * var(--fu))) }
.footer__social{
  list-style:none; margin:0; padding:0;
  align-self:center;
  display:flex; align-items:center; gap:calc(15 * var(--fu));
  height:calc(24 * var(--fu));
}
.footer__email{
  width:100%;
  justify-content:center;
  padding:5px;
  background:var(--blue); color:var(--paper);
}
.footer__email:hover, .footer__email:focus-visible{ transform:translateX(4px) rotate(-1deg); outline:none }
.footer__copyright{
  width:100%; margin:0;
  font-size:max(12px, calc(13 * var(--fu)));
  font-weight:600; line-height:normal;
  text-transform:uppercase; text-align:justify;
}
.footer__close{ display:block; width:28px; height:28px; flex:none }
.footer__close img{ display:block; width:100%; height:100% }

@media (max-width:820px){
  .footer-stage{
    height:auto; min-height:100svh;
    container-type:inline-size;
    display:flex; flex-direction:column; justify-content:center;
    padding:40px 5% 40px;
  }
  .footer__cat{
    position:relative; left:auto; top:auto;
    width:min(494px, 90%); height:auto; aspect-ratio:494 / 219;
    margin:0 0 -4% 0;
  }
  .footer__panel{
    position:relative; left:auto; right:auto; top:auto;
    width:100%; height:auto;
    padding:24px;
    display:flex; flex-direction:column; gap:28px;
  }
  .footer__watermark{ display:none }
  .footer__nav{ position:static; flex-wrap:wrap; gap:24px 34px }
  .footer__col, .footer__col--news, .footer__col--nav, .footer__col--legal{ width:auto; min-width:0 }
  .footer__contact{ position:static; width:100%; max-width:320px; min-height:0; padding:10px; gap:12px }
  .footer__social{ height:auto; gap:15px }
  .footer__hello{ position:static; transform:none; width:130px; align-self:flex-start }
  .footer__hello > b{ transform:none }
}

/* SVGs do Figma com o azul fixo (fundo "dae", setas, ×): pintados na
   cor do tema (--ink-filter, ver shared.css) — azul, grafite, vinho… */
.footer__watermark,
.footer__arrow:not([src*="branca"]),
.footer__close img{ filter:var(--ink-filter) }