/* Cores geradas pelo build a partir do config.json (docs/IDENTIDADE.md) */
:root{--fundo:#121016;--nucleo:#08060d;--superficie:#1b1721;--texto:#f7f3eb;--texto-2:#b8a9c8;--linha:#39313f;--ametista:#ac7ae8;--tinta-botao:#19151f;--ascii-1:#65328e;--ascii-2:#9954de;--ascii-3:#ba79fa;--ascii-4:#f7f0ff;--texto-leitura:#E0DCD6;--linha-forte:#6E676F;--ametista-escura:#966BCB;--fundo-rgb:18 16 22}

/*
  Folha de estilo do site da ADDO Guias. Uma folha só, celular primeiro, tema escuro da identidade
  (docs/IDENTIDADE.md): ametista em pouca quantidade sobre preto profundo, linhas finas, cantos
  discretos, muito espaço. Sem degradê, sem néon, sem vidro fosco.

  As cores não ficam aqui: o build lê "cores" do config.json e escreve, no começo do arquivo final,
  as variáveis --fundo, --nucleo, --superficie, --texto, --texto-2, --linha, --ametista,
  --tinta-botao, --ascii-1 a --ascii-4 e as derivadas (--texto-leitura, --linha-forte,
  --ametista-escura, --fundo-rgb).

  Fontes locais (woff2, só os caracteres usados em português): Instrument Serif nos títulos,
  Manrope (variável, pesos 400 a 800) no texto, na navegação e na segunda linha forte, JetBrains
  Mono nos pedidos para copiar.
*/

/* ---------- Fontes ---------- */

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fontes/manrope-variavel.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fontes/instrument-serif-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fontes/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, 'Courier New', monospace;

  --margem: clamp(1.25rem, 4.5vw, 4rem);
  --largura: 80rem;
  --leitura: 40rem;
  --raio: 4px;
  --secao: clamp(5rem, 11vw, 9.5rem);
  --suave: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1.5rem;
  background: var(--fundo);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  overflow-x: clip;
}

@media (min-width: 48em) {
  body {
    font-size: 1.0625rem;
  }
}

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

h1,
h2,
h3 {
  margin: 0;
  color: var(--texto);
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

strong {
  font-weight: 700;
}

a {
  color: var(--ametista);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--ascii-3);
}

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

::selection {
  background: var(--ametista);
  color: var(--tinta-botao);
}

.pular {
  position: absolute;
  left: var(--margem);
  top: 0;
  z-index: 10;
  transform: translateY(-120%);
  padding: 0.75rem 1rem;
  border-radius: 0 0 var(--raio) var(--raio);
  background: var(--texto);
  color: var(--fundo);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.pular:focus {
  transform: none;
}

.moldura {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}

.moldura-leitura {
  max-width: calc(var(--leitura) + 2 * var(--margem));
}

/* Rótulo pequeno em caixa alta (sobretítulos e nomes de seção). */
.rotulo {
  margin: 0 0 1.25rem;
  color: var(--texto-2);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rotulo a {
  color: inherit;
  text-decoration: none;
}

.rotulo a:hover {
  color: var(--texto);
}

.rotulo-ametista {
  color: var(--ametista);
}

/* Nome de seção seguido de um fio fino até a margem. */
.secao-rotulo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.secao-rotulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--linha);
}

.ver-todos {
  margin: 2.25rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ver-todos a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.625rem;
  color: var(--texto);
  text-decoration: none;
}

.ver-todos a::after {
  content: '\2192';
  color: var(--ametista);
  transition: transform 0.3s var(--suave);
}

.ver-todos a:hover::after {
  transform: translateX(4px);
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--ametista);
  border-radius: var(--raio);
  background: var(--ametista);
  color: var(--tinta-botao);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.botao:hover {
  border-color: var(--ascii-3);
  background: var(--ascii-3);
  color: var(--tinta-botao);
}

.botao-secundario {
  border-color: var(--linha-forte);
  background: transparent;
  color: var(--texto);
}

.botao-secundario:hover {
  border-color: var(--ametista);
  background: transparent;
  color: var(--ametista);
}

.botao-em-breve,
.botao-em-breve:hover,
.botao[disabled] {
  border-color: var(--linha);
  background: transparent;
  color: var(--texto-2);
  cursor: not-allowed;
}

/* ---------- Topo ---------- */

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

.topo-dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

@media (min-width: 48em) {
  .topo-dentro {
    min-height: 5rem;
  }
}

