/* ============================================================================
   mercesjose.pt — folha de estilo principal
   ----------------------------------------------------------------------------
   Convertida do tema Tailwind do protótipo Next.js para CSS próprio, sem
   qualquer passo de compilação. Escrita à mão de propósito: em alojamento
   partilhado (cPanel/Passenger) não há Node, e um site que se publica por
   FTP não deve depender de um bundler para renderizar.

   Organização
     1. Tokens          — as variáveis que definem o tema
     2. Base            — reset, tipografia, elementos nativos
     3. Layout          — contentores e secções
     4. Componentes     — navbar, cartões, botões, formulários, rodapé
     5. Páginas         — o que é específico de uma página só
     6. Utilitários     — as poucas classes soltas que valem a pena
     7. Responsivo      — os cortes, no fim, todos juntos
   ========================================================================== */


/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */

:root {
  /* Escala de cinzentos quentes. É a base do tema: preto que puxa ao castanho,
     não ao azul, o que assenta melhor com o vermelho e com a serifa. */
  --stone-950: #0c0a09;
  --stone-900: #1c1917;
  --stone-850: #232020;
  --stone-800: #292524;
  --stone-700: #44403c;
  --stone-600: #57534e;
  --stone-500: #78716c;
  --stone-400: #a8a29e;
  --stone-300: #d6d3d1;
  --stone-200: #e7e5e4;
  --stone-100: #f5f5f4;

  /* Vermelho — o único acento. Usado com parcimónia: etiquetas, ligações,
     o botão principal e a barra lateral das citações. */
  --red-950: #450a0a;
  --red-900: #7f1d1d;
  --red-800: #991b1b;
  --red-700: #b91c1c;
  --red-600: #dc2626;
  --red-500: #ef4444;
  --red-400: #f87171;
  --red-300: #fca5a5;
  --red-200: #fecaca;

  /* Papéis semânticos — é por estes que o resto da folha se refere às cores.
     Trocar o tema significa mexer aqui e em mais lado nenhum. */
  --fundo:            var(--stone-950);
  --fundo-alt:        var(--stone-900);
  --texto:            var(--stone-100);
  --texto-suave:      var(--stone-300);
  --texto-fraco:      var(--stone-400);
  --texto-tenue:      var(--stone-500);
  --borda:            var(--stone-800);
  --borda-forte:      var(--stone-600);
  --acento:           var(--red-700);
  --acento-vivo:      var(--red-600);
  --acento-claro:     var(--red-500);
  --acento-ligacao:   var(--red-400);

  /* Tipografia. Playfair para títulos e citações, Inter para o corpo,
     monoespaçada para as micro-etiquetas em maiúsculas. */
  --serifa: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:   ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Ritmo vertical e largura. O protótipo usava py-24 (6rem) entre secções e
     max-w-7xl (80rem) de contentor; mantém-se. */
  --seccao-y: 6rem;
  --seccao-y-curta: 5rem;
  --largura: 80rem;
  --largura-texto: 48rem;
  --largura-estreita: 42rem;
  --gutter: 1.5rem;

  --transicao: 160ms ease;
}


/* ── 2. BASE ─────────────────────────────────────────────────────────────── */

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

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

/* Quem prefere menos movimento não leva scroll animado nem transições. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--serifa);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: #fff;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transicao);
}

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

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

/* O foco tem de ser sempre visível — o tema é escuro e o contorno por omissão
   do browser desaparece. Vermelho vivo, deslocado, para não cortar o texto. */
:focus-visible {
  outline: 2px solid var(--acento-claro);
  outline-offset: 3px;
}

::selection {
  background: var(--red-700);
  color: #fff;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--stone-950); }
::-webkit-scrollbar-thumb { background: var(--stone-700); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--stone-500); }

/* Salto para o conteúdo — invisível até receber foco pelo teclado. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--red-700);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
}
.saltar:focus { left: 0; }


/* ── 3. LAYOUT ───────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--texto   { max-width: var(--largura-texto); }
.container--estreito { max-width: var(--largura-estreita); }

.seccao {
  padding-block: var(--seccao-y);
}
.seccao--alt     { background: var(--fundo-alt); }
.seccao--linha   { border-top: 1px solid var(--borda); }
.seccao--curta   { padding-block: var(--seccao-y-curta); }

/* Espaço para a navbar fixa em páginas que começam com conteúdo. */
.pagina {
  padding-top: 7rem;
  padding-bottom: 4rem;
  min-height: 100vh;
}

.grelha { display: grid; gap: 1.5rem; }
.grelha--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grelha--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Duas colunas com o texto à esquerda e o visual à direita, alinhadas ao meio. */
.duas-colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
  align-items: center;
}

/* Cabeçalho de secção: etiqueta vermelha, título, e uma ligação à direita. */
.cabecalho-seccao {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
}


/* ── 4. COMPONENTES ──────────────────────────────────────────────────────── */

/* 4.1 Etiqueta — o «Publicações», «Sobre o Autor», o fio condutor do site. */
.etiqueta {
  display: block;
  color: var(--acento-claro);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.etiqueta--mono {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
}


/* 4.2 Títulos */
.titulo-hero {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.titulo-pagina {
  font-size: clamp(2.25rem, 5vw, 3rem);
  margin-bottom: 3rem;
}
.titulo-seccao {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
}
.subtitulo {
  font-family: var(--serifa);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--texto-suave);
  line-height: 1.5;
  margin-bottom: 1rem;
}


/* 4.3 Botões */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}
.btn--principal {
  background: var(--red-700);
  color: #fff;
}
.btn--principal:hover { background: var(--red-600); }

.btn--contorno {
  border-color: var(--stone-600);
  color: var(--texto-suave);
}
.btn--contorno:hover { border-color: var(--stone-400); color: #fff; }

.btn--claro {
  background: #fff;
  color: var(--red-900);
}
.btn--claro:hover { background: var(--stone-100); }

.btn--pequeno { padding: 0.625rem 1.25rem; font-size: 0.8125rem; }

.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Ligação de texto com seta, em vermelho claro. */
.ligacao-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--acento-ligacao);
  font-size: 0.9375rem;
}
.ligacao-seta:hover { color: var(--red-300); }

.ligacao-discreta { color: var(--texto-fraco); font-size: 0.9375rem; }
.ligacao-discreta:hover { color: #fff; }


/* 4.4 Navbar — fixa, translúcida, ganha fundo ao rolar. */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(12, 10, 9, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), background-color var(--transicao);
}
.navbar.rolado {
  border-bottom-color: var(--borda);
  background: rgba(12, 10, 9, 0.95);
}
.navbar__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 4.5rem;
}
.navbar__marca {
  font-family: var(--serifa);
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.navbar__marca:hover { color: var(--acento-claro); }

.navbar__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.navbar__link {
  font-size: 0.9375rem;
  color: var(--texto-fraco);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}
.navbar__link:hover { color: #fff; }
.navbar__link.activo {
  color: #fff;
  border-bottom-color: var(--acento);
}

.navbar__accoes { display: flex; align-items: center; gap: 1rem; }

/* Entrar — a porta da area do leitor.
   Contornado em vez de cheio: e uma porta de servico para quem ja comprou,
   nao a accao principal da pagina. O botao cheio fica para o Comprar, que e
   o que se quer que carreguem. Dois botoes cheios lado a lado nao competem,
   anulam-se. */
.navbar__entrar {
  display: inline-block;
  border: 1px solid var(--stone-700);
  color: var(--texto-fraco);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.navbar__entrar:hover {
  border-color: var(--acento);
  color: #fff;
}
/* Com sessao aberta muda de nome e ganha um ponto: e a forma mais curta de
   dizer «ja esta dentro» sem ocupar mais espaco na barra. */
.navbar__entrar--dentro { color: var(--texto-suave); }
.navbar__entrar--dentro::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.45rem;
  vertical-align: 0.05rem;
  border-radius: 50%;
  background: #22c55e;
}

/* No menu de ecra pequeno separa-se dos outros por uma linha, para nao
   parecer mais uma seccao do site. */
.navbar__link--entrar {
  margin-top: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borda);
  color: #fff;
}

/* Botão do menu em ecrã pequeno — três traços em CSS, sem imagem nem ícone. */
.navbar__alternar {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--borda);
  background: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.navbar__alternar span,
.navbar__alternar span::before,
.navbar__alternar span::after {
  position: absolute;
  left: 50%;
  width: 1.125rem;
  height: 1px;
  background: var(--stone-300);
  transform: translateX(-50%);
  transition: transform var(--transicao), opacity var(--transicao);
}
.navbar__alternar span { top: 50%; }
.navbar__alternar span::before { content: ''; top: -6px; left: 0; transform: none; }
.navbar__alternar span::after  { content: ''; top:  6px; left: 0; transform: none; }

.navbar__alternar[aria-expanded='true'] span { background: transparent; }
.navbar__alternar[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.navbar__alternar[aria-expanded='true'] span::after  { transform: translateY(-6px) rotate(-45deg); }

.navbar__movel {
  display: none;
  border-top: 1px solid var(--borda);
  background: var(--stone-950);
  padding: 1.5rem var(--gutter) 2rem;
}
.navbar__movel.aberto { display: block; }
.navbar__movel .navbar__link {
  display: block;
  padding-block: 0.75rem;
  font-size: 1rem;
  border-bottom: 1px solid var(--stone-900);
}


/* 4.5 Cartão de livro */
.cartao-livro {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  transition: border-color var(--transicao);
  height: 100%;
}
.cartao-livro:hover { border-color: var(--borda-forte); }

/* A moldura da capa no cartao.

   Era 3/4 com object-fit:cover — ou seja, cortava a capa em cima e em baixo
   para encher a caixa. Numa capa de livro isso tira o titulo e o selo da
   editora, que sao as duas coisas que a identificam.

   Agora e 2/3, que e a proporcao de uma capa a serio, e `contain`: a capa
   aparece inteira. Se nao for exactamente 2:3, sobram duas faixas — e o
   gradiente do livro, posto em linha pelo capa_html(), fica atras delas. */
.cartao-livro__capa {
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  background: var(--stone-900);
}
.cartao-livro__capa img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 400ms ease;
}
.cartao-livro:hover .cartao-livro__capa img { transform: scale(1.03); }

/* Quando não há imagem de capa, o gradiente com o título faz de marcador. */
.cartao-livro__capa--gradiente {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
}
.cartao-livro__capa--gradiente h3 {
  font-size: 1.125rem;
  color: #fff;
}

.cartao-livro__corpo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 1rem;
  padding: 1rem;
  background: var(--stone-900);
  transition: background-color var(--transicao);
}
.cartao-livro:hover .cartao-livro__corpo { background: var(--stone-800); }

