/* =========================================================================
   Lumin'área · Política de Privacidade
   Herda o sistema visual de /css/lumi.css. Aqui mora só o que é desta
   página: o ritmo de leitura longa, o índice que acompanha a rolagem e a
   numeração grande pendurada na margem.

   Nada de <style> nem de style= no HTML: a CSP da casa bloqueia os dois no
   ar, e eles funcionam na máquina. Todo CSS vive aqui.
   ========================================================================= */

body.doc{
  background:var(--marfim);
  overflow-x:hidden;
}

/* -------------------------------------------------------------- o topo */
.doc-topo{
  position:sticky;top:0;z-index:20;
  background:rgba(247,242,233,.92);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--linho);
}
.doc-marca{
  display:inline-flex;align-items:center;gap:14px;
  height:var(--topo-altura);
  font-size:11px;text-transform:uppercase;letter-spacing:.28em;
  color:var(--rotulo);
}
.doc-marca img{width:34px;height:34px}
.doc-marca:hover{color:var(--tinta)}

/* ------------------------------------------------------------- a capa
   A aposta desta página: o título num corpo grande demais para um
   documento legal, e um fio de luz descendo do rótulo até ele. */
.doc-capa{padding:clamp(56px,7vw,104px) 0 clamp(34px,4vw,54px)}
.doc-capa .titulo-1{max-width:14ch;text-wrap:balance}
.doc-capa .titulo-1::after{
  content:"";display:block;width:64px;height:3px;
  background:var(--luz);margin-top:clamp(24px,2.6vw,34px);
}
.doc-chamada{
  margin-top:clamp(26px,3vw,38px);
  max-width:58ch;font-size:clamp(17px,1.5vw,20px);
  line-height:1.72;color:var(--tinta-suave);text-wrap:pretty;
}
.doc-nota{
  margin-top:clamp(24px,2.6vw,32px);max-width:56ch;
  border-left:2px solid var(--luz);padding:6px 0 6px 20px;
  font-size:15.5px;line-height:1.62;color:var(--tinta);text-wrap:pretty;
}
.doc-data{
  margin-top:26px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--taupe);
}

/* ----------------------------------------------------------- o resumo */
.doc-resumo{
  background:var(--gelo);
  padding:clamp(44px,5.2vw,76px) 0;
  border-block:1px solid var(--linho);
}
.resumo-grade{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.4vw,38px);
}
.resumo-grade li{
  border-top:2px solid var(--areia);padding-top:20px;
}
.resumo-n{
  display:block;font-family:var(--marca);font-weight:500;
  font-size:13px;letter-spacing:.2em;color:var(--terra);margin-bottom:12px;
}
.resumo-grade p{
  margin:0;font-size:15.5px;line-height:1.62;
  color:var(--tinta);text-wrap:pretty;
}

/* ---------------------------------------------------- leitura e índice */
.doc-leitura{
  display:grid;
  grid-template-columns:minmax(190px,240px) minmax(0,1fr);
  gap:clamp(36px,5vw,88px);
  padding-block:clamp(50px,6vw,96px);
  align-items:start;
}
.doc-indice{position:sticky;top:calc(var(--topo-altura) + 34px)}
.doc-indice ol{
  list-style:none;margin:0;padding:0;
  counter-reset:indice;
}
.doc-indice li{counter-increment:indice}
.doc-indice a{
  display:flex;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--linho);
  font-size:14px;line-height:1.4;color:var(--tinta-suave);
  transition:color .3s var(--calma);
}
.doc-indice a::before{
  content:counter(indice,decimal-leading-zero);
  font-family:var(--marca);font-size:10.5px;letter-spacing:.12em;
  color:var(--taupe);flex:none;
}
.doc-indice a:hover{color:var(--tinta)}

/* ------------------------------------------------------------ o corpo */
.doc-texto{max-width:68ch}
.bloco{
  padding-top:clamp(40px,4.6vw,66px);
  scroll-margin-top:calc(var(--topo-altura) + 26px);
}
.bloco:first-child{padding-top:0}
.bloco + .bloco{border-top:1px solid var(--linho)}

/* o número grande, pendurado na margem quando há margem para ele */
.bloco-n{
  font-family:var(--marca);font-weight:500;
  font-size:clamp(30px,3.4vw,46px);line-height:1;
  color:var(--areia);margin:0 0 14px;
  letter-spacing:-.02em;
}
.bloco .titulo-3{margin-bottom:20px;text-wrap:balance}
.bloco p{color:var(--tinta-suave);font-size:16.5px;line-height:1.76;text-wrap:pretty}
.bloco p strong{color:var(--tinta);font-weight:600}
.bloco a{
  color:var(--tinta);
  box-shadow:inset 0 -1px 0 var(--areia);
  transition:box-shadow .3s var(--calma);
}
.bloco a:hover{box-shadow:inset 0 -2px 0 var(--luz)}

