/* ============================================================
   BOREAL TIMES — folha de estilo única
   Paleta fria monocromática. Tipografia como assinatura.
   ============================================================ */

:root {
  /* Cor — preto frio, cinzas de aço, papel. Um único acento: aurora. */
  --tinta:    #0b0d0f;
  --grafite:  #16191c;
  --aco:      #71777e;
  --bruma:    #b9bec4;
  --neve:     #e9ebed;
  --papel:    #fcfcfc;
  --aurora:   #8fb0c2;   /* usado SOMENTE em dados e marcas de preço */

  /* Tipografia */
  --display: "Instrument Serif", Georgia, serif;
  --texto:   "Newsreader", Georgia, serif;
  --dado:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Medidas */
  --medida:  38rem;      /* largura de leitura */
  --largo:   72rem;      /* largura máxima do documento */
  --rail:    11rem;      /* coluna lateral em telas grandes */

  --esp-1: .5rem;  --esp-2: 1rem;  --esp-3: 1.75rem;
  --esp-4: 3rem;   --esp-5: 5rem;  --esp-6: 8rem;
}

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-variant-numeric: oldstyle-num;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Estrutura ---------- */

.doc {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 0 var(--esp-3);
}

.medida { max-width: var(--medida); }

hr.fio {
  border: 0;
  border-top: 1px solid var(--tinta);
  margin: var(--esp-3) 0;
}

hr.fio-fina {
  border: 0;
  border-top: 1px solid var(--neve);
  margin: var(--esp-3) 0;
}

/* ---------- Cabeçalho / masthead ---------- */

.masthead {
  padding-top: var(--esp-3);
  border-top: 3px solid var(--tinta);
}

.masthead__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-3);
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--dado);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aco);
}

.masthead__nome {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.75rem, 13vw, 6.5rem);
  line-height: .92;
  letter-spacing: -.015em;
  margin: var(--esp-2) 0 var(--esp-1);
}

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

.masthead__lema {
  font-family: var(--dado);
  font-size: .6875rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--aco);
  margin: 0 0 var(--esp-3);
}

/* ---------- Navegação ---------- */

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  padding: var(--esp-2) 0;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  font-family: var(--dado);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nav a {
  color: var(--grafite);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.nav a:hover, .nav a:focus-visible { border-bottom-color: var(--tinta); }

/* ---------- Tipografia editorial ---------- */

h1, h2, h3 { font-weight: 400; letter-spacing: -.01em; }

.titulo {
  font-family: var(--display);
  font-size: clamp(2rem, 6.5vw, 3.25rem);
  line-height: 1.06;
  margin: 0 0 var(--esp-2);
}

.subtitulo {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--grafite);
  margin: 0 0 var(--esp-3);
}

.secao__titulo {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  line-height: 1.12;
  margin: 0 0 var(--esp-2);
}

.olho {
  font-family: var(--dado);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aco);
  margin: 0 0 var(--esp-1);
  display: block;
}

.corpo p { margin: 0 0 var(--esp-2); }
.corpo a { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.corpo > *:first-child { margin-top: 0; }

.corpo blockquote {
  margin: var(--esp-3) 0;
  padding-left: var(--esp-2);
  border-left: 2px solid var(--neve);
  color: var(--grafite);
}

.corpo h2 {
  font-family: var(--display);
  font-size: 1.625rem;
  margin: var(--esp-4) 0 var(--esp-2);
}

.corpo h3 {
  font-family: var(--dado);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aco);
  margin: var(--esp-3) 0 var(--esp-1);
}

.corpo ul, .corpo ol { padding-left: 1.2rem; margin: 0 0 var(--esp-2); }
.corpo li { margin-bottom: .4rem; }

/* ---------- Sumário da edição ---------- */

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

.sumario__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--esp-2);
  padding: var(--esp-3) 0;
  border-bottom: 1px solid var(--neve);
}

.sumario__item::before {
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  font-family: var(--dado);
  font-size: .75rem;
  color: var(--bruma);
  padding-top: .55rem;
}

.sumario__item a { color: inherit; text-decoration: none; }
.sumario__item a:hover .sumario__titulo { text-decoration: underline; text-underline-offset: .18em; }

.sumario__titulo {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.14;
  margin: 0 0 .35rem;
}

.sumario__resumo { color: var(--grafite); margin: 0; font-size: .9375rem; }

/* ---------- ASSINATURA VISUAL: a barra de preço ---------- */
/* Mostra pedido → pago. O trecho escuro é o que o comprador não pagou. */

