/* vendas/legal/consentimento.css: o aviso de cookies do site (trilha 282t, faixa L) e o
   desenho das paginas legais. Cores por variavel de estilo.css; sem sombra. */
.documento-legal {
  max-width: 44rem;
  color: var(--texto);
  font-size: 1rem;
  line-height: 1.6;
}
.documento-legal h2 {
  margin: 2rem 0 0.75rem;
  color: var(--tinta);
  font-size: 1.25rem;
  line-height: 1.3;
}
.documento-legal p {
  margin: 0 0 1rem;
}
.documento-legal ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.documento-legal li {
  margin-bottom: 0.5rem;
}
.documento-legal code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.875em;
}
.documento-legal-links {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--regua);
}
.documento-legal-links a[aria-current="page"] {
  color: var(--tinta);
}

/* O aviso: fixo no rodape da janela, uma frase e dois botoes. */
.aviso-de-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--celula);
  border-top: 1px solid var(--divisor);
  padding: 1rem;
}
.aviso-de-cookies .envelope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.aviso-de-cookies p {
  margin: 0;
  flex: 1 1 20rem;
  color: var(--texto);
  font-size: 0.9375rem;
}
.aviso-de-cookies p a {
  color: var(--acao);
}
.aviso-de-cookies .botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.aviso-de-cookies .botao {
  min-height: 44px;
}

/* Aviso compacto no celular: duas ou tres linhas e os dois botoes lado a lado, ate cerca de 130px. */
@media (max-width: 640px) {
  .aviso-de-cookies { padding: 8px 10px; left: 6px; right: 6px; bottom: 6px; }
  .aviso-de-cookies .envelope { gap: 6px; }
  .aviso-de-cookies p { flex-basis: 100%; font-size: .8125rem; line-height: 1.35; }
  .aviso-de-cookies .botoes { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .aviso-de-cookies .botao { flex: 1 1 0; min-height: 44px; padding-inline: 8px; font-size: .875rem; }
}

/* Em tela larga o aviso e um cartao no canto inferior direito: nao cobre o botao principal do hero, que fica a esquerda ou no centro. */
@media (min-width: 641px) {
  .aviso-de-cookies { left: auto; right: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px)); max-width: none; margin-inline: 0; padding: 14px 16px; }
  .aviso-de-cookies .envelope { padding: 0; margin: 0; max-width: none; flex-direction: column; align-items: stretch; gap: 10px; }
  .aviso-de-cookies p { flex-basis: auto; font-size: .875rem; line-height: 1.4; }
  .aviso-de-cookies .botoes { flex-wrap: nowrap; gap: 8px; }
  .aviso-de-cookies .botao { flex: 1 1 0; padding-inline: 10px; }
}