/* ============================================================================
   RODAPÉ GLOBAL — nó 375:113, "Footer Colors / clean final"

   Um arquivo, três páginas. O rodapé é injetado pelo `tools/build.py` a partir
   de `partials/rodape.html`, então ele é HTML ESTÁTICO em todas elas: indexável,
   presente sem JavaScript, e com uma fonte só para editar.

   AS MEDIDAS SÃO AS DO NÓ, em cima de um cartão de 1264x404:

     coluna de conteúdo   75 → 1187            (1112 de largura)
     logo                 y 54                 (onde ficava o lockup 418:2/3/17)
     propósito            y 123   17/25px      #D6D0C5, caixa de 560
     navegação            y 211   12/16px      #F3EBDD, vão de 28 entre itens
     divisor              y 279   1px          #474747, com fio turquesa de 174
     rodapé legal         y 315   11/16px      #8F8B84
     coluna direita       x 975   212 de larg  rótulo 39 · botão 61 · fone 131

   O QUE JÁ NÃO É DO NÓ (09/09/2026): ele era um CARTÃO ESCURO recuado dos
   lados, e virou CHÃO CLARO sangrando de ponta a ponta. As duas mudanças são
   pedidos do Nicácio, na mesma tarde, e as razões estão anotadas em cima das
   regras: `.rd` (o chão) e a inversão das tintas. As medidas do nó continuam
   valendo como proporção; o que mudou foi a superfície.

   POR QUE PX E NÃO `--u`: `--u` encolhe com a menor das duas dimensões da
   janela e colapsa em tela baixa — num celular deitado o rodapé inteiro viraria
   letra de 8px. Aqui a régua é a largura do cartão, em `clamp()` de px real,
   que é o mesmo que as páginas /festas e /adicionais usam.
   ========================================================================== */

/* O RODAPE E' O CHAO DA PAGINA, e nao a ultima secao dela (09/09/2026).

   Ele era um CARTAO: margem dos lados, canto arredondado, borda de #262626 e
   sombra — a mesma receita das secoes de cartao claro. Cartao no fim da pagina
   le como "mais um bloco", e foi esse o diagnostico do cliente: "ta' parecendo
   secao". Rodape nao e' peca sobre o fundo, e' o fundo onde a pagina termina,
   e isso se diz com tres coisas:

     · SANGRA ATE' A BORDA. Sem margem, sem raio, sem sombra: nada flutua.
     · UMA ARESTA DE CIMA. Fio de 1px atravessando a largura inteira, com o
       tique turquesa de 15,65% do no' 415:4 mudado para CA' — ele era divisor
       interno e vale muito mais como assinatura de fim de pagina.
     · MENOS AR E LETRA MENOR. Secao respira; rodape e' denso e utilitario.
       O proposito caiu de 17px para 13,5, a navegacao virou lista em coluna com
       rotulo, e o vazio de ~500px que sobrava no meio virou coluna de contato,
       que e' o que alguem procura no fim de uma pagina.
   ========================================================================== */

/* O RODAPE E' CLARO (09/09/2026, pedido do Nicacio).

   O chao e' o CREME DA MARCA, o mesmo `--creme` que o site usa como tinta
   sobre o preto — aqui ele troca de papel e vira superficie. Duas consequencias
   que o codigo tem de acompanhar, e e' por isso que as cores viram token em vez
   de ficarem espalhadas:

     · TODA A TINTA INVERTE. Creme sobre preto vira preto sobre creme, nos tres
       niveis (nome, apoio, nota de rodape).
     · O BOTAO INVERTE JUNTO. Ele era a unica peca clara sobre o preto, e era
       por isso que ele puxava o clique. Num chao claro, quem chama e' o
       ESCURO: o mesmo contraste, com os papeis trocados. */
/* A LETRA DA ASSINATURA. Space Grotesk 500 e a fonte da marca da Yamplink, e
   entra aqui SO' para a palavra "Yamplink" do credito no pe' legal: credito
   escrito na Inter do site some dentro da linha legal; escrito na propria letra
   ele le como assinatura. Um arquivo local de 13 KB, subconjunto latino
   (U+0000-00FF), porque a CSP do site e' `font-src 'self'` — nao ha CDN de
   fonte neste projeto e nao e' este credito que vai abrir um. */
