/* ============================================================
   BT TRANSPORTES TURÍSTICOS — PÁGINAS DE DOCUMENTO
   Termos de Uso e Política de Privacidade.

   Mesma paleta e mesmas fontes da home, mas outro trabalho: aqui
   ninguém rola atrás de imagem, rola atrás de uma cláusula. Então a
   página é uma coluna de leitura com um sumário fixo ao lado, e as
   cláusulas são numeradas de propósito — é assim que se cita um
   trecho depois ("cláusula 4.2"), o que um documento legal precisa
   e uma página de venda não.
   ============================================================ */

:root{
  --preto:      #0B0D10;
  --grafite:    #25282C;
  --dourado:    #C9A227;
  --champagne:  #E4D3A3;
  --areia:      #F4F0E7;

  --txt-forte:  #F4F0E7;
  --txt-doc:    rgba(244,240,231,.80);
  --txt-medio:  rgba(244,240,231,.72);
  /* .46 (o valor da home) rende 4.2:1 sobre o preto, abaixo do piso
     de 4.5:1 para texto pequeno. Aqui o sumário e a linha do CNPJ são
     texto miúdo que precisa ser lido, então sobem para 6.1:1. */
  --txt-fraco:  rgba(244,240,231,.58);
  --hairline:   rgba(244,240,231,.14);

  --u: 8px;
  --gutter: clamp(24px, 6vw, 96px);
  --fs-eyebrow: clamp(0.625rem, 0.78vw, 0.72rem);

  caret-color:var(--dourado);
  accent-color:var(--dourado);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--preto);
  color:var(--txt-doc);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:rgba(201,162,39,.32); color:var(--areia); }

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--dourado);
  outline-offset:4px;
  border-radius:2px;
}

/* ------------------------------------------------------------
   TOPO — só a marca e o caminho de volta. Nada de menu: quem
   abriu um documento veio ler, não navegar.
   ------------------------------------------------------------ */
.topo{
  border-bottom:1px solid var(--hairline);
  padding-inline:var(--gutter);
}
.topo__quadro{
  max-width:1200px;
  margin-inline:auto;
  padding-block:calc(var(--u)*3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--u)*3);
}
.topo__logo{ display:block; width:108px; height:auto; }
.topo__volta{
  font-family:'Inter',sans-serif;
  font-size:.88rem;
  font-weight:300;
  color:var(--txt-medio);
  text-decoration:none;
  white-space:nowrap;
  transition:color .25s ease;
}
.topo__volta:hover,
.topo__volta:focus-visible{ color:var(--txt-forte); }

/* ------------------------------------------------------------
   CORPO — coluna de leitura + sumário
   ------------------------------------------------------------ */
.doc{
  padding-inline:var(--gutter);
  padding-block:calc(var(--u)*10) calc(var(--u)*14);
}
.doc__quadro{
  /* 980 e nao 1200: a coluna de texto para em 68ch (~690px) e o
     sumario ocupa 200. Um quadro mais largo so abriria um vao morto
     entre os dois. Documento nao precisa da largura da home. */
  max-width:980px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 200px;
  gap:0 calc(var(--u)*9);
  align-items:start;
}
/* O título atravessa as duas colunas: no celular ele precisa vir
   antes do sumário, senão a primeira coisa que aparece é uma lista
   de 14 itens e o leitor nem sabe que documento abriu. */
.doc__cabeca{ grid-column:1 / -1; }

.doc__titulo{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;
  font-size:clamp(2.4rem, 5.2vw, 3.6rem);
  line-height:1.06;
  letter-spacing:-0.015em;
  color:var(--txt-forte);
  margin:0;
  text-wrap:balance;
}
.doc__data{
  font-family:'Inter',sans-serif;
  font-size:var(--fs-eyebrow);
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dourado);
  margin:calc(var(--u)*3) 0 0;
}
.doc__abertura{
  font-size:1.06rem;
  line-height:1.75;
  color:var(--txt-forte);
  max-width:62ch;
  margin:calc(var(--u)*5) 0 0;
  padding-bottom:calc(var(--u)*6);
  border-bottom:1px solid var(--hairline);
}

