/* Portal de documentos do Residencial Aquarius.
   Direcao: cartoes claros sobre fundo azul-acinzentado, tipografia Plus
   Jakarta Sans hospedada aqui mesmo, azul-marca nos botoes e etiquetas.
   O laranja aparece em UM lugar: o selo da impressao digital. */

@font-face {
  font-family: 'Jakarta';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fontes/jakarta-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jakarta';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fontes/jakarta-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;
  --fundo: #eef3f9;
  --superficie: #ffffff;
  --superficie-2: #f5f8fc;
  --texto: #0f1e2e;
  --texto-2: #5b6d80;
  --borda: #e0e9f2;
  --marca: #10557f;
  --marca-suave: #e4f0f8;
  --agua: #129bb0;
  --areia: #c2661f;
  --erro: #b02a30;
  --erro-suave: #fdeced;
  --ok: #1c7a52;
  --ok-suave: #e5f4ed;
  --sombra: 0 1px 2px rgba(15,35,58,.05), 0 8px 24px -12px rgba(15,35,58,.18);
  --sombra-alta: 0 2px 4px rgba(15,35,58,.06), 0 16px 36px -14px rgba(15,35,58,.26);
  --raio: 18px;
  --sans: 'Jakarta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #080f17;
    --superficie: #111d29;
    --superficie-2: #16232f;
    --texto: #e9f1f8;
    --texto-2: #92a6ba;
    --borda: #1f2f3e;
    --marca: #5aa9dd;
    --marca-suave: #14293a;
    --agua: #35c2d6;
    --areia: #e2a06a;
    --erro: #f09a9f;
    --erro-suave: #341a1c;
    --ok: #6fd3a6;
    --ok-suave: #12291f;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
    --sombra-alta: 0 2px 4px rgba(0,0,0,.45), 0 16px 36px -14px rgba(0,0,0,.8);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; padding: 0 1.25rem 4rem;
  background: var(--fundo); color: var(--texto);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 6px; }

.folha { max-width: 68rem; margin: 0 auto; }
.folha-estreita { max-width: 34rem; margin: 0 auto; }
/* Texto corrido pede medida de leitura, nao largura de formulario: a
   privacidade estava com 544px numa tela de 1440, uma coluna perdida
   no meio do vazio. 48rem da' ~75 caracteres por linha, que e' o ponto
   em que o olho volta pro comeco da linha seguinte sem se perder. */
.folha-leitura { max-width: 48rem; margin: 0 auto; }

.pular { position: absolute; left: -9999px; }
.pular:focus {
  left: 1rem; top: 1rem; z-index: 30; padding: .8rem 1.2rem;
  border-radius: 10px; background: var(--marca); color: #fff; text-decoration: none;
}

/* ---------------- marca ---------------- */
.emblema { color: var(--marca); display: block; }
.marca { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.75rem; }
.marca p { margin: 0; font: 700 .78rem/1.3 var(--sans); letter-spacing: .14em;
           text-transform: uppercase; color: var(--marca); }

/* ---------------- cartao base ---------------- */
.cartao {
  padding: 2.25rem clamp(1.4rem, 4vw, 2.5rem);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 24px; box-shadow: var(--sombra);
}

/* ---------------- entrada (login) ---------------- */
.entrada { margin: 2.5rem 0 0; position: relative; overflow: hidden; }
.entrada::after {
  content: ""; position: absolute; inset: auto -6rem -9rem auto;
  width: 20rem; height: 20rem; border-radius: 50%;
  background: radial-gradient(circle, var(--marca-suave), transparent 68%);
  pointer-events: none;
}
.entrada > * { position: relative; }
.entrada h1 { margin: 0; font-size: clamp(1.75rem, 5.5vw, 2.25rem); font-weight: 800;
              letter-spacing: -.03em; line-height: 1.1; }
.entrada .abre { margin: .9rem 0 0; color: var(--texto-2); font-size: 1.02rem; }

