/* =========================================================================
   Radar Moteleiro — estilo do portal.

   CSS puro, sem pré-processador. O projeto de origem compilava SCSS em tempo
   de execução, o que exigia um motor JavaScript com binário nativo só para
   Windows — a única dependência que impedia este portal de rodar em Linux.
   As custom properties abaixo fazem o trabalho que as variáveis do SCSS
   faziam, e são lidas pelo navegador direto, sem etapa de compilação.

   Ordem: tokens, base, cabeçalho, home, listagem, artigo, formulários,
   rodapé, utilidades.
   ========================================================================= */

/* ---------------------------------------------------------------- fontes */

/* Servidas pelo próprio portal, e não pelo Google Fonts. São duas conexões
   externas a menos no caminho crítico, nenhum dado de visitante saindo para
   terceiro — o que a política de privacidade daqui promete — e nenhuma
   dependência de um serviço de fora para a página renderizar com a cara
   certa. Só o subconjunto latino: ele cobre o português inteiro e os dois
   arquivos somam 87 KB.

   O caminho é relativo a este arquivo, e não à raiz do site. Assim ele
   continua certo se um dia o portal for montado sob um prefixo. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-var.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* Marca. O azul é a cor institucional; o âmbar é o acento e aparece pouco,
     de propósito — âmbar em tudo deixa de sinalizar qualquer coisa. */
  --azul: #0f2a52;
  --azul-medio: #1d4e89;
  --azul-claro: #eef3fa;
  --ambar: #e59413;
  --ambar-claro: #fdf3e0;

  /* Texto */
  --tinta: #14243c;
  --tinta-2: #384352;
  --tinta-3: #6b7684;

  /* Superfícies */
  --fundo: #ffffff;
  --fundo-quente: #faf8f5;
  --linha: #e2e6ec;
  --linha-suave: #f1f3f6;

  /* Tipografia. A serifada é para título; a sem serifa, para tudo que se lê
     de relance — rótulo, data, menu, formulário. */
  --serifada: "Playfair Display", Georgia, "Times New Roman", serif;
  --sem-serifa: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --raio: 4px;
  --largura: 1220px;

  /* Coluna de leitura mais estreita que o container. Linha longa demais faz o
     olho perder a próxima ao voltar; o alvo são uns 70 caracteres. */
  --leitura: 720px;
}

/* -------------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;

  /* Rede de proteção. O corpo do artigo é HTML digitado no editor, e um dia
     alguém vai colar uma tabela larga, um iframe com largura fixa ou uma
     palavra sem espaço que não cabe. Nada disso pode fazer a página inteira
     rolar de lado no celular — o defeito aparece longe da causa e é dos mais
     difíceis de rastrear. As regras de .rolavel e overflow-wrap tratam os
     casos conhecidos; esta linha cuida dos que ainda não aconteceram. */
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  font-family: var(--sem-serifa);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta-2);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serifada);
  color: var(--azul);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

a {
  color: var(--azul-medio);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--linha);
  margin: 40px 0;
}

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

/* Um alvo de teclado que aparece só quando alcançado pelo Tab. Sem ele, quem
   navega sem mouse percorre o menu inteiro em toda página antes de chegar ao
   texto. */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--azul);
  color: #fff;
  padding: 12px 20px;
}

.pular:focus {
  left: 8px;
  top: 8px;
}

/* -------------------------------------------------------------- cabeçalho */

.topo {
  border-bottom: 1px solid var(--linha);
  background: var(--fundo);
}

.topo__linha {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--azul);
  flex-shrink: 0;
}

.marca:hover {
  text-decoration: none;
}

.marca img {
  width: 46px;
  height: 46px;
  display: block;
}

/* O logotipo em texto, e não uma imagem com as palavras dentro: assim ele
   herda a fonte já carregada, fica nítido em qualquer densidade de tela e
   continua legível para busca e leitor de tela. */
.marca__nome {
  display: block;
  font-family: var(--sem-serifa);
  font-weight: 800;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--azul);
}

.marca__sub {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--azul-medio);
  margin-top: 3px;
}

.topo__assinatura {
  font-size: 14.5px;
  color: var(--tinta-3);
  max-width: 220px;
  line-height: 1.35;
}

.topo__acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.topo__link {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--tinta-2);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: var(--sem-serifa);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.botao--azul {
  background: var(--azul);
  color: #fff;
}

.botao--azul:hover {
  background: #16375f;
  color: #fff;
  text-decoration: none;
}

.botao--ambar {
  background: var(--ambar);
  color: #20180a;
}

.botao--ambar:hover {
  background: #d1850c;
  text-decoration: none;
}

.botao--contorno {
  background: transparent;
  border-color: var(--linha);
  color: var(--tinta-2);
}

.botao--contorno:hover {
  border-color: var(--azul);
  color: var(--azul);
  text-decoration: none;
}

