/* ============================================================
   A página do boletim
   ------------------------------------------------------------
   Endereço público, sem menu e sem login. Capa em degradê da
   marca, coluna de leitura larga, e o corpo com a mesma
   tipografia da folha de escrita do Owner.
   ============================================================ */

.bol-pagina {
  --roxo-800: #45209f;
  --roxo-700: #5228bd;
  --roxo-600: #5f31d6;
  --roxo-500: #7346e8;
  --roxo-400: #8f6bf1;
  --roxo-50: #f4f0fe;
  --ciano: #15c5c5;
  --tinta: #1a1a2b;
  --tinta-2: #4a4a63;
  --tinta-3: #8a8aa3;
  --linha: #e7e7f0;

  /* Titulo e destaque em Inter; o texto corrido segue na fonte do site.
     A variavel vem do layout desta rota (next/font). O resto da pilha existe
     para o primeiro quadro nao ficar sem fonte enquanto o arquivo desce. */
  --fonte-titulo: var(--fonte-boletim), "Inter", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  /* O texto corrido em Plus Jakarta, a fonte do site. Precisa ser dito aqui:
     o `body` do app pede `var(--font-sans)`, que e declarado no `:root` e
     aponta para uma variavel que so existe no `body` — nao resolve, e a pagina
     cairia na fonte do sistema. O resto do site escapa porque usa a classe do
     Tailwind. */
  font-family: var(--font-plus-jakarta, "Plus Jakarta Sans"), ui-sans-serif,
    system-ui, sans-serif;

  min-height: 100vh;
  background: #ffffff;
  color: var(--tinta);
}

.bol-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid var(--linha);
}

.bol-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
}

/* A logo entra como imagem, com a altura fixa e a largura livre para a
   proporção do arquivo mandar. */
.bol-marca img {
  display: block;
  height: 25px;
  width: auto;
}

.bol-selo {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--roxo-600);
  background: var(--roxo-50);
  padding: 0.3125rem 0.625rem;
  border-radius: 999px;
}

.bol-voltar {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta-2);
  text-decoration: none;
}

.bol-voltar:hover { color: var(--tinta); }

/* -------------------------------------------------- a capa */

.bol-capa {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 1.75rem 3.75rem;
  color: #ffffff;
  background: linear-gradient(135deg, var(--roxo-800) 0%, var(--roxo-600) 52%, var(--roxo-500) 100%);
}

/* As duas manchas ao fundo são as ondas da marca, desfocadas: dão movimento
   sem virar desenho concorrendo com o título. */
.bol-onda {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(2px);
  pointer-events: none;
}

.bol-onda-1 {
  width: 420px;
  height: 420px;
  right: -120px;
  top: -160px;
  background: radial-gradient(circle at 30% 30%, rgba(21, 197, 197, 0.55), transparent 62%);
}

.bol-onda-2 {
  width: 340px;
  height: 340px;
  left: -90px;
  bottom: -170px;
  background: radial-gradient(circle at 60% 40%, rgba(179, 154, 246, 0.5), transparent 60%);
}

.bol-capa-dentro {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.bol-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
}

.bol-capa h1 {
  margin: 1rem 0 0;
  font-size: 2.75rem;
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.bol-apoio {
  margin: 1rem 0 0;
  font-size: 1.125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 62ch;
}

.bol-meta {
  margin-top: 1.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.bol-capa-foto {
  max-width: 900px;
  margin: -2rem auto 0;
  padding: 0 1.75rem;
}

.bol-capa-foto img {
  display: block;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(34, 16, 86, 0.22);
}

/* -------------------------------------------------- o corpo */

.bol-corpo {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.75rem 1.75rem 3.5rem;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--tinta-2);
}

.bol-corpo p { margin: 0 0 1.25rem; }

.bol-corpo h2 {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  margin: 2.375rem 0 0.875rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

/* A barrinha em degradê antes do título de seção é o que amarra a página à
   marca sem precisar de mais cor no texto. */
.bol-corpo h2::before {
  content: "";
  flex: none;
  width: 6px;
  height: 24px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--roxo-500), var(--ciano));
}

.bol-corpo h3 {
  margin: 1.75rem 0 0.625rem;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

/* O Tailwind da loja zera marcador de lista no preflight. Aqui a lista precisa
   parecer lista, entao os marcadores voltam explicitamente. */
.bol-corpo ul { margin: 0 0 1.25rem; padding-left: 1.375rem; list-style: disc; }
.bol-corpo ol { margin: 0 0 1.25rem; padding-left: 1.5rem; list-style: decimal; }
.bol-corpo li { margin-bottom: 0.375rem; }
.bol-corpo li::marker { color: var(--roxo-400); }

.bol-corpo blockquote {
  margin: 0 0 1.375rem;
  padding: 0.125rem 0 0.125rem 1.125rem;
  border-left: 3px solid var(--roxo-400);
  font-style: italic;
}

.bol-corpo a {
  color: var(--roxo-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bol-corpo hr { border: 0; border-top: 1px solid var(--linha); margin: 1.875rem 0; }

.bol-corpo figure { margin: 1.75rem 0; }

.bol-corpo figure img {
  display: block;
  width: 100%;
  border-radius: 16px;
}

.bol-corpo figcaption {
  margin-top: 0.5625rem;
  font-size: 0.8125rem;
  color: var(--tinta-3);
  text-align: center;
}

.bol-corpo .boletim-destaque {
  margin: 1.75rem 0;
  padding: 1.375rem 1.5rem;
  border-radius: 16px;
  background: var(--roxo-50);
  border-left: 5px solid var(--roxo-500);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--roxo-800);
}

.bol-corpo .boletim-botao { margin: 1.75rem 0; }

.bol-corpo .boletim-botao a {
  display: inline-block;
  padding: 0.8125rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--roxo-700), var(--roxo-500));
  color: #ffffff;
  font-weight: 800;
  font-size: 0.9375rem;
  text-decoration: none;
}

