/* NEXO Inteligência Empresarial — site */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/barlow-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-semi-condensed-latin-700-normal.woff2) format('woff2'); }
:root {
  --asfalto: #0F172A;      /* marca: texto, títulos, quadro */
  --asfalto-2: #1E293B;
  --esmeralda: #10B981;    /* marca: liberado, ação */
  --esmeralda-tx: #047857; /* esmeralda para texto sobre claro (contraste) */
  --sinal: #F2B807;        /* amarelo de sinalização: atenção (só no quadro) */
  --parada: #EF4444;
  --papel: #F5F6F3;
  --branco: #FFFFFF;
  --concreto: #DADFD8;
  --grafite: #475569;
  --f-tit: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --f-tx: 'Barlow', system-ui, sans-serif;
  --w: 1160px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--asfalto); font: 400 17px/1.6 var(--f-tx); }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--esmeralda); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--f-tit); line-height: 1.05; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(42px, 6.4vw, 76px); font-weight: 700; }
h2 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 700; }
h3 { font-size: 24px; font-weight: 600; letter-spacing: 0; }
p { margin: 0; }
.lead { font-size: 20px; line-height: 1.55; color: var(--grafite); max-width: 34em; }

/* cabeçalho */
.top { position: sticky; top: 0; z-index: 20; background: rgba(245, 246, 243, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.sc { border-bottom-color: var(--concreto); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca svg { width: 34px; height: 34px; flex: none; }
.marca b { font: 700 26px/1 var(--f-tit); letter-spacing: .06em; }
.marca span { display: block; font: 500 12.5px/1.2 var(--f-tx); color: var(--grafite); letter-spacing: .01em; }
.menu { display: flex; align-items: center; gap: 28px; font-weight: 500; font-size: 16px; }
.menu a { text-decoration: none; color: var(--grafite); }
.menu a:hover { color: var(--asfalto); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 24px; border-radius: 10px; font: 600 17px/1 var(--f-tx); text-decoration: none; border: 2px solid var(--asfalto); background: var(--asfalto); color: #fff; cursor: pointer; }
.btn:hover { background: var(--asfalto-2); }
.btn.claro { background: transparent; color: var(--asfalto); }
.btn.claro:hover { background: var(--branco); }
.btn.verde { background: var(--esmeralda); border-color: var(--esmeralda); color: var(--asfalto); }
.btn.verde:hover { background: #34D399; border-color: #34D399; }
.btn svg { width: 20px; height: 20px; }
.menu .btn { min-height: 42px; padding: 0 18px; font-size: 15.5px; color: #fff; }
@media (max-width: 860px) { .menu a:not(.btn) { display: none; } }

/* abertura */
.hero { padding: 64px 0 88px; }
.hero .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.hero h1 { max-width: 9.5em; }
.hero .lead { margin-top: 22px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero small { display: block; margin-top: 18px; color: var(--grafite); font-size: 15px; }

/* quadro da frota: o elemento marcante do site */
.quadro { background: var(--asfalto); color: #E2E8F0; border-radius: 18px; padding: 22px 22px 18px; box-shadow: 0 30px 60px -34px rgba(15, 23, 42, .65); }
.qd-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #263248; }
.qd-top b { font: 600 21px/1 var(--f-tit); color: #fff; }
.qd-top span { font-size: 14px; color: #94A3B8; }
.qd-l { list-style: none; margin: 0; padding: 0; }
.qd-l li { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid #1E293B; }
.qd-l li:last-child { border-bottom: 0; }
.qd-cod { font: 700 19px/1 var(--f-tit); color: #fff; letter-spacing: .02em; }
.qd-tx { font-size: 15px; line-height: 1.3; color: #CBD5E1; min-width: 0; }
.qd-tx small { display: block; color: #8193AC; font-size: 13.5px; }
.st { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 8px; font: 600 14px/1 var(--f-tx); white-space: nowrap; }
.st i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.st.ok { background: rgba(16, 185, 129, .14); color: #34D399; }
.st.at { background: rgba(242, 184, 7, .14); color: var(--sinal); }
.st.pa { background: rgba(239, 68, 68, .16); color: #F87171; }
.qd-pe { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 1px solid #263248; font-size: 14px; color: #94A3B8; }
.qd-pe b { color: #fff; font-weight: 600; }
/* o único movimento automático: a colhedora parada é consertada e libera */
.flip .st { transition: background .4s, color .4s; }
.flip.feito .qd-tx small { color: #34D399; }
@media (prefers-reduced-motion: reduce) { .flip .st { transition: none; } }

/* blocos */
.bloco { padding: 96px 0; }
.bloco.branco { background: var(--branco); border-top: 1px solid var(--concreto); border-bottom: 1px solid var(--concreto); }
.cab { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.cab .lead { justify-self: end; }

/* o que fazemos: linhas, não cartões */
.faz { border-top: 2px solid var(--asfalto); }
.faz article { display: grid; grid-template-columns: 64px 1fr 1.25fr; gap: 28px; padding: 34px 0; border-bottom: 1px solid var(--concreto); }
.faz .ico { width: 56px; height: 56px; border-radius: 14px; background: var(--asfalto); color: var(--esmeralda); display: grid; place-items: center; }
.faz .ico svg { width: 28px; height: 28px; }
.faz h3 { font-size: 30px; }
.faz h3 + p { margin-top: 8px; color: var(--grafite); }
.faz ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.faz li { position: relative; padding-left: 26px; }
.faz li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 12px; height: 2px; background: var(--esmeralda-tx); }

/* InspecFrota */
.prod-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.prod-cab .app-ic { width: 52px; height: 52px; border-radius: 14px; background: #1D4ED8; display: grid; place-items: center; }
.prod-cab .app-ic svg { width: 30px; height: 30px; }
.prod-cab b { font: 700 30px/1 var(--f-tit); }
.prod-cab span { display: block; color: var(--grafite); font-size: 15px; }
.telas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 56px 0 0; }
.telas figure { margin: 0; }
.cel { border-radius: 30px; padding: 8px; background: var(--asfalto); box-shadow: 0 24px 50px -30px rgba(15, 23, 42, .6); }
.cel img { height: auto; border-radius: 23px; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; width: 100%; }
.telas figcaption { margin-top: 16px; font-size: 15.5px; line-height: 1.45; color: var(--grafite); }
.telas figcaption b { display: block; color: var(--asfalto); font-size: 17px; margin-bottom: 2px; }
.recursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; margin-top: 80px; }
.recursos h3 { font-size: 22px; margin-bottom: 8px; }
.recursos p { color: var(--grafite); font-size: 16.5px; }

/* planos */
.planos { margin-top: 88px; }
.planos h3 { font-size: 30px; }
.planos > p { color: var(--grafite); margin-top: 8px; }
.tab { margin-top: 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--asfalto); border-radius: 16px; overflow: hidden; background: var(--branco); }
.tab > div { padding: 24px 22px 26px; border-left: 1px solid var(--concreto); display: flex; flex-direction: column; }
.tab > div:first-child { border-left: 0; }
.tab .pn { font: 600 22px/1 var(--f-tit); }
.tab .pr { margin-top: 14px; font: 700 40px/1 var(--f-tit); }
.tab .pr small { font: 500 16px var(--f-tx); color: var(--grafite); }
.tab .mq { margin-top: 8px; font-weight: 600; color: var(--esmeralda-tx); }
.tab p { margin-top: 12px; font-size: 15.5px; color: var(--grafite); }
.tab .dest { background: var(--asfalto); color: #fff; }
.tab .dest p, .tab .dest .pr small { color: #CBD5E1; }
.tab .dest .mq { color: #34D399; }
.nota { margin-top: 14px; font-size: 14.5px; color: var(--grafite); }

/* como trabalhamos: é uma sequência de verdade, então numera */
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: p; border-top: 2px solid var(--asfalto); }
.passos li { list-style: none; padding: 30px 30px 0 0; counter-increment: p; }
.passos li + li { padding-left: 30px; border-left: 1px solid var(--concreto); }
.passos li::before { content: counter(p); display: block; font: 700 64px/1 var(--f-tit); color: var(--esmeralda-tx); margin-bottom: 16px; }
.passos p { color: var(--grafite); margin-top: 10px; }
.passos ol { margin: 0; padding: 0; display: contents; }

/* contato */
.contato .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; }
.canais { margin-top: 30px; display: grid; gap: 14px; }
.canal { display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 14px 16px; border: 1px solid var(--concreto); border-radius: 12px; background: var(--branco); }
.canal:hover { border-color: var(--asfalto); }
.canal svg { width: 24px; height: 24px; flex: none; color: var(--esmeralda-tx); }
.canal b { display: block; font-weight: 600; }
.canal span { color: var(--grafite); font-size: 15px; }
form.f { background: var(--branco); border: 1px solid var(--concreto); border-radius: 18px; padding: 30px; display: grid; gap: 18px; }
.f .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.f label { display: grid; gap: 7px; font-weight: 600; font-size: 15.5px; }
.f label > span { display: block; }
.f label em { font-style: normal; font-weight: 400; color: var(--grafite); }
.f input, .f select, .f textarea { font: 400 17px/1.4 var(--f-tx); color: var(--asfalto); padding: 13px 14px; border: 1.5px solid #C7CEC5; border-radius: 10px; background: var(--papel); width: 100%; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--asfalto); background: #fff; box-shadow: 0 0 0 3px rgba(16, 185, 129, .35); }
.f textarea { min-height: 120px; resize: vertical; }
.f .hp { position: absolute; left: -9999px; }
.f small { color: var(--grafite); font-size: 14px; }

/* rodapé */
.pe { background: var(--asfalto); color: #CBD5E1; padding: 56px 0 40px; font-size: 15.5px; }
.pe .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; }
.pe .marca b { color: #fff; }
.pe .marca span { color: #94A3B8; }
.pe nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.pe nav a { text-decoration: none; color: #CBD5E1; }
.pe nav a:hover { color: #fff; }
.pe .lin { flex-basis: 100%; padding-top: 22px; border-top: 1px solid #263248; color: #8193AC; font-size: 14px; }

/* páginas de texto (privacidade, termos) */
.doc { padding: 56px 0 96px; }
.doc .wrap { max-width: 780px; }
.doc h1 { font-size: clamp(38px, 5vw, 54px); }
.doc .data { margin-top: 12px; color: var(--grafite); }
.doc h2 { font-size: 28px; margin: 44px 0 12px; }
.doc p, .doc li { color: #334155; line-height: 1.7; }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 22px; margin: 10px 0 0; }
.doc li + li { margin-top: 6px; }
.doc .caixa { margin-top: 28px; padding: 20px 22px; border-left: 4px solid var(--esmeralda); background: var(--branco); border-radius: 0 12px 12px 0; }

@media (max-width: 980px) {
  .hero .wrap, .contato .wrap, .cab { grid-template-columns: 1fr; }
  .cab .lead { justify-self: start; }
  .hero { padding-top: 40px; }
  .telas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab > div:nth-child(3) { border-left: 0; }
  .tab > div:nth-child(n+3) { border-top: 1px solid var(--concreto); }
}
@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 16px; }
  .top .wrap { height: 64px; }
  .marca span { display: none; }
  .bloco { padding: 68px 0; }
  .faz article { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .telas { gap: 16px; }
  .recursos, .passos { grid-template-columns: 1fr; }
  .passos li, .passos li + li { padding: 26px 0 0; border-left: 0; }
  .passos li + li { border-top: 1px solid var(--concreto); margin-top: 26px; }
  .tab { grid-template-columns: 1fr; }
  .tab > div { border-left: 0; border-top: 1px solid var(--concreto); }
  .tab > div:first-child { border-top: 0; }
  .f .duo { grid-template-columns: 1fr; }
  form.f { padding: 22px 18px; }
  .qd-l li { grid-template-columns: 62px 1fr auto; gap: 10px; }
  .qd-cod { font-size: 17px; }
  .st { padding: 0 9px; font-size: 13px; }
  .lead { font-size: 18.5px; }
}

/* ===== vitrine: celulares na frente, plataforma no computador atrás ===== */
:root { --neon: #3CF5B4; }
.vitrine { position: relative; margin-top: 56px; padding-bottom: 6%; }
.mon { width: 80%; }
.mon-tela { container-type: inline-size; aspect-ratio: 16 / 10; background: #0B1222; border: 10px solid var(--asfalto); border-bottom-width: 22px; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(15, 23, 42, .7); }
.mon-pe { width: 16%; height: 26px; margin: 0 auto; background: linear-gradient(#1E293B, #0F172A); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.mon-pe::after { content: ''; display: block; }
.vit-cels { position: absolute; right: 0; bottom: 0; width: 42%; display: flex; align-items: flex-end; gap: 4%; }
.vit-cels .cel { flex: 1; border-radius: 24px; padding: 6px; box-shadow: 0 30px 50px -26px rgba(15, 23, 42, .8); }
.vit-cels .cel img { border-radius: 19px; }
.vit-cels .cel:nth-child(2) { transform: translateY(-9%); }
.vit-tag { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-weight: 500; color: var(--asfalto); }
.vit-tag svg { width: 24px; height: 24px; flex: none; color: var(--esmeralda-tx); }
.telas-leg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--concreto); }
.telas-leg b { display: block; font-size: 17px; margin-bottom: 4px; }
.telas-leg p { color: var(--grafite); font-size: 15.5px; line-height: 1.5; }

/* tela da plataforma (desenhada, escala junto com o monitor) */
.pw { display: grid; grid-template-columns: 7cqw 1fr; height: 100%; font-family: var(--f-tx); color: #E2E8F0; }
.pw-side { background: var(--asfalto); display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; padding-top: 2cqw; border-right: 1px solid #1E293B; }
.pw-logo { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 1cqw; border: .15cqw dashed var(--neon); color: var(--neon); font: 700 .95cqw/1.05 var(--f-tit); text-align: center; letter-spacing: .04em; }
.pw-side i { width: 2.2cqw; height: 2.2cqw; border-radius: .6cqw; background: #1E293B; }
.pw-side i.on { background: var(--esmeralda); }
.pw-main { padding: 2.2cqw 2.4cqw; display: grid; grid-template-rows: auto auto 1fr; gap: 1.8cqw; min-width: 0; }
.pw-top { display: flex; justify-content: space-between; align-items: center; }
.pw-top b { display: block; font: 600 2.1cqw/1.1 var(--f-tit); color: #fff; }
.pw-top span { font-size: 1.15cqw; color: #8193AC; }
.pw-chips { display: flex; gap: .6cqw; }
.pw-chips em { font-style: normal; font-size: 1.1cqw; padding: .5cqw 1cqw; border-radius: .6cqw; background: #1E293B; color: #94A3B8; }
.pw-chips em.on { background: var(--esmeralda); color: var(--asfalto); font-weight: 600; }
.pw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2cqw; }
.pw-kpis div { background: #111C30; border: 1px solid #1E2A42; border-radius: 1cqw; padding: 1.2cqw 1.4cqw; }
.pw-kpis span { display: block; font-size: 1.1cqw; color: #94A3B8; }
.pw-kpis b { display: block; font: 700 2.7cqw/1.15 var(--f-tit); color: #fff; margin-top: .3cqw; }
.pw-kpis small { font-size: 1cqw; color: #94A3B8; }
.pw-kpis small.up { color: #34D399; } .pw-kpis small.dn { color: var(--sinal); }
.pw-grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr auto; gap: 1.2cqw; min-height: 0; }
.pw-card { background: #111C30; border: 1px solid #1E2A42; border-radius: 1cqw; padding: 1.2cqw 1.4cqw; min-height: 0; display: flex; flex-direction: column; }
.pw-wide { grid-column: 1 / -1; }
.pw-t { font-size: 1.15cqw; font-weight: 600; color: #CBD5E1; margin-bottom: .8cqw; }
.pw-bars { flex: 1; width: 100%; min-height: 0; }
.pw-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: .7cqw; }
.pw-rank li { display: grid; grid-template-columns: 6.5cqw 1fr 7cqw; align-items: center; gap: .8cqw; font-size: 1.1cqw; }
.pw-rank b { font: 600 1.25cqw var(--f-tit); color: #fff; }
.pw-rank i { height: .8cqw; border-radius: .4cqw; background: linear-gradient(90deg, var(--esmeralda), var(--neon)); width: var(--w); }
.pw-rank span { text-align: right; color: #CBD5E1; }
.pw-prev { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1cqw; }
.pw-prev li { font-size: 1.1cqw; color: #CBD5E1; display: grid; gap: .3cqw; }
.pw-prev b { font: 600 1.3cqw var(--f-tit); color: #fff; }
.pw-prev em { font-style: normal; font-weight: 600; font-size: 1.05cqw; }
.pw-prev em.at { color: var(--sinal); } .pw-prev em.pa { color: #F87171; }

/* passo a passo do app */
.fluxo { margin-top: 80px; }
.fluxo h3 { font-size: 30px; }
.fluxo ol { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: f; }
.fluxo li { counter-increment: f; padding: 22px 22px 0 0; border-top: 3px solid var(--asfalto); position: relative; }
.fluxo li::before { content: counter(f); position: absolute; top: -17px; left: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--esmeralda); color: var(--asfalto); display: grid; place-items: center; font: 700 17px/1 var(--f-tit); box-shadow: 0 0 0 5px var(--papel); }
.fluxo li b { display: block; margin-top: 14px; font-size: 17.5px; }
.fluxo li p { margin-top: 6px; color: var(--grafite); font-size: 15.5px; line-height: 1.5; }

@media (max-width: 980px) {
  .telas-leg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fluxo ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 680px) {
  .vitrine { padding-bottom: 0; margin-top: 40px; }
  .mon { width: 100%; }
  .mon-tela { border-width: 6px; border-bottom-width: 14px; border-radius: 12px; }
  .mon-pe { height: 16px; }
  .vit-cels { position: relative; width: 88%; margin: -26% auto 0; }
  .vit-cels .cel { border-radius: 16px; padding: 4px; } .vit-cels .cel img { border-radius: 12px; }
  .telas-leg { grid-template-columns: 1fr; gap: 18px; }
  .fluxo ol { grid-template-columns: 1fr; row-gap: 34px; }
  .fluxo li { padding-right: 0; }
}

/* ===== AgroPulse ===== */
.prod-cab .app-ic.verde { background: var(--neon); }
.pr-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-top: 48px; border-radius: 12px; background: #E6EAE4; }
.pr-tabs button { font: 600 15.5px/1 var(--f-tx); color: var(--grafite); background: none; border: 0; padding: 12px 18px; border-radius: 9px; cursor: pointer; }
.pr-tabs button[aria-selected="true"] { background: var(--asfalto); color: #fff; }
.vitrine.pr { margin-top: 18px; }
.vitrine.pr .vit-cels { width: 30%; }
.vitrine.pr .vit-cels .cel:nth-child(2) { transform: translateY(-12%); }
.mon-tela { position: relative; }
.dash { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.dash.on { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .dash { transition: none; } }

/* jeitão de relatório Power BI: tela branca, segmentações em cima, abas embaixo */
.pbi { background: #fff; color: #252423; font-family: 'Segoe UI', system-ui, sans-serif; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 1.3cqw; padding: 1.8cqw 2.2cqw 0; }
.pb-top { display: flex; align-items: baseline; gap: 1.4cqw; border-bottom: .25cqw solid #118DFF; padding-bottom: 1cqw; }
.pb-top b { font-size: 2.2cqw; font-weight: 600; }
.pb-top span { font-size: 1.3cqw; color: #605E5C; }
.pb-sl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; }
.pb-sl span { font-size: 1cqw; color: #605E5C; border: 1px solid #C8C6C4; border-radius: .3cqw; padding: .6cqw .9cqw; display: grid; gap: .2cqw; }
.pb-sl b { font-size: 1.25cqw; color: #252423; font-weight: 600; }
.pb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; }
.pb-cards div { border: 1px solid #E1DFDD; border-radius: .3cqw; padding: 1cqw 1.2cqw; box-shadow: 0 .15cqw .4cqw rgba(0, 0, 0, .08); }
.pb-cards b { display: block; font-size: 3cqw; font-weight: 600; color: #12239E; line-height: 1.1; }
.pb-cards span { font-size: 1.05cqw; color: #605E5C; }
.pb-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.2cqw; min-height: 0; }
.pb-vis { border: 1px solid #E1DFDD; border-radius: .3cqw; padding: 1cqw 1.2cqw; display: flex; flex-direction: column; min-height: 0; }
.pb-t { font-size: 1.25cqw; font-weight: 600; margin-bottom: .6cqw; }
.pb-vis svg { flex: 1; width: 100%; min-height: 0; }
.pb-leg { font-size: 1cqw; color: #605E5C; display: flex; align-items: center; gap: .5cqw; margin-top: .4cqw; }
.pb-leg i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--c); margin-left: .6cqw; }
.pb-pages { display: flex; gap: .3cqw; background: #F3F2F1; margin: 0 -2.2cqw; padding: .5cqw 1.4cqw 0; border-top: 1px solid #E1DFDD; }
.pb-pages em { font-style: normal; font-size: 1.05cqw; padding: .6cqw 1.3cqw; color: #605E5C; }
.pb-pages em.on { background: #fff; color: #252423; font-weight: 600; border-bottom: .25cqw solid #118DFF; }
/* versão plataforma web */
.pweb { background: #0B1222; }
.pweb .pw-main { grid-template-rows: auto 1fr; }
.pg { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2cqw; min-height: 0; }
.pg .mapa { flex: 1; width: 100%; min-height: 0; }
.pg-leg { display: flex; align-items: center; gap: .5cqw; font-size: 1cqw; color: #94A3B8; margin-top: .6cqw; }
.pg-leg i { width: 1.1cqw; height: 1.1cqw; border-radius: .25cqw; margin-left: .7cqw; }
.pg-leg i.g { background: #10B981; } .pg-leg i.y { background: var(--sinal); } .pg-leg i.r { background: #EF4444; }
.pg-al { font-size: 1.1cqw; color: #FCA5A5; line-height: 1.4; }

/* telas do app de pragas (desenhadas, sem dado real de cliente) */
.vit-cels .cel .ap { container-type: inline-size; aspect-ratio: 390 / 844; border-radius: 19px; overflow: hidden; background: #F5F6F3; display: flex; flex-direction: column; font-family: var(--f-tx); }
.ap-top { background: var(--asfalto); color: #fff; padding: 9cqw 7cqw 5cqw; display: grid; gap: 1.5cqw; }
.ap-top b { font: 700 8.5cqw/1 var(--f-tit); }
.ap-top span { font-size: 5cqw; color: #94A3B8; }
.ap-off { color: var(--sinal) !important; }
.ap-b { padding: 6cqw; display: flex; flex-direction: column; gap: 3.6cqw; flex: 1; color: var(--asfalto); }
.ap-h { font: 600 6.6cqw/1.1 var(--f-tit); }
.ap-chips { display: flex; gap: 2cqw; }
.ap-chips em { font-style: normal; font-size: 4.6cqw; padding: 2cqw 3cqw; border-radius: 3cqw; background: #E6EAE4; color: var(--grafite); }
.ap-chips em.on { background: var(--asfalto); color: var(--neon); font-weight: 600; }
.ap label { display: grid; gap: 1cqw; font-size: 4.2cqw; color: var(--grafite); }
.ap label b { font-size: 5.6cqw; color: var(--asfalto); background: #fff; border: 1px solid var(--concreto); border-radius: 2.6cqw; padding: 2.4cqw 3cqw; font-weight: 600; }
.ap-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.ap-res { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 3cqw; padding: 3.4cqw; display: grid; gap: .6cqw; }
.ap-res span { font-size: 4.2cqw; color: var(--grafite); }
.ap-res b { font: 700 11cqw/1 var(--f-tit); color: #DC2626; }
.ap-res small { font-size: 4cqw; color: #B91C1C; }
.ap-btn { margin-top: auto; text-align: center; background: var(--esmeralda); color: var(--asfalto); font-weight: 600; font-size: 5.2cqw; padding: 4cqw; border-radius: 3cqw; }
.ap-btn.sec { background: #fff; border: 1px solid var(--concreto); }
.ap-row { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--concreto); border-left: 1.4cqw solid #10B981; border-radius: 2.6cqw; padding: 3cqw 3.4cqw; font-size: 4.8cqw; }
.ap-row.r { border-left-color: #EF4444; } .ap-row.r span { color: #DC2626; font-weight: 600; }
.ap-spark { width: 100%; height: 16cqw; background: #fff; border: 1px solid var(--concreto); border-radius: 2.6cqw; }
.acoes .sob { align-self: center; color: var(--grafite); font-size: 15.5px; }
.entrega { margin-top: 34px; }
@media (max-width: 680px) {
  .pr-tabs { display: flex; } .pr-tabs button { flex: 1; padding: 12px 8px; font-size: 14.5px; }
  .vitrine.pr .vit-cels { width: 62%; }
}

/* ===== painéis desenhados (painel.js) ===== */
.db { position: absolute; inset: 0; display: grid; font-size: 1.12cqw; line-height: 1.25; }
.db button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.db-pg { display: none; gap: 1cqw; min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.db-pg.on { display: grid; }
.vz { border-radius: .9cqw; padding: 1cqw 1.2cqw; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.vz-t { display: flex; align-items: center; flex-wrap: wrap; gap: .4cqw 1cqw; font-weight: 600; font-size: 1.12cqw; margin-bottom: .5cqw; }
.vz-l { display: inline-flex; align-items: center; gap: .4cqw; font-weight: 400; font-size: .95cqw; opacity: .85; }
.vz-l i { width: .9cqw; height: .9cqw; border-radius: .25cqw; margin-left: .5cqw; }
.vz-c { flex: 1; min-height: 0; position: relative; }
.vz-c svg { position: absolute; inset: 0; display: block; overflow: visible; }
.vz.kpi .vz-v, .vz.pest .vz-v { font-size: 2.6cqw; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
.vz-d { font-size: .98cqw; opacity: .75; }
.vz-d.up { color: var(--ok-c); opacity: 1; } .vz-d.dn { color: var(--at-c); opacity: 1; }
.vz.kpi { display: grid; grid-template-columns: 1fr 42%; grid-template-rows: auto auto 1fr; column-gap: .6cqw; }
.vz.kpi .vz-t { grid-column: 1 / -1; }
.vz.kpi .vz-c.sp { grid-column: 2; grid-row: 2 / 4; }
.vz.kpi .vz-d { grid-column: 1; }
.vz-v.ok { color: var(--ok-c); } .vz-v.at { color: var(--at-c); } .vz-v.bad { color: var(--bad-c); }
.pst-bar { position: relative; height: .7cqw; border-radius: .35cqw; background: var(--grid-c); margin: .6cqw 0 .4cqw; }
.pst-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: .35cqw; background: linear-gradient(90deg, var(--ok-c), var(--at-c) 70%, var(--bad-c)); }
.pst-bar em { position: absolute; top: -.35cqw; bottom: -.35cqw; width: .2cqw; background: currentColor; }
.vz-li { list-style: none; margin: 0; padding: 0; display: grid; gap: .55cqw; }
.vz-li li { display: grid; grid-template-columns: 5.4cqw 1fr auto; gap: .6cqw; align-items: center; padding-bottom: .5cqw; border-bottom: 1px solid var(--grid-c); }
.vz-li li:last-child { border-bottom: 0; }
.vz-li em { font-style: normal; font-weight: 600; font-size: .98cqw; padding: .2cqw .6cqw; border-radius: .4cqw; }
.vz-li em.ok { color: var(--ok-c); } .vz-li em.at { color: var(--at-c); } .vz-li em.bad { color: var(--bad-c); }
.vz-tb { width: 100%; border-collapse: collapse; font-size: 1cqw; }
.vz-tb th { text-align: right; font-weight: 600; opacity: .7; padding: .3cqw .4cqw; } .vz-tb th:first-child { text-align: left; }
.vz-tb td { text-align: right; padding: .45cqw .4cqw; border-top: 1px solid var(--grid-c); font-variant-numeric: tabular-nums; }
.vz-tb td:first-child { text-align: left; } .vz-tb td.bad { color: var(--bad-c); font-weight: 700; } .vz-tb td.at { color: var(--at-c); font-weight: 600; }

/* plataforma web: escura, com brilho neon */
.db.web { grid-template-columns: 6.4cqw 1fr; background: radial-gradient(120% 90% at 100% 0%, #10263A 0%, #0B1222 55%); color: #E2E8F0; font-family: var(--f-tx); --ok-c: #3CF5B4; --at-c: #F2B807; --bad-c: #F87171; --grid-c: #1A263B; }
.db.web .db-side { background: rgba(15, 23, 42, .85); border-right: 1px solid #1C2A42; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; padding-top: 1.6cqw; }
.db-logo { display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border-radius: 1cqw; border: .14cqw dashed var(--neon); color: var(--neon); font: 700 .9cqw/1.05 var(--f-tit); text-align: center; }
.db.web .db-side button i { display: block; width: 2.4cqw; height: 2.4cqw; border-radius: .7cqw; background: #1C2A42; }
.db.web .db-side button.on i { background: var(--neon); box-shadow: 0 0 1.2cqw rgba(60, 245, 180, .55); }
.db.web .db-main { display: grid; grid-template-rows: auto 1fr; gap: 1.1cqw; padding: 1.6cqw 1.8cqw; min-width: 0; min-height: 0; }
.db-top { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; }
.db-top b { display: block; font: 600 2cqw/1.1 var(--f-tit); color: #fff; }
.db-top span { font-size: 1cqw; color: #7F92AD; }
.db.web .db-tabs { display: flex; gap: .5cqw; background: #111C30; padding: .4cqw; border-radius: .9cqw; border: 1px solid #1C2A42; }
.db.web .db-tabs button { padding: .55cqw 1.1cqw; border-radius: .6cqw; color: #94A3B8; font-size: 1cqw; }
.db.web .db-tabs button.on { background: var(--neon); color: #0F172A; font-weight: 600; }
.db.web .vz { background: linear-gradient(180deg, rgba(20, 32, 54, .92), rgba(14, 24, 41, .92)); border: 1px solid #1C2A42; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.db.web .vz-t { color: #CBD5E1; }
.db.web .vz.kpi .vz-v, .db.web .vz.pest .vz-v:not(.ok):not(.at):not(.bad) { color: #fff; }
.db.web .pst-bar em { color: #fff; }

/* jeito de relatório Power BI */
.db.pbi { grid-template-rows: auto 1fr auto; gap: 1cqw; padding: 1.3cqw 1.6cqw 0; background: #F3F2F1; color: #252423; font-family: 'Segoe UI', 'Selawik', system-ui, sans-serif; --ok-c: #1AAB40; --at-c: #B58F00; --bad-c: #D64550; --grid-c: #EDEBE9; }
.db-head { display: grid; grid-template-columns: auto 1fr; gap: 1.4cqw; align-items: center; }
.db-head > b { font-size: 1.55cqw; font-weight: 600; white-space: nowrap; }
.db-sl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8cqw; }
.db-sl span { background: #fff; border: 1px solid #E1DFDD; border-radius: .3cqw; padding: .35cqw .7cqw; font-size: .85cqw; color: #605E5C; display: grid; }
.db-sl b { font-size: 1cqw; color: #252423; font-weight: 600; }
.db.pbi .vz { background: #fff; border-radius: .4cqw; box-shadow: 0 .1cqw .5cqw rgba(0, 0, 0, .1); }
.db.pbi .vz.kpi .vz-v { color: #12239E; }
.db.pbi .pst-bar em { color: #252423; }
.db-pages { display: flex; gap: .2cqw; margin: 0 -1.6cqw; padding: .4cqw 1.2cqw 0; background: #E9E7E5; border-top: 1px solid #D2D0CE; }
.db-pages button { padding: .55cqw 1.2cqw; font-size: .98cqw; color: #605E5C; border-radius: .3cqw .3cqw 0 0; }
.db-pages button.on { background: #fff; color: #252423; font-weight: 600; box-shadow: inset 0 .22cqw 0 #118DFF; }

/* destaque: checklist por voz */
.voz { margin-top: 64px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; background: var(--asfalto); color: #E2E8F0; border-radius: 22px; padding: 44px 48px; position: relative; overflow: hidden; }
.voz::after { content: ''; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 245, 180, .22), transparent); pointer-events: none; }
.voz .selo { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 16px; background: rgba(60, 245, 180, .12); color: var(--neon); font-weight: 600; font-size: 14.5px; }
.voz h3 { font-size: clamp(28px, 3.4vw, 40px); color: #fff; margin-top: 16px; }
.voz p { color: #CBD5E1; margin-top: 12px; max-width: 30em; }
.voz ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: #CBD5E1; }
.voz li { position: relative; padding-left: 22px; } .voz li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--neon); }
.falas { display: grid; gap: 12px; position: relative; z-index: 1; }
.fala { display: flex; align-items: center; gap: 14px; }
.fala .mic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--neon); color: var(--asfalto); box-shadow: 0 0 0 6px rgba(60, 245, 180, .14); }
.fala .mic svg { width: 22px; height: 22px; }
.fala .bal { background: #1E293B; border: 1px solid #2B3A55; border-radius: 16px 16px 16px 4px; padding: 12px 16px; font-size: 16.5px; color: #fff; }
.fala .bal small { display: block; color: #8193AC; font-size: 13.5px; margin-bottom: 2px; }
.fala.app { justify-content: flex-end; }
.fala.app .bal { background: rgba(16, 185, 129, .14); border-color: rgba(60, 245, 180, .35); border-radius: 16px 16px 4px 16px; }
.onda { display: flex; align-items: center; gap: 4px; height: 26px; margin-left: 60px; }
.onda i { width: 4px; border-radius: 2px; background: var(--neon); opacity: .8; }
@media (max-width: 980px) { .voz { grid-template-columns: 1fr; padding: 34px 26px; } }
@media (max-width: 680px) { .voz { margin-top: 48px; padding: 28px 18px; border-radius: 16px; } .fala .bal { font-size: 15.5px; } }
.prod-cab .app-ic.ap-ic { background: radial-gradient(120% 120% at 30% 20%, #1E3A5F, var(--asfalto)); box-shadow: 0 0 0 1px rgba(60, 245, 180, .25), 0 8px 20px -8px rgba(16, 185, 129, .6); }
.prod-cab .app-ic.ap-ic svg { width: 36px; height: 36px; }
#inspecfrota .pr-tabs { margin-top: 48px; }
#vIF { margin-top: 18px; }
.vz.kpi .vz-v, .vz.pest .vz-v { white-space: nowrap; font-size: 2.35cqw; }
.vz.kpi { grid-template-columns: 1fr 36%; }
.vz.kpi .vz-c.sp { align-self: end; height: 100%; }
.vz.kpi .vz-c.sp svg { top: auto; }
.vitrine { padding-bottom: 13%; }
.vit-cels { width: 36%; }
.vitrine.pr .vit-cels { width: 25%; }
@media (max-width: 680px) { .vitrine { padding-bottom: 0; } .vit-cels { width: 84%; } .vitrine.pr .vit-cels { width: 60%; } }

/* ===== calculadora ===== */
.calc { margin-top: 88px; display: grid; grid-template-columns: 1.15fr 1fr; border: 2px solid var(--asfalto); border-radius: 20px; overflow: hidden; background: var(--branco); }
.calc-in { padding: 34px 36px; display: grid; gap: 20px; align-content: start; }
.calc h3 { font-size: 32px; }
.calc-sub { color: var(--grafite); margin-top: -10px; }
.rg { display: grid; gap: 10px; }
.rg span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; font-size: 16px; }
.rg output { font: 700 22px/1 var(--f-tit); color: var(--asfalto); white-space: nowrap; }
.rg input { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--esmeralda) var(--p, 50%), #E2E6DF var(--p, 50%)); outline: none; margin: 4px 0; }
.rg input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--asfalto); box-shadow: 0 2px 6px rgba(15, 23, 42, .25); cursor: pointer; }
.rg input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--asfalto); cursor: pointer; }
.rg input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(16, 185, 129, .45); }
.calc-red { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 16px; }
.seg-c { display: inline-flex; gap: 4px; padding: 4px; border-radius: 11px; background: #E6EAE4; }
.seg-c button { font: 600 15.5px/1 var(--f-tx); border: 0; background: none; padding: 9px 16px; border-radius: 8px; color: var(--grafite); cursor: pointer; }
.seg-c button.on { background: var(--asfalto); color: #fff; }
.calc-ex { font-size: 14.5px; color: var(--grafite); }
.calc-out { background: var(--asfalto); color: #CBD5E1; padding: 34px 36px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.calc-out::before { content: ''; position: absolute; right: -140px; top: -140px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 245, 180, .2), transparent); pointer-events: none; }
.co-l { font-weight: 600; color: #fff; }
.co-v { font: 700 clamp(46px, 5.4vw, 68px)/1 var(--f-tit); color: var(--neon); letter-spacing: -.01em; text-shadow: 0 0 28px rgba(60, 245, 180, .35); }
.co-v small { font: 500 20px var(--f-tx); color: #94A3B8; margin-left: 6px; text-shadow: none; }
.co-a { color: #94A3B8; }
.co-li { list-style: none; margin: 14px 0 8px; padding: 0; display: grid; }
.co-li li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #263248; }
.co-li b { color: #fff; font-weight: 600; text-align: right; }
.co-li li.dest b { color: var(--neon); font: 700 22px/1 var(--f-tit); }
.calc-out .btn { align-self: flex-start; margin-top: 6px; position: relative; }
.co-n { font-size: 13.5px; color: #8193AC; margin-top: 4px; }
@media (max-width: 980px) { .calc { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .calc { margin-top: 64px; border-radius: 16px; } .calc-in, .calc-out { padding: 26px 18px; } .calc h3 { font-size: 27px; } .rg span { font-size: 15px; } }

/* ===== bloco do QR Code ===== */
.qrb { margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.qr-art { position: relative; aspect-ratio: 1 / .86; container-type: inline-size; }
.qr-cab { position: absolute; left: 0; top: 4%; width: 72%; height: 88%; border-radius: 4cqw; background: linear-gradient(160deg, #E8ECEF 0%, #C9D1D8 55%, #AEB8C2 100%); box-shadow: inset 0 0 0 .6cqw rgba(255, 255, 255, .5), 0 3cqw 6cqw -3cqw rgba(15, 23, 42, .45); overflow: hidden; }
.qr-cab-j { position: absolute; left: 8%; right: 8%; top: 6%; height: 30%; border-radius: 2.4cqw; background: linear-gradient(170deg, #334155, #0F172A 70%); box-shadow: inset 0 -1cqw 2cqw rgba(255, 255, 255, .08); }
.qr-cab-j::after { content: ''; position: absolute; left: 12%; top: 18%; width: 30%; height: 70%; background: linear-gradient(115deg, rgba(255, 255, 255, .22), transparent 60%); transform: skewX(-12deg); }
.qr-cab-m { position: absolute; right: 9%; top: 52%; width: 14%; height: 3.2%; border-radius: 1cqw; background: #8A96A3; box-shadow: inset 0 .3cqw .4cqw rgba(0, 0, 0, .25); }
.etq { position: absolute; left: 12%; top: 44%; width: 46%; background: #fff; border-radius: 1.6cqw; padding: 2.2cqw; box-shadow: 0 .6cqw 1.6cqw rgba(15, 23, 42, .25); display: grid; gap: 1.4cqw; transform: rotate(-1.5deg); }
.etq-t b { display: block; font: 700 4.6cqw/1 var(--f-tit); color: var(--asfalto); }
.etq-t span { font-size: 2.1cqw; color: var(--grafite); }
.etq-qr { width: 100%; aspect-ratio: 1; display: block; }
.etq-p { font-size: 2cqw; font-weight: 600; color: #1D4ED8; text-align: center; }
.cel-qr { position: absolute; right: 2%; top: 0; width: 40%; aspect-ratio: 390 / 800; border-radius: 6cqw; background: var(--asfalto); padding: 1.6cqw; transform: rotate(6deg); box-shadow: 0 4cqw 8cqw -3cqw rgba(15, 23, 42, .7); }
.cq-tela { position: relative; height: 100%; border-radius: 4.6cqw; overflow: hidden; background: radial-gradient(120% 70% at 50% 45%, #6B7785 0%, #3B4552 55%, #1E2631 100%); display: flex; flex-direction: column; align-items: center; }
.cq-top { margin-top: 9cqw; font-size: 2.4cqw; font-weight: 600; color: #fff; background: rgba(15, 23, 42, .55); padding: 1cqw 2.4cqw; border-radius: 3cqw; }
.cq-mira { position: relative; width: 72%; aspect-ratio: 1; margin-top: 8cqw; }
.cq-code { position: absolute; inset: 14%; width: 72%; height: 72%; border-radius: 1cqw; transform: rotate(-4deg) scale(.96); filter: blur(.08cqw); opacity: .92; }
.cq-mira b { position: absolute; width: 26%; height: 26%; border: 1.2cqw solid var(--neon); filter: drop-shadow(0 0 1.2cqw rgba(60, 245, 180, .6)); }
.cq-mira .c1 { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 3cqw 0 0 0; }
.cq-mira .c2 { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 3cqw 0 0; }
.cq-mira .c3 { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 3cqw 0; }
.cq-mira .c4 { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 3cqw; }
.cq-linha { position: absolute; left: 6%; right: 6%; top: 10%; height: .7cqw; border-radius: .4cqw; background: var(--neon); box-shadow: 0 0 2.4cqw 1cqw rgba(60, 245, 180, .55); opacity: 0; }
.cq-ok { position: absolute; left: 6%; right: 6%; bottom: 7%; display: flex; align-items: center; gap: 2.4cqw; background: #fff; border-radius: 3.6cqw; padding: 2.4cqw 3cqw; box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .35); opacity: 0; transform: translateY(20%); }
.cq-ic { flex: none; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--esmeralda); color: #fff; display: grid; place-items: center; }
.cq-ic svg { width: 60%; height: 60%; }
.cq-ok b { display: block; font: 700 3.3cqw/1.1 var(--f-tit); color: var(--asfalto); }
.cq-ok span { font-size: 2.3cqw; color: var(--grafite); }
.qr-art.lendo .cq-linha { animation: qrScan 1.5s ease-in-out .2s 2 forwards; }
.qr-art.lendo .cq-ok, .qr-art.lido .cq-ok { animation: qrOk .45s ease-out 3.3s forwards; }
.qr-art.lido .cq-ok { animation: none; opacity: 1; transform: none; }
.qr-art.lendo .cq-mira b { animation: qrPulse .5s ease-out 3.2s 1; }
@keyframes qrScan { 0% { top: 10%; opacity: 0; } 10% { opacity: 1; } 50% { top: 88%; } 90% { opacity: 1; } 100% { top: 10%; opacity: 0; } }
@keyframes qrOk { to { opacity: 1; transform: none; } }
@keyframes qrPulse { 50% { transform: scale(1.08); } }
.qr-tx h3 { font-size: clamp(28px, 3vw, 38px); }
.qr-tx > p { color: var(--grafite); margin-top: 14px; font-size: 18px; }
.qr-ps { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: q; display: grid; gap: 18px; }
.qr-ps li { counter-increment: q; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
.qr-ps li::before { content: counter(q); grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; background: var(--asfalto); color: var(--neon); display: grid; place-items: center; font: 700 20px/1 var(--f-tit); }
.qr-ps b { font-size: 17.5px; }
.qr-ps span { color: var(--grafite); font-size: 16px; line-height: 1.5; }
.qr-nota { margin-top: 22px; padding: 14px 16px; border-left: 4px solid var(--esmeralda); background: var(--branco); border-radius: 0 12px 12px 0; color: #334155; font-size: 15.5px; }
@media (max-width: 980px) { .qrb { grid-template-columns: 1fr; gap: 36px; } .qr-art { max-width: 560px; } }
@media (max-width: 680px) { .qrb { margin-top: 56px; } }
.etq { left: 11%; top: 40%; width: 38%; padding: 1.8cqw; gap: 1cqw; }
.etq-t span { display: block; font-size: 1.9cqw; line-height: 1.25; }
.etq-t b { font-size: 4cqw; margin-bottom: .4cqw; }
.cq-ok { gap: 1.8cqw; padding: 2cqw 2.4cqw; }
.cq-ok b { font-size: 2.7cqw; white-space: nowrap; } .cq-ok span { font-size: 2cqw; white-space: nowrap; }
.cq-ic { width: 5.6cqw; height: 5.6cqw; }
.cel-qr { right: 4%; width: 38%; }
@media (max-width: 680px) { .qr-art { margin: 0 6px; } }