/* =========================================================
CPPEM · OPERAÇÃO PRAÇA PMPE + OPERAÇÃO DISTINTIVO PCPE
Página de venda direta ao checkout — as DUAS, num arquivo só.
---------------------------------------------------------
Sistema visual herdado de ../unificados e ../livepmpe:
Oxanium + Rajdhani, ouro #AF9256 sobre preto #0A0A0B, fios
de 1px em ouro translúcido, cantos chanfrados de operação,
grão de impressão e brasas subindo pela viewport.
O QUE É NOVO AQUI é o PORTAL (.portal): a tela de entrada
com os dois brasões numa tempestade de brasas. Escolher um
lado acende a página inteira naquela operação.
─── COMO AS DUAS OPERAÇÕES CONVIVEM ───────────────────
O documento inteiro é UM só. O que troca entre PMPE e PCPE
mora em quatro variáveis redefinidas em [data-op] no :
--op-accent o acento quente (ember) ou frio (steel)
--op-halo o mesmo tom, em halo translúcido
--op-marca a marca d água de seção
--op-brasao o brasão do medalhão
Texto que muda (nomes, siglas, vagas, checkout) é escrito
pelo script.js a partir do CONFIG.ops — o HTML nasce com o
conteúdo da PMPE para que a página funcione sem JS.
NÃO acrescente um seletor .is-pmpe / .is-pcpe por
componente: é assim que uma variante começa a divergir da
outra sem ninguém perceber. Se algo precisa mudar de lado,
ou vira token acima, ou vira slot no CONFIG.
========================================================= */
/* ─── RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ─── TOKENS ───────────────────────────────────────────── */
:root {
--gold: #AF9256;
--gold-light: #C9AE7A;
--gold-pale: #F0DCB0;
--gold-dark: #8A7040;
--gold-deep: #5E4B29;
--bg: #0A0A0B;
--bg-2: #111115;
--bg-3: #18181E;
--bg-4: #1F1F28;
--border: rgba(175,146,86,.18);
--border-soft: rgba(175,146,86,.10);
--border-active: rgba(175,146,86,.55);
--text: #E8E4D9;
--text-dim: #ADA99B;
--text-mute: #87847A;
--danger: #C25B52;
--ok: #6FA96A;
/* As duas assinaturas de cor. São de SUSSURRO: entram em halos, clarões e
fios — nunca em texto corrido ou botão. O sistema continua sendo o ouro,
e é ele que segura a marca de pé nas duas versões da página. */
--ember: #C4703F; /* militar — PMPE */
--steel: #5B8CB8; /* civil — PCPE */
--font-title: 'Oxanium', system-ui, sans-serif;
--font-ui: 'Rajdhani', system-ui, sans-serif;
--nav-h: 76px;
--ease: cubic-bezier(.4,0,.2,1);
--freada: cubic-bezier(.16,1.02,.3,1);
--t: .28s var(--ease);
--maxw: 1180px;
/* Estado padrão = PMPE. Vale também para quem chega com o JS desligado. */
--op-accent: var(--ember);
--op-halo: rgba(196,112,63,.30);
--op-marca: url("public/marca-pmpe.webp");
--op-brasao: url("public/brasao-pmpe.webp");
/* Quanto a marca d água entra pela direita. É token, e não número fixo no
.section::before, porque os dois desenhos têm densidade diferente: o da
PMPE é um brasão fechado que some no preto, o da PCPE é um escudo aberto
com as palavras POLÍCIA CIVIL em caixa alta — no mesmo recuo ele deixa
letras legíveis atrás do texto da seção e vira ruído, não textura. */
/* ─── DE QUE LADO A MARCA ENTRA ─────────────────────────
A marca da corporação entra pelo MESMO lado do portão dela no portal:
a PMPE pela esquerda, a PCPE pela direita. Não é simetria gratuita — é a
única continuidade que sobra entre a tela de escolha e a página. Quem
tocou no portão da esquerda continua com a PMPE à esquerda.
E entra pela METADE, cortada pela borda da tela. Um brasão inteiro
centralizado num lado vira ilustração de fundo e disputa com o texto;
cortado ao meio, ele lê como marca em relevo no papel.
O leão vai para o lado oposto, nas seções alternadas, para os dois nunca
se empilharem e o olho ganhar um ritmo lateral ao rolar. */
--op-marca-x: -330px; /* PMPE: entra pela ESQUERDA */
--op-marca-h: 660px;
--op-leao-x: calc(100% + 250px); /* e o leão vai para a direita */
}
[data-op="pcpe"] {
--op-accent: var(--steel);
--op-halo: rgba(91,140,184,.30);
--op-marca: url("public/marca-pcpe.webp");
--op-brasao: url("public/brasao-pcpe.webp");
--op-marca-x: calc(100% + 300px); /* PCPE: entra pela DIREITA */
--op-marca-h: 600px;
--op-leao-x: -300px; /* e o leão vai para a esquerda */
}
/* ─── BASE ─────────────────────────────────────────────── */
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + 16px);
-webkit-text-size-adjust: 100%;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-size: 17px;
font-weight: 500;
line-height: 1.65;
overflow-x: hidden;
position: relative;
}
/* grão fino: dá peso de impressão ao preto chapado. Fica acima do conteúdo
(z-index 210) e abaixo de navbar/dock/float — de dentro de uma camada
z-index 1 o grão sumiria sob as seções. */
body::before {
content: ''; position: fixed; inset: 0; z-index: 210; pointer-events: none;
opacity: .13; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* height:auto é obrigatório: os nem duas abas: o produto é o mesmo método aplicado
a dois concursos diferentes, e quem chega precisa se
reconhecer em UM lado antes de ler qualquer oferta.
Por isso o portal ocupa a viewport inteira e não tem
scroll: enquanto ele está de pé, não existe página atrás
dele para o visitante espiar. É uma decisão, não uma capa.
position: fixed e não um no fluxo: o site abaixo
já está montado e com o scroll travado (html.is-portal), e
um portal no fluxo empurraria a hero para 100vh de
distância — a primeira rolagem depois da escolha cairia no
vazio.
========================================================= */
.portal {
position: fixed; inset: 0; z-index: 400;
display: grid; grid-template-rows: auto 1fr auto;
padding: clamp(18px, 4vh, 40px) 0;
background:
radial-gradient(120% 90% at 50% 108%, rgba(196,112,63,.16), transparent 62%),
radial-gradient(90% 70% at 50% -10%, rgba(175,146,86,.10), transparent 60%),
#08080A;
/* A intenção é que o portal caiba inteiro na tela — enquanto ele está de
pé, não deve existir página atrás para o visitante espiar. Mas a
intenção não vale um portão decepado: em tela baixa (celular deitado,
janela cortada, fonte aumentada) a rolagem entra e salva o conteúdo.
Nas alturas normais o conteúdo cabe e ninguém rola nada. */
overflow-x: hidden; overflow-y: auto;
overscroll-behavior: contain;
/* ─── A MARCAÇÃO DE TEMPO DA COLISÃO ─────────────────────
Vale para os dois brasões que voam, para o clarão, a onda, o risco, o
tranco da tela E para a entrada dos dois portões. Mora aqui, na .portal,
porque é o ancestral comum de todos eles: são ramos diferentes da
árvore, e com uma cópia em cada um bastava ajustar um lado para a cena
inteira sair de sincronia.
O script.js lê o --impacto daqui (por herança) para soltar os
estilhaços no instante certo.
--vem + --voo TEM que fechar em --impacto. Se não fechar, ou o clarão
acende antes dos brasões chegarem, ou os brasões atravessam um do outro
e batem no vazio. */
--vem: .16s; /* quando os dois brasões começam a vir */
--voo: .80s; /* quanto levam para atravessar a tela */
--impacto: .96s; /* --vem + --voo: o instante da batida */
transition: opacity .62s var(--ease), transform .62s var(--ease), visibility .62s;
}
/* O fundo do atirador também aqui, mais apagado que na hero: dá chão à cena
sem competir com os dois brasões, que são o assunto. */
.portal__bg {
position: absolute; inset: 0; pointer-events: none;
background: url("public/bgatirador.webp") center 28% / cover no-repeat;
opacity: .13; filter: grayscale(.7) contrast(1.05) brightness(.72);
}
.portal__veil {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(110% 85% at 50% 45%, rgba(8,8,10,.30), rgba(8,8,10,.90) 62%, #08080A 100%);
}
.portal__grid {
position: absolute; inset: 0; pointer-events: none; opacity: .55;
background-image:
linear-gradient(rgba(175,146,86,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(175,146,86,.06) 1px, transparent 1px);
background-size: 74px 74px;
mask-image: radial-gradient(ellipse at 50% 50%, #000 6%, transparent 68%);
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 6%, transparent 68%);
}
.portal__scan {
position: absolute; inset: 0; pointer-events: none; opacity: .18;
background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
}
/* A camada de brasas do portal é a mesma .brasa da página, mas em outro
contêiner: aqui elas são mais densas e nascem abaixo da dobra, porque o
portal não rola e a atmosfera precisa se sustentar sozinha. */
.portal__brasas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.portal__top, .portal__bottom, .portal__meio {
position: relative; z-index: 4;
width: min(100% - 36px, 1280px); margin-inline: auto;
}
.portal__top { text-align: center; }
.portal__meio { display: grid; place-items: center; }
/* ─── marca e chamada ─────────────────────────────────────
Só o leão, e grande. O "CPPEM / Concursos Públicos" ao lado dele saiu: o
emblema JÁ é a marca, e um wordmark do lado dele numa tela cujo assunto é
escolher entre duas corporações era um terceiro nome disputando a leitura
com os dois que importam. */
.portal__marca {
display: block; width: clamp(76px, 12vh, 118px); margin-inline: auto;
animation: marca-entra .9s var(--freada) both .05s;
}
.portal__marca img {
width: 100%;
filter: drop-shadow(0 4px 22px rgba(175,146,86,.5));
}
@keyframes marca-entra {
from { opacity: 0; transform: translateY(-22px) scale(.86); }
to { opacity: 1; transform: none; }
}
/* ─── a entrada dos textos do portal ───────────────────────
Keyframe PRÓPRIO, e não o `rise` da página: o `rise` só declara o `to`, e
o preenchimento `backwards` de um keyframe sem `from` herda o estado atual
do elemento — opacity 1. Com atraso curto ninguém via; com o atraso
ancorado no impacto, o rodapé e o "OU" apareciam antes da colisão
acontecer. Um `from` explícito é o que os mantém escondidos na espera. */
@keyframes entra-portal {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
.portal__chamada {
margin-top: clamp(12px, 2.4vh, 22px);
animation: entra-portal .8s var(--ease) both .18s;
}
.portal__chamada h1 {
margin-top: 14px;
font-family: var(--font-title);
font-size: clamp(26px, 5.2vw, 50px); font-weight: 800; line-height: 1.02;
letter-spacing: 1px; text-transform: uppercase; color: var(--text);
text-shadow: 0 8px 40px rgba(0,0,0,.8);
}
.portal__chamada p {
margin: 14px auto 0; max-width: 58ch; color: var(--text-dim);
font-size: clamp(14.5px, 1.7vw, 17px); line-height: 1.6;
}
/* ─── os dois portões ───────────────────────────────────────
grid de 1fr auto 1fr com a costura no meio, e não flex com gap: a costura
precisa de largura própria (ela é um elemento, não um vão) e as duas
colunas têm que ficar exatamente iguais mesmo com nomes de tamanhos
diferentes — "PRAÇA PMPE" e "DISTINTIVO PCPE" não têm a mesma medida. */
.portoes {
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: center; gap: clamp(10px, 2.4vw, 34px);
width: 100%;
}
/* A costura central. Vertical no desktop, horizontal no mobile — o "OU" fica
no meio dela nos dois casos. */
.portoes__ou {
position: relative; align-self: stretch;
display: grid; place-items: center;
width: 58px; min-height: 120px;
font-family: var(--font-title); font-size: 12px; font-weight: 800;
letter-spacing: 4px; text-transform: uppercase; color: var(--gold);
animation: entra-portal .8s var(--ease) both calc(var(--impacto) + .5s);
}
.portoes__ou::before, .portoes__ou::after {
content: ''; position: absolute; left: 50%; width: 1px; transform: translateX(-50%);
background: linear-gradient(180deg, transparent, var(--border-active));
}
.portoes__ou::before { top: 0; height: calc(50% - 22px); }
.portoes__ou::after { bottom: 0; height: calc(50% - 22px);
background: linear-gradient(0deg, transparent, var(--border-active)); }
/* O portão em si.
É um , não um : a escolha não navega para outro documento — ela
acende esta mesma página. Um link com href="#/pmpe" prometeria uma página
nova e daria o menu de contexto "abrir em nova aba", que aqui abriria o
portal de novo. */
/* =========================================================
A COLISÃO — a cena de entrada do portal
---------------------------------------------------------
Os dois brasões atravessam a tela, cada um do seu lado, e batem no meio.
Da batida saem clarão, onda, risco, estilhaços e o tranco na tela — e é do
ponto do impacto que os dois portões nascem, voltando cada um para o seu
lado. A leitura é literal: as duas corporações se encontram, e a escolha é
o que sobra do encontro.
A camada morre em ~1,7s. Nada nela é interativo e nada nela sobrevive à
cena: o que fica de pé são os portões.
Os brasões daqui são DECORATIVOS (alt=""): os mesmos dois desenhos são
anunciados logo abaixo, dentro dos portões, com nome de corporação e tudo.
Repetir aqui faria um leitor de tela ouvir quatro brasões numa tela que
tem dois.
========================================================= */
.choque {
position: absolute; inset: 0; z-index: 5; pointer-events: none;
overflow: hidden;
}
.choque__brasao {
position: absolute; left: 50%; top: 50%;
/* A caixa é quadrada e o desenho dentro dela é `contain`, então cada brasão
ocupa só uma FATIA da própria caixa — e uma fatia diferente do outro:
357x419 na PMPE, 326x454 na PCPE. Parar os dois no mesmo deslocamento
encosta um no centro e deixa o outro a 15px dele.
Daí o --enc por lado: metade da largura RENDERIZADA de cada desenho
(0,5 x proporção), mais um fio de folga para o clarão caber entre eles.
Como sai da própria --cx, a distância acompanha o tamanho em qualquer
largura de tela — com número fixo, o par encosta certo numa e se
atravessa em todas as outras. */
--cx: clamp(124px, 19vw, 216px);
width: var(--cx); aspect-ratio: 1; display: block;
/* opacity 0 na base: sem isto os dois ficam empilhados no centro durante o
--vem inteiro, antes do voo começar. Ver também o `both` do voo. */
opacity: 0;
filter: drop-shadow(0 0 26px rgba(0,0,0,.85));
}
.choque__brasao--a { --enc: calc(var(--cx) * .435); } /* 357/419 → .426 + folga */
.choque__brasao--b { --enc: calc(var(--cx) * .370); } /* 326/454 → .359 + folga */
.choque__brasao img { width: 100%; height: 100%; object-fit: contain; }
/* Duas animações por brasão, e não uma só com muitos passos:
o VOO tem easing de aceleração (entra devagar, chega rápido — é o que faz
ler como massa ganhando velocidade) e o RECUO tem easing de saída. Num
keyframe único o easing seria o mesmo para os dois trechos, e a batida
perderia exatamente o que a torna uma batida.
O VOO leva `both` e o RECUO leva só `forwards`, e a assimetria é o ponto:
· sem `backwards` no voo, os dois brasões ficam parados e empilhados no
meio da tela durante todo o --vem, porque a posição base deles é o
centro e o keyframe ainda não vale. É um segundo de duas logos uma em
cima da outra antes de qualquer coisa acontecer.
· com `backwards` no recuo, o navegador aplicaria o estado inicial dele já
no primeiro quadro da página e o voo nunca aconteceria. */
.choque__brasao--a {
animation:
voa-esq var(--voo) cubic-bezier(.5,0,.85,.30) var(--vem) both,
recua-esq .52s cubic-bezier(.3,0,.2,1) var(--impacto) forwards;
}
.choque__brasao--b {
animation:
voa-dir var(--voo) cubic-bezier(.5,0,.85,.30) var(--vem) both,
recua-dir .52s cubic-bezier(.3,0,.2,1) var(--impacto) forwards;
}
@keyframes voa-esq {
0% { opacity: 0; transform: translate(calc(-50% - 62vw), -50%) rotate(-16deg) scale(.72); }
18% { opacity: 1; }
100% { opacity: 1; transform: translate(calc(-50% - var(--enc)), -50%) rotate(0deg) scale(1); }
}
@keyframes voa-dir {
0% { opacity: 0; transform: translate(calc(-50% + 62vw), -50%) rotate(16deg) scale(.72); }
18% { opacity: 1; }
100% { opacity: 1; transform: translate(calc(-50% + var(--enc)), -50%) rotate(0deg) scale(1); }
}
/* ─── o recuo é uma PASSAGEM DE BASTÃO ─────────────────────
O brasão não sai do impacto para um lugar qualquer: ele vai para o ponto
exato onde o medalhão do portão dele vai estar, encolhendo até o tamanho
exato daquele medalhão, e apaga ao chegar. O portão nasce por baixo, no
mesmo lugar, e o que se vê é um desenho só se assentando no cartão.
Antes ele saía para `-24vw`, que não é lugar nenhum: no desktop apagava a
meio caminho do cartão e no celular apagava fora dele. Duas logos sumindo
fora do lugar onde as logos dos cartões aparecem, e por um instante quatro
brasões na tela.
--dx, --dy e --esc são medidos pelo script.js a partir do medalhão de
verdade (ver `mirarPortoes`). Os valores de reserva abaixo servem só para o
caso de a medição não rodar — eles empurram para fora e para cima, que é o
erro menos feio. */
@keyframes recua-esq {
0% { opacity: 1; transform: translate(calc(-50% - var(--enc)), -50%) scale(1); }
20% { opacity: 1; transform: translate(calc(-50% - var(--enc) - 22px), -50%) scale(1.05); }
/* Some antes de chegar, e não ao chegar: o cartão já está desenhando o
medalhão dele nos últimos terços da travessia, e dois brasões nítidos no
mesmo ponto leem como erro de renderização, não como um virando o outro.
Apagando em 62%, o que se vê no fim é só o medalhão do cartão. */
62% { opacity: .08; }
100% { opacity: 0;
transform: translate(calc(-50% + var(--dx, -22vw)), calc(-50% + var(--dy, -12vh)))
scale(var(--esc, .55)); }
}
@keyframes recua-dir {
0% { opacity: 1; transform: translate(calc(-50% + var(--enc)), -50%) scale(1); }
20% { opacity: 1; transform: translate(calc(-50% + var(--enc) + 22px), -50%) scale(1.05); }
/* Some antes de chegar, e não ao chegar: o cartão já está desenhando o
medalhão dele nos últimos terços da travessia, e dois brasões nítidos no
mesmo ponto leem como erro de renderização, não como um virando o outro.
Apagando em 62%, o que se vê no fim é só o medalhão do cartão. */
62% { opacity: .08; }
100% { opacity: 0;
transform: translate(calc(-50% + var(--dx, 22vw)), calc(-50% + var(--dy, -12vh)))
scale(var(--esc, .55)); }
}
/* ─── o clarão ─── */
.choque__clarao {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 130vmax; height: 130vmax; opacity: 0; display: block;
background: radial-gradient(circle,
#FFF6DE 0%, rgba(255,231,176,.85) 6%, rgba(196,112,63,.45) 15%, transparent 42%);
animation: clarao .62s var(--ease) var(--impacto) forwards;
}
@keyframes clarao {
0% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
12% { opacity: 1; transform: translate(-50%, -50%) scale(.42); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
/* ─── as ondas de choque ───────────────────────────────────
Anéis hexagonais, e não círculos: o hexágono é a forma dos medalhões e dos
portões, e é o que amarra a cena ao resto da página. São dois com atrasos
diferentes — um anel só lê como bolha, dois leem como onda. */
.choque__onda {
position: absolute; left: 50%; top: 50%; display: block;
width: 240px; height: 240px; opacity: 0;
box-shadow: inset 0 0 0 3px var(--gold-pale);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
animation: onda .52s cubic-bezier(.12,.7,.3,1) var(--impacto) forwards;
}
.choque__onda--2 { animation-delay: calc(var(--impacto) + .1s); animation-duration: .64s; }
/* O anel some em pouco mais de meio segundo, e o motivo é onde ele TERMINA:
ampliado sete vezes, um hexágono só mostra os dois lados retos dele, e o
que sobra na tela são duas barras verticais altas. Com a onda durando
quase um segundo, essas barras ainda estavam cruzando os cartões quando os
cartões já estavam assentando — duas réguas de luz atravessando a peça que
a pessoa deveria estar lendo.
A opacidade cai bem antes do fim da escala: o anel cresce até o dobro do
que se enxerga dele, e é isso que dá a sensação de que a onda continuou
passando depois de sumir. */
@keyframes onda {
0% { opacity: .95; transform: translate(-50%, -50%) scale(.14); }
55% { opacity: .3; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(7); }
}
/* ─── o risco de luz ───────────────────────────────────────
Uma lâmina horizontal que rasga a tela no instante da batida. É o que dá
escala ao impacto: sem ela a cena inteira acontece dentro de um círculo de
300px no meio de uma tela de 1440. */
.choque__risco {
position: absolute; left: 50%; top: 50%; display: block;
width: 100%; height: 3px; opacity: 0;
background: linear-gradient(90deg, transparent, var(--gold-pale) 30%, #FFF6DE 50%, var(--gold-pale) 70%, transparent);
box-shadow: 0 0 26px 5px rgba(240,220,176,.6);
animation: risco .56s var(--ease) var(--impacto) forwards;
}
@keyframes risco {
0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.02) scaleY(2.4); }
14% { opacity: 1; transform: translate(-50%, -50%) scaleX(.55) scaleY(1.6); }
100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.4) scaleY(.25); }
}
/* ─── os estilhaços ───────────────────────────────────────
Reusam o .caco da ignição. O script os cria no instante do impacto e os
solta do centro da tela. */
.choque__cacos { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
/* ─── o tranco ─────────────────────────────────────────────
A .portal inteira sacode, fundo e tudo: sacudir só o conteúdo faria a cena
parecer um elemento tremendo dentro de uma tela parada, e o que se quer é
a tela levando o baque.
Vale lembrar que a .portal também tem `transition: transform` para a saída
(.is-gone). Não há conflito porque uma coisa acontece no primeiro segundo
e a outra só depois do clique — mas se algum dia o tranco passar a valer
junto da saída, é aqui que os dois brigam. */
/* `backwards` e nao `both`: com `both` o transform:none do último quadro
ficaria fixado para sempre, e o .is-gone { transform: scale(1.14) } da
saída do portal nunca sairia do lugar. */
.portal { animation: tranco .42s var(--ease) var(--impacto) backwards; }
@keyframes tranco {
0% { transform: none; }
12% { transform: translate3d(-9px, 5px, 0); }
26% { transform: translate3d(8px, -6px, 0); }
42% { transform: translate3d(-6px, -3px, 0); }
58% { transform: translate3d(5px, 4px, 0); }
74% { transform: translate3d(-3px, -2px, 0); }
100% { transform: none; }
}
.portao {
position: relative; display: block; width: 100%; cursor: pointer;
padding: clamp(20px, 3.4vh, 34px) clamp(16px, 2.4vw, 30px);
text-align: center; isolation: isolate;
background: linear-gradient(180deg, rgba(24,24,30,.72), rgba(12,12,15,.86));
box-shadow: inset 0 0 0 1px var(--border);
clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
transition: transform .42s var(--freada), box-shadow .32s var(--ease), background .32s var(--ease);
/* O atraso sai do --impacto: os portões não "aparecem depois da animação",
eles nascem DA batida. Um número solto aqui se descolaria da cena no
primeiro ajuste de tempo que alguém fizesse lá em cima.
Os +.26s são o tempo que o brasão leva para atravessar do impacto até o
medalhão do cartão (o recuo dura .52s, e ele já está quase transparente
na metade). Com o atraso menor, o cartão inteiro já estava desenhado
enquanto os dois brasões ainda voavam — quatro brasões na tela ao mesmo
tempo, que é exatamente o que a passagem de bastão existe para evitar. */
animation: portao-entra .72s var(--freada) calc(var(--impacto) + .26s) both;
}
/* Cada um volta para o seu lado — o mesmo eixo por onde o brasão dele veio.
É translateX, então funciona igual com os portões lado a lado no desktop e
empilhados no celular: o eixo da animação não depende do eixo do layout. */
.portao--a { animation-name: portao-entra-esq; }
.portao--b { animation-name: portao-entra-dir; animation-delay: calc(var(--impacto) + .32s); }
/* O cartão SE ASSENTA — sobe pouco e cresce pouco. Ele não precisa mais vir
de lado: quem faz o percurso lateral agora é o brasão, que chega e vira o
medalhão dele. Dois movimentos laterais ao mesmo tempo, um por cima do
outro, é o que fazia a cena parecer atropelada. */
@keyframes portao-entra-esq {
from { opacity: 0; transform: translate3d(-14px, 22px, 0) scale(.965); }
to { opacity: 1; transform: none; }
}
@keyframes portao-entra-dir {
from { opacity: 0; transform: translate3d(14px, 22px, 0) scale(.965); }
to { opacity: 1; transform: none; }
}
/* O clarão que segue o cursor. Fica no ::before para não brigar com o
clip-path do próprio botão — herdando o recorte, ele nunca vaza do chanfro. */
.portao::before {
content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0;
background: radial-gradient(420px 300px at var(--mx, 50%) var(--my, 40%), var(--halo), transparent 68%);
clip-path: inherit; pointer-events: none;
transition: opacity .38s var(--ease);
}
.portao:hover, .portao:focus-visible {
transform: translateY(-8px);
box-shadow: inset 0 0 0 1px var(--border-active), 0 26px 60px -28px var(--halo);
background: linear-gradient(180deg, rgba(30,30,38,.82), rgba(14,14,18,.9));
}
.portao:hover::before, .portao:focus-visible::before { opacity: 1; }
.portao:active { transform: translateY(-3px) scale(.99); }
/* Enquanto um portão está em foco, o outro recua. Sem isso os dois pesam
igual e a escolha continua custando o mesmo tempo com o cursor já em cima
de uma delas. :has é a única forma de dizer isso sem JS. */
.portoes:has(.portao:hover) .portao:not(:hover),
.portoes:has(.portao:focus-visible) .portao:not(:focus-visible) {
opacity: .42; filter: saturate(.5);
}
.portao { transition: transform .42s var(--freada), box-shadow .32s var(--ease),
background .32s var(--ease), opacity .32s var(--ease), filter .32s var(--ease); }
/* ─── o medalhão do portão ───────────────────────────────
Hexágono de ouro com o brasão dentro, o mesmo vocabulário do .fusao das
outras páginas — só que aqui é UM brasão por medalhão, porque o assunto
deste portal é justamente separar os dois. */
/* display: block é obrigatório e NÃO é redundante: o medalhão é um
dentro de um , e caixa inline ignora width, aspect-ratio e margem
vertical — o hexágono simplesmente não aparece. */
.portao__selo {
display: block;
position: relative; width: clamp(116px, 19vh, 190px); aspect-ratio: 1;
margin: 0 auto clamp(14px, 2.4vh, 22px);
}
/* ─── por que o aro é DOIS elementos ───────────────────────
O que gira é a LUZ no metal, não o medalhão.
Girar o próprio .portao__aro (que carrega o clip-path hexagonal) gira o
hexágono junto: a cada quadro os vértices dele saem de alinhamento com os
do núcleo e o medalhão aparece como duas peças tortas, uma por cima da
outra. É um bug que só se vê em movimento — um print no ângulo zero passa
limpo.
Então o recorte fica PARADO no pai e a rampa cônica gira num filho maior
que ele. clip-path recorta os descendentes, então a luz nunca vaza. */
.portao__aro {
position: absolute; inset: 0; overflow: hidden;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.portao__aro::before {
content: ''; position: absolute; inset: -40%;
background: conic-gradient(from 0deg,
var(--gold-deep), var(--gold-light) 18%, var(--gold-pale) 26%, var(--gold) 42%,
var(--gold-deep) 58%, var(--gold-light) 76%, var(--gold-deep) 100%);
animation: aro-gira 14s linear infinite;
}
@keyframes aro-gira { to { transform: rotate(360deg); } }
.portao__core {
position: absolute; inset: 3px;
background: radial-gradient(circle at 50% 34%, #1a1a20, #0b0b0e 72%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: grid; place-items: center; overflow: hidden;
}
.portao__core img {
width: 62%; height: 62%; object-fit: contain;
filter: drop-shadow(0 4px 14px rgba(0,0,0,.7));
transition: transform .42s var(--freada);
}
.portao:hover .portao__core img { transform: scale(1.07); }
/* halo por trás do medalhão: é o único lugar do portal onde a cor da
operação aparece em cheio, e é o que diferencia os dois lados de relance */
.portao__selo::before {
content: ''; position: absolute; inset: -28%; z-index: -1;
background: radial-gradient(circle, var(--halo), transparent 66%);
animation: halo-respira 3.6s var(--ease) infinite;
}
@keyframes halo-respira {
0%,100% { opacity: .62; transform: scale(1); }
50% { opacity: 1; transform: scale(1.09); }
}
/* varredura de luz sobre o brasão, presa ao recorte do hexágono */
.portao__core::after {
content: ''; position: absolute; top: -60%; left: 0; width: 40%; height: 220%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 45%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.16) 55%, transparent);
animation: shine-sweep 5.4s var(--ease) infinite;
}
/* ─── texto do portão ───
.portao__txt é um e precisa virar bloco: no mobile ele é uma das
duas colunas do grid do portão, e uma caixa inline não pode ser item de
grid sem virar bloco anônimo — o que funciona, mas tira dela a capacidade
de receber alinhamento próprio. */
.portao__txt { display: block; }
.portao__desig {
display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 4.4px;
text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.portao__nome {
display: block; font-family: var(--font-title);
font-size: clamp(24px, 3.6vw, 42px); font-weight: 800; line-height: .98;
letter-spacing: 1px; text-transform: uppercase; color: var(--text);
}
.portao__sigla {
display: block; font-family: var(--font-title);
font-size: clamp(28px, 4.4vw, 50px); font-weight: 800; line-height: 1;
letter-spacing: 3px; text-transform: uppercase;
background: linear-gradient(180deg, var(--gold-pale), var(--gold) 55%, var(--gold-dark));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.portao__corp {
display: block; margin-top: 10px; color: var(--text-dim);
font-size: clamp(12.5px, 1.5vw, 14.5px); letter-spacing: .6px;
}
.portao__vagas {
display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
height: 30px; padding: 0 13px;
background: rgba(175,146,86,.08); box-shadow: inset 0 0 0 1px var(--border);
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
font-size: 11px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--text-dim);
}
.portao__vagas b { font-family: var(--font-title); color: var(--gold-light); font-size: 13px; letter-spacing: 1px; }
/* A seta. Some no repouso e desliza para dentro do portão no hover: é o
"entrar" que o botão não diz por escrito. */
/* flex e não inline-flex: a seta tem que cair numa linha própria, senão ela
fica encostada na pastilha de vagas como se fosse legenda dela. */
.portao__entrar {
display: flex; justify-content: center; align-items: center; gap: 10px;
margin-top: clamp(14px, 2.4vh, 22px);
font-size: 11.5px; font-weight: 700; letter-spacing: 3px;
text-transform: uppercase; color: var(--gold-light);
opacity: .55; transition: opacity var(--t), gap var(--t);
}
.portao:hover .portao__entrar, .portao:focus-visible .portao__entrar { opacity: 1; gap: 16px; }
.portao__entrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
/* ─── rodapé do portal ─── */
.portal__bottom { text-align: center; animation: entra-portal .8s var(--ease) both calc(var(--impacto) + .6s); }
.portal__nota {
font-size: 11.5px; font-weight: 700; letter-spacing: 2.6px;
text-transform: uppercase; color: var(--text-mute);
}
.portal__nota b { color: var(--gold); font-weight: 700; }
/* ─── A IGNIÇÃO ─────────────────────────────────────────────
O que acontece entre o clique e a página.
O portão escolhido cresce e clareia enquanto o outro cai; ao mesmo tempo o
.portal__flash abre do centro do portão clicado. A posição do clarão vem do
próprio elemento (--fx/--fy, escritas pelo script), porque acender no meio
da tela quando o clique foi na coluna da esquerda lê como coincidência, e
não como consequência. */
.portal__flash {
position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%),
#FFF3D6 0%, var(--halo, rgba(196,112,63,.5)) 16%, transparent 46%);
}
.portal.is-igniting .portal__flash { animation: ignicao .72s var(--ease) forwards; }
@keyframes ignicao {
0% { opacity: 0; transform: scale(.4); }
22% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(2.2); }
}
.portal.is-igniting .portao.is-chosen {
transform: translateY(-14px) scale(1.06);
box-shadow: inset 0 0 0 1px var(--gold-pale), 0 0 80px -10px var(--halo);
opacity: 1; filter: none;
}
.portal.is-igniting .portao:not(.is-chosen) { opacity: 0; transform: translateY(26px) scale(.9); }
.portal.is-igniting .portal__top,
.portal.is-igniting .portal__bottom,
.portal.is-igniting .portoes__ou { opacity: 0; transition: opacity .3s var(--ease); }
/* O portal sai por cima, e não por baixo: subir revela a página como quem
levanta uma cortina — descer pareceria a página empurrando o portal para
fora, e o gesto de escolha foi para dentro. */
.portal.is-gone {
opacity: 0; transform: scale(1.14); visibility: hidden;
}
/* enquanto o portal está de pé, a página atrás não rola nem recebe foco */
html.is-portal, html.is-portal body { overflow: hidden; height: 100%; }
html.is-portal .site { opacity: 0; }
.site { transition: opacity .5s var(--ease) .1s; }
/* A cascata da hero fica PAUSADA, e não escondida: sem isto ela roda inteira
atrás do portal e quem escolhe uma operação recebe a dobra já montada, sem
entrada nenhuma. Pausar a animação em vez de reiniciá-la por JS mantém a
coreografia num lugar só — o CSS. */
html.is-portal .anim { animation-play-state: paused; }
/* A dock e o WhatsApp moram FORA do .site (são camadas fixas da janela, não
conteúdo da página), então o inert não os alcança. Escondê-los enquanto o
portal está de pé é o que impede o Tab de sair do segundo portão e pousar
num botão de checkout de uma operação que ninguém escolheu ainda. */
html.is-portal .dock, html.is-portal .float { display: none; }
/* O portal não rola: enquanto ele está de pé, não existe página atrás para o
visitante espiar. Em tela muito baixa — celular deitado, janela cortada —
isso viraria conteúdo decepado, e aí a rolagem volta. */
@media (max-height: 620px) {
.portal { overflow-y: auto; }
.portal__chamada h1 { font-size: clamp(22px, 4vw, 34px); }
.portal__chamada p { display: none; }
}
/* Estilhaços da ignição: os mesmos do medalhão das outras páginas, aqui
nascendo do portão escolhido. Origem, ângulo, distância e tamanho vêm do
script; a animação é CSS. */
.portal__cacos { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.caco {
position: absolute; left: var(--ox); top: var(--oy);
width: var(--s); height: var(--s); border-radius: 50%;
background: radial-gradient(circle at 38% 32%, #FFF3D6, var(--cor) 55%, transparent 76%);
box-shadow: 0 0 calc(var(--s) * 3) var(--cor);
opacity: 0; animation: caco-voa var(--dur) var(--ease) forwards;
}
@keyframes caco-voa {
0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); }
}
/* =========================================================
NAVBAR
========================================================= */
.progress {
position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 320;
background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-pale));
box-shadow: 0 0 12px rgba(175,146,86,.7);
}
.header {
position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 300;
display: flex; align-items: center;
background: linear-gradient(180deg, rgba(10,10,11,.72), rgba(10,10,11,.30));
backdrop-filter: blur(14px) saturate(130%);
-webkit-backdrop-filter: blur(14px) saturate(130%);
transition: height var(--t), background var(--t), box-shadow var(--t);
}
.header::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--border-active) 20%, var(--border-active) 80%, transparent);
opacity: .55; transition: opacity var(--t);
}
.header.is-stuck {
height: 66px; background: rgba(9,9,10,.94);
box-shadow: 0 14px 40px -18px rgba(0,0,0,.95);
}
.header.is-stuck::after { opacity: 1; }
.header__inner {
display: flex; align-items: center; gap: 22px;
width: min(100% - 36px, 1320px); margin-inline: auto;
}
/* A marca é o LEÃO + o nome em Oxanium. O emblema já vem com alfa, então o
desenho recortado é o próprio da sigla vive DENTRO do do título e do
próprio parágrafo. Com o seletor de descendente ele também virava bloco,
e "Videoaulas e PDFs da PMPE" quebrava com a sigla sozinha numa linha. */
.item__txt > span { display: block; margin-top: 5px; color: var(--text-dim); font-size: 14px; line-height: 1.52; }
/* =========================================================
OS EXTRAS — o bloco de bônus
========================================================= */
.extras {
position: relative; margin-top: 26px; padding: 38px 34px;
background: linear-gradient(180deg, rgba(29,24,15,.9), rgba(15,14,12,.94));
box-shadow: inset 0 0 0 1px var(--border-active);
clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.extras::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(600px 300px at 50% 0%, rgba(175,146,86,.1), transparent 70%);
clip-path: inherit;
}
.extras__head { position: relative; text-align: center; margin-bottom: 28px; }
.extras__head h3 {
font-family: var(--font-title); font-size: clamp(22px, 3.2vw, 32px); font-weight: 800;
letter-spacing: 1px; text-transform: uppercase; color: var(--text); margin-top: 12px;
}
.extras__head p { margin-top: 10px; color: var(--text-dim); font-size: 15.5px; }
.extras__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.extra {
position: relative; padding: 22px 18px; text-align: center; isolation: isolate;
background: rgba(10,10,11,.6); box-shadow: inset 0 0 0 1px var(--border);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
transition: transform var(--t), box-shadow var(--t);
}
.extra::before {
content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
background: radial-gradient(220px 180px at var(--mx, 50%) var(--my, 50%), rgba(175,146,86,.16), transparent 70%);
clip-path: inherit; transition: opacity var(--t);
}
.extra:hover::before { opacity: 1; }
.extra:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--border-active); }
/* display: block é o que dá tamanho ao ícone: ele é um , e caixa inline
ignora width/height — o SVG de dentro, pedindo 100%, resolveria contra nada
e desenharia do tamanho da caixa inteira. */
.extra__ico { display: block; width: 38px; height: 38px; margin: 0 auto 14px; color: var(--gold); }
.extra__ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.extra b {
display: block; font-family: var(--font-title); font-size: 15.5px; font-weight: 800;
letter-spacing: .6px; color: var(--gold-light); line-height: 1.25;
}
/* Classe própria, e não ".extra > span": o ícone TAMBÉM é um span filho
direto, e qualquer seletor que pegue os dois pinta o ícone com a cor e
o tamanho da legenda — era por isso que ele saía cinza em vez de ouro. */
.extra__txt { display: block; margin-top: 7px; color: var(--text-mute); font-size: 13.5px; line-height: 1.5; }
/* =========================================================
BÔNUS ESPECIAL — os 10 primeiros
---------------------------------------------------------
A peça mais alta da página depois da hero, e a única que
usa cor de acento em cheio. É escassez REAL (são dez vagas
de teste da plataforma nova), então ela pode gritar — o
resto da página não precisa competir com ela porque nada
mais aqui tem prazo.
Três camadas de movimento, e cada uma faz um trabalho:
· a varredura de radar dá "operação em curso" ao fundo
· a luz correndo na moldura diz "isto está aberto agora"
· os dez pips acendendo em fila dizem "são dez, e acabam"
⚠️ Os pips NÃO são um contador de vagas restantes. Eles
mostram o tamanho do lote (dez), não quantas sobraram.
Um "faltam 3" que não vem de lugar nenhum é número
inventado na cara do comprador, e este é o bloco da página
onde ele mais confia no que lê.
========================================================= */
.bonus { position: relative; z-index: 2; padding: 96px 0; overflow: hidden; }
.bonus::before {
content: ''; position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(760px 420px at 50% 0%, var(--op-halo), transparent 66%),
linear-gradient(180deg, #0B0B0E, #101014 52%, #0B0B0E);
}
/* fios de ouro nas duas emendas: o bloco tem que ler como peça encaixada na
página, e não como banner colado por cima dela */
/* A marca também aqui: é o bloco mais alto da página e o único sem seção
irmã por perto, e sem ela o fundo dele fica liso comparado ao resto. */
.bonus__marca {
position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .07;
background: var(--op-marca) var(--op-marca-x) 50% / auto 640px no-repeat;
mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.bonus::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(90deg, transparent, var(--border-active), transparent) top / 100% 1px no-repeat,
linear-gradient(90deg, transparent, var(--border-active), transparent) bottom / 100% 1px no-repeat;
}
/* ─── a varredura de radar ───────────────────────────────
Um facho cônico girando devagar atrás de tudo. A máscara radial apaga o
centro e a borda: sem ela o vértice do cone vira um ponto duro no meio do
bloco, e o facho corta os cantos em diagonal reta. */
.bonus__radar {
position: absolute; left: 50%; top: 50%; z-index: 0;
width: 150vmax; height: 150vmax; transform: translate(-50%, -50%);
pointer-events: none; opacity: .5;
background: conic-gradient(from 0deg,
transparent 0 72%, color-mix(in srgb, var(--op-accent) 26%, transparent) 84%,
color-mix(in srgb, var(--gold) 22%, transparent) 92%, transparent 100%);
mask-image: radial-gradient(circle at 50% 50%, transparent 4%, #000 26%, transparent 62%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 4%, #000 26%, transparent 62%);
animation: radar 18s linear infinite;
}
@keyframes radar { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* As brasas da página são `fixed` e sobem a viewport inteira; estas são
`absolute` dentro da seção, e por isso precisam de um percurso próprio em
px. Com o `-104vh` do original elas venceriam o bloco em dois terços da
animação e passariam o resto do ciclo invisíveis acima dele. */
.bonus__brasas { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bonus__brasas .brasa { animation-name: brasa-sobe-curta; }
@keyframes brasa-sobe-curta {
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
8% { opacity: var(--op); }
25% { transform: translate3d(12px, -190px, 0) scale(.94); }
50% { transform: translate3d(-9px, -380px, 0) scale(.84); }
75% { opacity: calc(var(--op) * .5);
transform: translate3d(11px, -560px, 0) scale(.68); }
100% { opacity: 0; transform: translate3d(-4px, -740px, 0) scale(.5); }
}
.bonus > .container { position: relative; z-index: 3; }
/* ─── a moldura com a luz correndo ───────────────────────
Mesmo princípio do aro dos medalhões: o recorte fica parado e a rampa
cônica gira num filho maior. A diferença é que aqui o núcleo escuro entra
por cima recuado 2px, e o que sobra nas beiradas é a luz — é assim que se
faz uma borda animada sem `border-image`, que não aceita clip-path. */
.bonus__moldura {
position: relative; isolation: isolate; overflow: hidden;
clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}
.bonus__moldura::before {
content: ''; position: absolute; inset: -60%; z-index: 0;
background: conic-gradient(from 0deg,
rgba(175,146,86,.26) 0 48%, var(--gold) 64%, var(--gold-pale) 74%,
var(--gold) 84%, rgba(175,146,86,.26) 96% 100%);
animation: aro-gira 7s linear infinite;
}
.bonus__moldura::after {
content: ''; position: absolute; inset: 3px; z-index: 1;
background: linear-gradient(165deg, #16161C, #0C0C10 60%, #131218);
clip-path: polygon(0 0, calc(100% - 27px) 0, 100% 27px, 100% 100%, 27px 100%, 0 calc(100% - 27px));
}
.bonus__inner { position: relative; z-index: 2; padding: 0 0 clamp(30px, 5vw, 46px); }
/* ─── a fita corrida do topo ─────────────────────────────
Ela é o cabeçalho da moldura: uma tarja de ouro com "BÔNUS ESPECIAL"
repetido, correndo devagar. Repetir a frase é o que permite a faixa rolar
sem nunca mostrar um vão. */
.bonus__fita {
display: block; overflow: hidden; margin-bottom: clamp(26px, 4vw, 40px);
background: linear-gradient(90deg, var(--gold-dark), var(--gold) 30%, var(--gold-pale) 50%, var(--gold) 70%, var(--gold-dark));
padding: 9px 0;
}
.bonus__fita span {
display: flex; width: max-content; gap: 34px;
animation: marquee 22s linear infinite;
font-family: var(--font-title); font-size: 12px; font-weight: 800;
letter-spacing: 4px; text-transform: uppercase; color: #0B0A08; white-space: nowrap;
}
.bonus__fita i { font-style: normal; opacity: .55; }
/* ─── o corpo ─── */
.bonus__grid {
display: grid; grid-template-columns: 1.25fr .9fr;
gap: clamp(26px, 4vw, 54px); align-items: center;
padding-inline: clamp(22px, 4vw, 46px);
}
.bonus__grid h2 {
margin-top: 14px;
font-family: var(--font-title);
font-size: clamp(27px, 4vw, 46px); font-weight: 800; line-height: 1.03;
letter-spacing: 1px; text-transform: uppercase; color: var(--text);
}
.bonus__lead { margin-top: 16px; color: var(--text-dim); font-size: 16.5px; line-height: 1.68; }
.bonus__lead strong { color: var(--gold-light); }
.bonus__lista { list-style: none; margin-top: 22px; display: grid; gap: 11px; }
.bonus__lista li {
display: flex; align-items: flex-start; gap: 12px;
color: var(--text-dim); font-size: 15.5px; line-height: 1.55;
}
.bonus__lista svg {
flex-shrink: 0; width: 17px; height: 17px; margin-top: 4px;
fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.bonus__lista b { color: var(--text); }
/* ─── a regra dos dez, por escrito ────────────────────────
Deliberadamente sóbrio: sem ouro no fundo, sem chanfro, sem brilho. Ele é o
contrapeso do resto do bloco — tudo ali em volta empurra, e este pedaço
segura. Se ele parecer mais um argumento de venda, deixa de fazer o
trabalho dele, que é impedir alguém de comprar achando que o acesso
antecipado está garantido só porque a página está no ar. */
.regra {
margin-top: 26px; padding: 18px 20px;
background: rgba(0,0,0,.28);
border-left: 2px solid var(--border-active);
}
.regra__cab {
display: block; margin-bottom: 10px;
font-size: 10.5px; font-weight: 700; letter-spacing: 3px;
text-transform: uppercase; color: var(--text-mute);
}
.regra__lista { list-style: none; display: grid; gap: 9px; }
.regra__lista li {
position: relative; padding-left: 16px;
color: var(--text-mute); font-size: 13.5px; line-height: 1.55;
}
.regra__lista li::before {
content: ''; position: absolute; left: 0; top: .62em;
width: 5px; height: 5px; background: var(--gold-deep); transform: rotate(45deg);
}
.regra__lista b { color: var(--text-dim); font-weight: 700; }
/* ─── o painel dos dez ─────────────────────────────────── */
.dez {
position: relative; text-align: center; padding: clamp(24px, 3.4vw, 34px) 22px;
background: rgba(8,8,10,.62);
box-shadow: inset 0 0 0 1px var(--border-active);
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.dez::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(240px 180px at 50% 0%, var(--op-halo), transparent 70%);
clip-path: inherit;
}
.dez__label {
position: relative; display: block;
font-size: 10.5px; font-weight: 700; letter-spacing: 4px;
text-transform: uppercase; color: var(--gold);
}
/* O "10" usa a mesma lâmina de luz da manchete da hero: a luz É o
preenchimento do texto, recortada por background-clip. Uma varredura branca
por cima leria como um retângulo passando atrás dos algarismos. */
.dez__num {
position: relative; display: block; margin: 6px 0 2px;
font-family: var(--font-title);
font-size: clamp(76px, 11vw, 128px); font-weight: 800; line-height: .9;
letter-spacing: -2px;
background-image:
linear-gradient(100deg, transparent 0%, rgba(255,255,255,.95) 45%, rgba(255,255,255,.95) 55%, transparent 100%),
linear-gradient(180deg, var(--gold-pale), var(--gold) 52%, var(--gold-dark));
background-size: 55% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: -80% 0, 0 0;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: brilho-letras 4.2s var(--ease) infinite;
filter: drop-shadow(0 6px 26px var(--op-halo));
}
.dez__sub {
position: relative; display: block; margin-bottom: 20px;
font-family: var(--font-title); font-size: 14px; font-weight: 700;
letter-spacing: 3px; text-transform: uppercase; color: var(--text);
}
/* ─── os dez pips ─────────────────────────────────────────
Dez hexágonos numa fila, acendendo em cascata. O atraso sai do --i escrito
no HTML (0 a 9) e não de JS: são dez nós estáticos, e uma dependência de
script para acender enfeite é dívida sem contrapartida.
O ciclo é longo (5s) com a onda ocupando pouco dele: dez luzes piscando
sem folga viram alarme, e alarme numa página de venda lê como pop-up. */
.pips {
position: relative; display: flex; justify-content: center;
flex-wrap: wrap; gap: 8px; margin-bottom: 24px;
}
.pips i {
width: 21px; height: 24px; display: block;
background: rgba(175,146,86,.30);
box-shadow: inset 0 0 0 1px var(--border-active);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
animation: pip 5s var(--ease) infinite;
animation-delay: calc(var(--i) * .1s);
}
@keyframes pip {
0%, 55%, 100% { background: rgba(175,146,86,.30); box-shadow: inset 0 0 0 1px var(--border-active); }
20% { background: var(--gold-pale);
box-shadow: 0 0 16px 2px var(--op-halo), inset 0 0 0 1px var(--gold-pale); }
}
.dez__nota {
position: relative; display: block; margin-top: 16px;
font-size: 11.5px; font-weight: 700; letter-spacing: 1.8px;
text-transform: uppercase; color: var(--text-mute); line-height: 1.5;
}
/* ─── a etiqueta de bônus na hero ─────────────────────────
Uma segunda pastilha embaixo do CTA, com o acento da operação no ponto e a
borda pulsando devagar. Ela repete o bloco lá de baixo de propósito: quem
entra pela hero e sai na primeira dobra precisa ter visto que existe um
lote de dez. */
.flag-bonus {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 16px; padding: 9px 16px;
background: rgba(175,146,86,.07);
box-shadow: inset 0 0 0 1px var(--border-active);
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
font-size: 11.5px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--text-dim); line-height: 1.45;
transition: box-shadow var(--t), color var(--t);
}
a.flag-bonus:hover { color: var(--gold-light); box-shadow: inset 0 0 0 1px var(--gold); }
.flag-bonus b { color: var(--gold-light); font-weight: 800; }
.flag-bonus i {
flex-shrink: 0; width: 8px; height: 9px; display: block; background: var(--gold);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
animation: pip-solo 2.4s var(--ease) infinite;
}
@keyframes pip-solo {
0%, 100% { background: var(--gold-deep); }
50% { background: var(--gold-pale); box-shadow: 0 0 10px 1px var(--op-halo); }
}
/* =========================================================
O INVESTIMENTO
---------------------------------------------------------
A conta é de verdade: são dois eixos de dado (linha × valor) com
cabeçalho, e é o que faz um leitor de tela anunciar "Total: 637 reais" em
vez de despejar números soltos.
Ela repete o checkout LINHA POR LINHA, na mesma ordem e com os mesmos
valores. Não é excesso de zelo: quem clica no CTA cai numa tela que mostra
exatamente isso, e qualquer arredondamento diferente aqui vira desconfiança
no momento exato em que a pessoa vai digitar o cartão.
========================================================= */
.preco__caixa {
max-width: 620px; margin: 0 auto;
background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
box-shadow: inset 0 0 0 1px var(--border-active);
clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
padding: clamp(26px, 4vw, 40px) clamp(20px, 3.4vw, 38px);
}
/* ─── o número grande é a PARCELA ─────────────────────────
O valor cheio entra riscado ACIMA dela, em corpo pequeno, e o à vista
embaixo. Na ordem inversa — total na frente, parcela na letra miúda — o
primeiro número que a pessoa lê é o maior da página, e ela decide antes de
descobrir que dá para dividir. */
.preco__cab {
display: block; text-align: center; padding-bottom: 20px;
font-size: 10.5px; font-weight: 700; letter-spacing: 4px;
text-transform: uppercase; color: var(--gold);
}
.preco__destaque { text-align: center; }
.preco__de {
display: block; font-size: 14px; letter-spacing: 1px; color: var(--text-mute);
}
.preco__de s { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--danger); }
.preco__parcela {
display: flex; align-items: baseline; justify-content: center; gap: 10px;
margin: 4px 0 6px; line-height: .95;
}
.preco__parcela i {
font-family: var(--font-title); font-style: normal;
font-size: clamp(20px, 3.4vw, 30px); font-weight: 700; letter-spacing: 1px;
color: var(--text-dim);
}
.preco__parcela b {
font-family: var(--font-title);
font-size: clamp(46px, 8.4vw, 82px); font-weight: 800; letter-spacing: -2px;
background: linear-gradient(180deg, var(--gold-pale), var(--gold) 55%, var(--gold-dark));
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 6px 22px var(--op-halo));
}
.preco__vista {
display: block; font-size: 14.5px; color: var(--text-dim); letter-spacing: .4px;
}
.preco__vista b { color: var(--gold-light); }
/* ─── a conta, fechada por padrão ─────────────────────────
Ela precisa existir: é a mesma tela que a pessoa vai ver no checkout, e
bater linha por linha é o que sustenta a confiança no número grande. Mas
aberta ela põe quatro valores entre o preço e o botão, e o valor cheio
volta a ser a primeira coisa lida. */
.preco__conta { margin-top: 22px; }
.preco__conta summary {
list-style: none; cursor: pointer; text-align: center; padding: 11px;
box-shadow: inset 0 0 0 1px var(--border-soft);
clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
font-size: 11.5px; font-weight: 700; letter-spacing: 1.8px;
text-transform: uppercase; color: var(--text-mute);
transition: color var(--t), box-shadow var(--t);
}
.preco__conta summary::-webkit-details-marker { display: none; }
.preco__conta summary:hover { color: var(--gold-light); box-shadow: inset 0 0 0 1px var(--border-active); }
.preco__conta[open] summary { color: var(--gold-light); margin-bottom: 6px; }
.conta { width: 100%; border-collapse: collapse; }
.conta th, .conta td { padding: 12px 0; border-bottom: 1px solid var(--border-soft); text-align: left; }
.conta td { text-align: right; font-variant-numeric: tabular-nums; }
.conta tbody th { font-weight: 600; color: var(--text-dim); font-size: 14.5px; }
.conta tbody th small { display: block; font-size: 12px; color: var(--text-mute); font-weight: 500; }
.conta tbody td { color: var(--text); font-size: 15px; }
.conta .risco { color: var(--text-dim); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--danger); }
.conta .abate { color: var(--gold-light); }
.conta .off {
display: inline-block; margin-left: 10px; padding: 2px 8px;
background: linear-gradient(120deg, var(--gold-dark), var(--gold));
color: #0B0A08; font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
vertical-align: 2px;
}
.conta .total th, .conta .total td { border-bottom: 0; padding-top: 16px; }
.conta .total th {
font-family: var(--font-title); font-size: 12.5px; font-weight: 800;
letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold);
}
.conta .total td {
font-family: var(--font-title); font-size: 24px; font-weight: 800;
letter-spacing: 0; color: var(--gold-light);
}
/* ─── a economia ──────────────────────────────────────────
Era uma linha de 12px, do tamanho de uma nota de rodapé, logo abaixo do
maior número da página — e o abatimento é justamente o argumento que a
parcela sozinha não faz. Agora é o segundo número em corpo, atrás só da
própria parcela.
Ela NÃO repete o ouro em degradê da parcela nem o fundo cheio do botão:
duas peças no mesmo canal visual, empilhadas, viram uma disputa em que o
botão perde. Aqui o número é ouro chapado sobre caixa escura, e o que
chama o olho é o tamanho e a varredura de luz — não mais uma superfície
dourada. */
.economia {
margin-top: 20px; padding: 15px 16px 17px; text-align: center;
background:
radial-gradient(120% 160% at 50% 0%, rgba(175,146,86,.16), transparent 70%),
rgba(175,146,86,.06);
box-shadow: inset 0 0 0 1px var(--border-active);
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.economia__cab {
display: block; margin-bottom: 2px;
font-size: 10.5px; font-weight: 700; letter-spacing: 3.6px;
text-transform: uppercase; color: var(--gold);
}
.economia__val {
display: block; font-family: var(--font-title);
font-size: clamp(30px, 5.4vw, 44px); font-weight: 800;
letter-spacing: -1px; line-height: 1.05; color: var(--gold-light);
text-shadow: 0 4px 26px var(--op-halo);
}
/* a varredura passa por dentro da caixa; sem isto ela vazaria pelo chanfro */
.economia.shine { overflow: hidden; }
.preco__cta { margin-top: 26px; }
.preco__nota {
display: block; margin-top: 14px; text-align: center;
font-size: 12px; letter-spacing: 1.2px; color: var(--text-mute); line-height: 1.6;
}
/* =========================================================
O PROFESSOR
========================================================= */
.duo { display: grid; grid-template-columns: .85fr 1.15fr; gap: 54px; align-items: center; }
.duo__foto { position: relative; }
.duo__foto img {
width: 100%;
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.duo__foto::before {
content: ''; position: absolute; inset: -6%; z-index: -1;
background: radial-gradient(circle at 50% 40%, var(--op-halo), transparent 68%);
}
/* a placa com o nome, encostada na base da foto */
.duo__placa {
position: absolute; left: 18px; right: 18px; bottom: 18px;
padding: 14px 18px; text-align: center;
background: rgba(9,9,11,.88);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: inset 0 0 0 1px var(--border-active);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.duo__placa b {
display: block; font-family: var(--font-title); font-size: 17px; font-weight: 800;
letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light);
}
.duo__placa span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-mute); }
.duo__texto p { margin-top: 18px; color: var(--text-dim); font-size: 16.5px; line-height: 1.7; }
.duo__texto p strong { color: var(--gold-light); }
.duo__marcas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.duo__marcas span {
display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
background: rgba(175,146,86,.07); box-shadow: inset 0 0 0 1px var(--border);
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim);
}
/* =========================================================
COMPARATIVO
---------------------------------------------------------
O único bloco arredondado da página, e é escolha, não descuido: o resto do
sistema é chanfrado — canto cortado em 45°, linguagem de operação — e o
chanfro serve bem a peças que precisam de tensão. Uma tabela de comparação
precisa do contrário. Ela é a peça que a pessoa lê devagar, linha por
linha, pesando dois lados; canto macio e linha larga é o que a deixa ser
lida em vez de admirada.
No celular ela deixa de ser tabela e vira pilha de cartões. Ver o bloco
responsivo lá embaixo — é lá que mora a parte que mais importa, porque é
por lá que quase todo mundo lê esta página.
========================================================= */
.vs-wrap {
max-width: 1000px; margin-inline: auto;
border-radius: 20px; overflow: hidden;
background: linear-gradient(180deg, #16161C, #101014);
box-shadow: inset 0 0 0 1px var(--border), 0 30px 60px -40px rgba(0,0,0,.9);
}
.vs { width: 100%; border-collapse: collapse; }
.vs__cab {
padding: 20px 24px; text-align: left; vertical-align: bottom;
font-family: var(--font-title); font-size: 12.5px; font-weight: 800;
letter-spacing: 2.6px; text-transform: uppercase; color: var(--text-mute);
}
.vs__cab--sim { color: var(--gold); }
.vs thead th:first-child { width: 24%; }
.vs tbody th {
padding: 18px 24px; text-align: left; vertical-align: middle;
font-family: var(--font-title); font-size: 15px; font-weight: 700;
letter-spacing: .3px; color: var(--text); line-height: 1.3;
}
.vs td { padding: 18px 24px; vertical-align: middle; font-size: 15px; line-height: 1.45; }
/* Zebra em vez de grade de bordas: numa tabela de sete linhas e três colunas
é o que segura o olho na linha certa sem encher a peça de fios. */
.vs tbody tr:nth-child(even) { background: rgba(255,255,255,.018); }
.vs tbody tr + tr th, .vs tbody tr + tr td { border-top: 1px solid var(--border-soft); }
/* A coluna da operação é a que interessa, e ela ganha fundo próprio de cima a
baixo — não um fio de cada lado, que num contêiner arredondado bateria de
frente com o raio nos quatro cantos. */
.vs__sim { color: var(--text); background: rgba(175,146,86,.06); width: 33%; }
.vs__nao { color: var(--text-mute); width: 33%; }
/* O visto e o xis em disco. São a leitura de relance da tabela inteira: quem
não lê uma linha sequer entende a comparação só pela coluna de discos.
`float` e não flex: o texto de duas linhas encosta embaixo do disco em vez
de ficar preso numa coluna estreita ao lado dele. */
.vs__marca {
float: left; width: 24px; height: 24px; margin: 1px 11px 0 0;
display: grid; place-items: center; border-radius: 50%;
}
.vs__marca svg { width: 12px; height: 12px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vs__sim .vs__marca { background: rgba(175,146,86,.16); box-shadow: inset 0 0 0 1px var(--border-active); }
.vs__sim .vs__marca svg { stroke: var(--gold-light); }
.vs__nao .vs__marca { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.vs__nao .vs__marca svg { stroke: var(--text-mute); }
/* =========================================================
FAQ
========================================================= */
.faq { max-width: 880px; margin-inline: auto; display: grid; gap: 12px; }
.faq__item {
background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
box-shadow: inset 0 0 0 1px var(--border);
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
transition: box-shadow var(--t);
}
.faq__item[open] { box-shadow: inset 0 0 0 1px var(--border-active); }
.faq__item summary {
position: relative; list-style: none; cursor: pointer;
padding: 22px 62px 22px 26px;
font-family: var(--font-title); font-size: 17px; font-weight: 700;
letter-spacing: 1px; color: var(--text); transition: color var(--t);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-light); }
.faq__item summary::after {
content: '+'; position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
font-size: 24px; font-weight: 400; color: var(--gold); transition: transform var(--t);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { padding: 0 26px 24px; color: var(--text-dim); font-size: 16px; line-height: 1.7; }
.faq__item strong { color: var(--gold-light); }
/* =========================================================
CTA FINAL
========================================================= */
.final { position: relative; z-index: 2; padding: 116px 0; overflow: hidden; text-align: center; }
.final::before {
content: ''; position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(900px 520px at 50% 100%, var(--op-halo), transparent 68%),
linear-gradient(180deg, var(--bg), #0D0D10);
}
.final::after {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
background: linear-gradient(90deg, transparent, var(--border-active), transparent);
}
.final__marca {
position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07;
background: var(--op-marca) var(--op-marca-x) 50% / auto 620px no-repeat;
mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.final__inner { position: relative; z-index: 3; }
.final .selo { margin-top: 0; margin-bottom: 34px; }
.final h2 {
font-family: var(--font-title);
font-size: clamp(30px, 4.8vw, 54px); font-weight: 800; line-height: 1.04;
letter-spacing: 1px; text-transform: uppercase; color: var(--text);
}
.final p { margin: 22px auto 34px; max-width: 60ch; color: var(--text-dim); font-size: 17px; }
.final__note {
display: block; margin-top: 18px; font-size: 12.5px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase; color: var(--text-mute);
}
/* a saída para a outra operação, no fim da página: quem leu tudo e é da outra
corporação não pode ter que voltar ao topo para descobrir que ela existe */
.final__troca {
display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
font-size: 12.5px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--text-mute); cursor: pointer;
border-bottom: 1px solid var(--border-soft); padding-bottom: 3px;
transition: color var(--t), border-color var(--t);
}
.final__troca:hover { color: var(--gold-light); border-color: var(--border-active); }
/* =========================================================
RODAPÉ
========================================================= */
.footer { position: relative; z-index: 2; background: #08080A; border-top: 1px solid var(--border); padding: 62px 0 0; }
.footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 44px; }
.footer__leao { display: block; width: 74px; }
.footer__brand p { margin: 18px 0 20px; color: var(--text-dim); font-size: 15px; font-style: italic; max-width: 40ch; line-height: 1.6; }
.footer__social { display: flex; flex-wrap: wrap; gap: 10px; }
.footer__social a {
width: 38px; height: 38px; display: grid; place-items: center;
color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--border);
clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
transition: color var(--t), box-shadow var(--t), background var(--t);
}
.footer__social a:hover { color: var(--gold); box-shadow: inset 0 0 0 1px var(--border-active); background: rgba(175,146,86,.08); }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__col h4 {
font-family: var(--font-title); font-size: 13px; font-weight: 800;
letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.footer__col a, .footer__col button {
display: block; padding: 6px 0; color: var(--text-dim); font-size: 15px;
text-align: left; cursor: pointer; transition: color var(--t);
}
.footer__col a:hover, .footer__col button:hover { color: var(--gold-light); }
.footer__bar {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
padding: 22px 0 34px; border-top: 1px solid var(--border-soft);
font-size: 13.5px; letter-spacing: .6px; color: var(--text-mute);
}
.footer__bar strong { color: var(--text-dim); font-weight: 700; }
.footer__cnpj { letter-spacing: 1.4px; }
/* =========================================================
BARRA FIXA (mobile) — 87% do tráfego chega por aqui
---------------------------------------------------------
Ela só entra depois da hero: antes disso o próprio CTA da dobra já está na
tela e a barra só cobriria conteúdo.
========================================================= */
.dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 280;
display: none; align-items: center; gap: 14px;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: rgba(9,9,10,.95);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--border-active);
/* visibility junto do transform: só deslocar deixaria o botão fora da tela
ainda alcançável pelo Tab. */
transform: translateY(110%); visibility: hidden;
transition: transform .35s var(--ease), visibility .35s;
}
.dock.is-on { transform: none; visibility: visible; }
/* As duas linhas nunca quebram: a dock tem altura fixa e um nome de operação
em três linhas empurraria o botão para fora dela. O que não couber some no
fim da linha, e o botão continua no lugar. */
.dock__info { flex: 1; min-width: 0; }
.dock__info b, .dock__info span {
display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dock__info b { font-family: var(--font-title); font-size: 13.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-light); }
.dock__info span { font-size: 11.5px; letter-spacing: 1.4px; color: var(--text-mute); }
/* Botão flutuante do WhatsApp.
Entra no mesmo instante que a dock, e não no carregamento: na primeira
dobra do celular ele pousa exatamente em cima do CTA secundário da hero,
que é largura cheia. Um botão verde tapando metade do "ver tudo que
inclui" custa mais do que um atendimento ganho três segundos antes. */
.float {
position: fixed; right: 18px; bottom: 22px; z-index: 290;
width: 54px; height: 54px; display: grid; place-items: center;
border-radius: 50%; background: #1FA855; color: #fff;
box-shadow: 0 12px 30px -8px rgba(31,168,85,.6);
/* visibility junto do transform: só encolher deixaria o botão invisível
ainda alcançável pelo Tab */
opacity: 0; visibility: hidden; transform: scale(.7);
transition: transform .3s var(--freada), opacity .3s var(--ease), visibility .3s, box-shadow var(--t);
}
.float.is-on { opacity: 1; visibility: visible; transform: none; }
.float.is-on:hover { transform: scale(1.07); box-shadow: 0 16px 36px -8px rgba(31,168,85,.8); }
.float svg { width: 27px; height: 27px; fill: currentColor; }
/* =========================================================
ANIMAÇÕES DE ENTRADA
========================================================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.anim { opacity: 0; transform: translateY(20px); animation: rise .8s var(--ease) forwards; }
.d1 { animation-delay: .05s } .d2 { animation-delay: .18s } .d3 { animation-delay: .32s }
.d4 { animation-delay: .46s } .d5 { animation-delay: .6s }
@keyframes rise { to { opacity: 1; transform: none; } }
/* =========================================================
BRASAS — a camada de atmosfera da página inteira
---------------------------------------------------------
As brasas sobem pela viewport o tempo todo, independente de onde a pessoa
está — é position: fixed, então elas não rolam junto: sobem através do
conteúdo como se a página estivesse sobre um braseiro.
O z-index é 205: ACIMA das seções (que vivem em 2) e logo abaixo do grão do
body (210). Embaixo não adiantaria — as seções pintam fundo opaco por cima
e as brasas sumiriam. Navbar (300), dock (280) e o WhatsApp (290) ficam por
cima, para nenhuma faísca passar na frente de um controle.
========================================================= */
.brasas { position: fixed; inset: 0; z-index: 205; pointer-events: none; overflow: hidden; }
.brasas::after {
content: ''; position: absolute; left: 50%; bottom: -12%; transform: translateX(-50%);
width: 150%; height: 34%;
background: radial-gradient(ellipse at 50% 100%, var(--op-halo), rgba(175,146,86,.045) 42%, transparent 72%);
opacity: .45;
}
.brasa {
position: absolute; bottom: -24px; left: var(--x);
width: var(--s); height: var(--s); border-radius: 50%;
background: radial-gradient(circle at 38% 32%, #FFEFC9, var(--cor) 52%, transparent 74%);
box-shadow: 0 0 calc(var(--s) * 3) calc(var(--s) * .35) var(--cor);
opacity: 0;
animation: brasa-sobe var(--dur) linear infinite;
animation-delay: var(--atraso);
will-change: transform, opacity;
}
/* O bailado lateral vive nos keyframes, e não numa segunda animação sobre um
elemento aninhado: uma brasa é um ponto de luz de 3px, e um único
translate3d por passo já entrega a deriva sem dobrar o número de nós. */
@keyframes brasa-sobe {
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
6% { opacity: var(--op); }
25% { transform: translate3d(16px, -26vh, 0) scale(.94); }
50% { transform: translate3d(-12px, -52vh, 0) scale(.84); }
75% { opacity: calc(var(--op) * .55);
transform: translate3d(14px, -78vh, 0) scale(.68); }
100% { opacity: 0; transform: translate3d(-6px, -104vh, 0) scale(.5); }
}
/* faíscas douradas da hero */
.sparks { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.spark {
position: absolute; width: 3px; height: 3px; border-radius: 50%;
background: var(--gold-light); box-shadow: 0 0 10px 2px rgba(201,174,122,.6);
opacity: 0; animation: float linear infinite;
}
@keyframes float {
0% { opacity: 0; transform: translateY(0) scale(1); }
12% { opacity: .85; }
85% { opacity: .5; }
100% { opacity: 0; transform: translateY(-260px) scale(.5); }
}
/* =========================================================
RESPONSIVO
---------------------------------------------------------
87% deste tráfego é mobile. As quebras abaixo não são "o desktop
espremido": em cada uma delas alguma peça muda de forma, não só de largura.
========================================================= */
@media (max-width: 1080px) {
.nav { display: none; }
.opsel { margin-left: auto; }
.extras__grid { grid-template-columns: repeat(2, 1fr); }
.footer__inner { grid-template-columns: 1fr 1fr; }
}
/* ─── O PORTAL VIRA COLUNA ─────────────────────────────────
Dois portões lado a lado abaixo de ~860px ficam estreitos demais para o
medalhão respirar. Empilhados, a costura só troca de orientação e a cena
sobrevive inteira — inclusive a ignição, que é transform e não depende do
eixo do layout. */
@media (max-width: 860px) {
.portoes { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
.portoes__ou {
width: 100%; min-height: 44px; justify-self: center;
}
.portoes__ou::before, .portoes__ou::after {
left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px;
transform: translateY(-50%);
}
.portoes__ou::before { right: calc(50% + 24px); left: 0;
background: linear-gradient(90deg, transparent, var(--border-active)); }
.portoes__ou::after { left: calc(50% + 24px); right: 0;
background: linear-gradient(90deg, var(--border-active), transparent); }
/* o portão deitado: medalhão à esquerda, texto à direita. Empilhado ele
ficaria com 2 telas de altura e o segundo portão sairia da dobra — que é
exatamente o que um portal não pode fazer. */
.portao {
display: grid; grid-template-columns: auto 1fr; align-items: center;
gap: 18px; text-align: left; padding: 18px 20px;
}
.portao__selo { margin: 0; width: clamp(92px, 24vw, 124px); }
.portao__entrar { margin-top: 10px; justify-content: flex-start; }
.portao__vagas { margin-top: 10px; }
/* Tudo encolhe junto. Os dois portões deitados já ocupam a maior parte de
uma tela de celular; a chamada acima deles precisa caber no que sobra,
senão o primeiro portão nasce colado na última linha do parágrafo. */
.portal { padding: 14px 0; }
.portal__marca img { width: 36px; }
.portal__marca b { font-size: 17px; letter-spacing: 3px; }
.portal__chamada { margin-top: 12px; }
.portal__chamada h1 { margin-top: 10px; font-size: clamp(23px, 6.6vw, 34px); }
.portal__chamada p { margin-top: 10px; font-size: 14px; max-width: 42ch; }
.portoes { gap: 6px; }
.portao__desig { font-size: 9.5px; letter-spacing: 3.4px; margin-bottom: 5px; }
.portao__nome { font-size: clamp(19px, 5.4vw, 26px); }
.portao__sigla { font-size: clamp(23px, 6.6vw, 32px); letter-spacing: 2px; }
.portao__corp { margin-top: 7px; font-size: 12.5px; }
.portao__vagas { height: 26px; padding: 0 10px; font-size: 10px; letter-spacing: 1.4px; }
.portao__vagas b { font-size: 12px; }
.portao__entrar { font-size: 10.5px; letter-spacing: 2.4px; }
.portal__nota { font-size: 10.5px; letter-spacing: 1.8px; }
}
@media (max-width: 1080px) {
/* Em duas colunas o nono item ficaria sozinho na quinta fileira. Fazendo o
último ocupar a largura inteira, a sobra vira fecho da lista em vez de
buraco no canto. */
.entrega { grid-template-columns: repeat(2, 1fr); }
.entrega .item:last-child { grid-column: 1 / -1; }
.vs tbody th, .vs td, .vs__cab { padding-inline: 16px; }
.vs thead th:first-child { width: 22%; }
}
@media (max-width: 920px) {
.entrega { grid-template-columns: 1fr; }
.entrega .item:last-child { grid-column: auto; }
/* O painel dos dez desce para debaixo do texto e passa a ocupar a largura
toda. Ele é o CTA deste bloco: espremido numa coluna estreita ao lado de
quatro linhas de lista, o "10" perde o tamanho que é o argumento dele. */
.bonus__grid { grid-template-columns: 1fr; gap: 30px; }
.dez { max-width: 460px; margin-inline: auto; }
.duo { grid-template-columns: 1fr; gap: 34px; }
.duo__foto { max-width: 400px; margin-inline: auto; }
.duo__texto { text-align: center; }
.duo__texto .eyebrow { justify-content: center; }
.duo__marcas { justify-content: center; }
.section__title--left::after { margin-inline: auto; }
}
@media (max-width: 720px) {
body { font-size: 16px; }
.section { padding: 74px 0; }
.container { width: calc(100% - 32px); }
.header__inner { width: calc(100% - 24px); gap: 12px; }
.brand__nome { font-size: 16px; letter-spacing: 2px; }
.brand__nome i { font-size: 8.5px; letter-spacing: 2px; }
.header .btn { display: none; }
.opsel { height: 36px; padding-left: 11px; gap: 8px; }
.opsel b { font-size: 12px; letter-spacing: 1.4px; }
.hero { min-height: auto; padding-top: calc(var(--nav-h) + 28px); padding-bottom: 58px; }
.hero__bg i { opacity: .22; }
.hero__cta { flex-direction: column; }
.hero__cta .btn { width: 100%; }
/* a etiqueta é longa: em tela estreita ela quebra em vez de vazar da caixa */
.tag { height: auto; min-height: 38px; padding: 8px 14px; font-size: 10.5px;
letter-spacing: 2px; line-height: 1.5; }
.scroller { display: none; }
.ficha { grid-template-columns: repeat(2, 1fr); margin-top: 34px; }
.bonus { padding: 68px 0; }
.bonus__grid { padding-inline: 18px; }
.bonus__fita { margin-bottom: 26px; }
.bonus__fita span { font-size: 10.5px; letter-spacing: 3px; gap: 24px; }
.dez__num { font-size: clamp(64px, 22vw, 96px); }
/* dez pips numa linha de 320px ficariam com 4px cada; em duas fileiras de
cinco eles continuam contáveis de relance, que é a função deles */
.pips { max-width: 165px; margin-inline: auto; }
.preco__caixa { padding: 24px 18px; }
.economia { padding: 13px 12px 15px; }
.economia__cab { letter-spacing: 2.6px; }
.conta tbody th { font-size: 13.5px; }
.conta tbody td, .conta .total td { font-size: 14px; }
.conta .total td { font-size: 21px; }
.conta .off { display: block; margin: 6px 0 0; width: max-content; }
.regra { padding: 16px; }
/* metade de um brasão de 660px numa tela de 360 vira mancha atrás do texto */
.section::before, .bonus__marca, .final__marca { background-size: auto 420px; }
.extras { padding: 28px 20px; }
.extras__grid { grid-template-columns: 1fr; }
.dock { display: flex; }
/* a dock cobre o fim do rodapé; o respiro extra devolve a última linha */
.footer__bar { padding-bottom: 96px; }
/* o WhatsApp sobe para não ficar debaixo da dock */
.float { bottom: calc(84px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
.float svg { width: 24px; height: 24px; }
.final { padding: 84px 0; }
.final .btn { width: 100%; }
/* ─── A TABELA VIRA PILHA DE CARTÕES ─────────────────────
Três colunas em 360px só cabem com rolagem lateral, e rolagem lateral
numa comparação é onde a comparação morre: a pessoa nunca vê os dois
lados ao mesmo tempo. Empilhada, cada linha vira um cartão com a
situação no topo e as duas respostas uma sobre a outra — a comparação
continua acontecendo, só que na vertical.
Os rótulos saem do `data-col` de cada célula, e não de texto repetido no
HTML: sem o cabeçalho da tabela na tela, as duas respostas ficariam sem
dizer de quem são. */
.vs-wrap { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.vs, .vs tbody, .vs tr, .vs tbody th, .vs td { display: block; width: auto; }
.vs thead { display: none; }
.vs tbody tr {
margin-bottom: 12px; border-radius: 16px; overflow: hidden;
background: linear-gradient(180deg, #16161C, #101014);
box-shadow: inset 0 0 0 1px var(--border);
}
.vs tbody tr:nth-child(even) { background: linear-gradient(180deg, #16161C, #101014); }
.vs tbody tr + tr th, .vs tbody tr + tr td { border-top: 0; }
.vs tbody th {
padding: 13px 18px; background: rgba(175,146,86,.07);
font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold);
}
.vs td { padding: 13px 18px; overflow: hidden; }
.vs td + td { border-top: 1px solid var(--border-soft); }
.vs__sim { background: rgba(175,146,86,.05); }
.vs td::before {
content: attr(data-col); display: block; margin: 0 0 5px 35px;
font-size: 10px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--text-mute);
}
.vs__sim::before { color: var(--gold); }
.vs__marca { margin-top: 0; }
}
@media (max-width: 420px) {
.ficha { grid-template-columns: 1fr 1fr; }
.portao { gap: 14px; padding: 16px; }
.portao__nome { font-size: 20px; }
.portao__sigla { font-size: 26px; }
.portao__corp { font-size: 12px; }
}
/* =========================================================
MOVIMENTO REDUZIDO
---------------------------------------------------------
Quem pede menos movimento continua vendo a página inteira: o que some é o
movimento perpétuo (brasas, aro girando, varreduras) e a cena de entrada.
O portal continua funcionando — ele é navegação, não enfeite.
========================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.reveal, .anim, .portao { opacity: 1 !important; transform: none !important; }
.brasas, .sparks, .portal__brasas, .portal__cacos, .portal__scan,
.choque, .choque__cacos { display: none; }
}