/* FOOTER v1.0 · DEVCODE OS · FASE 6 · BG Mídia
   Pele 100% dos tokens do ATELIER. Escopo: .ft- e .site-footer.
   DESATIVAR: remover este <link> e o <footer> do index.html. */

.site-footer {
  position: relative;                   /* âncora da assinatura tipográfica */
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  padding-top: clamp(var(--space-10), 6vw, var(--space-16));
  content-visibility: auto;
  /* ⚠️ A RESERVA PRECISA BATER COM A ALTURA REAL, SENÃO ELA CAUSA O SALTO QUE
     DEVERIA EVITAR. Estava em 620px para um rodapé que mede 1.514px no
     celular: quase 900px de diferença, tudo em salto na primeira pintura.
     Medido em 20/08 com a onda já no lugar: 1.514px até 768, 1.043px em 768,
     847px de 900 para cima. Se o rodapé ganhar ou perder bloco, remeça.
     Remedido em 21/08 com a assinatura refinada: 1.504px em 390, 1.441px em
     430, 1.065px em 768, 820px em 1024 e 853px em 1440. */
  contain-intrinsic-size: auto 1510px;
}
.site-footer a { color: inherit }

/* A LUZ DO FECHAMENTO
   Uma faixa quente na borda de cima, estática. O rodapé é a última coisa que
   fica na memória e até aqui ele era mais um bloco escuro: nada dizia "a
   página terminou", só que a cor de fundo tinha mudado um degrau.

   Um gradiente, nenhuma animação. A cena da rua já é o movimento perpétuo
   desta página, e uma segunda luz respirando disputaria atenção com ela no
   exato momento em que o visitante deveria estar olhando para o WhatsApp.
   Alfa em 0.05: some sob o texto e aparece na margem, que é onde há espaço. */
.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: clamp(120px, 22vw, 240px);
  background: radial-gradient(
    72% 100% at 50% 0%,
    color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
    transparent 72%
  );
  pointer-events: none;
}

/* O conteúdo fica acima da luz de fechamento, sempre. */
.site-footer > .container { position: relative; z-index: var(--z-base); }

.ft-top { display: grid; gap: var(--space-10); padding-bottom: var(--space-10); }

/* RITMO IGUAL NAS TRÊS COLUNAS DO RODAPÉ.
   O .ft-contact é grade e o .ft-label é irmão de grade dos itens dele, então
   o rótulo "Contato" recebia o gap de 20px POR CIMA da própria margem de
   16px: 36px de respiro contra os 16px do "Navegar", que não é grade. Duas
   colunas vizinhas, mesmo papel, ritmos diferentes, e o olho lê isso como
   desalinhamento sem saber apontar onde.
   Agora as duas colunas são grade com o mesmo gap, e a margem do rótulo sai
   de cena: quem manda no espaço é uma decisão só. */
.ft-label { margin: 0; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.ft-nav { display: grid; gap: var(--space-5); align-content: start; }

/* Mesmo caso da .brand do cabeçalho: a marca do rodapé é um link, e a imagem
   de 38px definia a altura do alvo. */
.ft-brand { display: flex; align-items: center; min-height: 44px;
            gap: var(--space-3); text-decoration: none; }
.ft-brand__mark { width: 38px; height: 38px; border-radius: var(--radius-full);
  object-fit: cover; flex-shrink: 0; }
.ft-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.ft-brand__text strong { font-family: var(--font-display); font-size: var(--text-base); font-weight: 800 }
.ft-brand__text span { font-size: var(--text-xs); color: var(--color-text-muted) }

.ft-tagline { margin: var(--space-5) 0 0; max-width: 26rem;
  font-size: var(--text-sm); color: var(--color-text-muted); }

.ft-social { display: flex; gap: var(--space-2); margin-top: var(--space-6); }
.ft-social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ft-social a:hover { color: var(--color-primary); border-color: var(--color-primary); }
}
.ft-social svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ALVO DE TOQUE DA NAVEGAÇÃO DO RODAPÉ.
   Eram seis links de 16px de altura em 360px e 18px em 1280px: abaixo até do
   piso de 24px do WCAG 2.2 SC 2.5.8, e são navegação de verdade, não link
   dentro de parágrafo. O alvo cresce por padding, o texto não muda de lugar.

   32px no ponteiro fino e 44px no grosso, e não 44 em todo lugar: 44px de
   altura por seis linhas empilha 312px de coluna no desktop, onde o alvo é um
   cursor de um pixel e o problema não existe. `pointer: coarse` é exatamente
   a pergunta "o dedo é o ponteiro aqui?". */
