/* ===========================================================================
   PÁGINAS DE TEXTO — política de privacidade e a tela de 404.

   MEDIDO na política do site no ar: ela NÃO tem CSS próprio, usa a tipografia
   do tema e a coluna cheia do container (1140px em 1440). O texto começa
   imediatamente abaixo do cabeçalho, sem respiro nenhum — é assim lá, e é
   assim aqui.

   Os tamanhos (h1 36/54, h2 30/45, h3 24/36, corpo 14/21, 30px entre blocos)
   vêm do `style.css`, que é onde a tipografia base foi medida. Esta folha só
   trata do que é DESTAS páginas.
   ========================================================================= */

/* ---- POLÍTICA DE PRIVACIDADE -------------------------------------------- */
/* MEDIDO: o texto encosta no cabeçalho e no rodapé — o site no ar não põe
   respiro vertical nenhum nesta página. Os 15px laterais são os do container e
   ficam: é o que põe o texto na coluna de 1140px. */
.institucional {
    padding-top: 0;
    /* MEDIDO: 21px depois do último parágrafo. No site no ar isso é uma LINHA
       VAZIA: o ponto final da última frase ficou FORA do `</p>` ("</p>."), e o
       navegador desenha esse ponto solto numa linha própria. O ponto voltou
       para dentro da frase (é o item 3 da lista de correções do README) e a
       linha virou respiro, para o rodapé cair na mesma altura da referência. */
    padding-bottom: 21px;
}

/* MEDIDO: depois de "Política de Cookies Adicon" a referência tem 51px até o
   próximo título, e não 30 — no HTML dela existe um <br> solto depois do </h2>,
   que rende uma linha de 21px. O <br> não veio; a medida, sim. */
.institucional h2 {
    margin-bottom: 51px;
}

/* MEDIDO: a lista não tem recuo — o texto do item alinha com o dos parágrafos
   e o marcador fica pendurado à esquerda, na margem do container. */
.institucional ul {
    padding-left: 0;
    list-style: disc outside;
}

.institucional li {
    margin: 0;
}

/* MEDIDO: a lista A/B/C do "Compromisso do usuário" não tem respiro nenhum até
   o título seguinte. No site no ar esses três itens são `<li>` SOLTOS, sem
   `<ul>` em volta (HTML inválido, e por isso sem a margem de lista); aqui eles
   estão numa lista de verdade, e a margem é zerada para o bloco cair na mesma
   altura da referência. */
.institucional__itens {
    margin-bottom: 0;
}

/* ---- 404 ---------------------------------------------------------------- */
/* NÃO EXISTE NO SITE NO AR (lá um endereço errado cai no 404 do servidor, sem
   layout). É nossa, então segue a tipografia da casa. */
.erro {
    padding: 80px 0;
    text-align: center;
}

.erro__codigo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    color: var(--cor-acento);
}

.erro__titulo {
    margin: 10px 0 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 45px;
    letter-spacing: 1px;
    color: var(--cor-titulo);
    text-transform: uppercase;
}

.erro__texto {
    max-width: 700px;
    margin: 10px auto 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 27px;
    color: var(--cor-media);
}

.erro__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 30px 0 0;
}

/* Botão vazado — só o 404 usa; o site no ar não tem nada parecido. */
.botao--vazado {
    background: transparent;
    border: 2px solid var(--cor-acento);
    border-bottom-width: 2px;
    color: var(--cor-acento);
    line-height: 36px;
    text-shadow: none;
}

.botao--vazado:hover {
    background: var(--cor-acento);
    color: var(--cor-branco);
}

@media (max-width: 767px) {
    .erro__codigo {
        font-size: 64px;
    }

    .erro__titulo {
        font-size: 26px;
        line-height: 39px;
    }
}


/* ---- RODAPÉ NO PÉ DA JANELA (só na página de erro) --------------------- */
/* O 404 é curto: em tela de 880px o conteúdo acabava em 680 e sobravam 200px
   de branco DEPOIS do rodapé, com ele plantado no meio da tela. Aqui o corpo
   da página vira uma coluna de, no mínimo, uma janela de altura, e o `main`
   cresce para ocupar o que sobra — o rodapé desce e encosta no pé.

   ESCOPADO NA PÁGINA DE ERRO (`data-pagina="erro"`, que o 404.php define): a
   home tem a capa `position: fixed` e o miolo passando por cima dela, e virar
   o corpo dela em `flex` mexeria nessa pilha sem necessidade — lá o conteúdo
   já passa da janela em qualquer tela.

   Os filhos que não são header/main/rodapé ficam de fora da conta porque já
   saem do fluxo: o "pular para o conteúdo" é `absolute`, o "voltar ao topo" e
   a tarja de cookies são `fixed`. */
body[data-pagina="erro"] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body[data-pagina="erro"] main {
    /* `0 auto` e não `1`: o `main` cresce para preencher, mas nunca ENCOLHE
       abaixo do próprio conteúdo — numa janela baixa o texto continua inteiro
       e a página ganha rolagem, em vez de o conteúdo ser espremido. */
    flex: 1 0 auto;
}