/* ==========================================================================
   Qual a Peca? - Documentos legais
   --------------------------------------------------------------------------
   Serve as quatro paginas: termos.html, privacidade.html,
   cancelamento.html e cookies.html.

   Existe como arquivo proprio porque o padrao de leitura destes documentos
   nao aparece em nenhuma outra tela do site: coluna de 880px, corpo de
   15.5px com entrelinha 1.68, etiqueta "Secao N", alineas recuadas e
   tabelas de dados. Colocar isso no base.css empurraria estilo de uma tela
   so para dentro do arquivo compartilhado.

   NENHUMA destas paginas carrega JavaScript. O conteudo e obrigacao legal e
   nao pode depender de script para aparecer.

   Ordem de carregamento: tokens.css -> base.css -> legal.css
   ========================================================================== */


/* ==========================================================================
   TOPO E NAVEGACAO ENTRE OS QUATRO DOCUMENTOS
   ========================================================================== */

.topbar {
  border-bottom: 1px solid var(--borda);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  max-width: var(--largura-legal);
  margin-inline: auto;
  padding: 14px clamp(18px, 4vw, 32px);
}

.logo {
  display: inline-flex;
  align-items: stretch;
  background: var(--borgonha);
}

.logo-name,
.logo-mark {
  font-family: var(--fonte-serifa);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  padding: 8px 0;
  white-space: nowrap;
}

.logo-name {
  padding-left: 12px;
  padding-right: 5px;
  color: var(--sobre-escuro);
  letter-spacing: -0.01em;
}

.logo-mark {
  padding-right: 12px;
  color: var(--dourado);
}

/* Os quatro documentos. O atual fica em borgonha cheio. */
.legal-nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 600;
}

.legal-nav a {
  padding: 7px 13px;
  color: var(--texto-3);
}

.legal-nav a:hover {
  color: var(--borgonha);
}

.legal-nav a[aria-current="page"] {
  background: var(--borgonha);
  color: var(--sobre-escuro);
}


/* ==========================================================================
   AVISO DE DOCUMENTO EM PREPARACAO
   --------------------------------------------------------------------------
   NAO faz parte do documento. E um lembrete para quem mantem o site, para
   que a pagina nao va ao ar com campos por preencher. Sai junto com o
   ultimo <mark>.
   ========================================================================== */

.pending-bar {
  background: var(--preencher-fundo);
  border-bottom: 1px solid var(--dourado-escuro);
  color: var(--preencher-texto);
  font-size: 13px;
  line-height: 1.5;
}

.pending-bar-inner {
  max-width: var(--largura-legal);
  margin-inline: auto;
  padding: 11px clamp(18px, 4vw, 32px);
}

.pending-bar strong {
  font-weight: 600;
}


/* ==========================================================================
   ABERTURA DO DOCUMENTO
   ========================================================================== */

.legal-head {
  max-width: var(--largura-legal);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 68px) clamp(18px, 4vw, 32px) 0;
}

.legal-kicker {
  font-family: var(--fonte-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--secao-acento);
  margin-bottom: 16px;
}

.legal-title {
  font-size: clamp(34px, 5.4vw, 52px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 18px;
}

.legal-updated {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--texto-3);
  margin-bottom: 30px;
}

/* Chamada de abertura, em cartao com barra borgonha. */
.legal-intro {
  display: flex;
  max-width: 620px;
  background: var(--branco);
  border: 1px solid var(--borda);
}

.legal-intro-bar {
  width: 6px;
  background: var(--borgonha);
  flex-shrink: 0;
}

.legal-intro p {
  font-family: var(--fonte-serifa);
  font-size: 19px;
  line-height: var(--lh-corpo);
  color: var(--texto-1);
  padding: 20px 24px;
  text-wrap: pretty;
}


/* ==========================================================================
   CORPO DO DOCUMENTO
   ========================================================================== */

.legal-body {
  max-width: var(--largura-legal);
  margin-inline: auto;
  padding: 0 clamp(18px, 4vw, 32px);
}

/* Cabecalho de secao: etiqueta + titulo, separados por linha acima. */
.legal-section {
  margin: 52px 0 20px;
  padding-top: 28px;
  border-top: 1px solid var(--borda);
}

.legal-section-label {
  font-family: var(--fonte-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--secao-acento);
  margin-bottom: 10px;
}

.legal-section h2 {
  font-size: clamp(24px, 3.2vw, 30px);
  letter-spacing: var(--ls-subtitulo);
  line-height: 1.15;
}

/* Paragrafo do documento. Entrelinha 1.68: mais alta que a do resto do
   site, calibrada para leitura longa. */
.legal-body p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--texto-1);
  margin-bottom: 14px;
  text-wrap: pretty;
}

/* Alinea: a), b), c)... */
.legal-item {
  padding-left: 24px;
  margin-bottom: 12px !important;
}

/* Subtitulo dentro de uma secao (2.1, 3.1...). */
.legal-sub {
  font-size: 21px;
  letter-spacing: var(--ls-subtitulo);
  margin: 28px 0 14px;
  color: var(--tinta);
}

/* Lista de definicao: "Nome: ...", "E-mail: ...". */
.legal-deflist {
  display: grid;
  gap: 8px;
  padding-left: 24px;
  margin-bottom: 14px;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--texto-1);
}

