:root {
--ceu: #e9f6f4;
--ceu-fundo: #f4fbfa;
--tinta: #0c2b33;
--tinta-suave: #36565e;
--tinta-fraca: #55747b;
--petroleo: #0a625c;
--petroleo-claro: #0e8179;
--mare-clara: #c9f1ec;
--ambar: #ffb454;
--ambar-escuro: #8a4a00;
--coral: #b3392b;
--branco-vidro: rgba(255, 255, 255, 0.66);
--linha: rgba(12, 43, 51, 0.14);
--foco: 0 0 0 3px rgba(18, 148, 139, 0.5);
--fonte: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
font-family: var(--fonte);
font-size: 1rem;
line-height: 1.5;
color: var(--tinta);
background: var(--ceu);
-webkit-font-smoothing: antialiased;
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.agua {
position: fixed;
inset: 0;
overflow: hidden;
z-index: -1;
background:
radial-gradient(120% 90% at 15% 0%, #ffffff 0%, transparent 60%),
linear-gradient(170deg, var(--ceu-fundo) 0%, var(--ceu) 70%);
}
.agua i {
position: absolute;
border-radius: 50%;
filter: blur(70px);
will-change: transform;
animation: deriva 46s ease-in-out infinite alternate;
}
.agua .b1 { width: 56vmax; height: 56vmax; left: -14vmax; top: -18vmax; background: #7fe0d2; opacity: 0.5; }
.agua .b2 { width: 50vmax; height: 50vmax; right: -16vmax; bottom: -20vmax; background: #8ec3f2; opacity: 0.55; animation-duration: 58s; animation-direction: alternate-reverse; }
.agua .b3 { width: 22vmax; height: 22vmax; right: 8vw; top: 34vh; background: var(--ambar); opacity: 0.28; animation-duration: 40s; }
.agua .b4 { width: 28vmax; height: 28vmax; left: 30vw; bottom: -12vmax; background: #a8ecdf; opacity: 0.45; animation-duration: 52s; animation-direction: alternate-reverse; }
@keyframes deriva {
from { transform: translate3d(0, 0, 0) scale(1); }
to   { transform: translate3d(5vmax, 4vmax, 0) scale(1.12); }
}
.vidro,
.vidro-fino {
position: relative;
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(22px) saturate(1.6);
backdrop-filter: blur(22px) saturate(1.6);
}
.vidro {
border-radius: 28px;
background:
linear-gradient(150deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46) 60%, rgba(255, 255, 255, 0.62));
box-shadow:
inset 0 1px 1px #ffffff,
inset 0 -1px 1px rgba(255, 255, 255, 0.7),
0 0 0 1px var(--linha),
0 22px 48px -26px rgba(12, 70, 80, 0.4);
}
.vidro-fino {
border-radius: 20px;
background: linear-gradient(150deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.42));
box-shadow:
inset 0 1px 1px #ffffff,
0 0 0 1px var(--linha),
0 12px 26px -18px rgba(12, 70, 80, 0.4);
}
.vidro::before,
.vidro-fino::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(90% 55% at 10% 0%, rgba(255, 255, 255, 0.7), transparent 60%);
}
.refrativo .vidro {
-webkit-backdrop-filter: url(#lente) blur(12px) saturate(1.6);
backdrop-filter: url(#lente) blur(12px) saturate(1.6);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.vidro, .vidro-fino { background: rgba(255, 255, 255, 0.94); }
}
.pagina {
width: min(1180px, 100% - 32px);
margin-inline: auto;
padding-block: clamp(20px, 4vw, 48px) 56px;
}
.topo {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px 24px;
flex-wrap: wrap;
margin-bottom: clamp(20px, 3vw, 32px);
}
h1 {
margin: 0;
font-size: clamp(2.1rem, 4.4vw, 3.4rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.04;
}
.sub { margin: 6px 0 0; color: var(--tinta-suave); font-size: 1.02rem; }
.origem {
margin: 0;
padding: 10px 18px;
font-size: 0.95rem;
color: var(--tinta);
border-radius: 999px;
}
.origem b { font-variant-numeric: tabular-nums; font-weight: 700; }
.grade {
display: grid;
grid-template-columns: minmax(340px, 450px) minmax(0, 1fr);
gap: clamp(16px, 2.4vw, 28px);
align-items: start;
}
.painel {
padding: clamp(18px, 2.4vw, 28px);
display: grid;
gap: 22px;
}
.bloco { border: 0; margin: 0; padding: 0; min-width: 0; }
.bloco legend {
padding: 0;
margin-bottom: 10px;
font-size: 1.08rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.linha-2 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; }
.dica { margin: 8px 0 0; font-size: 0.86rem; color: var(--tinta-suave); }
.campo { display: grid; gap: 5px; min-width: 0; }
.campo > span { font-size: 0.86rem; color: var(--tinta-suave); }
.campo input {
width: 100%;
min-width: 0;
padding: 11px 13px;
font: inherit;
font-variant-numeric: tabular-nums;
color: var(--tinta);
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(12, 43, 51, 0.24);
border-radius: 14px;
box-shadow: inset 0 1px 3px rgba(12, 43, 51, 0.1);
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.campo input::placeholder { color: var(--tinta-fraca); }
.entrada { position: relative; display: block; }
.entrada::after {
content: attr(data-un);
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
font-size: 0.82rem;
color: var(--tinta-suave);
pointer-events: none;
}
.entrada input { padding-right: 2.7rem; }
.campo input:hover { border-color: rgba(12, 43, 51, 0.42); }
.campo input:focus-visible {
outline: none;
border-color: var(--petroleo);
box-shadow: inset 0 1px 3px rgba(12, 43, 51, 0.1), var(--foco);
}
.campo input[aria-invalid="true"] { border-color: var(--coral); }
.volumes { display: grid; gap: 12px; margin-bottom: 12px; }
.volume { padding: 14px 14px 16px; }
.volume-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.volume-titulo { font-size: 0.98rem; font-weight: 650; }
.volume-acoes { display: flex; gap: 4px; }
.volume-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cubagem {
margin: 0;
align-self: end;
padding-bottom: 11px;
font-size: 0.86rem;
color: var(--tinta-suave);
font-variant-numeric: tabular-nums;
}
.icone {
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
color: var(--tinta);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(12, 43, 51, 0.2);
border-radius: 12px;
cursor: pointer;
transition: background 0.15s;
}
.icone:hover:not(:disabled) { background: #ffffff; }
.icone:disabled { opacity: 0.4; cursor: not-allowed; }
.botao-vidro {
padding: 11px 18px;
font: inherit;
font-weight: 600;
color: var(--tinta);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
border: 1px solid rgba(12, 43, 51, 0.22);
border-radius: 999px;
box-shadow: inset 0 1px 1px #ffffff, 0 4px 12px -8px rgba(12, 70, 80, 0.5);
cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
.botao-vidro:hover:not(:disabled) { background: #ffffff; }
.botao-vidro:active:not(:disabled) { transform: translateY(1px); }
.botao-vidro:disabled { opacity: 0.45; cursor: not-allowed; }
.botao-vidro.pequeno { padding: 7px 13px; font-size: 0.88rem; }
button:focus-visible { outline: none; box-shadow: var(--foco); }
.botao-principal {
padding: 14px 26px;
font: inherit;
font-size: 1.05rem;
font-weight: 750;
color: #ffffff;
background: linear-gradient(180deg, var(--petroleo-claro) 0%, var(--petroleo) 100%);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 999px;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.5),
0 10px 24px -10px rgba(11, 111, 104, 0.75);
cursor: pointer;
transition: filter 0.15s, transform 0.1s;
}
.botao-principal:hover { filter: brightness(1.08); }
.botao-principal:active { transform: translateY(1px); }
.botao-principal[disabled] { filter: saturate(0.5) brightness(1.1); cursor: progress; }
.canais { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
display: inline-block;
padding: 8px 15px;
font-size: 0.93rem;
font-weight: 600;
color: var(--tinta-suave);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(12, 43, 51, 0.24);
border-radius: 999px;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip input:checked + span {
color: #ffffff;
background: linear-gradient(180deg, var(--petroleo-claro), var(--petroleo));
border-color: rgba(255, 255, 255, 0.7);
}
.chip input:focus-visible + span { box-shadow: var(--foco); }
.chip input:disabled { cursor: not-allowed; }
.chip input:disabled + span { opacity: 0.7; border-style: dashed; }
.rodape {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding-top: 4px;
}
.totais { margin: 0; font-size: 0.92rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.busca-cnpj { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.cnpj-saida { margin-top: 12px; }
.cnpj-saida:empty { display: none; }
.cartao-cnpj { padding: 14px 16px; display: grid; gap: 8px; }
.cartao-cnpj h3 { margin: 0; font-size: 1.04rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cartao-cnpj .fantasia { margin: 1px 0 0; font-size: 0.9rem; color: var(--tinta-suave); overflow-wrap: anywhere; }
.cartao-cnpj dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; font-size: 0.9rem; }
.cartao-cnpj dt { color: var(--tinta-suave); }
.cartao-cnpj dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cartao-cnpj .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cartao-cnpj .rodape-fonte { margin: 0; font-size: 0.8rem; color: var(--tinta-suave); }
.selo.situacao-ok { color: #064a45; background: var(--mare-clara); border: 1px solid rgba(11, 111, 104, 0.35); }
.selo.situacao-ruim { color: #7a1f14; background: #ffe0da; border: 1px solid rgba(179, 57, 43, 0.5); }
.cnpj-erro { margin: 0; font-size: 0.9rem; color: var(--coral); }
.cnpj-ok { margin: 0; font-size: 0.85rem; color: var(--tinta-suave); }
.resultados { min-width: 0; }
.resultados-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
flex-wrap: wrap;
margin: 4px 4px 14px;
}
h2 { margin: 0; font-size: 1.35rem; font-weight: 750; letter-spacing: -0.015em; }
.controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.segmentado {
display: inline-flex;
padding: 4px;
gap: 2px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(12, 43, 51, 0.2);
border-radius: 999px;
}
.segmentado button {
padding: 7px 14px;
font: inherit;
font-size: 0.9rem;
font-weight: 600;
color: var(--tinta-suave);
background: transparent;
border: 0;
border-radius: 999px;
cursor: pointer;
}
.segmentado button[aria-pressed="true"] {
color: #ffffff;
background: linear-gradient(180deg, var(--petroleo-claro), var(--petroleo));
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45);
}
.lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opcao {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px 14px;
border-radius: 22px;
min-width: 0;
}
.opcao h3 { margin: 0; font-size: 1.04rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
.opcao .servico { margin: 1px 0 0; color: var(--tinta-suave); font-size: 0.9rem; line-height: 1.3; overflow-wrap: anywhere; }
.opcao .meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--tinta-suave); }
.selo-canal {
padding: 1px 9px;
border: 1px solid rgba(12, 43, 51, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
}
.selo { padding: 1px 9px; border-radius: 999px; font-weight: 700; font-size: 0.78rem; }
.selo.barato { color: #2a1700; background: var(--ambar); }
.selo.rapido { color: #064a45; background: var(--mare-clara); border: 1px solid rgba(11, 111, 104, 0.35); }
.opcao .detalhe { margin: 0; font-size: 0.8rem; color: var(--tinta-suave); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.base-cartao { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; }
.valor { display: grid; gap: 0; }
.preco {
font-size: clamp(1.45rem, 2.2vw, 1.8rem);
font-weight: 750;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
white-space: nowrap;
}
.prazo { font-size: 0.88rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.opcao.melhor {
border-color: rgba(224, 140, 30, 0.75);
background:
linear-gradient(150deg, rgba(255, 205, 130, 0.7), rgba(255, 244, 224, 0.6) 65%, rgba(255, 255, 255, 0.55));
box-shadow:
inset 0 1px 1px #ffffff,
0 0 0 1px rgba(224, 140, 30, 0.35),
0 0 36px -8px rgba(255, 180, 84, 0.6),
0 20px 40px -24px rgba(138, 74, 0, 0.5);
overflow: hidden;
}
.opcao.melhor .preco { color: var(--ambar-escuro); }
.opcao.melhor::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%);
transform: translateX(-120%);
animation: brilho 1.4s 0.15s ease-out 1 forwards;
}
@keyframes brilho { to { transform: translateX(120%); } }
.paginacao {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
margin: 16px 0 0;
}
.paginacao .posicao { font-size: 0.92rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.estado { padding: 22px 24px; border-radius: 24px; }
.estado p { margin: 0 0 8px; }
.estado p:last-child { margin-bottom: 0; }
.estado .titulo { font-size: 1.12rem; font-weight: 700; }
.estado ul { margin: 8px 0 0; padding-left: 20px; }
.estado.erro { border-color: rgba(179, 57, 43, 0.6); }
.estado.erro .titulo { color: var(--coral); }
.situacao { margin: 16px 4px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.situacao li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0 10px;
align-items: baseline;
font-size: 0.92rem;
color: var(--tinta-suave);
}
.situacao strong { color: var(--tinta); font-weight: 650; }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--petroleo-claro); box-shadow: 0 0 8px rgba(18, 148, 139, 0.6); transform: translateY(-1px); }
.ponto.alerta { background: #e08c1e; box-shadow: 0 0 8px rgba(224, 140, 30, 0.6); }
.ponto.falha { background: var(--coral); box-shadow: 0 0 8px rgba(179, 57, 43, 0.5); }
.ponto.neutro { background: rgba(12, 43, 51, 0.35); box-shadow: none; }
.situacao .avisos { grid-column: 2; margin: 2px 0 0; font-size: 0.85rem; }
.carregando { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.esqueleto { height: 132px; border-radius: 22px; overflow: hidden; }
.esqueleto::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%);
animation: varre 1.5s ease-in-out infinite;
}
@keyframes varre { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.nota { margin: 14px 4px 0; font-size: 0.85rem; color: var(--tinta-suave); }
@media (max-width: 920px) {
.grade { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.lista, .carregando { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.linha-2 { grid-template-columns: 1fr; }
.rodape { flex-direction: column; align-items: stretch; }
.botao-principal { width: 100%; }
.volume-campos { gap: 8px; }
.cubagem { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
.agua i, .esqueleto::after { animation: none; }
.opcao.melhor::after { animation: none; opacity: 0; }
* { transition: none !important; }
}