/* ============================================================================
   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;
}
.cartao-livro__rodape {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}

.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; }