/* COMPARATIVO · CONTAINER 03 · TABELA COMPARATIVA (único container gráfico) — v0.66.0
   Fundo aurora animado por CSS (_shared/05-aurora.css, variante bl). Ajuste: --uos-cmt-veil (véu de contraste, p.ex. rgba(255,255,255,.55)).
   Tabela real. Acima de 900px: grade de 5 colunas. Até 900px: cada linha vira um bloco com o rótulo da coluna (data-label).
   Nada depende só de cor: a coluna uOS tem cabeçalho preenchido e o texto forte está em negrito. */
.uos-cmp-table {
  --uos-cmt-veil: rgba(255, 255, 255, 0);
  background:
    linear-gradient(var(--uos-cmt-veil), var(--uos-cmt-veil)),
    var(--uos-aurora-grain),
    var(--uos-aurora-bl),
    var(--uos-sec-bg);
  background-blend-mode: normal, soft-light, normal;
  animation: var(--uos-aurora-motion);
}

.uos-cmp-table__wrap {
  margin-top: clamp(24px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid var(--uos-line);
  border-radius: var(--hm-radius);
  background: var(--uos-white);
}

.uos-cmp-table__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.uos-cmp-table__table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.uos-cmp-table__table th,
.uos-cmp-table__table td {
  padding: 16px clamp(12px, 1.4vw, 22px);
  border-top: 1px solid var(--uos-line);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}
.uos-cmp-table__table thead th {
  border-top: 0;
  background: var(--uos-black);
  color: var(--uos-white);
  font-size: 0.875rem;
  font-weight: 600;
}
.uos-cmp-table__table thead th.is-uos { background: var(--uos-orange); color: var(--uos-black); }
.uos-cmp-table__table tbody th { width: 20%; color: var(--uos-black); font-weight: 600; }
.uos-cmp-table__table td { color: var(--uos-gray-800); }
.uos-cmp-table__table td strong { color: var(--uos-black); font-weight: 600; }
.uos-cmp-table__table td.is-uos { background: rgba(254, 135, 36, 0.12); }

@media (max-width: 900px) {
  .uos-cmp-table__table,
  .uos-cmp-table__table tbody,
  .uos-cmp-table__table tr,
  .uos-cmp-table__table th,
  .uos-cmp-table__table td { display: block; width: auto; }
  .uos-cmp-table__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .uos-cmp-table__table tbody tr { border-top: 1px solid var(--uos-line); }
  .uos-cmp-table__table tbody tr:first-child { border-top: 0; }
  .uos-cmp-table__table tbody th { width: auto; padding: 18px 18px 6px; border-top: 0; font-size: 1.0625rem; }
  .uos-cmp-table__table td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding: 8px 18px; border-top: 0; }
  .uos-cmp-table__table td:last-child { padding-bottom: 18px; }
  .uos-cmp-table__table td::before { color: var(--uos-red); content: attr(data-label); font-size: 0.8125rem; font-weight: 600; }
  .uos-cmp-table__table td.is-uos { margin-top: 4px; }
  .uos-cmp-table__table td.is-uos::before { color: var(--uos-black); }
}
@media (max-width: 420px) {
  .uos-cmp-table__table td { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Nota abaixo da tabela: faixa de papel para manter o contraste sobre o aurora (principalmente no celular). */
.uos-main .uos-cmp-table .uos-sec__note--center {
  width: fit-content;
  max-width: min(48em, 100%);
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(240, 238, 233, 0.88);
}