/* =============================================================
   MOTRONIX — SISTEMAS (Vextron e VexOS)
   Complemento de style.css. Só o que as três páginas de sistema
   usam e o design system ainda não tinha.

   Carregar SEMPRE depois de style.css: os tokens vêm de lá.
   ============================================================= */

/* -------------------------------------------------------------
   1. CABEÇALHO COM PAR DE PRODUTOS
   ------------------------------------------------------------- */

/* Logo do produto no cabeçalho da página dedicada. SVG com o texto
   em curvas: não depende da fonte carregar. */
.sis-logo {
  display: block;
  height: 52px;
  width: auto;
  margin-bottom: var(--s5);
}
/* O do Vextron é uma linha só, sem subtítulo: na mesma altura do VexOS
   o texto fica desproporcional ao lado. */
.sis-logo-vextron { height: 40px; }

/* -------------------------------------------------------------
   1b. TELAS — capturas reais do sistema
   ------------------------------------------------------------- */
.tela {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  background: var(--bg2);
}

.telas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.telas-grid figure { margin: 0; }
.telas-grid figcaption {
  margin-top: var(--s3);
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.55;
}
.telas-grid figcaption strong {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 2px;
}
@media (max-width: 900px) {
  .telas-grid { grid-template-columns: 1fr; max-width: 560px; }
}

/* -------------------------------------------------------------
   2. PAR — os dois produtos lado a lado, no índice
   ------------------------------------------------------------- */
.par-card h3 img {
  display: block;
  height: 40px;
  width: auto;
}
.par-card h3 img.logo-vextron { height: 30px; }
.par-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s5);
}

.par-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s6);
  transition: border-color var(--trans), transform var(--trans);
}
.par-card:hover { border-color: var(--border2); transform: translateY(-2px); }

.par-card-tipo {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s3);
}
.par-card h3 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}
.par-card > p {
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: var(--s5);
}
/* empurra o botão para a base: cartões de altura diferente ficam
   com a ação alinhada, que é o que o olho procura ao comparar */
.par-card .btn-row { margin-top: auto; }

.par-lista {
  list-style: none;
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.par-lista li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--text-2);
}
.par-lista .ck { color: var(--accent); flex: none; margin-top: 4px; }

/* -------------------------------------------------------------
   3. INTEGRAÇÃO — a faixa que explica como os dois se conversam
   ------------------------------------------------------------- */
.fluxo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--s4);
  margin-top: var(--s6);
}

.fluxo-passo {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
.fluxo-passo h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--s2);
}
.fluxo-passo p {
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.65;
}
.fluxo-passo .onde {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  margin-bottom: var(--s3);
}

.fluxo-seta {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* Na vertical a seta gira: apontar para o lado num empilhamento
   manda o olho para fora da tela. */
@media (max-width: 860px) {
  .fluxo { grid-template-columns: 1fr; }
  .fluxo-seta { transform: rotate(90deg); padding: var(--s1) 0; }
}

/* Ressalva embaixo do fluxo. Centralizada porque o cabeçalho da
   seção é centralizado — alinhada à esquerda ela fica órfã. */
.fluxo-nota {
  max-width: 620px;
  margin: var(--s6) auto 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.7;
  text-wrap: pretty;
}

/* -------------------------------------------------------------
   5. RECURSOS — grade de capacidades dentro da página do produto
   ------------------------------------------------------------- */
.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s4);
}
.rec-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
.rec-item .icon { color: var(--accent); margin-bottom: var(--s3); }
.rec-item h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--s2);
}
.rec-item p {
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.65;
}

/* -------------------------------------------------------------
   6. FORMATOS — lista densa de extensões aceitas
   ------------------------------------------------------------- */
.formatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.formato {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-2);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 10px;
}

/* Subtítulo do bloco de formatos, dentro de uma seção que já tem
   título próprio. */
.formatos-titulo {
  margin-top: var(--s8);
  margin-bottom: var(--s4);
}
.formatos-titulo h3 { font-size: 1.25rem; }

/* -------------------------------------------------------------
   7. PARA QUEM É / PARA QUEM NÃO É
   ------------------------------------------------------------- */
.publico {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s5);
}
.publico-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
.publico-col h3 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--s4);
}
.publico-col ul { list-style: none; display: grid; gap: var(--s3); }
.publico-col li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.6;
}
.publico-col li .icon { flex: none; margin-top: 3px; }
.publico-sim h3 .icon, .publico-sim li .icon { color: var(--ok); }
.publico-nao h3 .icon, .publico-nao li .icon { color: var(--text-muted); }

/* -------------------------------------------------------------
   8. CHAMADA DO TESTE
   ------------------------------------------------------------- */
.teste {
  background: var(--bg2);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  padding: var(--s7) var(--s6);
  text-align: center;
}
.teste h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: var(--s3);
  text-wrap: balance;
}
.teste p {
  max-width: 560px;
  margin: 0 auto var(--s5);
  color: var(--text-2);
  line-height: 1.7;
  text-wrap: pretty;
}
.teste .btn-row { justify-content: center; }

.teste-notas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}
.teste-nota {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.8125rem;
  color: var(--text-dim);
}
.teste-nota .icon { color: var(--text-muted); flex: none; }

/* -------------------------------------------------------------
   9. REQUISITOS
   ------------------------------------------------------------- */
.req-lista {
  list-style: none;
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.req-lista li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}
.req-lista li:last-child { border-bottom: 0; }
.req-lista .rot {
  min-width: 180px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 3px;
}
.req-lista .val { color: var(--text-2); flex: 1; }

/* Print da galeria abre em tamanho real: em três colunas a tela fica
   pequena demais para ler, e quem se interessa quer ver de perto. */
.telas-grid a { display: block; border-radius: var(--r-lg); }
.telas-grid a .tela { transition: border-color var(--trans), transform var(--trans); }
.telas-grid a:hover .tela { border-color: var(--accent-line); transform: translateY(-2px); }
.telas-grid a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Tela em destaque, largura inteira da coluna: usada quando a captura
   é o argumento principal e perde o sentido reduzida a um terço. */
.tela-larga { margin: 0 0 var(--s7); }
.tela-larga figcaption {
  margin-top: var(--s3);
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 720px;
}
.tela-larga figcaption strong { color: var(--text); font-weight: 600; }