.lista-limpa{
  list-style:none;margin:0 0 1.15em;padding:0;
}
.lista-limpa li{
  position:relative;padding-left:24px;margin-bottom:14px;
  font-size:16px;line-height:1.7;color:var(--tinta-suave);text-wrap:pretty;
}
.lista-limpa li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:10px;height:2px;background:var(--luz);
}
.lista-limpa li strong{color:var(--tinta);font-weight:600}
.lista-nao li::before{background:var(--terra)}

/* ------------------------------------------------- as fichas de dados
   .ficha já existe no sistema da casa. Aqui só se acrescenta o que a
   leitura longa pede. */
.bloco .ficha{margin:clamp(26px,3vw,40px) 0}
.ficha-titulo{
  font-size:clamp(17px,1.5vw,20px);line-height:1.26;
  letter-spacing:-.02em;margin:0 0 10px;color:var(--tinta);
  text-wrap:balance;
}
.ficha-linha{
  margin:0 0 8px;font-size:15px;line-height:1.6;
  color:var(--rotulo);text-wrap:pretty;
}
.bloco .ficha dd{color:var(--tinta-suave)}
.ficha-rodape{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--linho);
  font-size:14.5px;line-height:1.62;color:var(--rotulo);text-wrap:pretty;
}

/* ------------------------------------------------------- a tabela de prazos */
.tabela-tempo{
  width:100%;border-collapse:collapse;margin:clamp(22px,2.6vw,34px) 0 26px;
  text-align:left;
}
.tabela-tempo caption{
  text-align:left;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.26em;color:var(--terra);padding-bottom:14px;
}
.tabela-tempo th,.tabela-tempo td{
  padding:16px 18px 16px 0;border-bottom:1px solid var(--linho);
  vertical-align:top;text-wrap:pretty;
}
.tabela-tempo thead th{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.24em;
  color:var(--rotulo);font-weight:500;padding-bottom:10px;
}
.tabela-tempo tbody th{
  width:38%;font-size:15.5px;font-weight:600;color:var(--tinta);
  line-height:1.5;letter-spacing:-.01em;
}
.tabela-tempo td{font-size:15.5px;line-height:1.62;color:var(--tinta-suave)}

/* --------------------------------------------------------------- o fim */
.doc-fim{
  background:var(--tarja);color:var(--marfim);
  padding:clamp(54px,6.4vw,96px) 0;
}
.doc-fim .rotulo{color:var(--areia)}
.doc-fim .tick{background:var(--luz)}
.doc-fim-linha{
  margin:0 0 clamp(26px,3vw,38px);max-width:40ch;
  font-size:clamp(21px,2.4vw,32px);line-height:1.28;
  letter-spacing:-.026em;font-weight:600;text-wrap:balance;
}
.doc-fim-acoes{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.doc-fim .rodape-cuidado{margin-top:clamp(30px,3.4vw,44px)}
.doc-fim .btn-solido{background:var(--luz);color:var(--marrom);border-color:var(--luz)}
.doc-fim .btn-solido:hover{background:var(--marfim);color:var(--marrom)}
.doc-fim .btn-linha{border-color:rgba(226,216,205,.4);color:var(--marfim)}
.doc-fim .btn-linha:hover{border-color:var(--marfim)}

/* ===================================================== telas menores */
@media (max-width:1040px){
  .resumo-grade{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px){
  .doc-leitura{grid-template-columns:1fr;gap:0}
  .doc-indice{
    position:static;
    padding-bottom:clamp(30px,4vw,44px);
    margin-bottom:clamp(30px,4vw,44px);
    border-bottom:1px solid var(--linho);
  }
  .doc-indice a{padding:12px 0;font-size:15px}
  .doc-indice li:last-child a{border-bottom:0}
  .doc-texto{max-width:none}
  .tabela-tempo tbody th{width:auto;display:block;padding-bottom:6px;border-bottom:0}
  .tabela-tempo td{display:block;padding-top:0}
  .tabela-tempo thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tabela-tempo tbody tr{display:block;border-bottom:1px solid var(--linho);padding:16px 0}
  .tabela-tempo tbody tr th,.tabela-tempo tbody tr td{border-bottom:0}
}

@media (max-width:560px){
  .resumo-grade{grid-template-columns:1fr;gap:22px}
  .doc-capa .titulo-1{max-width:none}
  .doc-fim-acoes .btn-solido,.doc-fim-acoes .btn-linha{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .doc-indice a,.bloco a{transition:none}
}