/* ------------------------------------------------------------------- menu */

.menu {
  border-bottom: 1px solid var(--linha);
  background: var(--fundo);
}

.menu__linha {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 6px;

  /* Um item flex não encolhe abaixo do próprio conteúdo sem isto: o padrão
     de min-width num contêiner flex é `auto`, e não zero. Sem a linha
     abaixo, a lista de editorias empurra a largura do documento no celular
     — e a página INTEIRA passa a rolar de lado, cabeçalho e artigo junto,
     não só o menu. */
  min-width: 0;
}

.menu__lista {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;

  /* As editorias passam da largura no celular e deslizam dentro da própria
     faixa. Os dois valores abaixo são o que mantém essa rolagem contida:
     `min-width: 0` permite encolher, `flex: 1 1 auto` ocupa o espaço que
     sobra depois da lupa. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;

  /* A barra de rolagem some; o gesto continua funcionando. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.menu__lista::-webkit-scrollbar {
  display: none;
}

.menu__lista a {
  display: block;
  padding: 15px 16px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--tinta-2);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.menu__lista a:hover {
  color: var(--azul);
  text-decoration: none;
}

.menu__lista a[aria-current] {
  color: var(--azul);
  font-weight: 600;
  border-bottom-color: var(--ambar);
}

.busca {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.busca input {
  width: 0;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--tinta);
  transition: width 0.2s ease, border-color 0.2s ease;
}

/* O campo abre ao receber foco ou quando já traz um termo. Fechado, ele é só
   a lupa — que é o que o desenho pede — mas continua sendo um input de
   verdade, alcançável pelo Tab e submetível pelo Enter, sem depender de
   script para existir. */
.busca input:focus,
.busca input:not(:placeholder-shown) {
  width: 190px;
  border-bottom-color: var(--linha);
}

.busca button {
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--tinta-2);
  display: flex;
}

.busca button:hover {
  color: var(--azul);
}

/* ------------------------------------------------------------- home: hero */

.rotulo {
  display: inline-block;
  font-family: var(--sem-serifa);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
}

.rotulo--editoria {
  color: var(--tinta-3);
}

.rotulo--editoria:hover {
  color: var(--azul);
}

.destaque {
  display: grid;
  gap: 40px;
  padding: 36px 0 44px;
  border-bottom: 1px solid var(--linha);
}

@media (min-width: 900px) {
  .destaque {
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: 48px;
  }
}

.destaque__principal h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  margin: 18px 0 12px;
}

.destaque__principal h1 a {
  color: inherit;
}

.destaque__dek {
  font-size: 17.5px;
  color: var(--tinta-2);
  margin: 0;
  max-width: 62ch;
}

.capa {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--linha-suave);
  border-radius: var(--raio);
}

/* Quando não há imagem, um bloco com a marca em marca-d'água. Um espaço vazio
   no lugar da capa desmonta a grade e faz a página parecer quebrada. */
.capa--vazia {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 70% 25%, rgba(229, 148, 19, 0.14), transparent 55%),
    linear-gradient(140deg, #10294c, #1d4e89);
}

.capa--vazia img {
  width: 34%;
  max-width: 130px;
  opacity: 0.5;
}

/* ---------------------------------------------------------- home: no radar */

.no-radar > h2 {
  font-size: 27px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--azul);
}

.no-radar ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.no-radar li + li {
  border-top: 1px solid var(--linha);
}

.no-radar__item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  padding: 20px 0;
}

/* O numeral em serifada e âmbar. Ele ordena a leitura e, no desenho da
   referência, é o que dá ao bloco cara de pauta de redação em vez de lista
   de links. */
.no-radar__n {
  font-family: var(--serifada);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: var(--ambar);
}

.no-radar__titulo {
  font-family: var(--serifada);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.28;
  color: var(--azul);
  margin: 6px 0 0;
}

.no-radar__titulo a {
  color: inherit;
}

.no-radar__seta {
  margin-top: 10px;
  color: var(--tinta-3);
  font-size: 15px;
}

/* ---------------------------------------------------------------- seções */

.secao {
  padding: 46px 0;
  border-bottom: 1px solid var(--linha);
}

.secao__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.secao__cabeca h2 {
  font-size: 30px;
  margin: 0;
}