/* Logotipo composto: símbolo do kit + ADDO em cima e o descritor embaixo, como no conjunto horizontal. */
.marca {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.5rem;
  color: var(--texto);
  text-decoration: none;
}

.marca:hover {
  color: var(--texto);
}

.marca-simbolo {
  flex: none;
  width: auto;
  height: 1.75rem;
}

.marca-palavra {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3125rem;
  line-height: 1;
}

.marca-nome {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
}

.marca-descritor {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.56em;
  margin-right: -0.56em;
  text-transform: uppercase;
}

/* Logotipo oficial (arquivo em "marca.logo"): no celular precisa caber ao lado dos três links. */
.marca-arquivo img {
  width: auto;
  height: 1.5rem;
}

@media (min-width: 48em) {
  .marca-arquivo img {
    height: 1.875rem;
  }
}

.rodape .marca-arquivo img {
  height: 2.125rem;
}

@media (min-width: 48em) {
  .marca-simbolo {
    height: 2rem;
  }

  .marca-nome {
    font-size: 1rem;
  }

  .marca-descritor {
    font-size: 0.59375rem;
  }
}

.topo-nav ul {
  display: flex;
  gap: clamp(0rem, 2.4vw, 1.75rem);
  margin: 0 -0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.topo-nav a {
  display: block;
  padding: 0.875rem 0.5rem;
  color: var(--texto-2);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.topo-nav a:hover,
.topo-nav a[aria-current='page'] {
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--ametista);
  text-underline-offset: 0.55em;
}

/* ---------- Título editorial (primeira linha em serifa, segunda forte em Manrope) ---------- */

.titulo-editorial {
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.titulo-editorial .linha-serifa {
  display: block;
}

.titulo-editorial .linha-forte {
  display: block;
  margin-top: 0.14em;
  font-family: var(--sans);
  font-size: 0.6em;
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ---------- Início: abertura ---------- */

/*
  A arte ocupa a largura da tela (e um pouco além: as bordas dela são preto puro) e a faixa corta só o
  preto de cima e de baixo. O título fica abaixo, nunca sobre o disco luminoso.
  --arte é a largura da arte; 0.405 = proporção da arte (941/1672) x 0.72 da altura visível.
*/
.abertura {
  --arte: clamp(820px, 112vw, 1720px);
}

.abertura-arte {
  position: relative;
  height: calc(var(--arte) * 0.405);
  overflow: hidden;
  background: var(--fundo);
}

.abertura-arte img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--arte);
  max-width: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

.abertura-arte.ascii-pronto img {
  visibility: hidden;
}

.ascii-tela {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
}

.abertura-texto {
  padding-block: clamp(1rem, 3vw, 2rem) var(--secao);
  text-align: center;
}

.abertura-titulo {
  font-size: clamp(3.25rem, 8.6vw, 6.75rem);
}

.abertura-frase {
  max-width: 34rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  color: var(--texto-2);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.75;
}

/* ---------- Início: catálogo ---------- */

.secao {
  padding-bottom: var(--secao);
}

.catalogo-lista {
  display: grid;
  gap: var(--secao);
  margin: 0;
  padding: 0;
  list-style: none;
}

.livro {
  display: grid;
  gap: 2.75rem;
}

@media (min-width: 48em) {
  .livro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
  }
}

/* A capa como objeto: sobre um pedestal no preto mais fundo, com fio fino e sombra baixa. */
.livro-capa,
.capa-objeto {
  display: grid;
  place-items: center;
  padding: clamp(2.25rem, 7vw, 4.5rem) clamp(2rem, 7vw, 4.5rem);
  border: 1px solid var(--linha);
  border-radius: 2px;
  background: var(--nucleo);
}

.livro-capa img,
.capa-objeto img,
.chamada-capa img,
.convite-capa img {
  width: 100%;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgb(247 243 235 / 0.07), 0 2px 3px rgb(0 0 0 / 0.5), 0 36px 60px -28px rgb(0 0 0 / 0.95);
}

.livro-capa img {
  width: min(100%, 11.5rem);
}

@media (min-width: 48em) {
  .livro-capa img {
    width: min(100%, 15rem);
  }
}

.livro-titulo {
  font-size: clamp(2.625rem, 6vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.livro-titulo a {
  color: inherit;
  text-decoration: none;
}

.livro-titulo a:hover {
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--ametista);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.livro-subtitulo {
  max-width: 34rem;
  margin: 1.25rem 0 1.5rem;
  color: var(--texto);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.55;
}

.livro-descricao {
  max-width: 34rem;
  margin: 0 0 1.25rem;
  color: var(--texto-2);
}

.livro-ficha {
  margin: 0 0 2.25rem;
  color: var(--texto-2);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ---------- Início e /sobre/: Sobre o Ado ---------- */

.sobre-grade {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 56em) {
  .sobre-grade.sobre-com-foto {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 6.5rem);
    align-items: start;
  }
}

.sobre-foto {
  width: min(100%, 11rem);
  margin: 0;
}

@media (min-width: 56em) {
  .sobre-foto {
    width: 100%;
  }
}

.sobre-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  outline: 1px solid var(--linha);
  outline-offset: 0;
}

.sobre-texto {
  max-width: 46rem;
}

.sobre-texto p {
  max-width: 40rem;
  margin: 0 0 1.25em;
  color: var(--texto-2);
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  line-height: 1.8;
}

/* O primeiro parágrafo é a apresentação em voz alta: serifa grande. */
.sobre-texto p:first-child {
  max-width: none;
  margin-bottom: 1.5rem;
  color: var(--texto);
  font-family: var(--serif);
  font-size: clamp(1.4375rem, 3vw, 2.25rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
}

.sobre-texto p:last-child {
  margin-bottom: 0;
}

.redes {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  max-width: 40rem;
  margin: 2.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--linha);
  list-style: none;
}

.redes a {
  display: inline-block;
  padding-block: 0.625rem;
  color: var(--texto);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration-color: var(--ametista);
}

.redes a:hover {
  color: var(--ametista);
}

/* ---------- Listas de artigos ---------- */

.lista-artigos {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linha);
}

.artigo-item {
  position: relative;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--linha);
}