.preco {
  margin: var(--esp-3) 0;
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
}

.preco__rotulo {
  font-family: var(--dado);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aco);
  margin-bottom: var(--esp-2);
}

.preco__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2);
  font-family: var(--dado);
  font-variant-numeric: tabular-nums;
}

.preco__pedido { font-size: 1rem; color: var(--aco); text-decoration: line-through; text-decoration-thickness: 1px; }
.preco__pago   { font-size: clamp(1.5rem, 5vw, 2.25rem); letter-spacing: -.02em; }
.preco__delta  { font-size: .875rem; color: var(--aurora); }

.preco__barra {
  position: relative;
  height: 3px;
  background: var(--neve);
  margin: var(--esp-2) 0 .6rem;
}

.preco__barra span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--tinta);
}

.preco__nota {
  font-family: var(--dado);
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--aco);
  line-height: 1.5;
}

/* ---------- Tabelas de dados ---------- */

.tabela-envelope { overflow-x: auto; margin: var(--esp-3) 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--dado);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

th {
  text-align: left;
  font-weight: 400;
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aco);
  border-bottom: 1px solid var(--tinta);
  padding: .5rem .75rem .5rem 0;
}

td { padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--neve); }

/* ---------- Formulário de lista de espera ---------- */

.espera {
  background: var(--tinta);
  color: var(--papel);
  padding: var(--esp-4) var(--esp-3);
  margin: var(--esp-5) 0;
}

.espera__titulo {
  font-family: var(--display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.08;
  margin: 0 0 var(--esp-2);
}

.espera p { color: var(--bruma); max-width: 34rem; margin: 0 0 var(--esp-3); }

.forma { display: flex; flex-wrap: wrap; gap: .75rem; max-width: 34rem; }

.forma input[type="email"] {
  flex: 1 1 16rem;
  background: transparent;
  border: 1px solid var(--aco);
  color: var(--papel);
  font-family: var(--dado);
  font-size: .875rem;
  padding: .85rem 1rem;
  border-radius: 0;
}

.forma input::placeholder { color: var(--aco); }
.forma input:focus-visible { outline: 2px solid var(--aurora); outline-offset: 2px; }

.botao {
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--papel);
  font-family: var(--dado);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .85rem 1.5rem;
  cursor: pointer;
  border-radius: 0;
  transition: background .18s ease, color .18s ease;
}

.botao:hover { background: transparent; color: var(--papel); }

.espera__miudo {
  font-family: var(--dado);
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--aco);
  margin: var(--esp-2) 0 0;
  max-width: 34rem;
}

/* ---------- Planos ---------- */

.planos {
  display: grid;
  gap: 1px;
  background: var(--neve);
  border: 1px solid var(--neve);
  margin: var(--esp-4) 0;
}

.plano { background: var(--papel); padding: var(--esp-3); }

.plano__nome {
  font-family: var(--dado);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aco);
  margin: 0 0 var(--esp-2);
}

.plano__preco {
  font-family: var(--dado);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin: 0 0 .25rem;
}

.plano__ciclo { font-family: var(--dado); font-size: .6875rem; color: var(--aco); margin: 0 0 var(--esp-2); }
.plano ul { list-style: none; padding: 0; margin: 0; font-size: .9375rem; }
.plano li { padding: .45rem 0; border-top: 1px solid var(--neve); }
.plano--destaque { background: var(--tinta); color: var(--papel); }
.plano--destaque .plano__nome, .plano--destaque .plano__ciclo { color: var(--bruma); }
.plano--destaque li { border-top-color: var(--grafite); }

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

.rodape {
  border-top: 3px solid var(--tinta);
  margin-top: var(--esp-6);
  padding: var(--esp-4) 0 var(--esp-5);
  font-size: .875rem;
}

.rodape__grade { display: grid; gap: var(--esp-3); }
.rodape h4 {
  font-family: var(--dado);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aco);
  margin: 0 0 var(--esp-1);
  font-weight: 400;
}
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { padding: .2rem 0; }
.rodape a { color: var(--grafite); text-decoration: none; }
.rodape a:hover { text-decoration: underline; text-underline-offset: .18em; }

.rodape__lei {
  font-family: var(--dado);
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--aco);
  line-height: 1.7;
  margin-top: var(--esp-4);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--neve);
}

/* ---------- Selo de confidencialidade ---------- */

.selo {
  display: inline-block;
  font-family: var(--dado);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 1px solid var(--tinta);
  padding: .35rem .7rem;
  color: var(--tinta);
}