.bol-corpo .boletim-botao a:hover { filter: brightness(1.06); }

.bol-rodape {
  border-top: 1px solid var(--linha);
  padding: 1.375rem 1.75rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--tinta-3);
}

.bol-rodape a { color: var(--roxo-600); text-decoration: none; }

@media (max-width: 640px) {
  .bol-capa { padding: 2.5rem 1.25rem 2.75rem; }
  .bol-capa h1 { font-size: 2rem; }
  .bol-apoio { font-size: 1rem; }
  .bol-corpo { padding: 2rem 1.25rem 2.5rem; font-size: 1rem; }
  .bol-corpo h2 { font-size: 1.3125rem; }
  .bol-capa-foto { margin-top: -1.25rem; padding: 0 1.25rem; }
}

/* -------------------------------------------------- blocos ricos */

/* Cartões de preço. Dois lado a lado no computador, empilhados no celular.
   O "antes" vive riscado dentro do cartão para a comparação ser lida de uma
   vez, sem obrigar ninguém a rolar procurando o valor antigo. */
.bol-corpo .boletim-precos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.875rem;
  margin: 1.75rem 0;
}

.bol-corpo .boletim-preco {
  position: relative;
  padding: 1.5rem 1.375rem;
  border-radius: 18px;
  border: 1px solid var(--linha);
  background: #ffffff;
}

.bol-corpo .boletim-preco-destaque {
  border-color: transparent;
  background: linear-gradient(135deg, var(--roxo-700), var(--roxo-500));
  color: #ffffff;
}

.bol-corpo .boletim-preco-nome {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--roxo-600);
}

.bol-corpo .boletim-preco-destaque .boletim-preco-nome { color: rgba(255, 255, 255, 0.82); }

.bol-corpo .boletim-preco-antes {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  color: var(--tinta-3);
  text-decoration: line-through;
}

.bol-corpo .boletim-preco-destaque .boletim-preco-antes { color: rgba(255, 255, 255, 0.62); }

.bol-corpo .boletim-preco-valor {
  display: block;
  margin-top: 0.125rem;
  font-size: 2.125rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--tinta);
}

.bol-corpo .boletim-preco-destaque .boletim-preco-valor { color: #ffffff; }

.bol-corpo .boletim-preco-nota {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tinta-3);
}

.bol-corpo .boletim-preco-destaque .boletim-preco-nota { color: rgba(255, 255, 255, 0.8); }

.bol-corpo .boletim-selo {
  position: absolute;
  top: -0.6875rem;
  right: 1.125rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3125rem 0.6875rem;
  border-radius: 999px;
  background: var(--ciano);
  color: #06373b;
}

/* Tabela de comparação. Sem grade fechada: linha fina embaixo e respiro. */
.bol-corpo .boletim-tabela {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.9375rem;
}

.bol-corpo .boletim-tabela th {
  text-align: left;
  padding: 0.6875rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-3);
  border-bottom: 1px solid var(--linha);
}

.bol-corpo .boletim-tabela td {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(231, 231, 240, 0.7);
  color: var(--tinta-2);
}

.bol-corpo .boletim-tabela tr:last-child td { border-bottom: 0; }
.bol-corpo .boletim-tabela td:first-child { font-weight: 700; color: var(--tinta); }

/* Barras. O gráfico que dá para ler no celular sem pinçar a tela. */
.bol-corpo .boletim-barras { margin: 1.75rem 0; display: grid; gap: 0.875rem; }

.bol-corpo .boletim-barra {
  display: grid;
  grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.bol-corpo .boletim-barra-rotulo { font-size: 0.875rem; font-weight: 700; color: var(--tinta); }

.bol-corpo .boletim-barra-trilho {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: #eeecfa;
  overflow: hidden;
}

.bol-corpo .boletim-barra-preenche {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--roxo-600), var(--roxo-400));
}

.bol-corpo .boletim-barra-valor {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .bol-corpo .boletim-barra { grid-template-columns: 1fr auto; }
  .bol-corpo .boletim-barra-trilho { grid-column: 1 / -1; order: 3; }
}

/* -------------------------------------------------- tipografia de destaque */

/* Uma regra so, no fim do arquivo, para nao caçar `font-family` espalhado em
   trinta blocos. Vale para titulo, selo, botao, numero e cabeçalho de tabela;
   paragrafo, lista e legenda ficam de fora de proposito, porque trocar a fonte
   do texto corrido tira o contraste que faz o titulo aparecer. */
.bol-marca,
.bol-selo,
.bol-chip,
.bol-capa h1,
.bol-apoio,
.bol-corpo h2,
.bol-corpo h3,
.bol-corpo h4,
.bol-corpo h5,
.bol-corpo h6,
.bol-corpo .boletim-destaque,
.bol-corpo .boletim-botao a,
.bol-corpo .boletim-preco-nome,
.bol-corpo .boletim-preco-valor,
.bol-corpo .boletim-selo,
.bol-corpo .boletim-tabela th,
.bol-corpo .boletim-barra-rotulo,
.bol-corpo .boletim-barra-valor {
  font-family: var(--fonte-titulo);
}