/* =============================================================================
   R2Tag — site institucional (landing pública em "/")

   Folha independente do app.css de propósito: a landing não usa nada do layout do
   ERP (menu lateral, topbar, tabelas), e quem chega pelo Google não deveria baixar
   a folha inteira do sistema. Os tokens de cor são os mesmos da marca, repetidos
   aqui para o site continuar de pé se o ERP trocar de tema.

   Organização:
     1. Tokens          6. Produtos
     2. Base            7. Especificações
     3. Cabeçalho       8. Processo e segmentos
     4. Herói           9. Contato e rodapé
     5. Seções         10. Movimento e responsivo
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --s-n0:#ffffff;
  --s-n25:#fafbfd;
  --s-n50:#f2f5f9;
  --s-n100:#e7ecf3;
  --s-n200:#d8dfe9;
  --s-n300:#bfc9d6;
  --s-n500:#5f6d80;
  --s-n600:#4a576a;
  --s-n700:#354155;
  --s-n900:#111a2b;

  /* Acento: o azul da logo. O claro só aparece sobre fundo escuro. */
  --s-a:#005bfa;
  --s-a-forte:#004ad0;
  --s-a-claro:#7aabff;
  --s-a-fraco:#e8f0ff;

  --s-escuro:#041634;
  --s-escuro-2:#0a2148;

  --s-ink:var(--s-n900);
  --s-ink-2:var(--s-n700);
  --s-muted:var(--s-n500);
  --s-line:var(--s-n200);
  --s-line-soft:var(--s-n100);

  --s-r:10px; --s-r-lg:16px; --s-r-xl:24px; --s-r-full:999px;

  --s-sh-1:0 1px 2px rgba(17,26,43,.05);
  --s-sh-2:0 2px 4px rgba(17,26,43,.05), 0 12px 28px -12px rgba(17,26,43,.16);
  --s-sh-3:0 20px 60px -24px rgba(4,22,52,.45);

  --s-sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --s-mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,"Roboto Mono",monospace;

  --s-max:1180px;
  --s-gutter:24px;
  --s-topo:66px;
  --s-t:220ms cubic-bezier(.4,0,.2,1);
}

/* -----------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--s-topo) + 16px); }

body.site {
  margin:0;
  background:var(--s-n0);
  color:var(--s-ink);
  font-family:var(--s-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.site h1,.site h2,.site h3,.site h4 { margin:0; line-height:1.12; letter-spacing:-.028em; font-weight:660; }
.site p { margin:0; }
.site ul { margin:0; padding:0; list-style:none; }
.site svg { max-width:100%; }
/*
  O :where() zera a especificidade do seletor de elemento. Sem ele, ".site a" (0,1,1) vence
  ".btn-primario" (0,1,0) e todo botao que e link fica com texto ciano sobre fundo ciano —
  o rotulo some. Com o :where, a cor de link e so o padrao, e qualquer componente a substitui.
*/
.site :where(a) { color:var(--s-a); text-decoration:none; text-underline-offset:3px; }
.site :where(a):hover { text-decoration:underline; }
.site :focus-visible { outline:2px solid var(--s-a-claro); outline-offset:3px; border-radius:6px; }

.envelope { width:100%; max-width:var(--s-max); margin:0 auto; padding-inline:var(--s-gutter); }
/* Seções de leitura corrida (dúvidas) num envelope mais estreito: linha longa cansa */
.envelope-estreito { max-width:820px; }

/* Atalho de teclado: some da tela até receber foco */
.pular {
  position:absolute; left:-9999px; top:8px; z-index:100;
  padding:10px 17px; border-radius:var(--s-r-full);
  background:#fff; color:var(--s-escuro); font-size:14px; font-weight:600;
}
.pular:focus { left:12px; text-decoration:none; }

.mono { font-family:var(--s-mono); font-variant-numeric:tabular-nums; }

/* Etiqueta de seção: o passo tipográfico menor, em caixa alta espaçada */
.rotulo {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--s-mono); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--s-a);
}
.rotulo::before { content:""; width:18px; height:1px; background:currentColor; opacity:.55; }
.rotulo-claro { color:var(--s-a-claro); }

.titulo-secao { font-size:clamp(27px,3.6vw,40px); margin-top:14px; max-width:20ch; }
.texto-secao  { color:var(--s-muted); font-size:17px; margin-top:14px; max-width:58ch; }

