/* O Código da Libertação — folha da página do livro.

   Herda tokens.css sem tocar em nenhum valor, pelo mesmo motivo do site dos
   Guardiões: aquela paleta é a única desta casa que passou por medição de
   contraste, e refazer paleta é refazer a medição.

   Uma decisão própria desta página: a CAPA é a peça gráfica, e ela já traz
   título, autor e subtítulo impressos. Então o texto ao lado não repete nada
   disso em tamanho grande — ele responde o que a capa não responde: quanto
   custa, em que formatos, e quando chega.

   O escuro aparece UMA vez (a citação) mais o rodapé. A página é curta; duas
   faixas escuras num texto deste tamanho já seriam demais. */

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

body {
  margin: 0;
  background: var(--osso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-corpo-2);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
}

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

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinta); color: var(--osso-sobre-escuro);
  padding: 12px 18px; border-radius: 0 0 var(--raio) 0;
}
.pular:focus { left: 0; }

.limite { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- topo ---------- */
.faixa-topo {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246, 244, 236, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fio);
}
.faixa-topo-grade { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: 66px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marca img { border-radius: 7px; }
.marca span { font-family: var(--titulo); font-weight: var(--p-forte); letter-spacing: 0.14em; font-size: var(--t-micro); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px;
  background: var(--tinta); color: var(--osso-sobre-escuro);
  border: 1px solid var(--tinta); border-radius: 100px;
  font-family: var(--sans); font-size: var(--t-corpo-2); font-weight: var(--p-medio);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.botao:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(17, 28, 53, 0.6); }
.botao:focus-visible { outline: var(--foco); outline-offset: 3px; }
.botao-vazado { background: transparent; color: var(--tinta); }
.botao-compacto { min-height: 40px; padding: 0 20px; font-size: var(--t-etiqueta); }

/* ---------- abertura ---------- */
.abertura { padding: var(--e-6) 0 var(--e-5); }
.abertura-grade { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: var(--e-6); align-items: center; }
.sobrancelha {
  font-size: var(--t-etiqueta); letter-spacing: var(--ls-etiqueta); text-transform: uppercase;
  color: var(--tinta-mudo); margin: 0 0 var(--e-2);
}
.abertura h1 {
  font-family: var(--titulo); font-size: var(--t-titulo-1); font-weight: var(--p-forte);
  line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo);
  margin: 0 0 var(--e-2); max-width: 15ch; text-wrap: balance;
}
.linha-fina {
  font-family: var(--titulo); font-size: var(--t-corpo); font-weight: var(--p-medio);
  color: var(--ouro); max-width: 40ch; margin: 0 0 var(--e-3);
}
.cta-par { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-4) 0 var(--e-3); }
.rodape-cta { font-size: var(--t-micro); color: var(--tinta-mudo); max-width: 48ch; margin: 0; }
.rodape-cta strong { color: var(--tinta); font-weight: var(--p-medio); font-variant-numeric: tabular-nums; }

/* A capa tem sombra forte e raio pequeno: é um objeto, não um cartão de
   interface. O fundo creme dela encosta no --osso da página, e sem a sombra a
   borda do livro sumiria contra o fundo. */
.capa { margin: 0; }
.capa img {
  width: 100%; max-width: 420px; margin-left: auto;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(17, 28, 53, 0.08), 0 40px 80px -36px rgba(17, 28, 53, 0.55);
}

/* ---------- seções ---------- */
.secao { padding: var(--e-6) 0; }
.secao-clara { background: var(--osso-2); }
.secao h2 {
  font-family: var(--titulo); font-size: var(--t-titulo-2); font-weight: var(--p-forte);
  line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo);
  margin: 0 0 var(--e-3); max-width: 22ch; text-wrap: balance;
}
.texto-largo { font-size: var(--t-corpo); color: var(--tinta-2); max-width: 46ch; margin: 0 0 var(--e-2); }
.texto-coluna { max-width: var(--largura-texto); }
.texto-coluna p { font-size: var(--t-corpo); color: var(--tinta-2); margin: 0 0 var(--e-2); }
.destaque-linha {
  border-left: 3px solid var(--ouro); padding-left: var(--e-2);
  color: var(--tinta); font-style: italic;
}
.nota-secao { font-size: var(--t-micro); color: var(--tinta-mudo); max-width: 62ch; margin: var(--e-3) 0 0; }
.nota-secao strong { color: var(--tinta-2); font-weight: var(--p-medio); }

/* ---------- os dois formatos ----------
   Dois cartões, mesmo peso visual. Nenhum dos dois é "recomendado": o digital
   é mais barato e imediato, o impresso é o objeto. Marcar um como destaque
   seria empurrar, e o leitor decide por preço e por prazo, que estão os dois
   escritos. */
.formatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e-3); margin-top: var(--e-4); max-width: 860px; }
.formato {
  background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio-g);
  padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start;
}
.formato-tipo { font-size: var(--t-etiqueta); letter-spacing: var(--ls-etiqueta); text-transform: uppercase; color: var(--tinta-mudo); margin: 0; }
.formato-preco { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.formato-preco strong {
  font-family: var(--titulo); font-size: var(--t-titulo-2); font-weight: var(--p-forte);
  color: var(--ouro); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-titulo);
}
.formato-preco span { font-size: var(--t-micro); color: var(--tinta-mudo); }
.formato-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.formato-lista li { font-size: var(--t-micro); color: var(--tinta-2); padding-left: 16px; position: relative; }
.formato-lista li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ouro); }
.formato-lista strong { color: var(--tinta); font-weight: var(--p-medio); font-variant-numeric: tabular-nums; }
.formato .botao { margin-top: auto; align-self: stretch; }
.formato-nota { font-size: var(--t-etiqueta); color: var(--tinta-mudo); margin: 0; }

/* ---------- ficha técnica ----------
   Faltam DIMENSÃO e DATA nesta lista, de propósito: as duas estão divergentes
   entre quem imprime e quem anuncia. O portão reprova se alguém acrescentar
   qualquer uma das duas antes de a origem bater. */
.ficha { margin: var(--e-4) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e-2); max-width: 860px; }
.ficha > div { background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio); padding: var(--e-2) var(--e-3); }
.ficha dt { font-size: var(--t-etiqueta); letter-spacing: var(--ls-etiqueta); text-transform: uppercase; color: var(--tinta-mudo); margin-bottom: 2px; }
.ficha dd { margin: 0; font-size: var(--t-corpo-2); font-weight: var(--p-medio); font-variant-numeric: tabular-nums; }

/* ---------- faixa escura ---------- */
.faixa-escura { background: var(--tinta); color: var(--osso-sobre-escuro); padding: var(--e-6) 0; }
.faixa-escura blockquote { margin: 0; max-width: 30ch; }
.faixa-escura blockquote p {
  font-family: var(--titulo); font-size: var(--t-titulo-2); font-weight: var(--p-leve);
  line-height: 1.22; letter-spacing: var(--ls-titulo); margin: 0 0 var(--e-3);
}
.faixa-escura footer span { font-size: var(--t-micro); color: var(--ouro-luz); letter-spacing: 0.06em; }

/* ---------- recusa ---------- */
.recusa { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: var(--e-2); max-width: 64ch; }
.recusa li { padding: var(--e-3); background: var(--papel); border: 1px solid var(--fio); border-left: 3px solid var(--alerta); border-radius: var(--raio); font-size: var(--t-micro); color: var(--tinta-2); }
.recusa strong { display: block; color: var(--tinta); font-size: var(--t-corpo-2); font-weight: var(--p-medio); margin-bottom: 4px; }
/* Cor NÃO é o único sinal: o itálico carrega o mesmo aviso para quem não
   distingue vermelho. */
.negacao { color: var(--alerta); font-style: italic; }

/* ---------- FAQ ---------- */
.faq { margin-top: var(--e-4); max-width: 64ch; display: grid; gap: var(--e-1); }
.faq details { background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px var(--e-3);
  font-size: var(--t-corpo-2); font-weight: var(--p-medio); min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ouro); font-size: 20px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline: var(--foco); outline-offset: -2px; border-radius: var(--raio); }
.faq p { margin: 0; padding: 0 var(--e-3) var(--e-3); font-size: var(--t-micro); color: var(--tinta-2); }

/* ---------- rodapé ---------- */
.rodape { background: var(--tinta); color: var(--mudo-sobre-escuro); padding: var(--e-5) 0 var(--e-4); font-size: var(--t-micro); }
.rodape-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--e-4); }
.rodape p { margin: 0 0 4px; }
.rodape-marca { font-family: var(--titulo); font-weight: var(--p-forte); color: var(--osso-sobre-escuro); letter-spacing: 0.08em; }
.rodape a { color: var(--ouro-luz); text-decoration: none; border-bottom: 1px solid transparent; }
.rodape a:hover, .rodape a:focus-visible { border-bottom-color: currentColor; }
.rodape-aviso { margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--fio-sobre-escuro); }
.rodape-aviso p { font-size: var(--t-etiqueta); max-width: 88ch; margin-bottom: var(--e-1); }

/* ---------- telas estreitas ---------- */
@media (max-width: 980px) {
  .abertura-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
  .abertura h1, .secao h2 { max-width: none; }
  /* A capa fica no topo e limitada: é um livro em pé, e se ocupasse a tela
     inteira a manchete e o preço cairiam abaixo da dobra — o erro que a página
     dos Guardiões cometeu com a foto de abertura. */
  .capa img { max-width: 260px; margin: 0 auto; }
}
@media (max-width: 620px) {
  .secao, .abertura, .faixa-escura { padding: var(--e-5) 0; }
  .cta-par .botao { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .botao { transition: none; }
  .botao:hover { transform: none; }
}