.ft-nav ul { display: grid; gap: var(--space-2) }
.ft-nav a { display: inline-flex; align-items: center; min-height: 32px;
  font-size: var(--text-sm); color: var(--color-text-muted);
  text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
@media (pointer: coarse) {
  .ft-nav a { min-height: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  .ft-nav a:hover { color: var(--color-text); }
}

.ft-contact { display: grid; gap: var(--space-5); }
.ft-contact__item { display: flex; flex-direction: column; gap: var(--space-1); }
.ft-contact__key { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps, 0.08em);
  text-transform: uppercase; color: var(--color-text-muted); }
.ft-contact__val { font-size: var(--text-sm); color: var(--color-text-muted); font-style: normal; }
.ft-contact a.ft-contact__val { display: inline-flex; align-items: center;
  min-height: 32px;
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; color: var(--color-primary); text-decoration: none; }
@media (pointer: coarse) {
  .ft-contact a.ft-contact__val { min-height: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  .ft-contact a.ft-contact__val:hover { text-decoration: underline; }
}

.ft-sign {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ft-sign:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
}
/* O selo virou o logo real da DevCode em 01/09, no lugar do monograma "DC".
   Sem borda e sem raio: o arquivo já é um círculo com o próprio anel luminoso,
   e uma moldura quadrada por fora dele briga com a forma que ele tem. */
.ft-sign__mark {
  display: block; flex-shrink: 0; width: 46px; height: 46px;
}
.ft-sign__body { flex: 1 1 16rem; min-width: 0 }
.ft-sign__eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.ft-sign__who { margin: 0; font-size: var(--text-sm) }
.ft-sign__who b { font-family: var(--font-display); font-weight: 800; }
.ft-sign__who span { color: var(--color-text-muted); }
.ft-sign__note { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }

/* Ghost: peso visual abaixo de qualquer CTA do cliente. */
.ft-sign__cta {
  display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
  min-height: 44px; padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  color: var(--color-text-muted); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ft-sign__cta:hover { color: var(--color-text); border-color: var(--color-text-muted); }
}

.ft-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-block: var(--space-5);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.ft-bottom p { margin: 0 }

/* Motion próprio, CSS-only: o SOAP não anima o <footer> (Kernel §4).
   Sem animation-timeline, simplesmente não roda. Nada fica invisível. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ft-top, .ft-sign {
      animation: ft-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}
@keyframes ft-in { from { opacity: 0; transform: translateY(14px); } }

/* Escala única do projeto: 480 / 640 / 900 / 1200 / 1600 (ver styles.css §1) */

/* Folga para o FAB do CONCIERGE não encobrir o copyright no mobile. */
@media (max-width: 639px) {
  .ft-bottom {
    flex-direction: column; align-items: flex-start;
    /* Altura do FAB (58px) mais o afastamento dele da base (16px) mais um
       respiro, escrito como soma da escala em vez de um 5.5rem que ninguém
       sabe de onde saiu. */
    padding-bottom: calc(var(--space-16) + var(--space-6) + env(safe-area-inset-bottom, 0px));
  }
}

/* md · 2 colunas. São 3 blocos, então o institucional ocupa a linha inteira
   e navegação e contato dividem a de baixo. Sem isso, o contato caía sozinho
   numa terceira linha deixando metade da grade vazia. */
@media (min-width: 640px) {
  .ft-top { grid-template-columns: 1fr 1fr; }
  .ft-top > :first-child { grid-column: 1 / -1; }
}

/* lg · as 3 colunas finais */
@media (min-width: 900px) {
  .ft-top { grid-template-columns: 1.6fr 0.9fr 1.1fr; gap: var(--space-12); }
  .ft-top > :first-child { grid-column: auto; }
  .ft-sign { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-top, .ft-sign { animation: none; opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   ONDA DE FECHAMENTO
   Porte da ideia do "animated footer" do 21st.dev. A conta e o
   comportamento estão em assets/js/footer-onda.js; aqui fica só a forma.

   ⚠️ ISTO REVOGA A DECISÃO REGISTRADA ACIMA ("um gradiente, nenhuma
   animação"). Foi pedido do cliente em 20/08. A convivência com a cena da
   rua é resolvida no JS: a onda só roda com o rodapé na tela.

   COR: o original usa branco puro. Aqui é o laranja da marca, e por dois
   motivos. Vinte e três barras brancas num site de base #0D0B09 são um bloco
   de luz de 200px na borda inferior, que é a coisa mais brilhante da página
   inteira num lugar onde não há nada para ler. E laranja fecha a página com a
   mesma cor com que ela abre no painel de LED. Para voltar ao branco do
   original, troque --onda-cor por var(--color-text) e mais nada.

   ALTURA: a caixa recorta. As barras somadas passam de 230px e o acúmulo do
   seno leva a crista bem além disso; o que se vê é a fatia de cima do
   empilhamento, que é exatamente o efeito.
   --------------------------------------------------------------------------- */
.ft-onda {
  --onda-barras: 26;
  --onda-amplitude: 9;
  /* Distância entre um fio e o próximo. É este número, e não a espessura,
     que decide se a onda lê como grade fina ou como persiana. */
  --onda-passo: 4px;
  --onda-cor: var(--color-primary);
  /* A linha escura dentro das letras. Passo de 2px: metade do que era, e com
     menos da metade do contraste. A 3px e 40% de alfa isso era LISTRA, uma
     forma que o olho conta uma a uma; a 2px e 22% é TEXTURA, que o olho lê
     como material. É a diferença entre um letreiro de fliperama e a superfície
     de um painel visto de perto, e é literalmente a mesma ideia, só na
     densidade certa. */
  --marca-linha: 2px;
  --marca-linha-alfa: 0.22;
  /* ⚠️ O TAMANHO CAIU 44% NO DESKTOP, E ISSO É A CORREÇÃO PRINCIPAL.
     Medido antes: 136px de altura de letra num rodapé cujo maior texto é o
     telefone, com 22px. Seis vezes. A assinatura não era um acabamento, era um
     segundo logotipo disputando com o cabeçalho, e nenhum ajuste de cor ou de
     efeito conserta proporção errada.
     Agora o teto é 4,75rem: cerca de três vezes o telefone, que é a relação em
     que uma palavra grande fecha a página sem tomar conta dela. O piso do
     celular quase não mudou, porque lá a proporção já estava certa: 41,6px
     numa janela de 390 ocupa a mesma fração que 76px numa de 1440. */
  --marca-tam: clamp(2.6rem, 8vw, 4.75rem);

  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* A faixa é o maior entre a altura da onda e a altura que a palavra pede.
     Amarrar os dois num número só faria a palavra encolher em tela larga ou
     a onda sumir em tela estreita. */
  min-height: max(clamp(88px, 12vw, 150px), calc(var(--marca-tam) * 1.9));
  /* O vão antes da faixa era o mesmo --space-10 que separa blocos DENTRO do
     rodapé, então a assinatura lia como mais um bloco da lista em vez de como
     o fecho. Respiro maior é o que diz "acabou": o olho precisa de um silêncio
     antes da última palavra. */
  margin-top: clamp(var(--space-12), 7vw, var(--space-24));
  /* Nem a palavra nem os fios encostam na borda da faixa em nenhuma largura. */
  padding-block: var(--space-4);
  /* A onda encosta na borda da janela, não no container: é fechamento de
     página, não bloco de conteúdo. */
  margin-inline: calc(var(--gutter) * -1);
  pointer-events: none;
}

/* A LUZ DE FECHAMENTO, IRMÃ DA LUZ DE ABERTURA.
   O rodapé já abre com um brilho radial quente na borda de cima
   (.site-footer::before, alfa 0.05). Fechar com o mesmo gesto, na mesma cor e
   na mesma intensidade, transforma dois eventos soltos numa composição: a
   faixa deixa de começar numa linha seca depois do copyright e passa a
   EMERGIR, porque a luz aparece antes da palavra.
   É também a única profundidade que sobrou aqui, e ela está atrás da letra,
   não em volta dela: halo em volta de texto laranja é letreiro de neon, que é
   exatamente o que este refinamento veio tirar. */
.ft-onda::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    62% 82% at 50% 62%,
    color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* OS FIOS ABREM UMA CLAREIRA NO MEIO.
   A máscara elíptica apaga a onda onde a palavra está. Sem ela a leitura fica
   suja: fio de 1px cruzando contraforma de letra vira serrilha, e o nome da
   empresa é a última coisa da página que pode parecer mal impressa.
   A clareira não se move; quem se move são os fios, que entram e saem dela.
   É o comportamento de um letreiro com luz passando por trás. */
.ft-onda__trilha {
  position: absolute;
  inset: 0;
  /* ⚠️ A CLAREIRA FOI RECALIBRADA JUNTO COM O TAMANHO DA PALAVRA.
     O raio era 76% × 60%, medido para uma assinatura 44% maior. Com a palavra
     menor, a mesma clareira apagava o campo quase inteiro e o que sobrava
     entre o copyright e a marca era um vazio, não uma transição. Agora ela
     acompanha a letra: os fios voltam a existir em volta e a palavra continua
     limpa por dentro. */
  -webkit-mask-image: radial-gradient(46% 52% at 50% 52%, transparent 0%, transparent 26%, #000 84%);
          mask-image: radial-gradient(46% 52% at 50% 52%, transparent 0%, transparent 26%, #000 84%);
}

/* FIO DE 1PX COM FOLGA, NUNCA BARRA CHEIA ENCOSTADA.
   A versão anterior empilhava barras de espessura crescente encostadas umas
   nas outras. O resultado é uma chapa listrada: lê como toldo.

   Agora são 26 fios de 1px com 4px de folga. A mesma onda e o mesmo acúmulo
   de seno; o que muda é o material, de persiana para grade fina. A espessura
   sai de cena e quem carrega o peso é a OPACIDADE.

   O teto da opacidade caiu de 0,48 para 0,34 quando a palavra entrou na
   faixa: os fios passaram de assunto a moldura, e moldura que compete com o
   que ela emoldura está no lugar errado. */
.ft-onda__barra {
  display: block;
  height: 1px;
  background: var(--onda-cor);
  margin-top: var(--onda-passo);
  /* --k vem do JS, uma vez, e vai de 0 no primeiro fio a 1 no último. */
  /* Voltou de 0,34 para 0,40 no teto quando a assinatura encolheu. Os fios
     deixaram de ser moldura de uma palavra grande e passaram a ser o caminho
     que leva o olho do copyright até ela: para isso precisam ser vistos. */
  opacity: calc(0.06 + var(--k, 1) * 0.34);
  will-change: transform;
}

/* ========================== A ASSINATURA DE LUZ ==========================
   O fim da página é o nome da marca escrito com o material que a empresa
   vende. Os fios da onda e as linhas de dentro das letras dividem a mesma
   grade vertical, então a palavra não está POR CIMA do efeito, ela é feita
   do mesmo efeito. Essa é a diferença entre assinatura e adesivo.

   POR QUE LARANJA, E SÓ LARANJA
   A identidade da BG é uma cor quente de croma alto sobre quase preto, a
   mesma que abre a página no painel do herói. Mídia exterior usa laranja por
   um motivo prático antes de estético: é o tom de maior distância de leitura
   noturna que ainda não é vermelho, e vermelho em fechamento de página lê
   como alerta, não como marca.

   Uma cor só, três luminâncias: clara no topo, cheia no meio, brasa embaixo.
   Isso desenha uma fonte de luz ACIMA da palavra, que é de onde vem a luz na
   cena da rua desta mesma página. Rampa invertida daria letra iluminada por
   baixo, que o olho lê como algo errado sem saber dizer o quê.

   O QUE FOI EMBORA
   O contorno fantasma de 6% que atravessava o rodapé. Ele ocupava exatamente
   este lugar e a onda passava por cima dele: duas assinaturas disputando o
   mesmo espaço lê como erro de montagem, não como camada.
   ------------------------------------------------------------------------- */
.ft-onda__marca {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  /* EXCEÇÃO DOCUMENTADA: a assinatura é grafismo, não texto corrente, e por
     isso tem escala própria. É aria-hidden e o nome da marca já está no link
     acima, então nada aqui é informação que alguém precise ler. */
  font-size: var(--marca-tam);
  /* 700 e não 800. Em 136px o peso 800 era um bloco: as contraformas do B, do
     G e do D fechavam e a palavra virava mancha. Em 76px, 700 já lê como bold
     e devolve o ar interno das letras, que é metade do que faz tipografia
     grande parecer cara. */
  font-weight: 700;
  line-height: 1;
  /* Tracking POSITIVO, e é escolha, não descuido. Negativo é para manchete,
     onde a palavra tem de virar bloco compacto. Aqui é o oposto: uma marca
     gravada na base da página, e espaçamento aberto é o que separa placa de
     manchete. */
  letter-spacing: 0.08em;
  /* O tracking acrescenta espaço DEPOIS de todo caractere, o último incluído,
     e esse vão fantasma entra na largura da caixa. Centralizar a caixa deixava
     a palavra deslocada meio espaço para a esquerda. Margem negativa no fim
     tira o vão da conta em vez de tentar compensar com padding do outro lado,
     que é chute: aqui o número é exatamente o mesmo do letter-spacing. */
  margin-inline-end: -0.08em;
  white-space: nowrap;
  color: transparent;
  background-image:
    /* 1 · a textura do painel. Fina e fraca: material, não listra. */
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0 calc(var(--marca-linha) - 1px),
      rgba(0, 0, 0, var(--marca-linha-alfa)) calc(var(--marca-linha) - 1px) var(--marca-linha)
    ),
    /* 2 · UMA FILEIRA ACESA. É toda a referência a LED que sobrou, e é a que
       diz mais: num painel de verdade a imagem é feita de linhas, e uma linha
       acender é comportamento do material, não efeito aplicado por cima.
       Bordas suaves e não degrau, senão vira faixa colada na letra. */
    linear-gradient(
      to bottom,
      transparent 0 49.5%,
      color-mix(in srgb, var(--color-primary) 82%, transparent) 51% 53%,
      transparent 54.5% 100%
    ),
    /* 3 · o corpo da letra. Rampa curta e de baixo contraste: a luz vem de
       cima, como na cena da rua desta mesma página, mas em torno de 2,8:1
       contra o fundo em vez dos 5:1 de antes. Presente, e não acesa. */
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-primary) 62%, var(--color-surface-alt)) 0%,
      color-mix(in srgb, var(--color-primary) 44%, var(--color-surface-alt)) 100%
    );
  background-repeat: repeat, no-repeat, no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  /* ⚠️ SAIU O HALO, SAIU A VARREDURA.
     Eram os dois responsáveis pela cara de fliperama. Halo de 26px em volta de
     letra laranja saturada é a definição de neon; varredura de brilho a cada 9
     segundos é o efeito de vitrine que todo site de tecnologia usou em 2014.
     Nenhum dos dois sobrevive a um pedido de sutileza.
     No lugar, 1px de aresta clara na base do glifo. text-shadow desenha a
     partir do contorno, então com o preenchimento transparente ele aparece só
     como um fio embaixo da letra: o olho lê superfície gravada, que é
     profundidade sem nada aceso. */
  text-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 7%, transparent);
  user-select: none;
}

/* Sem background-clip: text a palavra viraria um retângulo laranja listrado
   do tamanho da faixa. Nesse caso ela é laranja chapado e pronto: degradar
   para ruído é pior que degradar para simples. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ft-onda__marca {
    background: none;
    color: color-mix(in srgb, var(--color-primary) 62%, var(--color-surface-alt));
    text-shadow: none;
  }
}

/* Sem JS não existe fio nenhum, e está certo: a assinatura continua lá, só
   sem o campo de luz em volta. A regra antiga escondia a faixa inteira, o que
   agora apagaria o nome da marca junto. */

/* O botão do assistente é fixo no canto inferior direito, e a assinatura é a
   última coisa da página: quando a rolagem chega ao fim os dois disputam o
   mesmo pedaço de tela. Em 390px sobravam 6px entre o "A" e o botão, o que na
   prática é encostado. A faixa devolve embaixo a altura do botão mais a folga
   dele e a palavra sobe para fora do caminho. Os fios continuam preenchendo a
   faixa inteira (inset: 0), então o que se ganha é respiro, não vazio.
   Acima de 900px a palavra fica centralizada com mais de 700px de sobra de
   cada lado e o botão nunca a alcança: a regra não vale lá. */
@media (max-width: 899px) {
  /* ⚠️ A FOLGA DO BOTÃO TEM DE ENTRAR NA ALTURA, NÃO SÓ NO PADDING.
     Medido: 16px de folga em cima da palavra contra 74px embaixo. O padding
     reservava o canto do assistente, mas a faixa não crescia junto, então o
     que sobrava para centralizar era menor que a própria palavra e ela subia
     até encostar na borda de cima. Somando a mesma folga ao min-height, a
     centralização volta a ter espaço dos dois lados. */
  .ft-onda {
    --folga-assistente: calc(58px + clamp(1rem, 4vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--folga-assistente);
    min-height: calc(
      max(clamp(88px, 12vw, 150px), var(--marca-tam) * 1.9) + var(--folga-assistente)
    );
  }
  /* Em letra pequena a mesma trama vira listra: 41px de corpo não têm pixels
     para distribuir vinte fileiras, e num aparelho de 3x cada linha escura
     ocupa três pixels de tela, dura e contada. Metade do alfa devolve a leitura
     de material sem tirar a referência ao painel. */
  .ft-onda__marca { --marca-linha-alfa: 0.12; }
}

/* Movimento reduzido: a onda fica parada na posição inicial e o brilho não
   varre. O JS não entra no laço de quadro, então a parte dele já está
   resolvida; isto aqui trata a parte que é do CSS. */
/* Movimento reduzido: a onda fica parada na posição inicial. O JS não entra
   no laço de quadro, então a parte dele já está resolvida. A assinatura não
   anima mais nada, então não há o que desligar aqui. */
@media (prefers-reduced-motion: reduce) {
  .ft-onda__barra { transition: none; }
}

/* A reserva do rodapé por faixa. Ver a nota em .site-footer. */
@media (min-width: 640px) {
  .site-footer { contain-intrinsic-size: auto 1070px; }
}
@media (min-width: 900px) {
  .site-footer { contain-intrinsic-size: auto 860px; }
}