@font-face{
  font-family:"Space Grotesk";
  src:url('/fontes/space-grotesk-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF;
}

.rd{
  --rd-chao:#F1E7D5;                 /* o creme da marca, agora como chao */
  --rd-tinta:#141210;
  --rd-tinta-2:rgba(20,18,16,.66);
  --rd-tinta-3:rgba(20,18,16,.46);
  --rd-fio:rgba(20,18,16,.16);

  position:relative;
  margin:0;
  background:linear-gradient(180deg, #F5EDDF 0%, var(--rd-chao) 62%, #EBE0CB 100%);
  border:0;border-radius:0;box-shadow:none;
  color:var(--rd-tinta);
  padding:clamp(30px, 4vw, 54px) 0 clamp(18px, 2.2vw, 26px);
  font-family:"Inter",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
/* A MARCA E' BRANCA NO ARQUIVO e desaparecia sobre o creme. O logo do site tem
   traco branco (foi recortado para a navbar escura), entao aqui ele entra
   INVERTIDO por filtro: `invert(1)` devolve o traco preto sem precisar de um
   segundo arquivo de imagem para manter em sincronia. */
/* O RASGO É A ARESTA DE CIMA. O tique turquesa que morava aqui saiu: com o
   papel rasgado na emenda, um fio reto de 2px logo acima dele lia como um
   segundo começo de rodapé — duas bordas para a mesma junta. A borda superior
   do `.rd` também vira transparente pelo mesmo motivo. */
.rd-rasgo{
  position:absolute;left:0;right:0;top:0;z-index:3;
  height:clamp(22px, 2.9vw, 40px);
  pointer-events:none;
  /* a folha sobe: o rasgo come os últimos pixels da seção de cima, senão fica
     um fio da cor errada entre as duas */
  transform:translateY(-99%);
}
.rd-rasgo svg{display:block;width:100%;height:100%}
/* a curva de trás é a espessura da folha; a da frente é o próprio creme */
.rd-rasgo-tras{fill:#D9CDB4}
.rd-rasgo-frente{fill:#F5EDDF}
.rd-dentro{
  max-width:calc(1320 * var(--u));
  margin:0 auto;
  padding:0 clamp(20px, 5.9vw, 76px);
}

/* ---------------------------------------------------------------- o miolo */
.rd-topo{
  display:grid;
  /* marca | paginas | contato | acao. A coluna de acao mantem os 212 do no',
     que e' a largura de desenho do botao; as outras tres dividem a sobra.

     `min-content` NO LUGAR DO ZERO (09/09/2026). Era `minmax(0, Nfr)`, e o
     zero ali dizia literalmente "esta coluna pode encolher ate' sumir". Numa
     tela larga sobra espaco e ninguem nota; num notebook as tres colunas
     desabavam para 140, 109 e 83px, e o conteudo se virava como podia — o logo
     vazando 12px para fora do bloco, "Depoimentos" saindo 28px do proprio item
     e o telefone partido em tres linhas.

     E ha um erro de projeto embutido nesses numeros: a coluna MAIS ESTREITA
     (`.8fr`, contato) e' a que carrega os textos MAIS LARGOS do rodape — o
     telefone e o e-mail, que sao blocos indivisiveis. Com `min-content` a
     grade passa a conhecer esse piso e distribui a sobra a partir dele, em vez
     de repartir a largura por proporcao e deixar o conteudo se arranjar.

     As proporcoes continuam as mesmas onde ha espaco: em 1440 e 1920 nao muda
     um pixel. */
  grid-template-columns:
    minmax(min-content, 1.35fr)
    minmax(min-content, 1.05fr)
    minmax(min-content, .8fr)
    212px;
  gap:clamp(22px, 2.8vw, 44px);
  align-items:start;
}

/* O ROTULO DE COLUNA e' o que faz a lista virar rodape em vez de menu solto:
   10px, versalete, tinta baixa. Organiza sem competir com nada. */
.rd-rotulo{
  margin:0 0 clamp(12px, 1.1vw, 16px);
  font-size:10px;font-weight:700;line-height:1.4;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rd-tinta-3);
}
.rd-col{min-width:0}

/* --------------------------------------------------------------- a marca */
/* O `min(..., 100%)` É O CONSERTO DO RODAPÉ NO NOTEBOOK (09/09/2026).

   O piso do `clamp` era 148px e a coluna da marca não tem piso nenhum: ela é
   `minmax(0, 1.35fr)`, ou seja, pode encolher até zero. Numa tela larga sobra
   espaço e ninguém percebe; num notebook a coluna fica menor que o piso do
   logo e ele sai para fora do bloco. Medido: 152px de logo numa coluna de 140
   em 1093x506 (o 1366x768 com a tela do Windows em 125%), e 176 numa coluna de
   163 em 1280x585. Nas telas de 1440 e 1920 não acontece — e é por isso que
   parecia defeito "só do notebook dela".

   `min(..., 100%)` não muda nada onde já cabia: 176px continua 176px sempre que
   a coluna tiver 176. Onde não cabe, o logo passa a acompanhar a coluna em vez
   de vazar. A proporção se mantém sozinha, porque a imagem dentro dele é
   `width:100%; height:auto`. */
.rd-marca{display:block;width:min(clamp(148px, 13.9vw, 176px), 100%)}
.rd-marca img{width:100%;height:auto;display:block}

/* O LOGO ALINHA COM A COLUNA, e não com o x=16 do nó. Naquele arquivo o bloco
   da marca eram três nós (símbolo 418:17 em x=76, "COLORS" 418:2 e "LAZER"
   418:3), todos ocultos, e por cima deles foi solta uma imagem de referência em
   x=16 — a que o cliente pediu para trocar. A régua verdadeira é a dos nós que
   ela cobriu: 76, a mesma do propósito, da navegação e do divisor. */

.rd-proposito{
  margin:clamp(12px, 1.3vw, 16px) 0 0;
  max-width:calc(380 * var(--u));
  font-size:clamp(12.5px, 1.05vw, 13.5px);
  line-height:1.5;
  color:var(--rd-tinta-2);
  text-wrap:pretty;
}
/* ONDE A COLORS ATENDE. E' a duvida de quem chegou ao fim da pagina e nao sabe
   se o servico vai ate' a cidade dele; morava so' no JSON e nao aparecia. */
.rd-area{
  margin:clamp(8px, .9vw, 11px) 0 0;
  max-width:calc(340 * var(--u));
  font-size:clamp(11.5px, .95vw, 12.5px);
  line-height:1.45;
  color:var(--rd-tinta-3);
  text-wrap:pretty;
}

/* ---------------------------------------------------------- a navegação */
/* DUAS COLUNAS DE QUATRO, e nao uma pilha de oito: a pilha sozinha punha 430px
   de altura no rodape e deixava as outras tres colunas com um vazio embaixo —
   que e' de novo altura de secao. Em 2x4 o mapa do site le' de uma olhada. */
/* DUAS COLUNAS QUANDO CABEM DUAS, e uma quando não cabem — decidido pela
   própria lista, não por breakpoint.

   Era `repeat(2, minmax(0, 1fr))`: duas colunas SEMPRE, e `minmax(0, ...)`
   deixa cada uma encolher até zero. A palavra mais longa da lista é
   "Depoimentos" e ela mede 82px no corpo do rodapé; as subcolunas medidas
   davam 94px em 1440 (cabia), 64px em 1366, 55px em 1280x585 e 47px em
   1093x506. Ou seja, em toda tela de notebook a palavra saía do próprio item
   — 17px, 25px e 28px de vazamento, medidos.

   `auto-fit` com piso de 86px resolve sem tabela de tamanhos: onde couberem
   duas colunas de 86 mais o vão, ele monta duas; onde não couber, ele monta
   uma só e a lista fica alta em vez de vazar. 86 é os 82 da palavra mais dois
   pixels de folga de cada lado — e se um dia entrar um item de nome mais
   longo, é este número que sobe.

   POR QUE NÃO FOI UM BREAKPOINT NOVO: a largura em que as duas colunas param
   de caber não depende da JANELA, depende da coluna do rodapé — que muda com o
   vão, com o recuo e com a largura do botão ao lado. Um número de `@media`
   nasceria certo hoje e erraria no primeiro ajuste dessas três coisas. */
.rd-nav{
  margin:0;padding:0;list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(86px, 1fr));
  gap:clamp(8px, .8vw, 11px) clamp(12px, 1.4vw, 22px);
}
.rd-nav a{
  display:inline-block;
  font-size:clamp(12px, 1vw, 13px);
  font-weight:500;
  line-height:1.3;
  color:var(--rd-tinta-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .22s var(--e-entrada), color .22s var(--e-entrada);
}
@media (hover: hover){
  .rd-nav a:hover{border-bottom-color:var(--logo-turquesa);color:var(--rd-tinta)}
}
.rd-nav a:focus-visible{outline:2px solid var(--logo-turquesa);outline-offset:4px}

/* E-MAIL E INSTAGRAM EM TEXTO, na coluna de contato. O simbolo la' embaixo e'
   alvo de toque; o texto e' o que se le, se copia e se confere. */
.rd-linha{
  display:block;margin-top:clamp(7px, .7vw, 9px);
  font-size:clamp(12px, 1vw, 13px);font-weight:500;line-height:1.35;
  color:var(--rd-tinta-2);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .22s var(--e-entrada), color .22s var(--e-entrada);
}
@media (hover: hover){
  .rd-linha:hover{border-bottom-color:var(--logo-turquesa);color:var(--rd-tinta)}
}
.rd-linha:focus-visible{outline:2px solid var(--logo-turquesa);outline-offset:3px}

/* ------------------------------------------------------- coluna de contato */
.rd-contato{
  display:flex;flex-direction:column;align-items:flex-start;
}
/* o rotulo desta coluna e' o unico colorido: ele etiqueta a acao */
/* O turquesa da marca (#30D5C8) sobre o creme da' 1,9:1: no chao escuro ele era
   leitura, aqui seria enfeite ilegivel. O tom escurece ate' passar de 4,5:1
   mantendo a mesma familia de cor. */
.rd-apoio{color:#0E7C71}

/* O BOTÃO É A ÚNICA PEÇA CLARA DO RODAPÉ, e por isso ele é a conversão. Creme
   cheio sobre preto: nada mais na faixa tem esse contraste. As camadas seguem a
   receita da matéria de interface — aresta de cima na luz, aresta de baixo na
   sombra, e `:active` que afunda de verdade. */
.rd-botao{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:54px;
  padding:0 14px 0 16px;   /* 212 - 30 = 182; menos 18 do icone e 10 do vao = 154,
                              exatamente a largura do texto no no' 418:12 */
  white-space:nowrap;
  border-radius:8px;
  background:linear-gradient(180deg, #1A1A1A 0%, #050505 100%);
  box-shadow:
    0 2px 6px rgba(20,18,16,.26),
    inset 0  1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.6);
  color:#F5EDDF;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  text-decoration:none;
  transition:background .3s var(--e-entrada), box-shadow .25s var(--e-entrada),
             transform .18s var(--e-entrada);
}
@media (hover: hover){
  /* O HOVER TINHA FICADO COM A RECEITA ANTIGA. Quando o rodapé era escuro, o
     botão era a única peça CREME e clarear no hover era o gesto certo. Com o
     rodapé claro o botão inverteu para escuro — e a regra de clarear continuou
     aqui, então passar o mouse pintava ele de branco: texto creme sobre fundo
     branco, ilegível por um instante.

     Peça escura acende ESCURECENDO o entorno e levantando a própria luz: o
     preto abre um grau, a aresta de cima ganha brilho e a sombra cresce. É o
     mesmo gesto de antes, com o sinal trocado. */
  .rd-botao:hover{
    background:linear-gradient(180deg, #262626 0%, #0B0B0B 100%);
    transform:translateY(-1px);
    box-shadow:
      0 5px 14px rgba(20,18,16,.34),
      inset 0  1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(0,0,0,.6);
  }
}
.rd-botao:active{
  transform:translateY(1px);
  box-shadow:inset 0 1px 3px rgba(4,4,4,.26);
}
.rd-botao:focus-visible{outline:2px solid var(--logo-turquesa);outline-offset:3px}
.rd-botao svg{width:18px;height:18px;flex:0 0 auto;display:block}

/* OS TELEFONES SÃO UMA PILHA, e não uma linha só. O cliente pediu um segundo
   WhatsApp, e dois números na mesma linha viram um texto que ninguém separa no
   olho — principalmente no celular, onde eles quebrariam no meio do DDD.
   A etiqueta (`<i>`) só existe quando `content/contato.json` traz `rotulo`: com
   um número ela seria ruído, com dois ela é o que evita a escolha no chute. */
.rd-fones{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(5px, .7vw, 8px);
  margin:clamp(12px, 1.3vw, 16px) 0 0;
}
/* TELEFONE NÃO QUEBRA, NUNCA (09/09/2026). Num notebook a coluna de contato
   ficava com 83px e o número saía assim:

       (11)
       92373–
       1510

   Três linhas, com o próprio traço do número virando hífen de quebra. Isso não
   aparece em varredura de transbordo — a caixa não estourou, o texto se
   dobrou dentro dela — e era o que mais parecia defeito no rodapé dela.
   Com `nowrap` o número passa a ter uma largura MÍNIMA de verdade, e é essa
   largura que a coluna lá em cima é obrigada a respeitar. */
.rd-fone{
  display:inline-flex;align-items:baseline;gap:9px;
  white-space:nowrap;
  font-size:14px;font-weight:500;line-height:1.29;
  color:var(--rd-tinta);text-decoration:none;
  font-feature-settings:"tnum" 1;          /* número não dança de largura */
  border-bottom:1px solid transparent;
  transition:border-color .22s var(--e-entrada);
}
.rd-fone i{
  font-style:normal;
  font-size:9.5px;font-weight:700;line-height:1;
  letter-spacing:.11em;text-transform:uppercase;
  color:#8F8B84;
}
@media (hover: hover){ .rd-fone:hover{border-bottom-color:var(--rd-tinta)} }
.rd-fone:focus-visible{outline:2px solid var(--logo-turquesa);outline-offset:3px}
.rd-retorno{
  margin:6px 0 0;
  font-size:11px;line-height:1.36;
  color:#8F8B84;
}

/* ----------------------------------------------------------- o divisor */
.rd-fio{
  position:relative;
  margin:clamp(26px, 3.2vw, 40px) 0 0;
  height:1px;
  background:var(--rd-fio);
  border:0;
}

/* ------------------------------------------------------------- o pé legal */
.rd-legal{
  display:flex;align-items:center;flex-wrap:wrap;
  margin:clamp(16px, 1.9vw, 22px) 0 0;
  gap:clamp(12px, 2vw, 24px);
  font-size:10.5px;line-height:1.45;
  color:var(--rd-tinta-3);
}
.rd-legal p{margin:0}
.rd-legal a{
  color:var(--rd-tinta-2);text-decoration:none;
  font-size:10px;font-weight:500;letter-spacing:.05em;
  border-bottom:1px solid transparent;
  transition:color .22s var(--e-entrada), border-color .22s var(--e-entrada);
}
@media (hover: hover){ .rd-legal a:hover{color:var(--rd-tinta);border-bottom-color:var(--rd-tinta-3)} }
.rd-legal a:focus-visible{outline:2px solid var(--logo-turquesa);outline-offset:3px}

/* ---------------------------------------------- a assinatura de quem fez
   DISCRETA (23/09/2026). A placa escura com o telefone saiu a pedido da
   cliente: era a peca mais forte de um rodape que e' dela. Agora e' texto do
   mesmo corpo da barra legal, com o nome da Yamplink um degrau acima da tinta
   em volta, e o sublinhado so' aparece no hover. */
.rd-assina{
  margin:0;
  font-size:10.5px;
  color:var(--rd-tinta-3);
}
.rd-legal .rd-assina-link{
  color:var(--rd-tinta-2);
  font-size:inherit;letter-spacing:normal;
}
.rd-assina-nome{
  font-family:"Space Grotesk","Inter",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:500;letter-spacing:-.01em;
}
@media (hover: hover){
  .rd-legal .rd-assina-link:hover{color:var(--rd-tinta);border-bottom-color:var(--rd-tinta-3)}
}

.rd-social{
  display:flex;align-items:center;gap:18px;   /* 42 entre eixos − 24 do ícone */
  margin-left:auto;
}
.rd-social a{
  display:grid;place-items:center;
  width:20px;height:20px;
  color:var(--rd-tinta-2);
  transition:color .22s var(--e-entrada), transform .22s var(--e-entrada);
}
.rd-social svg{width:20px;height:20px;display:block}
/* O TRAÇO JÁ VEM `currentColor` DE DENTRO DO SVG, e não por uma regra que pinta
   tudo. Antes havia um `.rd-social svg *{stroke:currentColor}` aqui: com um
   ícone só (o Instagram) ele passava batido, mas ele também riscava o PONTO da
   câmera, que no arquivo é preenchido e não contornado — e com três ícones na
   fileira, um deles com miolo sólido engrossado, a diferença aparece. */
@media (hover: hover){
  .rd-social a:hover{color:var(--logo-turquesa);transform:translateY(-2px)}
}
.rd-social a:focus-visible{outline:2px solid var(--logo-turquesa);outline-offset:4px;border-radius:4px}

/* ============================================================================
   CELULAR

   Duas colunas viram uma, mas o pé legal NÃO vira pilha: rodapé empilhado é
   scroll morto no fim da página, que é onde a paciência já acabou. Os alvos de
   toque seguem a mesma regra do resto do site — 44px de área onde não há
   ponteiro, por altura cravada e não por `inset` chutado.
   ========================================================================== */
/* ---- NOTEBOOK E TABLET: a marca em cima, as tres colunas uteis embaixo ----

   AQUI MORAVA O "NOTEBOOK QUE VE TUDO DESCONFIGURADO" (medido em 09/09/2026,
   com a janela em 1100px — que e' o que da' um 1366 com zoom de 125% do
   Windows, ou uma janela nao maximizada). A regra antiga jogava DUAS colunas:

       marca            faixa inteira, 879px de largura
       paginas | contato
       acao             faixa inteira -> o botao esticava para 419px

   O botao tem `white-space:nowrap` e largura de desenho (212 no arquivo). Numa
   faixa de 419 ele vira uma barra de ponta a ponta, que nao e' um botao, e' um
   campo. E o rodape saltava de 333px para 610px de altura: quase o dobro,
   exatamente na tela em que sobra menos altura.

   Tres colunas resolvem sem media query nova: a marca leva a primeira linha
   (ela tem o texto mais longo) e paginas, contato e acao dividem a segunda.
   Em 1100 cada uma fica com ~300px — o botao cabe com folga sobre os 186px de
   largura minima dele. */
/* O BREAKPOINT E' 980, E NAO 1120. Medido: em 1100 a faixa util e' 970px e as
   quatro colunas somam 844 (279 + 217 + 166 + 212 de botao, mais tres vaos de
   32). Elas cabiam com 126px de folga, e mesmo assim o layout quebrava em tres
   linhas e o rodape ia de 333 para 610px de altura. O numero antigo foi
   escolhido por parecer um breakpoint de tablet; este saiu da soma das peças. */
@media (max-width: 980px){
  .rd-topo{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:clamp(18px, 2.6vw, 30px) clamp(16px, 2.6vw, 32px);
  }
  .rd-bloco{grid-column:1 / -1}
  .rd-proposito,.rd-area{max-width:calc(560 * var(--u))}
  /* o botao nunca vira barra: teto de desenho, piso do proprio rotulo */
  .rd-botao{max-width:280px}
}

@media (max-width: 860px){
  /* O RODAPÉ CONTINUA CURTO. Ele fechava a página com 536px num 390x844 antes
     de 08/09 e caiu para 427; a reorganização em colunas rotuladas de 09/09
     acrescentou uma coluna de contato e o "onde atende", e mesmo assim a
     altura não pode voltar a subir. O que segura:
       · as páginas viram DUAS colunas de quatro linhas em vez de uma pilha de
         oito — a mesma informação em metade da altura;
       · contato e ação dividem a última faixa, lado a lado;
       · a tipografia já é de rodapé desde o desktop, então aqui ela só encosta
         no piso de leitura em vez de descer mais um degrau.
     Os 44px de alvo de toque continuam vindo do bloco `@media (hover:none)`
     lá embaixo, que independe do corpo da letra. */
  .rd{
    margin:0;border-radius:0;
    padding:clamp(24px, 5.4vw, 34px) 0 clamp(16px, 3.4vw, 22px);
  }
  .rd-dentro{padding:0 clamp(16px, 4.6vw, 28px)}
  .rd-topo{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:clamp(14px, 3.4vw, 20px) clamp(14px, 3.6vw, 22px);
  }
  .rd-bloco{grid-column:1 / -1}
  /* a coluna de páginas ocupa a faixa inteira e se divide por dentro */
  .rd-col:nth-of-type(1){grid-column:1 / -1}
  .rd-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(9px, 2.4vw, 12px) clamp(12px, 3.4vw, 20px);
  }

  /* O PISO DA LARGURA DO LOGO SAI DO ALVO DE TOQUE, nao do gosto: razao 3,5:1,
     entao 154 / 3,5 = 44 exatos. Com 150 o link ficava 1px abaixo do minimo em
     320, 360x640 e 360x800. */
  .rd-marca{width:clamp(154px, 38vw, 172px)}
  .rd-proposito{
    margin-top:clamp(9px, 2.4vw, 13px);
    font-size:clamp(12.5px, 3.3vw, 13.5px);line-height:1.45;max-width:none;
  }
  .rd-area{
    margin-top:clamp(6px, 1.8vw, 9px);
    font-size:clamp(11.5px, 3vw, 12.5px);max-width:none;
  }
  .rd-rotulo{margin-bottom:clamp(7px, 1.8vw, 10px);font-size:9.5px}
  /* o bloco da marca cede o que da' para ceder: ele e' identidade, e identidade
     nao precisa de tres alturas de texto num rodape de telefone */
  .rd-bloco{max-width:none}
  .rd-nav a{font-size:clamp(12px, 3.2vw, 13px)}
  .rd-linha{font-size:clamp(12px, 3.2vw, 13px);margin-top:clamp(6px, 1.8vw, 8px)}
  /* ITEM DE GRADE NAO ENCOLHE ABAIXO DO CONTEUDO. O `.rd-botao` tem
     `white-space:nowrap` (o rotulo nao pode quebrar no meio), entao a largura
     minima dele e' ~190px. Numa coluna de ~145px de um 320, ele empurrava a
     grade e a PAGINA INTEIRA ganhava 22px de rolagem lateral — a sonda pegou
     em 320x568 e em 360 (2px), nas tres rotas. `min-width:0` sozinho nao
     resolve, porque o conteudo continua sem poder quebrar: abaixo de 640 a
     coluna de acao passa a ocupar a faixa inteira, onde ele cabe com folga. */
  .rd-topo > *{min-width:0}
  .rd-contato{width:100%;margin-top:0}
  /* o botão para de ser peça de 212 e passa a caber na coluna, com teto para
     não virar uma barra de ponta a ponta num tablet */
  .rd-botao{max-width:300px;min-height:48px;font-size:11.5px}
  .rd-botao svg{width:16px;height:16px}
  .rd-fones{margin-top:0}
  .rd-fone{font-size:13px}
  .rd-fone i{font-size:9px}
  .rd-retorno{font-size:10.5px;margin-top:5px}
  .rd-fio{margin-top:clamp(14px, 3.4vw, 22px)}
  .rd-legal{margin-top:clamp(12px, 3vw, 18px);gap:clamp(10px, 3vw, 16px);font-size:10px}
  /* O ICONE SAI DO CANTO INFERIOR DIREITO. Medido num 430x932: ali mora o botao
     flutuante do WhatsApp, `position:fixed`, que ocupa esse canto sempre que a
     pessoa chega ao fim da pagina. O `elementFromPoint` no centro do Instagram
     devolvia `zap-glifo` — icone vivo no CSS e morto no dedo. */
  .rd-social{margin-left:0}
}

/* CONTATO E ACAO DIVIDEM A ULTIMA FAIXA ate' onde o botao cabe. Empilhar as
   duas custa ~110px de altura de rodape, e o rodape no celular tem historico:
   o cliente reclamou dele com 536px em 08/09. Com a coluna de contato ganhando
   e-mail, Instagram e um segundo telefone, o unico jeito de nao voltar aos 600
   e' as duas dividirem a linha.

   O PISO E' 480, e sai de medicao: o rotulo "FALAR NO WHATSAPP" a 11,5px mede
   ~130px, mais o icone (16), o vao (10) e o recuo (30) dao 186 de largura
   minima — e o botao tem `white-space:nowrap`. Numa tela de 480 a coluna fica
   com 216; numa de 430, com 190; numa de 390, com 170, e ai ele estoura a
   grade e a pagina inteira ganha rolagem lateral (foi o achado da sonda em
   320x568, +22px). Abaixo de 480, a acao ocupa a faixa inteira. */
@media (max-width: 480px){
  /* NO TELEFONE NADA EMPILHA SOZINHO. Em 390 o rodapé fechava em 648px porque
     as quatro colunas viravam quatro faixas de largura inteira, cada uma com o
     próprio rótulo e o próprio respiro. O cliente já reclamou desse rodapé uma
     vez, com 536px em 08/09, e desde então ele GANHOU conteúdo: um segundo
     telefone, e-mail, Instagram, mais dois links e a área de atendimento.

     A saída não é tirar conteúdo, é parar de gastar altura com faixa de uma
     coluna só. Aqui tudo o que é lista vira DUAS colunas:
       · páginas: 2 x 4 em vez de uma pilha de 8   (-104px)
       · contato: telefones ao lado de e-mail e Instagram   (-52px)
     A ação continua com a faixa inteira, porque o rótulo do botão não quebra
     (`white-space:nowrap`) e ele precisa de 186px de largura mínima. */
  .rd-contato{grid-column:1 / -1}

  .rd-col-contato{
    /* ela precisa da FAIXA INTEIRA antes de se dividir: como item da grade de
       duas colunas do rodape, ela media 163px e as duas colunas internas
       nasciam com 74 — o telefone "(11) 92373-1510" quebrava em tres linhas. */
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    column-gap:clamp(12px, 3.4vw, 20px);
    align-items:start;
  }
  .rd-col-contato .rd-rotulo{grid-column:1 / -1}
  .rd-fones{margin-top:0}
  .rd-canais{display:flex;flex-direction:column;align-items:flex-start}
  .rd-canais .rd-linha:first-child{margin-top:0}
}

@media (max-width: 480px){
  /* O CORTE ERA 420 E VIROU 480 (14/09/2026), quando a assinatura da Yamplink
     entrou na barra. Medido num 430: com "Todos os direitos reservados." no ar,
     o copyright mede 244px e os tres simbolos 168 — os dois ja' nao cabiam nos
     390 uteis, entao a barra fechava em TRES faixas (130px de altura) em vez de
     duas. Sem a frase, o copyright cai para 102 e os dois voltam a dividir a
     primeira linha, com a assinatura sozinha na de baixo. O motivo da regra nao
     mudou, so' a largura em que a linha aperta.

     AQUI O PÉ LEGAL VIRA DUAS LINHAS, e não três.
     Ele era © / e-mail / ícones, uma linha para cada, e no celular isso são
     três alturas de texto no ponto da página em que a paciência já acabou. A
     linha de direitos autorais é a única peça do rodapé que ninguém lê: em 390
     ela sozinha ocupava a largura inteira e empurrava tudo para baixo.
     "Todos os direitos reservados." sai só abaixo de 480 — o "© 2026 Colors
     Lazer." fica, que é o que tem valor jurídico, e sobra largura para o e-mail
     subir para a mesma linha. Os ícones ficam com a linha de baixo inteira,
     porque cada um deles é um alvo de 44px. */
  .rd-legal{row-gap:10px}
  .rd-legal p{flex:0 1 auto}
  .rd-direitos{display:none}
  /* OS ICONES VOLTAM PARA A LINHA DO COPYRIGHT. Eles ganhavam a faixa inteira
     (44px de altura so' para tres simbolos) quando o pe' legal tinha tres
     pecas: direitos, e-mail e icones. O e-mail subiu para a coluna de contato
     e "Todos os direitos reservados" ja' sai abaixo de 480 — sobra "© 2026
     Colors Lazer." (~120px) e os tres alvos de 44 (~164px), que cabem juntos
     em 358 de largura util num 390. Medido, nao chutado. */
  .rd-social{flex:0 0 auto;margin-left:auto}
  /* A ASSINATURA DESCE PARA UMA LINHA PROPRIA, depois do copyright e dos
     simbolos, por `order` (no HTML a ordem do desktop e' a certa). Ate'
     23/09/2026 ela era uma faixa escura sangrando de ponta a ponta; saiu junto
     com a placa do desktop, a pedido da cliente. `.rd-legal .rd-assina` e nao
     `.rd-assina` porque `.rd-legal p` tem `flex:0 1 auto` e ganharia. */
  /* O ESPACO DO BOTAO FLUTUANTE. A faixa antiga ocupava o fim da pagina e,
     sem querer, mantinha os simbolos acima do botao do WhatsApp (56px + 16 de
     folga, `position:fixed`). Sem ela os simbolos desceram para debaixo dele.
     O recuo reserva a altura do botao abaixo da assinatura. */
  .rd-legal .rd-assina{order:3;flex:0 0 100%;padding-bottom:64px}
  .rd-social{order:2}
}

@media (hover: none){
  /* DUAS REGRAS DIFERENTES, porque os dois grupos de link tem naturezas
     diferentes — e a sonda mostrou o preco de tratar os dois igual: com area de
     44px em todos, o `elementFromPoint` no centro do telefone devolvia o link
     de BAIXO em tres rotas (o pseudo do vizinho cobria o alvo). Area maior que
     o vao nao e' alvo maior, e' alvo roubado.

     · CONTATO (telefones, e-mail, Instagram): altura REAL de 44. E' onde o dedo
       vai de verdade, e altura real nao sobrepoe ninguem.
     · MAPA DO SITE: area por `::after`, com a extensao em METADE do vao, que e'
       o maximo que cabe sem invadir a linha vizinha. */
  .rd-fone,
  .rd-linha{
    display:flex;align-items:center;
    min-height:44px;margin-top:0;
  }
  .rd-canais .rd-linha{margin-top:0}
  .rd-fones{gap:0;margin-top:clamp(6px, .8vw, 10px)}

  .rd-nav{gap:14px 20px}
  .rd-nav a,
  .rd-legal a{position:relative}
  .rd-nav a::after,
  .rd-legal a::after{
    content:"";position:absolute;display:block;
    left:-8px;right:-8px;top:-7px;bottom:-7px;
  }
  .rd-social a{width:44px;height:44px}
  /* A ASSINATURA SEGUE A REGRA DO CONTATO, e nao a do mapa do site: altura
     REAL de 44, sem `::after`. A area estendida do pe' legal (-8 nos lados)
     encostaria na fileira social, que divide a barra com ela — e area que
     invade vizinho e' alvo roubado, que foi o que a sonda pegou em 09/09. */
}

@media (prefers-reduced-motion: reduce){
  .rd-nav a,.rd-botao,.rd-fone,.rd-legal a,.rd-social a{transition-duration:.01ms}
}