/* ============================================================
   POLITICA DE PRIVACIDADE — /politica-de-privacidade/
   Carrega so nesta rota (enqueue em inc/privacidade.php).
   Breakpoints do tema: 1220 / 970 / 680.
   ============================================================ */

.priv { padding: 34px 0px 80px 0px; background-color: #fff; }

/* ---------- cabecalho ---------- */

.priv .priv-head { padding-bottom: 26px; margin-bottom: 34px; border-bottom: 1px solid var(--border); }
.priv .priv-head h1 {
  display: block; margin: 0px;
  font-weight: 900; font-size: 34px; line-height: 1.15;
  text-transform: uppercase; color: var(--black);
}
.priv .priv-lead {
  display: block; max-width: 760px; margin-top: 14px;
  font-size: 16px; line-height: 1.65; color: var(--gray);
}
.priv .priv-data { margin-top: 16px; font-size: 13px; color: var(--gray); }

/* ---------- duas colunas: indice fixo + texto ---------- */

.priv .priv-corpo { display: grid; grid-template-columns: 260px 1fr; gap: 46px; align-items: start; }

.priv .priv-indice {
  position: sticky; top: 76px;
  padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-card);
  background-color: var(--surface);
}
.priv .priv-indice > strong {
  display: block; margin-bottom: 12px;
  font-weight: 700; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--blue);
}
.priv .priv-indice li { margin-bottom: 9px; }
.priv .priv-indice li:last-child { margin-bottom: 0px; }
.priv .priv-indice a {
  display: block; font-size: 13.5px; line-height: 1.4; color: var(--black);
  border-bottom: 1px solid transparent;
}
.priv .priv-indice a:hover { color: var(--blue); border-bottom-color: currentColor; }

/* ---------- texto ---------- */

.priv .priv-secao { margin-bottom: 44px; scroll-margin-top: 76px; }
.priv .priv-secao:last-child { margin-bottom: 0px; }

.priv .priv-secao h2 {
  display: block; margin: 0px 0px 14px 0px;
  font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--darkblue);
}
.priv .priv-secao p { margin-bottom: 14px; font-size: 15px; line-height: 1.7; color: var(--black); }
.priv .priv-secao p:last-child { margin-bottom: 0px; }
.priv .priv-secao a { color: var(--blue); border-bottom: 1px solid rgba(0,109,177,.35); }
.priv .priv-secao a:hover { border-bottom-color: currentColor; }
.priv .priv-secao strong { font-weight: 700; }
.priv .priv-secao em { font-style: normal; font-family: monospace; font-size: 14px; }

.priv .priv-lista { margin: 0px 0px 16px 0px; }
.priv .priv-lista li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  font-size: 15px; line-height: 1.65; color: var(--black);
}
.priv .priv-lista li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background-color: var(--blue);
}

.priv .priv-nota {
  padding: 14px 18px; margin-bottom: 16px;
  border-left: 3px solid var(--blue); border-radius: 0px var(--radius-card) var(--radius-card) 0px;
  background-color: var(--surface-blue);
  font-size: 14.5px; line-height: 1.6;
}

/* ---------- tabelas ---------- */

/* a rolagem e da caixa, nunca do body: a pagina toda rolando de lado
   estragaria o header e o rodape em telas pequenas */
.priv .priv-tabela-rolagem {
  margin-bottom: 18px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  -webkit-overflow-scrolling: touch;
}
.priv .priv-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.priv .priv-tabela th,
.priv .priv-tabela td {
  padding: 12px 14px; text-align: left; vertical-align: top;
  line-height: 1.55; border-bottom: 1px solid var(--border);
}
.priv .priv-tabela thead th {
  font-weight: 700; font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--blue); background-color: var(--surface); white-space: nowrap;
}
.priv .priv-tabela tbody th { font-weight: 700; color: var(--darkblue); }
.priv .priv-tabela tbody tr:last-child th,
.priv .priv-tabela tbody tr:last-child td { border-bottom: 0px; }
.priv .priv-tabela td { color: var(--black); }

/* ---------- 1220 ---------- */
@media all and (max-width: 1220px) {
  .priv .priv-corpo { grid-template-columns: 230px 1fr; gap: 34px; }
}

/* ---------- 970: o indice vira uma caixa acima do texto ---------- */
@media all and (max-width: 970px) {
  .priv { padding-bottom: 60px; }
  .priv .priv-head h1 { font-size: 27px; }
  .priv .priv-corpo { display: block; }
  .priv .priv-indice { position: static; margin-bottom: 32px; }
  .priv .priv-indice ul { column-count: 2; column-gap: 24px; }
}

/* ---------- 680: tabela em fichas ---------- */
@media all and (max-width: 680px) {
  .priv .priv-head h1 { font-size: 23px; }
  .priv .priv-lead { font-size: 15px; }
  .priv .priv-indice ul { column-count: 1; }
  .priv .priv-secao h2 { font-size: 18px; }

  /* Rolar de lado uma tabela de 4 colunas num celular nao se le. Cada
     linha vira uma ficha e o rotulo da coluna (data-priv-rotulo, do
     template) aparece antes do valor. */
  .priv .priv-tabela-rolagem { overflow-x: visible; border: 0px; border-radius: 0px; }
  .priv .priv-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .priv .priv-tabela,
  .priv .priv-tabela tbody,
  .priv .priv-tabela tr,
  .priv .priv-tabela th,
  .priv .priv-tabela td { display: block; width: auto; }
  .priv .priv-tabela tr {
    padding: 14px 16px; margin-bottom: 12px;
    border: 1px solid var(--border); border-radius: var(--radius-card);
    background-color: var(--surface);
  }
  .priv .priv-tabela th,
  .priv .priv-tabela td { padding: 0px; border-bottom: 0px; }
  .priv .priv-tabela tbody th { margin-bottom: 8px; font-size: 15px; }
  .priv .priv-tabela td { margin-top: 10px; }
  .priv .priv-tabela td::before {
    content: attr(data-priv-rotulo);
    display: block; margin-bottom: 2px;
    font-weight: 700; font-size: 11px; letter-spacing: .03em;
    text-transform: uppercase; color: var(--blue);
  }
}

/* O aviso de privacidade do pe dos formularios (.qs-priv-aviso) e o
   link do rodape (.qs-priv-rodape) aparecem em todas as paginas do
   site, e nao so nesta rota: o estilo deles fica em base.css. */