.cartao-livro__desc {
  color: var(--texto-fraco);
  font-size: 0.8125rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preco       { color: #fff; font-size: 0.9375rem; font-weight: 500; }
.preco--alt  { color: var(--texto-tenue); font-size: 0.8125rem; font-weight: 400; }


/* 4.6 Emblemas e etiquetas de idioma */
.emblema {
  display: inline-block;
  border: 1px solid var(--stone-700);
  color: var(--texto-tenue);
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.5rem;
}
.emblema--destaque {
  border-color: var(--red-700);
  color: var(--red-300);
}
.lista-emblemas { display: flex; flex-wrap: wrap; gap: 0.5rem; }


/* 4.7 Citações */
.citacao-barra {
  border-left: 2px solid var(--acento-vivo);
  padding-left: 1.25rem;
  margin: 2rem 0;
}
.citacao-barra p {
  color: var(--texto-suave);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}
.citacao-barra cite {
  display: block;
  color: var(--acento-ligacao);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
}

.citacao-central { text-align: center; }
.citacao-central__aspas {
  color: var(--acento-vivo);
  font-family: var(--serifa);
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 2rem;
}
.citacao-central blockquote {
  font-family: var(--serifa);
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-style: italic;
  color: #fff;
  line-height: 1.5;
  margin: 0 0 2rem;
}


/* 4.8 Linha de credencial — o «01 · Engenheiro» da página inicial */
.credencial {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--borda);
  padding: 0.75rem 1rem;
  transition: border-color var(--transicao);
}
.credencial:hover { border-color: var(--borda-forte); }
.credencial__n {
  color: var(--acento-vivo);
  font-family: var(--mono);
  font-size: 0.75rem;
}
.credencial__t { color: var(--texto-suave); font-size: 0.875rem; }


/* 4.9 Formulários */
.campo {
  width: 100%;
  background: var(--stone-900);
  border: 1px solid var(--stone-700);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.9375rem;
  padding: 0.75rem 1rem;
  transition: border-color var(--transicao);
}
.campo::placeholder { color: var(--stone-600); }
.campo:focus { outline: none; border-color: var(--acento); }
.campo--mono { font-family: var(--mono); text-transform: uppercase; }

.rotulo {
  display: block;
  color: var(--texto-fraco);
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.375rem;
}

.form-linha { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.form-linha .campo { flex: 1 1 12rem; }

.aviso {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border: 1px solid;
}
.aviso--erro   { border-color: var(--red-800); background: rgba(127, 29, 29, 0.25); color: var(--red-200); }
.aviso--ok     { border-color: #15803d; background: rgba(21, 128, 61, 0.2); color: #bbf7d0; }


/* 4.10 Newsletter — a faixa vermelha */
.newsletter {
  background: var(--red-900);
  padding-block: 5rem;
  text-align: center;
}
.newsletter p { color: var(--red-200); margin-bottom: 2rem; }
.newsletter .campo {
  background: rgba(69, 10, 10, 0.5);
  border-color: var(--red-800);
}
.newsletter .campo::placeholder { color: rgba(252, 165, 165, 0.6); }
.newsletter .campo:focus { border-color: #fff; }
.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 32rem;
  margin-inline: auto;
}
.newsletter__form .campo { flex: 1 1 12rem; }


/* 4.11 Rodapé */
.rodape {
  background: var(--stone-950);
  border-top: 1px solid var(--borda);
  padding-block: 4rem 2rem;
  font-size: 0.875rem;
}
.rodape__grelha {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.rodape h3 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--texto-tenue);
  margin-bottom: 1rem;
}
.rodape li { margin-bottom: 0.5rem; }
.rodape a { color: var(--texto-fraco); }
.rodape a:hover { color: #fff; }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--stone-900);
  color: var(--texto-tenue);
  font-size: 0.8125rem;
}
.rodape__legais { display: flex; gap: 1.5rem; }


/* 4.12 Consentimento de cookies */
.cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--stone-900);
  border-top: 1px solid var(--borda);
  padding: 1.25rem var(--gutter);
}
.cookies__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--largura);
  margin-inline: auto;
}
.cookies p { color: var(--texto-fraco); font-size: 0.875rem; max-width: 44rem; }
.cookies__botoes { display: flex; gap: 0.75rem; }


/* ── 5. PÁGINAS ──────────────────────────────────────────────────────────── */

/* 5.1 Hero da página inicial */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  padding-block: 8rem 6rem;
}
/* Textura de linhas horizontais, quase invisível. Dá densidade ao preto
   sem introduzir uma imagem de fundo para descarregar. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(255, 255, 255, 0.5) 2px, rgba(255, 255, 255, 0.5) 3px
  );
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

.hero__capa {
  width: min(18rem, 100%);
  margin-inline: auto;
  box-shadow: -8px 8px 40px rgba(0, 0, 0, 0.6);
}

/* 5.2 Lista de edições da loja */
.edicao {
  display: grid;
  grid-template-columns: 9rem 6rem 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--stone-900);
}
.edicao:first-child { border-top: none; }
.edicao__idioma { display: flex; align-items: center; gap: 0.5rem; color: var(--texto-suave); font-size: 0.9375rem; }
.edicao__lojas  { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* 5.3 Artigo do blog e páginas legais — o corpo de texto longo */
.prosa {
  color: var(--texto-suave);
  line-height: 1.8;
}
.prosa h2 {
  font-size: 1.75rem;
  margin: 2.5rem 0 1rem;
}
.prosa h3 {
  font-size: 1.3125rem;
  margin: 2rem 0 0.75rem;
}
.prosa p { margin-bottom: 1.25rem; }
.prosa a { color: var(--acento-ligacao); text-decoration: underline; text-underline-offset: 3px; }
.prosa a:hover { color: var(--red-300); }
.prosa ul, .prosa ol { margin: 0 0 1.25rem 1.25rem; }
.prosa li { list-style: disc; margin-bottom: 0.5rem; }
.prosa ol li { list-style: decimal; }
.prosa blockquote {
  border-left: 2px solid var(--acento-vivo);
  padding-left: 1.25rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--texto-fraco);
}
.prosa img { margin: 2rem 0; }
.prosa code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--stone-900);
  border: 1px solid var(--borda);
  padding: 0.125rem 0.375rem;
}
.prosa pre {
  background: var(--stone-900);
  border: 1px solid var(--borda);
  padding: 1rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}
.prosa pre code { background: none; border: none; padding: 0; }

/* Tabelas largas nunca empurram a página — rolam dentro da sua caixa. */
.tabela-scroll { overflow-x: auto; }
.prosa table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9375rem; }
.prosa th, .prosa td { border: 1px solid var(--borda); padding: 0.625rem 0.875rem; text-align: left; }
.prosa th { background: var(--stone-900); color: #fff; font-weight: 600; }

/* 5.4 Cartão de artigo na lista do blog */
.cartao-artigo {
  display: block;
  border: 1px solid var(--borda);
  padding: 1.5rem;
  transition: border-color var(--transicao);
}
.cartao-artigo:hover { border-color: var(--borda-forte); }
.cartao-artigo h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  transition: color var(--transicao);
}
.cartao-artigo:hover h2 { color: var(--acento-ligacao); }
.cartao-artigo__meta {
  display: flex;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
}
.cartao-artigo__meta .cat { color: var(--acento-vivo); }
.cartao-artigo__meta .sep { color: var(--stone-700); }
.cartao-artigo__meta .min { color: var(--texto-tenue); }
.cartao-artigo p { color: var(--texto-fraco); font-size: 0.875rem; line-height: 1.7; }


/* ── 6. UTILITÁRIOS ──────────────────────────────────────────────────────── */

.pilha        { display: flex; flex-direction: column; }
.pilha--sm    { gap: 0.75rem; }
.pilha--md    { gap: 1.5rem; }
.pilha--lg    { gap: 3rem; }

.centro       { text-align: center; }
.mono         { font-family: var(--mono); }
.serifa       { font-family: var(--serifa); }
.italico      { font-style: italic; }