.secao__mais {
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- cartões */

.grade {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.cartao {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cartao .capa {
  aspect-ratio: 3 / 2;
  margin-bottom: 4px;
}

.cartao__titulo {
  font-family: var(--serifada);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--azul);
  margin: 0;
}

.cartao__titulo a {
  color: inherit;
}

.cartao__resumo {
  font-size: 15px;
  color: var(--tinta-2);
  margin: 0;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--tinta-3);
}

.meta__ponto::before {
  content: "·";
  margin-right: 10px;
}

/* -------------------------------------------------------------- listagens */

.cabeca-da-pagina {
  padding: 46px 0 30px;
  border-bottom: 1px solid var(--linha);
}

.cabeca-da-pagina h1 {
  font-size: clamp(30px, 4vw, 42px);
  margin: 12px 0 10px;
}

.cabeca-da-pagina p {
  margin: 0;
  max-width: 68ch;
  color: var(--tinta-2);
}

.lista-artigos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-artigos > li {
  padding: 30px 0;
  border-bottom: 1px solid var(--linha);
}

.item {
  display: grid;
  gap: 22px;
  align-items: start;
}

@media (min-width: 760px) {
  .item {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

.item .capa {
  aspect-ratio: 3 / 2;
}

.item__titulo {
  font-family: var(--serifada);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--azul);
  margin: 10px 0 8px;
}

.item__titulo a {
  color: inherit;
}

.item__resumo {
  margin: 0 0 12px;
  font-size: 15.5px;
  max-width: 70ch;
}

.paginacao {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 0 60px;
}

.paginacao__vazio {
  visibility: hidden;
}

.vazio {
  padding: 70px 0;
  text-align: center;
  color: var(--tinta-3);
}

.vazio h2 {
  font-size: 26px;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------- artigo */

.artigo {
  padding: 42px 0 20px;
}

.artigo__cabeca {
  max-width: var(--leitura);
  margin: 0 auto 28px;
}

.artigo__cabeca h1 {
  font-size: clamp(31px, 4.6vw, 48px);
  margin: 14px 0 16px;
}

.artigo__resumo {
  font-size: 19px;
  line-height: 1.55;
  color: var(--tinta-2);
  margin: 0 0 22px;
}

.assinatura {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  font-size: 14px;
  color: var(--tinta-3);
}

.assinatura__foto {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--azul-claro);
}

.assinatura__nome {
  font-weight: 600;
  color: var(--tinta);
}

.artigo__capa {
  margin: 30px auto;
  max-width: 980px;
}

.artigo__capa img {
  width: 100%;
  border-radius: var(--raio);
}

.artigo__credito {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--tinta-3);
}

/* O corpo do texto. As regras valem para o HTML que sai do editor, que não
   tem classe nenhuma — daí os seletores por elemento. */
.corpo {
  max-width: var(--leitura);
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.78;
  color: var(--tinta-2);
}

.corpo > * + * {
  margin-top: 1.15em;
}

/* URL comprida colada no meio do texto é o caso mais comum de palavra que
   não cabe na coluna. Sem isto ela estica o bloco e desalinha a leitura. */
.corpo p,
.corpo li,
.corpo h2,
.corpo h3 {
  overflow-wrap: break-word;
}

.corpo h2 {
  font-size: 28px;
  margin-top: 1.9em;
  margin-bottom: 0.5em;
}

.corpo h3 {
  font-size: 22px;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}

.corpo ul,
.corpo ol {
  padding-left: 1.3em;
}

.corpo li + li {
  margin-top: 0.45em;
}

.corpo img {
  border-radius: var(--raio);
  display: block;
}

.corpo blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--ambar);
  font-family: var(--serifada);
  font-size: 21px;
  line-height: 1.45;
  color: var(--azul);
}

.corpo blockquote p {
  margin: 0;
}

.corpo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}

.corpo th,
.corpo td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}

.corpo th {
  background: var(--linha-suave);
  font-weight: 600;
  color: var(--tinta);
}

/* Tabela larga rola dentro da própria caixa. Sem isto, ela empurra a largura
   do documento e a página inteira ganha rolagem horizontal no celular. */
.rolavel {
  overflow-x: auto;
}

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--raio);
}

/* O quadro que responde à pergunta central do portal. */
.radar-do-gestor {
  max-width: var(--leitura);
  margin: 44px auto;
  padding: 28px 30px;
  background: var(--azul-claro);
  border-left: 4px solid var(--azul);
  border-radius: var(--raio);
}

.radar-do-gestor h2 {
  font-size: 21px;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.radar-do-gestor h2 img {
  width: 24px;
  height: 24px;
}

.radar-do-gestor ul {
  margin: 0;
  padding-left: 20px;
  font-size: 16.5px;
  line-height: 1.6;
}

.radar-do-gestor li + li {
  margin-top: 10px;
}

.fontes {
  max-width: var(--leitura);
  margin: 40px auto;
  padding-top: 26px;
  border-top: 1px solid var(--linha);
}

.fontes h2 {
  font-size: 18px;
  margin-bottom: 12px;
}

.fontes ol {
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  color: var(--tinta-3);
}

.fontes li + li {
  margin-top: 8px;
}

.selo-oficial {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ambar-claro);
  color: #8a5a05;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.compartilhar {
  max-width: var(--leitura);
  margin: 32px auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: var(--tinta-3);
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.etiquetas a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--tinta-2);
}

