nativo, com o desenho do acordeão da home.
Página nova não precisa de JS para abrir uma pergunta, e assim o texto
está no HTML mesmo se o script falhar, o que também é melhor para busca. --- */
.faq-l{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line);transition:background-color 200ms ease}
@media(hover:hover) and (pointer:fine){.faq-i:hover{background:var(--ink-2)}}
.faq-i summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:66px 1fr auto;
align-items:center;gap:20px;padding:26px 6px}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary .n{font-family:var(--mono);font-size:var(--m2);letter-spacing:var(--m2-ls);color:var(--gold-txt)}
.faq-i summary .q{font-family:var(--sans);font-weight:700;font-stretch:118%;
font-size:clamp(17px,1.75vw,21px);letter-spacing:-.022em;line-height:1.25;transition:translate 220ms var(--ease)}
@media(hover:hover) and (pointer:fine){.faq-i:hover summary .q{translate:8px}}
.faq-i .sinal{position:relative;width:15px;height:15px;flex:none;color:var(--gold-txt)}
.faq-i .sinal::before,.faq-i .sinal::after{content:"";position:absolute;background:currentColor;transition:transform 260ms var(--ease)}
.faq-i .sinal::before{left:0;top:7px;width:15px;height:1px}
.faq-i .sinal::after{top:0;left:7px;height:15px;width:1px}
.faq-i[open] .sinal::after{transform:rotate(90deg)}
.faq-i .a{padding:0 6px 30px;max-width:80ch}
.faq-i .a p{font-size:var(--s3);color:var(--gray);line-height:1.6}
.faq-i .a p+p{margin-top:12px}
@media(max-width:700px){.faq-i summary{grid-template-columns:1fr auto;gap:14px}.faq-i summary .n{display:none}}
/* --- nota: o aviso que muda a conta do cliente --- */
.nota{border:1px solid var(--gold-dim);border-left:3px solid var(--gold);border-radius:4px;
padding:clamp(20px,2.2vw,28px);background:rgba(255,176,32,.05)}
.nota h3{font-family:var(--sans);font-weight:700;font-stretch:118%;font-size:19px;letter-spacing:-.02em;margin-bottom:8px}
.nota p{font-size:var(--s2);color:var(--bone-2);line-height:1.55;max-width:76ch}
.nota p+p{margin-top:10px}
.nota a{color:var(--gold-txt);border-bottom:1px solid var(--gold-dim)}
/* --- números da plataforma. Só entram com a fonte declarada: são da Ubli, não
nossos, e número sem atribuição em site de parceiro é problema. --- */
.num-g{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
@media(max-width:760px){.num-g{grid-template-columns:repeat(2,1fr)}}
.num-c{border-top:1px solid var(--line);padding-top:16px}
.num-c b{display:block;font-weight:800;font-stretch:118%;font-size:clamp(26px,3vw,40px);
letter-spacing:-.04em;line-height:1;color:var(--gold-txt)}
.num-c span{display:block;font-family:var(--mono);font-size:var(--m2);letter-spacing:var(--m2-ls);
text-transform:uppercase;color:var(--gray);margin-top:7px}
.num-fonte{font-family:var(--mono);font-size:var(--m1);letter-spacing:.06em;color:var(--gray);margin-top:20px}
/* --- passos numerados (como a IA aprende, como conectar) --- */
.pas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);counter-reset:pas}
@media(max-width:860px){.pas{grid-template-columns:1fr;gap:26px}}
.pas-i{counter-increment:pas;position:relative;padding-top:22px;border-top:1px solid var(--line-2)}
.pas-i::before{content:counter(pas,decimal-leading-zero);font-family:var(--mono);font-size:var(--m2);
letter-spacing:.14em;color:var(--gold-txt);display:block;margin-bottom:14px}
.pas-i h3{font-family:var(--sans);font-weight:700;font-stretch:118%;font-size:clamp(18px,1.9vw,22px);
letter-spacing:-.025em;line-height:1.16;margin-bottom:10px}
.pas-i p{font-size:var(--s2);color:var(--gray);line-height:1.6}
/* --- grade de canais do CRM. As cores de marca dos canais são preservadas de
propósito: ali a cor não é enfeite, é identificação. --- */
.can{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.can{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.can{grid-template-columns:1fr}}
.can-c{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:10px;
padding:15px 17px;background:var(--ink);transition:border-color 200ms ease}
@media(hover:hover) and (pointer:fine){.can-c:hover{border-color:var(--line-2)}}
.can-c svg{width:21px;height:21px;flex:none}
.can-c b{display:block;font-family:var(--sans);font-weight:700;font-stretch:118%;font-size:15.5px;letter-spacing:-.02em}
.can-c span{display:block;font-family:var(--mono);font-size:var(--m1);letter-spacing:.06em;
text-transform:uppercase;color:var(--gray);margin-top:3px}
/* --- entrada dos blocos nas páginas de produto ---
Na home a entrada é feita pelo GSAP com ScrollTrigger. Aqui não, e o motivo é
concreto: medido nesta sessão, 18 blocos (9 recursos, 6 casos de uso, 3 passos)
ficaram com opacity 0 porque o ScrollTrigger não disparou, e a página inteira
leu como vazia. Conteúdo não pode depender de animação para existir, e um
buscador que renderiza a página vê exatamente o que o olho vê.
Agora quem revela é o IntersectionObserver, que responde a layout e não a
frames de animação, a transição é CSS (roda fora da thread principal) e o JS
só aplica a classe que esconde SE o observador existir. Ainda há um seguro de
1,5s no pagina.js: se havia bloco na tela e nenhum foi revelado, revela tudo.
Animação perdida é irrelevante; conteúdo invisível não é. */
/* TÍTULO NUNCA ESCONDE. O recorte que abre da esquerda para a direita ficou
bonito na home, mas aqui ele custou caro: dependia do IntersectionObserver
disparar, e quando não disparou o usuario viu cinco secoes com o eyebrow
sozinho e nenhum titulo, duas vezes. Medido: clip-path fechado em 5 de 5.
Nenhuma animacao vale um titulo invisivel. O h2 e o texto entram estaticos, e
o movimento da secao fica nos cartoes (que tem seguro) e no filete do eyebrow,
cujo pior caso e um tracinho decorativo nao aparecer. */
.js .rvi,.js .h2.rvi{opacity:1;transform:none;clip-path:none}
/* REGRA DESTE PROJETO, aprendida errando várias vezes hoje: o estado FINAL é o
padrão, e a animação é bônus. Nada nasce escondido esperando um observador.
Antes o CSS punha o filete em width:0 e esperava a classe .vis; medido, rolando
a página inteira só 2 de 4 filetes abriram na home e 0 de 5 na página da API,
porque ScrollTrigger e IntersectionObserver falham de forma inconsistente
dependendo de como o navegador está compondo frames. O resultado eram cabeçalhos
sem o tracinho, que foi o que ele viu nos prints.
Com @keyframes o pior caso inverte: se o .vis nunca chegar, o filete simplesmente
está lá, do tamanho certo. Se chegar, ele cresce de zero. */
@keyframes filete{from{width:0}to{width:28px}}
/* O recorte que abre da esquerda para a direita, o mesmo gesto que abre a palavra
INFOHUB no preloader. Ele gostou ("parece meio embaralhando as letras e depois
fica legível") e pediu para usar nas outras páginas.
Aqui ele volta pela via segura: o título está visível por padrão e o keyframe só
entra quando o cabeçalho é avisado. Se o aviso não vier, o pior caso é um título
aparecendo sem gesto, e nunca mais um título invisível. */
/* A folga negativa embaixo não é detalhe: clip-path corta na caixa do elemento, e
o .h2 tem line-height .94, então a descendente do g, do p e do q fica FORA da
caixa e era decepada. Ele viu no "Perguntas.". -0.3em embaixo, -0.15em em cima
(acento) e -0.1em à direita (itálico e ponto final). */
/* TUDO EM PORCENTAGEM, e isso não é preferência: misturar 100% com -.1em fez o
navegador virar a interpolação num salto discreto. Medido, o lado direito ficou
seis amostras seguidas em 100% e pulou direto para 0%, ou seja o título ficava
parado e aparecia de uma vez. Era o "parece que tá bugando".
As folgas negativas continuam existindo pelo mesmo motivo de antes (o clip corta
na caixa e o line-height .94 deixa a perna do g para fora), agora em % da caixa. */
@keyframes recorta{
from{clip-path:inset(-14% 100% -26% 0)}
to{clip-path:inset(-14% -2% -26% 0)}
}
/* O cabeçalho de seção é CENTRALIZADO, e num texto centralizado um recorte que
abre da esquerda para a direita faz a palavra crescer para fora do eixo: lê como
defeito, e foi o que ele apontou duas vezes. Aqui o recorte abre do centro para
os dois lados, no mesmo eixo em que o texto está. O gesto continua sendo o mesmo
vocabulário do logo, só na direção certa para este bloco.
O `recorta` lateral fica guardado para título alinhado à esquerda, se um dia
existir. */
@keyframes recortaCentro{
from{clip-path:inset(-14% 50% -26% 50%)}
to{clip-path:inset(-14% -2% -26% -2%)}
}
.js .cab.vis .h2{animation:recortaCentro 1.05s var(--ease) both}
.js .cab.vis .eyebrow::before{animation:filete 700ms var(--ease) 80ms both}
/* mesma inversão dos filetes: o cartão existe, e quem anima é o keyframe quando
o observador avisa. Antes eram 18 blocos capazes de ficar invisíveis. */
/* A entrada animada dos cartões SAIU em 05/08/2026. Passou por transição, por
keyframes, por 750ms, por 420ms, por gatilho antecipado, e ele reprovou todas:
"aparecendo travando", "parece que tá bugando tudo". A medição fechou o caso:
rolando a página, em 62 de 110 frames havia cartão dentro da tela ainda
transparente (pico de 9 juntos), e desligando isso foi para zero em todos os
frames, com o mesmo FPS de 60. Cartão aparece pronto.
Se um dia voltar o assunto: o problema não é a duração, é a ideia de esconder
conteúdo que a pessoa já está olhando. */
@media (prefers-reduced-motion:reduce){
.js .rvi,.js .h2.rvi{opacity:1;transform:none;clip-path:none;animation:none}
.js .cab.vis .eyebrow::before{animation:none;width:28px}
.js .cab.vis .h2{animation:none;clip-path:none}
}
/* Alvo de toque nos links das páginas de produto. Medido em 390px: o "INFOHUB"
da trilha, o link do CRM dentro da nota e o da documentação saíam com 17 e 18px
de altura. Cresce por padding, não por corpo de fonte: a letra continua igual e
só a área do dedo aumenta. Mesma conta que já foi feita no rodapé da home. */
@media(max-width:900px){
.bread a,.nota a,.num-fonte a,.pl-ia a,.faq-i .a a,.addon-nota a,.seg-b a{display:inline-block;padding-block:8px}
.faq-i summary{padding:22px 6px}
}
/* ============================================================================
JANELA DE DEMONSTRAÇÃO, VERSÃO GRANDE
----------------------------------------------------------------------------
O hero da API começou com dois painéis de código, depois código mais uma bolha,
e ele reprovou as duas: "não sei porque você não fez parecido com o do willian
e colocou um código". Estava certo. Numa página que precisa vender, a janela de
conversa mostra o produto para qualquer pessoa; o código só fala com quem já
decidiu integrar, e por isso desceu para uma seção própria embaixo.
Esta versão é a janela da home crescida: avatar com cor de verdade, quatro
mensagens, indicador de digitação e o selo flutuante fora da área de conversa,
porque em cima dela ele cobria mensagem, que foi o "tá tudo quebrado".
========================================================================== */
/* o selo flutuante "Webhook de volta" existia aqui embaixo e saiu: ele achou
enfeitado demais, e a janela já conta a história sozinha. Sem selo, sem padding. */
.demo{position:relative}
.demo .chat{max-width:none}
.demo .chat-b{height:340px;gap:10px}
@media(max-width:980px){.demo .chat-b{height:300px}}
/* avatar com cor. Era um ícone cinza em cima de cinza e lia como espaço vazio:
"se for colocar cliente ao menos coloque uma foto ou algo colorido na fotinha".
Gradiente âmbar com o monograma do negócio, que é o que um CRM mostra de fato. */
.av-cor{background:linear-gradient(145deg,#FFD07A,#E8973A 62%,#CF8022)!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 6px 16px -6px rgba(255,176,32,.5)!important;
display:grid;place-items:center}
.av-cor b{font-family:var(--sans);font-weight:800;font-stretch:118%;font-size:15px;
letter-spacing:-.03em;color:#25150A}
.chat-h .chat-av.av-cor::after{background:#25D366;box-shadow:0 0 0 2px var(--ink-2)}
/* etiqueta de origem da mensagem: diz que aquela bolha saiu do sistema, não de
uma pessoa digitando. É o argumento da página dentro do mock. */
.chat-org{align-self:flex-end;display:flex;align-items:center;gap:6px;margin-bottom:-4px;
font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--gray);opacity:0;transition:opacity 400ms var(--ease)}
.chat-org.vis{opacity:1}
.chat-org svg{width:11px;height:11px;color:var(--gold-txt);flex:none}
/* seção da chamada, onde o código foi morar */
/* min-width:0 nos filhos não é detalhe: item de grid tem min-width:auto por
padrão e se recusa a encolher abaixo do próprio conteúdo. O do painel de
código tem uma linha de curl bem mais larga que 360px, e mesmo com overflow-x
no pre era o GRID que crescia e empurrava a página. Medido em 360px: a página da
API rolava 17px na horizontal, e a home e a do CRM não rolavam nada. */
.chamada-g{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,3.6vw,54px);align-items:center}
.chamada-g>*{min-width:0}
.code{min-width:0;max-width:100%}
@media(max-width:940px){.chamada-g{grid-template-columns:1fr;gap:30px}}
.code-l{display:block;border-radius:4px;margin:0 -6px;padding:0 6px;
transition:background-color 260ms ease,box-shadow 260ms ease}
.code.run .code-l{background:rgba(255,176,32,.13);box-shadow:inset 0 0 0 1px rgba(255,176,32,.22)}
.code-st{margin-left:auto;display:inline-flex;align-items:center;gap:7px;flex:none;color:var(--gray);
transition:color 200ms ease}
.code-st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gray);flex:none;
transition:background-color 200ms ease}
.code.run .code-st{color:var(--gold-txt)}
.code.run .code-st::before{background:var(--gold);animation:pulsa 1s infinite}
.code.ok .code-st{color:#7FCB92}
.code.ok .code-st::before{background:#7FCB92;animation:none}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
.chat-org{opacity:1;transform:none}
}
/* cliente digitando na esquerda (na home é a IA, na direita) */
.chat-typ.esq{align-self:flex-start;border-bottom-right-radius:14px;border-bottom-left-radius:4px;
background:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.chat-typ.esq i{background:var(--gray)}
/* seguro: a bolha nasce invisível no CSS e quem revela é o JS. Enquanto o JS não
assumir (classe .pronto), tudo fica visível. */
.demo .chat:not(.pronto) .chat-msg,.demo .chat:not(.pronto) .chat-org{opacity:1;transform:none}
/* ============================================================================
PÁGINA DO CRM
========================================================================== */
/* cinco nichos em grade de seis colunas: três na primeira linha (span 2) e dois
na segunda ocupando metade cada (span 3). Sem cartão órfão sobrando. */
.seg-5{grid-template-columns:repeat(6,1fr)}
.seg-5>*{grid-column:span 2}
.seg-5>*:nth-child(4),.seg-5>*:nth-child(5){grid-column:span 3}
@media(max-width:940px){
.seg-5{grid-template-columns:repeat(2,1fr)}
.seg-5>*,.seg-5>*:nth-child(4),.seg-5>*:nth-child(5){grid-column:span 1}
}
@media(max-width:640px){.seg-5{grid-template-columns:1fr}}
/* as cores dos cinco nichos são as mesmas dos casos de uso da API e vêm das regras
.seg-c:nth-child() lá de cima. Duplicar aqui só criaria dois lugares para mudar. */
/* amostra de conversa dentro do cartão do nicho. É o que prova o argumento do
cartão em duas linhas, no lugar de mais um parágrafo dizendo a mesma coisa. */
.seg-ex{margin-top:18px;border-top:1px solid var(--line);padding-top:15px;display:grid;gap:8px}
.seg-ex-t{font-family:var(--mono);font-size:var(--m1);letter-spacing:.1em;text-transform:uppercase;
color:var(--gray);display:flex;align-items:center;gap:7px;margin-bottom:2px}
.seg-ex-t svg{width:12px;height:12px;color:var(--gold-txt);flex:none}
.seg-ex p{font-size:13.5px;line-height:1.45;border-radius:11px;padding:9px 12px;max-width:92%}
.seg-ex .q{align-self:start;background:var(--ink-3);color:var(--bone-2);border-bottom-left-radius:3px;
box-shadow:inset 0 0 0 1px var(--line)}
.seg-ex .a{align-self:end;background:rgba(255,176,32,.12);color:var(--bone);border-bottom-right-radius:3px;
box-shadow:inset 0 0 0 1px rgba(255,176,32,.26)}
/* tabela de planos: o CRM tem três, e o que decide a compra é o limite, não a
lista de recursos. O bloco de limites vem antes da lista, em mono. */
.pl-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);align-items:stretch}
@media(max-width:980px){.pl-3{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
/* aviso de IA dentro do cartão do plano: é a armadilha que o cliente descobre
tarde se a gente não contar aqui. */
.pl-ia{font-size:12.5px;line-height:1.45;color:var(--gold-txt);background:rgba(255,176,32,.08);
border:1px solid rgba(255,176,32,.26);border-radius:7px;padding:9px 11px;margin-bottom:18px}
.pl-ia a{border-bottom:1px solid var(--gold-dim)}
/* período de pagamento com desconto */
.per{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:clamp(26px,3vw,38px)}
.per-i{border:1px solid var(--line-2);border-radius:100px;padding:9px 18px;
font-family:var(--mono);font-size:var(--m2);letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.per-i b{color:var(--gold-txt);font-weight:500}
/* --- abertura da logo do cabeçalho ---
A palavra começa lendo IHUB e se abre em INFOHUB. É o gesto que marca a troca de
página.
DUAS COISAS QUE ERREI ANTES E ESTÃO RESOLVIDAS AQUI:
1. Piscava. A logo nascia inteira no primeiro quadro e só depois o JS (esperando
document.fonts.ready) aplicava a classe, que recolhia para IHUB e abria de
novo: INFOHUB, IHUB, INFOHUB. Agora quem mede é um script síncrono logo
depois da nav, que roda ANTES do primeiro quadro, então o estado inicial
nunca aparece como um segundo passo.
2. Dependia de tween. Com gsap.set o NFO nascia recortado e um tween que não
completasse deixava "IHUB" para sempre. Aqui é @keyframes: sem a marcação do
script, a palavra simplesmente está inteira.
O deslize do HUB é consequência, não animação separada: o NFO cresce de max-width
zero com overflow hidden, e o HUB, que está no fluxo depois dele, é empurrado.
Uma propriedade só, e os dois pedaços ficam perfeitamente em sincronia, o que
antes exigia duas animações com a mesma curva e a mesma duração.
+2px na largura final é folga: o script mede com a fonte que estiver disponível
no momento, e se a Archivo entrar depois a métrica muda um fio. */
@keyframes logoAbre{
from{max-width:0}
to{max-width:calc(var(--nfo-w,4ch) + 2px)}
}
.nav-mark[data-medido] [data-nfo]{display:inline-block;overflow:hidden;vertical-align:top}
.js .nav-mark[data-medido] [data-nfo]{
animation:logoAbre .95s cubic-bezier(.25,.46,.45,.94) .12s both;
}
@media (prefers-reduced-motion:reduce){
.js .nav-mark[data-medido] [data-nfo]{animation:none;max-width:none}
}
/* ============================================================================
DIVISÃO DE RESPONSABILIDADE: o que é da Ubli e o que é da INFOHUB
----------------------------------------------------------------------------
Entrou em 06/08/2026, pedido do Willian depois de ver o site: a Ubli aparecia
uma vez só na home inteira, no descritor da logo, e quem assinasse ia dar de
cara com a marca dela no painel sem nunca ter lido isso aqui.
O problema não era quantidade de Ubli, era o LUGAR. Espalhar a marca pelo site
faz o cliente ir comprar direto lá; esconder faz ele se sentir enganado na
assinatura. Então a marca aparece uma vez, com calma, na seção que já se chama
"a plataforma", e mais uma linha na hora de escolher o plano.
E aparece enquadrada como divisão de trabalho, não como aviso legal: quem
descobre sozinho pergunta "então por que não vou direto?" sem ninguém por
perto para responder. Quem lê aqui já recebe a resposta junto da pergunta.
Nenhum dos textos usa "parceria" nem "revenda": ele decidiu em 06/08 que a
INFOHUB não se apresenta assim. Descrever o que cada empresa faz é fato, e
não rótulo de relação comercial.
============================================================================ */
.quem{
display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:clamp(30px,4vw,44px);
}
@media(max-width:820px){.quem{grid-template-columns:1fr}}
.quem-c{background:var(--ink);padding:clamp(24px,3vw,34px)}
.quem-c.nos{background:var(--ink-2)}
.quem-t{
font-family:var(--mono);font-size:var(--m2);letter-spacing:var(--m2-ls);text-transform:uppercase;
color:var(--gold-txt);display:flex;align-items:center;gap:9px;margin-bottom:14px;
}
.quem-t svg{width:15px;height:15px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.quem-c h3{font-family:var(--sans);font-weight:700;font-stretch:118%;
font-size:clamp(19px,2vw,23px);letter-spacing:-.02em;line-height:1.15;margin-bottom:12px}
.quem-c > p{font-size:var(--s2);color:var(--gray);line-height:1.55;margin-bottom:14px}
.quem-l{list-style:none;display:grid;gap:9px}
.quem-l li{display:flex;gap:10px;font-size:var(--s2);color:var(--bone-2);line-height:1.45}
.quem-l li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-dim);
flex:none;margin-top:8px}
.quem-nota{margin-top:26px;font-size:var(--s2);color:var(--bone-2);line-height:1.6;
max-width:74ch;border-left:2px solid var(--gold-dim);padding-left:16px}
.quem-nota b{color:var(--bone);font-weight:600}
/* a mesma informação em uma linha, para o instante anterior à assinatura */
.selo-ubli{
display:flex;align-items:flex-start;gap:12px;margin-top:26px;padding:14px 16px;
border:1px solid var(--line);border-radius:3px;background:var(--ink-2);max-width:66ch;
}
.selo-ubli svg{width:18px;height:18px;color:var(--gold-txt);flex:none;margin-top:1px;
stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.selo-ubli p{font-size:var(--s1);color:var(--bone-2);line-height:1.5;margin:0}
.selo-ubli b{color:var(--bone);font-weight:600}
/* Isenção de afiliação no rodapé das três páginas comerciais. Discreta de
propósito: é declaração legal, não argumento de venda, e precisa estar
legível sem competir com o resto. Medido: 5,93 de contraste, acima do mínimo
de 4,5. */
.foot-isencao{
font-size:var(--s1);color:var(--gray);line-height:1.5;max-width:78ch;
margin:0 0 22px;padding-top:22px;border-top:1px solid var(--line);
}