/* ---------- Acessibilidade ---------- */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--aurora);
  outline-offset: 3px;
}

.pular {
  position: absolute;
  left: -9999px;
}
.pular:focus {
  left: var(--esp-3);
  top: var(--esp-2);
  background: var(--tinta);
  color: var(--papel);
  padding: .6rem 1rem;
  font-family: var(--dado);
  font-size: .75rem;
  z-index: 10;
}

/* ---------- Entrada ---------- */

@media (prefers-reduced-motion: no-preference) {
  .aparece { animation: sobe .7s cubic-bezier(.16,.84,.44,1) both; }
  .aparece--2 { animation-delay: .09s; }
  .aparece--3 { animation-delay: .18s; }
  @keyframes sobe {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- Telas grandes ---------- */

@media (min-width: 48rem) {
  body { font-size: 1.125rem; }
  .espera { padding: var(--esp-5); }
  .planos { grid-template-columns: repeat(3, 1fr); }
  .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .sumario__item { grid-template-columns: 4rem 1fr; }
}

@media (min-width: 68rem) {
  .artigo {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--medida));
    gap: var(--esp-4);
  }
  .artigo__rail {
    font-family: var(--dado);
    font-size: .625rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aco);
    line-height: 1.9;
    position: sticky;
    top: var(--esp-3);
    align-self: start;
  }
}

/* ---------- Impressão ---------- */

@media print {
  .nav, .espera, .botao { display: none; }
  body { font-size: 11pt; color: #000; }
}

/* ============================================================
   ADIÇÕES v2 — consentimento, idioma, botões e checkout
   ============================================================ */

.masthead__acoes { display: inline-flex; gap: var(--esp-2); }
.masthead__acoes a { color: var(--aco); text-decoration: none; border-bottom: 1px solid transparent; }
.masthead__acoes a:hover { border-bottom-color: var(--aco); }
.masthead__assine { color: var(--tinta) !important; border-bottom: 1px solid var(--tinta) !important; }

/* Variantes de botão */
.botao--escuro {
  display: inline-block;
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
  text-decoration: none;
}
.botao--escuro:hover { background: transparent; color: var(--tinta); }

.botao--claro {
  display: inline-block;
  background: transparent;
  color: var(--papel);
  border-color: var(--aco);
  text-decoration: none;
}
.botao--claro:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }

.plano__botao { margin-top: var(--esp-3); width: 100%; text-align: center; }
.plano--destaque .plano__botao { border-color: var(--papel); }

.plano__pendente {
  display: block;
  margin-top: var(--esp-3);
  font-family: var(--dado);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bruma);
}

/* Consentimento de cookies */
.consentimento {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: var(--tinta);
  color: var(--papel);
  padding: var(--esp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3);
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--aco);
}
.consentimento[hidden] { display: none; }
.consentimento__texto {
  margin: 0;
  max-width: 42rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--bruma);
}
.consentimento__texto a { color: var(--papel); }
.consentimento__botoes { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Sugestão de idioma */
.idioma-sugestao {
  position: fixed;
  top: 0; right: 0;
  z-index: 30;
  background: var(--tinta);
  color: var(--papel);
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: .6rem 1rem;
  font-family: var(--dado);
  font-size: .6875rem;
  letter-spacing: .06em;
}
.idioma-sugestao[hidden] { display: none; }
.idioma-sugestao a { color: var(--aurora); }
.idioma-sugestao button {
  background: none;
  border: 0;
  color: var(--aco);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .2rem;
}

/* Trecho restrito a assinantes — o seletor citado no JSON-LD */
.restrito { position: relative; }

.paywall {
  border-top: 1px solid var(--tinta);
  margin-top: var(--esp-4);
  padding-top: var(--esp-3);
}
.paywall__titulo {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1.1;
  margin: 0 0 var(--esp-2);
}
.paywall p { color: var(--grafite); max-width: 32rem; }

/* ---------- Área do assinante ---------- */

.entrada {
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  padding: var(--esp-3) 0;
  margin: var(--esp-3) 0;
}

.forma--clara input[type="email"] {
  border-color: var(--bruma);
  color: var(--tinta);
  background: transparent;
}
.forma--clara input::placeholder { color: var(--bruma); }

.entrada__aviso {
  margin: 0;
  font-family: var(--dado);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--grafite);
}
.entrada__aviso[hidden] { display: none; }

.restrito[hidden] { display: none; }
.paywall[hidden] { display: none; }