/* Ajuda, Novidades e Termos. A estrutura compartilhada é um documento
 * acompanhado por um índice de nós; a árvore e a linha do tempo continuam
 * a mesma gramática do fio usada no restante do site. */

/* ===================================================================== */
/* Abertura e grade documental                                            */
/* ===================================================================== */

.topo {
  border-bottom: 1px solid var(--line);
}

.topo-grade {
  align-items: end;
}

.topo h1 {
  max-width: 13ch;
}

.topo .lede {
  align-self: end;
}

.documento-grade {
  display: grid;
  gap: var(--e-7);
  align-items: start;
  padding-block: var(--e-7) var(--respiro);
}

.documento-corpo {
  width: 100%;
  max-width: 72ch;
  min-width: 0;
}

.documento-grade--termos .documento-corpo {
  max-width: 68ch;
}

@media (min-width: 760px) {
  .topo-grade {
    grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
    column-gap: var(--e-7);
  }
}

@media (min-width: 1024px) {
  .documento-grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--e-5);
    padding-top: var(--e-8);
  }

  .indice {
    grid-column: 1 / span 3;
  }

  .documento-corpo {
    grid-column: 4 / -1;
  }
}

/* ===================================================================== */
/* Índice                                                                 */
/* ===================================================================== */

.indice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: var(--e-2);
  border: 1px solid var(--line);
  border-radius: var(--r-cartao);
  background: var(--s1);
}

.indice-titulo {
  grid-column: 1 / -1;
  padding: var(--e-2) var(--e-3) var(--e-3);
  font-family: var(--f-dado);
  font-weight: 500;
  font-size: var(--fs-etiqueta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx3);
}

.indice a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 0;
  min-height: 40px;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-ctl);
  color: var(--tx2);
  font-size: var(--fs-pequeno);
  line-height: 1.25;
  text-decoration: none;
}

.indice a:hover {
  background: var(--s2);
  color: var(--tx);
}

.indice a[aria-current='location'] {
  color: var(--tx);
}

.indice a[aria-current='location'] .no {
  border-color: var(--wire);
  background: var(--wire);
}

.indice--termos a {
  font-size: 0.8125rem;
}

@media (min-width: 1024px) {
  .indice {
    position: sticky;
    top: calc(var(--altura-nav) + var(--e-5));
    grid-template-columns: minmax(0, 1fr);
    max-height: calc(100vh - var(--altura-nav) - 2 * var(--e-5));
    overflow-y: auto;
  }

  .indice-titulo {
    grid-column: auto;
  }
}

/* ===================================================================== */
/* Ritmo de leitura                                                       */
/* ===================================================================== */

.documento-secao {
  position: relative;
  padding-block: var(--e-8);
  border-top: 1px solid var(--line);
}

.documento-secao:first-child {
  padding-top: 0;
  border-top: 0;
}

.documento-cabeca {
  display: grid;
  gap: var(--e-4);
  margin-bottom: var(--e-7);
}

.documento-cabeca h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  max-width: 16ch;
}

.documento-cabeca .lede {
  max-width: 60ch;
}

.documento-nota {
  margin-top: var(--e-6);
  color: var(--tx2);
}

.ancora-legada {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===================================================================== */
/* Ajuda                                                                  */
/* ===================================================================== */

.tabela-rolagem {
  overflow-x: auto;
  margin-bottom: var(--e-7);
}

.banda th:first-child,
.banda td:first-child {
  width: 50%;
}

.banda tbody th,
.banda tbody td {
  font-family: var(--f-dado);
  font-weight: 500;
}

.comparacao-rede {
  display: grid;
  gap: var(--e-4);
  margin-bottom: var(--e-6);
}

.comparacao-rede article {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-5);
  border: 1px solid var(--line);
  border-radius: var(--r-cartao);
  background: var(--s1);
}

.comparacao-rede .dado,
.fatos-internos .dado {
  color: var(--tx3);
  font-size: var(--fs-etiqueta);
  letter-spacing: 0.08em;
}

