/* ==========================================================================
   RODAPÉ CORTINA — prefixo curt-
   Painel de tela cheia que fica parado atrás da página e é descoberto
   quando a última dobra sobe.

   Tokens usados:
     --bg --fg --fg-2      painel e tipografia, do escopo de tom da seção
     --rule-2              filetes (via --curt-linha, para o projeto ajustar)
     --display --sans      marca e texto
     --ease                curva do projeto

   Sem JavaScript e sem @keyframes: o efeito são três regras — o painel
   fixed atrás, o invólucro da página por cima e um vazio de 100vh no fim
   do fluxo.
   ========================================================================== */

.curt{
  /* Cor dos dois filetes. Sai de --rule-2 (a "linha divisória forte" do
     contrato) para o tema decidir o quanto ela aparece. A referência usa um
     cinza-sage quase branco, muito mais forte que o nosso padrão em fundo
     escuro; projeto que quiser aquele peso sobe esta variável — não a
     regra. */
  --curt-linha:var(--rule-2);

  /* Corpo da marca do meio. É ela que faz a cortina valer uma tela inteira:
     abaixo de ~90px em desktop o painel fica com cara de sobra de página.

     O valor é calibrado para um nome de ~14 caracteres encher a coluna numa
     linha só, que é o que a referência faz. Nome mais curto sobra espaço,
     nome mais longo cai para duas linhas — as duas coisas continuam de pé,
     mas o ajuste fino é aqui, e é o único que a troca de marca pede. */
  --curt-marca:clamp(34px,9.6vw,140px);

  /* O PAINEL.
     fixed + inset:0 = ele ocupa a viewport inteira e NUNCA se move. Toda a
     sensação de parallax vem daí: quem desliza é a página.

     z-index:0 e não -1. A tentação é usar negativo para o painel ficar
     atrás sem pedir nada à página — e não funciona: elemento com z-index
     negativo pinta ABAIXO da caixa do <body>, e a caixa do body cobre a
     tela inteira. O painel some atrás dela e, pior, os links do rodapé
     ficam inclicáveis, porque o body ganha o teste de acerto no lugar
     deles. Medido com elementFromPoint, não deduzido. */
  position:fixed;
  inset:0;
  z-index:0;

  display:flex;
  align-items:stretch;
  background:var(--bg);
  /* O respiro do painel é vertical e vem daqui; o lateral é do .wrap, que
     continua sendo a única regra da coluna (contrato §4). */
  padding-block:clamp(28px,6vh,80px);
}

/* O INVÓLUCRO DA PÁGINA.
   Envolve tudo o que vem antes do rodapé e é o que levanta a página acima
   do painel. É a única coisa que este componente pede da página, e não há
   como evitá-la: CSS não seleciona irmãos anteriores, então o componente
   não consegue erguer as dobras por conta própria.

   z-index:1 basta — o painel é 0. Como é position:relative (e não
   transform ou filter), um menu fixo lá dentro continua preso à viewport. */
.curt-pagina{position:relative;z-index:1}

/* O VAZIO.
   100vh de nada no fim do fluxo. É ele que dá à página o trecho de rolagem
   em que não há mais dobra por cima — e é nesse trecho que o painel aparece.
   Sem ele, a última dobra termina junto com o documento e a cortina nunca
   chega a ser vista.

   pointer-events:none é obrigatório, não é enfeite: o espaçador é um bloco
   transparente por cima do painel, e sem isto ele engoliria todo clique nos
   links do rodapé. */
.curt-espaco{
  height:100vh;
  pointer-events:none;
}

/* Cinco faixas repartindo a altura por igual — é o que a referência faz, e
   é o que mantém o painel legível em qualquer altura de tela sem clamp
   solto para cada vão. */
.curt-grid{
  display:flex;flex-direction:column;
  justify-content:space-between;
  width:100%;
  min-height:0;
}

/* ---------------------------------------------------------------- topo */
.curt-topo{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,4vw,48px);
  flex-wrap:wrap;
}

.curt-nav{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,32px)}

.curt-link{
  font-size:16px;line-height:1.5;
  color:var(--fg-2);
  transition:color .3s var(--ease);
}
.curt-link:hover,
.curt-link:focus-visible{color:var(--fg)}

/* O CTA é a primitiva .btn do core, sem retoque de forma. O único ajuste é
   impedir que ele encolha quando a fila de links cresce. */
.curt-cta{flex:0 0 auto}

/* ---------------------------------------------------------------- filetes */
.curt-linha{display:block;height:1px;background:var(--curt-linha)}

/* ---------------------------------------------------------------- marca */
/* Texto e não imagem: escala sozinha, não pede asset e não some se o SVG
   do cliente ainda não chegou. Tracking negativo porque corpo grande em
   display engorda; entrelinha abaixo de 1 porque a caixa é uma linha só e
   o resto vira ar morto no meio do painel. */
.curt-marca{
  font-family:var(--display);font-weight:700;
  font-size:var(--curt-marca);
  line-height:.86;letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--fg);
  /* Nome longo em tela estreita não pode empurrar a página para o lado. */
  overflow-wrap:anywhere;
}

/* Alternativa com logotipo desenhado. Mesma faixa, mesma altura óptica. */
.curt-marca-img{width:100%;max-width:none;height:auto}

/* ---------------------------------------------------------------- base */
.curt-base{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,3vw,32px);
  flex-wrap:wrap;
}

.curt-legal,
.curt-credito{font-size:16px;line-height:1.5;color:var(--fg-2)}

.curt-credito{transition:color .3s var(--ease)}
.curt-credito:hover,
.curt-credito:focus-visible{color:var(--fg)}
.curt-credito-marca{color:var(--fg)}

/* ---------------------------------------------------------------- movimento reduzido */
/* Não há o que desligar: o painel não anima e não se desloca em nenhum
   momento — ele fica parado e a página passa por cima. O que muda no
   hover é cor, que não é movimento. A regra existe para o próximo a
   passar por aqui não procurar o bloco que falta. */

/* ---------------------------------------------------------------- mobile */
@media(max-width:760px){
  .curt-topo{flex-direction:column;align-items:flex-start;gap:20px}
  .curt-nav{gap:14px 20px}
  /* Em tela de toque a fila de links é o conteúdo do rodapé; o botão
     ganhando a largura toda deixa de ser um alvo de 182px no canto. */
  .curt-cta{width:100%}
  .curt-base{flex-direction:column;align-items:flex-start;gap:10px}
}

@media(max-width:520px){
  .curt{--curt-marca:clamp(34px,16vw,64px)}
  /* Painel de 100vh num aparelho baixo fica apertado: menos ar em cima e
     embaixo é o que impede o filete de baixo de encostar no de cima. */
  .curt{padding-block:24px}
}