/* ============================================================================
   Kalebe RH — as páginas de documento: política de privacidade e a porta do
   recrutador. Carrega depois de tokens.css e componentes.css, e NÃO carrega
   paginas.css, que é inteiro específico da landing.

   Elas existiam no site antigo com folha própria e com fonte do Google. Aqui
   usam a mesma ficha da landing e a mesma fonte servida por nós: a página que
   fala de privacidade era, ela mesma, a única que abria conexão com terceiro.
   ============================================================================ */

.faixa{width:min(100% - 2 * var(--e-5), var(--faixa));margin-inline:auto}

/* ================================= barra ================================ */

.barra-doc{
  border-bottom:1px solid var(--linha);
  background:var(--n-0);
  padding-block:var(--e-4);
}
.barra-doc__i{display:flex;align-items:center;justify-content:space-between;gap:var(--e-5)}

/* MESMA armadilha que ja pegou a landing uma vez: o .bt--contorno nasce claro,
   para viver sobre azul. A barra do documento e branca, e sem esta regra o
   "Voltar ao site" fica branco sobre branco. O botao tira a cor da SUPERFICIE,
   e esta superficie e papel. */
.barra-doc .bt--contorno{color:var(--marca);border-color:var(--marca-borda)}
.barra-doc .bt--contorno:hover{background:var(--marca-fraca);border-color:var(--marca)}

.marca{
  display:inline-flex;align-items:center;gap:var(--e-3);
  text-decoration:none;font-weight:700;font-size:var(--t-lg);
  color:var(--tinta);letter-spacing:-.02em;min-height:var(--alvo);
}
.marca b{color:var(--marca);font-weight:700}
.marca__k{width:var(--e-7);height:var(--e-7);flex:none}

/* ============================== o documento ============================= */

/* Medida de leitura curta de propósito: texto jurídico se lê linha a linha,
   e 70ch é o limite em que o olho ainda encontra o começo da linha seguinte. */
.doc{
  padding-block:clamp(48px,6vw,var(--e-10)) clamp(56px,7vw,var(--e-11));
  max-width:70ch;
}
.doc h1{
  font-size:var(--t-h2);letter-spacing:var(--aperto-h2);
  margin-bottom:var(--e-3);
}
.doc .data{
  font-size:var(--t-14);color:var(--suave);
  margin-bottom:var(--e-8);
}
.doc h2{
  font-size:var(--t-h3);letter-spacing:-.02em;
  margin-top:var(--e-9);margin-bottom:var(--e-4);
}
.doc p{margin-block:0 var(--e-5);line-height:1.7;color:var(--tinta-media)}
.doc strong{color:var(--tinta);font-weight:700}
.doc ul{
  display:grid;gap:var(--e-3);
  margin-block:0 var(--e-5);padding-left:var(--e-6);
  list-style:disc;
}
.doc li{line-height:1.65;color:var(--tinta-media)}
.doc li::marker{color:var(--marca-borda)}
.doc a{color:var(--marca);text-decoration-thickness:1px}

.voltar{
  display:inline-flex;align-items:center;min-height:var(--alvo);
  margin-top:var(--e-9);font-weight:600;font-size:var(--t-15);
  color:var(--marca);text-decoration:none;
}
.voltar:hover{text-decoration:underline}

/* ============================== a porta ================================= */

/* Uma tela só, centrada, sem nada para ler além do necessário: quem chega
   aqui já sabe o que quer. */
.porta{
  min-height:60vh;display:grid;align-content:center;justify-items:start;
  padding-block:clamp(56px,8vw,var(--e-11));
  max-width:52ch;
}
.porta h1{font-size:var(--t-h2);letter-spacing:var(--aperto-h2);margin-bottom:var(--e-4)}
.porta p{font-size:var(--t-lg);line-height:1.6;color:var(--tinta-media);margin-bottom:var(--e-7)}
.porta__acoes{display:flex;flex-wrap:wrap;gap:var(--e-4);align-items:center}

/* =============================== rodapé ================================= */

.rodape-doc{
  background:linear-gradient(160deg,var(--marca) 0%,var(--marca-escura) 100%);
  color:var(--marca-tinta);
  padding-block:var(--e-9) var(--e-7);
  padding-bottom:max(var(--e-7), env(safe-area-inset-bottom));
}
.rodape-doc__g{
  display:grid;gap:var(--e-6);
  font-size:var(--t-14);color:var(--sobre-fraco);
}
.rodape-doc__g a{color:var(--sobre-texto);text-decoration:none}
.rodape-doc__g a:hover{text-decoration:underline}
.rodape-doc p{margin:0}
@media (min-width:560px){
  .rodape-doc__g{grid-template-columns:minmax(0,1fr) auto;align-items:center}
}

/* o anel de foco desta superfície é o claro, como na landing */
.rodape-doc :focus-visible{outline-color:var(--marca-clara)}

/* =============================== impressão ============================== */

@media print{
  .barra-doc,.voltar{display:none}
  .rodape-doc{background:#fff!important;color:#000!important}
  .doc{max-width:none}
  h1,h2{color:#000!important}
  p,li{color:#222!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}