/* botões ------------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:var(--s-r-full);
  font-size:15px; font-weight:600; font-family:inherit; line-height:1;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--s-t), color var(--s-t), border-color var(--s-t),
             transform var(--s-t), box-shadow var(--s-t);
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn svg { width:17px; height:17px; flex:none; }

.btn-primario { background:var(--s-a); color:#fff; box-shadow:0 6px 18px -8px rgba(0,91,250,.6); }
.btn-primario:hover { background:var(--s-a-forte); color:#fff; box-shadow:0 10px 24px -10px rgba(0,91,250,.7); }

.btn-claro { background:#fff; color:var(--s-escuro); }
.btn-claro:hover { background:var(--s-a-fraco); color:var(--s-escuro); }

.btn-contorno { border-color:var(--s-line); color:var(--s-ink-2); background:#fff; }
.btn-contorno:hover { border-color:var(--s-a); color:var(--s-a); background:var(--s-a-fraco); }

.btn-fantasma { border-color:rgba(255,255,255,.22); color:#fff; background:transparent; }
.btn-fantasma:hover { border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.07); color:#fff; }

.btn-sm { padding:10px 17px; font-size:14px; }

/* -----------------------------------------------------------------------------
   3. Cabeçalho
   -------------------------------------------------------------------------- */
.site-topo {
  position:sticky; top:0; z-index:50;
  height:var(--s-topo);
  display:flex; align-items:center;
  background:rgba(4,22,52,.86);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background var(--s-t), box-shadow var(--s-t);
}
/* Depois de rolar, o cabeçalho fecha: sobre seção branca o vidro translúcido some */
.site-topo.rolado { background:rgba(4,22,52,.97); box-shadow:0 10px 30px -22px rgba(0,0,0,.95); }

.site-topo .envelope { display:flex; align-items:center; gap:18px; }

