* { box-sizing: border-box; }
/* Respiro lateral único do mobile — antes cada seção repetia 22/26px
porque tudo cabia numa moldura de 390px. Sem moldura, uma medida só. */
:root { --gutter: 18px; }
@media (min-width: 480px) { :root { --gutter: 24px; } }
html { overflow-x: hidden; }
body {
margin: 0;
background: #04060c;
font-family: 'Segoe UI', Arial, sans-serif;
display: flex;
justify-content: center;
padding: 0;
overflow-x: hidden;
}
a { color: #7ca5f4; text-decoration: none; }
a:hover { color: #a5c0f8; }
input, textarea { outline: none; border: none; background: transparent; font-family: inherit; }
/* Mobile: sem moldura — o conteúdo usa a tela inteira. SEM overflow
nenhum aqui (nem overflow-x): qualquer overflow != visible neste
container -- ou em QUALQUER ancestral -- quebra position:sticky do
.topo, porque sticky é relativo ao viewport de rolagem mais próximo,
não ao elemento em si. A proteção contra scroll horizontal já fica
em html/body acima, que não têm o .topo como filho. */
.app {
width: 100%;
max-width: 100%;
background: #060910;
border: none;
border-radius: 0;
position: relative;
min-height: 100vh;
}
/* Telas médias (tablet) — conteúdo centralizado, ainda sem moldura */
@media (min-width: 700px) and (max-width: 1099px) {
.app { max-width: 720px; }
}
/* ═══════════════════════════════════════════════════════════════════
Desktop (≥1100px) — layout próprio, não é o mobile esticado.
Header fixo com CTA duplo, hero em cena 3D com paralaxe de mouse,
cards com tilt no hover, marquee infinito de avaliações e FAQ com
coluna sticky. Nada abaixo de 1100px é afetado.
═══════════════════════════════════════════════════════════════ */
@keyframes ss-spin { to { transform: rotateX(74deg) rotateZ(360deg); } }
@keyframes ss-spin-rev { to { transform: rotateX(74deg) rotateZ(-360deg); } }
@keyframes ss-float { 0%,100% { transform: translateZ(90px) translateY(-10px); } 50% { transform: translateZ(90px) translateY(10px); } }
@keyframes ss-pulse { 0%,100% { opacity: .35; } 50% { opacity: .8; } }
@keyframes ss-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Overlay do menu */
.overlay {
position: fixed; inset: 0;
background: rgba(2,4,9,.7);
z-index: 40;
display: none;
}
.overlay.aberto { display: block; }
/* Painel do menu lateral */
.painel-menu {
position: fixed; top: 0; left: 0; bottom: 0;
width: 256px; max-width: 82vw;
background: #080c16;
border-right: 1px solid #1a2440;
z-index: 45;
display: flex; flex-direction: column;
transform: translateX(-105%);
transition: transform .25s ease;
}
.painel-menu.aberto {
transform: translateX(0);
box-shadow: 8px 0 30px rgba(0,0,0,.5);
}
.painel-menu-topo {
display: flex; align-items: center; gap: 10px;
padding: 20px 18px 16px;
}
.painel-menu-topo img { width: 43px; height: 35px; object-fit: contain; border-radius: 5px; }
.painel-menu-topo .titulo { color: #edf1f9; font-weight: 700; font-size: 13px; letter-spacing: .5px; }
.painel-menu-topo .fechar { margin-left: auto; color: #8794b3; font-size: 18px; cursor: pointer; }
.painel-menu-divisor { height: 1px; background: #1a2440; margin: 0 18px 8px; }
nav.menu-lista { display: flex; flex-direction: column; gap: 1px; padding: 4px 12px; }
.menu-item {
display: flex; align-items: center; gap: 12px;
padding: 11px 12px; border-radius: 8px; cursor: pointer;
font-size: 12.5px; letter-spacing: .4px; color: #8794b3; background: transparent;
border-left: 2px solid transparent; font-weight: 500;
}
.menu-item svg { flex-shrink: 0; }
.menu-item.ativo { font-weight: 700; color: #edf1f9; background: #0d1322; border-left-color: #c9a227; }
.menu-rodape {
margin-top: auto; padding: 16px; border-top: 1px solid #1a2440;
}
.menu-rodape-linha { display: flex; align-items: stretch; gap: 8px; }
.menu-whatsapp {
flex: 1; display: flex; align-items: center; gap: 10px;
border: 1px solid rgba(34,197,94,.4);
border-radius: 9px; padding: 12px 14px; cursor: pointer;
}
.menu-whatsapp:hover { background: rgba(34,197,94,.07); }
.menu-whatsapp span.txt { color: #22c55e; font-weight: 600; font-size: 12px; }
/* Ícone de conta (Configurações/Sair) -- ao lado do WhatsApp no rodapé
do menu, 05/08/2026: substitui a antiga aba "Login" solta no menu. */
.menu-conta-wrap { position: relative; flex-shrink: 0; }
.menu-conta-btn {
width: 44px; height: 100%; display: flex; align-items: center; justify-content: center;
border: 1px solid #1a2440; border-radius: 9px; cursor: pointer; color: #8794b3;
}
.menu-conta-btn:hover { background: #0d1322; color: #edf1f9; }
/* Avatar (cor+emoji) no lugar do ícone genérico de "pessoa" quando
logado -- pedido do usuário 06/08/2026, mesmo padrão visual do
avatar de "Minha Conta" (ver .conta-avatar), só em tamanho de ícone.
display:flex sobrescrito via JS (atualizarIconeContaAvatar em
auth.js) quando há avatar_cor/avatar_emoji salvos; sem eles, o ícone
genérico (.conta-btn-icone-padrao) continua visível mesmo logado. */
.conta-btn-avatar {
width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center;
font-size: 13px; line-height: 1;
}
.menu-conta-dropdown {
position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 172px;
background: #0d1322; border: 1px solid #1a2440; border-radius: 10px;
padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.5); z-index: 50;
}
.menu-conta-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 11px; border-radius: 7px; cursor: pointer;
color: #b9c3da; font-size: 12.5px; font-weight: 600;
}
.menu-conta-item:hover { background: #131b30; color: #edf1f9; }
.menu-conta-item.sair { color: #f87171; }
.menu-conta-item.sair:hover { background: rgba(248,113,113,.1); color: #f87171; }
/* Cabeçalho fixo */
.topo {
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: 12px;
padding: 16px var(--gutter);
background: rgba(4,6,12,.88); backdrop-filter: blur(14px);
border-bottom: 1px solid #131b30;
}
.topo .hamburguer { color: #edf1f9; cursor: pointer; }
.topo img { width: 46px; height: 35px; object-fit: contain; border-radius: 10px; }
.topo .marca { color: #edf1f9; font-weight: 700; font-size: 12.5px; letter-spacing: 1.2px; }
.topo-nav-desktop { display: none; }
/* Telas */
.tela { display: none; }
.tela.ativa { display: block; }
.rotulo-secao {
display: flex; align-items: center; gap: 10px;
padding: 24px var(--gutter) 0;
}
.rotulo-secao .risco { width: 26px; height: 1px; background: #c9a227; }
.rotulo-secao .texto { color: #c9a227; font-size: 10px; font-weight: 600; letter-spacing: 2.4px; }
/* Hero (Início) */
.hero { padding: 30px var(--gutter) 24px; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; }
.hero-eyebrow .risco { width: 26px; height: 1px; background: #c9a227; }
.hero-eyebrow .texto { color: #e0b52d; font-weight: 600; letter-spacing: 2.4px; font-size: 11px; }
.hero-titulo {
font-family: 'Georgia', serif; color: #edf1f9; font-size: 25px; font-weight: 600;
line-height: 1.25; letter-spacing: -.3px; margin-top: 16px;
}
/* Palco 3D da logo — mobile usa giroscópio no lugar do mouse do desktop */
.hero-palco-mobile {
position: relative; height: 250px; margin-top: 18px; perspective: 900px;
}
.hero-cena-mobile {
position: absolute; inset: 0; transform-style: preserve-3d;
}
.hero-cena-mobile .glow {
position: absolute; top: 50%; left: 50%; width: 300px; height: 300px;
margin: -150px 0 0 -150px; border-radius: 50%;
background: radial-gradient(circle, rgba(26,110,230,.18), rgba(4,6,12,0) 65%);
animation: ss-pulse 6s ease-in-out infinite;
}
.hero-cena-mobile .logo-flutuante {
position: absolute; top: 50%; left: 50%; width: 225px; height: 225px;
margin: -112px 0 0 -112px; display: flex; align-items: center; justify-content: center;
animation: ss-float 7s ease-in-out infinite;
}
.hero-cena-mobile .logo-flutuante img {
width: 100%; height: 100%; object-fit: contain;
filter: drop-shadow(0 18px 34px rgba(0,0,0,.7));
}
.hero-botoes { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.hero-botao {
color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .6px;
padding: 15px; border-radius: 8px; border: none; cursor: pointer; background: #1a6ee6;
}
.hero-botao:hover { background: #2f7cf0; }
.hero-wa {
display: flex; align-items: center; justify-content: center; gap: 9px;
border: 1px solid rgba(34,197,94,.45); border-radius: 8px; padding: 14px; cursor: pointer;
}
.hero-wa:hover { background: rgba(34,197,94,.07); }
.hero-wa span { color: #22c55e; font-weight: 600; font-size: 12.5px; letter-spacing: .4px; text-align: center; }
.hero-texto { color: #8794b3; font-size: 13px; line-height: 1.75; margin-top: 14px; }
.selos-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #131b30; border-bottom: 1px solid #131b30; }
.selo-bloco { padding: 16px var(--gutter); }
.selo-bloco.borda { border-right: 1px solid #131b30; }
.selo-estrelas { color: #c9a227; font-size: 15px; letter-spacing: 1.5px; }
.selo-titulo { color: #edf1f9; font-weight: 600; font-size: 12px; margin-top: 5px; }
.selo-sub { color: #5c6884; font-size: 10.5px; margin-top: 2px; }
.selo-titulo2 { color: #edf1f9; font-weight: 600; font-size: 12px; margin-top: 8px; }
/* Páginas legais (Privacidade/Termos) -- texto corrido simples, 05/08/2026 */
.pagina-legal { padding: 0 var(--gutter) 40px; color: #b9c3da; font-size: 13px; line-height: 1.8; }
.pagina-legal p { margin: 0 0 14px; }
.pagina-legal h3 { color: #edf1f9; font-size: 14px; margin: 26px 0 10px; }
.pagina-legal ul { margin: 0 0 14px; padding-left: 20px; }
.pagina-legal li { margin-bottom: 8px; }
.pagina-legal a { color: #7ca5f4; }
.pagina-legal b { color: #edf1f9; }
/* Quem somos */
.quem-somos { padding: 24px var(--gutter); }
.quem-somos-texto { color: #b9c3da; font-size: 13px; line-height: 1.8; margin-top: 14px; }
.quem-somos-texto b { color: #edf1f9; }
.diferenciais { display: flex; flex-direction: column; margin-top: 18px; }
.diferencial {
display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
border-bottom: 1px solid #10182b;
}
.diferencial svg { flex-shrink: 0; margin-top: 3px; }
.diferencial .texto { color: #8794b3; font-size: 12.5px; line-height: 1.6; }
.diferencial .texto b { color: #edf1f9; font-weight: 600; }
/* Contador ao vivo de cadastros -- "quem somos", 05/08/2026. Cena 3D
interativa (mesmo sistema de tilt por toque do hero, ver
ativarTiltToque em ui.js) com anéis girando estilo radar/órbita. */
@keyframes ss-contador-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.contador-cadastros { margin-top: 28px; }
.contador-eyebrow { display: flex; align-items: center; gap: 10px; }
.contador-eyebrow .risco { width: 26px; height: 1px; background: #c9a227; }
.contador-eyebrow .texto { color: #c9a227; font-size: 10px; font-weight: 600; letter-spacing: 2.4px; }
.contador-intro { color: #b9c3da; font-size: 13px; line-height: 1.8; margin-top: 12px; }
.contador-intro b { color: #edf1f9; }
.contador-palco { position: relative; height: 240px; margin-top: 12px; perspective: 900px; }
.contador-cena { position: absolute; inset: 0; transform-style: preserve-3d; }
.contador-glow {
position: absolute; top: 50%; left: 50%; width: 300px; height: 300px;
margin: -150px 0 0 -150px; border-radius: 50%;
background: radial-gradient(circle, rgba(26,110,230,.22), rgba(4,6,12,0) 65%);
animation: ss-pulse 6s ease-in-out infinite;
}
.contador-anel1 {
position: absolute; top: 50%; left: 50%; width: 230px; height: 230px;
margin: -115px 0 0 -115px; border-radius: 50%;
border: 1px solid rgba(201,162,39,.36); transform: rotateX(72deg);
animation: ss-spin 22s linear infinite;
}
.contador-anel2 {
position: absolute; top: 50%; left: 50%; width: 180px; height: 180px;
margin: -90px 0 0 -90px; border-radius: 50%;
border: 1px solid rgba(124,165,244,.3); transform: rotateX(72deg);
animation: ss-spin-rev 16s linear infinite;
}
.contador-nucleo {
position: absolute; top: 50%; left: 50%; width: 222px;
margin: -88px 0 0 -111px; text-align: center;
animation: ss-float 7s ease-in-out infinite;
}
.contador-badge {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(8,12,22,.92); border: 1px solid #1a2440; border-radius: 20px;
padding: 6px 12px;
}
.contador-ping { position: relative; width: 7px; height: 7px; flex-shrink: 0; }
.contador-ping .ponto { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; }
.contador-ping::after {
content: ""; position: absolute; inset: -3px; border-radius: 50%;
border: 1px solid rgba(34,197,94,.5); animation: ss-contador-ping 2s ease-out infinite;
}
.contador-badge span { color: #7ca5f4; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.contador-numero {
font-family: Georgia, serif; color: #edf1f9; font-size: 52px; font-weight: 600;
letter-spacing: -1.5px; line-height: 1; margin-top: 14px;
text-shadow: 0 0 40px rgba(26,110,230,.45);
}
.contador-legenda { color: #8794b3; font-size: 10px; font-weight: 600; letter-spacing: 1.4px; margin-top: 6px; }
.contador-fatos { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.contador-fato {
display: flex; align-items: center; gap: 11px;
border: 1px solid #1a2440; border-radius: 10px; padding: 11px 13px; background: #080c16;
}
.contador-fato svg { flex-shrink: 0; }
.contador-fato div { color: #b9c3da; font-size: 11.5px; line-height: 1.5; }
.contador-fato b { color: #edf1f9; }
.contador-cta-wrap {
margin-top: 18px; position: relative; border-radius: 16px; padding: 2px;
background: linear-gradient(135deg, rgba(201,162,39,.6), rgba(26,110,230,.6));
}
.contador-cta { border-radius: 14px; background: #080c16; padding: 22px 20px; text-align: center; }
.contador-cta .titulo { color: #edf1f9; font-family: Georgia, serif; font-size: 17px; font-weight: 600; line-height: 1.35; }
.contador-cta .sub { color: #8794b3; font-size: 12px; line-height: 1.6; margin-top: 8px; }
.contador-cta button {
margin-top: 16px; width: 100%; background: linear-gradient(135deg,#1a6ee6,#2f7cf0);
color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .6px;
padding: 15px; border-radius: 9px; border: none; cursor: pointer;
box-shadow: 0 12px 30px rgba(26,110,230,.35);
}
.contador-cta button:hover { background: linear-gradient(135deg,#2f7cf0,#3f8bff); }
/* Produtos / concursos */
.concursos-titulo {
display: flex; align-items: center; gap: 8px;
padding: 14px var(--gutter) 0;
font-family: 'Georgia', serif; color: #edf1f9; font-size: 21px; font-weight: 600;
}
.selos-concursos {
border: 1px solid #1a2440; border-radius: 10px;
margin: 18px var(--gutter) 0; overflow: hidden;
}
.selos-concursos .linha { display: grid; grid-template-columns: repeat(3, 1fr); }
.selos-concursos .linha + .linha { border-top: 1px solid #1a2440; }
.selos-concursos .celula { padding: 10px 8px; border-right: 1px solid #1a2440; display: flex; align-items: center; gap: 6px; min-width: 0; }
.selos-concursos .celula:last-child { border-right: none; }
.selos-concursos .celula svg { flex-shrink: 0; }
.selos-concursos .texto-celula { min-width: 0; }
.selos-concursos .titulo { font-size: 10px; font-weight: 600; color: #edf1f9; line-height: 1.25; }
.selos-concursos .estrelas { color: #c9a227; font-size: 10px; }
.selos-concursos .sub { font-size: 9px; color: #5c6884; line-height: 1.25; }
.selos-concursos .titulo.verde { color: #4ade80; }
.busca-wrap {
display: flex; align-items: center; gap: 10px; border: 1px solid #1a2440;
border-radius: 8px; padding: 0 14px;
margin: 20px var(--gutter) 8px; background: #080c16;
}
.busca-wrap input { flex: 1; color: #edf1f9; font-size: 12.5px; padding: 13px 0; }
.concursos-contador { font-size: 11px; color: #5c6884; margin: 0 var(--gutter) 14px; }
.lista-concursos { display: flex; flex-direction: column; gap: 14px; padding: 0 var(--gutter) 8px; }
.card-concurso {
background: #080c16; border: 1px solid #1a2440; border-left: 3px solid #2f7cf0;
border-radius: 12px; overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.card-concurso:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.card-concurso .capa {
width: 100%; aspect-ratio: 16 / 7; max-height: 180px; overflow: hidden; position: relative;
background: linear-gradient(135deg, #101f3d, #0a1428);
}
.card-concurso .capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-concurso .capa .capa-fallback {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
font-family: 'Georgia', serif; font-size: 30px; font-weight: 600; letter-spacing: 1px;
color: rgba(124, 165, 244, .35);
}
.card-concurso .capa::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(8,12,22,0) 55%, rgba(8,12,22,.92) 100%);
}
.card-concurso .corpo-concurso { padding: 19px 21px 19px 19px; }
.card-concurso .linha-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-concurso .tag-etiqueta {
display: inline-flex; align-items: center; font-size: 10px; font-weight: 700;
letter-spacing: .6px; padding: 3px 9px; border-radius: 5px;
background: #101f3d; color: #7ca5f4;
}
.card-concurso .qtd-cargos { font-size: 10.5px; color: #5c6884; margin-left: 8px; }
.card-concurso .banca {
flex-shrink: 0; text-align: right; font-size: 10px; color: #5c6884;
font-weight: 600; letter-spacing: .3px; white-space: nowrap;
}
.card-concurso .banca b { display: block; color: #7ca5f4; font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.card-concurso .status { color: #4ade80; font-size: 10px; font-weight: 600; letter-spacing: .5px; margin-top: 8px; }
.card-concurso .nome {
font-family: 'Georgia', serif; color: #edf1f9; font-size: 19px; font-weight: 600; margin-top: 8px;
}
.card-concurso .descricao-concurso {
color: #8794b3; font-size: 11.5px; line-height: 1.55; margin-top: 6px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-concurso .divisor { height: 1px; background: #10182b; margin: 14px 0 12px; }
.alternar-cargos {
display: flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid #2a3757;
border-radius: 7px; padding: 9px 14px; width: fit-content;
}
.alternar-cargos:hover { border-color: #7ca5f4; }
.alternar-cargos .rotulo { color: #a5c0f8; font-weight: 700; font-size: 11px; letter-spacing: .6px; }
.alternar-cargos svg { transition: transform .2s; }
.lista-cargos { display: none; flex-direction: column; gap: 8px; margin-top: 13px; }
.lista-cargos.aberta { display: flex; }
.grupo-cargo { border: 1px solid #1a2440; border-left: 2px solid #2f7cf0; border-radius: 10px; background: #070b14; overflow: hidden; }
.cabecalho-cargo { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; }
.cabecalho-cargo:hover { background: #0a0f1c; }
.cabecalho-cargo .info { flex: 1; }
.cabecalho-cargo .nome { color: #edf1f9; font-weight: 600; font-size: 12.5px; }
.cabecalho-cargo .resumo { color: #5c6884; font-size: 10.5px; margin-top: 1px; }
.cabecalho-cargo svg.seta { flex-shrink: 0; transition: transform .2s; }
.corpo-cargo { display: none; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.corpo-cargo.aberta { display: flex; }
.produto-item {
display: flex; align-items: center; gap: 11px; border: 1px solid #10182b;
border-radius: 9px; padding: 12px 13px; background: #060910;
}
.produto-item .info { flex: 1; min-width: 0; }
.produto-item .nome { color: #edf1f9; font-weight: 600; font-size: 12px; line-height: 1.35; }
.produto-item .preco-comprar { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.produto-item .preco { color: #5c6884; font-weight: 500; font-size: 9.5px; }
.produto-item .preco-unitario { color: #7ca5f4; font-size: 13px; font-weight: 700; }
.botoes-produto { display: flex; align-items: center; gap: 6px; }
.produto-item .add-carrinho {
display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
border: 1px solid #2a3757; border-radius: 6px; color: #a5c0f8; cursor: pointer; flex-shrink: 0;
}
.produto-item .add-carrinho:hover { border-color: #7ca5f4; }
.produto-item .comprar {
background: #edf1f9; color: #060910; font-weight: 700; font-size: 10px;
letter-spacing: .6px; padding: 6px 13px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.produto-item .comprar:hover { background: #fff; }
.amostra-btn {
display: flex; align-items: center; justify-content: center; gap: 9px;
border: 1px dashed rgba(34,197,94,.4); border-radius: 8px; padding: 11px; cursor: pointer;
}
.amostra-btn:hover { background: rgba(34,197,94,.06); }
.amostra-btn span { color: #4ade80; font-size: 11px; font-weight: 600; letter-spacing: .4px; }
.sem-resultado {
border: 1px dashed #1a2440; border-radius: 12px; padding: 26px 22px;
text-align: center; margin: 4px var(--gutter) 0;
}
.sem-resultado .titulo { color: #edf1f9; font-weight: 600; font-size: 13.5px; }
.sem-resultado .texto { color: #8794b3; font-size: 12px; line-height: 1.6; margin-top: 6px; }
.sem-resultado .botao {
display: inline-block; border: 1px solid rgba(34,197,94,.45); color: #4ade80;
font-weight: 600; font-size: 11.5px; padding: 10px 20px; border-radius: 7px;
margin-top: 13px; cursor: pointer;
}
.rodape-compra {
margin: 14px var(--gutter) 26px; color: #5c6884; font-size: 11px; line-height: 1.7; text-align: center;
}
.rodape-compra b { color: #8794b3; }
.rodape-compra .link-wa { color: #4ade80; font-weight: 600; cursor: pointer; }
/* Como funciona */
.como-intro { padding: 24px var(--gutter) 0; }
.como-intro-texto { color: #8794b3; font-size: 12.5px; line-height: 1.7; margin-top: 14px; }
.passos { padding: 20px var(--gutter) 10px; display: flex; flex-direction: column; }
.passo { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #10182b; }
.passo .num {
font-family: 'Georgia', serif; color: #c9a227; font-size: 18px; font-weight: 600;
width: 24px; flex-shrink: 0;
}
.passo .titulo { color: #edf1f9; font-weight: 600; font-size: 13px; }
.passo .texto { color: #8794b3; font-size: 12px; line-height: 1.65; margin-top: 4px; }
.passo .texto b { color: #b9c3da; }
/* Avaliações */
.aval-topo { padding: 24px var(--gutter) 0; }
.aval-media { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.aval-media .numero { font-family: 'Georgia', serif; color: #edf1f9; font-size: 40px; font-weight: 600; }
.aval-media .estrelas { color: #c9a227; font-size: 14px; letter-spacing: 2px; }
.aval-media .sub { color: #5c6884; font-size: 11px; margin-top: 2px; }
.avaliacoes { padding: 18px var(--gutter) 0; display: flex; flex-direction: column; gap: 10px; }
.card-avaliacao { border: 1px solid #1a2440; border-radius: 12px; padding: 16px 18px; background: #080c16; }
.card-avaliacao .estrelas { color: #c9a227; font-size: 11px; letter-spacing: 1.5px; }
.card-avaliacao .texto { color: #b9c3da; font-size: 12.5px; line-height: 1.7; margin-top: 8px; font-style: italic; }
.card-avaliacao .autor { color: #5c6884; font-size: 11px; font-weight: 600; margin-top: 8px; letter-spacing: .4px; }
.card-avaliacao-aviso { border-style: dashed; border-color: #2a3757; }
.card-avaliacao-aviso .texto { font-style: normal; color: #8794b3; }
.bloco-deixar-avaliacao {
margin: 16px var(--gutter) 26px; border: 1px solid #1a2440; border-radius: 12px;
padding: 18px 20px; text-align: center;
}
.bloco-deixar-avaliacao .titulo { color: #edf1f9; font-weight: 600; font-size: 13.5px; }
.bloco-deixar-avaliacao .texto { color: #8794b3; font-size: 12px; line-height: 1.6; margin-top: 6px; }
.botao-avaliar {
display: inline-block; background: #edf1f9; color: #060910; font-weight: 700;
font-size: 11px; letter-spacing: .8px; padding: 11px 24px; border-radius: 7px;
cursor: pointer; margin-top: 13px;
}
.botao-avaliar:hover { background: #fff; }
/* FAQ */
.faq-topo { padding: 24px var(--gutter) 4px; }
.faq-lista { padding: 14px var(--gutter) 0; display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid #131b30; }
.faq-pergunta { display: flex; align-items: center; gap: 10px; padding: 15px 4px; cursor: pointer; }
.faq-pergunta .texto { color: #edf1f9; font-weight: 600; font-size: 12.5px; flex: 1; }
.faq-pergunta .simbolo { color: #c9a227; font-weight: 600; font-size: 16px; }
.faq-resposta { display: none; padding: 0 4px 15px; color: #8794b3; font-size: 12px; line-height: 1.7; }
.faq-item.aberto .faq-resposta { display: block; }
.bloco-duvida-whatsapp {
margin: 20px var(--gutter) 26px; display: flex; align-items: center; gap: 13px;
border: 1px solid rgba(34,197,94,.3); border-radius: 12px; padding: 15px 17px; cursor: pointer;
}
.bloco-duvida-whatsapp:hover { background: rgba(34,197,94,.06); }
.bloco-duvida-whatsapp .titulo { color: #22c55e; font-weight: 700; font-size: 12.5px; }
.bloco-duvida-whatsapp .texto { color: #7fb894; font-size: 11.5px; margin-top: 2px; }
.bloco-duvida-whatsapp svg.seta { margin-left: auto; }
/* Rodapé global -- fora de qualquer .tela, sempre visível (ver
footer.rodape-site no fim do body). Sutil de propósito: sem
poluição visual, só evita o corte seco no fim da página. */
.rodape-site { padding: 30px 22px 4px; text-align: center; border-top: 1px solid #10182b; margin-top: 30px; }
.rodape-site-redes { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rodape-site-rede {
width: 32px; height: 32px; border-radius: 50%; border: 1px solid #1a2440;
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.rodape-site-rede:hover { border-color: #2a3757; }
.rodape-site-links { margin-top: 16px; font-size: 11px; color: #5c6884; }
.rodape-site-links span:not(.rodape-site-ponto) { cursor: pointer; }
.rodape-site-links span:not(.rodape-site-ponto):hover { color: #8794b3; }
.rodape-site-ponto { margin: 0 8px; opacity: .5; }
.rodape-site-copyright {
margin-top: 14px; text-align: center; color: #5c6884; font-size: 10.5px; letter-spacing: .4px;
}
.rodape-recaptcha {
padding: 0 22px 22px; text-align: center; color: #3d4560; font-size: 9.5px; line-height: 1.6;
}
.rodape-recaptcha a { color: #5c6884; text-decoration: underline; }
/* Badge flutuante do reCAPTCHA v3 -- escondido porque polui o canto da
tela (achado do usuário 03/08/2026). Só pode ser escondido porque o
texto exigido pelo Google (.rodape-recaptcha) está visível no
rodapé -- removê-lo sem o texto viola os termos do reCAPTCHA. */
.grecaptcha-badge { visibility: hidden; }
/* Elementos exclusivos do desktop (cena 3D, spotlight, CTA de topo): ficam ocultos abaixo de 1100px.
Wrappers que só reorganizam conteúdo já existente (cabeçalho de concursos, grid do FAQ)
não entram aqui — eles precisam continuar visíveis no mobile. */
.spot-desktop, .topo-wa-desktop, .topo-conta-wrap-desktop, .topo-cta-desktop, .hero-palco, .hero-selos-inline {
display: none;
}
@media (min-width: 1100px) {
.spot-desktop { display: block; }
.hero-palco { display: block; }
.hero-selos-inline { display: flex; }
.topo-wa-desktop { display: flex; }
.topo-conta-wrap-desktop { display: block; }
.topo-cta-desktop { display: inline-flex; align-items: center; }
.concursos-cabecalho-desktop { display: flex; }
.faq-topo-grid { display: grid; }
}
@media (min-width: 1100px) {
html { scroll-behavior: smooth; }
body { padding: 0; display: block; background: #04060c; }
.app {
width: 100%;
max-width: none;
background: transparent;
border: none;
border-radius: 0;
overflow: visible;
min-height: 0;
}
.overlay, .painel-menu { display: none !important; }
/* — spotlight que segue o mouse — */
.spot-desktop {
position: fixed; top: 0; left: 0; width: 900px; height: 900px;
margin: -450px 0 0 -450px; border-radius: 50%;
background: radial-gradient(circle, rgba(47,124,240,.10), rgba(4,6,12,0) 62%);
pointer-events: none; z-index: 1;
}
/* — barra de navegação fixa — */
.topo {
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: 0;
padding: 0 40px; height: 78px;
background: rgba(4,6,12,.88); backdrop-filter: blur(14px);
border-bottom: 1px solid #131b30;
max-width: none;
}
.topo .hamburguer { display: none; }
.topo img { width: 38px; height: 31px; margin-right: 10px; }
.topo .marca { font-size: 12.5px; }
.topo-nav-desktop {
display: flex; align-items: center; gap: 2px;
margin-left: 48px; margin-right: auto;
}
.topo-nav-desktop .link {
color: #8794b3; font-size: 13px; font-weight: 600; letter-spacing: .3px;
padding: 9px 15px; border-radius: 7px; cursor: pointer;
}
.topo-nav-desktop .link:hover { color: #edf1f9; background: #0d1322; }
.topo-nav-desktop .link.ativo { color: #edf1f9; background: #0d1322; }
.topo-wa-desktop {
display: flex; align-items: center; gap: 8px;
border: 1px solid rgba(34,197,94,.45); border-radius: 8px;
padding: 9px 15px; cursor: pointer; margin-right: 12px;
}
.topo-wa-desktop:hover { background: rgba(34,197,94,.08); }
.topo-wa-desktop span { color: #22c55e; font-weight: 600; font-size: 12px; }
.topo-conta-wrap-desktop { position: relative; margin-right: 12px; }
.topo-conta-btn-desktop {
width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
border: 1px solid #1a2440; border-radius: 8px; cursor: pointer; color: #8794b3;
}
.topo-conta-btn-desktop:hover { background: #0d1322; color: #edf1f9; }
.topo-conta-wrap-desktop .menu-conta-dropdown {
top: calc(100% + 8px); bottom: auto; right: 0;
}
.topo-cta-desktop {
background: #1a6ee6; color: #fff; font-weight: 700; font-size: 11.5px;
letter-spacing: .7px; padding: 11px 18px; border-radius: 8px; cursor: pointer;
}
.topo-cta-desktop:hover { background: #2f7cf0; }
.conteudo-desktop {
max-width: 1280px; margin: 0 auto; padding: 0 48px;
}
/* — hero: duas colunas com cena 3D — */
.hero {
position: relative; z-index: 2;
max-width: 1280px; margin: 0 auto; padding: 86px 48px 74px;
display: grid; grid-template-columns: 1.02fr .98fr; gap: 64px; align-items: center;
}
.hero-eyebrow {
grid-column: 1; grid-row: 1;
}
.hero-eyebrow .texto { font-size: 11.5px; letter-spacing: 2.6px; }
.hero-titulo {
grid-column: 1; grid-row: 2;
font-size: 58px; line-height: 1.1; letter-spacing: -1.3px; margin-top: 26px;
}
.hero-botoes {
grid-column: 1; grid-row: 3;
flex-direction: row; gap: 14px; margin-top: 34px; max-width: 520px;
}
.hero-botao, .hero-wa { flex: 1; }
.hero-botao { padding: 17px; font-size: 13.5px; box-shadow: 0 12px 30px rgba(26,110,230,.28); }
.hero-botao:hover { box-shadow: 0 16px 40px rgba(26,110,230,.42); }
.hero-texto {
grid-column: 1; grid-row: 4;
font-size: 16px; max-width: 520px; margin-top: 22px;
}
.hero-selos-inline {
grid-column: 1; grid-row: 5;
display: flex; align-items: center; gap: 22px; margin-top: 26px;
color: #5c6884; font-size: 11.5px; letter-spacing: .4px;
}
.hero-selos-inline b { color: #8794b3; font-weight: 600; }
.hero-selos-inline .div { width: 1px; height: 12px; background: #1a2440; }
/* cena 3D — some a versão giroscópio do mobile, entra o palco com paralaxe de mouse */
.hero-palco-mobile { display: none; }
.hero-palco {
grid-column: 2; grid-row: 1 / span 5;
position: relative; height: 520px; perspective: 1400px;
}
.hero-cena {
position: absolute; inset: 0; transform-style: preserve-3d;
transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.hero-cena .anel1 {
position: absolute; top: 50%; left: 50%; width: 430px; height: 430px;
margin: -215px 0 0 -215px; border-radius: 50%;
border: 1px solid rgba(201,162,39,.34); transform: rotateX(74deg);
animation: ss-spin 26s linear infinite;
}
.hero-cena .anel2 {
position: absolute; top: 50%; left: 50%; width: 330px; height: 330px;
margin: -165px 0 0 -165px; border-radius: 50%;
border: 1px solid rgba(124,165,244,.28); transform: rotateX(74deg);
animation: ss-spin-rev 19s linear infinite;
}
.hero-cena .glow {
position: absolute; top: 50%; left: 50%; width: 540px; height: 540px;
margin: -270px 0 0 -270px; border-radius: 50%;
background: radial-gradient(circle, rgba(26,110,230,.16), rgba(4,6,12,0) 65%);
animation: ss-pulse 6s ease-in-out infinite;
}
.hero-cena .logo-flutuante {
position: absolute; top: 50%; left: 50%; width: 340px; height: 340px;
margin: -170px 0 0 -170px; display: flex; align-items: center; justify-content: center;
animation: ss-float 7s ease-in-out infinite;
}
.hero-cena .logo-flutuante img {
width: 100%; height: 100%; object-fit: contain;
filter: drop-shadow(0 30px 60px rgba(0,0,0,.7));
}
.hero-cena .chip {
position: absolute; display: flex; align-items: center; gap: 9px;
background: rgba(8,12,22,.9); border: 1px solid #1a2440; border-radius: 11px;
padding: 12px 15px; box-shadow: 0 18px 40px rgba(0,0,0,.5);
font-size: 12px; font-weight: 600; color: #edf1f9; white-space: nowrap;
}
.hero-cena .chip1 { top: 34px; left: -8px; transform: translateZ(160px); }
.hero-cena .chip2 { top: 190px; right: -26px; transform: translateZ(215px); }
.hero-cena .chip3 { bottom: 44px; left: 26px; transform: translateZ(120px); border-color: rgba(34,197,94,.35); color: #4ade80; }
.selos-grid {
position: relative; z-index: 2;
max-width: 1280px; margin: 0 auto; padding: 0 48px;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
border: 1px solid #131b30; border-radius: 16px; overflow: hidden;
background: rgba(8,12,22,.6);
}
.selo-bloco { padding: 26px 30px; }
.selo-bloco.borda { border-right: 1px solid #131b30; }
.selo-estrelas { font-size: 18px; }
.selo-titulo, .selo-titulo2 { font-size: 14px; }
.quem-somos {
position: relative; z-index: 2;
max-width: 1280px; margin: 0 auto; padding: 96px 48px;
display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start;
}
.quem-somos .rotulo-secao { grid-column: 1; padding: 0 !important; }
.quem-somos-texto { grid-column: 1; font-size: 15.5px; line-height: 1.9; margin-top: 22px; }
.diferenciais {
grid-column: 2; grid-row: 1 / span 2; margin-top: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px;
align-content: start;
}
.diferencial { border-bottom: 1px solid #10182b; padding: 20px 0; }
.contador-cadastros { grid-column: 1 / -1; margin-top: 24px; max-width: 620px; }
.contador-intro { font-size: 14px; }
.contador-cta .titulo { font-size: 19px; }
.contador-cta button { cursor: pointer; }
.contador-cta button:hover { filter: brightness(1.05); }
.rotulo-secao { max-width: 1280px; margin: 0 auto; padding: 64px 48px 0; }
/* — concursos: título, busca e grid de cards em 2 colunas — */
.concursos-secao-desktop {
position: relative; z-index: 2; border-top: 1px solid #131b30;
background: linear-gradient(180deg, rgba(8,12,22,.7), rgba(4,6,12,0) 380px);
}
.concursos-cabecalho-desktop {
max-width: 1280px; margin: 0 auto; padding: 88px 48px 0;
display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.concursos-titulo { max-width: none; margin: 18px 0 0; padding: 0; font-size: 40px; letter-spacing: -.8px; }
.busca-wrap {
max-width: 400px; width: 400px; margin: 0 0 4px; padding: 0 16px; flex-shrink: 0;
}
.busca-wrap input { font-size: 14px; padding: 15px 0; }
.concursos-contador { max-width: 1280px; margin: 14px auto 0; padding: 0 48px; text-align: left; }
.lista-concursos {
max-width: 1280px; margin: 0 auto; padding: 20px 48px 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.card-concurso {
border-radius: 16px; border-left-width: 3px;
transition: transform .18s ease-out, box-shadow .2s, border-color .2s;
}
/* transform do hover fica só a cargo do JS de tilt (evita conflito com o rotateY/rotateX inline) */
.card-concurso:hover {
border-color: #2f7cf0; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.card-concurso .capa { aspect-ratio: 16 / 6; max-height: 150px; }
.card-concurso .nome { font-size: 22px; }
.sem-resultado, .rodape-compra { max-width: 620px; margin-left: auto; margin-right: auto; }
.rodape-compra { padding-bottom: 88px; }
/* — como funciona: 5 passos em linha — */
.como-intro { max-width: 1280px; margin: 0 auto; padding: 88px 48px 0; }
.como-intro-texto { font-size: 15px; max-width: 680px; }
.passos {
max-width: 1280px; margin: 0 auto; padding: 44px 48px 20px;
display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.passo {
flex-direction: column; align-items: flex-start; gap: 0;
border-bottom: none; border-top: 1px solid #1a2440; padding: 22px 0 0;
transition: border-color .25s;
}
.passo:hover { border-top-color: #c9a227; }
.passo .num { font-size: 30px; width: auto; }
.passo .titulo { font-size: 14px; margin-top: 14px; line-height: 1.4; }
.passo .texto { font-size: 12.5px; margin-top: 8px; }
/* — avaliações: marquee infinito — */
.aval-topo {
max-width: 1280px; margin: 0 auto; padding: 88px 48px 0;
display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.aval-media { margin-top: 0; }
.aval-media .numero { font-size: 64px; }
.avaliacoes-marquee-wrap {
position: relative; z-index: 2; margin-top: 44px; overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.avaliacoes {
max-width: none; margin: 0; padding: 0;
display: flex; flex-direction: row; gap: 18px; width: max-content;
animation: ss-marquee 60s linear infinite;
}
.avaliacoes-marquee-wrap:hover .avaliacoes { animation-play-state: paused; }
.card-avaliacao {
width: 360px; flex-shrink: 0; padding: 22px 24px;
transition: border-color .2s, transform .2s;
}
.card-avaliacao:hover { border-color: #2a3757; transform: translateY(-4px); }
.bloco-deixar-avaliacao {
max-width: 1280px; margin: 44px auto 0; padding: 0 48px 90px;
border: none; text-align: center; background: none;
}
/* — dúvidas (FAQ): coluna sticky + lista — */
.faq-topo { max-width: 1280px; margin: 0 auto; padding: 88px 48px 0; }
.faq-topo-grid {
display: grid; grid-template-columns: .7fr 1.3fr; gap: 64px; align-items: start;
}
.faq-topo-sticky { position: sticky; top: 120px; }
.bloco-duvida-whatsapp.inline-faq { margin: 26px 0 0; max-width: none; }
.faq-lista {
max-width: none; margin: 0; padding: 0; column-count: 1;
}
.faq-pergunta .texto { font-size: 14.5px; }
.faq-resposta { font-size: 13.5px; max-width: 720px; }
/* — rodapé global — */
.rodape-site { max-width: 1280px; margin: 30px auto 0; padding: 30px 48px 4px; }
}
/* ═══════════════════════════════════════════════════════════════════
E-COMMERCE — Fase 4: login, carrinho/drawer, checkout, meus produtos.
Segue a MESMA linguagem visual do resto (cores, bordas, raio, fontes).
═══════════════════════════════════════════════════════════════ */
/* — Badge do carrinho no header — */
.topo-carrinho {
margin-left: auto; position: relative; display: flex; align-items: center;
justify-content: center; width: 38px; height: 38px; border-radius: 9px;
cursor: pointer; color: #edf1f9;
}
.topo-carrinho:hover { background: #0d1322; }
.topo-carrinho .badge {
position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px;
padding: 0 3px; border-radius: 8px; background: #1a6ee6; color: #fff;
font-size: 9.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
line-height: 1;
}
.topo-carrinho .badge.vazio { display: none; }
@media (min-width: 1100px) {
.topo-carrinho { margin-left: 12px; margin-right: 0; order: 2; }
.topo-cta-desktop { order: 1; }
}
/* — item de menu "Minha Conta" / usuário logado — */
.menu-item .conta-nome { color: #7ca5f4; font-size: 10px; margin-left: auto; font-weight: 600; }
/* — Painel/drawer do carrinho (mesma linguagem do .painel-menu, do lado direito) — */
.painel-carrinho {
position: fixed; top: 0; right: 0; bottom: 0;
width: 340px; max-width: 90vw;
background: #080c16;
border-left: 1px solid #1a2440;
z-index: 46;
display: flex; flex-direction: column;
transform: translateX(105%);
transition: transform .25s ease;
}
.painel-carrinho.aberto {
transform: translateX(0);
box-shadow: -8px 0 30px rgba(0,0,0,.5);
}
.painel-carrinho-topo {
display: flex; align-items: center; gap: 10px;
padding: 20px 18px 16px; border-bottom: 1px solid #1a2440;
}
.painel-carrinho-topo .titulo { color: #edf1f9; font-weight: 700; font-size: 13.5px; letter-spacing: .5px; }
.painel-carrinho-topo .fechar { margin-left: auto; color: #8794b3; font-size: 18px; cursor: pointer; }
.painel-carrinho-corpo { flex: 1; overflow-y: auto; padding: 14px 16px; }
.painel-carrinho-vazio { color: #5c6884; font-size: 12.5px; text-align: center; padding: 40px 10px; line-height: 1.7; }
.item-carrinho {
position: relative; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #10182b;
border-radius: 9px; padding: 12px 13px; background: #060910; margin-bottom: 10px;
}
.item-carrinho .info { flex: 1; min-width: 0; }
.item-carrinho .nome { color: #edf1f9; font-weight: 600; font-size: 12px; line-height: 1.35; }
.item-carrinho .origem { color: #5c6884; font-size: 10px; margin-top: 2px; }
.item-carrinho .qtd-controles { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.item-carrinho .qtd-btn {
width: 22px; height: 22px; border-radius: 5px; border: 1px solid #2a3757;
color: #a5c0f8; display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 13px; font-weight: 700; user-select: none;
}
.item-carrinho .qtd-btn:hover { border-color: #7ca5f4; }
.item-carrinho .qtd-valor { color: #edf1f9; font-size: 12px; font-weight: 600; min-width: 16px; text-align: center; }
.item-carrinho .qtd-valor-pacote { color: #edf1f9; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* Botão de fato (não só texto apagado) -- ícone de lixeira no canto
inferior direito do card, abaixo da coluna de valores pra não
sobrepor o preço -- antes era um "remover" em texto cinza minúsculo,
confuso e fácil de não notar (achado do usuário 04/08/2026; reposicionado
de cima pra baixo em 04/08/2026 por sobrepor o preço). */
.btn-remover-item {
position: absolute; bottom: 10px; right: 10px; width: 26px; height: 26px;
border-radius: 7px; display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .12s;
}
.btn-remover-item:hover { background: rgba(241,106,106,.12); }
/* Coluna direita: preço por simulado + "cada" + subtotal, empilhados e
alinhados à direita -- tira a poluição de texto de preço da coluna
esquerda (achado do usuário 04/08/2026). */
.item-carrinho .valores { flex-shrink: 0; text-align: right; white-space: nowrap; margin-top: 20px; padding-bottom: 26px; }
.item-carrinho .preco-unit-destaque { color: #7ca5f4; font-weight: 700; font-size: 12.5px; }
.item-carrinho .preco-detalhe { color: #5c6884; font-size: 10px; margin-top: 1px; }
.item-carrinho .subtotal { color: #8794b3; font-weight: 600; font-size: 11px; margin-top: 2px; }
.painel-carrinho-rodape {
padding: 16px 18px; border-top: 1px solid #1a2440;
}
.painel-carrinho-total {
display: flex; align-items: center; justify-content: space-between;
color: #edf1f9; font-weight: 700; font-size: 14px; margin-bottom: 12px;
}
.painel-carrinho-total .valor { color: #7ca5f4; font-size: 17px; }
.btn-finalizar-compra {
width: 100%; background: #1a6ee6; color: #fff; font-weight: 700; font-size: 13px;
letter-spacing: .5px; padding: 14px; border-radius: 8px; border: none; cursor: pointer;
}
.btn-finalizar-compra:hover { background: #2f7cf0; }
.btn-finalizar-compra:disabled { opacity: .5; cursor: not-allowed; }
/* — Login / cadastro — */
.auth-wrap { padding: 24px var(--gutter) 40px; max-width: 420px; margin: 0 auto; }
.auth-abas { display: flex; gap: 4px; border: 1px solid #1a2440; border-radius: 9px; padding: 4px; margin-top: 18px; }
.auth-aba {
flex: 1; text-align: center; padding: 10px; border-radius: 6px; cursor: pointer;
color: #8794b3; font-weight: 600; font-size: 12px; letter-spacing: .3px;
}
.auth-aba.ativa { background: #0d1322; color: #edf1f9; }
.auth-form { display: none; flex-direction: column; gap: 12px; margin-top: 20px; }
.auth-form.ativo { display: flex; }
.campo-auth { display: flex; flex-direction: column; gap: 6px; }
.campo-auth label { color: #8794b3; font-size: 11px; font-weight: 600; letter-spacing: .3px; }
.campo-auth input {
border: 1px solid #1a2440; border-radius: 8px; padding: 13px 14px;
color: #edf1f9; font-size: 13px; background: #080c16;
}
.campo-auth input:focus { border-color: #2f7cf0; }
.btn-auth-submit {
background: #1a6ee6; color: #fff; font-weight: 700; font-size: 13px;
letter-spacing: .5px; padding: 14px; border-radius: 8px; border: none; cursor: pointer; margin-top: 6px;
}
.btn-auth-submit:hover { background: #2f7cf0; }
.btn-auth-submit:disabled { opacity: .5; cursor: not-allowed; }
.auth-erro {
display: none; color: #f87171; font-size: 11.5px; line-height: 1.6; margin-top: 4px;
border: 1px solid rgba(248,113,113,.35); border-radius: 7px; padding: 10px 12px; background: rgba(248,113,113,.06);
}
.auth-erro.visivel { display: block; }
.auth-logado { display: none; padding: 20px 4px 40px; }
.auth-logado.visivel { display: block; }
.auth-logado .titulo { color: #edf1f9; font-weight: 700; font-size: 16px; }
.auth-logado .texto { color: #8794b3; font-size: 12.5px; margin-top: 4px; line-height: 1.6; }
.auth-logado .btn-sair {
display: block; width: 100%; text-align: center; margin-top: 24px; border: 1px solid #2a3757; color: #a5c0f8;
font-weight: 600; font-size: 11.5px; padding: 12px 20px; border-radius: 7px; cursor: pointer;
}
.auth-logado .btn-sair:hover { border-color: #7ca5f4; }
/* — Zona de risco: apagar conta — discreto de propósito (não é ação
principal da tela), mas cor de perigo deixa clara a natureza
destrutiva antes mesmo de abrir o modal de confirmação. */
.conta-zona-risco { border-top: 1px solid #1a2440; padding-top: 20px; margin-top: 20px; }
.btn-apagar-conta {
display: inline-block; margin-top: 10px; color: #f87171; font-weight: 600; font-size: 11.5px;
cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.btn-apagar-conta:hover { color: #fca5a5; }
/* — Minha Conta: cabeçalho com avatar — */
.conta-cabecalho { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid #1a2440; }
.conta-avatar {
width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 26px;
background: #1a6ee6; border: 2px solid #1a2440;
}
.conta-cabecalho-info { min-width: 0; }
/* — Minha Conta: editor de avatar — */
.conta-avatar-editor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.conta-avatar-cores { display: flex; gap: 8px; }
.conta-avatar-cores .cor-opcao {
width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
}
.conta-avatar-cores .cor-opcao.selecionada { border-color: #edf1f9; }
#contaAvatarEmojiInput {
border: 1px solid #1a2440; border-radius: 8px; padding: 9px 12px; width: 90px;
color: #edf1f9; font-size: 16px; background: #080c16; text-align: center;
}
/* — Minha Conta: seções (nome/e-mail/telefone/senha) — */
.conta-secao { margin-top: 22px; }
.conta-secao-titulo { color: #8794b3; font-size: 11px; font-weight: 700; letter-spacing: .4px; margin-bottom: 8px; }
.conta-secao .auth-texto-ajuda { margin-bottom: 10px; }
.conta-campo-label { display: block; color: #66739a; font-size: 10.5px; margin-bottom: 4px; }
.conta-secao input {
width: 100%; border: 1px solid #1a2440; border-radius: 8px; padding: 12px 13px;
color: #edf1f9; font-size: 12.5px; background: #080c16; margin-bottom: 8px;
}
.conta-campo-linha { display: flex; gap: 8px; }
.conta-campo-linha input { margin-bottom: 0; }
.btn-conta-salvar {
border: 1px solid #2a3757; color: #a5c0f8; font-weight: 600; font-size: 11.5px;
padding: 11px 16px; border-radius: 8px; cursor: pointer; text-align: center; white-space: nowrap;
}
.btn-conta-salvar:hover { border-color: #7ca5f4; }
.conta-feedback {
display: none; font-size: 11px; margin-top: 8px; padding: 8px 12px; border-radius: 7px; line-height: 1.5;
}
.conta-feedback.visivel { display: block; }
.conta-feedback.sucesso { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.3); color: #4ade80; }
.conta-feedback.erro { background: rgba(248,113,113,.06); border: 1px solid rgba(248,113,113,.3); color: #f87171; }
.conta-passo { display: none; }
.conta-passo.ativo { display: block; }
/* Registro/recuperação de senha em passos (telefone -> código -> dados) */
.auth-passo { display: none; flex-direction: column; gap: 12px; }
.auth-passo.ativo { display: flex; }
.campo-telefone {
display: flex; align-items: center; border: 1px solid #1a2440; border-radius: 8px;
background: #080c16; overflow: hidden;
}
.campo-telefone .ddi-fixo {
padding: 13px 10px 13px 14px; color: #5c6884; font-size: 13px; font-weight: 600;
border-right: 1px solid #1a2440; user-select: none;
}
.campo-telefone input {
border: none; background: transparent; flex: 1; padding: 13px 14px 13px 10px;
color: #edf1f9; font-size: 13px;
}
.campo-telefone input:focus { outline: none; }
.campo-telefone input::placeholder { color: #5c6884; opacity: .55; }
.auth-texto-ajuda { color: #8794b3; font-size: 12px; line-height: 1.6; }
.auth-esqueci {
align-self: flex-end; color: #7ca5f4; font-size: 11.5px; font-weight: 600;
cursor: pointer; margin-top: -4px;
}
.auth-esqueci:hover { color: #a5c0f8; text-decoration: underline; }
.auth-reenviar {
color: #7ca5f4; font-size: 11.5px; font-weight: 600; cursor: pointer; text-align: center;
}
.auth-reenviar:hover { color: #a5c0f8; text-decoration: underline; }
.auth-voltar-login {
color: #8794b3; font-size: 11.5px; font-weight: 600; cursor: pointer; text-align: center; margin-top: 4px;
}
.auth-voltar-login:hover { color: #edf1f9; }
.auth-passo2-nav {
display: flex; justify-content: space-between; gap: 12px; margin-top: 8px;
}
.auth-passo2-nav .auth-voltar-login { margin-top: 0; }
.auth-divisor {
display: flex; align-items: center; gap: 10px; margin: 4px 0;
color: #5c6884; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
}
.auth-divisor::before, .auth-divisor::after { content: ""; flex: 1; height: 1px; background: #1a2440; }
.auth-google-btn { display: flex; justify-content: center; }
/* — Checkout — */
.checkout-wrap { padding: 24px var(--gutter) 40px; max-width: 560px; margin: 0 auto; }
.checkout-resumo {
border: 1px solid #1a2440; border-radius: 12px; padding: 14px 16px; background: #080c16;
margin-top: 20px;
}
.checkout-resumo:empty { display: none; }
.checkout-resumo .linha { display: flex; justify-content: space-between; color: #8794b3; font-size: 12.5px; padding: 3px 0; }
.mp-tag-extra {
color: #c9a227; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
border: 1px solid rgba(201,162,39,.35); border-radius: 4px; padding: 1px 5px; margin-left: 4px;
}
.checkout-resumo .linha.total { color: #edf1f9; font-weight: 700; font-size: 14px; border-top: 1px solid #1a2440; margin-top: 4px; padding-top: 8px; }
.checkout-resumo .linha.total .valor { color: #7ca5f4; }
.checkout-cupom { display: flex; gap: 8px; margin-top: 14px; }
.checkout-cupom input {
flex: 1; border: 1px solid #1a2440; border-radius: 8px; padding: 11px 13px;
color: #edf1f9; font-size: 12.5px; background: #080c16;
}
.checkout-cupom .btn-aplicar {
display: flex; align-items: center; justify-content: center;
border: 1px solid #2a3757; color: #a5c0f8; font-weight: 600; font-size: 11.5px;
padding: 0 16px; border-radius: 8px; cursor: pointer;
}
.checkout-cupom .btn-aplicar:hover { border-color: #7ca5f4; }
#paymentBrick_container { margin-top: 22px; }
.checkout-status {
display: none; text-align: center; padding: 30px 10px; border: 1px solid #1a2440;
border-radius: 12px; margin-top: 20px;
}
.checkout-status.visivel { display: block; }
.checkout-status .titulo { color: #edf1f9; font-weight: 700; font-size: 14px; }
.checkout-status .texto { color: #8794b3; font-size: 12px; margin-top: 8px; line-height: 1.6; }
.checkout-status .spinner {
width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 14px;
border: 3px solid #1a2440; border-top-color: #2f7cf0;
animation: ss-girar 0.8s linear infinite;
}
@keyframes ss-girar { to { transform: rotate(360deg); } }
.checkout-status.aprovado .titulo { color: #4ade80; }
.checkout-status.rejeitado .titulo, .checkout-status.cancelado .titulo { color: #f87171; }
/* Selos de confiança -- sem isso o checkout parecia genérico demais
("página de golpe", achado do usuário 03/08/2026). */
.checkout-selos { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; padding-top: 4px; }
.checkout-selos .selo { display: flex; align-items: center; gap: 6px; color: #8794b3; font-size: 10.5px; font-weight: 600; }
.checkout-cupom-feedback {
display: none; font-size: 11.5px; margin-top: 8px; padding: 8px 12px;
border-radius: 7px; line-height: 1.5;
}
.checkout-cupom-feedback.visivel { display: block; }
.checkout-cupom-feedback.sucesso { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.3); color: #4ade80; }
.checkout-cupom-feedback.erro { background: rgba(248,113,113,.06); border: 1px solid rgba(248,113,113,.3); color: #f87171; }
.checkout-secao-titulo { color: #5c6884; font-size: 10px; font-weight: 600; letter-spacing: 1.6px; margin-bottom: 2px; }
/* QR code Pix -- antes o código só chegava por e-mail, com atraso
(achado do usuário 03/08/2026: motivo de abandono de carrinho). Agora
a Payments API devolve o QR na hora e mostramos direto aqui. */
.checkout-pix {
display: none; text-align: center; padding: 22px 18px; border: 1px solid #1a2440;
border-radius: 12px; margin-top: 20px; background: #080c16;
}
.checkout-pix.visivel { display: block; }
.checkout-pix .titulo { color: #edf1f9; font-weight: 700; font-size: 13.5px; margin-bottom: 14px; }
.checkout-pix img { width: 180px; height: 180px; border-radius: 8px; background: #fff; padding: 8px; }
.checkout-pix-copia { display: flex; gap: 8px; margin-top: 16px; }
.checkout-pix-copia input {
flex: 1; border: 1px solid #1a2440; border-radius: 8px; padding: 10px 12px;
color: #8794b3; font-size: 11px; background: #04060c;
}
.checkout-pix-copia .btn-copiar {
border: 1px solid #2a3757; color: #a5c0f8; font-weight: 600; font-size: 11.5px;
padding: 0 16px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.checkout-pix-copia .btn-copiar:hover { border-color: #7ca5f4; }
.checkout-pix-aviso { color: #5c6884; font-size: 11px; margin-top: 14px; line-height: 1.6; }
.checkout-mp-logo {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 24px; color: #5c6884; font-size: 11px;
}
.checkout-mp-logo b { color: #8794b3; }
/* Explica o processo (segurança, prazos, onde acessar) abaixo do Payment
Brick -- achado do usuário 03/08/2026: área vazia ali passava
desconfiança no checkout do carrinho. */
.checkout-como-funciona {
display: flex; flex-direction: column; gap: 10px; margin-top: 16px;
border: 1px solid #1a2440; border-radius: 12px; padding: 14px 16px; background: #060910;
}
.checkout-como-funciona .item { display: flex; align-items: flex-start; gap: 10px; }
.checkout-como-funciona .item svg { flex-shrink: 0; margin-top: 1px; }
.checkout-como-funciona .item span { color: #8794b3; font-size: 11.5px; line-height: 1.6; }
.checkout-como-funciona .item b { color: #edf1f9; }
/* — Checkout de produto único (botão "Comprar" direto no catálogo) —
SEM moldura/cartão envolvendo a tela toda -- pedido do usuário
03/08/2026: cada seção solta na página, com espaçamento vertical
entre elas, sem borda/fundo por trás do conjunto. */
.checkout-wrap > * + * { margin-top: 16px; }
/* Foto sem moldura própria -- o wrap vira do tamanho EXATO da imagem
(sem padding/fundo/box ao redor), qualquer que seja a proporção
(retrato, paisagem, quadrada, PNG sem fundo). perspective fica no
wrapper externo (necessário pro tilt 3D funcionar), sem impor altura
nem largura fixas -- quem manda no tamanho é a própria ![]()
. */
.checkout-produto-foto-perspective { display: inline-block; max-width: 100%; perspective: 1000px; }
.checkout-produto-foto-wrap {
display: inline-block; transform-style: preserve-3d;
}
.checkout-produto-foto-wrap img {
display: block; max-width: 100%; max-height: 50vh; width: auto; height: auto;
border-radius: 12px; transform-style: preserve-3d; will-change: transform;
border: 1px solid rgba(124,165,244,.5);
box-shadow: 0 20px 40px -16px rgba(47,124,240,.55), 0 0 0 1px rgba(47,124,240,.15);
}
.checkout-produto-banca { display: flex; align-items: center; gap: 8px; color: #5c6884; font-size: 11px; }
.checkout-produto-banca b, .checkout-produto-banca span { color: #8794b3; }
.checkout-produto-titulo {
font-family: Georgia, serif; color: #edf1f9; font-weight: 600; font-size: 17px; line-height: 1.3;
}
.checkout-produto-descricao { color: #8794b3; font-size: 12px; line-height: 1.65; }
.checkout-produto-descricao p { margin: 0 0 10px; }
.checkout-produto-descricao p:last-child { margin-bottom: 0; }
/* Seletor de quantidade do "Simulado individual" -- comprar vários de
uma vez sem depender do carrinho (pedido do usuário 04/08/2026). */
.checkout-produto-qtd-wrap { border: 1px solid #10182b; border-radius: 9px; background: #060910; padding: 12px 14px; margin-top: 14px; }
.checkout-produto-qtd-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.checkout-produto-qtd-linha .rotulo { color: #edf1f9; font-size: 12.5px; font-weight: 600; }
.checkout-produto-qtd-controles { display: flex; align-items: center; gap: 10px; }
.checkout-produto-qtd-controles .qtd-btn {
width: 26px; height: 26px; border-radius: 6px; border: 1px solid #2a3757;
color: #a5c0f8; display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 15px; font-weight: 700; user-select: none;
}
.checkout-produto-qtd-controles .qtd-btn:hover { border-color: #7ca5f4; }
.checkout-produto-qtd-controles .qtd-valor { color: #edf1f9; font-size: 13px; font-weight: 700; min-width: 22px; text-align: center; }
.checkout-produto-qtd-aviso { color: #4ade80; font-size: 11px; margin-top: 9px; line-height: 1.5; }
/* Amostra grátis -- botão azul com efeito de "botão físico" 3D:
flutua sozinho (sobe/desce devagar) quando parado, e ao pressionar
(:active) para de flutuar e afunda de verdade (sombra encolhe),
como se fosse um botão físico sendo empurrado. Modelo de referência
do usuário (Checkout Order Bump e Amostra Gratis.html). */
/* "Flutuar" deixou de ser animação CSS automática -- agora reage à
direção do toque na tela via ativarTiltToque(modo:"flutuar2d", ver
ui.js), que já gera sozinho um movimento ocioso quando ninguém toca
(mesma sensação de antes, só que também responde ao toque, pedido do
usuário 04/08/2026). animation CSS competia com o transform inline
do JS a cada frame -- por isso foi removida daqui. */
.checkout-produto-amostra {
display: flex; align-items: center; gap: 12px; border: none; cursor: pointer;
width: 100%; padding: 13px 15px; border-radius: 12px; font-family: inherit;
background: linear-gradient(150deg, #3a86f5, #1a6ee6 60%, #123f8c);
box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 16px 30px rgba(26,110,230,.3);
transition: box-shadow .08s ease;
}
.checkout-produto-amostra:active {
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 6px rgba(0,0,0,.3);
}
.checkout-produto-amostra .icone {
width: 30px; height: 30px; border-radius: 9px; background: #fff;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.checkout-produto-amostra .info { flex: 1; min-width: 0; text-align: left; }
.checkout-produto-amostra .titulo { color: #fff; font-weight: 700; font-size: 12.5px; }
.checkout-produto-amostra .detalhe { color: rgba(255,255,255,.75); font-size: 10.5px; margin-top: 1px; }
.checkout-produto-amostra .selo-pdf {
background: rgba(255,255,255,.22); color: #fff; font-size: 9px; font-weight: 700;
padding: 3px 7px; border-radius: 5px; flex-shrink: 0;
}
/* Order bump -- card com checkbox custom: clicar em QUALQUER parte do
card marca/desmarca (não precisa acertar o botão), preço riscado +
preço com desconto lado a lado, mesmo modelo de referência. */
.checkout-produto-bump {
border: 1px solid #10182b; border-left: 3px solid #2f7cf0; border-radius: 9px;
background: #060910; padding: 14px; cursor: pointer; transition: border-color .12s;
animation: bumpFlutuar 3.2s ease-in-out infinite;
}
/* Flutuação leve pra chamar atenção pro order bump sem parecer poluído
(pedido do usuário 04/08/2026): translateY pequeno, sem afetar layout. */
@keyframes bumpFlutuar {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
#cprodBumps:not(:empty), #checkoutBumps:not(:empty) { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.checkout-produto-bump:hover { border-left-color: #7ca5f4; }
.checkout-produto-bump-selo {
display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .6px;
padding: 3px 9px; border-radius: 5px; background: #101f3d; color: #7ca5f4; white-space: nowrap;
}
.checkout-produto-bump .texto {
color: #edf1f9; font-weight: 600; font-size: 12.5px; line-height: 1.35; margin-top: 9px;
}
.checkout-produto-bump-origem { color: #5c6884; font-size: 10px; margin-top: 2px; }
.checkout-produto-bump .detalhe {
color: #5c6884; font-size: 10.5px; line-height: 1.4; margin-top: 3px;
}
.checkout-produto-bump-rodape {
display: flex; align-items: center; justify-content: space-between; margin-top: 9px;
}
.checkout-produto-bump-precos { display: flex; align-items: baseline; gap: 6px; }
.checkout-produto-bump-precos .de {
color: #5c6884; font-size: 13px; font-weight: 700; text-decoration: line-through;
}
.checkout-produto-bump-precos .por { color: #7ca5f4; font-size: 13px; font-weight: 700; }
.checkout-produto-bump-add {
display: flex; align-items: center; gap: 7px; color: #a5c0f8; font-weight: 600; font-size: 10.5px;
}
.checkout-produto-bump-check {
width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid #2a3757; transition: background .12s, border-color .12s;
}
.checkout-produto-bump.aceito .checkout-produto-bump-check {
background: #7ca5f4; border-color: #7ca5f4;
}
/* Oferta "compra rápida" -- vermelho, bem destacada (urgência real: some
sozinha quando a janela de 30min por visitante, ver checkout-produto.js,
expira). Título grande + subtítulo explicativo + timer, não mais só
uma linha fina. */
.checkout-produto-timer {
display: flex; align-items: center; gap: 12px;
background: linear-gradient(135deg, rgba(248,68,68,.14), rgba(248,68,68,.05));
border: 1px solid rgba(248,68,68,.4); border-radius: 12px;
padding: 13px 15px; overflow: hidden;
box-shadow: 0 4px 16px rgba(248,68,68,.12);
}
.checkout-produto-timer .icone {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
background: rgba(248,68,68,.18); display: flex; align-items: center; justify-content: center;
}
.checkout-produto-timer .conteudo { flex: 1; min-width: 0; }
.checkout-produto-timer .titulo {
color: #ff6b6b; font-weight: 800; font-size: 12.5px; letter-spacing: .2px;
}
.checkout-produto-timer .subtitulo {
color: #d99; font-size: 10.5px; margin-top: 2px; line-height: 1.4;
}
.checkout-produto-timer .tempo {
flex-shrink: 0; color: #fff; background: #d92e2e; font-weight: 800; font-size: 12px;
padding: 6px 10px; border-radius: 7px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.checkout-produto-timer.urgente .tempo { animation: ss-pulse-timer 1s infinite; }
@keyframes ss-pulse-timer { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
.checkout-selos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 18px; }
.checkout-selos-grid .selo {
border: 1px solid #131b30; border-radius: 8px; padding: 9px 6px; text-align: center; background: #060910;
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.checkout-selos-grid .selo span { color: #8794b3; font-size: 9px; font-weight: 600; line-height: 1.3; }
.checkout-produto-avaliacoes { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.checkout-produto-avaliacoes-titulo {
color: #5c6884; font-size: 10px; font-weight: 600; letter-spacing: 1.6px;
}
.checkout-produto-avaliacao-card {
border: 1px solid #1a2440; border-radius: 10px; padding: 13px 15px; background: #060910;
}
.checkout-produto-avaliacao-card .estrelas { color: #c9a227; font-size: 11px; letter-spacing: 1.5px; }
.checkout-produto-avaliacao-card .texto {
color: #b9c3da; font-size: 12px; line-height: 1.65; margin-top: 6px; font-style: italic;
}
.checkout-produto-avaliacao-card .autor { color: #5c6884; font-size: 10.5px; margin-top: 7px; font-weight: 600; }
.checkout-produto-faq { margin-top: 22px; display: flex; flex-direction: column; gap: 7px; }
.checkout-produto-faq-titulo {
color: #5c6884; font-size: 10px; font-weight: 600; letter-spacing: 1.6px; margin-bottom: 2px;
}
.checkout-produto-faq-item { border: 1px solid #1a2440; border-radius: 9px; background: #060910; overflow: hidden; margin-bottom: 7px; }
.checkout-produto-faq-pergunta {
display: flex; align-items: center; gap: 10px; padding: 12px 13px; cursor: pointer;
}
.checkout-produto-faq-pergunta span:first-child { flex: 1; color: #edf1f9; font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.checkout-produto-faq-seta { color: #5c6884; font-size: 12px; transition: transform .2s ease; }
.checkout-produto-faq-item.aberto .checkout-produto-faq-seta { transform: rotate(180deg); }
.checkout-produto-faq-resposta {
display: none; padding: 0 13px 12px; color: #8794b3; font-size: 11px; line-height: 1.65;
}
.checkout-produto-faq-item.aberto .checkout-produto-faq-resposta { display: block; }
.checkout-produto-whatsapp {
display: flex; align-items: center; gap: 11px; border: 1px solid rgba(34,197,94,.35);
border-radius: 11px; padding: 14px 16px; cursor: pointer; background: rgba(34,197,94,.06);
margin-top: 22px; transition: background .08s ease;
}
.checkout-produto-whatsapp:hover { background: rgba(34,197,94,.11); }
/* :active precisa existir (não só :hover) -- Safari iOS sem :active exige
DOIS toques pra clicar (1º só simula o hover, 2º dispara o click de
verdade). Sem transform aqui: o elemento já recebe translate via JS a
cada frame (ativarTiltToque, modo flutuar2d) -- sobrescrever via CSS
:active brigava com o inline style e deixava o card "torto" (achado
do usuário 04/08/2026). */
.checkout-produto-whatsapp:active {
background: rgba(34,197,94,.16);
}
.checkout-produto-whatsapp svg { flex-shrink: 0; }
.checkout-produto-whatsapp .titulo { color: #22c55e; font-weight: 700; font-size: 12.5px; }
.checkout-produto-whatsapp .detalhe { color: #7fb894; font-size: 10.5px; margin-top: 2px; }
/* — Meus Produtos — */
.mp-rotulo-secao { justify-content: space-between; padding-right: var(--gutter); }
.mp-btn-ajuda {
width: 34px; height: 34px; border-radius: 50%; border: 1px solid #1a2440;
display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.mp-btn-ajuda:hover { border-color: #5c6884; }
.mp-ajuda-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mp-ajuda-card {
display: flex; align-items: flex-start; gap: 12px; border: 1px solid #1a2440; border-radius: 11px;
padding: 14px 15px; cursor: pointer; transition: border-color .15s;
}
.mp-ajuda-card:hover { border-color: #2a4d8f; background: rgba(124,165,244,.04); }
.mp-ajuda-card svg { flex-shrink: 0; margin-top: 1px; }
.mp-ajuda-card-titulo { color: #edf1f9; font-weight: 700; font-size: 12.5px; }
.mp-ajuda-card-desc { color: #8794b3; font-size: 11px; margin-top: 3px; line-height: 1.6; }
.mp-ajuda-faq-titulo { color: #8794b3; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-top: 20px; margin-bottom: 8px; }
.mp-wrap { padding: 24px var(--gutter) 40px; }
.mp-vazio { color: #5c6884; font-size: 12.5px; text-align: center; padding: 50px 20px; line-height: 1.7; }
.mp-sem-conta {
text-align: center; padding: 46px 20px; border: 1px solid #1a2440; border-radius: 14px; background: #080c16;
}
.mp-sem-conta-icone {
width: 52px; height: 52px; border-radius: 50%; background: #101f3d;
display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.mp-sem-conta .titulo { color: #edf1f9; font-weight: 700; font-size: 14.5px; }
.mp-sem-conta .texto { color: #8794b3; font-size: 12px; line-height: 1.7; margin-top: 10px; max-width: 340px; margin-left: auto; margin-right: auto; }
.mp-sem-conta .botao {
display: inline-block; margin-top: 18px; background: #2f7cf0; color: #fff;
font-weight: 700; font-size: 12px; padding: 11px 20px; border-radius: 8px; cursor: pointer;
}
.mp-sem-conta .botao:hover { background: #4293f5; }
.mp-busca-wrap {
display: flex; align-items: center; gap: 9px; border: 1px solid #1a2440; border-radius: 10px;
padding: 11px 14px; background: #080c16; margin-bottom: 22px;
}
.mp-busca-wrap:has(input:focus) { border-color: #2a4d8f; }
.mp-busca-wrap svg { flex-shrink: 0; }
.mp-busca-wrap input {
border: none; background: transparent; color: #edf1f9; font-size: 12.5px; width: 100%;
font-family: inherit; outline: none;
}
.mp-busca-wrap input::placeholder { color: #5c6884; }
.mp-secao-titulo {
color: #c9a227; font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px;
margin: 26px 0 12px;
}
/* Extras/adicionais dentro do CARGO (não numa seção solta à parte) --
título menor, com padding lateral igual o resto do bloco de cargo. */
.mp-secao-titulo-cargo { margin: 4px 16px 10px; }
/* Camadas recolhíveis (/ nativo) em todo nível:
concurso > cargo > pacote > lista de arquivos -- sem isso, quem tem
muitos pacotes via tudo espalhado numa lista só. */
.mp-concurso {
margin-bottom: 14px; border: 1px solid #1a2440; border-radius: 14px;
background: #060910; overflow: hidden;
}
.mp-concurso-header {
display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
list-style: none;
}
.mp-concurso-header::-webkit-details-marker { display: none; }
.mp-concurso[open] > .mp-concurso-header { border-bottom: 1px solid #1a2440; }
.mp-concurso-capa {
width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex-shrink: 0;
border: 1px solid #1a2440;
}
.mp-capa-fallback { background: linear-gradient(135deg, #101f3d, #182a52); }
.mp-concurso-nome {
color: #edf1f9; font-weight: 700; font-size: 14.5px; letter-spacing: .2px; flex: 1;
}
.mp-concurso > .mp-cargo:first-of-type { border-top: none; }
.mp-cargo { border-top: 1px solid #1a2440; }
.mp-cargo-nome {
display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
color: #a5c0f8; font-weight: 600; font-size: 12px; letter-spacing: .3px;
padding: 12px 16px;
}
.mp-cargo-nome::-webkit-details-marker { display: none; }
.mp-cargo[open] > .mp-cargo-nome { color: #7ca5f4; }
.mp-pacotes { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
.mp-seta { flex-shrink: 0; transition: transform .18s; margin-left: auto; }
details[open] > summary .mp-seta { transform: rotate(180deg); }
.card-mp {
border: 1px solid #1a2440; border-radius: 13px; background: #080c16; overflow: hidden;
transition: border-color .15s;
}
.card-mp:hover { border-color: #2a4d8f; }
.card-mp-header {
display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
padding: 14px 16px;
}
.card-mp-header::-webkit-details-marker { display: none; }
.card-mp-nome { color: #edf1f9; font-weight: 700; font-size: 13px; line-height: 1.3; flex: 1; }
.card-mp[open] > .card-mp-header { border-bottom: 1px solid #1a2440; }
.card-mp-corpo { padding: 14px 16px 16px; }
.card-mp .meta { color: #5c6884; font-size: 10.5px; }
/* Redesign 04/08/2026: badge de PDF (ícone de arquivo com "PDF" no
canto, cor de alerta padrão de PDF em vez de azul genérico) +
nome + seta de download sutil à direita -- substituiu o botão fino
"width: fit-content" (ficava desproporcional numa lista de 20+
simulados) por um cartão que ocupa a largura toda. Mesmo design
usado tanto na lista principal do cargo (direto em .mp-cargo) quanto
nos cards de extras/order bump (dentro de .card-mp-corpo) --
padronizado, sem visual diferente entre os dois (achado do usuário
04/08/2026). */
.btn-download {
display: flex; align-items: center; gap: 11px; border: 1px solid #1a2440; border-radius: 10px;
background: #0a0f1c; padding: 10px 13px; color: #edf1f9; font-size: 12px; font-weight: 600;
cursor: pointer; transition: border-color .12s, background .12s;
}
.btn-download:hover { border-color: #7ca5f4; background: rgba(124,165,244,.06); }
.btn-download-icone {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
background: rgba(241,106,106,.12); display: flex; align-items: center; justify-content: center;
}
.btn-download span { flex: 1; }
.btn-download-seta { flex-shrink: 0; color: #5c6884; }
.mp-simulados-lista {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
}
/* Direto dentro do accordion do cargo (sem .card-mp-corpo ao redor)
precisa do próprio padding -- dentro do card de extras o
.card-mp-corpo já dá o padding, então fica só o gap. */
.mp-cargo > .mp-simulados-lista { padding: 0 16px 16px; }
.card-mp-corpo .mp-simulados-lista { margin-top: 12px; }
.card-mp .btn-reembolso {
margin-top: 12px; color: #f87171; font-size: 11px; font-weight: 600; cursor: pointer;
border: 1px solid rgba(248,113,113,.3); border-radius: 7px; padding: 8px 13px; width: fit-content;
}
.card-mp .btn-reembolso:hover { background: rgba(248,113,113,.06); }
/* — Modal de confirmação de reembolso (fricção intencional, 2-3 passos) — */
.modal-overlay {
position: fixed; inset: 0; background: rgba(2,4,9,.8); z-index: 60;
display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.aberto { display: flex; }
.modal-caixa {
background: #080c16; border: 1px solid #1a2440; border-radius: 14px;
max-width: 440px; width: 100%; padding: 24px 22px; max-height: 90vh; overflow-y: auto;
}
.modal-caixa .titulo { color: #edf1f9; font-weight: 700; font-size: 15px; }
.modal-caixa .texto { color: #8794b3; font-size: 12.5px; line-height: 1.7; margin-top: 10px; }
.modal-caixa .lista-perda { margin-top: 12px; padding-left: 18px; color: #b9c3da; font-size: 12px; line-height: 1.9; }
.modal-caixa .campo-auth { margin-top: 14px; }
.modal-caixa textarea {
border: 1px solid #1a2440; border-radius: 8px; padding: 12px 13px; color: #edf1f9;
font-size: 12.5px; background: #060910; min-height: 80px; resize: vertical; width: 100%;
}
.modal-botoes { display: flex; gap: 10px; margin-top: 18px; }
.modal-botoes .btn-cancelar {
flex: 1; border: 1px solid #2a3757; color: #8794b3; font-weight: 600; font-size: 12px;
padding: 12px; border-radius: 8px; cursor: pointer; text-align: center;
}
.modal-botoes .btn-cancelar:hover { border-color: #5c6884; }
.modal-botoes .btn-confirmar {
flex: 1; border: none; background: #f87171; color: #060910; font-weight: 700; font-size: 12px;
padding: 12px; border-radius: 8px; cursor: pointer; text-align: center;
}
.modal-botoes .btn-confirmar:hover { background: #fb8383; }
.modal-botoes .btn-confirmar:disabled { opacity: .5; cursor: not-allowed; }
/* Avaliação é ação positiva -- botão de confirmar em verde, não vermelho
(o vermelho do modal de reembolso é intencional pra sinalizar ação destrutiva). */
#modalAvaliacao .btn-confirmar { background: #22c55e; color: #04150a; }
#modalAvaliacao .btn-confirmar:hover { background: #4ade80; }
/* "Criar conta" também é ação positiva, não destrutiva -- mesmo padrão de cor. */
#modalAmostraBloqueada .btn-confirmar { background: #22c55e; color: #04150a; }
#modalAmostraBloqueada .btn-confirmar:hover { background: #4ade80; }
/* "Entendi" do aviso de ajuste de carrinho também é só reconhecimento, não
ação destrutiva -- mesmo padrão de cor verde. */
#modalAvisoAjusteCarrinho .btn-confirmar { background: #22c55e; color: #04150a; }
#modalAvisoAjusteCarrinho .btn-confirmar:hover { background: #4ade80; }
.modal-amostra-bloqueada { text-align: center; }
.modal-amostra-icone {
width: 52px; height: 52px; border-radius: 50%; background: #101f3d;
display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.modal-amostra-bloqueada .titulo { font-size: 16px; }
.modal-amostra-bloqueada .texto { text-align: center; }
.campo-auth select {
border: 1px solid #1a2440; border-radius: 8px; padding: 12px 13px; color: #edf1f9;
font-size: 12.5px; background: #060910; width: 100%; font-family: inherit;
}
.estrelas-input { display: flex; gap: 4px; font-size: 26px; }
.estrelas-input span { color: #2a3757; cursor: pointer; transition: color .12s; }
.estrelas-input span.marcada { color: #c9a227; }
.card-avaliacao .produto-avaliado { color: #5c6884; font-weight: 500; }
@media (min-width: 1100px) {
.auth-wrap, .checkout-wrap { padding-top: 88px; padding-bottom: 90px; }
.mp-wrap { max-width: 1280px; margin: 0 auto; padding: 88px 48px 90px; }
.mp-pacotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
/* — Meu Progresso — */
.progresso-wrap { padding: 24px var(--gutter) 40px; }
.progresso-aba-preview-tag { color: #5c6884; font-weight: 600; font-size: 9.5px; text-transform: uppercase; }
.progresso-vazio { color: #5c6884; font-size: 12.5px; text-align: center; padding: 50px 20px; line-height: 1.7; }
/* Navegação em telas sequenciais (reformulado 05/08/2026, mesmo design
system do Ranking -- ver .ranking-resultado-topo/.ranking-btn-voltar em
ranking.js) -- tela 1 (raiz: 2 cards), telas 2/3 (listas de escolha). */
.progresso-cards-raiz { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.progresso-card-raiz {
border: 1px solid #1a2440; border-radius: 12px; padding: 18px 16px;
background: #080c16; cursor: pointer;
}
.progresso-card-raiz:hover { border-color: #7ca5f4; }
.progresso-card-raiz .titulo { color: #edf1f9; font-weight: 700; font-size: 14px; }
.progresso-card-raiz .texto { color: #8794b3; font-size: 12px; margin-top: 6px; line-height: 1.6; }
.progresso-resultado-topo { display: flex; align-items: center; margin-bottom: 4px; }
.progresso-btn-voltar {
color: #7ca5f4; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 2px;
}
.progresso-btn-voltar:hover { color: #a5c0f8; }
.progresso-lista-escolha { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.progresso-item-escolha {
border: 1px solid #1a2440; border-radius: 10px; padding: 13px 15px;
color: #b9c3da; font-size: 12.5px; font-weight: 600; cursor: pointer; background: #080c16;
}
.progresso-item-escolha:hover { border-color: #7ca5f4; color: #edf1f9; }
.progresso-evolucao-grafico { margin-top: 14px; border: 1px solid #1a2440; border-radius: 12px; padding: 16px; background: #080c16; }
.progresso-evolucao-svg { width: 100%; height: 90px; display: block; }
.progresso-evolucao-legenda { display: flex; justify-content: space-between; margin-top: 10px; gap: 4px; }
.progresso-evolucao-legenda span { color: #5c6884; font-size: 9.5px; text-align: center; line-height: 1.5; flex: 1; }
.progresso-evolucao-legenda span b { color: #7ca5f4; font-size: 11px; }
.progresso-chips-simulados { display: flex; gap: 8px; flex-wrap: wrap; }
.progresso-chip-simulado {
border: 1px solid #1a2440; border-radius: 8px; padding: 8px 13px;
color: #8794b3; font-size: 11px; font-weight: 600; cursor: pointer; display: flex; gap: 6px; align-items: center;
}
.progresso-chip-simulado:hover { border-color: #7ca5f4; color: #edf1f9; }
.progresso-chip-simulado span { font-weight: 700; }
.progresso-chip-simulado.baixa span { color: #f87171; }
.progresso-chip-simulado.media span { color: #e0b52d; }
.progresso-chip-simulado.alta span { color: #4ade80; }
.progresso-detalhe-simulado { margin-top: 14px; border: 1px solid #1a2440; border-radius: 12px; padding: 16px; background: #080c16; }
.progresso-detalhe-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.progresso-detalhe-cabecalho .titulo { color: #edf1f9; font-weight: 700; font-size: 12.5px; }
.progresso-detalhe-fechar { color: #5c6884; font-size: 11px; cursor: pointer; white-space: nowrap; }
.progresso-detalhe-fechar:hover { color: #edf1f9; }
.progresso-detalhe-questoes { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.progresso-detalhe-questao {
display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
border-left: 3px solid transparent; border-radius: 6px; padding: 8px 10px; font-size: 11px; background: #0a0f1c;
}
.progresso-detalhe-questao .num { flex-shrink: 0; }
.progresso-detalhe-questao .materia { flex: 1 1 140px; }
.progresso-detalhe-questao .icone { margin-left: auto; }
.progresso-detalhe-questao.acertou { border-left-color: #4ade80; }
.progresso-detalhe-questao.errou { border-left-color: #f87171; }
.progresso-detalhe-questao .num { color: #5c6884; font-weight: 700; }
.progresso-detalhe-questao .materia { color: #8794b3; }
.progresso-detalhe-questao .resp { color: #8794b3; white-space: nowrap; }
.progresso-detalhe-questao .resp b { color: #edf1f9; }
.progresso-detalhe-questao .icone { text-align: center; font-weight: 700; }
.progresso-detalhe-questao.acertou .icone { color: #4ade80; }
.progresso-detalhe-questao.errou .icone { color: #f87171; }
.progresso-preview-aviso {
display: flex; align-items: center; gap: 8px; margin-top: 18px;
border: 1px solid rgba(201,162,39,.35); border-radius: 9px; padding: 10px 14px;
background: rgba(201,162,39,.06); color: #e0b52d; font-size: 11.5px; font-weight: 600;
}
/* Tela de explicação exibida ANTES dos gráficos ilustrativos (pedido do
usuário 04/08/2026) -- sem login, sem "Meu Progresso" comprado, ou sem
nenhum gabarito preenchido ainda caem aqui, nunca direto no exemplo. */
.progresso-explicacao {
border: 1px solid #1a2440; border-radius: 12px; padding: 22px 20px; background: #080c16;
}
.progresso-explicacao-header .titulo { color: #edf1f9; font-weight: 700; font-size: 15px; }
.progresso-explicacao-header .texto { color: #8794b3; font-size: 12.5px; margin-top: 6px; line-height: 1.6; }
.progresso-explicacao-passos { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.progresso-explicacao-passo { display: flex; gap: 12px; align-items: flex-start; }
.progresso-explicacao-passo .icone {
width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: #101f3d;
display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.progresso-explicacao-passo .corpo .titulo { color: #edf1f9; font-weight: 600; font-size: 12.5px; }
.progresso-explicacao-passo .corpo .texto { color: #8794b3; font-size: 11.5px; margin-top: 2px; line-height: 1.55; }
.progresso-explicacao-rodape {
margin-top: 22px; padding-top: 18px; border-top: 1px solid #1a2440;
text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.progresso-explicacao-rodape .btn-desbloquear {
display: inline-block; background: #1a6ee6; color: #fff; font-weight: 700;
font-size: 12.5px; letter-spacing: .3px; padding: 12px 24px; border-radius: 8px; cursor: pointer;
}
.progresso-explicacao-rodape .btn-desbloquear:hover { background: #2f7cf0; }
.progresso-explicacao-rodape .btn-ver-exemplo {
color: #5c6884; font-size: 11.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.progresso-explicacao-rodape .btn-ver-exemplo:hover { color: #8794b3; }
/* Aviso pré-modal de Folha de Resposta/Meu Desempenho (pedido do usuário
05/08/2026) -- botões empilhados, "Comprar agora" em destaque (mesma cor
de btn-desbloquear) e "Continuar sem comprar" neutro. */
.aviso-mp-botoes { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.aviso-mp-botoes .btn-desbloquear {
background: #1a6ee6; color: #fff; font-weight: 700; font-size: 12.5px;
padding: 12px; border-radius: 8px; cursor: pointer; text-align: center;
}
.aviso-mp-botoes .btn-desbloquear:hover { background: #2f7cf0; }
.aviso-mp-botoes .btn-cancelar {
border: 1px solid #2a3757; color: #8794b3; font-weight: 600; font-size: 12px;
padding: 12px; border-radius: 8px; cursor: pointer; text-align: center;
}
.aviso-mp-botoes .btn-cancelar:hover { border-color: #5c6884; }
.progresso-resumo {
display: flex; align-items: center; gap: 20px; margin-top: 18px;
border: 1px solid #1a2440; border-radius: 12px; padding: 20px; background: #080c16;
}
.progresso-anel { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.progresso-anel .valor {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
color: #edf1f9; font-weight: 700; font-size: 17px;
}
.progresso-resumo-info .titulo { color: #edf1f9; font-weight: 700; font-size: 14px; }
.progresso-resumo-info .texto { color: #8794b3; font-size: 12px; margin-top: 6px; line-height: 1.6; }
.progresso-secao-titulo {
color: #c9a227; font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px;
margin: 24px 0 12px;
}
.progresso-barras { display: flex; flex-direction: column; gap: 12px; }
.progresso-barra-item .cabecalho {
display: flex; justify-content: space-between; color: #b9c3da; font-size: 12px; margin-bottom: 6px;
}
.progresso-barra-item .cabecalho .pct { color: #7ca5f4; font-weight: 700; }
.progresso-barra-trilha { height: 8px; border-radius: 5px; background: #131b30; overflow: hidden; }
.progresso-barra-preenchida { height: 100%; border-radius: 5px; background: #1a6ee6; transition: width .3s ease; }
.progresso-barra-preenchida.baixa { background: #f87171; }
.progresso-barra-preenchida.media { background: #e0b52d; }
.progresso-barra-preenchida.alta { background: #4ade80; }
.progresso-melhorar { display: flex; flex-direction: column; gap: 8px; }
.progresso-melhorar-item {
border: 1px solid rgba(248,113,113,.3); border-radius: 8px; padding: 10px 13px;
color: #f0b4b4; font-size: 12px; background: rgba(248,113,113,.05);
}
.progresso-cta {
margin-top: 26px; border: 1px solid #1a2440; border-radius: 12px; padding: 18px; background: #080c16;
text-align: center;
}
.progresso-cta .titulo { color: #edf1f9; font-weight: 700; font-size: 13.5px; }
.progresso-cta .texto { color: #8794b3; font-size: 12px; margin-top: 8px; line-height: 1.6; }
.progresso-cta .btn-desbloquear {
display: inline-block; margin-top: 14px; background: #1a6ee6; color: #fff; font-weight: 700;
font-size: 12.5px; letter-spacing: .3px; padding: 12px 22px; border-radius: 8px; cursor: pointer;
}
.progresso-cta .btn-desbloquear:hover { background: #2f7cf0; }
.progresso-cta .btn-catalogo {
display: inline-block; margin-top: 14px; border: 1px solid #2a3757; color: #a5c0f8; font-weight: 600;
font-size: 12.5px; padding: 12px 22px; border-radius: 8px; cursor: pointer;
}
.progresso-cta .btn-catalogo:hover { border-color: #7ca5f4; }
.progresso-form-sucesso {
display: none; color: #4ade80; font-size: 11.5px; margin-top: 10px; text-align: center; font-weight: 600;
}
.progresso-form-sucesso.visivel { display: block; }
/* — Botões "Folha de Resposta" / "Meu Desempenho" / "Ranking" embaixo de
cada PDF em Meus Produtos (reformulado 04/08/2026, +Ranking 05/08/2026) — */
.mp-simulado-item { display: flex; flex-direction: column; gap: 6px; }
.mp-simulado-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-btn-folha, .mp-btn-desempenho, .mp-btn-ranking {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
border: 1px solid #1a2440; border-radius: 8px; background: #060910; cursor: pointer;
padding: 8px 6px; font-size: 10.5px; font-weight: 600; transition: border-color .12s, background .12s;
min-width: 100px;
}
.mp-btn-folha { color: #a5c0f8; }
.mp-btn-folha:hover { border-color: #7ca5f4; background: rgba(124,165,244,.06); }
.mp-btn-desempenho { color: #8ee6ac; }
.mp-btn-desempenho:hover { border-color: #4ade80; background: rgba(74,222,128,.06); }
/* Dourado, coerente com o 🥇/#c9a227 já usado no ranking -- destaque
visual do terceiro botão (add-on pago, mesma cor da medalha/CTA). */
.mp-btn-ranking { color: #e8c766; }
.mp-btn-ranking:hover { border-color: #c9a227; background: rgba(201,162,39,.08); }
/* — Modais maiores (grade de questões / desempenho precisam de mais largura que os modais de confirmação) — */
.modal-caixa.modal-folha-resposta, .modal-caixa.modal-desempenho { max-width: 620px; }
/* — Folha de Resposta: grade de alternativas em botões (toque rápido) — */
.folha-grade {
display: flex; flex-direction: column; gap: 8px; margin-top: 16px; max-height: 50vh; overflow-y: auto; padding-right: 4px;
}
.folha-questao { display: flex; align-items: center; gap: 10px; }
.folha-questao .num { flex-shrink: 0; width: 22px; color: #5c6884; font-size: 11px; font-weight: 700; text-align: right; }
.folha-alternativas { display: flex; gap: 6px; flex: 1; }
.folha-alternativas button {
flex: 1; border: 1px solid #1a2440; border-radius: 7px; background: #060910; color: #8794b3;
font-size: 12px; font-weight: 700; padding: 8px 0; cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.folha-alternativas button:hover { border-color: #5c6884; }
.folha-alternativas button.selecionada { background: #1a6ee6; border-color: #1a6ee6; color: #fff; }
/* — Meu Desempenho (por simulado) — */
.desempenho-vazio-aviso { text-align: center; padding: 10px 4px 4px; }
.desempenho-vazio-aviso .titulo { color: #edf1f9; font-weight: 700; font-size: 14px; margin-top: 12px; }
.desempenho-vazio-aviso .texto { color: #8794b3; font-size: 12.5px; margin-top: 10px; line-height: 1.7; text-align: left; }
.desempenho-resumo { text-align: center; margin-top: 6px; }
.desempenho-nota { color: #edf1f9; font-weight: 800; font-size: 32px; }
.desempenho-resumo .texto { color: #8794b3; font-size: 12px; margin-top: 4px; }
.desempenho-materias { display: flex; flex-direction: column; gap: 8px; }
.desempenho-materia-item {
display: flex; justify-content: space-between; align-items: center;
border: 1px solid #1a2440; border-radius: 8px; padding: 10px 13px; background: #080c16;
color: #b9c3da; font-size: 12px;
}
.desempenho-fracao { color: #edf1f9; font-weight: 700; }
.desempenho-fracao .pct { color: #7ca5f4; }
.desempenho-bloqueado { position: relative; margin-top: 8px; border-radius: 12px; overflow: hidden; }
.desempenho-bloqueado-conteudo { filter: blur(5px); opacity: .6; pointer-events: none; user-select: none; }
.desempenho-bloqueado-overlay {
position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 22px; background: rgba(6,9,16,.55); backdrop-filter: blur(1px);
}
.desempenho-bloqueado-overlay .titulo { color: #edf1f9; font-weight: 700; font-size: 14px; margin-top: 10px; }
.desempenho-bloqueado-overlay .texto { color: #b9c3da; font-size: 12px; margin-top: 8px; line-height: 1.6; max-width: 380px; }
.desempenho-bloqueado-overlay .btn-desbloquear {
display: inline-block; margin-top: 14px; background: #1a6ee6; color: #fff; font-weight: 700;
font-size: 12.5px; letter-spacing: .3px; padding: 12px 22px; border-radius: 8px; cursor: pointer;
}
.desempenho-bloqueado-overlay .btn-desbloquear:hover { background: #2f7cf0; }
/* ============================================================
Meu Progresso / Meu Desempenho / Ranking — reforma visual 05/08/2026
(protótipos do usuário) — blocos genéricos reaproveitados pelas 3 telas.
============================================================ */
.progresso-cabecalho-cargo {
font-family: Georgia, serif; color: #edf1f9; font-size: 19px; font-weight: 600; margin-top: 4px;
}
.progresso-bloco {
background: #080c16; border: 1px solid #1a2440; border-radius: 14px; padding: 18px; margin-top: 14px;
}
.progresso-bloco-centro { text-align: center; }
.progresso-bloco-cabecalho { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.progresso-secao-titulo.sem-margem { margin-bottom: 0; }
.progresso-secao-titulo.menor { font-size: 9.5px; }
.progresso-secao-titulo.dourado { color: #c9a227; }
.progresso-secao-titulo.verde { color: #4ade80; }
.progresso-secao-titulo.vermelho { color: #f87171; }
.progresso-select {
background: #0d1322; color: #edf1f9; border: 1px solid #2a3757; border-radius: 7px;
padding: 6px 9px; font-size: 11px; font-family: inherit;
}
/* — Cards de estatística (grid 2 colunas) — */
.progresso-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.progresso-card-stat { background: #080c16; border: 1px solid #1a2440; border-radius: 11px; padding: 13px; }
.progresso-card-stat .label { color: #5c6884; font-size: 9.5px; font-weight: 600; margin-top: 8px; }
.progresso-card-stat .valor {
color: #edf1f9; font-size: 21px; font-weight: 700; font-family: Georgia, serif; margin-top: 2px;
}
.progresso-card-stat .valor-verde { color: #4ade80; font-size: 14px; font-weight: 700; font-family: Georgia, serif; margin-top: 2px; }
.progresso-card-stat .valor-vermelho { color: #f87171; font-size: 14px; font-weight: 700; font-family: Georgia, serif; margin-top: 2px; }
.progresso-card-stat .sub { color: #5c6884; font-size: 9px; margin-top: 1px; }
.progresso-card-stat .emoji { font-size: 15px; }
.progresso-card-stat-largo { grid-column: span 2; }
.progresso-card-stat-largo .linha-streak { display: flex; align-items: center; justify-content: space-between; }
.progresso-card-stat-largo .direita { text-align: right; }
.progresso-card-stat-largo .direita .label { margin-top: 0; }
.progresso-card-stat-largo .direita .valor { font-size: 16px; }
/* — Evolução Geral (SVG área+linha+média móvel) — */
.progresso-tendencia { font-size: 11.5px; font-weight: 700; }
.progresso-evo-grafico-wrap { position: relative; margin-top: 12px; }
.progresso-evo-svg-grande { width: 100%; height: 170px; display: block; }
.progresso-evo-hover {
position: absolute; top: 0; transform: translateX(-50%); background: #0d1322; border: 1px solid #2a3757;
border-radius: 8px; padding: 7px 10px; font-size: 11px; color: #edf1f9; white-space: nowrap;
pointer-events: none; box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.progresso-evo-hover span { color: #5c6884; }
.progresso-evo-legenda-toque { color: #5c6884; font-size: 10px; margin-top: 6px; text-align: center; }
.progresso-evo-legenda-cores { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; font-size: 10px; color: #8794b3; }
/* — Evolução por Matéria/Assunto (SVG área, menor) — */
.progresso-evo-cabecalho-valor { display: flex; align-items: baseline; gap: 9px; margin-top: 8px; }
.progresso-evo-cabecalho-valor .valor { color: #edf1f9; font-size: 20px; font-weight: 700; font-family: Georgia, serif; }
.progresso-evo-cabecalho-valor .delta { font-size: 11px; font-weight: 700; }
.progresso-evo-svg-media { width: 100%; height: 110px; display: block; margin-top: 4px; }
.progresso-evo-sem-dado { color: #5c6884; font-size: 11.5px; margin-top: 10px; line-height: 1.6; }
/* — Pizzas (conic-gradient) — */
.progresso-bloco-pizza { display: flex; gap: 16px; align-items: center; }
.progresso-pizza-anel { position: relative; width: 112px; height: 112px; flex-shrink: 0; border-radius: 50%; }
.progresso-pizza-centro {
position: absolute; inset: 20px; border-radius: 50%; background: #080c16;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.progresso-pizza-centro .valor { font-size: 14px; font-weight: 700; font-family: Georgia, serif; }
.progresso-pizza-centro .label { color: #5c6884; font-size: 8px; }
.progresso-pizza-legenda-wrap { flex: 1; min-width: 0; }
.progresso-pizza-legenda { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.progresso-pizza-legenda .item { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #b9c3da; }
.progresso-pizza-legenda .ponto { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.progresso-pizza-legenda .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progresso-pizza-legenda .valor { color: #8794b3; font-weight: 600; }
/* — Consistência — */
.progresso-consistencia-valor { font-family: Georgia, serif; color: #edf1f9; font-size: 34px; font-weight: 700; margin-top: 8px; }
.progresso-bloco-centro .progresso-barra-trilha { margin-top: 8px; }
.progresso-consistencia-texto { color: #8794b3; font-size: 11.5px; margin-top: 9px; line-height: 1.6; }
/* — Meta de Aproveitamento (gauge) — */
.progresso-meta-faltam { color: #7ca5f4; font-size: 10.5px; font-weight: 700; }
.progresso-meta-corpo { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.progresso-meta-gauge-wrap { position: relative; width: 140px; height: 82px; flex-shrink: 0; }
.progresso-meta-gauge-valor {
position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
color: #edf1f9; font-size: 14px; font-weight: 700; font-family: Georgia, serif;
}
.progresso-meta-controle { flex: 1; }
.progresso-meta-controle .texto { color: #8794b3; font-size: 11px; }
.progresso-meta-controle .texto b { color: #c9a227; }
.progresso-meta-controle input[type="range"] { width: 100%; margin-top: 8px; accent-color: #c9a227; }
.progresso-meta-bloqueada { color: #5c6884; font-size: 11px; margin-top: 8px; line-height: 1.6; }
/* — Histograma de notas — */
.progresso-hist-grafico { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 10px; }
.progresso-hist-coluna { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.progresso-hist-coluna .qtd { color: #8794b3; font-size: 9.5px; font-weight: 700; }
.progresso-hist-coluna .barra { width: 100%; border-radius: 4px 4px 0 0; min-height: 4px; }
.progresso-hist-coluna .faixa { color: #5c6884; font-size: 8px; }
/* — Estatísticas avançadas — */
.progresso-estatisticas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 4px; }
.progresso-estatisticas-grid .label { color: #5c6884; font-size: 9.5px; }
.progresso-estatisticas-grid .valor { color: #edf1f9; font-size: 13px; font-weight: 700; margin-top: 2px; }
/* — Insights — */
.progresso-insights-lista { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.progresso-insight-item { display: flex; gap: 8px; font-size: 11.5px; color: #b9c3da; line-height: 1.6; }
.progresso-insight-item .icone { flex-shrink: 0; }
/* — Foco da próxima semana / Checklist (numeradas, reaproveitado nos dois) — */
.progresso-bloco-foco { border-color: rgba(201,162,39,.35); }
.progresso-foco-lista { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.progresso-foco-item { display: flex; align-items: center; gap: 10px; background: #060910; border: 1px solid #10182b; border-radius: 9px; padding: 10px 12px; }
.progresso-foco-item .numero {
width: 22px; height: 22px; border-radius: 50%; background: rgba(201,162,39,.15); color: #e0b52d;
font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.progresso-foco-item .nome { flex: 1; min-width: 0; color: #edf1f9; font-size: 12px; font-weight: 600; }
.desempenho-checklist-erros { color: #f87171; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
/* — Resumo simples (cargo real, mas zerado) — */
.progresso-resumo-simples { padding: 30px 10px; text-align: center; }
.progresso-resumo-simples .titulo { color: #edf1f9; font-weight: 700; font-size: 15px; }
.progresso-resumo-simples .texto { color: #8794b3; font-size: 12.5px; margin-top: 8px; }
/* — Meu Desempenho: anel + faixa + cards de resumo — */
.desempenho-anel-card {
background: linear-gradient(160deg,#0d1322,#080c16); border: 1px solid #2a3757; border-radius: 16px;
padding: 20px; display: flex; flex-direction: column; align-items: center; margin-top: 14px;
}
.desempenho-anel-wrap { position: relative; width: 160px; height: 160px; }
.desempenho-anel-centro {
position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.desempenho-anel-centro .valor { font-family: Georgia, serif; color: #edf1f9; font-size: 34px; font-weight: 700; }
.desempenho-anel-centro .label { color: #5c6884; font-size: 9.5px; font-weight: 600; letter-spacing: .4px; }
.desempenho-faixa {
display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 6px 14px;
font-size: 11.5px; font-weight: 700; border: 1px solid; margin-top: 10px;
}
.desempenho-cards-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; width: 100%; }
.desempenho-cards-resumo .card { background: #080c16; border: 1px solid #1a2440; border-radius: 11px; padding: 12px; text-align: center; }
.desempenho-cards-resumo .valor { font-size: 19px; font-weight: 700; font-family: Georgia, serif; }
.desempenho-cards-resumo .label { color: #5c6884; font-size: 9.5px; font-weight: 600; margin-top: 2px; }
.desempenho-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
/* — Comparado aos outros simulados — */
.desempenho-compar-labels { display: flex; justify-content: space-between; margin-top: 2px; }
.desempenho-compar-labels .label { flex: 1; text-align: center; font-size: 10px; }
.desempenho-compar-texto { color: #b9c3da; font-size: 11.5px; margin-top: 12px; text-align: center; line-height: 1.6; }
/* — Pontos fortes / atenção / recomendações — */
.desempenho-bloco-forte { background: rgba(74,222,128,.06); border-color: rgba(74,222,128,.3); }
.desempenho-bloco-atencao { background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.3); }
.desempenho-bloco-recomendacoes { background: linear-gradient(160deg,#0d1322,#080c16); border-color: #2a3757; }
.desempenho-bloco-resumo-exec { background: linear-gradient(160deg,#0d1322,#080c16); border-color: rgba(201,162,39,.35); }
.desempenho-pontos-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.desempenho-pontos-lista .item { display: flex; gap: 8px; font-size: 11.5px; color: #d7e5db; line-height: 1.55; }
.desempenho-pontos-lista .item .icone { flex-shrink: 0; }
/* — Timeline — */
.desempenho-timeline { display: flex; gap: 12px; margin-top: 4px; }
.desempenho-timeline .ponto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.desempenho-timeline .corpo .titulo { color: #edf1f9; font-size: 12px; font-weight: 600; }
.desempenho-timeline .corpo .valor { color: #5c6884; font-size: 10.5px; margin-top: 2px; }
/* ============================================================
Ranking — aba nova, mesmo design system (cards #080c16/borda #1a2440,
dourado #c9a227). Redesign 05/08/2026: 2 telas (config → resultado,
ver ranking.js estadoRanking.tela) dentro da mesma section.
============================================================ */
.ranking-wrap { padding: 24px var(--gutter) 40px; }
/* — Tela 1: configuração (aviso Wilson + modo + escopo + confirmar) — */
.ranking-aviso-wilson {
margin-top: 14px; background: #080c16; border: 1px solid #1a2440; border-radius: 10px;
padding: 12px 14px; color: #b9c3da; font-size: 11.5px; line-height: 1.6;
}
.ranking-toggle-modo {
display: flex; gap: 4px; background: #080c16; border: 1px solid #1a2440; border-radius: 10px; padding: 4px;
margin-top: 16px;
}
.ranking-toggle-item {
flex: 1; text-align: center; padding: 9px; border-radius: 7px; cursor: pointer; font-size: 12px;
font-weight: 600; color: #8794b3;
}
.ranking-toggle-item.ativo { background: #0d1322; color: #edf1f9; }
.ranking-select-escopo { width: 100%; margin-top: 10px; padding: 10px 13px; font-size: 12.5px; }
.ranking-select-numero-wrap { margin-top: 10px; }
.ranking-btn-confirmar {
display: block; text-align: center; margin-top: 20px;
background: #1a6ee6; color: #fff; font-weight: 700; font-size: 13px;
letter-spacing: .4px; padding: 14px; border-radius: 8px; cursor: pointer;
}
.ranking-btn-confirmar:hover { background: #2f7cf0; }
/* — Tela 2: resultado (voltar + lista) — */
.ranking-resultado-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.ranking-btn-voltar {
color: #7ca5f4; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 2px;
}
.ranking-btn-voltar:hover { color: #a5c0f8; }
.ranking-resumo-topo { margin-top: 16px; }
.ranking-resumo-topo .texto { color: #8794b3; font-size: 12px; }
.ranking-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ranking-linha {
display: flex; align-items: center; gap: 12px; background: #080c16; border: 1px solid #1a2440;
border-radius: 11px; padding: 12px 14px;
}
.ranking-linha.eh-voce { border-color: #c9a227; background: rgba(201,162,39,.06); }
.ranking-linha .posicao {
width: 26px; flex-shrink: 0; text-align: center; color: #8794b3; font-weight: 700; font-size: 13px;
}
.ranking-linha .nome { flex: 1; min-width: 0; color: #edf1f9; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-tag-voce {
display: inline-block; background: #c9a227; color: #060910; font-size: 9px; font-weight: 700;
padding: 2px 6px; border-radius: 5px; letter-spacing: .3px; vertical-align: middle;
}
.ranking-linha .dados { text-align: right; flex-shrink: 0; }
.ranking-linha .dados .pct { color: #7ca5f4; font-weight: 700; font-size: 13px; display: block; }
.ranking-linha .dados .fracao { color: #5c6884; font-size: 10px; }
.ranking-total-respondidas { color: #5c6884; }
.ranking-sua-posicao-aviso {
margin-top: 12px; background: #080c16; border: 1px solid #1a2440; border-radius: 10px;
padding: 10px 14px; color: #b9c3da; font-size: 12px; text-align: center;
}
.ranking-sua-posicao-aviso b { color: #c9a227; }
.ranking-bloqueado { position: relative; margin-top: 14px; border-radius: 12px; overflow: hidden; }
.ranking-bloqueado-conteudo { filter: blur(5px); opacity: .6; pointer-events: none; user-select: none; }
.ranking-bloqueado-overlay {
position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 22px; background: rgba(6,9,16,.55); backdrop-filter: blur(1px);
}
.ranking-bloqueado-overlay .titulo { color: #edf1f9; font-weight: 700; font-size: 14px; margin-top: 10px; }
.ranking-bloqueado-overlay .texto { color: #b9c3da; font-size: 12px; margin-top: 8px; line-height: 1.6; max-width: 380px; }
.ranking-bloqueado-overlay .btn-desbloquear {
display: inline-block; margin-top: 14px; background: #1a6ee6; color: #fff; font-weight: 700;
font-size: 12.5px; letter-spacing: .3px; padding: 12px 22px; border-radius: 8px; cursor: pointer;
}
.ranking-bloqueado-overlay .btn-desbloquear:hover { background: #2f7cf0; }
@media (min-width: 1100px) {
.progresso-wrap { max-width: 900px; margin: 0 auto; padding: 88px 48px 90px; }
.ranking-wrap { max-width: 700px; margin: 0 auto; padding: 88px 48px 90px; }
.progresso-cards-grid { grid-template-columns: repeat(4, 1fr); }
.desempenho-cards-resumo { grid-template-columns: repeat(4, 1fr); }
}
/* — Comunidade — */
.comunidade-wrap { padding: 24px var(--gutter) 40px; }
.comunidade-seletor-area { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.comunidade-area-btn {
border: 1px solid #1a2440; border-radius: 8px; padding: 9px 15px;
color: #8794b3; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.comunidade-area-btn.ativa { background: #0d1322; color: #edf1f9; border-color: #7ca5f4; }
.comunidade-area-btn:hover { border-color: #2a3757; }
.comunidade-select-concurso, .comunidade-select-cargo {
border: 1px solid #1a2440; border-radius: 8px; padding: 9px 13px;
color: #edf1f9; font-size: 12px; background: #060910; font-family: inherit;
}
.comunidade-novo-topico-btn {
display: inline-block; margin-top: 18px; background: #1a6ee6; color: #fff; font-weight: 700;
font-size: 12.5px; padding: 11px 20px; border-radius: 8px; cursor: pointer;
}
.comunidade-novo-topico-btn:hover { background: #2f7cf0; }
.comunidade-vazio { color: #5c6884; font-size: 12.5px; text-align: center; padding: 50px 20px; line-height: 1.7; }
.comunidade-lista-topicos { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.comunidade-card-topico {
border: 1px solid #1a2440; border-radius: 12px; padding: 14px 16px; background: #080c16; cursor: pointer;
}
.comunidade-card-topico:hover { border-color: #2a3757; }
.comunidade-card-topico .titulo { color: #edf1f9; font-weight: 600; font-size: 13px; }
.comunidade-card-topico .meta { color: #5c6884; font-size: 10.5px; margin-top: 6px; }
.comunidade-card-topico .meta b { color: #7ca5f4; }
.comunidade-form {
margin-top: 18px; border: 1px solid #1a2440; border-radius: 12px; padding: 18px; background: #080c16;
}
.comunidade-form-titulo { color: #edf1f9; font-weight: 700; font-size: 13.5px; margin-bottom: 14px; }
.comunidade-form input, .comunidade-form textarea {
border: 1px solid #1a2440; border-radius: 8px; padding: 12px 13px; color: #edf1f9;
font-size: 12.5px; background: #060910; width: 100%; font-family: inherit; resize: vertical;
}
.comunidade-form-botoes { display: flex; gap: 10px; margin-top: 14px; }
.comunidade-form-botoes .btn-cancelar {
flex: 1; border: 1px solid #2a3757; color: #8794b3; font-weight: 600; font-size: 12px;
padding: 12px; border-radius: 8px; cursor: pointer; text-align: center;
}
.comunidade-form-botoes .btn-cancelar:hover { border-color: #5c6884; }
.comunidade-form-botoes .btn-auth-submit { flex: 1; margin-top: 0; }
.comunidade-voltar {
color: #a5c0f8; font-size: 12px; font-weight: 600; cursor: pointer; margin-top: 16px; width: fit-content;
}
.comunidade-voltar:hover { color: #7ca5f4; }
.comunidade-topico-cabecalho {
margin-top: 14px; border: 1px solid #1a2440; border-radius: 12px; padding: 16px 18px; background: #080c16;
}
.comunidade-topico-cabecalho .titulo { color: #edf1f9; font-weight: 700; font-size: 15px; }
.comunidade-topico-cabecalho .meta { color: #5c6884; font-size: 10.5px; margin-top: 6px; }
.comunidade-topico-cabecalho .meta b { color: #7ca5f4; }
.comunidade-topico-cabecalho .texto { color: #b9c3da; font-size: 13px; line-height: 1.7; margin-top: 12px; white-space: pre-wrap; }
.comunidade-respostas-titulo {
color: #c9a227; font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; margin: 22px 0 12px;
}
.comunidade-lista-respostas { display: flex; flex-direction: column; gap: 10px; }
.comunidade-card-resposta {
border: 1px solid #1a2440; border-radius: 10px; padding: 12px 15px; background: #080c16;
}
.comunidade-card-resposta .meta { color: #5c6884; font-size: 10.5px; }
.comunidade-card-resposta .meta b { color: #7ca5f4; }
.comunidade-card-resposta .texto { color: #b9c3da; font-size: 12.5px; line-height: 1.6; margin-top: 6px; white-space: pre-wrap; }
.comunidade-denunciar {
color: #f87171; font-size: 10.5px; font-weight: 600; cursor: pointer; margin-top: 8px; width: fit-content;
}
.comunidade-denunciar:hover { text-decoration: underline; }
.comunidade-form-resposta { margin-top: 18px; }
@media (min-width: 1100px) {
.comunidade-wrap { max-width: 900px; margin: 0 auto; padding: 88px 48px 90px; }
}
/* Toast rápido (ex.: "Adicionado ao carrinho!") -- feedback mínimo pra
ações que não navegam nem abrem painel, sem isso parece bug (achado
do usuário 03/08/2026: cliente clicava várias vezes achando que não
tinha funcionado). */
.ss-toast {
position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
background: #16223d; color: #edf1f9; border: 1px solid #2a3757; border-radius: 9px;
padding: 12px 20px; font-size: 12.5px; font-weight: 600; z-index: 80;
opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.ss-toast.visivel { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Chat-widget (assistente virtual embutido no site) -- z-index 95: acima
de tudo, inclusive modais (60) e toast (80), nada no site hoje passa
de 80 (ver landing-assets/chat-widget.js). */
.chat-widget-botao {
position: fixed; right: 20px; bottom: 20px; z-index: 95;
width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
background: linear-gradient(135deg, #1a6ee6, #2f7cf0); color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 18px rgba(26, 110, 230, .45);
transition: transform .15s;
}
.chat-widget-botao:hover { transform: scale(1.06); }
.chat-widget-botao svg { width: 26px; height: 26px; }
.chat-widget-botao .chat-widget-icone-fechar { display: none; }
.chat-widget-botao.chat-widget-botao-aberto .chat-widget-icone-chat { display: none; }
.chat-widget-botao.chat-widget-botao-aberto .chat-widget-icone-fechar { display: block; }
.chat-widget-painel {
/* Desktop: painel flutuante pequeno no canto (sem problema de teclado
cobrindo aqui) -- ver media query abaixo pra mobile, que é fullscreen. */
position: fixed; right: 20px; bottom: 88px; z-index: 95;
width: 340px; max-width: calc(100vw - 40px); height: 460px; max-height: calc(100vh - 140px);
background: #080c16; border: 1px solid #1a2440; border-radius: 14px;
display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
opacity: 0; transform: translateY(12px); pointer-events: none;
transition: opacity .18s, transform .18s;
}
.chat-widget-painel.aberto { opacity: 1; transform: translateY(0); pointer-events: auto; }
.chat-widget-cabecalho {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; border-bottom: 1px solid #1a2440;
background: #0d1322; font-family: Georgia, serif; color: #edf1f9; font-size: 15px;
}
.chat-widget-cabecalho-botoes { display: flex; align-items: center; gap: 4px; }
.chat-widget-cabecalho button {
background: none; border: none; color: #8794b3; cursor: pointer; font-size: 18px; line-height: 1;
padding: 4px 6px;
}
.chat-widget-cabecalho button:hover { color: #edf1f9; }
.chat-widget-mensagens {
flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.chat-widget-bolha {
max-width: 85%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45;
word-wrap: break-word;
}
.chat-widget-bolha-usuario {
align-self: flex-end; background: linear-gradient(135deg, #1a6ee6, #2f7cf0); color: #fff;
border-bottom-right-radius: 3px;
}
.chat-widget-bolha-assistente {
align-self: flex-start; background: #0d1322; color: #edf1f9; border: 1px solid #1a2440;
border-bottom-left-radius: 3px;
}
.chat-widget-confirmacao {
align-self: flex-start; display: flex; gap: 8px; flex-wrap: wrap; margin-top: -2px;
}
.chat-widget-confirmacao button {
border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
border: 1px solid #2a3757;
}
.chat-widget-btn-confirmar { background: #1a6ee6; color: #fff; border-color: #1a6ee6; }
.chat-widget-btn-cancelar { background: transparent; color: #8794b3; }
.chat-widget-form {
display: flex; gap: 8px; padding: 12px; border-top: 1px solid #1a2440; background: #0d1322;
}
.chat-widget-form input {
flex: 1; background: #080c16; border: 1px solid #1a2440; border-radius: 9px;
padding: 9px 12px; color: #edf1f9; font-family: 'Segoe UI', Arial, sans-serif;
/* 16px, não 13px: iOS Safari (e outros navegadores mobile) dão zoom
automático na página inteira ao focar um input com font-size menor
que 16px, achando que precisa ampliar pra dar pra ler -- e ao
desfocar o zoom não volta limpo ao tamanho original (achado do
usuário 06/08/2026: "ele volta com um zoom, não volta ao tamanho
original"). 16px é o mínimo que evita esse comportamento em toda
plataforma. */
font-size: 16px;
}
.chat-widget-form input:focus { outline: none; border-color: #1a6ee6; }
.chat-widget-form button {
background: linear-gradient(135deg, #1a6ee6, #2f7cf0); color: #fff; border: none;
border-radius: 9px; padding: 0 14px; cursor: pointer; font-weight: 600; font-size: 13px;
}
@media (max-width: 480px) {
/* Mobile: tela cheia em vez de painel flutuante pequeno -- era
impossível caber confortavelmente com o teclado aberto num painel de
460px (achado do usuário 06/08/2026: "a única coisa que eu consigo
ver é digite sua dúvida e um pouquinho do enviar"). Minimizar volta
pro ícone flutuante normalmente (ver chat-widget.js).
height: 100dvh (não 100vh) é o que faz o painel ENCOLHER sozinho
quando o teclado abre -- dvh é a altura visível DINÂMICA, o próprio
navegador recalcula em tempo real sem precisar de JS escutando
resize/scroll (a versão anterior recalculava via visualViewport a
cada evento e "brigava" com a transição CSS, o que deixava a UI
desalinhada ao fechar o teclado de novo). Fallback pra 100vh em
navegadores sem suporte a dvh (ainda cobre a tela, só não encolhe
sozinho com o teclado). */
.chat-widget-painel {
inset: 0; right: 0; bottom: 0;
width: 100%; max-width: 100%;
height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
border-radius: 0; border: none;
}
.chat-widget-botao { right: 14px; bottom: 14px; }
}
/* Indicador "digitando…" -- 3 pontos que sobem/descem em sequência
(pedido do usuário 06/08/2026: resposta chegava rápido demais e
parecia não-natural sem essa espera visual). */
.chat-widget-digitando { display: flex; gap: 4px; align-items: center; padding: 11px 12px; }
.chat-widget-digitando span {
width: 6px; height: 6px; border-radius: 50%; background: #5c6884;
animation: chatWidgetDigitandoPulso 1.2s infinite ease-in-out;
}
.chat-widget-digitando span:nth-child(2) { animation-delay: .15s; }
.chat-widget-digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes chatWidgetDigitandoPulso {
0%, 60%, 100% { transform: translateY(0); opacity: .5; }
30% { transform: translateY(-4px); opacity: 1; }
}