/* ==========================================================================
   Frasco Digital — documento de texto longo (política, termos)
   Depende de styles.css: tokens, fontes, base, .wrap, .rotulo, .rodape, .btn
   ========================================================================== */

.doc-topo {
  border-bottom: 1px solid var(--hairline);
  padding: 132px 0 56px;
}
.doc-topo h1 {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 500;
  line-height: 1.2;
  margin-top: 14px;
}
.doc-lead {
  color: var(--texto-2);
  font-size: 15px;
  max-width: 620px;
  margin-top: 18px;
}
.doc-versao {
  display: inline-block;
  margin-top: 26px;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  background: var(--vidro);
  color: var(--texto-2);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  --ch: var(--chanfro-s);
}

/* --- Sumário --------------------------------------------------------------- */
.doc-sumario {
  border-bottom: 1px solid var(--hairline);
  padding: 44px 0;
}
.doc-sumario ol {
  list-style: none;
  counter-reset: sum;
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 32px;
}
.doc-sumario li { counter-increment: sum; }
.doc-sumario a {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  color: var(--texto-2);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-2);
  transition: color var(--t-hover) ease;
}
.doc-sumario a::before {
  content: counter(sum, decimal-leading-zero);
  color: var(--apoio);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .doc-sumario a:hover { color: var(--branco); }
}
.doc-sumario a:focus-visible { outline: 1px solid var(--branco); outline-offset: 4px; }

/* --- Corpo ----------------------------------------------------------------- */
.doc-corpo { padding: 24px 0 96px; }
.doc-corpo section {
  padding: 48px 0;
  border-bottom: 1px solid var(--hairline-2);
  max-width: 760px;
}
.doc-corpo section:last-child { border-bottom: 0; }
.doc-corpo h2 {
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 12px;
  scroll-margin-top: 84px;
}
.doc-corpo h3 {
  font-size: 15px;
  font-weight: 500;
  margin-top: 30px;
}
.doc-corpo p { color: var(--texto-2); font-size: 15px; margin-top: 14px; }
.doc-corpo p strong { color: var(--branco); font-weight: 500; }
.doc-corpo a { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }

.doc-lista { list-style: none; margin-top: 16px; }
.doc-lista li {
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
  color: var(--texto-2);
  font-size: 15px;
}
.doc-lista li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 1px;
  background: var(--apoio);
}
.doc-lista li strong { color: var(--branco); font-weight: 500; }

/* --- Painel de destaque ---------------------------------------------------- */
.doc-painel {
  margin-top: 26px;
  padding: 24px 26px;
  background: var(--vidro);
  border: 1px solid var(--hairline);
  --ch: var(--chanfro-m);
}
.doc-painel p { margin-top: 0; }
.doc-painel p + p { margin-top: 12px; }

/* --- Tabela de dados ------------------------------------------------------- */
.doc-tabela {
  margin-top: 22px;
  border: 1px solid var(--hairline);
  overflow-x: auto;
  --ch: var(--chanfro-m);
}
.doc-tabela table { width: 100%; border-collapse: collapse; min-width: 520px; }
.doc-tabela th, .doc-tabela td {
  text-align: left;
  padding: 14px 18px;
  font-size: 14px;
  border-bottom: 1px solid var(--hairline-2);
  vertical-align: top;
}
.doc-tabela thead th {
  background: var(--vidro);
  color: var(--branco);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hairline);
}
.doc-tabela tbody th { color: var(--branco); font-weight: 500; width: 34%; }
.doc-tabela tbody td { color: var(--texto-2); }
.doc-tabela tbody tr:last-child th,
.doc-tabela tbody tr:last-child td { border-bottom: 0; }

/* --- Contato --------------------------------------------------------------- */
.doc-contato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px;
  margin-top: 22px;
}
.doc-contato div {
  padding: 18px 20px;
  background: var(--vidro);
  border: 1px solid var(--hairline);
  --ch: var(--chanfro-m);
}
.doc-contato dt {
  color: var(--apoio);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.doc-contato dd { color: var(--branco); font-size: 14px; margin-top: 7px; }

/* --- Responsivo ------------------------------------------------------------ */
@media (max-width: 720px) {
  .doc-topo { padding: 104px 0 44px; }
  .doc-sumario ol { grid-template-columns: 1fr; }
  .doc-corpo section { padding: 38px 0; }
}