/* Página de vendas (04/11/2026): foco em emitir NFS-e, NF-e e NFC-e; a contabilidade aparece depois.
   Usa a base do style.css (topo, botões, faq, fechamento, rodapé) e acrescenta as seções novas. */
:root { --v-serif: 'DejaVu Serif', Georgia, 'Times New Roman', serif; --v-ok: #1a7a4c; }
@font-face { font-family: 'DejaVu Serif'; src: url('assets/DejaVuSerif.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GrillusLeve'; src: url('assets/DejaVuSans-ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; }
h1, h2 { font-family: var(--v-serif); letter-spacing: -.03em; }
.v-topo { position: sticky; top: 0; z-index: 30; }
.v-nav a:hover { color: #fff; }

/* abertura */
.v-hero { background: var(--ink); color: #fff; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 5vw; padding: 78px 5.2% 64px; align-items: center; }
.v-hero h1 { font-size: clamp(42px, 5vw, 74px); font-weight: 400; line-height: 1.04; }
.v-hero h1 span { color: #bba5ff; }
.v-hero .eyebrow { color: #bbb5d1; }
.v-hero-txt > p { color: #c9c7d2; font-size: 17px; line-height: 1.7; max-width: 560px; margin: 26px 0 32px; }
.v-hero .text-link { color: #fff; }
.v-selos { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13px; color: #b9b6c6; }
.v-selos li::before { content: '✓'; color: #bba5ff; margin-right: 8px; }
.v-hero-cel { display: grid; justify-items: center; }
.v-exemplo { font-size: 11px; color: #9995aa; margin-top: 14px; }

/* celular de exemplo */
.v-fone { position: relative; width: min(320px, 100%); aspect-ratio: 9 / 17.5; border-radius: 38px; border: 9px solid #000; background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 30px 80px -20px #000a; display: flex; flex-direction: column; font-size: 13px; }
.vf-top { display: flex; justify-content: space-between; padding: 18px 18px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.vf-top span { color: var(--gray); }
.vf-c { padding: 18px; display: grid; gap: 9px; }
.vf-t { font: 400 25px/1.1 var(--v-serif); letter-spacing: -.02em; }
.vf-r { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin-top: 6px; }
.vf-n { font: 200 34px/1 GrillusLeve, Grillus, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.vf-l { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.vf-ok { color: var(--v-ok); }
.vf-folha { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 4px; padding: 16px 18px 20px; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -18px 40px -16px #0005; text-align: center; animation: vf-sobe .7s cubic-bezier(.2, .9, .2, 1) .6s both; }
.vf-folha img { width: 120px; height: auto; }
.vf-folha b { font: 400 20px/1.2 var(--v-serif); }
.vf-folha span { color: var(--gray); font-size: 12px; }
.vf-bt { margin-top: 10px; align-self: stretch; padding: 12px; border-radius: 999px; background: var(--action); color: #fff; font-weight: 700; }
@keyframes vf-sobe { from { transform: translateY(100%); } to { transform: none; } }

/* três notas */
.v-notas h2, .v-passos h2, .v-junto h2, .v-contab h2, .v-planos h2 { font-size: clamp(32px, 3.6vw, 52px); }
.v-notas .eyebrow, .v-passos .eyebrow, .v-junto .eyebrow, .v-contab .eyebrow, .v-planos .eyebrow { color: var(--action); }
.v-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v-tres article { background: var(--soft); border-radius: 14px; padding: 28px 26px 24px; display: grid; gap: 10px; align-content: start; }
.v-tres h3 { font: 400 34px/1 var(--v-serif); letter-spacing: -.02em; }
.v-tres p { color: var(--gray); font-size: 14px; }
.v-tres ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13.5px; }
.v-tres li { padding-left: 20px; position: relative; }
.v-tres li::before { content: '✓'; position: absolute; left: 0; color: var(--action); }
.v-tag { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--action); background: #ebe6fd; padding: 4px 10px; border-radius: 999px; }

/* passos */
.v-passos { background: var(--soft); }
.v-ol { list-style: none; counter-reset: p; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.v-ol li { counter-increment: p; display: grid; gap: 8px; align-content: start; }
.v-ol li::before { content: counter(p); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--action); color: #fff; font-weight: 700; margin-bottom: 6px; }
.v-ol b { font-size: 17px; font-weight: 700; }
.v-ol span { color: var(--gray); font-size: 14px; }

/* junto com a nota */
.v-junto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7%; align-items: center; }
.v-junto-txt > p { color: var(--gray); font-size: 15px; max-width: 480px; margin: 18px 0 22px; }
.v-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 14.5px; }
.v-lista li { padding-left: 22px; position: relative; color: var(--gray); }
.v-lista li::before { content: '→'; position: absolute; left: 0; color: var(--action); }
.v-lista b { color: var(--ink); }
.v-msg { background: #e9e3d8; border-radius: 18px; padding: 26px 22px; display: grid; gap: 10px; justify-items: start; }
.vm-bolha { background: #fff; border-radius: 4px 14px 14px 14px; padding: 14px 16px; font-size: 13.5px; line-height: 1.55; max-width: 92%; box-shadow: 0 1px 1px #0001; }
.vm-pix { font-family: 'DejaVu Sans Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--gray); word-break: break-all; }
.vm-anexo { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 10px 14px; font-size: 13px; box-shadow: 0 1px 1px #0001; }
.vm-anexo span { background: #c9372c; color: #fff; font-size: 10px; font-weight: 700; padding: 4px 6px; border-radius: 4px; }
.v-msg .v-exemplo { color: #6f6a60; }

/* integrações */
.v-integra h2 { font-size: clamp(32px, 3.6vw, 52px); }
.v-integra .eyebrow { color: var(--action); }
.v-int-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.v-int-grid article { border: 1px solid var(--line); border-radius: 14px; padding: 28px 26px 24px; display: grid; gap: 10px; align-content: start; }
.v-int-grid h3 { font: 400 34px/1 var(--v-serif); letter-spacing: -.02em; }
.v-int-grid ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.v-int-grid li { padding-left: 20px; position: relative; }
.v-int-grid li::before { content: '✓'; position: absolute; left: 0; color: var(--action); }

/* parceria */
.v-parc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 7%; align-items: center; background: var(--soft); }
.v-parc h2 { font-size: clamp(32px, 3.6vw, 52px); }
.v-parc .eyebrow { color: var(--action); }
.v-parc-txt > p { color: var(--gray); font-size: 15px; max-width: 540px; margin: 18px 0 22px; }
.v-parc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.v-parc-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px; display: grid; gap: 6px; justify-items: start; box-shadow: 0 24px 60px -36px #5633c766; }
.v-parc-card b { font: 400 26px/1.15 var(--v-serif); }
.v-parc-card .mut { color: var(--gray); font-size: 13px; }
.v-faixa { background: var(--action); color: #fff; text-align: center; font-size: 14px; padding: 10px 16px; }
.v-faixa[hidden] { display: none; }

/* contabilidade */
.v-contab { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 6%; align-items: center; background: #ece8f5; }
.v-contab-g img { width: 100%; max-width: 300px; height: auto; margin: auto; }
.v-contab p { color: var(--gray); font-size: 15px; max-width: 560px; margin: 18px 0 0; }
.v-contab .text-link { color: var(--action); border-color: #d6c9fa; }

/* planos */
.v-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.v-plan { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 30px 26px 26px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.v-plan > span { font-size: 13px; color: var(--gray); }
.v-plan h3 { font: 400 28px/1.15 var(--v-serif); margin-top: 6px; }
.v-preco { font: 200 46px/1.1 GrillusLeve, Grillus, sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.v-preco small { font: 400 13px Grillus, sans-serif; letter-spacing: 0; color: var(--gray); margin-left: 6px; }
.v-plan ul { list-style: none; padding: 14px 0 24px; margin: 0; display: grid; gap: 9px; font-size: 14px; flex: 1; border-top: 1px solid var(--line); }
.v-plan li::before { content: '✓'; color: var(--action); margin-right: 10px; }
.v-plan .button { width: 100%; justify-content: center; font-size: 14px; }
.v-dest { border: 2px solid var(--action); box-shadow: 0 20px 50px -30px #5633c780; }
.v-sel { position: absolute; top: -13px; left: 24px; background: var(--action); color: #fff !important; font-size: 11px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.v-plan-nota { font-size: 13px; color: var(--gray); margin-top: 18px; }
.v-esc { margin-top: 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 24px; border-radius: 14px; background: var(--soft); }
.v-esc div { display: grid; gap: 4px; min-width: 0; }
.v-esc span { color: var(--gray); font-size: 13.5px; }

.faq h2 { font-size: clamp(30px, 3.2vw, 46px); }
.faq summary { font-size: 15px; }
.faq-list p { font-size: 14px; }

@media (max-width: 1050px) { .v-ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .v-hero, .v-junto, .v-contab, .v-parc { grid-template-columns: 1fr; }
  .v-tres, .v-plan-grid, .v-int-grid { grid-template-columns: 1fr; }
  .v-contab-g img { max-width: 200px; }
  .v-dest { order: -1; }
}
@media (max-width: 760px) {
  .v-hero { padding: 44px 24px 48px; gap: 36px; }
  .v-hero-txt > p { font-size: 15px; }
  .v-ol { grid-template-columns: 1fr; }
  .v-topo .small { font-size: 12px; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .vf-folha { animation: none; } }

/* menu dos sistemas Grillus (todas as páginas) */
.v-sis { position: relative; flex: none; }
.v-sis summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #fff; padding: 8px 12px; border-radius: 999px; border: 1px solid #ffffff30; user-select: none; }
.v-sis summary::-webkit-details-marker { display: none; }
.v-sis summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.v-sis[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.v-sis summary:hover, .v-sis[open] summary { border-color: #bba5ff; }
.v-sis-p { position: absolute; top: calc(100% + 12px); left: 0; width: 330px; max-width: calc(100vw - 32px); background: #fff; color: var(--ink); border-radius: 14px; padding: 8px; box-shadow: 0 24px 60px -18px #000a; display: grid; gap: 2px; z-index: 40; }
.v-sis-p a { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 11px 12px; border-radius: 10px; }
.v-sis-p a:hover { background: var(--soft); }
.v-sis-p a[aria-current] { background: #ebe6fd; }
.v-sis-p i { grid-row: span 2; width: 38px; height: 38px; border-radius: 10px; background: var(--ink); display: grid; place-items: center; font: 400 17px/1 var(--v-serif); font-style: normal; color: #bba5ff; }
.v-sis-p b { font-size: 14px; }
.v-sis-p span { font-size: 12px; color: var(--gray); line-height: 1.35; }
.v-sis-p em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--action); margin-left: 6px; }
@media (max-width: 760px) {
  .v-sis summary { font-size: 12px; padding: 7px 10px; }
  .v-sis-p { position: fixed; top: 70px; left: 16px; right: 16px; width: auto; max-width: none; }
}

/* páginas dos outros sistemas (gestao.html e planner.html) */
.v-mod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v-mod article { background: var(--soft); border-radius: 14px; padding: 26px 24px 22px; display: grid; gap: 8px; align-content: start; }
.v-mod h3 { font: 400 26px/1.1 var(--v-serif); letter-spacing: -.02em; margin: 0; }
.v-mod p { color: var(--gray); font-size: 14px; margin: 0; }
.v-mod .v-tag { margin-bottom: 4px; }
.v-mod.v-mod-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-mod article .text-link { justify-self: start; margin-top: 6px; color: var(--action); border-color: #d6c9fa; }
.v-dev { margin: 26px 0 0; font-size: 13.5px; color: var(--gray); }
.v-dev b { color: var(--ink); }
.v-sub h2 { font-size: clamp(32px, 3.6vw, 52px); }
.v-sub .eyebrow { color: var(--action); }
.v-dois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7%; align-items: center; }
.v-dois > div > p { color: var(--gray); font-size: 15px; max-width: 500px; margin: 18px 0 22px; }
.v-cinza { background: var(--soft); }

/* quadro de exemplo do Gestão */
.v-quadro { width: min(460px, 100%); background: #fff; color: var(--ink); border-radius: 18px; padding: 20px 20px 16px; box-shadow: 0 30px 80px -20px #000a; font-size: 13px; }
.vq-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.vq-top b { font: 400 22px/1.1 var(--v-serif); letter-spacing: -.02em; }
.vq-top span { color: var(--gray); font-size: 12px; }
.vq-l { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.vq-l > span:first-child { min-width: 0; display: grid; }
.vq-l small { color: var(--gray); font-size: 11.5px; }
.vq-d { color: var(--gray); font-variant-numeric: tabular-nums; font-size: 12px; }
.vq-s { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.vq-s.ok { background: #e3f3ea; color: var(--v-ok); }
.vq-s.conf { background: #fdf1d8; color: #8a5a00; }
.vq-s.fazer { background: #ebe6fd; color: var(--action); }

/* semana de exemplo do Planner */
.v-pl { width: min(470px, 100%); background: #fff; color: var(--ink); border-radius: 18px; padding: 16px; box-shadow: 0 30px 80px -20px #000a; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 11.5px; }
.vp-d { display: grid; align-content: start; min-width: 0; }
.vp-h { display: flex; justify-content: space-between; align-items: center; background: #ebe6fd; border-radius: 7px 7px 0 0; padding: 5px 7px; }
.vp-h span { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--action); }
.vp-h b { background: #fff; border-radius: 4px; padding: 0 5px; font-size: 11px; }
.vp-d.hoje .vp-h { background: var(--action); } .vp-d.hoje .vp-h span { color: #fff; }
.vp-f { border-bottom: 1px solid var(--ink); padding: 4px 1px 3px; min-height: 34px; }
.vp-f small { display: block; font-size: 8px; font-weight: 700; letter-spacing: .1em; color: var(--gray); }
.vp-f em { font-style: normal; font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; color: #3a2f8f; font-size: 11.5px; }
.vp-r { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; min-height: 25px; border-bottom: 1px solid var(--line); }
.vp-r.faixa { background: var(--soft); }
.vp-r time { font-size: 9px; color: var(--gray); font-variant-numeric: tabular-nums; }
.vp-r span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-r .mao { font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; color: #3a2f8f; }
.vp-r .ag { background: #ebe6fd; border-radius: 4px; padding: 1px 4px; color: var(--action); font-weight: 700; font-size: 10px; }
@media (max-width: 860px) {
  .v-mod, .v-mod.v-mod-2, .v-dois { grid-template-columns: 1fr; }
  .v-dois { gap: 40px; }
}
@media (max-width: 560px) { .v-pl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v-pl .vp-d:nth-child(3) { display: none; } }

/* destaques logo depois da capa: nota de aluguel e autônomo */
.v-novo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 34px 5.2% 0; }
.v-novo-c { display: grid; gap: 10px; align-content: start; background: var(--soft); border-radius: 18px; padding: 26px; border: 1px solid transparent; transition: border-color .2s; }
.v-novo-c:hover { border-color: var(--action); }
.v-novo-c h2 { font-size: clamp(26px, 2.4vw, 36px); }
.v-novo-c p { color: var(--gray); font-size: 14px; max-width: 520px; }
.v-novo-c b { color: var(--action); font-size: 14px; }
.v-novo-c .v-tag { justify-self: start; }
@media (max-width: 1000px) { .v-novo { grid-template-columns: 1fr; padding-top: 24px; } }

.v-lojas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.v-loja { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; }
.v-loja svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.v-loja.breve { background: #fff; color: var(--gray); border-color: var(--line); }
.v-loja em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--action); background: #ebe6fd; padding: 3px 7px; border-radius: 999px; }
.v-lojas.escuro { margin-top: 22px; }
.v-lojas.escuro .v-loja { background: #fff; color: var(--ink); border-color: #fff; }
.v-lojas.escuro .v-loja.breve { background: transparent; color: #d9d6e3; border-color: #ffffff40; }
.v-etapas { list-style: none; counter-reset: etapa; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; max-width: 600px; }
.v-etapas li { counter-increment: etapa; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; font-size: 14.5px; color: var(--gray); }
.v-etapas li::before { content: counter(etapa); grid-row: span 2; width: 30px; height: 30px; border-radius: 99px; background: var(--action); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.v-etapas b { color: var(--ink); font-size: 15.5px; }
@media (max-width: 760px) { footer > div { flex-wrap: wrap; justify-content: flex-start; gap: 10px 18px; } }

/* Barra fina do topo e login dos sistemas, no padrão dos portais de ERP (lista com linhas e seta, sem cartões) */
.v-util { display: flex; justify-content: flex-end; gap: 22px; padding: 0 5.2%; height: 32px; align-items: center; background: #fff; border-bottom: 1px solid #e8e8e8; font-size: 13px; color: #404040; }
.v-util a:hover { color: var(--action); }
.v-acesso { background: #fff; border-bottom: 1px solid #e8e8e8; }
.v-acesso-in { padding: 18px 5.2% 22px; }
.v-acesso-t { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #404040; margin: 0 0 12px; }
.v-acesso ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 20px; }
.v-acesso a, .v-login-l a { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 2px solid #e8e8e8; border-bottom: 2px solid #e8e8e8; color: #404040; transition: color .15s, border-color .15s; }
.v-acesso a { padding: 16px 0; font-size: 15px; }
.v-acesso i, .v-login-l i { flex: none; width: 18px; height: 12px; background: linear-gradient(var(--action), var(--action)) left center / 15px 2px no-repeat; position: relative; }
.v-acesso i::after, .v-login-l i::after { content: ''; position: absolute; right: 2px; top: 1px; width: 7px; height: 7px; border: solid var(--action); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.v-acesso a:hover, .v-login-l a:hover { color: var(--action); border-bottom-color: var(--action); }
.v-login { padding: 64px 5.2% 96px; }
.v-login h1, .v-login h2 { font-family: Grillus, Arial, sans-serif; }
.v-login h1 { font-size: clamp(32px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.02em; color: #404040; max-width: 900px; }
.v-login-sub { color: #62626f; font-size: 15px; margin: 14px 0 0; max-width: 620px; }
.v-login h2 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #404040; margin: 48px 0 18px; }
.v-login-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 30px; }
.v-login-l a { padding: 24px 0; }
.v-login-l a > b { font-size: 16px; font-weight: 400; flex: 1 1 auto; }
.v-login-l a > span { display: none; }
@media (min-width: 761px) { .v-login-l a { flex-wrap: wrap; } .v-login-l a > span { display: block; order: 3; width: 100%; font-size: 12.5px; color: #8a8795; margin-top: -6px; } }
@media (max-width: 1280px) { .v-acesso ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; } }
@media (max-width: 760px) {
  .v-util { padding: 0 22px; gap: 16px; font-size: 12px; overflow-x: auto; white-space: nowrap; }
  .v-acesso-in { padding: 16px 22px 18px; }
  .v-acesso ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
  .v-acesso a { padding: 13px 0; font-size: 14px; }
  .v-login { padding: 40px 22px 64px; }
  .v-login-l { grid-template-columns: 1fr; gap: 12px; }
  .v-login-l a { padding: 18px 0; }
  .nav-end .login { display: block; font-size: 11px; }
}

/* botão "Criar conta grátis" do topo: pergunta em qual sistema */
.v-criar summary.button{display:inline-flex;border:0;padding:9px 16px;color:#fff;gap:8px}
.v-criar summary.button::after{border-color:#fff}
.v-criar .v-criar-p{left:auto;right:0;width:360px}
.v-criar-t{margin:6px 12px 6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7d7a89}
.v-sis-p b em{font-style:normal;font-size:10.5px;font-weight:700;margin-left:6px;padding:2px 6px;border-radius:999px;background:#ebe6fd;color:#5633c7;vertical-align:1px}
@media (max-width:720px){.v-criar .v-criar-p{position:fixed;left:16px;right:16px;top:64px;width:auto}}
@media (max-width:720px){.v-criar summary.button{padding:8px 12px;font-size:13px;white-space:nowrap}.v-criar summary.button::after{display:none}.nav-end .login{display:none}}
@media (max-width:720px){.v-so-pc{display:none}}

/* ===== Ecossistema no topo da página inicial (11/11/2026) ===== */
/* Prévia da seção "ecossistema": uma esfera em violeta e grafite com os sistemas em volta, como etiquetas de vidro */
.v-eco{position:relative;overflow:hidden;padding:84px 5.2% 96px;background:radial-gradient(70% 60% at 50% 0%,#ffffff 0%,#f4f3f8 55%,#ebe8f4 100%);color:#19191d;text-align:center}
.v-eco-marca{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#19191d}
.v-eco-marca i{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#bba5ff,#7653f6 45%,#2a1a73 100%);box-shadow:0 6px 16px -6px #5633c7}
.v-eco h2{margin:18px auto 10px;max-width:760px;font-size:clamp(32px,5vw,52px);line-height:1.04}
.v-eco>p{margin:0 auto;max-width:560px;font-size:17px;color:#5b5869}
.v-eco-palco{position:relative;width:min(640px,100%);aspect-ratio:1/1;margin:42px auto 0}
.v-eco-esfera{position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle at 30% 26%,#a58cff 0%,#7653f6 22%,#4b2ad1 45%,#22125e 72%,#0d0920 100%);
  box-shadow:0 50px 90px -30px rgba(40,20,120,.55),inset -30px -40px 80px rgba(0,0,0,.45),inset 20px 24px 60px rgba(255,255,255,.12)}
.v-eco-esfera svg{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;animation:v-eco-gira 28s linear infinite}
.v-eco-esfera::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 70% 78%,rgba(166,236,122,.22),transparent 40%)}
@keyframes v-eco-gira{to{transform:rotate(360deg)}}
.v-eco-chip{position:absolute;display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;font-size:15px;font-weight:500;color:#19191d;white-space:nowrap;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);box-shadow:0 14px 34px -16px rgba(40,20,120,.45);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);transition:transform .25s ease,box-shadow .25s ease;animation:v-eco-boia 6s ease-in-out infinite}
.v-eco-chip:hover{transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(40,20,120,.55)}
.v-eco-chip svg{width:20px;height:20px;fill:none;stroke:#5633c7;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.v-eco-chip b{font-weight:600}
.v-eco-chip:nth-child(2n){animation-delay:-2s}.v-eco-chip:nth-child(3n){animation-delay:-4s}
@keyframes v-eco-boia{0%,100%{translate:0 0}50%{translate:0 -6px}}
.v-eco .c1{left:52%;top:3%}.v-eco .c2{left:72%;top:24%}.v-eco .c3{left:76%;top:50%}.v-eco .c4{left:66%;top:76%}
.v-eco .c8{left:36%;top:88%}.v-eco .c5{left:-2%;top:72%}.v-eco .c6{left:-8%;top:46%}.v-eco .c7{left:8%;top:18%}
.v-eco-pergunta{position:absolute;left:10%;top:52%;display:flex;align-items:center;gap:12px;padding:12px 22px 12px 12px;border-radius:999px;font-size:15px;color:#2a2933;
  background:linear-gradient(90deg,rgba(255,255,255,.86),rgba(255,255,255,.5));border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 34px -16px rgba(40,20,120,.45)}
.v-eco-pergunta i{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#bba5ff,#7653f6 45%,#2a1a73 100%);flex:none}
.v-eco-rodape{margin-top:34px;display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap}
@media (max-width:720px){
  .v-eco{padding:60px 16px 70px}
  .v-eco-palco{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center}
  .v-eco-esfera{position:relative;inset:auto;width:78vw;aspect-ratio:1/1;margin-bottom:22px}
  .v-eco-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .v-eco-chip{position:static;padding:10px 15px;font-size:14px;animation:none}
  .v-eco-pergunta{position:absolute;left:50%;top:58vw;transform:translateX(-50%);font-size:13px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.v-eco-esfera svg,.v-eco-chip{animation:none}}

/* faixa do White label na página inicial */
.v-wl-band { margin: 34px 5.2% 0; background: var(--ink); color: #fff; border-radius: 18px; padding: 34px clamp(22px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; }
.v-wl-band .eyebrow { color: #bba5ff; }
.v-wl-band h2 { font-size: clamp(28px, 3vw, 42px); margin: 10px 0 12px; color: #fff; }
.v-wl-band p { color: #d9d6e3; max-width: 560px; margin: 0; }
.v-wl-band-a { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: flex-end; }
.v-wl-band .text-link { color: #fff; }
@media (max-width: 1000px) { .v-wl-band { grid-template-columns: 1fr; } .v-wl-band-a { justify-content: flex-start; } }
.v-plan-grid.q4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .v-plan-grid.q4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .v-plan-grid.q4 { grid-template-columns: 1fr; } }
.v-plan-grid.q4 .v-preco { white-space: nowrap; font-size: clamp(34px, 3.1vw, 44px); }

/* chamada do Start para o Começo */
.v-start-up { display: block; margin: -8px 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--soft); color: var(--ink); font-size: 13.5px; line-height: 1.4; text-decoration: none; border: 1px solid transparent; }
.v-start-up b { color: var(--action); }
.v-start-up:hover { border-color: var(--action); }

/* ecossistema: o ERP no centro com os ramos; os outros sistemas à parte */
.v-eco-nucleo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;z-index:1;pointer-events:none}
.v-eco-nucleo b{font:400 clamp(26px,3.4vw,38px)/1.05 var(--v-serif);letter-spacing:-.02em}
.v-eco-nucleo span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#d9d0ff;line-height:1.35}
.v-eco-outros{margin:46px auto 0;max-width:980px}
.v-eco-ot{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5b5869}
.v-eco-sis-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.v-eco-sis{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid #e3e0ec;color:#19191d;text-align:left;text-decoration:none;transition:border-color .2s}
.v-eco-sis:hover{border-color:#7653f6}
.v-eco-sis svg{width:22px;height:22px;fill:none;stroke:#5633c7;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.v-eco-sis > span{display:grid;gap:2px;min-width:0}
.v-eco-sis b{font-size:15px;font-weight:600}
.v-eco-sis b em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5633c7;background:#ece7ff;border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:2px}
.v-eco-sis span span{font-size:13px;color:#5b5869}
@media (max-width:900px){.v-eco-sis-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.v-eco-sis-g{grid-template-columns:1fr}}

/* menu Sistemas: o Agro é ramo do ERP, um degrau para dentro */
.v-sis-p a.v-sis-ramo { margin-left: 26px; position: relative; }
.v-sis-p a.v-sis-ramo::before { content: ""; position: absolute; left: -14px; top: -6px; width: 10px; height: 28px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); border-bottom-left-radius: 6px; }