/* A logo em versão negativa (branco + azul): o topo e o rodapé são marinho */
.marca-site { display:inline-flex; align-items:center; color:#fff; flex:none; }
.marca-site:hover { text-decoration:none; }
.marca-site img { display:block; height:34px; width:auto; }
.marca-rodape img { height:40px; }

.site-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.site-nav a {
  padding:9px 13px; border-radius:var(--s-r-full);
  color:#bac6da; font-size:14.5px; font-weight:500;
  transition:color var(--s-t), background var(--s-t);
}
.site-nav a:hover { color:#fff; background:rgba(255,255,255,.08); text-decoration:none; }

.site-acoes { display:flex; align-items:center; gap:14px; margin-left:10px; }
/* O acesso ao ERP é link, não botão: o botão do topo pertence a quem vai comprar */
.link-sistema { color:#bac6da; font-size:13.5px; white-space:nowrap; }
.link-sistema:hover { color:#fff; }
.nav-sistema { display:none; }

.abre-nav {
  display:none;
  width:40px; height:40px; border-radius:var(--s-r);
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:#fff; cursor:pointer;
}
.abre-nav svg { width:20px; height:20px; }

/* -----------------------------------------------------------------------------
   4. Herói
   -------------------------------------------------------------------------- */
.heroi {
  position:relative; overflow:hidden;
  background:
    radial-gradient(88% 110% at 84% -12%, rgba(0,91,250,.30) 0%, transparent 58%),
    linear-gradient(160deg,#041634 0%,#062050 54%,#0a2f6e 100%);
  background-color:var(--s-escuro);
  color:#fff;
  padding-block:clamp(52px,8vw,100px) clamp(60px,9vw,108px);
}
/* Trama de etiquetas ao fundo: passo regular, como a bobina passando na máquina */
.heroi::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:112px 88px;
  -webkit-mask-image:radial-gradient(120% 95% at 78% 8%, #000 18%, transparent 74%);
  mask-image:radial-gradient(120% 95% at 78% 8%, #000 18%, transparent 74%);
}
.heroi > * { position:relative; z-index:1; }

.heroi-grade {
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,5vw,60px); align-items:center;
}

.heroi h1 {
  font-size:clamp(34px,5.4vw,57px);
  letter-spacing:-.038em; line-height:1.06;
  margin-top:18px; max-width:15ch;
}
.heroi h1 em { font-style:normal; color:var(--s-a-claro); }

.heroi-texto { color:#aebbd2; font-size:clamp(16px,1.6vw,18.5px); margin-top:20px; max-width:50ch; }

.heroi-botoes { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

.heroi-marcas { display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; }
.heroi-marcas span {
  font-family:var(--s-mono); font-size:11.5px; letter-spacing:.05em;
  padding:6px 12px; border-radius:var(--s-r-full);
  background:rgba(255,255,255,.06); color:#b3c1d8;
  border:1px solid rgba(255,255,255,.09);
}

/* arte do herói ------------------------------------------------------------ */
.heroi-arte { position:relative; }
.heroi-arte svg { width:100%; height:auto; display:block; filter:drop-shadow(0 28px 56px rgba(0,0,0,.45)); }

/* Cartão flutuante sobre a arte: o dado técnico que o concorrente não mostra */
.arte-chip {
  position:absolute; left:-4px; bottom:22px;
  display:grid; gap:2px;
  padding:12px 16px; border-radius:var(--s-r);
  background:rgba(4,18,44,.9);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--s-sh-3);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.arte-chip b { font-family:var(--s-mono); font-size:16px; color:var(--s-a-claro); letter-spacing:-.01em; }
.arte-chip span { font-size:11.5px; color:#a0b0cb; }

/* faixa de números --------------------------------------------------------- */
.faixa {
  border-top:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.22);
  padding-block:22px;
}
.faixa-grade { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.faixa-item b { display:block; font-size:22px; font-weight:680; letter-spacing:-.03em; color:#fff;
                font-variant-numeric:tabular-nums; }
.faixa-item span { display:block; font-size:12.5px; color:#a7b6cf; margin-top:3px; }

/* -----------------------------------------------------------------------------
   5. Seções
   -------------------------------------------------------------------------- */
.secao { padding-block:clamp(54px,7.5vw,94px); }
.secao-clara { background:var(--s-n50); border-block:1px solid var(--s-line-soft); }
.secao-escura { background:var(--s-escuro); color:#fff; }
.secao-escura .titulo-secao { color:#fff; }
.secao-escura .texto-secao { color:#aebbd2; }

.secao-cabecalho { max-width:62ch; margin-bottom:clamp(30px,4vw,46px); }
.secao-cabecalho-centro { margin-inline:auto; text-align:center; }
.secao-cabecalho-centro .titulo-secao,
.secao-cabecalho-centro .texto-secao { margin-inline:auto; }

/* -----------------------------------------------------------------------------
   6. Produtos
   -------------------------------------------------------------------------- */
.produtos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }

.produto {
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--s-line);
  border-radius:var(--s-r-lg); padding:26px 24px 24px;
  box-shadow:var(--s-sh-1);
  transition:transform var(--s-t), box-shadow var(--s-t), border-color var(--s-t);
  overflow:hidden;
}
/* Fio de acento no topo: entra no hover, como a tinta entrando no clichê */
.produto::before {
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--s-a-claro),var(--s-a));
  transform:scaleX(0); transform-origin:left; transition:transform var(--s-t);
}
.produto:hover { transform:translateY(-4px); box-shadow:var(--s-sh-2); border-color:var(--s-n300); }
.produto:hover::before { transform:scaleX(1); }

.produto-icone {
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--s-a-fraco); color:var(--s-a-forte); margin-bottom:18px;
}
.produto-icone svg { width:23px; height:23px; }

.produto-para {
  display:block; font-family:var(--s-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--s-a); margin-bottom:8px;
}
.produto h3 { font-size:20px; letter-spacing:-.026em; }
.produto > p { color:var(--s-muted); font-size:14.5px; margin-top:10px; }

.produto-lista { margin-top:18px; display:grid; gap:9px; border-top:1px solid var(--s-line-soft); padding-top:18px; }
.produto-lista li { display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--s-ink-2); }
.produto-lista svg { width:15px; height:15px; margin-top:4px; color:var(--s-a); flex:none; }

.produto-pe { margin-top:auto; padding-top:20px; }
.produto-pe a { font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.produto-pe svg { width:14px; height:14px; transition:transform var(--s-t); }
.produto-pe a:hover svg { transform:translateX(3px); }

/* linha secundária: o que a fábrica revende sem fabricar */
.revenda-titulo { margin-top:36px; font-size:14.5px; color:var(--s-muted); }
.revenda { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:14px; }
.revenda-item {
  display:flex; align-items:center; gap:12px;
  padding:15px 17px; border-radius:var(--s-r);
  background:#fff; border:1px solid var(--s-line);
  font-size:14.5px; font-weight:560; color:var(--s-ink-2);
}
.revenda-item svg { width:19px; height:19px; color:var(--s-a); flex:none; }

/* -----------------------------------------------------------------------------
   7. Qual etiqueta escolher
   -------------------------------------------------------------------------- */
.casos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.caso {
  padding:22px 22px 24px; border-radius:var(--s-r-lg);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
}
.caso b { display:block; font-size:16px; font-weight:640; letter-spacing:-.018em; color:#fff; }
.caso span { display:block; font-size:14px; color:#aebbd2; margin-top:9px; }
/* O último cartão é a saída para quem não se reconheceu em nenhum caso da lista */
.caso-destaque { background:rgba(0,91,250,.16); border-color:rgba(122,171,255,.45); }

/* A ficha técnica não sumiu — virou uma linha discreta, que informa sem dominar */
.chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:28px; }
.chips-titulo {
  font-family:var(--s-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#8e9fbd; margin-right:4px;
}
.chips span:not(.chips-titulo) {
  font-size:13px; padding:6px 12px; border-radius:var(--s-r-full);
  background:rgba(255,255,255,.055); color:#c6d1e3; border:1px solid rgba(255,255,255,.08);
}

/* -----------------------------------------------------------------------------
   8. Processo e segmentos
   -------------------------------------------------------------------------- */
.passos { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.passos-3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.passo { position:relative; padding-top:30px; }
/* A linha que liga um passo ao próximo — some no último, que não liga a nada */
.passo::after {
  content:""; position:absolute; top:11px; left:32px; right:-20px; height:1px;
  background:linear-gradient(90deg,var(--s-line) 55%,transparent);
}
.passo:last-child::after { display:none; }
.passo-num {
  position:absolute; top:0; left:0;
  width:23px; height:23px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--s-a); color:#fff;
  font-family:var(--s-mono); font-size:11px; font-weight:700;
}
.passo h3 { font-size:16.5px; margin-top:10px; }
.passo p { font-size:14px; color:var(--s-muted); margin-top:8px; }

.segmentos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.segmento {
  display:flex; gap:14px; align-items:flex-start;
  padding:20px; border-radius:var(--s-r-lg);
  background:#fff; border:1px solid var(--s-line);
}
.segmento svg { width:21px; height:21px; color:var(--s-a); flex:none; margin-top:2px; }
.segmento b { display:block; font-size:15.5px; font-weight:620; letter-spacing:-.015em; }
.segmento span { display:block; font-size:13.5px; color:var(--s-muted); margin-top:4px; }

/* dúvidas: <details> nativo, sem JavaScript e sem biblioteca de acordeão */
.faq { display:grid; gap:10px; }
.faq details {
  border:1px solid var(--s-line); border-radius:var(--s-r);
  background:#fff; overflow:hidden; transition:border-color var(--s-t);
}
.faq details[open] { border-color:var(--s-n300); }
.faq summary {
  list-style:none; cursor:pointer; position:relative;
  padding:16px 50px 16px 18px;
  font-size:16px; font-weight:620; letter-spacing:-.015em; color:var(--s-ink);
}
.faq summary::-webkit-details-marker { display:none; }
/* Seta em CSS: gira ao abrir, e não gasta um ícone do sprite */
.faq summary::after {
  content:""; position:absolute; right:21px; top:50%;
  width:8px; height:8px; margin-top:-6px;
  border-right:2px solid var(--s-a); border-bottom:2px solid var(--s-a);
  transform:rotate(45deg); transition:transform var(--s-t);
}
.faq details[open] summary::after { transform:rotate(-135deg); margin-top:-2px; }
.faq summary:hover { color:var(--s-a); }
.faq details > div { padding:0 18px 18px; }
.faq p { font-size:14.5px; color:var(--s-muted); }

/* diferenciais, em fundo escuro */
.diferenciais { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.diferencial { padding:26px 24px; border-radius:var(--s-r-lg);
               background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); }
.diferencial-marca { font-family:var(--s-mono); font-size:11.5px; letter-spacing:.12em;
                     text-transform:uppercase; color:var(--s-a-claro); }
.diferencial h3 { font-size:18px; color:#fff; margin-top:12px; }
.diferencial p { font-size:14.5px; color:#aebbd2; margin-top:10px; }

/* -----------------------------------------------------------------------------
   9. Contato e rodapé
   -------------------------------------------------------------------------- */
.contato {
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,54px); align-items:center;
  padding:clamp(30px,4.5vw,52px);
  border-radius:var(--s-r-xl);
  background:
    radial-gradient(80% 120% at 88% 0%, rgba(0,91,250,.28) 0%, transparent 60%),
    linear-gradient(150deg,#041634,#0a2b63);
  color:#fff;
  box-shadow:var(--s-sh-3);
}
.contato h2 { font-size:clamp(25px,3.2vw,35px); max-width:18ch; margin-top:14px; }
.contato > div > p { color:#aebbd2; margin-top:14px; max-width:46ch; }

.contato-botoes { margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }

.contato-canais { display:grid; gap:12px; }
.canal {
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:var(--s-r);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:#fff; transition:background var(--s-t), border-color var(--s-t);
}
.canal:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); text-decoration:none; }
.canal svg { width:20px; height:20px; color:var(--s-a-claro); flex:none; }
.canal small { display:block; font-family:var(--s-mono); font-size:10.5px; letter-spacing:.12em;
               text-transform:uppercase; color:#a7b6cf; }
.canal b { display:block; font-size:15.5px; font-weight:600; margin-top:2px; }

.site-rodape { background:var(--s-escuro); color:#9dadc8; padding-block:44px 30px; font-size:13.5px; }
.rodape-grade { display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:32px; }
.rodape-grade h3 { font-family:var(--s-mono); font-size:11px; font-weight:600; letter-spacing:.14em;
                   text-transform:uppercase; color:#8e9fbd; margin-bottom:14px; }
.rodape-grade li { margin-bottom:8px; }
.rodape-grade a { color:#b3c1d8; }
.rodape-grade a:hover { color:#fff; }
.rodape-sobre p { margin-top:14px; max-width:42ch; line-height:1.65; }
.rodape-linha {
  margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:12.5px; color:#8e9fbd;
}

/* -----------------------------------------------------------------------------
   10. Movimento e responsivo
   -------------------------------------------------------------------------- */
/* Entrada ao rolar. O bloco começa visível e só é escondido quando há JavaScript
   (classe "js" no <html>), para quem está sem script ler a página inteira. */
.js .revelar { opacity:0; transform:translateY(14px); }
.js .revelar.visivel { opacity:1; transform:none;
                       transition:opacity 560ms ease, transform 560ms cubic-bezier(.22,.9,.28,1); }

@media (max-width:1000px) {
  .heroi-grade { grid-template-columns:minmax(0,1fr); }
  .heroi-arte { order:-1; max-width:540px; }
  .produtos, .segmentos, .diferenciais, .casos { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .passos, .passos-3 { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:30px; }
  .passo:nth-child(2n)::after { display:none; }
  .revenda { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contato { grid-template-columns:minmax(0,1fr); }
  .rodape-grade { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
  :root { --s-gutter:18px; }

  /* A navegação vira gaveta: a barra fica só com marca, botão e "Entrar" */
  /* no celular: marca à esquerda, orçamento e menu à direita — o menu por último, onde o polegar alcança */
  .abre-nav { display:inline-flex; order:3; flex:none; }
  .site-nav {
    position:fixed; inset:var(--s-topo) 0 auto;
    flex-direction:column; align-items:stretch; gap:2px; margin-left:0;
    padding:14px var(--s-gutter) 22px;
    background:rgba(4,22,52,.98);
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 24px 40px -28px rgba(0,0,0,.9);
  }
  .site-nav[hidden] { display:none; }
  .site-nav a { padding:13px 12px; font-size:16px; border-radius:var(--s-r); }
  .site-acoes { margin-left:auto; order:2; }
  /* "Entrar no sistema" não cabe no topo estreito: vai para dentro da gaveta */
  .site-acoes .link-sistema { display:none; }
  .nav-sistema { display:block !important; border-top:1px solid rgba(255,255,255,.1); margin-top:6px; padding-top:16px !important; }
  .site-acoes .btn-sm { padding:9px 14px; }

  .faixa-grade { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
  .produtos, .segmentos, .diferenciais, .casos, .passos, .passos-3, .revenda,
  .rodape-grade { grid-template-columns:minmax(0,1fr); }
  .passo::after { display:none; }
  .arte-chip { left:auto; right:8px; bottom:8px; }
  .titulo-secao, .texto-secao { max-width:none; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .js .revelar { opacity:1; transform:none; }
  .btn:hover, .produto:hover { transform:none; }
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}