.comparacao-rede p:last-child,
.fatos-internos p:last-child {
  color: var(--tx2);
}

@media (min-width: 700px) {
  .comparacao-rede {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.arvore-ajuda {
  margin: 0 0 var(--e-7);
  padding: clamp(16px, 4vw, 40px);
  background: var(--void);
}

.arvore-ajuda svg {
  width: 100%;
  height: auto;
}

.arvore-ajuda .arvore-fios path {
  fill: none;
  stroke: var(--wire-line);
  stroke-width: 2;
}

.arvore-ajuda .no--vivo {
  fill: var(--live);
  stroke: var(--live);
}

.arvore-ajuda .arvore-relay {
  fill: var(--void);
  stroke: var(--tx);
  stroke-width: 3;
}

.arvore-ajuda .arvore-folha {
  fill: var(--void);
  stroke: var(--tx2);
  stroke-width: 2.5;
}

.arvore-ajuda .arvore-rotulos text {
  fill: var(--tx2);
  font-family: var(--f-dado);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.fatos-internos {
  display: grid;
  gap: 0;
}

.fatos-internos article {
  display: grid;
  gap: var(--e-3);
  padding-block: var(--e-5);
  border-top: 1px solid var(--line);
}

.fatos-internos article:last-child {
  border-bottom: 1px solid var(--line);
}

@media (min-width: 700px) {
  .fatos-internos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fatos-internos article {
    padding: var(--e-5);
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .fatos-internos article:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

/* ===================================================================== */
/* Novidades                                                              */
/* ===================================================================== */

.linha-versoes {
  position: relative;
  list-style: none;
}

.linha-versoes::before {
  content: '';
  position: absolute;
  top: var(--e-3);
  bottom: var(--e-3);
  left: 9px;
  width: 2px;
  background: var(--wire-line);
}

.versao {
  position: relative;
  display: grid;
  gap: var(--e-5);
  padding: 0 0 var(--e-8) 44px;
}

.versao:last-child {
  padding-bottom: 0;
}

.versao-no {
  position: absolute;
  top: 5px;
  left: 0;
  width: 20px;
  height: 20px;
  border-width: 2.5px;
  background: var(--bg);
}

.versao-no.no--cheio {
  background: var(--wire);
}

.versao-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  font-family: var(--f-dado);
  font-weight: 500;
  font-size: var(--fs-dado);
  color: var(--tx3);
}

.versao-num {
  color: var(--tx);
  font-size: 1rem;
}

.versao-corpo {
  display: grid;
  gap: var(--e-5);
}

.versao-corpo h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 18ch;
}

.versao-corpo ul {
  display: grid;
  gap: var(--e-3);
  list-style: none;
}

.versao-corpo li {
  position: relative;
  padding-left: var(--e-5);
  color: var(--tx2);
}

.versao-corpo li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--wire);
}

@media (min-width: 700px) {
  .versao {
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: var(--e-6);
  }

  .versao-meta {
    align-content: start;
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ===================================================================== */
/* Termos                                                                 */
/* ===================================================================== */

.termos {
  overflow-wrap: anywhere;
}

.privacidade {
  display: grid;
  gap: var(--e-4);
  margin-bottom: var(--e-8);
  padding: clamp(24px, 5vw, 48px);
}

.privacidade h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
}

.privacidade p:last-child {
  color: var(--tx2);
}

.termos-abertura {
  padding-bottom: var(--e-7);
}

.termos-abertura,
.clausula,
.termos-nota {
  line-height: 1.75;
}

.clausula {
  padding-block: var(--e-7);
  border-top: 1px solid var(--line);
}

.clausula h2 {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.25;
}

.clausula-num {
  flex: none;
  min-width: 2.25rem;
  font-family: var(--f-dado);
  font-weight: 500;
  font-size: 0.78em;
  letter-spacing: 0;
  color: var(--wire);
}

.clausula p + p {
  margin-top: var(--e-4);
}

.termos-nota {
  padding-top: var(--e-6);
  border-top: 1px solid var(--line);
  color: var(--tx2);
}