.t-fraco      { color: var(--texto-fraco); }
.t-tenue      { color: var(--texto-tenue); }
.t-suave      { color: var(--texto-suave); }
.t-branco     { color: #fff; }
.t-acento     { color: var(--acento-claro); }

.t-sm         { font-size: 0.875rem; }
.t-xs         { font-size: 0.8125rem; }

.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

/* Só para leitores de ecrã. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── 7. RESPONSIVO ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .grelha--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duas-colunas { grid-template-columns: 1fr; gap: 3rem; }
  .hero { min-height: auto; }
  .hero__capa { margin-inline: 0; }
}

@media (max-width: 768px) {
  :root {
    --seccao-y: 4rem;
    --seccao-y-curta: 3rem;
  }

  .navbar__links,
  .navbar__accoes { display: none; }
  .navbar__alternar { display: block; }

  .grelha--2 { grid-template-columns: 1fr; }
  .rodape__grelha { grid-template-columns: 1fr; gap: 2rem; }

  .cabecalho-seccao { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .cabecalho-seccao > a { align-self: flex-start; }

  /* A linha de edição passa a bloco: idioma, preço, lojas, empilhados. */
  .edicao { grid-template-columns: 1fr; gap: 0.75rem; }

  .pagina { padding-top: 6rem; }
  .titulo-pagina { margin-bottom: 2rem; }

  .cookies__interior { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .grelha--4 { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .rodape__base { flex-direction: column; align-items: flex-start; }
}


/* ── IMPRESSÃO ───────────────────────────────────────────────────────────── */

@media print {
  .navbar, .rodape, .cookies, .newsletter { display: none; }
  body { background: #fff; color: #000; }
  h1, h2, h3, h4 { color: #000; }
  .pagina { padding-top: 0; }
}


/* ── COMENTÁRIOS ─────────────────────────────────────────────────────────── */

.comentarios {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--borda);
}

.comentario {
  border-left: 2px solid var(--borda);
  padding-left: 1.25rem;
}

.comentario__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .625rem;
  margin-bottom: .5rem;
}
.comentario__nome { color: #fff; font-size: .9375rem; }
.comentario__data { color: var(--texto-tenue); font-family: var(--mono); font-size: .75rem; }

/* O distintivo do autor. É o que permite distinguir, num fio de comentários,
   a resposta de quem escreveu o livro de mais uma opinião — e é por isso que
   o nome «Merces» está reservado no formulário. */
.comentario__equipa {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento-claro);
  border: 1px solid var(--red-800);
  padding: .125rem .375rem;
}

.comentario__corpo { color: var(--texto-suave); line-height: 1.75; font-size: .9375rem; }

.comentario__responder {
  background: none;
  border: none;
  padding: 0;
  margin-top: .5rem;
  color: var(--acento-ligacao);
  font-family: var(--sans);
  font-size: .8125rem;
  cursor: pointer;
}
.comentario__responder:hover { color: var(--red-300); text-decoration: underline; }

.comentario__respostas {
  margin: 1.25rem 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.comentario--resposta { border-left-color: var(--red-900); }

.comentario-form {
  margin-top: 3rem;
  padding: 1.5rem;
  border: 1px solid var(--borda);
}
.comentario-form.a-responder { border-color: var(--acento); }

@media (max-width: 560px) {
  .comentario { padding-left: .875rem; }
  .comentario__respostas { margin-left: .625rem; }
}


/* ── REDES SOCIAIS ───────────────────────────────────────────────────────── */

.redes-grelha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}
.rede-cartao {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  background: var(--stone-900);
  transition: border-color var(--transicao);
  overflow: hidden;
}
.rede-cartao:hover { border-color: var(--borda-forte); }
.rede-cartao img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.rede-cartao__corpo { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.rede-cartao__rede {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento-claro);
}
.rede-cartao__texto {
  color: var(--texto-fraco);
  font-size: .8125rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ── Aviso no topo do site ───────────────────────────────────────────────────
   Uma linha acima de tudo o resto, para lançamentos e campanhas. Fica sobre
   o vermelho da casa: quem entra tem de o ver sem o procurar, e quem já o leu
   não pode achar que faz parte da navegação. */
.aviso-topo {
  background: var(--acento);
  color: #fff;
  text-align: center;
  font-size: .875rem;
  line-height: 1.4;
  padding: .6rem 1rem;
}
.aviso-topo a { color: #fff; text-decoration: underline; }


/* ── Leitor de livros ────────────────────────────────────────────────────────
   O visor ocupa a altura do ecrã menos o cabeçalho, porque ler um livro numa
   caixa de 400 px é pior do que não ler de todo. */
.ler__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ler__titulo {
  font-family: var(--serifa);
  font-size: 1.5rem;
  color: #fff;
  margin: .2rem 0 0;
  line-height: 1.2;
}
.ler__caixa {
  border: 1px solid var(--borda);
  background: var(--stone-900);
  height: calc(100vh - 14rem);
  min-height: 30rem;
}
.ler__pdf { width: 100%; height: 100%; border: 0; display: block; }
.ler__semvisor {
  display: grid;
  place-content: center;
  text-align: center;
  height: 100%;
  padding: 2rem;
  color: var(--texto-fraco);
}
@media (max-width: 768px) {
  /* No telemóvel a barra do browser rouba altura e o cálculo falha; vale mais
     dar-lhe uma altura fixa generosa do que uma conta que engana. */
  .ler__caixa { height: 75vh; min-height: 24rem; }
  .ler__titulo { font-size: 1.25rem; }
}


/* ── Opiniões dos livros ─────────────────────────────────────────────────── */
.opinioes { border-top: 1px solid var(--borda); padding-top: 2rem; }
.opinioes__topo { margin-bottom: 1.5rem; }

.estrelas { white-space: nowrap; letter-spacing: .05em; }
.estrela { color: var(--stone-700); font-size: 1rem; }
.estrela--cheia { color: #eab308; }

/* A marca de quem comprou mesmo. Verde e não vermelha: não é um alerta, é
   uma confirmação — e a cor tem de dizer isso antes de se ler a palavra. */
.emblema--comprou {
  border-color: #15803d;
  color: #4ade80;
  text-transform: none;
  letter-spacing: 0;
}

.comentario__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: .35rem;
}

/* ── Ficha técnica do livro (1.16.0) ─────────────────────────────────────── */

.ficha-tec {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borda);
}
.ficha-tec__titulo {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--stone-500);
  margin: 0 0 .85rem;
}
.ficha-tec__lista {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem .9rem;
  font-size: .8125rem;
}
.ficha-tec__lista dt { color: var(--stone-500); }
.ficha-tec__lista dd { margin: 0; color: var(--stone-300); overflow-wrap: anywhere; }
.ficha-tec__lista dd.mono { font-family: var(--mono); font-size: .75rem; }
.ficha-tec__lista a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ficha-tec__lista a:hover { color: var(--acento); }

.ficha-tec__fora { margin-top: 1.25rem; }
.ficha-tec__lojas { list-style: none; margin: 0; padding: 0; display: flex;
                    flex-wrap: wrap; gap: .4rem .9rem; font-size: .8125rem; }
.ficha-tec__lojas a { color: var(--stone-400); text-decoration: none; }
.ficha-tec__lojas a:hover { color: var(--acento); text-decoration: underline; }

.ficha-tec__direitos {
  margin: 1.25rem 0 0;
  font-size: .6875rem;
  line-height: 1.6;
  color: var(--stone-600);
}

/* ── Lançamento e pré-venda (1.17.0) ─────────────────────────────────────── */

.lancamento { text-align: center; }
.lancamento__etiqueta {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 .75rem;
}
.lancamento__data   { margin: 0 0 .25rem; font-size: .9375rem; color: var(--stone-300); }
.lancamento__data strong { color: #fff; }
.lancamento__conta  { margin: 0 0 1rem; font-size: .8125rem; color: var(--stone-500); font-family: var(--mono); }
.lancamento__promessa {
  margin: 0 0 1.25rem;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--stone-400);
  text-align: left;
}
.lancamento__preco {
  display: flex; align-items: baseline; justify-content: center;
  gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.lancamento__antes { text-decoration: line-through; color: var(--stone-600); font-size: .875rem; }
.lancamento__pct {
  font-family: var(--mono); font-size: .6875rem; color: var(--acento);
  border: 1px solid var(--acento); border-radius: 2px; padding: .1rem .3rem;
}
.lancamento__nota {
  margin: .85rem 0 0;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--stone-500);
  text-align: left;
}

.loja__lancamento { margin: 0 0 1.25rem; font-size: .875rem; color: var(--stone-400); }
.loja__lancamento strong { color: var(--stone-200); }

/* Os cartões da página /lancamentos */
.lanc-cartao {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 2rem;
  align-items: start;
}
.lanc-cartao__capa img { width: 100%; height: auto; display: block; }
.lanc-cartao__corpo { min-width: 0; }
.lanc-cartao__quando {
  margin: .9rem 0 .6rem;
  font-size: .875rem;
  color: var(--stone-400);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.lanc-cartao__quando strong { color: #fff; }

@media (max-width: 40rem) {
  /* Numa coluna a capa fica mais pequena: em ecrã estreito o que interessa
     é a data e o botão, não uma capa a ocupar o primeiro ecrã inteiro. */
  .lanc-cartao { grid-template-columns: 6rem 1fr; gap: 1.25rem; }
}

/* O aviso de falta de stock, antes do preço (1.20.0) */
.lancamento__aviso {
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--borda);
  border-left: 2px solid var(--acento);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--stone-300);
  text-align: left;
}

/* ── Índice com níveis, e volumes de uma obra (1.21.0) ───────────────────── */

.indice__contagem {
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--stone-600);
  margin: -.35rem 0 .85rem;
}
.indice__lista { list-style: none; margin: 0; padding: 0; }
.indice__cap + .indice__cap { margin-top: .15rem; }

.indice__linha {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: .75rem;
  align-items: baseline;
  padding: .5rem 0;
  border-bottom: 1px solid var(--borda);
}
.indice__det > summary.indice__linha { cursor: pointer; list-style: none; }
.indice__det > summary::-webkit-details-marker { display: none; }
.indice__det > summary:hover .indice__t { color: #fff; }

.indice__n { font-family: var(--mono); font-size: .75rem; color: var(--stone-600); }
.indice__t { color: var(--stone-300); font-size: .9375rem; line-height: 1.45; }

/* O número de secções faz de indicador: roda quando o capítulo abre. */
.indice__quantos {
  font-family: var(--mono); font-size: .6875rem; color: var(--stone-600);
  border: 1px solid var(--borda); border-radius: 2px; padding: .05rem .3rem;
  transition: color 200ms ease, border-color 200ms ease;
}
.indice__det[open] > summary .indice__quantos { color: var(--acento); border-color: var(--acento); }

.indice__filhos {
  list-style: none;
  margin: .4rem 0 .9rem;
  padding: 0 0 0 2.75rem;
}
.indice__filhos > li { padding: .22rem 0; }
.indice__sec { color: var(--stone-400); font-size: .8125rem; line-height: 1.5; }
.indice__netos {
  list-style: none; margin: .2rem 0 .3rem; padding: 0 0 0 1rem;
  color: var(--stone-600); font-size: .75rem;
}
.indice__netos > li { padding: .12rem 0; }
.indice__netos > li::before { content: "— "; color: var(--stone-700); }

/* Volumes */
.volumes {
  border: 1px solid var(--borda);
  border-left: 2px solid var(--acento);
  padding: .9rem 1rem;
  margin-bottom: 1.5rem;
}
.volumes__obra {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--stone-500); margin: 0 0 .6rem;
}
.volumes__lista { list-style: none; margin: 0; padding: 0; }
.volumes__item { display: flex; gap: .5rem; align-items: baseline;
                 padding: .22rem 0; font-size: .8125rem; flex-wrap: wrap; }
.volumes__n { font-family: var(--mono); font-size: .6875rem; color: var(--stone-600);
              flex: 0 0 auto; }
.volumes__t { color: var(--stone-300); text-decoration: none; }
a.volumes__t { text-decoration: underline; text-underline-offset: 2px; }
a.volumes__t:hover { color: var(--acento); }
.volumes__item--actual .volumes__t { color: #fff; }
.volumes__aqui { font-size: .6875rem; color: var(--stone-600); font-style: italic; }
.volumes__nota { margin: .7rem 0 0; font-size: .6875rem; color: var(--stone-600); }

/* ── Blocos dentro de um artigo (1.25.0) ─────────────────────────────────── */

/* Uma passagem das Escrituras. Serifa e recuo: lê-se como citação, não como
   texto do autor, mesmo por quem passa os olhos sem parar. */
.prosa .escritura {
  border: none;
  border-left: 2px solid var(--acento);
  margin: 2rem 0;
  padding: .2rem 0 .2rem 1.5rem;
  font-family: var(--serifa, Georgia, serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--stone-200);
  font-style: normal;
}
.prosa .escritura p { margin: 0 0 .5rem; }
.prosa .escritura__ref {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stone-500);
  margin: .6rem 0 0 !important;
}

/* A passagem completa, a um clique. Um artigo que discute cinco versículos
   precisa de os poder mostrar inteiros — e cinco citações inteiras seguidas
   não se lêem. */
.prosa .passagem {
  border: 1px solid var(--borda);
  border-radius: .3rem;
  margin: 1.5rem 0;
  padding: 0 1rem;
  background: rgba(255, 255, 255, .015);
}
.prosa .passagem[open] { padding-bottom: .75rem; }
.prosa .passagem__resumo {
  cursor: pointer;
  list-style: none;
  padding: .7rem 0;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--stone-400);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.prosa .passagem__resumo::-webkit-details-marker { display: none; }
.prosa .passagem__resumo::before {
  content: "+";
  color: var(--acento);
  font-size: .95rem;
  line-height: 1;
}
.prosa .passagem[open] .passagem__resumo::before { content: "\2212"; }
.prosa .passagem__resumo:hover { color: #fff; }
.prosa .passagem > :not(summary) { font-size: .9375rem; }

/* Duas colunas: o que se diz de um lado, o que está escrito do outro. */
.prosa .contraste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  margin: 2rem 0;
}
.prosa .contraste__lado {
  background: var(--stone-950, #0c0a09);
  padding: 1rem 1.15rem;
}
.prosa .contraste__lado > :first-child { margin-top: 0; }
.prosa .contraste__lado > :last-child { margin-bottom: 0; }
.prosa .contraste__lado strong { color: #fff; }
@media (max-width: 40rem) {
  .prosa .contraste { grid-template-columns: 1fr; }
}

/* Uma nota de lado, para o que não cabe no fio do argumento. */
.prosa .nota {
  display: block;
  border: 1px solid var(--borda);
  border-radius: .3rem;
  padding: .9rem 1.1rem;
  margin: 2rem 0;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--stone-400);
  background: rgba(255, 255, 255, .012);
}
.prosa .nota > :first-child { margin-top: 0; }
.prosa .nota > :last-child { margin-bottom: 0; }

/* Uma frase que se quer ver mesmo por quem só passa os olhos. */
.prosa .destaque {
  font-family: var(--serifa, Georgia, serif);
  font-size: 1.25rem;
  line-height: 1.55;
  color: #fff;
  margin: 2rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--stone-700);
}

/* Passos numerados com peso — a mecânica de uma coisa, e não uma lista. */
.prosa .passos { list-style: none; counter-reset: passo; padding: 0; margin: 2rem 0; }
.prosa .passos > li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 1.1rem 3rem;
  margin: 0;
}
.prosa .passos > li::before {
  content: counter(passo);
  position: absolute;
  left: 0; top: -.1rem;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 50%;
  width: 1.9rem; height: 1.9rem;
  display: flex; align-items: center; justify-content: center;
}
.prosa .passos > li:last-child { padding-bottom: 0; }