.artigo-item-data {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  margin: 0 0 0.75rem;
  color: var(--texto-2);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.artigo-item-titulo {
  font-size: clamp(1.625rem, 3.2vw, 2.125rem);
  line-height: 1.08;
}

.artigo-item-titulo a {
  color: var(--texto);
  text-decoration: none;
}

/* O item inteiro é clicável (área de toque maior no celular). */
.artigo-item-titulo a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.artigo-item:hover .artigo-item-titulo a {
  text-decoration: underline;
  text-decoration-color: var(--ametista);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.artigo-item-resumo {
  margin: 0.75rem 0 0;
  color: var(--texto-2);
  font-size: 0.9375rem;
  line-height: 1.65;
}

@media (min-width: 56em) {
  .lista-artigos-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(2rem, 4vw, 3.5rem);
    border-top: 0;
  }

  .lista-artigos-grade .artigo-item {
    padding-top: 1.75rem;
    border-top: 1px solid var(--linha);
    border-bottom: 0;
  }

  .lista-artigos-grade .artigo-item-titulo {
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  }
}

/* ---------- Páginas de lista, Sobre e 404 ---------- */

.pagina-topo {
  padding-block: clamp(4rem, 10vw, 7.5rem) clamp(2.5rem, 5vw, 3.5rem);
}

.pagina-titulo {
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.pagina-lide {
  max-width: 36rem;
  margin: 1.5rem 0 0;
  color: var(--texto-2);
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.65;
}

.pagina-lista {
  padding-bottom: var(--secao);
}

/* Coluna centrada: sem foto, o texto não fica encostado à esquerda com a tela vazia ao lado. */
.pagina-sobre {
  max-width: calc(58rem + 2 * var(--margem));
  padding-bottom: var(--secao);
}

.pagina-sobre .pagina-topo {
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.erro {
  padding-block: clamp(4rem, 12vw, 8rem);
}

.erro-caminhos {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linha);
}

.erro-caminhos a {
  display: block;
  padding-block: 1rem;
  border-bottom: 1px solid var(--linha);
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
}

.erro-caminhos a:hover {
  color: var(--ametista);
}

/* ---------- Página do guia ---------- */

.livro-topo {
  padding-block: clamp(3rem, 9vw, 7rem) var(--secao);
}

.livro-topo-grade {
  display: grid;
  gap: clamp(3.5rem, 9vw, 5rem);
}

@media (min-width: 60em) {
  .livro-topo-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    gap: clamp(4rem, 8vw, 8rem);
    align-items: center;
  }
}

.livro-chamada {
  font-size: clamp(2.75rem, 5.8vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.livro-chamada .destaque {
  display: block;
  margin-top: 0.08em;
  color: var(--ametista);
}

.livro-lide {
  max-width: 36rem;
  margin: 1.75rem 0 2.5rem;
  color: var(--texto-2);
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.65;
}

.compra {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.compra-ficha {
  margin: 0;
  color: var(--texto-2);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

@media (min-width: 30em) {
  .compra {
    align-items: flex-start;
  }

  .compra .botao,
  .chamada-botao .botao {
    min-width: 16rem;
  }
}

.capa-objeto img {
  width: min(100%, 16rem);
}

@media (min-width: 60em) {
  .capa-objeto {
    padding: 4.5rem 3.5rem;
  }

  .capa-objeto img {
    width: 100%;
  }
}

.faixa {
  padding-block: clamp(4.5rem, 10vw, 8rem);
  border-top: 1px solid var(--linha);
}

.faixa-titulo {
  max-width: 18ch;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.prosa-grande {
  max-width: 40rem;
  margin-inline: auto;
  color: var(--texto-leitura);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.65;
}

.prosa-grande p {
  margin-bottom: 1.1em;
}

.prosa-grande p:last-child {
  margin-bottom: 0;
}

.prosa-grande .fecho {
  margin-top: 1.6em;
  color: var(--texto);
  font-family: var(--serif);
  font-size: clamp(2.125rem, 4.6vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

/* Para quem é e para quem não é */

.publico-grade {
  display: grid;
  gap: 4rem;
}

@media (min-width: 48em) {
  .publico-grade {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 7vw, 7rem);
  }
}

.publico-coluna {
  padding-top: 1.75rem;
  border-top: 1px solid var(--ametista);
}

.publico-nao {
  border-top-color: var(--linha-forte);
}

.publico-titulo {
  margin-bottom: 1.75rem;
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  line-height: 1;
}

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

.lista-marcada li {
  position: relative;
  margin-bottom: 1.125rem;
  padding-left: 2rem;
  color: var(--texto-leitura);
  line-height: 1.6;
}

.lista-marcada li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1rem;
  height: 1rem;
  background: var(--ametista);
  -webkit-mask: var(--marcador) center / contain no-repeat;
  mask: var(--marcador) center / contain no-repeat;
}

.lista-sim {
  --marcador: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.6 3.6L13.6 4.4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lista-nao {
  --marcador: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.lista-nao li::before {
  background: var(--texto-2);
}

/* O que você vai aprender */

.lista-numerada {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
}

@media (min-width: 56em) {
  .lista-numerada {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(3rem, 6vw, 5.5rem);
  }
}

.lista-numerada li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  align-items: baseline;
  padding-block: 1.375rem;
  border-top: 1px solid var(--linha);
  color: var(--texto-leitura);
  counter-increment: item;
}

.lista-numerada li::before {
  content: counter(item, decimal-leading-zero);
  color: var(--ametista);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.lista-numerada strong,
.lista-marcada strong,
.bonus-grade strong {
  color: var(--texto);
  font-weight: 700;
}

/* Bônus */

.bonus-grade {
  display: grid;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .bonus-grade {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.bonus-grade li {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
  color: var(--texto-leitura);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.bonus-grade li::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 2.5rem;
  height: 1px;
  background: var(--ametista);
}

/* O que este guia não esconde */

.aviso-honesto {
  max-width: 52rem;
  padding: clamp(2rem, 5.5vw, 3.75rem);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}

.aviso-honesto .faixa-titulo {
  max-width: none;
  font-size: clamp(1.875rem, 3.8vw, 2.75rem);
}

.aviso-honesto-texto p {
  max-width: 40rem;
  color: var(--texto-leitura);
  line-height: 1.75;
}

.aviso-honesto-texto p:last-child {
  margin-bottom: 0;
}

/* Perguntas frequentes */

@media (min-width: 60em) {
  .faq-grade {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
  }
}

.faq-lista {
  max-width: 46rem;
  border-top: 1px solid var(--linha);
}

.faq-item {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--linha);
}

.faq-item h3 {
  margin-bottom: 0.5rem;
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
}

.faq-item p {
  margin: 0;
  color: var(--texto-2);
  line-height: 1.7;
}

.faq-item p + p {
  margin-top: 0.75em;
}

/* Chamada final */

.chamada-final {
  padding-block: var(--secao);
  border-top: 1px solid var(--linha);
  text-align: center;
}

.chamada-dentro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
}

.chamada-capa {
  width: 8rem;
}

@media (min-width: 48em) {
  .chamada-capa {
    width: 9.5rem;
  }
}

.chamada-texto {
  max-width: 28ch;
  margin: 0;
  color: var(--texto);
  font-family: var(--serif);
  font-size: clamp(1.875rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.chamada-botao {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.chamada-botao .botao {
  width: 100%;
  max-width: 22rem;
}

/* ---------- Artigo ---------- */

.artigo-topo {
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2.25rem, 4.5vw, 3.25rem);
}

.artigo-titulo {
  font-size: clamp(2.5rem, 6.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.artigo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  margin: 1.5rem 0 0;
  color: var(--texto-2);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.artigo-corpo {
  padding-top: clamp(2rem, 4vw, 2.75rem);
  padding-bottom: var(--secao);
  border-top: 1px solid var(--linha);
}

.leia-tambem {
  padding-block: clamp(4rem, 9vw, 6.5rem);
  border-top: 1px solid var(--linha);
  background: var(--nucleo);
}

/* ---------- Texto corrido (artigos): leitura longa no escuro ---------- */

.prosa {
  color: var(--texto-leitura);
  font-size: 1.0625rem;
  font-weight: 420;
  line-height: 1.75;
}

@media (min-width: 48em) {
  .prosa {
    font-size: 1.1875rem;
    line-height: 1.78;
  }
}

.prosa p {
  margin: 0 0 1.3em;
}

.prosa strong {
  color: var(--texto);
}

.prosa a {
  color: var(--ametista);
  text-decoration-color: var(--ametista-escura);
}

.prosa a:hover {
  color: var(--ascii-3);
  text-decoration-color: currentColor;
}

.prosa h2 {
  margin: 2.2em 0 0.65em;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  scroll-margin-top: 1.5rem;
}

.prosa h3 {
  margin: 1.9em 0 0.5em;
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.prosa ul,
.prosa ol {
  margin: 0 0 1.4em;
  padding-left: 1.35em;
}

.prosa li {
  margin-bottom: 0.6em;
  padding-left: 0.35em;
}

.prosa li::marker {
  color: var(--ametista);
}

.prosa ol li::marker {
  font-weight: 700;
  font-size: 0.92em;
}

.prosa li > p {
  margin-bottom: 0.5em;
}

/* Citação: só recuo e tom secundário, sem fio lateral. */
.prosa blockquote {
  margin: 1.9em 0;
  padding: 0 0 0 1.5em;
  color: var(--texto-2);
}

.prosa blockquote p:last-child {
  margin-bottom: 0;
}

.prosa hr {
  margin: 3em 0;
  border: 0;
  border-top: 1px solid var(--linha);
}

.prosa code {
  padding: 0.1em 0.36em;
  border: 1px solid var(--linha);
  border-radius: 3px;
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--mono);
  font-size: 0.84em;
  overflow-wrap: anywhere;
}

.prosa > :first-child {
  margin-top: 0;
}

.tabela {
  margin: 2em 0;
  overflow-x: auto;
}

.tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.5;
}

.tabela th {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--ametista);
  color: var(--texto);
  font-weight: 700;
  text-align: left;
  vertical-align: bottom;
}

.tabela td {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}

/* Caixas "Copie e cole" (pedido), "Exemplo" e código comum */

.bloco {
  margin: 2em 0;
  border-radius: var(--raio);
}

.bloco-rotulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.5rem;
  margin-bottom: 0.875rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.icone-copiar {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
}

.bloco pre {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.bloco code {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
}

/* Pedido para copiar: superfície com fio fino em volta; a ametista fica só no rótulo. */
.bloco-pedido {
  padding: 1.125rem 1.25rem 1.375rem;
  border: 1px solid var(--linha);
  background: var(--superficie);
}

.bloco-pedido .bloco-rotulo {
  color: var(--ametista);
}

.bloco-pedido pre {
  color: var(--texto);
}

.bloco-exemplo {
  padding: 1.125rem 1.25rem 1.375rem;
  border: 1px dashed var(--linha-forte);
}

.bloco-exemplo .bloco-rotulo {
  color: var(--texto-2);
}

.bloco-codigo {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--linha);
  background: var(--nucleo);
}

.copiar {
  min-height: 2.25rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--linha-forte);
  border-radius: 3px;
  background: transparent;
  color: var(--texto);
  font: inherit;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.copiar:hover {
  border-color: var(--ametista);
  color: var(--ametista);
}

/* Caixas de destaque: > **Na prática:**, > **Cuidado:**, > **Aconteceu comigo:** */

.prosa .caixa {
  margin: 2em 0;
  color: var(--texto-leitura);
  font-size: 0.95em;
}

.caixa-rotulo {
  margin: 0 0 0.625rem !important;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/*
  As três se distinguem sem fio lateral:
  Na prática = superfície cheia, sem borda, rótulo em ametista;
  Cuidado = sem fundo, fio fino em volta, rótulo em creme;
  Aconteceu comigo = sem caixa, só recuo e texto em tom secundário (é um relato).
*/
.prosa .caixa-pratica {
  padding: 1.375rem 1.5rem;
  border-radius: var(--raio);
  background: var(--superficie);
}

.caixa-pratica .caixa-rotulo {
  color: var(--ametista);
}

.prosa .caixa-cuidado {
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
}

.caixa-cuidado .caixa-rotulo {
  color: var(--texto);
}

.prosa .caixa-aconteceu {
  padding: 0 0 0 1.5em;
  color: var(--texto-2);
}

.caixa-aconteceu .caixa-rotulo {
  color: var(--texto-2);
}

/* Convite para o guia ([[BOTAO_GUIA]]) */

.convite {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  grid-template-areas:
    'capa cabeca'
    'desc desc'
    'botao botao';
  gap: 1.25rem;
  align-items: center;
  margin: 2.75em 0 0;
  padding: 1.75rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

@media (min-width: 36em) {
  .convite {
    grid-template-columns: 6rem 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      'capa cabeca'
      'capa desc'
      'capa botao';
    gap: 0.625rem 2rem;
    align-items: start;
    padding: 2rem;
  }

  .convite-botao {
    justify-self: start;
    margin-top: 0.875rem;
  }
}

.convite-capa {
  grid-area: capa;
  display: block;
}

.convite-cabeca {
  grid-area: cabeca;
}

.convite-descricao {
  grid-area: desc;
  color: var(--texto-2);
}

.convite-botao {
  grid-area: botao;
}

.prosa .convite p {
  margin: 0;
}

.prosa .convite-sobre {
  margin-bottom: 0.5rem;
  color: var(--ametista);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.prosa .convite-titulo {
  color: var(--texto);
  font-family: var(--serif);
  font-size: 1.875rem;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.prosa .convite-botao {
  color: var(--texto);
  text-decoration: none;
}

.prosa .convite-botao:hover {
  color: var(--ametista);
}

/* ---------- Rodapé ---------- */

.rodape {
  padding-top: clamp(3.5rem, 8vw, 5.5rem);
  border-top: 1px solid var(--linha);
  background: var(--nucleo);
  color: var(--texto-2);
  font-size: 0.875rem;
  line-height: 1.6;
}

.rodape-grade {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 48em) {
  .rodape-grade {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.rodape .marca-simbolo {
  height: 2.25rem;
}

.rodape-assinatura {
  max-width: 28ch;
  margin: 1.25rem 0 0;
}

.rodape-links,
.rodape-redes {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape-links a,
.rodape-redes a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--texto);
  text-decoration: none;
}

.rodape-links a:hover,
.rodape-redes a:hover {
  color: var(--ametista);
}

.rodape-fim {
  display: grid;
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-block: 1.75rem 2.5rem;
  border-top: 1px solid var(--linha);
}

@media (min-width: 48em) {
  .rodape-fim {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
    align-items: start;
  }
}

.rodape-aviso,
.rodape-direitos {
  margin: 0;
  font-size: 0.8125rem;
}

.rodape-aviso {
  max-width: 44rem;
}

.rodape-com-encerramento .rodape-fim {
  padding-bottom: 0.5rem;
}

/* Detalhe de encerramento: as letras ADDO em ASCII (sem JavaScript, desenhadas e paradas). */
.rodape-com-encerramento {
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

.encerramento {
  position: relative;
  height: clamp(6rem, 15vw, 13rem);
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  overflow: hidden;
}

.encerramento-estatico {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92.1%;
  height: 67.1%;
  transform: translate(-50%, -50%);
  fill: var(--linha);
}

.encerramento-estatico .acento {
  fill: var(--ascii-1);
}

.encerramento.ascii-pronto .encerramento-estatico {
  visibility: hidden;
}

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  .botao,
  .copiar,
  .ver-todos a::after {
    transition: none;
  }
}