/* ==========================================================================
Future Partner — a página
Carregada só por future-partner.html, depois de vazto.css. Tokens,
tipografia, botões e chãos vêm de lá; o cabeçalho e o rodapé são os
componentes globais e trazem as suas folhas.
O RITMO
--------------------------------------------------------------------------
hero escuro, com a rede em canvas
oportunidades claro
como funciona teal
o que você ganha claro
como participar escuro
ganho recorrente claro
radar de sinais teal
kit claro
o fecho escuro
cadastro claro
rodapé escuro
Nunca três chãos seguidos iguais, e cada bloco muda de LINGUAGEM e não só
de cor: rede, sinais, fluxo, composição editorial, continuum, vínculo no
tempo, radar, pilha de materiais, formulário. Resolver dez secções com
dez grelhas de cartões é o que faz uma landing page parecer um template.
O QUE ESTA PÁGINA NÃO USA, de propósito
--------------------------------------------------------------------------
A montra de produtos, a régua das seis etapas e o diagrama dos cinco
objetivos. São peças de outras páginas com outro assunto — reaproveitá-las
aqui faria de um programa de parcerias mais um produto.
========================================================================== */
:root{
/* O tom mais fundo da paleta, para os chãos escuros desta página. */
--fp-fundo:#02131b;
/* O PETRÓLEO.
O `--grad-teal` do sistema é um verde médio: sobre ele o ciano perde
força, o glow não tem para onde crescer e as duas secções que dependem
de luz — o fluxo e o radar — ficavam lavadas.
Este é o mesmo teal levado ao fundo da escala, com um halo de ciano no
topo. Não substitui o `--grad-dark` das modalidades: aquele é acinzentado
e este é verde, e é a diferença entre os dois que impede três chãos
escuros seguidos de se lerem como um só. */
--fp-petroleo:
radial-gradient(78% 104% at 50% -4%, rgba(7,210,210,.14), transparent 62%),
linear-gradient(170deg,#05272d 0%,#04181e 54%,#020e13 100%);
}
/* ==========================================================================
1 · HERO
========================================================================== */
.fp-hero{
position:relative; overflow:hidden;
padding-block:calc(var(--mast) + clamp(44px,5vw,72px)) clamp(52px,6vw,84px);
min-block-size:clamp(520px,72vh,720px);
display:grid; align-content:center;
color:var(--on-dark);
background:var(--fp-fundo);
}
/* A ARTE VIVE NUM CONTENTOR, e a posição dele é o interruptor entre as duas
versões do hero — o script lê-a em vez de repetir o ponto de quebra.
Aqui, no desktop, é absoluta: cobre a secção e o texto passa por cima. */
.fp-hero__arte{
position:absolute; inset:0; z-index:0; pointer-events:none;
}
.fp-hero__fundo{
inline-size:100%; block-size:100%; display:block;
}
.fp-hero__veu{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg,transparent 64%,rgba(1,10,16,.6) 100%);
}
.fp-hero__in{
position:relative; z-index:2;
max-inline-size:min(640px, 60%);
}
.fp-hero .kicker{
color:#d6fdfd;
/* O nome do programa é o kicker, e por isso leva mais peso do que um
kicker normal: é ele o título da página, e o `h1` é o subtítulo. */
font-size:13px; letter-spacing:.24em;
}
.fp-hero__t{
margin-block-start:14px;
font-family:var(--display); font-weight:700; letter-spacing:-.03em;
font-size:clamp(31px,4.4vw,52px); line-height:1.05; color:#fff;
}
.fp-hero__t em{ font-style:normal; color:var(--cyan) }
.fp-hero__intro{
margin-block-start:clamp(18px,2.2vw,24px); max-inline-size:44ch;
font-size:clamp(15.5px,1.7vw,17.5px); line-height:1.58; color:var(--on-dark-soft);
}
/* A frase forte do documento. É o argumento da página inteira e tem de o
parecer — mas sem chegar ao corpo do título, que continua a mandar. */
.fp-hero__forte{
margin-block-start:clamp(18px,2.2vw,26px); max-inline-size:32ch;
font-family:var(--display); font-weight:600; letter-spacing:-.02em;
font-size:clamp(18px,2.1vw,25px); line-height:1.28; color:var(--cyan-lit);
padding-inline-start:clamp(14px,1.6vw,20px);
border-inline-start:2px solid rgba(7,210,210,.5);
}
.fp-hero__apoio{
margin-block-start:clamp(14px,1.6vw,18px); max-inline-size:46ch;
font-size:clamp(14.5px,1.6vw,16px); line-height:1.56; color:rgba(241,247,247,.7);
}
.fp-hero .actions{ margin-block-start:clamp(24px,2.8vw,32px) }
/* ==========================================================================
O HERO NO TELEMÓVEL — uma versão própria, não o desktop comprimido
O que estava errado: a arte cobria a secção inteira e o texto ficava por
cima dela. Num ecrã estreito o texto ocupa quase toda a área, a zona de
silêncio apaga a rede à volta dele, e o que sobra da ilustração é um
resto no rodapé da secção. A identidade da abertura evaporava-se.
A ordem passa a ser CONTEÚDO → CTA → ILUSTRAÇÃO, e a ilustração tem área
própria: entra no fluxo, com altura declarada e sem nada por cima. Mudar
`position` para `static` é também o que diz ao script que não há texto a
proteger — e é por isso que lá a rede aparece inteira, centrada e maior.
O fundo é o MESMO da secção, e a arte não leva moldura nem raio: a ideia
é uma área do hero, não um cartão com um desenho lá dentro.
========================================================================== */
@media (max-width:900px){
.fp-hero{
min-block-size:0;
display:block;
/* O RESPIRO SOB A BARRA. `--mast` paga a altura da barra fixa; o que se
soma a seguir é folga, e era de 30 a 44px — que somados ao espaço
próprio do eyebrow davam 58px de faixa vazia antes da primeira
palavra. Numa primeira tela de 844px isso é sete por cento do ecrã a
não dizer nada.
Medido depois: 38px de folga a 390. Continua a não encostar à barra e
devolve vinte pixéis à leitura. */
padding-block:calc(var(--mast) + clamp(10px,2.4vw,18px)) 0;
}
.fp-hero__in{ max-inline-size:100% }
.fp-hero__veu{ display:none }
.fp-hero__arte{
position:static;
margin-block-start:clamp(26px,7vw,40px);
block-size:clamp(280px,72vw,380px);
/* O topo esbatido cose a arte ao texto: sem ele há uma aresta onde o
canvas começa, e a secção parte-se em dois blocos. */
mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 100%);
}
.fp-hero__t{ font-size:clamp(30px,8.4vw,42px) }
.fp-hero__intro{ max-inline-size:100% }
.fp-hero__forte{ max-inline-size:100%; font-size:clamp(17px,4.8vw,21px) }
.fp-hero__apoio{ max-inline-size:100% }
.fp-hero .actions .btn{ inline-size:100%; justify-content:center }
}
/* O cabeçalho de secção, partilhado. */
.fp-head{ margin-block-end:clamp(30px,3.6vw,46px) }
.fp-head .h2 em{ font-style:normal }
/* ==========================================================================
2 · AS OPORTUNIDADES DO DIA A DIA — o mosaico editorial
A versão anterior eram seis linhas de texto com um losango à frente. Lia-
se, mas não MOSTRAVA nada: seis situações que a pessoa devia reconhecer de
relance ficavam a depender inteiramente de quatro palavras cada.
Passam a ser seis ladrilhos com imagem — 3 + 3 —, na mesma família dos
setores da página Go-to-Market: fotografia a sangrar, véu por cima para o
texto se ler sempre, número em pastilha, título e uma linha de descrição.
TRÊS EM CADA FILA, e não `auto-fit`: com encaixe automático, a 1440
cabiam quatro e as seis ficavam 4+2, com dois buracos à direita. O
briefing pede 3+3 e é uma composição, não um resultado do acaso.
As fotografias ainda não existem. Por baixo de cada `` está a cena
desenhada de `parceiro-cenas.js`; quando os ficheiros chegarem a
`assets/img/parceiro/`, cobrem-na sem mais nada a fazer.
========================================================================== */
.fp-op-sec{
position:relative; overflow:hidden;
padding-block:clamp(48px,5.6vw,76px);
background:var(--grad-tint);
}
.fp-ops{
display:grid; gap:clamp(10px,1.2vw,16px);
grid-template-columns:minmax(0,1fr);
}
/* Tablet: duas colunas. Seis por dois são três filas cheias — nunca sobra
um ladrilho sozinho na última. */
@media (min-width:600px){ .fp-ops{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:940px){ .fp-ops{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.fp-op{
position:relative; overflow:hidden; isolation:isolate;
display:flex; align-items:flex-end;
min-block-size:clamp(200px,20vw,258px);
border-radius:clamp(14px,1.6vw,20px);
/* O fundo da marca é o estado base, não um remendo: mesmo sem fotografia
e sem cena, o ladrilho tem cor e profundidade próprias. */
background:linear-gradient(155deg,#04656d 0%,#023f46 48%,#02171c 100%);
box-shadow:0 0 0 1px rgba(7,210,210,.2), 0 18px 36px -26px rgba(2,67,72,.9);
transition-delay:calc(var(--i) * 60ms);
}
.fp-op__foto{
position:absolute; inset:0; z-index:0;
inline-size:100%; block-size:100%; object-fit:cover;
transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){ .fp-op:hover .fp-op__foto{ transform:scale(1.05) } }
/* A CENA DESENHADA. Fica no mesmo plano da fotografia e é irmã seguinte
dela — quando o `` existe, este selector deixa de casar e a cena
desaparece sozinha. Quando o `onerror` remove o ``, volta.
É o mesmo mecanismo dos setores do Go-to-Market, e pela mesma razão: sem
ele, o desenho pintava por cima da fotografia. */
.fp-op__foto + .fp-op__arte{ display:none }
.fp-op__arte{
position:absolute; inset:0; z-index:0; display:grid; place-items:center;
background-image:repeating-linear-gradient(135deg,rgba(7,210,210,.06) 0 2px,transparent 2px 16px);
}
.fp-op__arte .fp-cena{
inline-size:min(84%,300px); block-size:auto;
/* A cena sobe um pouco: o texto ocupa o terço de baixo, e um desenho
centrado no ladrilho ficava metade tapado pelo véu. */
margin-block-end:clamp(38px,5vw,56px);
opacity:.72;
}
/* O véu. Sem ele o texto depende do que estiver na fotografia, e o que
estiver na fotografia não se controla daqui. */
.fp-op::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(0deg,rgba(1,18,22,.93) 0%,rgba(1,18,22,.6) 36%,rgba(1,18,22,.14) 70%,transparent 100%);
}
.fp-op__c{ position:relative; z-index:2; inline-size:100%; padding:clamp(16px,1.8vw,22px) }
.fp-op__n{
display:inline-block; margin-block-end:9px; padding:3px 9px; border-radius:100px;
font-family:var(--display); font-weight:700; font-size:11px; color:#02272c;
background:linear-gradient(160deg,var(--cyan-lit),var(--cyan));
}
.fp-op__t{
font-family:var(--display); font-weight:700; letter-spacing:-.02em;
font-size:clamp(16px,1.8vw,18.5px); line-height:1.22; color:#fff;
}
.fp-op__d{
margin-block-start:7px;
font-size:13.5px; line-height:1.48; color:rgba(241,247,247,.78);
}
/* --- as cenas ------------------------------------------------------------
Um sistema de traço só, partilhado pelas seis. É o que as faz ler como
colecção; se cada uma trouxesse a sua espessura e a sua cor, seriam seis
desenhos avulsos dentro da mesma secção. */
.fp-cena{ fill:none; stroke-linecap:round; stroke-linejoin:round }
.fp-cena .c-fio,
.fp-cena .c-caixa,
.fp-cena .c-linhas,
.fp-cena .c-escada,
.fp-cena .c-vazia,
.fp-cena .c-antiga,
.fp-cena .c-nova{ stroke:rgba(190,255,255,.5); stroke-width:1.6 }
.fp-cena .c-caixa,
.fp-cena .c-vazia,
.fp-cena .c-antiga,
.fp-cena .c-nova{ stroke-width:1.8 }
.fp-cena .c-linhas{ stroke:rgba(190,255,255,.3); stroke-width:1.4 }
.fp-cena .c-fio--solto{ stroke:rgba(190,255,255,.24); stroke-dasharray:4 5 }
.fp-cena .c-escada{ stroke:rgba(190,255,255,.34) }
.fp-cena .c-vazia{ stroke:rgba(190,255,255,.22); stroke-dasharray:5 6 }
/* O que está errado acende-se: é o único sítio onde entra o ciano cheio, e
é assim que o olho vai directo ao ponto travado. */
.fp-cena .c-travada{ stroke:var(--cyan-lit); stroke-width:2 }
.fp-cena .c-marca,
.fp-cena .c-carga,
.fp-cena .c-visto,
.fp-cena .c-no{ stroke:var(--cyan-lit); stroke-width:1.8 }
.fp-cena .c-no circle{ fill:var(--cyan-lit); stroke:none }
.fp-cena .c-volta{ stroke:rgba(110,245,245,.6); stroke-width:1.6; stroke-dasharray:5 5 }
.fp-cena .c-corte{ stroke:rgba(190,255,255,.26); stroke-width:1.6; stroke-dasharray:3 6 }
.fp-cena .c-curva{ stroke:var(--cyan-lit); stroke-width:2.2 }
.fp-cena .c-vao{ stroke:rgba(110,245,245,.45); stroke-width:1.4; stroke-dasharray:3 4 }
.fp-cena .c-po circle{ fill:rgba(190,255,255,.5); stroke:none }
/* ==========================================================================
3 · COMO FUNCIONA — o fluxo
Quatro passos numa linha, com um fio a atravessá-los. Não é a régua do
Método: ali cada etapa abre um painel e o box viaja: aqui não há
interacção nenhuma, porque a secção é a leitura de uma frase só.
========================================================================== */
.fp-fluxo-sec{
position:relative; overflow:hidden;
padding-block:clamp(52px,6.2vw,84px);
color:var(--on-dark);
background:var(--fp-petroleo);
}
.fp-fluxo-sec::after{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:var(--grain); opacity:.05; mix-blend-mode:overlay;
}
.fp-fluxo-sec > *{ position:relative; z-index:1 }
.fp-fluxo-sec .h2{ color:#fff }
.fp-fluxo-sec .h2 em{ color:var(--cyan-lit) }
.fp-frase{
margin-block-start:14px;
font-family:var(--display); font-weight:600; letter-spacing:-.018em;
/* A 390px esta frase cai para 16px, que não é texto grande — precisa dos
4,5:1, e o `--cyan-lit` dava 4,1:1 sobre a parte clara do degradê. */
font-size:clamp(16px,1.9vw,21px); line-height:1.35; color:#d6fdfd;
}
.fp-frase i{ font-style:normal; opacity:.6; padding-inline:4px }
/* A LINHA DE FLUXO, E A SIMETRIA
Duas correcções nesta ronda, e a segunda depende da primeira.
1 · CADA ETAPA É UMA COLUNA CENTRADA. Antes o número ficava encostado à
esquerda da sua coluna e o texto começava por baixo dele, alinhado à
esquerda: os quatro títulos arrancavam em sítios que nada relacionava
com os pontos da linha, e a fila lia-se torta. Agora número, título e
descrição partilham o mesmo eixo vertical, e esse eixo é o centro
exacto da coluna.
2 · O SEGMENTO LIGA CENTRO A CENTRO. Com o círculo ao centro, o troço vai
do bordo direito de um número ao bordo esquerdo do seguinte,
atravessando a goteira — dez pixéis de folga de cada lado.
As contas são todas em percentagem da própria coluna, e é por isso que
elas têm de ser quatro FIXAS e não `auto-fit`: com encaixe automático
a fila parte-se em duas e os segmentos apontam para fora do quadro.
---------------------------------------------------------------------- */
.fp-fluxo{
--g:clamp(20px,2.4vw,34px);
--n:52px;
position:relative;
display:grid; gap:var(--g);
grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){ .fp-fluxo{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
/* NO TELEMÓVEL, uma linha VERTICAL — não quatro cartões empilhados. O
número fica à esquerda e o texto ao lado, e o fio desce de um número para
o seguinte: o mesmo desenho da linha do tempo, que é o que uma sequência
de quatro passos é. */
.fp-passo{
position:relative; z-index:1;
display:grid; grid-template-columns:var(--n) minmax(0,1fr);
column-gap:16px; align-items:start;
/* Piso de altura só no telemóvel. Sem ele, um passo de uma linha de
descrição deixava um troço de fio de 17px entre os números, enquanto os
vizinhos tinham 39: a linha do tempo ficava com passadas desiguais sem
que nada no conteúdo o justificasse. */
min-block-size:calc(var(--n) + 20px);
transition-delay:calc(var(--i) * 90ms);
}
.fp-passo__n{ grid-column:1; grid-row:1 / span 2 }
.fp-passo__t{ grid-column:2; grid-row:1 }
.fp-passo__d{ grid-column:2; grid-row:2 }
.fp-passo:not(:last-child)::before{
content:""; position:absolute; z-index:0;
inset-inline-start:calc(var(--n) / 2 - 1px);
inset-block-start:calc(var(--n) + 8px);
inline-size:2px; block-size:calc(100% - var(--n) - 8px + var(--g));
border-radius:2px;
background:linear-gradient(180deg,rgba(190,255,255,.5),rgba(190,255,255,.12));
}
@media (min-width:900px){
.fp-passo{
display:flex; flex-direction:column; align-items:center;
min-block-size:0; text-align:center;
}
.fp-passo:not(:last-child)::before{
inset-block-start:calc(var(--n) / 2 - 1px);
/* Do centro da coluna até ao bordo do número, mais dez de folga. */
inset-inline-start:calc(50% + var(--n) / 2 + 10px);
/* Negativo de propósito: o segmento atravessa a goteira e vai encontrar o
número seguinte. -50% é meia coluna; menos a goteira; mais o raio do
número e a mesma folga do outro lado. */
inset-inline-end:calc(-50% - var(--g) + var(--n) / 2 + 10px);
inline-size:auto; block-size:2px;
background:linear-gradient(90deg,rgba(190,255,255,.5),rgba(190,255,255,.16));
}
}
/* A luz que percorre a linha, na direcção da leitura. `background-position`
a 100% encosta a direita da imagem à direita da caixa — com a imagem 2,6×
maior, é isso que põe a faixa clara fora do quadro à esquerda. Ir de 100%
para 0% faz a luz atravessar da esquerda para a direita. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
.fp-passo:not(:last-child)::before{
background:linear-gradient(90deg,
rgba(190,255,255,.22) 0%, rgba(190,255,255,.22) 40%,
var(--cyan-lit) 50%,
rgba(190,255,255,.22) 60%, rgba(190,255,255,.22) 100%);
background-size:260% 100%;
animation:fp-fio-luz 3.6s linear infinite;
animation-delay:calc(var(--i) * .45s);
}
}
@keyframes fp-fio-luz{ from{ background-position:100% 0 } to{ background-position:0% 0 } }
.fp-passo__n{
display:grid; place-items:center;
inline-size:var(--n); block-size:var(--n); border-radius:50%;
font-family:var(--display); font-weight:700; font-size:14.5px; letter-spacing:.02em;
color:#02272c;
background:radial-gradient(80% 74% at 30% 22%,var(--cyan-lit),var(--cyan) 60%,#049fa0);
box-shadow:
0 0 0 1px rgba(190,255,255,.5),
0 0 0 7px rgba(2,56,63,.6),
0 0 0 8px rgba(110,245,245,.16),
0 14px 28px -14px rgba(7,210,210,.9);
}
.fp-passo__t{
font-family:var(--display); font-weight:700; letter-spacing:-.02em;
font-size:clamp(17px,1.9vw,20px); line-height:1.24; color:#fff;
}
@media (min-width:900px){ .fp-passo__t{ margin-block-start:20px } }
.fp-passo__d{
margin-block-start:8px; max-inline-size:30ch;
font-size:14.5px; line-height:1.55; color:rgba(241,247,247,.78);
}
/* ==========================================================================
4 · O QUE VOCÊ GANHA
Composição editorial, não uma grelha de cinco cartões iguais. Os
benefícios têm pesos diferentes no documento: o primeiro ocupa duas
colunas e leva o dado do LTV; o segundo leva a escada de descontos; o
último é uma frase e leva tratamento de destaque.
========================================================================== */
.fp-ganhos-sec{
position:relative; overflow:hidden;
padding-block:clamp(52px,6.2vw,84px);
background:var(--paper);
}
.fp-ganhos-sec::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(52% 40% at 100% 0%, rgba(2,115,115,.06), transparent 66%),
radial-gradient(44% 38% at 0% 100%, rgba(2,115,115,.05), transparent 68%);
}
.fp-ganhos{
position:relative; z-index:1;
display:grid; gap:clamp(16px,1.8vw,24px);
grid-template-columns:minmax(0,1fr);
}
@media (min-width:820px){
.fp-ganhos{ grid-template-columns:repeat(6,minmax(0,1fr)) }
/* Os dois primeiros ocupam metade cada; os três seguintes, um terço. É a
hierarquia do documento traduzida em área. */
.fp-ganho:nth-child(1),.fp-ganho:nth-child(2){ grid-column:span 3 }
.fp-ganho:nth-child(3),.fp-ganho:nth-child(4),.fp-ganho:nth-child(5){ grid-column:span 2 }
}
.fp-ganho{
position:relative; min-inline-size:0;
display:flex; flex-direction:column;
padding:clamp(22px,2.4vw,30px);
border-radius:clamp(14px,1.6vw,20px);
background:linear-gradient(158deg,#ffffff 0%,#f7fbfb 52%,#eff6f6 100%);
border:1px solid rgba(11,29,31,.075);
box-shadow:0 26px 50px -38px rgba(1,20,24,.5), inset 0 1px 0 #fff;
transition-delay:calc(var(--i) * 60ms);
}
/* --- o ícone -------------------------------------------------------------
Um em cada benefício, e são os ÍCONES OFICIAIS da Vazto — `lucro` do
Método, `oferta-adaptada`, `ecosistema` e `estrutura-comercial` do
Go-to-Market, `como-atuamos-educar` da Home. Preenchimento sólido, que é a
linguagem do acervo; a cor vem do contexto por `currentColor`.
Sem moldura à volta: a caixa com fundo e borda transformava um ícone de
acervo num botão. O que ele precisa é de tamanho e de ar. */
.fp-ganho__ico{
display:block; margin-block-end:clamp(14px,1.6vw,18px);
color:var(--teal);
}
.fp-ganho__ico .fp-ofi{
display:block; inline-size:40px; block-size:40px;
}
.fp-ganho__t{
font-family:var(--display); font-weight:700; letter-spacing:-.022em;
font-size:clamp(18px,2vw,22px); line-height:1.2; color:var(--text);
}
.fp-ganho__d{
margin-block-start:12px;
font-size:15px; line-height:1.6; color:var(--text-soft);
}
.fp-ganho__x{
margin-block-start:10px;
font-size:13.5px; line-height:1.55; color:var(--text-soft); opacity:.8;
}
/* O último benefício é uma frase e vale por ela: peso de display e o teal
fundo, sem virar um cartão diferente dos outros. */
.fp-ganho--frase .fp-ganho__d{
font-family:var(--display); font-weight:700; letter-spacing:-.02em;
font-size:clamp(16px,1.8vw,19px); line-height:1.3; color:var(--teal-deep);
}
/* --- 01, o protagonista --------------------------------------------------
O destaque é o CHÃO, não a área: um box petróleo entre quatro claros
distingue-se sem precisar de ocupar mais espaço. A disposição volta a ser a
da grelha — meia fila, como o 02 ao lado.
O dado do documento fica no pé do box, separado por uma régua e em corpo
grande. É o único número da secção e tem de se ver de longe. */
.fp-ganho--um{
color:var(--on-dark);
background:
radial-gradient(58% 90% at 100% 0%, rgba(7,210,210,.2), transparent 64%),
linear-gradient(152deg,#04656d 0%,#034249 46%,#022b32 100%);
border-color:rgba(110,245,245,.22);
box-shadow:0 34px 62px -42px rgba(1,20,24,.65), inset 0 1px 0 rgba(190,255,255,.14);
}
.fp-ganho--um .fp-ganho__ico{ color:var(--cyan-lit) }
.fp-ganho--um .fp-ganho__t{ color:#fff }
.fp-ganho--um .fp-ganho__d{ color:rgba(241,247,247,.88) }
.fp-ganho--um .fp-ganho__x{ color:rgba(241,247,247,.66) }
.fp-ganho--um .fp-dado{
margin-block-start:auto; gap:6px;
padding-block-start:clamp(18px,2vw,24px);
border-block-start:1px solid rgba(190,255,255,.18);
}
.fp-ganho--um .fp-dado b{
font-size:clamp(32px,4vw,46px); letter-spacing:-.035em; color:var(--cyan-lit);
text-shadow:0 0 34px rgba(7,210,210,.34);
}
.fp-ganho--um .fp-dado span{
font-size:13px; max-inline-size:30ch; color:rgba(241,247,247,.72);
}
/* O dado do LTV. Fica claramente rotulado como MÉDIA de um cliente — é o que
o documento diz, e apresentá-lo sem esse enquadramento seria transformá-lo
numa promessa de ganho, que é precisamente o registo que esta página tem
de evitar. */
.fp-dado{
margin-block-start:auto; padding-block-start:clamp(16px,1.8vw,22px);
display:flex; flex-direction:column; gap:4px;
}
.fp-dado b{
font-family:var(--display); font-weight:700; letter-spacing:-.03em;
font-size:clamp(26px,3vw,34px); line-height:1; color:var(--teal);
}
.fp-dado span{ font-size:12.5px; line-height:1.4; color:var(--text-soft) }
/* --- a escada de descontos ------------------------------------------------
Cinco degraus que sobem. Sem medalhas, sem confete e sem barra de
progresso a encher: é uma progressão de condições comerciais, não um jogo.
A altura de cada degrau é o próprio percentual.
ONDE ESTÃO OS RÓTULOS. O percentual fica ao CENTRO da sua barra, e o
número de clientes por baixo, num eixo alinhado. A versão anterior
empilhava os dois no fundo da barra: como as barras têm alturas
diferentes, o "20%" e o "100%" acabavam a alturas diferentes do eixo, e
cinco rótulos em cinco sítios não se comparam de relance — que é a única
coisa que um gráfico de cinco colunas serve para fazer. */
.fp-escada{
position:relative;
/* `--eixo` é a altura reservada ao rótulo por baixo do gráfico. Fixá-la é o
que permite desenhar UMA linha de eixo contínua: com a altura do rótulo
a variar, a linha teria de ser cinco bocados, um por coluna, e cinco
bocados com goteiras pelo meio não são um eixo. */
--eixo:30px;
margin-block-start:auto; padding-block-start:clamp(18px,2vw,24px);
display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px;
}
.fp-escada::after{
content:""; position:absolute; z-index:0;
inset-inline:0; inset-block-end:var(--eixo);
block-size:1px; background:rgba(11,29,31,.14);
}
.fp-escada__d{
position:relative; z-index:1;
display:grid; grid-template-rows:minmax(0,1fr) var(--eixo);
block-size:132px;
}
.fp-escada__b{
align-self:end; display:grid; place-items:center;
inline-size:100%;
/* 40% de piso: sem ele o degrau de 20% ficava com 12px e não cabia lá o
rótulo. O que a escada tem de mostrar é a PROGRESSÃO, e ela lê-se na
mesma com o piso levantado. */
block-size:calc(40% + var(--p) * 0.6%);
border-radius:8px 8px 0 0;
background:linear-gradient(180deg,rgba(2,115,115,.2),rgba(2,115,115,.05));
border-block-start:2px solid var(--teal);
}
.fp-escada__b b{
font-family:var(--display); font-weight:700; font-size:14px; color:var(--teal-deep);
}
.fp-escada__c{
align-self:center;
font-size:11px; line-height:1.2; color:var(--text-soft); text-align:center;
}
/* --- o fluxo nos dois sentidos -------------------------------------------
Duas setas opostas. Ler "funciona nos dois sentidos" e ver uma seta só é
uma contradição que se nota sem se saber porquê. */
.fp-duplo{
margin-block-start:auto; padding-block-start:clamp(16px,1.8vw,22px);
display:grid; gap:9px;
font-family:var(--display); font-weight:700; font-size:13px; color:var(--teal-deep);
}
.fp-duplo__l{ display:flex; align-items:center; gap:10px }
.fp-duplo__l b{ font-weight:700; white-space:nowrap }
.fp-duplo__l i{
flex:1 1 auto; min-inline-size:26px; block-size:2px; position:relative;
background:linear-gradient(90deg,rgba(2,115,115,.2),rgba(2,115,115,.6));
}
.fp-duplo__l i::after{
content:""; position:absolute; inset-block-start:-3px; inset-inline-end:0;
inline-size:8px; block-size:8px; rotate:45deg;
border-block-start:2px solid var(--teal); border-inline-end:2px solid var(--teal);
}
/* ==========================================================================
5 · AS TRÊS FORMAS DE PARTICIPAR — o continuum
NÃO É PRICING. Não há "recomendado", não há setas entre as três, não há
ordem obrigatória: o documento chama-lhes formas de atuar, e são escolhas
independentes. O que a barra diz é só que mais envolvimento corresponde a
mais remuneração — não que se tenha de subir por ela.
========================================================================== */
.fp-modos-sec{
position:relative; overflow:hidden;
padding-block:clamp(52px,6.2vw,86px);
color:var(--on-dark);
background:var(--grad-dark);
}
.fp-modos-sec::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(64% 50% at 50% 0%, rgba(7,210,210,.13), transparent 70%);
}
.fp-modos-sec > *{ position:relative; z-index:1 }
.fp-modos-sec .h2{ color:#fff }
.fp-modos-sec .h2 em{ color:var(--cyan-lit) }
.fp-modos-sec .lede{ color:var(--on-dark-soft) }
.fp-modos{
display:grid; gap:clamp(16px,2vw,26px);
grid-template-columns:minmax(0,1fr);
}
@media (min-width:840px){ .fp-modos{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.fp-modo{
min-inline-size:0;
padding:clamp(22px,2.4vw,30px);
border-radius:clamp(14px,1.6vw,20px);
background:
radial-gradient(90% 70% at 8% 0%, rgba(7,210,210,.1), transparent 60%),
linear-gradient(158deg,rgba(9,54,60,.9),rgba(3,22,28,.92));
border:1px solid rgba(110,245,245,.14);
box-shadow:inset 0 1px 0 rgba(160,255,255,.18), 0 30px 56px -40px rgba(1,24,30,.9);
transition-delay:calc(var(--i) * 80ms);
}
.fp-modo__topo{ display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.fp-modo__t{
font-family:var(--display); font-weight:700; letter-spacing:-.024em;
font-size:clamp(20px,2.2vw,26px); color:#fff;
}
.fp-modo__pc{
display:flex; align-items:baseline; gap:1px;
font-family:var(--display); font-weight:700; letter-spacing:-.04em;
color:var(--cyan-lit);
}
.fp-modo__pc b{ font-size:clamp(30px,3.6vw,44px); line-height:1 }
.fp-modo__pc i{ font-style:normal; font-size:clamp(15px,1.7vw,19px); opacity:.7 }
/* A barra: é ela o continuum. A largura do preenchimento é o percentual
relativo ao maior dos três. */
/* A 3px a barra era um fio: a diferença entre 3%, 6% e 10% desenhava-se num
traço que mal se via, e o continuum — que é a única coisa que a barra
existe para mostrar — perdia-se. A 9px lê-se como calha e preenchimento. */
.fp-modo__barra{
display:block; margin-block-start:18px;
block-size:9px; border-radius:99px;
background:rgba(110,245,245,.1);
box-shadow:inset 0 0 0 1px rgba(190,255,255,.12);
overflow:hidden;
}
.fp-modo__barra i{
display:block; block-size:100%; inline-size:calc(var(--p) * 1%);
border-radius:99px;
background:linear-gradient(90deg,var(--teal),var(--cyan));
box-shadow:0 0 14px rgba(7,210,210,.55);
position:relative; overflow:hidden;
}
/* A LUZ QUE ATRAVESSA. Uma faixa clara que corre da esquerda para a direita
dentro do preenchimento, com atraso por cartão para as três não pulsarem
em uníssono — três barras a acender ao mesmo tempo leem-se como alerta.
Sob `prefers-reduced-motion` não há faixa nenhuma: a barra fica sólida, e
sólida ela já diz tudo o que tem de dizer. */
@media (prefers-reduced-motion:no-preference){
.fp-modo__barra i::after{
content:""; position:absolute; inset-block:0;
inline-size:46%; inset-inline-start:-46%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
animation:fp-brilha 2.8s cubic-bezier(.4,0,.2,1) infinite;
animation-delay:calc(var(--i) * .55s);
}
}
@keyframes fp-brilha{
0%{ inset-inline-start:-46% }
/* A pausa é metade do ciclo. Sem ela a faixa reaparece à esquerda no
instante em que sai à direita, e lê-se como carregamento sem fim. */
55%,100%{ inset-inline-start:100% }
}
.fp-modo__lema{
margin-block-start:18px;
font-family:var(--display); font-weight:600; letter-spacing:-.016em;
font-size:clamp(15px,1.6vw,17px); color:var(--cyan-lit);
}
.fp-modo__fluxo{
margin-block-start:14px;
display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
font-size:14px; color:var(--on-dark-soft);
}
.fp-modo__fluxo li{ display:flex; align-items:center; gap:8px }
.fp-modo__fluxo li:not(:last-child)::after{
content:"→"; color:rgba(110,245,245,.5); font-size:13px;
}
/* ==========================================================================
6 · O GANHO RECORRENTE — o vínculo no tempo
A ideia é continuidade, e por isso a peça é uma LINHA que corre, não um
cartão. Quem originou fica ligado ao princípio dela; a linha vai até ao
fim do contrato.
========================================================================== */
.fp-rec-sec{
position:relative; overflow:hidden;
padding-block:clamp(48px,5.6vw,78px);
background:var(--grad-tint);
}
.fp-rec{
display:grid; gap:clamp(26px,3.2vw,44px);
grid-template-columns:minmax(0,1fr);
align-items:center;
}
@media (min-width:900px){ .fp-rec{ grid-template-columns:minmax(0,1fr) minmax(0,0.9fr) } }
.fp-rec__texto{ min-inline-size:0 }
.fp-rec__frase{
margin-block-start:16px;
font-family:var(--display); font-weight:700; letter-spacing:-.022em;
font-size:clamp(18px,2.1vw,24px); line-height:1.28; color:var(--teal-deep);
padding-inline-start:clamp(14px,1.6vw,20px);
border-inline-start:2px solid rgba(2,115,115,.4);
}
.fp-rec__texto .lede{ margin-block-start:16px; max-inline-size:52ch }
/* Os dois rótulos marcam as PONTAS da linha, e a linha fica entre eles. Uma
primeira versão empilhou-os centrados com a linha ao meio, e o que se lia
era um título, um traço e uma legenda — não um período com princípio e
fim. A ordem visual passa a ser a ordem do tempo. */
.fp-vinculo{
display:grid; gap:10px;
grid-template-areas:"a b" "l l";
grid-template-columns:auto auto;
justify-content:space-between; align-items:center;
padding:clamp(22px,2.6vw,34px);
border-radius:clamp(14px,1.6vw,20px);
background:linear-gradient(158deg,#ffffff,#f2f8f8);
border:1px solid rgba(11,29,31,.07);
box-shadow:0 26px 50px -40px rgba(1,20,24,.45);
}
.fp-vinculo__marca,
.fp-vinculo__fim{
font-family:var(--display); font-weight:700; font-size:12.5px;
letter-spacing:.02em; color:var(--teal-deep);
}
.fp-vinculo__marca{ grid-area:a }
.fp-vinculo__fim{ grid-area:b; color:var(--text-soft) }
.fp-vinculo__linha{
grid-area:l;
position:relative; display:block;
inline-size:100%; block-size:3px; border-radius:99px;
background:linear-gradient(90deg,var(--teal),rgba(2,115,115,.18));
}
/* O ponto que percorre a linha: a remuneração que continua enquanto o
contrato dura. Lento — é um vínculo, não uma barra a carregar. */
.fp-vinculo__linha i{
position:absolute; inset-block-start:50%; inset-inline-start:0;
inline-size:11px; block-size:11px; border-radius:50%; translate:-50% -50%;
background:var(--teal);
box-shadow:0 0 0 5px rgba(2,115,115,.16);
}
@media (prefers-reduced-motion:no-preference){
.fp-vinculo__linha i{ animation:fp-corre 9s ease-in-out infinite }
}
@keyframes fp-corre{ 0%{ inset-inline-start:0 } 50%{ inset-inline-start:100% } 100%{ inset-inline-start:0 } }
/* ==========================================================================
7 · O RADAR DE SINAIS
NÃO é o diagrama dos cinco objetivos do Método. Ali o núcleo PRODUZ os
cinco e os fios saem dele; aqui o centro é o cliente e os sinais são o que
se DETECTA nele.
A COMPOSIÇÃO, EM TRÊS COLUNAS
--------------------------------------------------------------------------
texto à esquerda · radar ao centro · um sinal de cada vez à direita
A versão anterior punha os sete sinais numa lista, todos abertos, ao lado
de um radar que piscava sozinho. Duas peças a dizer a mesma coisa, e nada
a ligá-las. Agora o radar é o protagonista — ao centro, maior, com o glifo
de cada sinal dentro do seu nó — e o slider da direita é quem o comanda:
muda o sinal, acende o nó.
NO TELEMÓVEL a ordem é título → radar → sinais → remate, e é por isso que
a grelha usa áreas nomeadas em vez de ordem de marcação: o remate está no
HTML a seguir aos sinais e no desktop tem de atravessar as três colunas.
========================================================================== */
.fp-radar-sec{
position:relative; overflow:hidden; isolation:isolate;
padding-block:clamp(52px,6.2vw,88px);
color:var(--on-dark);
/* A ATMOSFERA, e não decoração.
O petróleo sozinho estava correcto e CHAPADO: uma cor de fundo é uma
superfície, e o que faltava era ar. São quatro luzes, todas muito
abaixo do limiar de se notarem uma a uma:
· o clarão POR TRÁS DO RADAR, ligeiramente à esquerda e acima do
centro óptico do instrumento — é ele que faz o radar destacar-se do
chão sem lhe pôr contorno nenhum;
· uma segunda luz, mais fria e mais fraca, atrás do painel da direita:
sem ela o lado do texto afunda e a secção fica com um lado só;
· uma mancha teal no alto, que continua a que vem da secção anterior;
· o pé a fechar em quase preto, que é o que dá borda inferior à cena.
Percentagens e não pixéis: a secção muda de altura conforme o painel, e
uma luz posicionada em pixéis descolava do radar. */
background:
radial-gradient(46% 52% at 34% 44%, rgba(7,190,200,.15), transparent 68%),
radial-gradient(38% 44% at 78% 56%, rgba(10,120,150,.11), transparent 70%),
radial-gradient(80% 60% at 50% -8%, rgba(7,210,210,.11), transparent 64%),
linear-gradient(168deg,#05272d 0%,#04181e 52%,#01090d 100%);
}
/* AS LINHAS TÉCNICAS, quase imperceptíveis. Duas grelhas de 1px a 3% de
opacidade: não se vêem, sentem-se — é o que impede o degradê de se ler
como um `background-color` esticado. A máscara apaga-as no centro, para
que não passem por dentro do radar. */
.fp-radar-sec::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background-image:
repeating-linear-gradient(90deg, rgba(150,240,245,.032) 0 1px, transparent 1px 96px),
repeating-linear-gradient(0deg, rgba(150,240,245,.026) 0 1px, transparent 1px 96px);
-webkit-mask-image:radial-gradient(58% 62% at 40% 50%, transparent 18%, #000 82%);
mask-image:radial-gradient(58% 62% at 40% 50%, transparent 18%, #000 82%);
}
.fp-radar-sec::after{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background-image:var(--grain); opacity:.05; mix-blend-mode:overlay;
}
.fp-radar-sec > *{ position:relative; z-index:1 }
.fp-radar-sec .h2{ color:#fff }
.fp-radar-sec .h2 em{ color:var(--cyan-lit) }
/* `margin-inline:auto` NÃO É DETALHE. Sem ele o parágrafo tem 62ch dentro de
um cabeçalho de 820px e encosta ao início: o texto fica centrado DENTRO de
uma caixa que não está centrada, e o eixo dele afasta-se do eixo do título
uns bons pixéis. Era esta a torção que se via. */
.fp-radar-sec .lede{
color:var(--on-dark-soft); max-inline-size:62ch; margin-inline:auto;
}
/* Radar à esquerda, painel à direita. O título vive por cima, centrado, e
não numa terceira coluna: com três colunas o radar ficava com um terço da
largura e deixava de ser o protagonista da secção. */
.fp-radar-grelha{
display:grid; gap:clamp(24px,3vw,48px);
grid-template-columns:minmax(0,1fr);
align-items:center;
}
@media (min-width:1000px){
/* 1.6 e não 1.32. MEDIDO a 1440, com o anel externo do radar e a caixa do
painel em pixéis de ecrã:
1.32fr → radar 613px · anel 353px · painel 464px
1.48fr → radar 643px · anel 371px · painel 434px
1.60fr → radar 663px · anel 382px · painel 414px
1.72fr → radar 681px · anel 393px · painel 396px
Os títulos dos sinais cabem numa linha em todas elas — o limite não é
tipográfico. É o que o briefing diz: "não aumentar tanto a ponto de
competir com o painel". A 1.72 as duas metades ficam praticamente
iguais e a secção deixa de ter um protagonista; a 1.6 o radar é
nitidamente a peça maior e o painel mantém 414px de leitura.
Somado ao raio interno, que subiu de 234 para 248 unidades do viewBox, o
instrumento desenhado passa de 353px para 382px — mais 8%. */
.fp-radar-grelha{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) }
}
.fp-radar{ min-inline-size:0 }
.fp-sinais{ min-inline-size:0 }
/* `overflow:visible` porque os rótulos e o halo do núcleo saem do viewBox de
propósito — recortá-los cortaria as palavras. */
.fp-radar__svg{ inline-size:100%; block-size:auto; display:block; overflow:visible }
/* --- O CAMPO -------------------------------------------------------------
Quatro anéis com opacidade decrescente, meridianos finos e marcas nos
cruzamentos. É esta camada que separa um instrumento de três
circunferências desenhadas. */
.fp-radar__campo circle{ fill:none; stroke:rgba(190,255,255,var(--o,.2)); stroke-width:var(--w,1) }
.fp-radar__grade line{ stroke:rgba(190,255,255,.1); stroke-width:1 }
.fp-radar__po circle{ fill:rgba(110,245,245,.34) }
/* NÍVEL 4 — a graduação por fora do anel principal. */
.fp-radar__escala line{ stroke:rgba(190,255,255,var(--o,.16)); stroke-width:1.1 }
/* --- O FEIXE -------------------------------------------------------------
Aponta ao sinal activo e roda até ele. A rotação é uma transição, não uma
animação em ciclo: o feixe só se move quando o painel muda, e é isso que
liga as duas peças a olho. */
.fp-radar__feixe{
transform-origin:var(--cx) var(--cy);
transition:rotate 1.1s cubic-bezier(.34,.02,.2,1);
}
.fp-radar__feixe path{ fill:url(#fpFeixe) }
@media (prefers-reduced-motion:reduce){
.fp-radar__feixe{ transition:none }
}
/* --- os nós --------------------------------------------------------------
Todos apagados menos um. O contraste entre o activo e os outros é o que
torna a ligação ao painel legível: se os sete estivessem acesos, mudar de
sinal não se via. */
.fp-radar__sinal{ cursor:pointer }
.fp-radar__sinal:focus{ outline:none }
.fp-radar__sinal:focus-visible .fp-radar__aro{ stroke:var(--cyan-lit); stroke-width:2.4 }
.fp-radar__aro{
fill:rgba(3,26,32,.72); stroke:rgba(190,255,255,.34); stroke-width:1.4;
transition:fill .5s ease, stroke .5s ease, stroke-width .5s ease;
}
/* O GLIFO OFICIAL. Deixou de ser um contorno desenhado em código e passou a
ser o ficheiro do acervo, sólido, a herdar a cor por `currentColor`. É
isso que permite o salto que o traço não permitia: teal apagado a 55% de
opacidade quando o sinal está em repouso, branco cheio quando acende. */
.fp-radar__cx-ico{ overflow:visible; pointer-events:none }
.fp-radar__ofi{
inline-size:100%; block-size:100%; display:block;
color:rgba(190,255,255,.62);
transition:color .5s ease, filter .5s ease;
}
/* O corpo é em unidades do viewBox: 19 aqui saem a cerca de 15px no ecrã,
porque o SVG de 860 é desenhado a uns 700. */
.fp-radar__rot{
font-family:var(--display); font-weight:600; font-size:19px;
letter-spacing:-.012em; fill:rgba(214,253,253,.66);
transition:fill .5s ease;
}
.fp-radar__pulso{ fill:none; stroke:var(--cyan-lit); stroke-width:1.4; opacity:0 }
/* O HALO do nó activo. É uma forma a mais por nó, sempre invisível excepto
num deles: o glow pedido não podia ser só `drop-shadow`, porque um
drop-shadow acompanha a espessura do traço e o que se queria era LUZ a
sair do nó para o campo à volta. */
.fp-radar__halo{ fill:url(#fpAura); opacity:0; transition:opacity .6s ease }
.fp-radar__sinal.is-on .fp-radar__halo{ opacity:.85 }
.fp-radar__sinal.is-on .fp-radar__aro{
fill:rgba(7,210,210,.2); stroke:var(--cyan-lit); stroke-width:2.4;
filter:drop-shadow(0 0 16px rgba(7,210,210,.85));
}
.fp-radar__sinal.is-on .fp-radar__ofi{
color:#fff; filter:drop-shadow(0 0 10px rgba(110,245,245,.7));
}
.fp-radar__sinal.is-on .fp-radar__rot{ fill:#fff }
/* O anel que se expande, só no nó activo. É a diferença entre
"seleccionado" e "detectado". */
@media (prefers-reduced-motion:no-preference){
.fp-radar__sinal.is-on .fp-radar__pulso{
transform-box:fill-box; transform-origin:center;
animation:fp-detecta 2.6s cubic-bezier(.2,.6,.3,1) infinite;
}
}
@keyframes fp-detecta{ 0%{ opacity:.7; scale:1 } 70%,100%{ opacity:0; scale:1.7 } }
@media (hover:hover){
.fp-radar__sinal:not(.is-on):hover .fp-radar__aro{ stroke:rgba(190,255,255,.75) }
.fp-radar__sinal:not(.is-on):hover .fp-radar__ofi{ color:rgba(214,253,253,.95) }
.fp-radar__sinal:not(.is-on):hover .fp-radar__rot{ fill:rgba(214,253,253,.9) }
}
/* --- o núcleo ------------------------------------------------------------
A aura é um círculo desenhado por baixo do disco, com o degradê radial a
apagar-se: um `filter: blur` num SVG que já tem sete nós a transicionar
custa mais do que uma forma a mais. */
.fp-radar__aura{ fill:url(#fpAura) }
.fp-radar__nucleo{
fill:url(#fpNucleo);
filter:drop-shadow(0 0 34px rgba(7,210,210,.42));
}
/* As três camadas que dão espessura ao disco. O aro em degradê substituiu um
traço de cor única: era ele que fazia o núcleo parecer um autocolante. */
.fp-radar__bordo{ fill:none; stroke:url(#fpBordo); stroke-width:2.2 }
.fp-radar__anelin{ fill:none; stroke:rgba(190,255,255,.14); stroke-width:1 }
.fp-radar__realce{
fill:none; stroke:rgba(190,255,255,.3); stroke-width:2.6;
stroke-linecap:round;
}
.fp-radar__cx{ display:grid; place-items:center; block-size:100% }
/* O ficheiro entregue já traz o seu próprio anel à volta da figura. Por isso
fica a 78% da caixa: a 100% o anel dele encostava ao anel do disco e os
dois liam-se como um só traço grosso. */
.fp-radar__cliente{
inline-size:78%; block-size:78%; display:block;
color:var(--cyan-lit);
filter:drop-shadow(0 0 8px rgba(7,210,210,.45));
}
@media (prefers-reduced-motion:no-preference){
.fp-radar__aura{ animation:fp-respira 5.2s ease-in-out infinite }
}
@keyframes fp-respira{ 0%,100%{ opacity:.75 } 50%{ opacity:1 } }
/* --- o painel dos sinais -------------------------------------------------
Uma caixa só, com o sinal em cima e a navegação em baixo. O leme vive
DENTRO dela: com os botões pendurados por fora, o painel lia-se como um
carrossel qualquer encostado ao radar em vez de a outra metade do mesmo
instrumento.
Um sinal de cada vez. Os sete ficam empilhados em posição absoluta e é a
opacidade que muda; retirar e repor o activo fazia a caixa saltar de
altura a cada passo, e a caixa tem de ficar quieta ao lado do radar. */
.fp-sinais__caixa{
padding:clamp(24px,2.8vw,34px);
border-radius:clamp(16px,1.8vw,24px);
background:linear-gradient(158deg,rgba(9,48,55,.6),rgba(3,22,27,.5));
border:1px solid rgba(190,255,255,.13);
box-shadow:0 34px 60px -46px rgba(0,10,14,.9), inset 0 1px 0 rgba(190,255,255,.08);
}
.fp-sinais__palco{
position:relative;
min-block-size:clamp(210px,23vw,244px);
}
/* O conteúdo CENTRA-SE no palco em vez de encostar ao topo. O palco tem a
altura do sinal mais alto — é isso que impede a caixa de saltar quando o
slider anda — e com o conteúdo encostado em cima sobravam 78px mortos no
pé de quase todos os sinais. Centrado, a sobra divide-se pelas duas
pontas e lê-se como respiro em vez de como falta. */
.fp-sinal{
position:absolute; inset:0;
display:flex; flex-direction:column; align-items:flex-start;
justify-content:center;
opacity:0; translate:0 12px; pointer-events:none;
transition:opacity .5s ease, translate .5s cubic-bezier(.2,.7,.3,1);
}
.fp-sinal.is-on{ opacity:1; translate:0 0; pointer-events:auto }
.fp-sinal__ico{ display:block; color:var(--cyan-lit) }
/* O ÍCONE DO PAINEL ESTAVA A 0×0.
A regra que o dimensionava era `.fp-sinal__ico .fp-ico` — a classe dos
glifos desenhados em código. Quando os sinais passaram a usar os ficheiros
do acervo, a classe passou a ser `.fp-ofi` e esta regra deixou de lhe
pegar: um `