/* ------- cláusulas ------- */
.clausula{ margin-top:calc(var(--u)*8); }
.article > .clausula:first-child,
article > .clausula:first-child{ margin-top:calc(var(--u)*6); }
.clausula__tit{
  display:flex;
  gap:calc(var(--u)*2);
  font-family:'Inter',sans-serif;
  font-size:1.06rem;
  font-weight:500;
  line-height:1.45;
  color:var(--txt-forte);
  margin:0 0 calc(var(--u)*3);
  scroll-margin-top:calc(var(--u)*12);
}
.clausula__no{
  flex:0 0 auto;
  color:var(--dourado);
  font-variant-numeric:tabular-nums;
}
.doc p{
  font-size:1rem;
  line-height:1.78;
  max-width:68ch;
  margin:0 0 calc(var(--u)*2.5);
}
.doc p:last-child{ margin-bottom:0; }
.doc strong{ color:var(--txt-forte); font-weight:500; }
.doc a{
  color:var(--champagne);
  text-decoration:underline;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(228,211,163,.42);
  transition:text-decoration-color .25s ease;
}
.doc a:hover{ text-decoration-color:var(--champagne); }

/* monoespaçada só onde é dado técnico de verdade: o nome da chave
   que fica guardada no navegador de quem lê */
.doc code{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.88em;
  color:var(--champagne);
  background:rgba(244,240,231,.06);
  border:1px solid var(--hairline);
  border-radius:4px;
  padding:.08em .38em;
}

.clausula ul{
  list-style:none;
  margin:0 0 calc(var(--u)*2.5);
  padding:0;
  max-width:68ch;
  display:grid;
  gap:calc(var(--u)*1.5);
}
.clausula li{
  position:relative;
  padding-left:calc(var(--u)*3);
  font-size:1rem;
  line-height:1.7;
}
/* o marcador é o ponto de destino da Linha de Rota da marca */
.clausula li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--dourado);
}

/* ------- tabela de dados (quem recebe o quê) ------- */
.dados{
  width:100%;
  border-collapse:collapse;
  margin:calc(var(--u)*3) 0 calc(var(--u)*2.5);
  font-size:.95rem;
}
.dados caption{
  text-align:left;
  font-size:var(--fs-eyebrow);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--txt-fraco);
  padding-bottom:calc(var(--u)*1.5);
}
.dados th,
.dados td{
  text-align:left;
  vertical-align:top;
  padding:calc(var(--u)*2) calc(var(--u)*2) calc(var(--u)*2) 0;
  border-bottom:1px solid var(--hairline);
  line-height:1.6;
}
.dados th{
  font-weight:500;
  color:var(--txt-forte);
  white-space:nowrap;
}
.dados__rolagem{ overflow-x:auto; }

/* ------- sumário ------- */
.sumario{
  position:sticky;
  top:calc(var(--u)*5);
  border-left:1px solid var(--hairline);
  padding-left:calc(var(--u)*3);
}
.sumario__tit{
  font-family:'Inter',sans-serif;
  font-size:var(--fs-eyebrow);
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--dourado);
  margin:0 0 calc(var(--u)*2.5);
}
.sumario__lista{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:calc(var(--u)*1.25);
  counter-reset:s;
}
.sumario__lista a{
  display:block;
  font-size:.86rem;
  line-height:1.5;
  color:var(--txt-fraco);
  text-decoration:none;
  transition:color .25s ease;
}
.sumario__lista a:hover,
.sumario__lista a:focus-visible{ color:var(--txt-forte); }

/* ------------------------------------------------------------
   RODAPÉ — o mesmo desenho da home, na versão curta
   ------------------------------------------------------------ */
.rodape{
  border-top:1px solid var(--hairline);
  padding-inline:var(--gutter);
}
.rodape__quadro{
  max-width:1200px;
  margin-inline:auto;
  padding-block:calc(var(--u)*7);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:calc(var(--u)*3);
}
.rodape__links{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:calc(var(--u)*4);
}
.rodape__links a{
  font-size:.9rem;
  color:var(--txt-medio);
  text-decoration:none;
  transition:color .25s ease;
}
.rodape__links a:hover,
.rodape__links a:focus-visible{ color:var(--txt-forte); }
.rodape__legal{
  font-size:.82rem;
  color:var(--txt-fraco);
  margin:0;
  font-variant-numeric:tabular-nums;
}

@media (max-width:900px){
  .doc__quadro{
    grid-template-columns:minmax(0,1fr);
    gap:calc(var(--u)*5) 0;
  }
  /* no celular o sumário vira uma lista curta antes do texto, e
     grudar no topo só roubaria altura de leitura */
  .doc__cabeca{ order:-2; }
  .sumario{
    position:static;
    order:-1;
    border-left:0;
    border-bottom:1px solid var(--hairline);
    padding-left:0;
    padding-bottom:calc(var(--u)*4);
  }
  .sumario__lista{ gap:calc(var(--u)*1.5); }
  .doc{ padding-block:calc(var(--u)*7) calc(var(--u)*10); }
}
@media (max-width:560px){
  .rodape__quadro{ flex-direction:column; align-items:flex-start; }
  .rodape__links{ gap:calc(var(--u)*2.5); }
}