form { margin: 1.9rem 0 0; }
.dupla { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.campo { margin: 0 0 1rem; }
.campo label { display: block; margin: 0 0 .35rem; font: 700 .88rem var(--sans); }
.campo .dica { display: block; margin: .3rem 0 0; font-size: .82rem; color: var(--texto-2); }
.campo input {
  width: 100%; padding: .8rem .95rem; min-height: 48px;
  background: var(--superficie-2); color: var(--texto);
  border: 1.5px solid var(--borda); border-radius: 12px;
  font: 400 1rem var(--sans);
}
.campo input:focus { border-color: var(--marca); outline: none;
                     box-shadow: 0 0 0 3px var(--marca-suave); }
.campo input::placeholder { color: var(--texto-2); opacity: .6; }

.aceite {
  display: flex; gap: .75rem; align-items: flex-start;
  margin: 1.5rem 0 0; padding: 1rem 1.1rem;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 14px;
}
.aceite input { flex: 0 0 auto; width: 22px; height: 22px; margin: .1rem 0 0;
                accent-color: var(--marca); }
.aceite label { font-size: .93rem; color: var(--texto-2); }
.aceite a { color: var(--marca); font-weight: 600; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; margin: 1.4rem 0 0; padding: .9rem 1.25rem; min-height: 52px;
  background: var(--marca); color: #fff; border: 0; border-radius: 14px;
  font: 700 1rem var(--sans); cursor: pointer; text-decoration: none;
  transition: filter .15s;
}
.botao:hover { filter: brightness(1.12); }
@media (prefers-color-scheme: dark) { .botao { color: #06121d; } }

.recado { margin: 1.5rem 0 0; padding: 1rem 1.15rem; border-radius: 14px;
          font-size: .93rem; }
.recado.erro { background: var(--erro-suave); color: var(--erro); border: 1px solid currentColor; }
.recado.ok { background: var(--ok-suave); color: var(--ok); border: 1px solid currentColor; }
.recado b { font-weight: 700; }

.regras { margin: 1.75rem 0 0; padding: 1.25rem 1.35rem;
          background: var(--superficie-2); border-radius: 14px; }
.regras h2 { margin: 0 0 .6rem; font: 700 .78rem var(--sans);
             letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.regras ul { margin: 0; padding-left: 1.15rem; }
.regras li { margin: 0 0 .45rem; font-size: .93rem; color: var(--texto-2); }
.regras li:last-child { margin: 0; }
.regras strong { color: var(--texto); font-weight: 700; }

.miudo { margin: 1.5rem 0 0; font-size: .86rem; color: var(--texto-2); text-align: center; }
.miudo a { color: var(--marca); font-weight: 600; }

/* ---------------- barra de quem esta logado ---------------- */
.barra {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 1.25rem 0 0; padding: .85rem 1.25rem;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 100px; box-shadow: var(--sombra); font-size: .92rem;
}
.barra .quem { font-weight: 700; }
.barra .resto { margin-left: auto; display: flex; gap: 1rem; align-items: center; }
.barra a { color: var(--marca); font-weight: 600; text-decoration: none; }
.barra a:hover { text-decoration: underline; }

/* ---------------- capa do portal ---------------- */
.capa { margin: 1rem 0 0; position: relative; overflow: hidden; }
.capa::after {
  content: ""; position: absolute; inset: auto -6rem -9rem auto;
  width: 22rem; height: 22rem; border-radius: 50%;
  background: radial-gradient(circle, var(--marca-suave), transparent 68%);
  pointer-events: none;
}
.capa > * { position: relative; }
.capa h1 { margin: 0; max-width: 16ch; font-size: clamp(2rem, 5.4vw, 3rem);
           font-weight: 800; letter-spacing: -.035em; line-height: 1.07; }
.abertura { margin: 1.1rem 0 0; max-width: 52ch; font-size: 1.08rem; color: var(--texto-2); }
.abertura b { color: var(--texto); font-weight: 700; }
.numeros { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.9rem 0 0;
           padding: 0; list-style: none; }
.numeros li { padding: .5rem .95rem; border-radius: 100px;
              background: var(--marca-suave); color: var(--marca);
              font: 700 .84rem/1.4 var(--sans); }
.numeros li.neutro { background: var(--superficie-2); color: var(--texto-2);
                     border: 1px solid var(--borda); font-weight: 600; }

.indice { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; }
.indice a { display: inline-flex; align-items: center; gap: .45rem;
            padding: .6rem 1.05rem; border-radius: 100px;
            background: var(--superficie); border: 1px solid var(--borda);
            font: 600 .9rem/1.4 var(--sans); text-decoration: none;
            transition: border-color .15s, color .15s; }
.indice a:hover { border-color: var(--marca); color: var(--marca); }

/* ---------------- secoes e documentos ---------------- */
.secao { margin: 3rem 0 0; }
.cabeca { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.25rem; }
.cabeca .bolha { display: grid; place-items: center; flex: 0 0 auto;
                 width: 2.9rem; height: 2.9rem; border-radius: 14px;
                 background: var(--marca-suave); color: var(--marca); }
.cabeca h2 { margin: 0; flex: 1 1 auto; font-size: 1.45rem; font-weight: 800;
             letter-spacing: -.025em; }
.contagem { font: 600 .84rem var(--sans); color: var(--texto-2); white-space: nowrap; }

.lista { list-style: none; margin: 0; padding: 0;
         display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lista .doc:only-child { grid-column: 1 / -1; }

.doc { display: flex; flex-direction: column;
       padding: 1.35rem 1.45rem 1.25rem;
       background: var(--superficie); border: 1px solid var(--borda);
       border-radius: var(--raio); box-shadow: var(--sombra);
       transition: box-shadow .18s, transform .18s, border-color .18s; }
.doc:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px);
             border-color: color-mix(in srgb, var(--marca) 35%, var(--borda)); }
.quando { align-self: flex-start; margin: 0 0 .7rem; padding: .28rem .7rem;
          border-radius: 8px; background: var(--marca-suave); color: var(--marca);
          font: 700 .74rem/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.doc h3 { margin: 0; font-size: 1.14rem; font-weight: 700; letter-spacing: -.015em;
          line-height: 1.35; }
.doc h3 a { text-decoration: none; }
.doc h3 a:hover { color: var(--marca); }
.origem { margin: .55rem 0 0; font-size: .94rem; color: var(--texto-2); }
.rodape-doc { margin-top: auto; padding-top: 1.15rem; display: flex;
              align-items: center; justify-content: space-between;
              gap: .75rem; flex-wrap: wrap; }
.baixar { display: inline-flex; align-items: center; gap: .5rem;
          padding: .68rem 1.15rem; min-height: 44px;
          background: var(--marca); color: #fff; border-radius: 12px;
          font: 700 .9rem/1.3 var(--sans); text-decoration: none; transition: filter .15s; }
.baixar:hover { filter: brightness(1.12); }
@media (prefers-color-scheme: dark) { .baixar { color: #06121d; } }
.peso { font: 600 .8rem var(--sans); color: var(--texto-2); }
.digital { margin: .9rem 0 0; padding-top: .75rem; border-top: 1px solid var(--borda);
           font: .68rem/1.5 var(--mono); color: var(--texto-2); opacity: .8;
           overflow-wrap: anywhere; }
.digital b { font: 700 .68rem var(--sans); color: var(--areia);
             letter-spacing: .02em; margin-right: .4rem; }

.vazio { padding: 3rem 1.75rem; text-align: center; background: var(--superficie);
         border: 1px dashed var(--borda); border-radius: var(--raio); color: var(--texto-2); }
.vazio p { margin: 0 0 .5rem; }
.vazio p:last-child { margin: 0; }

/* ---------------- rodape ---------------- */
.rodape { margin: 3rem 0 0; padding: 2rem clamp(1.4rem, 4vw, 2.5rem);
          background: var(--superficie); border: 1px solid var(--borda);
          border-radius: 22px; box-shadow: var(--sombra);
          font-size: .9rem; color: var(--texto-2); }
.rodape p { margin: 0 0 .85rem; max-width: 62ch; }
.rodape p:last-child { margin: 0; }
.rodape a { color: var(--marca); font-weight: 600; }

/* ---------------- texto corrido ---------------- */
.texto { margin: 1rem 0 0; }
.texto h2 { margin: 2.5rem 0 .8rem; font-size: 1.22rem; font-weight: 800;
            letter-spacing: -.02em; }
.texto h2:first-child { margin-top: 0; }
.texto p { margin: 0 0 1rem; max-width: 64ch; color: var(--texto-2); }
.texto ul { margin: 0 0 1rem; padding-left: 1.25rem; max-width: 64ch; }
.texto li { margin: 0 0 .6rem; color: var(--texto-2); }
.texto strong { color: var(--texto); font-weight: 700; }
.voltar { display: inline-flex; align-items: center; gap: .4rem; margin: 1.5rem 0 0;
          font: 700 .9rem var(--sans); color: var(--marca); text-decoration: none; }
.pendente { background: #ffe6a3; color: #4a3600; padding: .1em .4em;
            border-radius: 5px; font-weight: 700; }
@media (prefers-color-scheme: dark) { .pendente { background: #6b5615; color: #ffeeb4; } }

/* ---------------- aviso de cookie ----------------
   A barra fica fixa no rodape e tapava o botao "Entrar no portal". Enquanto
   ela estiver na tela, a pagina ganha espaco embaixo para o botao caber. */
body.com-aviso { padding-bottom: 13rem; }
@media (min-width: 34rem) { body.com-aviso { padding-bottom: 10rem; } }

.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 40;
  max-width: 44rem; margin: 0 auto; padding: 1rem 1.25rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 16px; box-shadow: var(--sombra-alta);
  font-size: .9rem; color: var(--texto-2);
}
/* Sem isto o botao "Entendi" nao esconde nada: o `display: flex` acima tem
   prioridade maior que o esconder padrao do navegador, e a barra fica travada
   na tela para sempre. */
.cookie[hidden] { display: none; }
.cookie p { margin: 0; flex: 1 1 18rem; }
.cookie b { color: var(--texto); font-weight: 700; }
.cookie button {
  padding: .6rem 1.3rem; min-height: 44px; border: 0; border-radius: 10px;
  background: var(--marca); color: #fff; font: 700 .9rem var(--sans); cursor: pointer;
}
@media (prefers-color-scheme: dark) { .cookie button { color: #06121d; } }

@media (max-width: 34rem) {
  body { padding-left: .9rem; padding-right: .9rem; }
  .cartao { padding: 1.75rem 1.35rem; border-radius: 20px; }
  .lista { grid-template-columns: 1fr; }
  .dupla { grid-template-columns: 1fr; gap: 0; }
  .barra { border-radius: 18px; }
}

@keyframes surgir { from { opacity: 0; transform: translateY(.7rem); } }
.entrada, .capa, .barra { animation: surgir .45s cubic-bezier(.2,.7,.3,1) backwards; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Painel — so quem mantem o portal ve estas telas.
   ========================================================================== */

.filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
           margin: 1.5rem 0 0; }
.filtros input, .filtros select {
  padding: .7rem .9rem; min-height: 46px;
  background: var(--superficie); color: var(--texto);
  border: 1.5px solid var(--borda); border-radius: 12px;
  font: 400 .95rem var(--sans);
}
.filtros input { flex: 1 1 18rem; }
.filtros button {
  padding: .7rem 1.2rem; min-height: 46px; border: 0; border-radius: 12px;
  background: var(--marca); color: #fff; font: 700 .9rem var(--sans); cursor: pointer;
}
@media (prefers-color-scheme: dark) { .filtros button { color: #06121d; } }
.filtros .limpar { font: 600 .9rem var(--sans); color: var(--texto-2); }

.contagem-lista { margin: 1.1rem 0 .6rem; font: 600 .88rem var(--sans);
                  color: var(--texto-2); }

.tabela-rolagem { overflow-x: auto; background: var(--superficie);
                  border: 1px solid var(--borda); border-radius: var(--raio);
                  box-shadow: var(--sombra); }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th, .tabela td { padding: .85rem 1rem; text-align: left;
                         border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela thead th { font: 700 .74rem var(--sans); letter-spacing: .1em;
                   text-transform: uppercase; color: var(--texto-2);
                   white-space: nowrap; background: var(--superficie-2); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela .numero { text-align: right; }
.tabela .mono { font: .82rem var(--mono); color: var(--texto-2); white-space: nowrap; }
.tabela .vazia { text-align: center; color: var(--texto-2); padding: 2.5rem 1rem; }
.tabela tr.inativa td { opacity: .55; }

.pessoa { font-weight: 700; text-decoration: none; }
.pessoa:hover { color: var(--marca); text-decoration: underline; }
.ponto { display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem;
         border-radius: 50%; background: var(--ok); vertical-align: middle; }
.antes { display: block; margin-top: .15rem; font-size: .78rem; color: var(--texto-2); }
.etiqueta { display: inline-block; margin-top: .3rem; padding: .1rem .5rem;
            border-radius: 6px; background: var(--erro-suave); color: var(--erro);
            font: 700 .7rem var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.grupo { display: inline-block; margin: 0 .3rem .3rem 0; padding: .15rem .55rem;
         border-radius: 6px; background: var(--marca-suave); color: var(--marca);
         font: 600 .76rem var(--sans); }

.ficha-pessoa { margin: 1.5rem 0 0; display: grid; gap: .1rem; }
.ficha-pessoa > div { display: flex; gap: 1rem; padding: .6rem 0;
                      border-bottom: 1px solid var(--borda); }
.ficha-pessoa > div:last-child { border-bottom: 0; }
.ficha-pessoa dt { flex: 0 0 11rem; margin: 0; font: 700 .86rem var(--sans);
                   color: var(--texto-2); }
.ficha-pessoa dd { margin: 0; font-size: .95rem; }

.acoes { margin-top: 1rem; }
.acoes h2, .titulo-bloco { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 800; }
.acoes form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
              padding: .9rem 0; border-bottom: 1px solid var(--borda); }
.acoes form:last-child { border-bottom: 0; padding-bottom: 0; }
.acoes .botao { width: auto; margin: 0; flex: 0 0 auto; min-width: 12rem; }
.acoes .dica { flex: 1 1 14rem; font-size: .86rem; color: var(--texto-2); }
.botao.secundario { background: transparent; color: var(--marca);
                    border: 1.5px solid var(--borda); }
.botao.secundario:hover { border-color: var(--marca); filter: none; }
.botao.perigo { background: transparent; color: var(--erro);
                border: 1.5px solid currentColor; }
.botao.perigo:hover { background: var(--erro); color: var(--superficie); filter: none; }

.historico { list-style: none; margin: 0; padding: 0; }
.historico li { display: flex; flex-wrap: wrap; gap: .5rem .9rem;
                padding: .6rem 0; border-bottom: 1px solid var(--borda); }
.historico li:last-child { border-bottom: 0; }
.quando-h { flex: 0 0 9.5rem; font-size: .8rem; color: var(--texto-2); }
.acao { font: 700 .8rem var(--sans); text-transform: uppercase; letter-spacing: .05em; }
.acao.entrou { color: var(--ok); }
.acao.abriu { color: var(--marca); }
.doc-h { flex: 1 1 12rem; font-size: .9rem; }
.sem-historico { margin: 0; color: var(--texto-2); }

@media (max-width: 34rem) {
  .ficha-pessoa > div { flex-direction: column; gap: .15rem; }
  .ficha-pessoa dt { flex: none; }
  .acoes .botao { width: 100%; }
}

.paginas { display: flex; align-items: center; justify-content: center;
           gap: 1.25rem; margin: 1.5rem 0 0; font-size: .92rem; }
.paginas a { padding: .6rem 1.1rem; min-height: 44px; display: inline-flex;
             align-items: center; border: 1px solid var(--borda);
             border-radius: 100px; background: var(--superficie);
             font-weight: 600; text-decoration: none; }
.paginas a:hover { border-color: var(--marca); color: var(--marca); }
.paginas .onde { color: var(--texto-2); font-weight: 600; }
.alternar { color: var(--marca); font-weight: 700; white-space: nowrap; }

/* S17 — tela de tentativas barradas.
   No computador e uma tabela comum. No celular ela vira cartao empilhado, e
   nao uma tabela que rola de lado: o dado que mais importa aqui e o endereco
   de internet — e ele que denuncia ataque — e numa tabela rolante ele fica
   escondido fora da tela justo na hora em que a Camila precisa dele. */
@media (max-width: 40rem) {
  .tentativas thead { display: none; }
  .tentativas, .tentativas tbody, .tentativas tr, .tentativas td { display: block; }
  .tentativas tr { padding: .9rem 1rem; border-bottom: 1px solid var(--borda); }
  .tentativas tbody tr:last-child { border-bottom: 0; }
  .tentativas td { padding: .1rem 0; border-bottom: 0; }
  .tentativas .mono { white-space: normal; }
  .tentativas .t-quando { font-size: .78rem; color: var(--texto-2); }
  .tentativas .t-de-onde::before { content: "de "; color: var(--texto-2); }
  .tentativas .t-motivo { margin-top: .25rem; font-weight: 600; }
  .tentativas .vazia { text-align: left; padding: 1.5rem 0; }
}

/* No celular a pagina de privacidade e' so texto: cabecalho menor e paragrafo
   com mais entrelinha. O que ajuda a ler no computador atrapalha no telefone. */
@media (max-width: 34rem) {
  .folha-leitura .entrada h1 { font-size: 1.45rem; }
  .folha-leitura .texto h2 { font-size: 1.08rem; margin-top: 2rem; }
  .folha-leitura .texto p,
  .folha-leitura .texto li { font-size: .95rem; line-height: 1.7; }
}

/* ==========================================================================
   A faixa de aviso — fica em TODA página, o tempo todo.

   Ela é a defesa mais importante do portal: diz quem organizou, de onde vêm
   os documentos e como a análise foi feita. Por isso é fixa e não fecha —
   aviso que se fecha é aviso que a maioria nunca leu.

   O texto foi escrito para ser verdadeiro linha por linha. "Conferida contra
   os documentos" é o que de fato aconteceu; não diz "validada por moradores",
   que ainda não aconteceu, nem "sem erros", que ninguém pode prometer.
   ========================================================================== */
/* Valor de partida, so para o instante antes do portal.js medir a altura
   de verdade. Generoso de proposito: sobrar espaco por um piscar e' bem
   melhor que a faixa tapar o titulo. */
:root{ --faixa: 8rem; }

.faixa-aviso{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem 1rem; 
  background:#0d3d5c; color:#dceaf5;
  font:500 .78rem/1.35 var(--sans,system-ui);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.faixa-aviso .sino{ flex:0 0 auto; width:1.05rem; height:1.05rem; opacity:.85 }
.faixa-aviso p{ margin:0 }
.faixa-aviso b{ color:#fff; font-weight:700 }
.faixa-aviso a{ color:#fff; text-decoration:underline; text-underline-offset:2px }

/* Todo o resto desce. A lateral e o topo grudado também, senão eles passam
   por baixo da faixa. */
body{ padding-top:var(--faixa) }
.lateral{ top:var(--faixa) }
.topo{ top:var(--faixa) }
.veu{ top:var(--faixa) }


@media (max-width:34rem){
  .faixa-aviso{ padding:.5rem .8rem; font-size:.71rem; gap:.45rem; align-items:flex-start }
  .faixa-aviso .sino{ margin-top:.15rem }
}