/* PLEXOR — util.css (M1 · extração dos estilos inline `style="…"`).
   Cada classe reproduz EXATAMENTE um padrão inline que antes ficava repetido
   nas páginas. Objetivo: mesma aparência (DOM/render idêntico), sem inline,
   consistência entre PT/EN/ES e menos dívida de manutenção. NÃO altera layout.
   Referenciado via asset_v() no <head> logo após style.css.
   Nomes: u-*  = utilitário genérico (reaproveitável);
          demais = componente/semântico do próprio site.
   Elaborado com suporte de IA — Revisado por [Nome do Responsável]. */

/* ── Cor de texto ── (67× color: var(--accent); 8+1× #fff/#c8ff00) */
.u-accent { color: var(--accent); }
.u-accent-fb { color: var(--accent, #C8FF00); } /* politica-privacidade.php:207 */
.u-white-txt { color: var(--white); }
.u-fff { color: #fff; }

/* ── Fração de tamanho de heading ── (span dentro de <hN>) */
.u-em-055 { font-size: 0.55em; }  /* produtos/plx-a*.php */
.u-em-045 { font-size: 0.45em; }

/* ── Espaçamentos de seção (padding/margin utilitários) ── */
.u-pb-0 { padding-bottom: 0; }
.u-pt-0 { padding-top: 0; }
.u-pt-3rem { padding-top: 3rem; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-28 { margin-bottom: 28px; }
.u-mb-40 { margin-bottom: 40px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-32 { margin-top: 32px; }
.u-pb0-pt8 { padding-top: 8px; padding-bottom: 0; }
.u-pt0-pb80 { padding-top: 0; padding-bottom: 80px; }
.u-maxw-680 { max-width: 680px; }

/* ── Delays de revelação (.r) ── (transition-delay reutilizado dezenas de vezes) */
.u-delay-0    { transition-delay: 0s; }
.u-delay-005  { transition-delay: 0.05s; }
.u-delay-01   { transition-delay: 0.1s; }
.u-delay-015  { transition-delay: 0.15s; }
.u-delay-02   { transition-delay: 0.2s; }
.u-delay-025  { transition-delay: 0.25s; }
.u-delay-03   { transition-delay: 0.3s; }
.u-delay-04   { transition-delay: 0.4s; }
.u-delay-05   { transition-delay: 0.5s; }

/* ── Acessibilidade / ocultação ── */
.u-visually-hidden { /* rótulo p/ leitor de tela (15×) */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.u-offscreen { /* honeypot fora da tela (6×) */
  position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none;
}

/* ── Imagens ── */
.u-img-fluid { display: block; width: 100%; height: auto; } /* plataforma.php:569 */

/* ── Barras de progresso IAQ (larguras fixas do gráfico plx-a500) ── */
.iaq-w-40 { width: 40%; }
.iaq-w-48 { width: 48%; }
.iaq-w-55 { width: 55%; }
.iaq-w-62 { width: 62%; }

/* ════════ Componentes / padrões semânticos ════════ */

/* Chip "Onde é usado" — repetido 45× em produtos.* */
.usage-chip {
  padding: 4px 10px;
  border: 1px solid var(--border2);
  font-size: 9px;
  color: var(--gray2);
}
.usage-chip-row { /* wrapper: margin-top: 8px; display:flex; flex-wrap; gap:8px */
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.usage-chip-label { /* "Onde é usado" — margin-top:16px; 9px uppercase gray */
  margin-top: 16px;
  font-size: 9px;
  color: var(--gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Faixa de estatísticas do hero de produtos */
.prod-stats {
  display: flex;
  gap: 0;
  margin-top: 40px;
  border: 1px solid var(--border);
}
.prod-stat {
  padding: 16px 28px;
  border-right: 1px solid var(--border);
}
.prod-stat:last-child { border-right: none; } /* substitui a célula sem border-right */
.prod-stat-num {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
}
.prod-stat-label {
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 4px;
}

/* Cabeçalho de família de produtos */
.prod-family-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.prod-family-title {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.prod-family-desc {
  font-size: 12px;
  color: var(--gray);
  max-width: 480px;
  line-height: 1.7;
  text-align: right;
}
.prod-family-desc-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--gray2);
}

/* Linha de produto em desenvolvimento (esmaecida, borda tracejada) */
.prod-row-dev {
  opacity: 0.55;
  border-style: dashed;
  pointer-events: auto;
}

/* Bloco "Serviços opcionais" no fim da lista de produtos */
.prod-optional {
  padding: 32px 48px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.prod-optional-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}
.prod-optional-items {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.prod-optional-title {
  font-size: 11px;
  color: var(--white);
  font-weight: 500;
  margin-bottom: 3px;
}
.prod-optional-sub {
  font-size: 10px;
  color: var(--gray);
}

/* Rodapé informativo da página de produtos (ISO / legenda) */
.prod-foot {
  padding: 40px 48px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.prod-foot-note {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
}
.prod-foot-legend {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gray2);
  margin-top: 4px;
}

/* Nota informativa (planos da plataforma etc.) */
.plan-note {
  font-size: 11px;
  color: var(--gray);
  line-height: 1.5;
  margin-top: 14px;
}

/* ── Nota/legenda de rodapé de página de solução/plataforma ── */
.note-center {
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  color: var(--gray);
  margin-top: 14px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Contato / Demo (formulários) ── */
.contact-mail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.u-icon-dim { opacity: .55; flex-shrink: 0; }
.form-label-opt { color: #444; font-size: 10px; } /* "(opcional)" */
.u-cursor-pointer { cursor: pointer; }
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--gray);
  line-height: 1.5;
}
.consent-row-demo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 8px;
}
.consent-check {
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.consent-check-demo {
  margin-top: 3px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.consent-text-demo {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.55;
}
.consent-link {
  color: var(--accent);
  text-decoration: underline;
}
.btn-fullwidth { width: 100%; justify-content: center; }
.form-status { /* mensagem de retorno do envio (oculta até JS mostrar) */
  display: none;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0.03em;
}
.form-hint-center {
  font-size: 9px;
  color: var(--gray);
  letter-spacing: 0.1em;
  text-align: center;
}

/* ── Eyebrow/label mono centralizado ── */
.mono-eyebrow-center {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gray);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.mono-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.mono-note-box {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--gray);
  line-height: 1.6;
}
.u-c8ff00 { color: #c8ff00; }

/* ── FAQ / textos auxiliares ── */
.faq-hint {
  font-size: 12px;
  color: var(--gray);
  margin-top: 12px;
  line-height: 1.5;
}

/* ── Home ── */
.badge-mono {
  display: inline-block;
  background: rgba(200, 255, 0, 0.08);
  border: 1px solid rgba(200, 255, 0, 0.25);
  border-radius: 4px;
  padding: 6px 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.setor-chip-dashed { border-style: dashed; color: var(--gray); }
.center-btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Sublinha de valor com destaque em branco (sobre.php) ── */
.u-inline-white { font-style: normal; color: var(--white); }
.u-inline-accent { font-style: normal; color: var(--accent); }

/* ── Tag "→ Próximo passo" com fundo translúcido (soluções) ── */
.tag-dim {
  background: #0000001f;
  color: var(--border);
  margin-bottom: 28px;
}

/* ── Nav: casca translúcida do dropdown/mega (includes/nav.php) ── */
.nav-wrap-bg { background: rgba(10, 10, 10, 0.9); }

/* ── Footer: faixa de links + links (includes/footer.php) ── */
.foot-links {
  padding: 12px 48px; /* mantém aparência atual (M3 sugere var(--page-pad); mudança de layout fora do escopo desta refatoração) */
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  border-top: 1px solid var(--border);
}
.foot-link {
  color: var(--gray);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.foot-link-cta {
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.foot-about-link { color: var(--gray); text-decoration: none; }