/* ── Loja: um cartão por livro (1.26.0) ──────────────────────────────────── */

.loja-lista { display: flex; flex-direction: column; gap: 1.25rem; }

.loja-livro {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1.75rem;
  align-items: start;
  border: 1px solid var(--borda);
  border-radius: .4rem;
  padding: 1.5rem;
  background: var(--stone-950, #0c0a09);
  transition: border-color var(--transicao);
  scroll-margin-top: 6rem;
}
.loja-livro:hover { border-color: var(--borda-forte); }

/* A capa. Sem ela, uma livraria não é uma livraria. */
.loja-livro__capa .cartao-livro__capa {
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  box-shadow: -4px 4px 18px rgba(0, 0, 0, .5);
}
/* O marcador de gradiente, para os livros ainda sem capa.

   Numa capa de 136 px a etiqueta da categoria fica com 5 px de altura e nao
   se le — e uma linha que nao se le nao esta la para nada, esta la a roubar
   espaco ao titulo. Some, e o titulo cresce para o lugar dela. */
.loja-livro__capa .cartao-livro__capa--gradiente {
  padding: 1rem .85rem;
  justify-content: flex-end;
}
.loja-livro__capa .cartao-livro__capa--gradiente p { display: none; }
.loja-livro__capa .cartao-livro__capa--gradiente h3 {
  font-size: .9375rem;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

.loja-livro__corpo { min-width: 0; }
.loja-livro__titulo { font-size: 1.375rem; line-height: 1.2; margin: .3rem 0 .2rem; }
.loja-livro__titulo a { color: inherit; text-decoration: none; }
.loja-livro__titulo a:hover { color: var(--acento); }
.loja-livro__sub { color: var(--stone-500); font-size: .875rem; margin: 0 0 1rem; }

.loja-livro__estado {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .8125rem; color: var(--stone-400);
  margin: 0 0 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--borda);
}
.loja-livro__estado strong { color: #fff; }

/* Uma linha por edição — 48 px em vez de 124. */
.loja-edicoes { list-style: none; margin: 0; padding: 0; }
.loja-edicao {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(6rem, auto) auto;
  gap: 1rem;
  align-items: center;
  padding: .55rem 0;
  border-top: 1px solid var(--stone-900);
}
.loja-edicao:first-child { border-top: none; padding-top: 0; }

.loja-edicao__lang {
  display: flex; align-items: center; gap: .55rem;
  color: var(--stone-300); font-size: .875rem;
}
.loja-edicao__preco {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: .9375rem;
}
.loja-edicao__preco strong { color: #fff; font-size: 1.0625rem; }
.loja-edicao__brl { color: var(--stone-600); font-size: .75rem; }
.loja-edicao__accao { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

.loja-livro__mais { margin: 1.25rem 0 0; font-size: .8125rem; }

@media (max-width: 46rem) {
  .loja-livro { grid-template-columns: 5.5rem 1fr; gap: 1.1rem; padding: 1.1rem; }
  .loja-livro__titulo { font-size: 1.125rem; }
  /* Em ecrã estreito a linha da edição quebra em duas: idioma e preço em
     cima, botão por baixo a toda a largura — um botão de 6 rem espremido
     contra a margem não se acerta com o dedo. */
  .loja-edicao { grid-template-columns: 1fr auto; padding: .7rem 0; }
  .loja-edicao__accao { grid-column: 1 / -1; justify-content: stretch; }
  .loja-edicao__accao .btn { flex: 1 1 auto; justify-content: center; }
  /* Os dois precos em euros ficam na mesma linha: o riscado ao lado do que
     se cobra, que e o unico sitio onde um preco riscado quer dizer alguma
     coisa. O de reais vai para baixo, que e onde cabe. */
  .loja-edicao__preco { justify-content: flex-end; text-align: right; }
  .loja-edicao__preco .lancamento__antes,
  .loja-edicao__preco strong { white-space: nowrap; }
  .loja-edicao__brl { flex-basis: 100%; text-align: right; }
}

/* ── Loja: idiomas na linha, um preço, um botão (1.27.0) ─────────────────── */

.loja-livro__langs {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  margin: 0 0 1.1rem;
}
.loja-livro__langs .emblema { opacity: .55; }
.loja-livro__langs .emblema--activo { opacity: 1; border-color: var(--acento); color: #fff; }
.loja-livro__langs-nota {
  font-size: .6875rem; color: var(--stone-600);
  margin-left: .35rem; font-style: italic;
}

.loja-livro__accao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-top: 1rem; border-top: 1px solid var(--borda);
}
.loja-livro__preco { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.loja-livro__preco strong { color: #fff; font-size: 1.5rem; font-family: var(--serifa); }
.loja-livro__desde { font-size: .75rem; color: var(--stone-500); }
.loja-livro__botoes { display: flex; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 46rem) {
  .loja-livro__accao { align-items: stretch; }
  .loja-livro__botoes { width: 100%; }
  .loja-livro__botoes .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Escolher o idioma ao comprar ────────────────────────────────────────── */

.compra-idioma { margin-bottom: 2rem; }
.compra-idioma__opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .5rem;
  margin-top: .6rem;
}
.compra-idioma__op {
  display: flex; align-items: center; gap: .55rem;
  border: 1px solid var(--borda); border-radius: .3rem;
  padding: .6rem .8rem;
  text-decoration: none; color: var(--stone-400);
  transition: border-color var(--transicao), color var(--transicao);
}
.compra-idioma__op:hover { border-color: var(--borda-forte); color: #fff; }
.compra-idioma__op--activo { border-color: var(--acento); color: #fff; }
.compra-idioma__nome { flex: 1 1 auto; font-size: .875rem; }
.compra-idioma__preco { font-size: .8125rem; color: var(--stone-500); }
.compra-idioma__op--activo .compra-idioma__preco { color: var(--stone-300); }

/* ── Pré-venda: o que se ganha em reservar ───────────────────────────────── */

.lancamento__ganhos {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  text-align: left;
}
.lancamento__ganhos > li {
  padding: .7rem 0 .7rem 1.5rem;
  position: relative;
  border-top: 1px solid var(--borda);
}
.lancamento__ganhos > li:first-child { border-top: none; }
.lancamento__ganhos > li::before {
  content: "✓";
  position: absolute; left: 0; top: .72rem;
  color: var(--acento); font-size: .8125rem;
}
.lancamento__ganhos strong {
  display: block; color: #fff; font-size: .875rem; margin-bottom: .15rem;
}
.lancamento__ganhos span {
  display: block; font-size: .75rem; line-height: 1.55; color: var(--stone-500);
}

.lancamento__factos {
  margin: 1.25rem 0 0; text-align: left;
  font-size: .75rem; color: var(--stone-400);
  padding-top: 1rem; border-top: 1px solid var(--borda);
}
.lancamento__factos-rot {
  display: block;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--stone-600);
  margin-bottom: .3rem;
}

.lancamento__garantia {
  margin: 1rem 0 0; text-align: left;
  font-size: .6875rem; line-height: 1.6; color: var(--stone-500);
  padding: .6rem .75rem;
  border-left: 2px solid var(--stone-700);
}
.lancamento__ganhos-rot {
  margin: 1.5rem 0 .2rem;
  text-align: left;
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--stone-500);
}
.lancamento__ganhos-rot + .lancamento__ganhos { margin-top: .4rem; }

/* ── O dossiê do autor (1.29.0) ────────────────────────────────────────────
   Quem chega ao /sobre vem responder a uma pergunta: «este homem sabe do que
   fala?». O desenho segue essa ordem — números, depois história, depois as
   provas — e nenhuma secção pode parecer um currículo colado. */

/* Os quatro números. Grandes, em serifa, com o rótulo pequeno por baixo:
   o número lê-se de longe e o rótulo só se lê depois de o número prender. */
.dossie-numeros {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2rem 1.5rem;
  /* 9rem e nao 11: num telemovel de 390 px, 11rem punha os quatro numeros
     uns por baixo dos outros e dava um metro de altura para dizer quatro
     coisas. A 9rem cabem dois a dois, que e como se comparam. */
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.dossie-numeros li { min-width: 0; }
.dossie-numeros__v {
  display: block; font-family: var(--serifa); font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1; color: var(--texto); letter-spacing: -.02em;
}
.dossie-numeros__r {
  display: block; margin-top: .6rem; font-size: .8125rem; line-height: 1.5;
  color: var(--texto-fraco); max-width: 14rem;
}

/* O percurso. Uma linha vertical com o período à esquerda — a forma de uma
   cronologia, sem os pontinhos e as bolinhas que a fazem parecer um slide. */
.dossie-percurso { list-style: none; margin: 0; padding: 0; }
.dossie-percurso__item {
  display: grid; grid-template-columns: 11rem 1fr; gap: 0 2rem;
  padding: 0 0 2.25rem 0; position: relative;
}
.dossie-percurso__item::before {
  content: ''; position: absolute; left: 11rem; top: .55rem; bottom: 0;
  width: 1px; background: var(--borda); transform: translateX(-1rem);
}
.dossie-percurso__item:last-child { padding-bottom: 0; }
.dossie-percurso__item:last-child::before { display: none; }
.dossie-percurso__quando {
  font-family: var(--mono); font-size: .6875rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--texto-tenue); margin: .35rem 0 0;
}
.dossie-percurso__t {
  font-family: var(--serifa); font-size: 1.25rem; line-height: 1.3;
  margin: 0 0 .6rem; color: var(--texto);
}
.dossie-percurso__x {
  margin: 0; color: var(--texto-suave); line-height: 1.75; max-width: 42rem;
}
@media (max-width: 720px) {
  .dossie-percurso__item { grid-template-columns: 1fr; gap: .5rem; }
  .dossie-percurso__item::before { display: none; }
  .dossie-percurso__quando { margin-top: 0; }
}

/* As realizações. Cartões com a métrica em destaque — «+35%» tem de se ver
   antes da frase que o explica. */
.dossie-feitos {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.dossie-feito {
  border: 1px solid var(--borda); padding: 1.5rem; background: var(--fundo);
  min-width: 0;
}
.dossie-feito__v {
  font-family: var(--serifa); font-size: 2rem; line-height: 1;
  color: var(--acento); margin: 0 0 .85rem;
}
.dossie-feito__t {
  font-size: .9375rem; font-weight: 600; margin: 0 0 .5rem; line-height: 1.4;
}
.dossie-feito__x {
  margin: 0; font-size: .8125rem; line-height: 1.65; color: var(--texto-fraco);
}

/* As competências, por área. Duas ou três colunas, e as etiquetas a
   desenharem sozinhas a forma do conhecimento. */
.dossie-areas {
  display: grid; gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.dossie-area { min-width: 0; }
.dossie-area__t {
  font-size: .75rem; font-family: var(--mono); text-transform: uppercase;
  letter-spacing: .09em; color: var(--texto-tenue);
  margin: 0 0 .85rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--borda);
}

/* A carreira. Compacta: quem chega aqui já está convencido e só quer
   conferir uma linha. */
.dossie-carreira { list-style: none; margin: 0; padding: 0; }
.dossie-carreira__l {
  display: grid; grid-template-columns: 9rem 1fr; gap: .25rem 1.5rem;
  padding: .85rem 0; border-bottom: 1px solid var(--borda);
}
.dossie-carreira__l:first-child { border-top: 1px solid var(--borda); }
.dossie-carreira__q {
  font-family: var(--mono); font-size: .75rem; color: var(--texto-tenue);
  padding-top: .1rem; white-space: nowrap;
}
.dossie-carreira__c { min-width: 0; font-size: .9375rem; }
.dossie-carreira__c strong { display: block; font-weight: 600; }
.dossie-carreira__e {
  display: block; margin-top: .2rem; font-size: .8125rem; color: var(--texto-fraco);
}
@media (max-width: 640px) {
  .dossie-carreira__l { grid-template-columns: 1fr; }
}

/* Formação, certificações e idiomas: três colunas no fim. */
.dossie-tres {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.dossie-curso {
  display: flex; flex-direction: column; gap: .2rem;
  font-size: .875rem; line-height: 1.45;
}
.dossie-curso strong { font-weight: 600; }

.dossie-horas { margin: 0; line-height: 1; }
.dossie-horas strong {
  font-family: var(--serifa); font-size: 2.25rem; letter-spacing: -.02em;
}
.dossie-horas + p { margin-top: .5rem; }

.dossie-certs > summary {
  cursor: pointer; font-family: var(--mono); font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texto-tenue);
  padding: .35rem 0;
}
.dossie-certs > summary:hover { color: var(--texto); }
.dossie-cert {
  display: flex; flex-direction: column; gap: .15rem;
  font-size: .8125rem; line-height: 1.45; padding-bottom: .5rem;
  border-bottom: 1px solid var(--borda);
}

/* Os projectos próprios. Cartões maiores do que os das realizações porque
   cada um leva um endereço a seguir — e um endereço tem de ter espaço à
   volta para se ver que é para carregar. */
.dossie-projectos {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.dossie-projecto {
  border: 1px solid var(--borda); padding: 1.75rem 1.5rem;
  background: var(--fundo); min-width: 0;
  display: flex; flex-direction: column;
}
.dossie-projecto__papel {
  font-family: var(--mono); font-size: .625rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--acento); margin: 0 0 .75rem;
}
.dossie-projecto__n {
  font-family: var(--serifa); font-size: 1.375rem; line-height: 1.2;
  margin: 0 0 .75rem;
}
.dossie-projecto__x {
  margin: 0 0 1.25rem; font-size: .875rem; line-height: 1.65;
  color: var(--texto-fraco); flex: 1;
}
.dossie-projecto__l { font-size: .8125rem; align-self: flex-start; }
.dossie-curso__q {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .08em;
  color: var(--acento); text-transform: uppercase;
}

/* Uma lista dentro de uma etapa do percurso. Numerada, porque as regras que
   ali estão têm ordem — e a ordem é a de quem as aprendeu. */
.dossie-percurso__pontos {
  margin: .85rem 0; padding: 0; list-style: none;
  counter-reset: regra; max-width: 42rem;
}
.dossie-percurso__pontos li {
  counter-increment: regra; position: relative;
  padding: 0 0 0 2rem; margin-bottom: .5rem;
  color: var(--texto-suave); line-height: 1.65;
}
.dossie-percurso__pontos li::before {
  content: counter(regra, decimal-leading-zero);
  position: absolute; left: 0; top: .15rem;
  font-family: var(--mono); font-size: .6875rem; color: var(--acento);
}
.dossie-alcunha {
  margin: .5rem 0 0; font-family: var(--mono); font-size: .75rem;
  letter-spacing: .06em; color: var(--texto-tenue);
}

/* ── A página de compra (1.33.0) ───────────────────────────────────────────
   Quem chega aqui vem de uma página com uma capa grande. Chegar a um
   formulário só com texto é uma quebra no ponto exacto em que a pessoa está a
   decidir se confia. */
.compra-cabeca {
  display: grid; grid-template-columns: 7rem 1fr; gap: 1.5rem;
  align-items: start; margin-bottom: 2rem;
}
.compra-cabeca__capa .cartao-livro__capa { margin: 0; }
.compra-cabeca .titulo-pagina { font-size: clamp(1.5rem, 4vw, 2rem); }
@media (max-width: 520px) {
  .compra-cabeca { grid-template-columns: 5rem 1fr; gap: 1rem; }
}

/* «O que recebe» — a pergunta que toda a gente faz com o cartão na mão. */
.compra-recebe {
  border: 1px solid var(--borda); padding: 1.25rem 1.5rem; margin-bottom: 2rem;
  background: var(--fundo-alt);
}
.compra-recebe__lista { list-style: none; margin: .85rem 0 0; padding: 0; }
.compra-recebe__lista li {
  display: grid; grid-template-columns: 7rem 1fr; gap: .5rem 1rem;
  padding: .5rem 0; border-top: 1px solid var(--borda);
  font-size: .875rem; line-height: 1.5;
}
.compra-recebe__lista li:first-child { border-top: 0; padding-top: 0; }
.compra-recebe__lista strong { font-weight: 600; color: var(--texto-suave); }
.compra-recebe__lista span { color: var(--texto-fraco); }
@media (max-width: 520px) {
  .compra-recebe__lista li { grid-template-columns: 1fr; gap: .15rem; }
}

/* As três garantias, por baixo do botão — onde a última dúvida aparece. */
.compra-garantias {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.compra-garantias li {
  border-top: 2px solid var(--borda-forte); padding-top: .75rem; min-width: 0;
}
.compra-garantias strong {
  display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .25rem;
}
.compra-garantias span {
  display: block; font-size: .75rem; line-height: 1.55; color: var(--texto-fraco);
}

/* ── A barra de compra que acompanha a leitura ─────────────────────────────
   O primeiro botão de compra estava a 80% da altura da ficha. A prosa não se
   corta — é ela que convence — mas o preço passa a andar com quem lê. */
.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(12, 10, 9, .96);
  border-top: 1px solid var(--borda-forte);
  padding: .75rem 0;
  animation: barra-sobe .18s ease-out;
}
@supports (backdrop-filter: blur(8px)) {
  .barra-compra { background: rgba(12, 10, 9, .82); backdrop-filter: blur(10px); }
}
@keyframes barra-sobe { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .barra-compra { animation: none; } }

.barra-compra__interior {
  max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.barra-compra__livro { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.barra-compra__t {
  font-size: .8125rem; color: var(--texto-fraco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-compra__p { font-size: .9375rem; color: var(--texto); }
.barra-compra__p strong { font-family: var(--serifa); font-size: 1.125rem; }
.barra-compra__btn { flex: 0 0 auto; }

/* No telemóvel o título sai: o que interessa é o preço e o botão, e um
   título truncado a três palavras não informa ninguém. */
@media (max-width: 480px) {
  .barra-compra__t { display: none; }
  .barra-compra__interior { gap: .75rem; }
  .barra-compra__btn { flex: 1 1 auto; justify-content: center; }
}

/* O preço dentro do botão. Um botão que diz só «comprar» esconde a única
   coisa que falta saber para decidir — e obriga a um clique para a descobrir,
   que é o clique onde as pessoas desistem. */
.btn__preco {
  margin-left: .6rem; padding-left: .6rem;
  border-left: 1px solid rgba(255, 255, 255, .28);
  font-family: var(--serifa); font-size: 1.0625rem;
}
.dossie-area__l { display: inline-block; margin-top: .85rem; font-size: .8125rem; }

/* ── A faixa do autor ────────────────────────────────────────────────────────
   Só aparece na área do leitor e na página de leitura, e só a quem tem sessão
   de painel. As páginas públicas ficam intocadas de propósito: quem entra ali
   para ver «o que os leitores vêem» não pode ter o site a comportar-se de
   maneira diferente por ser ele. */
.faixa-autor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border: 1px solid var(--red-800);
  border-left-width: 3px;
  background: rgba(127, 29, 29, 0.08);
  padding: 1rem 1.25rem;
}
.faixa-autor p { max-width: 52ch; }

/* Um emblema que não pede a atenção que o «--destaque» pede: diz de onde vem
   o acesso, não anuncia nada. */
.emblema--tenue { border-color: var(--stone-800); color: var(--texto-tenue); }

/* ============================================================================
   O LEITOR                                                          (1.37.0)

   O que aqui estava era um <object> com o PDF dentro: o browser desenhava a
   sua própria barra de ferramentas, decidia o zoom, e no telemóvel fazia o
   que lhe apetecia. Isto rende as páginas e trata-as como páginas de um livro.

   Três temperaturas de luz, porque ler de noite num ecrã branco cansa e ler
   de dia num ecrã preto lava o texto. O sépia existe pela mesma razão por que
   existe em papel: é o que menos incomoda ao fim de uma hora.
   ========================================================================== */

.pagina--leitor .container { max-width: 76rem; }

.leitor {
  --leitor-fundo:  #0c0a09;
  --leitor-papel:  #ffffff;
  --leitor-veu:    0;          /* quanto se abafa o branco da página */
  --leitor-inv:    0;
  position: relative;
  border: 1px solid var(--borda);
  background: var(--leitor-fundo);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.leitor[data-tema="claro"] { --leitor-fundo: #e7e5e4; --leitor-papel: #ffffff; }
.leitor[data-tema="sepia"] { --leitor-fundo: #ded3bd; --leitor-papel: #f6ecd8; --leitor-veu: .10; }
.leitor[data-tema="escuro"]{ --leitor-fundo: #0c0a09; --leitor-papel: #ffffff; --leitor-inv: 1; }

/* ── O palco ─────────────────────────────────────────────────────────────── */
.leitor__palco {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: min(82vh, 60rem); min-height: 22rem;
  padding: 1rem;
  overflow: auto;
  overscroll-behavior: contain;
}
.leitor--inteiro .leitor__palco { height: calc(100vh - 5.5rem); }

.leitor__pagina {
  position: relative;
  line-height: 0;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .55);
  /* O tema escuro não pinta a página de preto: baixa o brilho do papel. Um
     PDF invertido fica com as figuras em negativo, e um livro técnico é
     metade figuras. */
  filter: brightness(calc(1 - var(--leitor-inv) * 0.13)) sepia(var(--leitor-veu));
  transition: filter .2s ease;
}
.leitor__tela { display: block; background: var(--leitor-papel); }

/* A camada de texto: invisível, exactamente por cima do desenho. É o que
   permite seleccionar e copiar — sem ela o livro seria uma imagem, e uma
   imagem não se cita. */
.leitor__camada-texto {
  position: absolute; inset: 0; overflow: hidden;
  opacity: .01; line-height: 1;
}
.leitor__camada-texto span, .leitor__camada-texto br {
  color: transparent; position: absolute; white-space: pre;
  cursor: text; transform-origin: 0 0;
}
.leitor__camada-texto ::selection { background: var(--red-700); }

/* ── Virar a página ──────────────────────────────────────────────────────
   A animação é curta de propósito. Uma transição bonita à primeira vez é uma
   transição irritante à trigésima, e quem lê um livro vira trezentas páginas.
   Quem pediu menos movimento ao sistema não leva nenhuma. */
@keyframes leitor-virar {
  from { opacity: .25; transform: translateX(1.25rem) rotateY(-2.5deg); }
  to   { opacity: 1;   transform: none; }
}
.leitor__palco--virar .leitor__pagina {
  animation: leitor-virar .22s cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .leitor__palco--virar .leitor__pagina { animation: none; }
  .leitor__pagina { transition: none; }
}

.leitor__espera {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--texto-tenue); font-family: var(--mono); font-size: .8125rem;
  pointer-events: none;
}
.leitor--pronto .leitor__espera { display: none; }

/* ── As margens que viram a página ───────────────────────────────────────
   Aparecem ao passar o rato e ficam sempre visíveis no toque, onde não há
   rato para as revelar. */
.leitor__margem {
  position: absolute; top: 0; bottom: 0; width: 18%;
  border: 0; background: none; cursor: pointer;
  color: var(--texto); font-size: 2.5rem; line-height: 1;
  opacity: 0; transition: opacity .15s ease;
  display: flex; align-items: center; justify-content: center;
}
.leitor__margem--esq { left: 0; }
.leitor__margem--dir { right: 0; }
.leitor__palco:hover .leitor__margem { opacity: .35; }
.leitor__margem:hover { opacity: .9 !important; }
.leitor__margem:disabled { opacity: 0 !important; cursor: default; }
.leitor__margem span {
  background: rgba(0, 0, 0, .45); border-radius: 50%;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  padding-bottom: .2rem;
}
@media (hover: none) { .leitor__palco .leitor__margem { opacity: .3; } }

/* ── A barra ─────────────────────────────────────────────────────────────── */
.leitor__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  padding: .6rem .85rem;
  border-top: 1px solid var(--borda);
  background: var(--stone-900);
}
.leitor__grupo { display: flex; align-items: center; gap: .4rem; }
.leitor__grupo--meio { flex: 1 1 auto; justify-content: center; }

.leitor__btn {
  border: 1px solid var(--stone-800); background: none; color: var(--texto-suave);
  font-family: var(--mono); font-size: .75rem; line-height: 1;
  padding: .45rem .6rem; cursor: pointer; transition: all .12s ease;
}
.leitor__btn:hover { color: var(--texto); border-color: var(--stone-700); }

.leitor__numero {
  width: 3.5rem; text-align: center;
  background: #0c0a09; color: var(--texto);
  border: 1px solid var(--stone-800); font-family: var(--mono);
  font-size: .8125rem; padding: .35rem .25rem;
  -moz-appearance: textfield; appearance: textfield;
}
.leitor__numero::-webkit-outer-spin-button,
.leitor__numero::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.leitor__temas { display: inline-flex; gap: .25rem; margin: 0 .25rem; }
.leitor__tema {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--stone-700); padding: 0;
}
.leitor__tema--claro  { background: #ffffff; }
.leitor__tema--sepia  { background: #f6ecd8; }
.leitor__tema--escuro { background: #1c1917; }
.leitor__tema[aria-pressed="true"] { outline: 2px solid var(--acento); outline-offset: 2px; }

.leitor__linha { height: 2px; background: var(--stone-800); }
.leitor__linha span {
  display: block; height: 100%; width: 0;
  background: var(--acento); transition: width .22s ease;
}

/* ── O índice ────────────────────────────────────────────────────────────── */
.leitor__indice {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(20rem, 82%);
  background: var(--stone-900); border-right: 1px solid var(--borda);
  transform: translateX(-101%); transition: transform .2s ease;
  display: flex; flex-direction: column; z-index: 3;
}
.leitor__indice.aberto { transform: none; }
@media (prefers-reduced-motion: reduce) { .leitor__indice { transition: none; } }
.leitor__indice-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid var(--borda);
}
.leitor__indice-lista { overflow-y: auto; padding: .5rem 0; }
.leitor__indice-i {
  display: flex; justify-content: space-between; gap: .75rem; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--texto-suave); font-size: .8125rem; line-height: 1.45;
  padding: .5rem 1rem;
}
.leitor__indice-i:hover { background: var(--stone-800); color: var(--texto); }
.leitor__indice-i.activa { color: var(--acento); }
.leitor__indice-i--1 { padding-left: 2rem; font-size: .78125rem; }
.leitor__indice-i--2 { padding-left: 3rem; font-size: .78125rem; opacity: .85; }

.leitor__falha, .leitor__falha-js {
  text-align: center; color: var(--texto-suave); padding: 3rem 1rem;
}

/* Só lê o atalho quem tem teclado para o usar. */
.leitor__dica { display: none; }
@media (hover: hover) and (pointer: fine) { .leitor__dica { display: block; } }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 640px) {
  .leitor__palco { padding: .35rem; height: min(74vh, 44rem); }
  .leitor__barra { padding: .5rem; gap: .4rem; }
  .leitor__btn   { padding: .4rem .5rem; }
}

/* ── Escolher o formato ──────────────────────────────────────────────────────
   Duas cartas lado a lado, e não um menu suspenso. Uma escolha entre duas
   coisas vê-se melhor do que se abre — e o impresso tem de mostrar o que
   justifica a diferença de preço, que é levar os dois. */
.compra-formatos {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 30rem) { .compra-formatos { grid-template-columns: 1fr; } }
.compra-formato {
  display: flex; align-items: flex-start; gap: .75rem;
  cursor: pointer; padding: 1rem;
  border: 1px solid var(--borda); transition: border-color .12s ease;
}
.compra-formato:hover { border-color: var(--stone-700); }
.compra-formato--activo { border-color: var(--acento); background: rgba(127,29,29,.06); }

/* O botão de escolha, à vista.

   Estava com `opacity: 0`: a caixa inteira era clicável, mas nada na página
   dizia que havia ali uma escolha para fazer — via-se dois cartões lado a
   lado, como se fossem dois anúncios. Um controlo que não se vê não convida
   ninguém a carregar nele. */
.compra-formato input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0;
  border: 2px solid var(--stone-600); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.compra-formato input:checked {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 .27rem var(--acento);
}
.compra-formato input:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px;
}
.compra-formato__corpo { min-width: 0; }
.compra-formato__nome  { display: block; color: var(--texto); font-weight: 500; }
.compra-formato__preco {
  display: block; font-family: var(--mono); font-size: 1.125rem;
  color: var(--texto); margin: .35rem 0 .25rem;
}
.compra-formato__nota  { display: block; font-size: .8125rem; color: var(--texto-tenue); }


/* ============================================================================
   O leitor de EPUB                                                   (1.45.0)

   O outro leitor desenha páginas compostas; este desenha texto. Aqui o
   tamanho da letra não é zoom: o texto reflui, e é isso que faz um livro ser
   legível num telemóvel.

   A paginação é por colunas do CSS — o texto enche colunas da largura da
   janela e a folha desloca-se de uma para a outra. É como um livro vira uma
   página, e não como uma página se desenrola.
   ========================================================================== */

.leitor--epub[data-tema="claro"]  { --epub-papel:#ffffff; --epub-tinta:#1c1917; --epub-fio:#e7e5e4; --epub-tenue:#78716c; }
.leitor--epub[data-tema="sepia"]  { --epub-papel:#f6ecd8; --epub-tinta:#3a3121; --epub-fio:#e0d0b4; --epub-tenue:#8a7c62; }
.leitor--epub[data-tema="escuro"] { --epub-papel:#14161a; --epub-tinta:#d6d9df; --epub-fio:#262a31; --epub-tenue:#8b93a1; }

.leitor--epub {
  --epub-corpo: 20px;
  --epub-linha: 1.62;
  --epub-face: Georgia, "Times New Roman", serif;
}

.leitor--epub .leitor__palco { padding: 0; display: block; }

.leitor__folha {
  position: relative;
  height: 100%;
  background: var(--epub-papel);
  color: var(--epub-tinta);
  overflow: hidden;
}
.leitor__fluxo {
  height: 100%;
  padding: clamp(1.4rem, 4vw, 3rem) clamp(1.1rem, 4vw, 3.2rem);
  column-gap: 3rem;
  column-fill: auto;
  font-family: var(--epub-face);
  font-size: var(--epub-corpo);
  line-height: var(--epub-linha);
  text-align: justify;
  hyphens: auto;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) { .leitor__fluxo { transition: none; } }

/* O que o livro traz lá dentro, arrumado para se ler aqui.

   O «break-inside: avoid» é para o que fica mal partido — um título, uma
   citação, uma tabela. Um PARÁGRAFO parte-se bem, e é assim que se lê num
   livro: a frase continua na página seguinte. Aplicá-lo a tudo fazia com que
   um parágrafo que não coubesse saltasse inteiro e deixasse metade da coluna
   em branco — onze por cento de páginas a mais, todas com um buraco. */
.leitor__fluxo h1, .leitor__fluxo h2, .leitor__fluxo h3,
.leitor__fluxo blockquote, .leitor__fluxo table,
.leitor__fluxo figure, .leitor__fluxo li { break-inside: avoid-column; }
.leitor__fluxo p { margin: 0 0 .9em; }
.leitor__fluxo h1, .leitor__fluxo h2, .leitor__fluxo h3 {
  text-align: left; line-height: 1.22; text-wrap: balance;
  break-after: avoid-column; margin: 1.6em 0 .6em;
}
.leitor__fluxo h1 { font-size: 1.42em; margin-top: 0; }
.leitor__fluxo h2 { font-size: 1.18em; }
.leitor__fluxo h3 { font-size: 1.02em; }
.leitor__fluxo blockquote {
  margin: 1.1em 0; padding-left: 1.1em;
  border-left: 2px solid var(--epub-fio); font-style: italic; text-align: left;
}
.leitor__fluxo ul, .leitor__fluxo ol { margin: 1em 0; padding-left: 1.3em; text-align: left; }
.leitor__fluxo li { margin-bottom: .45em; }
.leitor__fluxo img { max-width: 100%; height: auto; }
.leitor__fluxo table { width: 100%; border-collapse: collapse; font-size: .9em; }
.leitor__fluxo td, .leitor__fluxo th { border: 1px solid var(--epub-fio); padding: .3em .45em; }

/* A frase que está a ser lida em voz alta. */
.leitor__fluxo .leitor__dita { background: rgba(180, 83, 9, .16); border-radius: 2px; }

/* Os ajustes de tipografia. Não são enfeite: são o que o EPUB tem e o PDF
   não pode ter. */
.leitor__ajustes {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  background: var(--epub-papel); color: var(--epub-tinta);
  border-top: 1px solid var(--epub-fio);
  padding: .8rem 1rem; display: grid; gap: .7rem;
}
.leitor__ajustes[hidden] { display: none !important; }
.leitor__ajuste { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.leitor__ajuste > span:first-child { font-size: .78rem; min-width: 5.2rem; color: var(--epub-tenue); }

.leitor__indice-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.leitor__indice-lista button {
  width: 100%; text-align: left; font: inherit; font-size: .86rem;
  background: transparent; border: 0; border-radius: 6px; padding: .5rem .6rem;
  cursor: pointer; color: inherit;
}
.leitor__indice-lista button:hover { background: rgba(128,128,128,.14); }
.leitor__indice-lista button[aria-current="true"] { background: rgba(128,128,128,.2); font-weight: 600; }


/* ============================================================================
   A página de compra, em duas colunas                                (1.46.3)

   Era uma coluna de 42rem ao meio de um ecrã de 1280, com bandas vazias dos
   dois lados: para chegar ao botão de pagar rolava-se por cima de tudo o
   resto — a capa, o aviso, os idiomas, os formatos, o total e a tabela.

   Agora, a partir de 64rem: à esquerda o que se escolhe e o que se lê; à
   direita o que se paga. A coluna da direita cola-se ao topo enquanto a
   esquerda rola, para o total e o botão nunca saírem do ecrã.

   Abaixo de 64rem não há grelha nenhuma: volta a ser uma coluna só, pela
   mesma ordem de leitura, que é a ordem em que o HTML está escrito.
   ========================================================================== */

.container--compra { max-width: var(--largura-estreita); }

.compra-grelha { display: block; }

@media (min-width: 64rem) {
  .container--compra { max-width: 68rem; }

  .compra-grelha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 3rem;
    align-items: start;
  }

  .compra-grelha__caixa { align-self: start; }
}

/* Colar ao topo, mas SÓ quando há altura para a coluna inteira.

   Um elemento «sticky» mais alto do que a janela cola-se pelo topo e nunca
   mais mostra o fundo: num ecrã de 640px a coluna mede 716, e o que ficava
   inalcançável era o aviso de que alguém responde e a ligação aos termos —
   justamente as duas coisas que uma página de pagamento não pode esconder.

   Abaixo desta altura não cola: as duas colunas ficam, e rola-se como sempre.
   O `max-height` é o cinto: se um dia o conteúdo crescer — um erro do cupão,
   um desconto a mais —, a coluna ganha barra em vez de cortar o fim. */
@media (min-width: 64rem) and (min-height: 52rem) {
  .compra-grelha__caixa {
    position: sticky;
    top: 5.5rem;                       /* o cabeçalho, mais folga */
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}


/* ============================================================================
   O bloco dos preços                                                 (1.46.4)

   Um bloco só, chamado por todas as páginas que mostram preços. Antes cada
   uma escrevia o seu: a entrada dizia uma coisa, a lista dos livros outra, a
   loja só o número sem dizer de quê, e a página do livro outra ainda.

   É uma COLUNA e não texto solto: sem isto, «Em papel no lançamento: 25,00 €»
   partia-se ao meio e ia chocar com o «4 idiomas» que está ao lado no cartão.
   ========================================================================== */

.precos { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.precos__ebook {
  font-family: var(--mono); font-size: 1.0625rem; color: var(--texto);
  line-height: 1.25;
}
.precos__papel {
  font-size: .8125rem; color: var(--texto-tenue); line-height: 1.3;
  text-wrap: pretty;
}

/* O rodapé do cartão mudou de natureza na 1.47.2: já não arruma um bloco de
   preços em duas linhas — arruma o controlo de compra. As regras estão mais
   abaixo, com o resto do cartão. */


/* ============================================================================
   O botão de compra com o seletor de versão                          (1.47.1)

   Uma acção — «Reservar agora» — e, encostada a ela, a versão escolhida com
   o preço. Carregar na outra versão troca o preço e o destino do botão.

   A primeira tentativa foram dois botões lado a lado, e no destaque da
   entrada ficavam três empilhados, um deles com uma nota por baixo. Mais
   botões para a mesma decisão é o contrário de resolver.
   ========================================================================== */

.compra-cta {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--acento); max-width: 100%;
}

.compra-cta__accao {
  border: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center;
}

.compra-cta__versoes { display: flex; min-width: 0; }

.compra-cta__v {
  display: flex; flex-direction: column; justify-content: center;
  padding: .55rem .9rem; min-width: 0;
  background: transparent; color: var(--texto-tenue);
  font-size: .8125rem; line-height: 1.25; text-decoration: none;
  cursor: pointer; transition: background-color .12s ease, color .12s ease;
  border-left: 1px solid var(--borda);
}
.compra-cta__v:hover { color: var(--texto); background: rgba(127,29,29,.12); }

.compra-cta__v--activa {
  background: rgba(127,29,29,.18); color: var(--texto);
}
.compra-cta__v--activa .compra-cta__preco { font-weight: 600; }

.compra-cta__preco { font-family: var(--mono); white-space: nowrap; }
.compra-cta__nota  { font-size: .6875rem; opacity: .75; white-space: nowrap; }

.compra-cta--pequeno .compra-cta__v { padding: .4rem .7rem; font-size: .75rem; }

/* Num telemóvel os dois preços lado a lado não cabem: a acção fica em cima,
   com a largura toda, e as versões por baixo, meia a meia. */
@media (max-width: 34rem) {
  .compra-cta { display: flex; flex-direction: column; }
  .compra-cta__accao { justify-content: center; }
  .compra-cta__versoes { border-top: 1px solid var(--borda); }
  .compra-cta__v { flex: 1 1 50%; text-align: center; align-items: center; }
  .compra-cta__v:first-child { border-left: 0; }
}


/* ============================================================================
   O cartão do livro, com a escolha lá dentro                         (1.47.2)

   O cartão era uma ligação a envolver tudo, e por isso não podia ter um botão
   dentro. Mostrava os dois preços e não deixava escolher: quem queria o
   impresso tinha de entrar no livro primeiro. Agora a capa e o texto são a
   ligação, e a escolha fica por baixo — a mesma das outras páginas.
   ========================================================================== */

.cartao-livro__ligacao {
  display: flex; flex-direction: column; flex: 1;
  text-decoration: none; color: inherit; min-height: 0;
}

.cartao-livro__rodape {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 0 1rem 1rem;
  background: var(--stone-900);
  transition: background-color var(--transicao);
}
.cartao-livro:hover .cartao-livro__rodape { background: var(--stone-800); }

.cartao-livro__idiomas { align-self: flex-start; }

/* O controlo em coluna: a acção em cima, com a largura toda, e as duas
   versões por baixo, meia a meia. É o mesmo desenho que o telemóvel usa —
   aqui não é a janela que é estreita, é o cartão. */
.compra-cta--coluna { display: flex; flex-direction: column; width: 100%; }
.compra-cta--coluna .compra-cta__accao { justify-content: center; }
.compra-cta--coluna .compra-cta__versoes { border-top: 1px solid var(--borda); }
.compra-cta--coluna .compra-cta__v {
  flex: 1 1 50%; text-align: center; align-items: center;
}
.compra-cta--coluna .compra-cta__v:first-child { border-left: 0; }

/* Num cartão, «Livro impresso 25,00 €» pede 157 px e a metade tem 128: em
   linha única era texto cortado. Aqui parte-se em duas linhas, e as duas
   versões ficam lado a lado com o mesmo peso — que é o ponto de as mostrar
   assim. */
.compra-cta--coluna .compra-cta__preco,
.compra-cta--coluna .compra-cta__nota { white-space: normal; }
.compra-cta--coluna .compra-cta__v {
  padding: .5rem .6rem;
  /* A mesma altura com uma versão ou com duas.

     Sem isto, o cartão do livro que tem papel ficava 30 px mais alto do que
     os do lado — o «inclui o e-book» e o preço em duas linhas somam uma linha
     e meia. Numa grelha de cartões, três alturas diferentes para a mesma
     coisa é o que faz uma página parecer desarrumada. */
  min-height: 3.9rem;
}



/* Os emblemas dos idiomas são ESCOLHAS, não etiquetas.               (1.48.4)

   Estavam como texto: a lista dizia que o livro existe em cinco línguas e a
   nota mandava escolher «ao comprar» — mas quem lê carrega no PT, no EN, no
   ES, e não acontece nada. O autor foi o primeiro a tentar. */
.emblema--liga { text-decoration: none; cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.emblema--liga:hover { border-color: var(--acento); color: var(--texto); }
.emblema--liga:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ── Partilhar (1.50.0) ──────────────────────────────────────────────────── */

/* Monocromático, como o resto do site: as cores de cada rede só aparecem ao
   passar o rato, para o leitor saber onde vai carregar. Oito logótipos
   coloridos sempre acesos seriam a coisa mais berrante da página. */
.partilha { margin: 1.5rem 0; }
.partilha__rotulo {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin: 0 0 .6rem;
}
.partilha__convite {
  font-family: var(--serifa);
  font-size: 1.25rem;
  color: var(--texto);
  margin: 0 0 1rem;
}
.partilha__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.partilha__lista li { margin: 0; }
.partilha__botao {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto-suave);
  font: inherit;
  font-size: .8125rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao), background var(--transicao);
}
.partilha__botao svg { flex: none; }
.partilha__botao:hover,
.partilha__botao:focus-visible { border-color: var(--borda-forte); color: #fff; }
.partilha__botao--whatsapp:hover { background: #128c4b; border-color: #128c4b; }
.partilha__botao--facebook:hover { background: #1b5fd1; border-color: #1b5fd1; }
.partilha__botao--x:hover        { background: #000; border-color: var(--stone-500); }
.partilha__botao--telegram:hover { background: #1c7fb5; border-color: #1c7fb5; }
.partilha__botao--linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.partilha__botao--nativo,
.partilha__botao--nativo:hover   { background: var(--acento); border-color: var(--acento); color: #fff; }
.partilha__botao--feito          { border-color: #15803d; color: #4ade80; }
.partilha__aviso {
  min-height: 1.2em;
  margin: .5rem 0 0;
  font-size: .75rem;
  color: #4ade80;
}

/* A versão do topo: só os ícones, quadrados, discretos. */
.partilha--compacta { margin: 1rem 0 0; }
.partilha--compacta .partilha__lista { gap: .375rem; }
.partilha--compacta .partilha__botao {
  width: 2.5rem;
  padding: 0;
  justify-content: center;
}
.partilha--compacta .partilha__nome {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.partilha--compacta .partilha__rotulo { display: none; }
.partilha--compacta .partilha__aviso:empty { display: none; }

/* A versão do fim do artigo: dentro de uma moldura, para se ver. */
.prosa + .mt-4 > .partilha:not(.partilha--compacta) {
  border: 1px solid var(--borda);
  padding: 1.5rem;
}

/* Em ecrã estreito, os nomes saem e ficam os ícones — oito botões com nome
   ocupariam três linhas. */
@media (max-width: 34rem) {
  .partilha__botao { width: 2.75rem; min-height: 2.75rem; padding: 0; justify-content: center; }
  .partilha__nome {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* O botão junto de cada passagem. Pequeno e tenue: está lá para quem o
   procura, sem competir com o texto. */
.prosa .passagem-partilha {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: -1.6rem 0 1.5rem 1.25rem;
  padding: .25rem .5rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto-tenue);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.prosa .passagem-partilha svg { width: 14px; height: 14px; }
.prosa .passagem-partilha:hover,
.prosa .passagem-partilha:focus-visible,
.prosa .passagem-partilha[aria-expanded="true"] { color: #fff; border-color: var(--borda); }
.prosa .passagem-menu {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin: -1rem 0 1.5rem 1.25rem;
}
.prosa .passagem-menu a,
.prosa .passagem-menu button {
  padding: .4rem .75rem;
  border: 1px solid var(--borda);
  background: var(--fundo-alt);
  color: var(--texto-suave);
  font: inherit;
  font-size: .8125rem;
  text-decoration: none;
  cursor: pointer;
}
.prosa .passagem-menu a:hover,
.prosa .passagem-menu button:hover { color: #fff; border-color: var(--borda-forte); }

/* ── Instagram (1.51.0) ─────────────────────────────────────────────────── */
.partilha__botao--instagram:hover {
  background: linear-gradient(45deg, #e09b3d, #c74c4d 35%, #c21975 65%, #7024c4);
  border-color: #c21975;
}

/* ── «Gostei» (1.51.0) ──────────────────────────────────────────────────────
   O coração vazio até carregar, cheio depois. O obrigado aparece por cima da
   caixa de partilha, que ganha a cor do acento nesse momento — é para lá que
   o olho tem de ir a seguir. */
.gostei {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin: 0 0 1.5rem;
}
.gostei__botao {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .5rem 1.1rem;
  border: 1px solid var(--borda-forte);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: .9375rem;
  cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao), background var(--transicao);
}
.gostei__botao svg { fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s ease; }
.gostei__botao:hover,
.gostei__botao:focus-visible { border-color: var(--acento); color: #fff; }
.gostei--dado .gostei__botao { border-color: var(--acento); color: #fff; }
.gostei--dado .gostei__botao svg { fill: var(--acento); stroke: var(--acento); }
.gostei--pulso .gostei__botao svg { transform: scale(1.25); }
.gostei__botao[disabled] { opacity: .6; cursor: progress; }
.gostei__total { font-size: .8125rem; color: var(--texto-tenue); }
.gostei__obrigado {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--serifa);
  font-size: 1.125rem;
  color: var(--texto);
}
.prosa + .mt-4 > .partilha.partilha--destaque {
  border-color: var(--acento);
  transition: border-color .4s ease;
}

/* ── /pix e /links (1.54.0) ─────────────────────────────────────────────── */

.pix { max-width: 46rem; margin: 0 auto; }
.pix__topo { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 2rem; }
.pix__capa { width: 6rem; height: auto; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8); flex: none; }
.pix__titulo { font-size: clamp(1.5rem, 4vw, 2.25rem); margin: .25rem 0; }
.pix__valor { font-family: var(--serifa); font-size: 2rem; color: #fff; margin: 0; }
.pix__grelha { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.pix__qr { margin: 0; background: #fff; padding: 1rem; border-radius: .5rem; text-align: center; }
.pix__qr img { display: block; width: 100%; height: auto; }
.pix__qr figcaption { color: #1c1917; font-size: .8125rem; font-weight: 600; margin-top: .25rem; }
.pix__passos { margin: 0; padding-left: 1.5rem; list-style: decimal; display: flex; flex-direction: column; gap: 1.25rem; color: var(--texto-suave); }
.pix__passos strong { color: #fff; }
.pix__codigo { display: flex; gap: .5rem; margin-top: .625rem; }
.pix__codigo .campo { flex: 1; min-width: 0; font-size: .75rem; }
.pix__alt { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin-top: 2.5rem; padding: 1rem 1.25rem; border: 1px solid var(--borda); background: var(--stone-900); }
@media (max-width: 720px) {
  .pix__grelha { grid-template-columns: 1fr; }
  .pix__qr { max-width: 18rem; margin: 0 auto; }
}

.ligacoes { max-width: 30rem; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.ligacoes__foto { width: 7.5rem; height: 7.5rem; margin: 0 auto 1rem; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #3b2a1c, #120f0e); box-shadow: 0 0 0 3px #d9b77a; }
.ligacoes__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.ligacoes__nome { font-family: var(--serifa); font-size: 1.75rem; margin: 0; }
.ligacoes__bio { color: var(--texto-fraco); font-size: .9375rem; margin: .375rem 0 1.75rem; }
.ligacoes__lista { display: flex; flex-direction: column; gap: .75rem; }
.ligacoes__b { display: flex; align-items: center; gap: .875rem; text-align: left; padding: .875rem 1.125rem;
  border: 1px solid var(--borda); background: var(--stone-900); color: var(--texto); border-radius: .75rem;
  transition: border-color var(--transicao), transform var(--transicao); }
.ligacoes__b:hover { border-color: var(--acento); transform: translateY(-2px); color: #fff; }
.ligacoes__b span { flex: 1; display: flex; flex-direction: column; }
.ligacoes__b small { color: var(--texto-tenue); font-size: .8125rem; }
.ligacoes__b i { font-style: normal; color: var(--texto-tenue); }
.ligacoes__b img { width: 2.75rem; height: auto; border-radius: .15rem; flex: none; }
.ligacoes__b--destaque { background: linear-gradient(135deg, var(--red-900), var(--stone-900) 70%); border-color: var(--red-800); }
.ligacoes__b--destaque i { color: #fff; }
.ligacoes__frase { font-family: var(--serifa); font-style: italic; color: #d9b77a; margin: 2.25rem 0 0; }
.pix__passos li::marker { color: #d9b77a; font-weight: 700; }