.legal-deflist-card {
  padding: 20px 24px;
  gap: 10px;
  margin-bottom: 0;
}

/* Os nove direitos do art. 18 da LGPD, um por linha.
   As divisorias de 1px sao o fundo aparecendo pelo gap. */
.legal-rights {
  display: grid;
  gap: 1px;
  margin-bottom: 18px;
  background: var(--borda);
  border: 1px solid var(--borda);
}

.legal-rights > div {
  background: var(--branco);
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-1);
}

.legal-rights strong {
  font-weight: 600;
  color: var(--tinta);
}

.legal-body strong {
  font-weight: 600;
  color: var(--tinta);
}

.legal-body a {
  color: var(--borgonha);
  border-bottom: 1px solid var(--borda);
}

.legal-body a:hover {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}


/* ==========================================================================
   OS TRES TRATAMENTOS DE DESTAQUE
   Usados com parcimonia, cada um com um proposito.
   ========================================================================== */

/* 1. Bloco borgonha: a clausula que nao pode passar batido. */
.legal-highlight {
  display: flex;
  background: var(--borgonha);
  margin-bottom: 18px;
}

.legal-highlight-bar {
  width: 6px;
  background: var(--dourado);
  flex-shrink: 0;
}

.legal-highlight p {
  font-family: var(--fonte-serifa);
  font-size: 20px;
  line-height: 1.5;
  color: var(--sobre-escuro);
  margin: 0;
  padding: 22px 26px;
}

.legal-highlight strong {
  color: var(--sobre-escuro);
}

/* 2. Bloco de alerta lateral. */
.legal-alert {
  display: flex;
  background: var(--pulo-fundo);
  margin-bottom: 16px;
}

.legal-alert-bar {
  width: 5px;
  background: var(--dourado-escuro);
  flex-shrink: 0;
}

.legal-alert p {
  color: var(--pulo-corpo);
  margin: 0;
  padding: 18px 22px;
}

/* 3. Cartao de item destacado (planos, prazos). */
.legal-cards {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.legal-card {
  display: flex;
  background: var(--branco);
  border: 1px solid var(--borda);
}

.legal-card-bar {
  width: 5px;
  background: var(--borgonha);
  flex-shrink: 0;
}

.legal-card-bar-gold {
  background: var(--dourado-escuro);
}

.legal-card p {
  margin: 0;
  padding: 18px 22px;
}


/* ==========================================================================
   TABELAS
   Usadas para bases legais, operadores, retencao e cookies.
   ========================================================================== */

.legal-table-wrap {
  overflow-x: auto;
  margin-bottom: 18px;
  border: 1px solid var(--borda);
}

.legal-table {
  width: 100%;
  min-width: 520px;
  background: var(--branco);
  font-size: 14px;
  line-height: 1.55;
}

.legal-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--areia);
  border-bottom: 1px solid var(--borda);
  font-family: var(--fonte-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--texto-3);
}

.legal-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--borda-interna);
  color: var(--texto-1);
  vertical-align: top;
}

.legal-table tr:last-child td {
  border-bottom: none;
}

/* Linha de categoria que nao esta em uso hoje. */
.legal-table .is-inactive td {
  color: var(--texto-3);
}


/* ==========================================================================
   CAMPO PENDENTE DE PREENCHIMENTO
   --------------------------------------------------------------------------
   <mark> e a marcacao correta em HTML para texto que precisa de atencao:
   nao e recurso visual improvisado, e leitor de tela anuncia.
   NENHUM destes pode sobrar quando o site for ao ar.
   ========================================================================== */

.preencher {
  background: var(--preencher-fundo);
  color: var(--preencher-texto);
  padding: 1px 6px;
  font-family: var(--fonte-ui);
  font-size: 13.5px;
  font-weight: 600;
  font-style: normal;
}


/* ==========================================================================
   FECHO E RODAPE
   ========================================================================== */

.legal-vigencia {
  font-family: var(--fonte-serifa);
  font-style: italic;
  font-size: 16px;
  color: var(--texto-3);
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--borda);
}

.site-foot {
  border-top: 1px solid var(--borda);
  margin-top: 56px;
  background: var(--creme-rodape);
}

.site-foot-inner {
  max-width: var(--largura-legal);
  margin-inline: auto;
  padding: 32px clamp(18px, 4vw, 32px) 52px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--texto-opcional);
}

.foot-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-weight: 600;
}

.foot-links a {
  color: var(--borgonha);
}

.foot-links a:hover {
  color: var(--tinta);
}

.foot-note {
  max-width: 580px;
  margin-bottom: 14px;
}

/* Identificacao do fornecedor: exigida pelo art. 2º do Decreto 7.962/2013. */
.foot-supplier {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
}


/* ==========================================================================
   CELULAR
   ========================================================================== */

@media (max-width: 640px) {
  .legal-section {
    margin-top: 40px;
    padding-top: 22px;
  }

  .legal-item {
    padding-left: 16px;
  }

  .legal-highlight p {
    font-size: 18px;
    padding: 18px 20px;
  }

  .legal-intro p {
    font-size: 17px;
    padding: 18px 20px;
  }
}