.etiquetas a:hover {
  border-color: var(--azul);
  color: var(--azul);
  text-decoration: none;
}

/* ------------------------------------------------------------------ avisos */

.aviso {
  padding: 14px 18px;
  border-radius: var(--raio);
  font-size: 14.5px;
  margin: 0 0 22px;
}

.aviso--exemplo {
  background: var(--ambar-claro);
  border: 1px solid #f0d3a0;
  color: #7d5205;
}

.aviso--rascunho {
  background: #fdeaea;
  border: 1px solid #f2c2c2;
  color: #8c2020;
}

.aviso--ok {
  background: #e9f6ee;
  border: 1px solid #bfe3cd;
  color: #1c5f36;
}

.aviso--erro {
  background: #fdeaea;
  border: 1px solid #f2c2c2;
  color: #8c2020;
}

/* -------------------------------------------------------------- newsletter */

.assine {
  background: var(--azul);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.assine__inner {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 54px 24px;
  display: grid;
  gap: 34px;
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 860px) {
  .assine__inner {
    grid-template-columns: 210px minmax(0, 1fr);
  }
}

.assine__marca {
  display: none;
}

@media (min-width: 860px) {
  .assine__marca {
    display: block;
    width: 190px;
    opacity: 0.16;
  }
}

.assine h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  color: #fff;
  margin: 0 0 8px;
  max-width: 20ch;
}

.assine p {
  margin: 0 0 20px;
  color: #c3d2e6;
  font-size: 16px;
}

.assine__form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 620px;
}

.assine__form input[type="email"] {
  flex: 1 1 240px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: #fff;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--tinta);
}

.assine__form input[type="email"]::placeholder {
  color: #97a2b0;
}

.assine__form .botao {
  padding: 14px 26px;
}

.assine__nota {
  margin: 14px 0 0;
  font-size: 13px;
  color: #9fb3cd;
}

.assine__nota a {
  color: #d9e4f2;
  text-decoration: underline;
}

/* O campo-armadilha. Escondido de quem enxerga e de quem usa leitor de tela,
   mas presente no formulário para o robô que preenche tudo cair nele.
   `display:none` não serviria: parte dos robôs ignora campo assim. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------- formulário */

.formulario {
  max-width: 640px;
}

.campo {
  margin-bottom: 20px;
}

.campo label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 6px;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="url"],
.campo input[type="password"],
.campo input[type="datetime-local"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-family: inherit;
  font-size: 15.5px;
  color: var(--tinta);
  background: #fff;
}

.campo textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--azul-medio);
  outline: 2px solid rgba(29, 78, 137, 0.15);
  outline-offset: 0;
}

.campo__dica {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--tinta-3);
}

.campo__erro,
.validation-summary-errors ul {
  color: #a52121;
  font-size: 13.5px;
}

.validation-summary-errors ul {
  margin: 0 0 18px;
  padding-left: 18px;
}

/* --------------------------------------------------------------- páginas */

.texto {
  max-width: var(--leitura);
  margin: 0 auto;
  padding: 46px 0 70px;
}

.texto h1 {
  font-size: clamp(30px, 4vw, 42px);
}

.texto h2 {
  font-size: 25px;
  margin-top: 1.8em;
}

.texto ul {
  padding-left: 1.2em;
}

.texto li + li {
  margin-top: 0.4em;
}

/* ---------------------------------------------------------------- rodapé */

.rodape {
  background: var(--fundo-quente);
  border-top: 1px solid var(--linha);
  margin-top: auto;
}

.rodape__inner {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  gap: 30px;
}

@media (min-width: 800px) {
  .rodape__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

.rodape__assinatura {
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--tinta-3);
  max-width: 46ch;
}

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
}

.rodape__links a {
  color: var(--tinta-2);
}

.rodape__fim {
  border-top: 1px solid var(--linha);
  padding: 18px 24px;
  text-align: center;
  font-size: 13.5px;
  color: var(--tinta-3);
}

/* O acesso à administração fica discreto no rodapé, sem palavra que anuncie
   o que é: o portal não precisa divulgar onde ficam as chaves. */
.rodape__admin {
  color: var(--linha);
}

/* ------------------------------------------------------------ celular */

@media (max-width: 780px) {
  .topo__linha {
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 20px;
  }

  .topo__assinatura {
    display: none;
  }

  .marca img {
    width: 40px;
    height: 40px;
  }

  .marca__nome {
    font-size: 21px;
  }

  .marca__sub {
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  .container,
  .menu__linha,
  .rodape__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .secao {
    padding: 34px 0;
  }

  .secao__cabeca h2 {
    font-size: 25px;
  }

  .busca input:focus,
  .busca input:not(:placeholder-shown) {
    width: 130px;
  }
}